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

phase, plan, type, wave, depends_on, files_modified, autonomous

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

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.

<execution_context> @/.claude/get-shit-done/workflows/execute-plan.md @/.claude/get-shit-done/templates/summary.md </execution_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

Task 1: Create DecisionList component packages/web/src/components/DecisionList.tsx 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. npx tsc --noEmit -p packages/web/tsconfig.app.json passes DecisionList renders collapsible decision items with show more/less. Compiles cleanly.

Task 2: Create TaskDetailModal component packages/web/src/components/TaskDetailModal.tsx 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. npx tsc --noEmit -p packages/web/tsconfig.app.json passes TaskDetailModal renders full task details with dependencies, dependents, and action buttons. Compiles cleanly.

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

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

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