# Initiative Detail Wireframe The Initiative Detail screen shows the hierarchical breakdown of an initiative into phases and tasks. It provides visibility into progress, dependencies, and agent assignments. ## ASCII Wireframe ``` +--------------------------------------------------------------------------------+ | <- Back to Dashboard INITIATIVE DETAIL [Actions]| +--------------------------------------------------------------------------------+ | | | +--------------------------------------------------------------------------+ | | | # User Authentication System [ACTIVE] | | | | Created: 2026-01-15 | Updated: 2026-02-01 | By: user | | | +--------------------------------------------------------------------------+ | | | | +---------------------------+ +--------------------------------------------+ | | | PROGRESS | | KEY DECISIONS | | | | | | | | | | [==========------] 67% | | v Authentication Method | | | | | | JWT with httpOnly cookies | | | | Phases: 2/3 complete | | Reason: XSS protection, refresh tokens | | | | Tasks: 18/27 complete | | | | | | | | v Token Expiry | | | +---------------------------+ | 15min access / 7d refresh | | | | Reason: Balance security & UX | | | | | | | | > Session Storage (collapsed) | | | | > Password Policy (collapsed) | | | +--------------------------------------------+ | | | | +---------------------------------------------------------------------------+ | | | PHASES [Queue All] | | | +---------------------------------------------------------------------------+ | | | | v Phase 1: Core Infrastructure ------------------------------------ COMPLETE | | | | | |-- Task: Initialize repository --------------------------------- DONE | | |-- Task: Configure TypeScript ---------------------------------- DONE | | |-- Task: Setup build pipeline ---------------------------------- DONE | | |-- Task: Create bin entry -------------------------------------- DONE | | |-- Task: Add commander integration ----------------------------- DONE | | |-- Task: Create ProcessManager --------------------------------- DONE | | |-- Task: Implement graceful shutdown --------------------------- DONE | | +-- Task: Add signal handlers ----------------------------------- DONE | | | | v Phase 2: Data Layer ----------------------------------------- IN PROGRESS | | | | | |-- Task: Create schema ----------------------------------------- DONE | | |-- Task: Run migrations --------------- [gastown] --------- IN PROGRESS | | |-- Task: User repository -------------------- [blocked] ------- PENDING | | | ^ blocked by: Run migrations | | |-- Task: Task repository -------------------- [blocked] ------- PENDING | | | ^ blocked by: Run migrations | | +-- Task: Init repository -------------------- [blocked] ------- PENDING | | ^ blocked by: User repository, Task repository | | | | > Phase 3: Git Integration (0/6 tasks) ----------------------------- PENDING | | ^ blocked by: Phase 2 | | | +----------------------------------------------------------------------------------+ Legend: v = Expanded section (click to collapse) > = Collapsed section (click to expand) ^ = Dependency indicator Status Indicators: DONE / COMPLETE = Task/phase finished IN PROGRESS = Currently being worked on PENDING = Not yet started BLOCKED = Has unresolved dependencies [agent-name] = Agent assigned to task ``` ## Expanded View: Task with Agent ``` +-- Task: Run migrations -------------------------------------------- IN PROGRESS | | Assigned to: gastown Started: 2026-02-01 14:30 | Worktree: ~/.cw-worktrees/gastown Duration: 12m 34s | | +------------------------------------------------------------------+ | | Last output (3 min ago): | | | > Running migration 003_add_sessions... | | | > Creating index on sessions.user_id... | | +------------------------------------------------------------------+ | | [View Logs] [View Worktree] [Stop Agent] ``` ## Expanded View: Blocked Task with Dependencies ``` +-- Task: Init repository --------------------------------------------- PENDING | | ^ Blocked by: | | Task: User repository (PENDING) | | Task: Task repository (PENDING) | | Dependencies must complete before this task can start. | | [Spawn Agent] (disabled - blocked) ``` ## Component Specifications ### PhaseAccordion Container for a phase that can be expanded/collapsed to show its tasks. **Props:** | Prop | Type | Description | |------|------|-------------| | `phase` | `Phase` | Phase entity with status, number, name | | `tasks` | `Task[]` | Tasks belonging to this phase | | `expanded` | `boolean` | Whether section is expanded | | `onToggle` | `() => void` | Toggle expand/collapse | **Behavior:** - Default: First incomplete phase expanded, completed phases collapsed - Click header to toggle expand/collapse - Shows phase status badge (COMPLETE, IN PROGRESS, PENDING, BLOCKED) - Shows task count: `(completed/total tasks)` - Shows dependency indicator if blocked by another phase ### TaskRow Single task row with status, assignment, and actions. **Props:** | Prop | Type | Description | |------|------|-------------| | `task` | `Task` | Task entity with title, status, assigned_to | | `depth` | `number` | Nesting depth for indentation | | `isLast` | `boolean` | Whether this is last sibling (affects connector) | **Behavior:** - Click row opens TaskDetailModal - Shows agent name inline if assigned: `[agent-name]` - Shows status: DONE, IN PROGRESS, PENDING, BLOCKED - Pending tasks show "Spawn Agent" on hover - Tree connectors: `|--` for siblings, `+--` for last item ### DependencyIndicator Shows what's blocking a task or phase. **Props:** | Prop | Type | Description | |------|------|-------------| | `blockedBy` | `Dependency[]` | Array of blocking items | | `type` | `'task' \| 'phase'` | What level this dependency is at | **Behavior:** - Renders `^` symbol with hover tooltip - Clicking shows full dependency path - Format: `blocked by: {task/phase name}` ### DecisionList Collapsible list of key decisions made for this initiative. **Props:** | Prop | Type | Description | |------|------|-------------| | `decisions` | `Decision[]` | Array of {topic, decision, reason} | | `maxVisible` | `number` | How many to show before "show more" | **Behavior:** - Each decision is collapsible (topic visible, details expand) - `v` prefix for expanded, `>` for collapsed - Shows topic as header, decision and reason as details ### ProgressPanel Shows overall progress metrics for the initiative. **Props:** | Prop | Type | Description | |------|------|-------------| | `phasesComplete` | `number` | Completed phases count | | `phasesTotal` | `number` | Total phases | | `tasksComplete` | `number` | Completed tasks count | | `tasksTotal` | `number` | Total tasks | **Behavior:** - Progress bar shows percentage based on tasks - Breakdown by phase and task counts ## Interaction Notes ### Click Actions | Element | Action | |---------|--------| | Phase header | Expand/collapse phase | | Task row | Opens TaskDetailModal | | Agent name `[gastown]` | Navigates to agent detail view | | "Spawn Agent" button | Opens agent spawn dialog for this task | | "Queue Phase" button | Dispatches all pending tasks in phase to queue | | "Queue All" button | Dispatches all pending tasks across all phases | | Back button | Returns to Initiative Dashboard | | Decision topic | Expand/collapse decision details | ### TaskDetailModal When clicking a task row, a modal opens with: ``` +------------------------------------------------------+ | Task: Run migrations [X] | +------------------------------------------------------+ | | | Status: IN PROGRESS Priority: Normal | | Phase: Data Layer Started: 14:30 | | Assigned: gastown | | | | Description: | | Run database migrations for user and session | | tables. Verify indexes created correctly. | | | | Dependencies: | | - Task: Create schema (DONE) | | | | Blocks: | | - Task: User repository | | - Task: Task repository | | | | [View Agent Logs] [Stop Task] [Mark Complete] | +------------------------------------------------------+ ``` ### Agent Spawn Dialog When clicking "Spawn Agent" on a pending task: ``` +------------------------------------------------------+ | Spawn Agent for Task [X] | +------------------------------------------------------+ | | | Task: User repository | | Phase: Data Layer | | | | Agent name: [auto-generated: yaletown] | | Mode: [Execute v] | | | | The agent will: | | 1. Create isolated git worktree | | 2. Execute the task | | 3. Report completion or questions | | | | [Cancel] [Spawn Agent] | +------------------------------------------------------+ ``` ## Status Colors | Status | Color | Meaning | |--------|-------|---------| | COMPLETE / DONE | Green | Work finished | | IN PROGRESS / ACTIVE | Blue | Currently being worked | | PENDING | Gray | Not yet started | | BLOCKED | Orange | Has unresolved dependencies | ## Responsive Considerations - On narrow screens, collapse the KEY DECISIONS panel - Phase tree maintains full width for readability - Task rows truncate long titles with ellipsis - Agent names link to agent detail in all views --- *Wireframe for: Initiative Detail Screen* *Part of: Codewalk District Frontend Design*