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

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

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

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.

<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

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

Task 1: Create InitiativeHeader component packages/web/src/components/InitiativeHeader.tsx 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. npx tsc --noEmit -p packages/web/tsconfig.app.json passes with no errors InitiativeHeader renders initiative name, status badge, dates, and back button. TypeScript compiles cleanly.

Task 2: Create ProgressPanel component packages/web/src/components/ProgressPanel.tsx 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. npx tsc --noEmit -p packages/web/tsconfig.app.json passes with no errors ProgressPanel displays progress bar with phase/task completion stats. TypeScript 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 and follow existing patterns

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

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