docs(18): create initiative detail phase plan

Phase 18: Initiative Detail
- 4 plans in 2 waves
- 3 parallel (wave 1), 1 sequential (wave 2)
- Ready for execution

.planning/phases/18-initiative-detail/18-02-PLAN.md

@@ -0,0 +1,148 @@
+---
+phase: 18-initiative-detail
+plan: 02
+type: execute
+wave: 1
+depends_on: []
+files_modified:
+  - packages/web/src/components/PhaseAccordion.tsx
+  - packages/web/src/components/TaskRow.tsx
+  - packages/web/src/components/DependencyIndicator.tsx
+autonomous: true
+---
+
+<objective>
+Create PhaseAccordion, TaskRow, and DependencyIndicator components for the initiative detail hierarchy view.
+
+Purpose: The core of the detail page — renders the phase → task tree with expand/collapse, status indicators, agent assignments, and dependency annotations. The UI flattens the Phase → Plan → Task hierarchy by hiding the Plan layer (per decision 15-02).
+Output: Three interconnected 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 — the primary reference for this plan
+@docs/wireframes/initiative-detail.md
+
+# Prior phase components to follow patterns
+@packages/web/src/components/StatusBadge.tsx
+@packages/web/src/components/ProgressBar.tsx
+@packages/web/src/components/InitiativeCard.tsx
+
+# tRPC client and existing types
+@packages/web/src/lib/trpc.ts
+@packages/shared/src/types.ts
+
+# tRPC router — need to understand listPlans, listTasks, getPhaseDependencies signatures
+@src/trpc/router.ts
+</context>
+
+<tasks>
+
+<task type="auto">
+  <name>Task 1: Create DependencyIndicator component</name>
+  <files>packages/web/src/components/DependencyIndicator.tsx</files>
+  <action>
+Create a component that renders dependency annotations for blocked tasks/phases.
+
+Props interface:
+- `blockedBy`: `Array<{ name: string; status: string }>` — the items blocking this one
+- `type`: `'task' | 'phase'` — for display text
+
+Layout (matching wireframe):
+- Renders a line with `^` prefix and text: "blocked by: {name1}, {name2}"
+- Text is muted/orange color (`text-orange-500` or `text-amber-600`)
+- Indented to align with parent tree structure (use `pl-8` or similar)
+- If `blockedBy` is empty, render nothing (return null)
+
+This is a pure presentational component.
+  </action>
+  <verify>npx tsc --noEmit -p packages/web/tsconfig.app.json passes</verify>
+  <done>DependencyIndicator renders blocked-by annotations with ^ prefix. Compiles cleanly.</done>
+</task>
+
+<task type="auto">
+  <name>Task 2: Create TaskRow component</name>
+  <files>packages/web/src/components/TaskRow.tsx</files>
+  <action>
+Create a component for a single task row in the phase tree.
+
+Props interface:
+- `task`: serialized Task object from tRPC (`{ id, name, status, type, priority, order }` — dates are strings)
+- `agentName`: `string | null` — agent assigned to this task (if any)
+- `blockedBy`: `Array<{ name: string; status: string }>` — blocking dependencies
+- `isLast`: `boolean` — whether this is the last sibling (affects tree connector)
+- `onClick`: `() => void` — opens task detail modal
+
+Layout (matching wireframe):
+- Row with tree connector: `|--` for siblings, `+--` for last item (use `├──` and `└──` Unicode)
+- Task name as main text
+- StatusBadge showing task status (reuse existing component)
+- If `agentName` is set, show `[agentName]` inline in blue/muted text
+- If `blockedBy` has items, render DependencyIndicator below the row (indented)
+- Entire row is clickable (calls `onClick`)
+- Use hover state: `hover:bg-accent` for clickability feedback
+
+Tree connectors: Use a left-side border or pseudo-element pattern. Keep it simple — a `border-l-2` on a wrapper div with connector characters as inline text.
+
+Do NOT add "Spawn Agent" button yet — that comes in Plan 04 with queue actions.
+  </action>
+  <verify>npx tsc --noEmit -p packages/web/tsconfig.app.json passes</verify>
+  <done>TaskRow renders task with tree connectors, status badge, agent name, and dependency indicator. Compiles cleanly.</done>
+</task>
+
+<task type="auto">
+  <name>Task 3: Create PhaseAccordion component</name>
+  <files>packages/web/src/components/PhaseAccordion.tsx</files>
+  <action>
+Create an expandable/collapsible phase container that holds TaskRow components.
+
+Props interface:
+- `phase`: serialized Phase object (`{ id, number, name, status, description }`)
+- `tasks`: `Array<{ task: SerializedTask; agentName: string | null; blockedBy: Array<{ name: string; status: string }> }>` — tasks with their metadata, already fetched and assembled by parent
+- `defaultExpanded`: `boolean` — whether to start expanded
+- `onTaskClick`: `(taskId: string) => void` — callback when a task row is clicked
+
+Behavior (matching wireframe):
+- Header row: `v`/`>` expand indicator (use `ChevronDown`/`ChevronRight` from lucide-react), phase number + name, task count `(completed/total)`, and StatusBadge for phase status
+- Click header to toggle expand/collapse (internal state with `useState`, initialized from `defaultExpanded`)
+- When expanded, render all tasks as TaskRow components
+- Phase with status 'blocked' shows DependencyIndicator below header (needs additional prop `phaseDependencies`: `Array<{ name: string; status: string }>`)
+
+Add `phaseDependencies` prop: `Array<{ name: string; status: string }>` — for phase-level blocked-by display.
+
+Use Tailwind for styling. Border-bottom between phases for visual separation.
+  </action>
+  <verify>npx tsc --noEmit -p packages/web/tsconfig.app.json passes</verify>
+  <done>PhaseAccordion renders expandable phase with task list, status, and dependency indicators. 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
+- [ ] All three components export correctly
+- [ ] Components follow existing codebase patterns (functional components, named exports, Tailwind)
+</verification>
+
+<success_criteria>
+
+- PhaseAccordion renders expandable phases with task counts and status
+- TaskRow renders tasks with tree connectors, status, agent names
+- DependencyIndicator renders blocked-by annotations
+- All components are presentational (data assembled by parent)
+- TypeScript and Vite build pass
+  </success_criteria>
+
+<output>
+After completion, create `.planning/phases/18-initiative-detail/18-02-SUMMARY.md`
+</output>