# Initiative Dashboard Wireframe

The Initiative Dashboard is the primary entry point for Codewalk District. 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

```typescript
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

```typescript
// 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*