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)
285 lines
12 KiB
Markdown
285 lines
12 KiB
Markdown
# 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-accent` background
|
|
- `[+]` in header triggers `handleStartAdd` (inline input at bottom of list)
|
|
- `[✓] Saved` shows 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 `EmptyState` card in the detail panel area
|
|
- `[layers icon]` -- Lucide `Layers` icon, `text-muted-foreground`, 48px
|
|
- Two action buttons side by side:
|
|
- `[sparkles Plan with Agent]` -- primary variant, calls `planSpawn.spawn()`
|
|
- `[+ Add Phase]` -- outline variant, calls `onAddPhase()` 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]` -- `Loader2` with `animate-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]` -- Lucide `Sparkles` icon, `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] branch` badge 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]` -- `Loader2` with `animate-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
|
|
- `[!]` -- `AlertCircle` icon, `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>` in `ExecutionContext`
|
|
|
|
---
|
|
|
|
## Source
|
|
|
|
- `packages/web/src/components/ExecutionTab.tsx` (Plan tab = ExecutionTab with sidebar+detail layout)
|
|
- `packages/web/src/components/execution/PlanSection.tsx`
|
|
- `packages/web/src/components/execution/PhaseSidebarItem.tsx`
|
|
- `packages/web/src/components/execution/PhaseDetailPanel.tsx`
|
|
- `packages/web/src/components/execution/PhaseActions.tsx`
|
|
- `packages/web/src/components/execution/TaskModal.tsx`
|
|
- `packages/web/src/components/TaskRow.tsx`
|
|
- `packages/web/src/hooks/useAutoSave.ts`
|