- Back button with ChevronLeft icon for dashboard navigation
- Card displaying initiative name, status badge, and dates
- Disabled Actions placeholder button for future Plan 04 work
- Pure presentational component receiving props
The dashboard page now owns the create action via its own header button
and empty state CTA. This keeps AppLayout generic — other pages like
Inbox shouldn't show initiative-specific actions.
Replace placeholder DashboardPage with fully functional initiative dashboard:
- Page header with title, status filter dropdown, and New Initiative button
- InitiativeList with statusFilter prop for backend-driven filtering
- CreateInitiativeDialog controlled by local state
- Navigation to /initiatives/$id via TanStack Router useNavigate
- All card callbacks wired (view, spawn architect, delete placeholder)
- Fetches initiatives via trpc.listInitiatives with optional status filter
- Handles loading, error, empty, and populated states
- Empty state shows "No initiatives yet" with CTA button
- Error state shows message with retry button
- Renders vertical stack of InitiativeCards with space-y-3 gap
- Fix: SerializedInitiative type for tRPC Date→string serialization
- SpawnArchitectDropdown: discuss/breakdown modes via tRPC mutations
- Brief success state on button text after spawn
- ActionMenu: archive with browser confirm, disabled edit/duplicate/delete
- No deleteInitiative tRPC procedure exists, so delete is placeholder
- Both components invalidate listInitiatives on success
- Install shadcn Dialog, Input, Label, Textarea components
- Move from @/ literal dir to src/components/ui/ (known shadcn CLI issue)
- CreateInitiativeDialog: controlled dialog with name/description fields
- tRPC createInitiative mutation with loading/error states
- Form resets on open, validates name non-empty
- Renders initiative name, StatusBadge, ProgressBar, and phase count
- Fetches phase stats per-card via trpc.listPhases (self-contained)
- Spawn Architect dropdown with discuss/breakdown modes
- More actions menu with edit/duplicate/archive/delete
- Responsive: stacks vertically on mobile, hides phase count text
- Card clickable with stopPropagation on action buttons
- Percentage-based horizontal bar with completed/total props
- Gray track (bg-muted), blue fill for partial, green fill for 100%
- Text label showing percentage
- Handles 0/0 total gracefully (empty bar)
Create route structure with __root, index (redirect to /initiatives),
initiatives/index (dashboard stub), initiatives/$id (detail stub with
type-safe params), and inbox (stub). Add AppLayout with persistent nav
header matching wireframe: title, New Initiative button, navigation tabs
with active highlighting. Disabled tabs for Agents/Tasks/Settings (out
of scope). Replace temporary health-check App with RouterProvider.
Route tree auto-generated by TanStack Router Vite plugin.
Create tRPC client with httpBatchLink targeting /trpc (Vite proxy).
Wrap app in trpc.Provider and QueryClientProvider with sensible
defaults. Add health check query to App.tsx for connection
verification. Add vite-env.d.ts for CSS module types. Remove
unused Plan import from backend router.
Add @trpc/client, @trpc/react-query, @tanstack/react-query to web
package. Link @codewalk-district/shared as workspace dependency.
Add project reference to shared in tsconfig.app.json.
- Tailwind CSS v3 with postcss and autoprefixer
- shadcn/ui components.json and cn() utility
- Path alias @/ -> ./src/ in vite.config.ts and tsconfig.app.json
- CSS custom properties for shadcn theming (light/dark)
- tailwindcss-animate and @tailwindcss/typography plugins
- App.tsx uses cn() with Tailwind classes to verify integration
- packages/web/ with Vite dev server, React 19, TypeScript
- Server proxy /trpc -> http://127.0.0.1:3847 for CORS-free dev
- Root npm workspaces configured (packages/*)
- dev:web script for workspace dev server
