Codewalkers/.planning/phases/18-initiative-detail/18-03-PLAN.md

---
phase: 18-initiative-detail
plan: 03
type: execute
wave: 1
depends_on: []
files_modified:
  - packages/web/src/components/DecisionList.tsx
  - packages/web/src/components/TaskDetailModal.tsx
autonomous: true
---

<objective>
Create DecisionList and TaskDetailModal components for the initiative detail page.

Purpose: DecisionList shows key decisions made during initiative planning (collapsible). TaskDetailModal opens when clicking a task row to show full task details, dependencies, agent assignment, and action buttons.
Output: Two components ready for page assembly in Plan 04.
</objective>

<execution_context>
@~/.claude/get-shit-done/workflows/execute-plan.md
@~/.claude/get-shit-done/templates/summary.md
</execution_context>

<context>
@.planning/PROJECT.md
@.planning/ROADMAP.md
@.planning/STATE.md

# Wireframe spec
@docs/wireframes/initiative-detail.md

# Existing shadcn components
@packages/web/src/components/ui/dialog.tsx
@packages/web/src/components/ui/button.tsx
@packages/web/src/components/ui/badge.tsx
@packages/web/src/components/ui/card.tsx

# Existing feature components for patterns
@packages/web/src/components/StatusBadge.tsx
@packages/web/src/components/InitiativeCard.tsx

# tRPC client
@packages/web/src/lib/trpc.ts
@packages/shared/src/types.ts
</context>

<tasks>

<task type="auto">
  <name>Task 1: Create DecisionList component</name>
  <files>packages/web/src/components/DecisionList.tsx</files>
  <action>
Create a collapsible list of key decisions matching the wireframe's KEY DECISIONS panel.

Props interface:
- `decisions`: `Array<{ topic: string; decision: string; reason: string }>` — decisions to display
- `maxVisible`: `number` (default 3) — how many to show before "show more"

Behavior (matching wireframe):
- Each decision is individually collapsible: topic as header, decision + reason expand on click
- Use `ChevronDown`/`ChevronRight` from lucide-react for expand indicators
- Internal state: `expandedIndices` as `Set<number>` tracking which decisions are expanded
- "Show more" / "Show less" button if decisions exceed `maxVisible` — uses another state toggle

Layout:
- Wrap in Card (CardHeader with "Key Decisions" title, CardContent with list)
- Each decision item: clickable topic row, expandable detail below with decision text and "Reason: {reason}" in muted text
- If `decisions` array is empty, render Card with "No decisions recorded" placeholder text

NOTE: There is currently no `listDecisions` tRPC procedure. The parent page will pass an empty array for now. This component is built for the future when decisions are persisted. This is intentional — the component is ready, the data source comes later.
  </action>
  <verify>npx tsc --noEmit -p packages/web/tsconfig.app.json passes</verify>
  <done>DecisionList renders collapsible decision items with show more/less. Compiles cleanly.</done>
</task>

<task type="auto">
  <name>Task 2: Create TaskDetailModal component</name>
  <files>packages/web/src/components/TaskDetailModal.tsx</files>
  <action>
Create a modal dialog that shows full task details when clicking a task row.

Props interface:
- `task`: serialized Task object or `null` (null = modal closed)
- `phaseName`: `string` — name of the phase this task belongs to
- `agentName`: `string | null` — assigned agent
- `dependencies`: `Array<{ name: string; status: string }>` — tasks this one depends on
- `dependents`: `Array<{ name: string; status: string }>` — tasks blocked by this one
- `onClose`: `() => void` — close the modal
- `onQueueTask`: `(taskId: string) => void` — callback to queue this task for dispatch
- `onStopTask`: `(taskId: string) => void` — callback to stop this task (placeholder)

Layout (matching wireframe TaskDetailModal):
- Use shadcn Dialog component (controlled: `open={task !== null}`, `onOpenChange` calls `onClose`)
- DialogHeader: Task name + close button (built into Dialog)
- Content grid:
  - Status: StatusBadge
  - Priority: text display
  - Phase: phaseName
  - Type: task.type
  - Agent: agentName or "Unassigned"
- Description section: task.description or "No description"
- Dependencies section: list of dependency names with their status badges. If empty, "No dependencies"
- Blocks section: list of dependent names. If empty, "None"
- DialogFooter: action buttons
  - "Queue Task" button (enabled only if task status is 'pending' and dependencies array has all 'completed' items)
  - "Stop Task" button (enabled only if task status is 'in_progress')
  - Both call their respective callbacks with task.id

Use shadcn Dialog, Button, Badge components. Follow controlled dialog pattern from CreateInitiativeDialog.
  </action>
  <verify>npx tsc --noEmit -p packages/web/tsconfig.app.json passes</verify>
  <done>TaskDetailModal renders full task details with dependencies, dependents, and action buttons. Compiles cleanly.</done>
</task>

</tasks>

<verification>
Before declaring plan complete:
- [ ] `npx tsc --noEmit -p packages/web/tsconfig.app.json` passes
- [ ] `npx vite build` in packages/web succeeds
- [ ] Both components export correctly
- [ ] Dialog follows controlled pattern matching CreateInitiativeDialog
</verification>

<success_criteria>

- DecisionList renders collapsible decisions with show more/less
- TaskDetailModal renders full task details in a dialog with action buttons
- Both components are presentational with callback props for actions
- TypeScript and Vite build pass
  </success_criteria>

<output>
After completion, create `.planning/phases/18-initiative-detail/18-03-SUMMARY.md`
</output>