---
phase: 17-initiative-dashboard
plan: 02
subsystem: ui
tags: [react, trpc, shadcn, lucide-react, tailwind]

# Dependency graph
requires:
  - phase: 17-01
    provides: StatusBadge and ProgressBar components
  - phase: 16-03
    provides: tRPC client wiring
provides:
  - InitiativeCard component with status, progress, and actions
  - InitiativeList component with loading/empty/error states and filtering
  - SerializedInitiative type for tRPC wire format
affects: [17-03, 17-04, 18]

# Tech tracking
tech-stack:
  added: []
  patterns:
    - "SerializedInitiative type for tRPC Date→string serialization"
    - "Per-card phase stats query (N+1 acceptable for v1)"

key-files:
  created:
    - packages/web/src/components/InitiativeCard.tsx
    - packages/web/src/components/InitiativeList.tsx
  modified: []

key-decisions:
  - "SerializedInitiative type instead of raw Initiative (tRPC serializes Date to string)"
  - "Per-card phase stats fetch via trpc.listPhases (N+1 acceptable for v1 dashboard)"

patterns-established:
  - "tRPC wire types need serialized equivalents for Date fields"

# Metrics
duration: 2min
completed: 2026-02-04
---

# Phase 17 Plan 02: InitiativeCard & InitiativeList Summary

**InitiativeCard with self-contained phase stats and InitiativeList with tRPC queries, status filtering, and loading/empty/error states**

## Performance

- **Duration:** 2 min
- **Started:** 2026-02-04T20:03:14Z
- **Completed:** 2026-02-04T20:04:59Z
- **Tasks:** 2
- **Files modified:** 2

## Accomplishments
- InitiativeCard renders name, StatusBadge, ProgressBar, phase count, View button, Spawn Architect dropdown, and more actions menu
- Each card self-contained: fetches own phase stats via trpc.listPhases
- InitiativeList fetches initiatives with optional status filter, handles all four states (loading, error, empty, populated)
- Responsive layout: stacks vertically on mobile, hides phase count text on small screens

## Task Commits

Each task was committed atomically:

1. **Task 1: Create InitiativeCard component** - `ec93835` (feat)
2. **Task 2: Create InitiativeList component** - `895c964` (feat)

## Files Created/Modified
- `packages/web/src/components/InitiativeCard.tsx` - Single initiative row with status, progress, actions, and self-contained phase stats query
- `packages/web/src/components/InitiativeList.tsx` - Initiative list with tRPC data fetching, status filtering, and loading/empty/error states

## Decisions Made
- 17-02: SerializedInitiative type instead of raw Initiative type from schema (tRPC serializes Date to string over JSON wire format)
- 17-02: Per-card phase stats query via trpc.listPhases (N+1 acceptable for v1 with small initiative counts)

## Deviations from Plan

### Auto-fixed Issues

**1. [Rule 3 - Blocking] Created SerializedInitiative type for tRPC Date serialization**
- **Found during:** Task 2 (InitiativeList)
- **Issue:** tRPC serializes Date to string over JSON. Initiative type has Date fields (createdAt, updatedAt) but tRPC query returns string. Type mismatch blocked compilation.
- **Fix:** Created SerializedInitiative interface with string date fields, used in both InitiativeCard and InitiativeList props
- **Files modified:** packages/web/src/components/InitiativeCard.tsx
- **Verification:** npx tsc --noEmit passes
- **Committed in:** 895c964 (Task 2 commit)

---

**Total deviations:** 1 auto-fixed (1 blocking)
**Impact on plan:** Necessary for TypeScript compilation. No scope creep.

## Issues Encountered
None

## User Setup Required
None - no external service configuration required.

## Next Phase Readiness
- Card and list components ready for page integration in Plan 03
- SerializedInitiative type established for consistent tRPC wire format usage

---
*Phase: 17-initiative-dashboard*
*Completed: 2026-02-04*