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

310 lines
12 KiB
Markdown
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