Codewalkers/docs/archive/wireframes/initiative-dashboard.md

Initiative Dashboard Wireframe

The Initiative Dashboard is the primary entry point for Codewalkers. It displays all initiatives with their status, progress, and quick actions.

---

ASCII Wireframe

Default State (With Initiatives)

+------------------------------------------------------------------------------+
|  CODEWALK DISTRICT                                    [+ New Initiative]     |
+------------------------------------------------------------------------------+
|  Initiatives    Agents    Tasks    Settings                                  |
+------------------------------------------------------------------------------+
|                                                                              |
|  +------------------------------------------------------------------------+  |
|  | INITIATIVES                                              Filter: [All v]|  |
|  +------------------------------------------------------------------------+  |
|  |                                                                        |  |
|  | +--------------------------------------------------------------------+ |  |
|  | | User Authentication                                                | |  |
|  | | Status: [IN PROGRESS]    Progress: ████████░░░░ 67%    Phases: 3/4 | |  |
|  | | [View]  [Spawn Architect v]  [...]                                 | |  |
|  | +--------------------------------------------------------------------+ |  |
|  |                                                                        |  |
|  | +--------------------------------------------------------------------+ |  |
|  | | Payment Integration                                                | |  |
|  | | Status: [APPROVED]       Progress: ░░░░░░░░░░░░  0%    Phases: 0/5 | |  |
|  | | [View]  [Spawn Architect v]  [...]                                 | |  |
|  | +--------------------------------------------------------------------+ |  |
|  |                                                                        |  |
|  | +--------------------------------------------------------------------+ |  |
|  | | Dashboard Redesign                                                 | |  |
|  | | Status: [DRAFT]          Progress: ░░░░░░░░░░░░  0%    Phases: 0/0 | |  |
|  | | [View]  [Spawn Architect v]  [...]                                 | |  |
|  | +--------------------------------------------------------------------+ |  |
|  |                                                                        |  |
|  | +--------------------------------------------------------------------+ |  |
|  | | API Rate Limiting                                                  | |  |
|  | | Status: [COMPLETED]      Progress: ████████████ 100%   Phases: 2/2 | |  |
|  | | [View]  [Spawn Architect v]  [...]                                 | |  |
|  | +--------------------------------------------------------------------+ |  |
|  |                                                                        |  |
|  +------------------------------------------------------------------------+  |
|                                                                              |
+------------------------------------------------------------------------------+

Empty State

+------------------------------------------------------------------------------+
|  CODEWALK DISTRICT                                    [+ New Initiative]     |
+------------------------------------------------------------------------------+
|  Initiatives    Agents    Tasks    Settings                                  |
+------------------------------------------------------------------------------+
|                                                                              |
|  +------------------------------------------------------------------------+  |
|  | INITIATIVES                                              Filter: [All v]|  |
|  +------------------------------------------------------------------------+  |
|  |                                                                        |  |
|  |                                                                        |  |
|  |                                                                        |  |
|  |                         No initiatives yet                             |  |
|  |                                                                        |  |
|  |                    Create your first initiative to                     |  |
|  |                    start planning and executing work.                  |  |
|  |                                                                        |  |
|  |                       [+ New Initiative]                               |  |
|  |                                                                        |  |
|  |                                                                        |  |
|  |                                                                        |  |
|  +------------------------------------------------------------------------+  |
|                                                                              |
+------------------------------------------------------------------------------+

Spawn Architect Dropdown

+--------------------------------------------------------------------+
| User Authentication                                                |
| Status: [IN PROGRESS]    Progress: ████████░░░░ 67%    Phases: 3/4 |
| [View]  [Spawn Architect v]  [...]                                 |
|         +--------------------+                                     |
|         | Discuss            |  <-- Capture context/decisions      |
|         | Breakdown          |  <-- Create phases from initiative  |
|         +--------------------+                                     |
+--------------------------------------------------------------------+

More Actions Menu

+--------------------------------------------------------------------+
| User Authentication                                                |
| Status: [IN PROGRESS]    Progress: ████████░░░░ 67%    Phases: 3/4 |
| [View]  [Spawn Architect v]  [...]                                 |
|                              +--------------------+                |
|                              | Edit               |                |
|                              | Duplicate          |                |
|                              | Archive            |                |
|                              | Delete             |                |
|                              +--------------------+                |
+--------------------------------------------------------------------+

---

Component Specifications

InitiativeCard

Displays a single initiative as a row in the dashboard list.

Props:

Prop	Type	Description
initiative	Initiative	The initiative data object
onView	() => void	Callback when View is clicked
onSpawnArchitect	(mode: 'discuss' | 'breakdown') => void	Callback for architect actions
onDelete	() => void	Callback when Delete is selected

Display Logic:

• Title: initiative.title
• Status: Rendered via StatusBadge component
• Progress: Rendered via ProgressBar component using phases_completed / phases_total
• Phases: Text showing {completed}/{total} phase count

Behavior:

• Entire row is clickable, navigates to initiative detail view
• Click propagation stopped for action buttons

