---
phase: 17-initiative-dashboard
plan: 04
type: execute
wave: 3
depends_on: ["17-02", "17-03"]
files_modified:
  - packages/web/src/routes/initiatives/index.tsx
  - packages/web/src/layouts/AppLayout.tsx
autonomous: true
---

<objective>
Assemble the full Initiative Dashboard page by wiring all components together and connecting the header's "New Initiative" button.

Purpose: This is the integration plan — the dashboard page replaces the placeholder with a working initiative list, filter dropdown, and create dialog. The AppLayout header button gets connected.
Output: Fully functional Initiative Dashboard matching the wireframe.
</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

@docs/wireframes/initiative-dashboard.md
@packages/web/src/routes/initiatives/index.tsx
@packages/web/src/layouts/AppLayout.tsx
@packages/web/src/components/InitiativeList.tsx
@packages/web/src/components/InitiativeCard.tsx
@packages/web/src/components/CreateInitiativeDialog.tsx
@packages/web/src/components/SpawnArchitectDropdown.tsx
@packages/web/src/components/ActionMenu.tsx
@packages/web/src/components/StatusBadge.tsx
@packages/web/src/components/ProgressBar.tsx
@packages/web/src/lib/trpc.ts
</context>

<tasks>

<task type="auto">
  <name>Task 1: Wire Initiative Dashboard page</name>
  <files>packages/web/src/routes/initiatives/index.tsx</files>
  <action>
Replace the placeholder DashboardPage with a fully functional initiative dashboard.

**Page layout:**
1. Page header section:
   - Title: "Initiatives" (h1, text-2xl font-bold)
   - Filter dropdown: Select component (or simple button group) for status filter
     - Options: All, Active, Completed, Archived (matching backend enum)
     - Default: "All"
     - Use a simple `<select>` element styled with Tailwind, or install shadcn Select if preferred. A `<select>` is fine for now.

2. Initiative list:
   - Render `<InitiativeList statusFilter={selectedFilter} onCreateNew={() => setCreateDialogOpen(true)} />`

3. CreateInitiativeDialog:
   - Controlled by `createDialogOpen` state
   - Opened by both the page header "New Initiative" button AND the empty state CTA

**State management:**
- `const [statusFilter, setStatusFilter] = useState<'all' | 'active' | 'completed' | 'archived'>('all')`
- `const [createDialogOpen, setCreateDialogOpen] = useState(false)`

**Navigation integration:**
- InitiativeCard's `onView` should use TanStack Router's `useNavigate` to go to `/initiatives/${id}`
- Pass this down through InitiativeList to each card

Wire up all callbacks:
- `onView` → navigate to detail
- `onSpawnArchitect` → handled within SpawnArchitectDropdown (self-contained)
- `onDelete` → handled within ActionMenu (self-contained), but invalidate list queries after
  </action>
  <verify>npx tsc --noEmit -p packages/web/tsconfig.app.json</verify>
  <done>Dashboard page renders initiative list with filter, create dialog, and all card actions wired</done>
</task>

<task type="auto">
  <name>Task 2: Connect AppLayout header button and verify build</name>
  <files>packages/web/src/layouts/AppLayout.tsx</files>
  <action>
The AppLayout currently has a placeholder "New Initiative" button in the header. There are two approaches:

**Option A (simpler):** Remove the header button. The "New Initiative" action lives on the dashboard page itself (the filter bar area and empty state CTA are sufficient).

**Option B:** Keep the header button but it needs to communicate with the dashboard page to open the create dialog. This requires lifting state up or using a global event.

Go with **Option A** — remove the "+ New Initiative" button from the AppLayout header. The dashboard page owns the create action via its own button in the page header area. This keeps the layout generic (other pages like Inbox shouldn't show "New Initiative").

Replace the header button with nothing (or a small spacer). The layout header becomes: logo left, empty right.

After this change, verify the full frontend build:
- Run `npm run build -w packages/web` to confirm Vite production build succeeds
- Run `npx tsc --noEmit -p packages/web/tsconfig.app.json` to confirm types are clean
  </action>
  <verify>npm run build -w packages/web && npx tsc --noEmit -p packages/web/tsconfig.app.json</verify>
  <done>AppLayout header simplified, full frontend build and type check pass with all Phase 17 components integrated</done>
</task>

</tasks>

<verification>
Before declaring plan complete:
- [ ] `npm run build -w packages/web` succeeds (Vite production build)
- [ ] `npx tsc --noEmit -p packages/web/tsconfig.app.json` passes
- [ ] Dashboard page shows initiative list from tRPC API
- [ ] Filter dropdown changes displayed initiatives
- [ ] Create dialog opens, creates initiative, list refreshes
- [ ] Card actions (view, spawn architect, archive) all wired
- [ ] Empty state renders when no initiatives exist
</verification>

<success_criteria>

- Initiative Dashboard is fully functional, replacing placeholder
- All wireframe elements present: title, filter, initiative cards, empty state
- tRPC queries and mutations wired correctly
- Build passes without errors
- AppLayout header is clean (no orphaned placeholder buttons)
  </success_criteria>

<output>
After completion, create `.planning/phases/17-initiative-dashboard/17-04-SUMMARY.md`
</output>
