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

<objective>
Create InitiativeHeader and ProgressPanel components for the initiative detail page.

Purpose: The header provides navigation back to the dashboard, displays initiative metadata (name, status, dates), and the progress panel shows phase/task completion stats with a progress bar.
Output: Two reusable 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

# 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
@packages/web/src/lib/trpc.ts

# Existing route placeholder
@packages/web/src/routes/initiatives/$id.tsx

# Shared types
@packages/shared/src/types.ts
</context>

<tasks>

<task type="auto">
  <name>Task 1: Create InitiativeHeader component</name>
  <files>packages/web/src/components/InitiativeHeader.tsx</files>
  <action>
Create a header component for the initiative detail page.

Props interface:
- `initiative`: object with `{ id: string; name: string; status: string; createdAt: string; updatedAt: string }` (serialized initiative from tRPC — dates are ISO strings)
- `onBack`: `() => void` callback for the back button

Layout (matching wireframe):
- Top bar: left-aligned "← Back to Dashboard" button (use `ChevronLeft` from lucide-react), right-aligned "[Actions]" placeholder (just a disabled Button for now — actions come in Plan 04)
- Below: Card containing initiative name as h1, status badge (reuse existing StatusBadge component), and metadata line showing created/updated dates formatted as readable strings (use `new Date(iso).toLocaleDateString()`)

Use Tailwind classes. Follow same component structure as InitiativeCard (functional component, named export).
Do NOT fetch data — this is a presentational component that receives props.
  </action>
  <verify>npx tsc --noEmit -p packages/web/tsconfig.app.json passes with no errors</verify>
  <done>InitiativeHeader renders initiative name, status badge, dates, and back button. TypeScript compiles cleanly.</done>
</task>

<task type="auto">
  <name>Task 2: Create ProgressPanel component</name>
  <files>packages/web/src/components/ProgressPanel.tsx</files>
  <action>
Create a progress panel component matching the wireframe's PROGRESS section.

Props interface:
- `phasesComplete`: number
- `phasesTotal`: number
- `tasksComplete`: number
- `tasksTotal`: number

Layout:
- Card with "Progress" heading
- Reuse existing ProgressBar component for overall task percentage (`tasksComplete / tasksTotal * 100`, handle 0/0 as 0%)
- Below the bar: two lines of text: "Phases: {phasesComplete}/{phasesTotal} complete" and "Tasks: {tasksComplete}/{tasksTotal} complete"

Use Tailwind. Follow Card component from shadcn (CardHeader, CardContent pattern).
This is a pure presentational component — no data fetching.
  </action>
  <verify>npx tsc --noEmit -p packages/web/tsconfig.app.json passes with no errors</verify>
  <done>ProgressPanel displays progress bar with phase/task completion stats. TypeScript 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 and follow existing patterns
</verification>

<success_criteria>

- InitiativeHeader component created with back button, name, status badge, dates
- ProgressPanel component created with progress bar and phase/task counts
- Both components are presentational (no data fetching)
- TypeScript and Vite build pass
  </success_criteria>

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