# Execution Tab (v2) ### Route: `/initiatives/$id` (Execution tab) ### Source: `packages/web/src/components/pipeline/PipelineTab.tsx`, `packages/web/src/components/pipeline/` --- ## v1 -> v2 Changes | Aspect | v1 | v2 | |--------|----|----| | Batch dispatch | None -- individual task/phase queue buttons only | "Queue All Pending" button at top of execution view | | Dispatch feedback | Instant status change, no transition | 3-frame animation: `[play]` -> `[spinner] Queuing...` -> `[QUEUED]` + toast | | Task overflow | All tasks rendered regardless of count | First 6 tasks shown, then "Show N more" expandable link | | Status legend | None | Legend row at bottom: `* Active ● Done ? Pending ! Error ○ Blocked` | | Empty state | Shared with Plan tab empty state | Dedicated message: "No tasks to execute. Create tasks in the Plan tab." | | All done state | No special treatment | Success message with green checkmark | --- ## Default State (pipeline with phases) ``` +=============================================================================+ | Execution [ Queue All Pending ] | | | | Phase: OAuth Implementation | | +-------------------+ +-------------------+ +-------------------+ | | | Level 0 | | Level 1 | | Level 2 | | | | | | | | | | | | * Set up routes |---->| * PKCE flow |---->| Token refresh | | | | [DONE] | | [RUNNING] | | [PENDING] [play]| | | | | | | | | | | | * DB schema |---->| Provider adaptr | | | | | | [DONE] | | [BLOCKED] | | | | | +-------------------+ +-------------------+ +-------------------+ | | | | Phase: Token Management | | +-------------------+ | | | Level 0 | | | | | | | | Rotation logic | | | | [PENDING] [play]| | | | Expiry handling | | | | [PENDING] [play]| | | | + Show 4 more | | | +-------------------+ | | | | ● Done * Active ? Pending ! Error ○ Blocked | +=============================================================================+ ``` - `[ Queue All Pending ]` -- dispatches all tasks with `status === 'pending'` that have no unresolved dependencies - Pipeline columns computed via `groupPhasesByDependencyLevel()` topological sort - Horizontal scroll when columns exceed viewport width - `---->` connector arrows between dependency levels - `[play]` button visible on hover for `pending` tasks only (not `blocked` or `running`) - Status legend row pinned to bottom of execution view --- ## Queue All Pending Button ``` +-------------------------+ | [play] Queue All Pending| default state +-------------------------+ +-------------------------+ | [spinner] Queuing... | while mutation is in-flight +-------------------------+ +-------------------------+ | [check] 5 tasks queued | success (reverts to default after 2s) +-------------------------+ ``` - Outline variant button, positioned top-right of execution header - Disabled when no eligible pending tasks exist - Calls `trpc.queueAllPending.useMutation({ initiativeId })` - Toast notification: "N tasks queued" --- ## Dispatch Feedback (3-frame animation) Individual task dispatch transitions through three visual states: ### Frame 1: Before (idle pending) ``` +-------------------------------------------+ | Token refresh [PENDING] [play] | +-------------------------------------------+ ``` - `[play]` icon visible on hover (`opacity-0 group-hover:opacity-100`) - `Clock` icon for `[PENDING]` status, `text-muted-foreground` ### Frame 2: During (queuing) ``` +-------------------------------------------+ | Token refresh [spinner] Queuing... | +-------------------------------------------+ ``` - `[play]` replaced by `Loader2` with `animate-spin` - "Queuing..." text replaces status badge - Row background: subtle `bg-primary/5` pulse ### Frame 3: After (queued) ``` +-------------------------------------------+ | Token refresh [QUEUED] | +-------------------------------------------+ ``` - Status badge transitions to `[QUEUED]` (blue tint) - Toast: "Task queued" (via sonner) - `[play]` button no longer rendered (task is no longer `pending`) --- ## Task Overflow in Phase Cards ### Collapsed (default when > 6 tasks) ``` +-----------------------------------------+ | * Phase: Token Management [PENDING] | |-----------------------------------------| | Rotation logic [PENDING] | | Expiry handling [PENDING] | | Refresh tokens [PENDING] | | Revocation logic [PENDING] | | Audit logging [PENDING] | | Rate limiting [PENDING] | | + Show 4 more | +-----------------------------------------+ ``` - First 6 tasks always visible - `+ Show N more` is a text button at bottom of card, `text-primary text-xs` - Count dynamically reflects hidden task count ### Expanded (after clicking "Show N more") ``` +-----------------------------------------+ | * Phase: Token Management [PENDING] | |-----------------------------------------| | Rotation logic [PENDING] | | Expiry handling [PENDING] | | Refresh tokens [PENDING] | | Revocation logic [PENDING] | | Audit logging [PENDING] | | Rate limiting [PENDING] | | Key rotation [PENDING] | | Token introspection [PENDING] | | Blacklist service [PENDING] | | Migration script [PENDING] | | - Show less | +-----------------------------------------+ ``` - All tasks rendered - `- Show less` collapses back to 6 - Expansion state is per-phase-card, resets on tab switch --- ## Pipeline Phase Group Detail ``` +-----------------------------------------+ | * Phase 2: OAuth Flow [READY] [play] | StatusDot + name + badge + queue btn |-----------------------------------------| | [play] Set up OAuth routes [DONE] | [play] on hover for pending only | [play] Implement PKCE flow [RUNNING] | running tasks: Loader2 icon, no play | [ .. ] Google provider [BLOCKED] | blocked tasks: Ban icon, no play | [play] Microsoft provider [PENDING] | +-----------------------------------------+ ``` - Phase header `[play]` queues all eligible tasks in the phase - Task `[play]` queues individual task - Clicking a task row opens `` (via `ExecutionContext`) - Task sort order: `sortByPriorityAndQueueTime()` from shared package --- ## Connector Arrows ``` +--------+ +--------+ | Phase | ------[>]-----> | Phase | +--------+ +--------+ horizontal line + triangle arrow between columns ``` - SVG arrows drawn between dependency levels - Arrow color: `text-border` (muted, follows theme) - Multiple phases in same level stack vertically --- ## Empty State (no tasks to execute) ``` +=============================================================================+ | Execution | | | | +---------------------------------------------------------------------+ | | | | | | | [list-checks icon] | | | | No tasks to execute | | | | | | | | Create tasks in the Plan tab to start execution. | | | | | | | | [ Go to Plan Tab ] | | | | | | | +---------------------------------------------------------------------+ | | | +=============================================================================+ ``` - Centered `EmptyState` card - `[list-checks icon]` -- Lucide `ListChecks`, 48px, `text-muted-foreground` - `[ Go to Plan Tab ]` -- outline button, navigates to `?tab=plan` - Shown when: `phases.length === 0 && !phasesLoading` --- ## All Tasks Done (completion state) ``` +=============================================================================+ | Execution | | | | +---------------------------------------------------------------------+ | | | | | | | [check-circle icon] | | | | All tasks completed | | | | | | | | Every task across all phases has been executed. | | | | | | | | [ View in Review Tab ] | | | | | | | +---------------------------------------------------------------------+ | | | | ● Done * Active ? Pending ! Error ○ Blocked | +=============================================================================+ ``` - `[check-circle icon]` -- Lucide `CheckCircle2`, 48px, `text-green-500` - "All tasks completed" -- `text-lg font-medium` - `[ View in Review Tab ]` -- outline button, navigates to `?tab=review` - Shown when: all tasks across all phases have `status === 'completed'` - Legend row still visible at bottom --- ## Status Legend Row ``` ● Done * Active ? Pending ! Error ○ Blocked ``` - Fixed at bottom of execution view (below pipeline graph) - Each item: colored dot/symbol + label - `●` -- `text-green-500` (CheckCircle2) - `*` -- `text-blue-500` (Loader2, no spin in legend) - `?` -- `text-muted-foreground` (Clock) - `!` -- `text-red-500` (AlertTriangle) - `○` -- `text-red-500/50` (Ban) - `text-xs text-muted-foreground`, `flex gap-4 justify-center` --- ## Loading State ``` +=============================================================================+ | Execution | | | | [spinner] Loading pipeline... | | | +=============================================================================+ ``` - `Loader2` with `animate-spin` + "Loading pipeline..." - `text-muted-foreground`, centered - Shown while `phasesLoading || tasksQuery.isLoading` --- ## Source - `packages/web/src/components/pipeline/PipelineTab.tsx` - `packages/web/src/components/pipeline/PipelineGraph.tsx` - `packages/web/src/components/pipeline/PipelineStageColumn.tsx` - `packages/web/src/components/pipeline/PipelinePhaseGroup.tsx` - `packages/web/src/components/pipeline/PipelineTaskCard.tsx` - `packages/web/src/components/execution/ExecutionContext.tsx` - `packages/web/src/components/execution/TaskModal.tsx` - `packages/web/src/components/execution/PlanSection.tsx`