1156933a8e
Simplified to Initiative → Phase → Task (no intermediate Plan layer). Removed PlanTree component, tasks now directly under PhaseAccordion.
278 lines
12 KiB
Markdown
278 lines
12 KiB
Markdown
# 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*
|