feat: Task decomposition for Tailwind/Radix/shadcn foundation setup
Decomposed "Foundation Setup - Install Dependencies & Configure Tailwind" phase into 6 executable tasks: 1. Install Tailwind CSS, PostCSS & Autoprefixer 2. Map MUI theme to Tailwind design tokens 3. Setup CSS variables for dynamic theming 4. Install Radix UI primitives 5. Initialize shadcn/ui and setup component directory 6. Move MUI to devDependencies and verify setup Tasks follow logical dependency chain with final human verification checkpoint before proceeding with component migration. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Lukas May
@@ -1,364 +0,0 @@
|
||||
# Agent Inbox Wireframe
|
||||
|
||||
Message queue UI where users see questions from agents and respond to them.
|
||||
|
||||
## Screen Layout
|
||||
|
||||
### Inbox List View
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ Agent Inbox (3) [Refresh] │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ Filter: [All ▾] Sort: [Newest ▾] │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ ● gastown (waiting) 2 min ago │
|
||||
│ "Which auth provider should we use? I need to decide..." │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ ● chinatown (waiting) 5 min ago │
|
||||
│ "I found 3 potential issues with the migration..." │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ ○ yaletown (done) 15 min ago │
|
||||
│ "Task completed: Created user schema" │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Legend:**
|
||||
- ● = Requires response (agent waiting)
|
||||
- ○ = Informational (no response needed)
|
||||
|
||||
### Empty State
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ Agent Inbox (0) [Refresh] │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ No pending messages │
|
||||
│ │
|
||||
│ Agents will appear here when they have │
|
||||
│ questions or status updates │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## Message Detail View
|
||||
|
||||
### Single Question (Radio Buttons)
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ gastown → You 2 minutes ago │
|
||||
│ Task: Implement auth middleware │
|
||||
│ Worktree: .cw-worktrees/gastown │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ Q1: Which authentication provider should we use? │
|
||||
│ │
|
||||
│ ○ Supabase Auth - Built-in with our DB │
|
||||
│ ○ Clerk - Beautiful pre-built UI │
|
||||
│ ○ NextAuth.js - Self-hosted, maximum control │
|
||||
│ ○ Other: [________________] │
|
||||
│ │
|
||||
│ [Cancel] [Send Answers] │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Multi-Question Format
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ gastown → You 2 minutes ago │
|
||||
│ Task: Implement auth middleware │
|
||||
│ Worktree: .cw-worktrees/gastown │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ Q1: Which authentication provider should we use? │
|
||||
│ │
|
||||
│ ○ Supabase Auth - Built-in with our DB │
|
||||
│ ○ Clerk - Beautiful pre-built UI │
|
||||
│ ○ NextAuth.js - Self-hosted, maximum control │
|
||||
│ ○ Other: [________________] │
|
||||
│ │
|
||||
│ Q2: Should we implement refresh token rotation? │
|
||||
│ │
|
||||
│ ○ Yes - More secure │
|
||||
│ ○ No - Simpler implementation │
|
||||
│ │
|
||||
│ Q3: Session storage preference? │
|
||||
│ │
|
||||
│ ○ Database - Full control, revocation │
|
||||
│ ○ JWT only - Stateless, simpler │
|
||||
│ │
|
||||
│ [Cancel] [Send Answers] │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Multi-Select Question (Checkboxes)
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ chinatown → You 5 minutes ago │
|
||||
│ Task: Configure database schema │
|
||||
│ Worktree: .cw-worktrees/chinatown │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ Q1: Which optional features should we include? │
|
||||
│ (Select all that apply) │
|
||||
│ │
|
||||
│ ☐ Soft deletes - Mark deleted instead of removing │
|
||||
│ ☐ Audit logging - Track all changes │
|
||||
│ ☐ Full-text search - PostgreSQL tsvector │
|
||||
│ ☐ Row-level security - Fine-grained access │
|
||||
│ │
|
||||
│ Q2: Primary key strategy? │
|
||||
│ │
|
||||
│ ○ UUID - Globally unique, no collisions │
|
||||
│ ○ Serial - Simple, human-readable │
|
||||
│ ○ ULID - Sortable UUIDs │
|
||||
│ │
|
||||
│ [Cancel] [Send Answers] │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Free-Text Answer
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ yaletown → You 10 minutes ago │
|
||||
│ Task: Set up deployment │
|
||||
│ Worktree: .cw-worktrees/yaletown │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ Q1: What should the production domain be? │
|
||||
│ │
|
||||
│ ┌─────────────────────────────────────────────────────┐ │
|
||||
│ │ app.example.com │ │
|
||||
│ └─────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ Q2: Any custom environment variables needed? │
|
||||
│ │
|
||||
│ ┌─────────────────────────────────────────────────────┐ │
|
||||
│ │ FEATURE_FLAGS=beta │ │
|
||||
│ │ API_RATE_LIMIT=1000 │ │
|
||||
│ └─────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ [Cancel] [Send Answers] │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Notification Message (No Response)
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ yaletown → You 15 minutes ago │
|
||||
│ Task: Create user schema │
|
||||
│ Worktree: .cw-worktrees/yaletown │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ✓ Task completed successfully │
|
||||
│ │
|
||||
│ Created: │
|
||||
│ - src/db/schema/user.ts │
|
||||
│ - src/db/schema/session.ts │
|
||||
│ - migrations/001_create_users.sql │
|
||||
│ │
|
||||
│ Ready for merge into main branch. │
|
||||
│ │
|
||||
│ [Dismiss] [View Changes] │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## Component Specifications
|
||||
|
||||
### InboxList
|
||||
|
||||
**Props:**
|
||||
- `messages: Message[]` - List of messages to display
|
||||
- `filter: 'all' | 'waiting' | 'completed'` - Current filter state
|
||||
- `sort: 'newest' | 'oldest'` - Sort order
|
||||
- `onFilterChange: (filter) => void` - Filter change handler
|
||||
- `onSortChange: (sort) => void` - Sort change handler
|
||||
- `onRefresh: () => void` - Refresh handler
|
||||
- `onSelectMessage: (messageId: string) => void` - Message selection handler
|
||||
|
||||
**Behavior:**
|
||||
- Displays message cards in a scrollable list
|
||||
- Shows unread count badge in header
|
||||
- Filterable by status (All, Waiting, Completed)
|
||||
- Sortable by timestamp (Newest first, Oldest first)
|
||||
- Clicking a message expands the detail view
|
||||
|
||||
### MessageCard
|
||||
|
||||
**Props:**
|
||||
- `message: Message` - Message data
|
||||
- `isSelected: boolean` - Whether this card is currently selected
|
||||
- `onClick: () => void` - Click handler
|
||||
|
||||
**Display:**
|
||||
- Sender agent name with status indicator (● waiting, ○ done)
|
||||
- Message preview (first line, truncated)
|
||||
- Relative timestamp (e.g., "2 min ago", "1 hour ago")
|
||||
|
||||
**States:**
|
||||
- Default - normal styling
|
||||
- Selected - highlighted/expanded
|
||||
- Unread - bold text, filled indicator
|
||||
|
||||
### MessageDetail
|
||||
|
||||
**Props:**
|
||||
- `message: Message` - Full message data
|
||||
- `onSubmit: (answers: Record<string, string>) => void` - Submit handler
|
||||
- `onCancel: () => void` - Cancel/close handler
|
||||
|
||||
**Display:**
|
||||
- Header: Sender name, timestamp, task info, worktree path
|
||||
- Content: All questions with their input components
|
||||
- Footer: Action buttons (Cancel, Send Answers / Dismiss)
|
||||
|
||||
**Behavior:**
|
||||
- Validates all required questions are answered before enabling submit
|
||||
- Calls agent resume with formatted answers on submit
|
||||
- Closes detail view on cancel or successful submit
|
||||
|
||||
### QuestionForm
|
||||
|
||||
**Props:**
|
||||
- `questions: Question[]` - Array of questions to render
|
||||
- `answers: Record<string, string>` - Current answer state
|
||||
- `onAnswerChange: (questionId: string, answer: string) => void` - Answer change handler
|
||||
|
||||
**Renders:**
|
||||
- Sequential question components based on question type
|
||||
- Each question has unique ID for answer correlation
|
||||
- Supports mixed question types in same form
|
||||
|
||||
### OptionGroup
|
||||
|
||||
**Props:**
|
||||
- `questionId: string` - Question identifier
|
||||
- `options: Option[]` - Available options
|
||||
- `multiSelect: boolean` - Whether to use checkboxes (true) or radio buttons (false)
|
||||
- `value: string | string[]` - Current selection
|
||||
- `onChange: (value: string | string[]) => void` - Change handler
|
||||
- `allowOther: boolean` - Whether to show "Other" free-text option
|
||||
|
||||
**Behavior:**
|
||||
- Radio buttons for single-select (default)
|
||||
- Checkboxes for multi-select
|
||||
- "Other" field appears when `allowOther` is true
|
||||
- Typing in "Other" selects it automatically
|
||||
|
||||
### FreeTextInput
|
||||
|
||||
**Props:**
|
||||
- `questionId: string` - Question identifier
|
||||
- `placeholder: string` - Placeholder text
|
||||
- `multiline: boolean` - Single line or textarea
|
||||
- `value: string` - Current value
|
||||
- `onChange: (value: string) => void` - Change handler
|
||||
|
||||
**Behavior:**
|
||||
- Single line input for short answers
|
||||
- Textarea for longer content (auto-resize optional)
|
||||
- Character limit indicator if applicable
|
||||
|
||||
## Interaction Notes
|
||||
|
||||
### Message Selection Flow
|
||||
|
||||
1. User clicks message in InboxList
|
||||
2. MessageCard enters selected state
|
||||
3. MessageDetail panel appears (expands below or in side panel)
|
||||
4. Previous selection collapses
|
||||
|
||||
### Answer Submission Flow
|
||||
|
||||
1. User selects/enters answers for all questions
|
||||
2. "Send Answers" button becomes enabled when all required answered
|
||||
3. User clicks "Send Answers"
|
||||
4. System calls `agent.resume` with formatted answers:
|
||||
```typescript
|
||||
{
|
||||
[questionId: string]: answer: string
|
||||
}
|
||||
```
|
||||
5. Detail panel closes
|
||||
6. Message moves to "Completed" status
|
||||
7. Agent continues execution
|
||||
|
||||
### Notification Handling
|
||||
|
||||
1. Completed task notifications don't require response
|
||||
2. User can dismiss to archive
|
||||
3. "View Changes" opens diff/preview (future feature)
|
||||
|
||||
### Real-Time Updates
|
||||
|
||||
1. New messages appear at top with subtle animation
|
||||
2. Unread count updates automatically
|
||||
3. Message status updates when agent state changes
|
||||
4. Optional desktop notification for new messages
|
||||
|
||||
## Filter & Sort Options
|
||||
|
||||
### Filter Options
|
||||
|
||||
| Filter | Shows |
|
||||
|--------|-------|
|
||||
| All | All messages |
|
||||
| Waiting | Messages requiring response (agent status = waiting_for_input) |
|
||||
| Completed | Notifications and answered messages |
|
||||
|
||||
### Sort Options
|
||||
|
||||
| Sort | Behavior |
|
||||
|------|----------|
|
||||
| Newest first | Most recent at top (default) |
|
||||
| Oldest first | Oldest at top |
|
||||
|
||||
## Data Schema Reference
|
||||
|
||||
### Message
|
||||
|
||||
```typescript
|
||||
interface Message {
|
||||
id: string
|
||||
sender: { type: 'agent' | 'user', id?: string }
|
||||
recipient: { type: 'agent' | 'user', id?: string }
|
||||
content: string
|
||||
requiresResponse: boolean
|
||||
parentMessageId?: string // For response threading
|
||||
createdAt: Date
|
||||
}
|
||||
```
|
||||
|
||||
### Question
|
||||
|
||||
```typescript
|
||||
interface Question {
|
||||
id: string // Unique ID for answer correlation
|
||||
question: string // The question text
|
||||
options?: Option[] // Available choices
|
||||
multiSelect?: boolean // Checkboxes vs radio buttons
|
||||
}
|
||||
|
||||
interface Option {
|
||||
value: string
|
||||
label: string
|
||||
}
|
||||
```
|
||||
|
||||
### Agent Context
|
||||
|
||||
```typescript
|
||||
interface AgentContext {
|
||||
name: string // Human-readable name (gastown, chinatown)
|
||||
status: AgentStatus // 'waiting_for_input' | 'running' | 'completed'
|
||||
taskId?: string // Associated task
|
||||
worktreeId?: string // Associated worktree
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
*Wireframe: Agent Inbox*
|
||||
*Created: 2026-02-02*
|
||||
@@ -1,344 +0,0 @@
|
||||
# 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*
|
||||
@@ -1,277 +0,0 @@
|
||||
# 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*
|
||||
Reference in New Issue
Block a user