tas/Codewalkers
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
478a7f18e9ac9f8ee41a535f39feca1416ea4ed4
Codewalkers/docs/wireframes/v2/execution-tab.md
Lukas May 478a7f18e9 docs: Add v2 wireframes and theme specification 
14 files in docs/wireframes/v2/ addressing 13 UX gaps from v1:
- Theme spec with indigo brand, status tokens, terminal/diff tokens,
  dark mode, Geist typography, 6px radius, layered shadows
- Wireframes for all pages with loading/error/empty states
- Shared component specs (SaveIndicator, EmptyState, ErrorState,
  CommandPalette, ThemeToggle)
2026-03-02 18:13:17 +09:00

12 KiB
Raw Blame History

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 <TaskModal> (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
Reference in New Issue View Git Blame Copy Permalink