---

ProgressBar

Visual progress indicator showing completion percentage.

Props:

Prop	Type	Description
completed	number	Number of completed phases
total	number	Total number of phases

Display Logic:

Progress calculation: percentage = (completed / total) * 100
If total is 0, show empty bar (0%)

Visual representation (12 characters wide):
  0%:   ░░░░░░░░░░░░
 25%:   ███░░░░░░░░░
 50%:   ██████░░░░░░
 75%:   █████████░░░
100%:   ████████████

Variants:

• Default: Blue filled blocks
• Completed (100%): Green filled blocks
• Empty (0/0 phases): Gray outline, no fill

---

StatusBadge

Color-coded badge indicating initiative status.

Props:

Prop	Type	Description
status	InitiativeStatus	One of the status enum values

Color Mapping:

Status	Color	Background
draft	Gray	#E5E7EB
review	Yellow	#FEF3C7
approved	Blue	#DBEAFE
in_progress	Blue	#DBEAFE
completed	Green	#D1FAE5
rejected	Red	#FEE2E2

Text Display:

• Uppercase, e.g., DRAFT, IN PROGRESS, COMPLETED
• in_progress rendered as IN PROGRESS (space separated)

---

ActionMenu

Dropdown menu for initiative actions.

Props:

Prop	Type	Description
initiativeId	string	ID of the initiative
onEdit	() => void	Edit callback
onDuplicate	() => void	Duplicate callback
onArchive	() => void	Archive callback
onDelete	() => void	Delete callback

Menu Items:

1. Edit - Opens initiative edit form
2. Duplicate - Creates a copy of the initiative
3. Archive - Moves to archived state (soft delete)
4. Delete - Permanent deletion (with confirmation)

Behavior:

• Opens on click of [...] button
• Closes on outside click or Escape key
• Delete shows confirmation dialog before executing

---

SpawnArchitectDropdown

Dropdown for selecting Architect agent mode.

Props:

Prop	Type	Description
initiativeId	string	ID of the initiative
onSpawn	(mode: 'discuss' | 'breakdown') => void	Spawn callback with selected mode

Menu Items:

1. Discuss - Spawns Architect in discuss mode to capture context and decisions
2. Breakdown - Spawns Architect in breakdown mode to create phases from initiative

Behavior:

• Opens on click of [Spawn Architect v] button
• Selecting an option triggers the spawn and closes dropdown
• Shows loading state while agent is spawning

---

Interaction Notes

Navigation

Action	Result
Click initiative row	Navigate to /initiatives/{id} (detail view)
Click "View" button	Navigate to /initiatives/{id} (detail view)
Click "New Initiative"	Navigate to /initiatives/new (create form)
Click "Initiatives" nav	Current page (highlight active)
Click "Agents" nav	Navigate to /agents
Click "Tasks" nav	Navigate to /tasks
Click "Settings" nav	Navigate to /settings

Spawn Architect Flow

1. User clicks "Spawn Architect" dropdown
2. Dropdown shows mode options: Discuss, Breakdown
3. User selects mode (e.g., "Discuss")
4. System calls cw architect discuss --initiative {id}
5. Agent spawns, dropdown closes
6. Toast notification: "Architect agent spawned for discussion"
7. User can monitor progress in Agents view

Filter Behavior

The filter dropdown allows filtering by status:

• All - Shows all initiatives
• Draft - Only draft initiatives
• Review - Only initiatives in review
• Approved - Only approved initiatives
• In Progress - Only in-progress initiatives
• Completed - Only completed initiatives
• Rejected - Only rejected initiatives

Keyboard Shortcuts (Future)

Key	Action
n	Open new initiative form
/	Focus filter/search
j/k	Navigate up/down in list
Enter	Open selected initiative
Esc	Close any open dropdown

---

Data Requirements

Initiative Object

interface Initiative {
  id: string;           // e.g., "init-a1b2c3"
  title: string;        // e.g., "User Authentication"
  status: InitiativeStatus;
  phasesTotal: number;  // Total number of phases
  phasesCompleted: number; // Phases with status='completed'
  createdAt: number;    // Unix timestamp
  updatedAt: number;    // Unix timestamp
}

type InitiativeStatus =
  | 'draft'
  | 'review'
  | 'approved'
  | 'in_progress'
  | 'completed'
  | 'rejected';

API Endpoint

// GET /api/initiatives
// Returns: Initiative[]

// Query params:
// - status?: InitiativeStatus (filter by status)
// - limit?: number (pagination)
// - offset?: number (pagination)

---

Responsive Behavior

Desktop (>1024px)

• Full layout as shown in wireframes
• All columns visible
• Actions inline

Tablet (768px - 1024px)

• Progress text hidden, only bar visible
• Phase count condensed: 3/4 instead of Phases: 3/4

Mobile (<768px)

• Cards stack vertically (one per row)
• Progress bar below title
• Actions in collapsible menu only (no inline buttons)

---

Wireframe version: 1.0 Last updated: 2026-02-02