478a7f18e9
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)
12 KiB
12 KiB
Plan Tab (v2)
Route: /initiatives/$id (Plan tab)
Source: packages/web/src/components/ExecutionTab.tsx, packages/web/src/components/execution/
v1 -> v2 Changes
| Aspect | v1 | v2 |
|---|---|---|
| Save indicator | None on phase description editor | <SaveIndicator> component (same as Content tab) |
| Empty state (no agent) | Single "No phases yet" with both spinner and buttons shown contextually | Split: dedicated "No phases yet" empty state with action buttons |
| Empty state (agent running) | Spinner + "Planning phases..." inline with buttons | Dedicated "Planning in progress..." state, NO action buttons |
| Pending review | Banner only on individual phase detail | Additional top-level banner when proposals exist initiative-wide |
Default State (phases exist, one selected)
+=============================================================================+
| Phases [+] | Phase: OAuth Implementation |
| --------------------------+ [✓] Saved |
| +------------------------+| ------------------------------------------------|
| | 1. Auth Setup || Description: |
| | [DONE] 3/3 || Implement OAuth 2.0 authorization code flow |
| +------------------------+| with PKCE extension for public clients. |
| +------------------------+| |
| |*2. OAuth Flow *|| Support Google, GitHub, and Microsoft as |
| | [READY] 0 tasks || identity providers with configurable scopes. |
| | dep: 1 || |
| +------------------------+| Dependencies |
| +------------------------+| [+ Add dependency v] |
| | 3. UI Components || * Phase 1: Auth Setup [DONE] [x] |
| | [PENDING] 5 tasks || |
| | dep: 1, 2 || Tasks (0/5) [+ Add Task] |
| +------------------------+| ├── Set up OAuth routes * [DONE] |
| | ├── Implement PKCE flow * [RUNNING] |
| | │ agent: blue-fox-7 |
| 260px | ├── Google provider [PENDING] [x] |
| | ├── GitHub provider [BLOCKED] [x] |
| | │ blocked by: Google provider |
| | └── Microsoft provider [PENDING] [x] |
| | |
+=============================================================================+
- Phase sidebar: 260px,
border-right - Selected phase: left blue border +
bg-accentbackground [+]in header triggershandleStartAdd(inline input at bottom of list)[✓] Savedshows after phase description auto-save completes- Task
[x]delete buttons appear on hover; Shift+click bypasses confirm dialog
Phase Sidebar Cards
+------------------------+
| 1. Auth Setup | Phase number + name (truncated)
| [DONE] 3/3 | StatusBadge (small) + "complete/total tasks"
+------------------------+
+------------------------+
|*2. OAuth Flow *| * = selected (border-l-2 border-primary bg-accent)
| [READY] 0 tasks | "0 tasks" when no tasks decomposed yet
| dep: 1 | dependency indicator
+------------------------+
+------------------------+
| 3. UI Components |
| [PENDING] 5 tasks |
| dep: 1, 2 | multiple dependency shorthand
+------------------------+
Phase Actions (sidebar header)
Phases [Detailing (2)] [+] [Detail All]
^^^^^^^^^^^^^^ ^^^^^^^^^^^
spinner + count sparkles icon
when detail agents disabled when no
are active eligible phases
[Detailing (N)]spinner badge shows when N detail agents are running[Detail All]spawns detail agents for all phases with 0 tasks[+]opens inline input for new phase name
Save Indicator on Phase Description
Same <SaveIndicator> component as Content tab, positioned top-right of phase detail header.
Saving
Phase: OAuth Implementation [spinner] Saving...
Saved
Phase: OAuth Implementation [✓] Saved
Failed
Phase: OAuth Implementation [!] Failed [retry]
Empty State -- No Phases (no agent running)
+=============================================================================+
| Phases | |
| --------------------------+ |
| (empty) | +------------------------------------------+ |
| | | | |
| | | [layers icon] | |
| | | No phases yet | |
| | | | |
| | | Add a phase to start planning, | |
| | | or let an agent plan for you. | |
| | | | |
| | | [sparkles Plan with Agent] [+ Add Phase] |
| | | | |
| | +------------------------------------------+ |
| | |
+=============================================================================+
- Centered
EmptyStatecard in the detail panel area [layers icon]-- LucideLayersicon,text-muted-foreground, 48px- Two action buttons side by side:
[sparkles Plan with Agent]-- primary variant, callsplanSpawn.spawn()[+ Add Phase]-- outline variant, callsonAddPhase()for inline input
- Only shown when:
phasesLoaded && phases.length === 0 && !isPlanRunning
Empty State -- Planning in Progress (agent running)
+=============================================================================+
| Phases | |
| --------------------------+ |
| (empty) | +------------------------------------------+ |
| | | | |
| | | [spinner] | |
| | | Planning in progress... | |
| | | | |
| | | Agent is analyzing the initiative | |
| | | and creating phases. | |
| | | | |
| | +------------------------------------------+ |
| | |
+=============================================================================+
[spinner]--Loader2withanimate-spin, 32px,text-primary- "Planning in progress..." --
text-base font-medium - Subtext --
text-sm text-muted-foreground - NO action buttons -- prevents user from adding phases while agent works
- Shown when:
phasesLoaded && phases.length === 0 && isPlanRunning
Pending Review Banner (top-level)
+=============================================================================+
| +---------------------------------------------------------------------+ |
| | [sparkles] Agent has proposals ready for review [Go to Review ->] | |
| +---------------------------------------------------------------------+ |
| Phases [+] | Phase: OAuth Implementation |
| --------------------------+ [✓] Saved |
| ... | ... |
+=============================================================================+
- Full-width banner above the sidebar+detail grid
[sparkles]-- LucideSparklesicon,text-amber-500- Background:
bg-amber-50 dark:bg-amber-950/20 border border-amber-200 dark:border-amber-800 [Go to Review ->]-- text button that navigates to?tab=review- Shown when: proposals with
status === 'pending'exist for this initiative - Query:
trpc.listProposals.useQuery({ initiativeId, status: 'pending' })
Phase Detail Header
+------------------------------------------------------------------------+
| Phase 2: OAuth Implementation [READY] [git] branch [...] |
| | | |
| branch badge v |
| +--------+
| | Delete |
| | Phase |
| +--------+
+------------------------------------------------------------------------+
- Phase name is inline-editable (click to toggle input)
[...]dropdown: Delete Phase (Shift+click bypasses confirm)[git] branchbadge shows initiative branch when set
Detailing In Progress (per-phase)
+------------------------------------------------------------------------+
| Phase 2: OAuth Implementation [READY] [spinner] Detailing |
+------------------------------------------------------------------------+
- Shown in phase detail header when a detail agent is active for this phase
[spinner]--Loader2withanimate-spin
Per-Phase Pending Review Banner
+------------------------------------------------------------------------+
| [!] This phase is pending review. Go to the Review tab to review. |
+------------------------------------------------------------------------+
- Shown below phase header when phase-specific proposals are pending
[!]--AlertCircleicon,text-amber-500- Distinct from top-level banner (this is phase-scoped)
Task Detail Modal (overlay)
+----------------------------------------------------------+
| Set up OAuth routes [x] |
| |
| Status [PENDING] | Category execute |
| Phase 2. OAuth Flow | Priority normal |
| Agent (none) | |
| |
| Description |
| Create Express routes for /auth/login, /auth/callback, |
| and /auth/logout with proper middleware chain. |
| |
| Dependencies |
| * DB Schema Migration [DONE] |
| |
| Blocks |
| * GitHub provider adapter [BLOCKED] |
| |
| [ Queue Task ] [ Stop Task ] |
+----------------------------------------------------------+
- Opened by clicking any task row
[x]close button top-right[ Queue Task ]dispatches the task;[ Stop Task ]kills the running agent- Shared component via
<TaskModal>inExecutionContext
Source
packages/web/src/components/ExecutionTab.tsx(Plan tab = ExecutionTab with sidebar+detail layout)packages/web/src/components/execution/PlanSection.tsxpackages/web/src/components/execution/PhaseSidebarItem.tsxpackages/web/src/components/execution/PhaseDetailPanel.tsxpackages/web/src/components/execution/PhaseActions.tsxpackages/web/src/components/execution/TaskModal.tsxpackages/web/src/components/TaskRow.tsxpackages/web/src/hooks/useAutoSave.ts