---
phase: 23-brainstormer-flow
plan: "02"
subsystem: ui
tags: [components, hooks, brainstormer, chat, spec-card, handoff, task-badge, status-badge]
dependency_graph:
  requires: ["23-00"]
  provides: ["ChatSpecCard", "ChatHandoffIndicator", "ChatTaskCreatedBadge", "ChatStatusUpdateBadge", "useBrainstormerDefault"]
  affects: ["ui/src/components/ChatMessage.tsx"]
tech_stack:
  added: []
  patterns:
    - "React local state for edit/draft/submitting mode in ChatSpecCard"
    - "React Query cache deduplication via shared queryKey in useBrainstormerDefault"
    - "Tailwind motion-safe: prefix for reduced-motion accessibility"
    - "CSS variable tokens (bg-card, border-border, text-muted-foreground) for theme compatibility"
key_files:
  created:
    - ui/src/components/ChatSpecCard.tsx
    - ui/src/components/ChatHandoffIndicator.tsx
    - ui/src/components/ChatTaskCreatedBadge.tsx
    - ui/src/components/ChatStatusUpdateBadge.tsx
    - ui/src/hooks/useBrainstormerDefault.ts
  modified:
    - ui/src/components/ChatMessageList.tsx
decisions:
  - "Used @/lib/router Link (not react-router-dom) — consistent with project router abstraction pattern"
  - "useBrainstormerDefault uses Agent type from @paperclipai/shared for type-safe sort comparator"
  - "ChatSpecCardInner extracted as inner component to avoid conditional hook calls after JSON.parse error path"
metrics:
  duration: "5 minutes"
  completed_date: "2026-04-01"
  tasks: 2
  files_created: 5
  files_modified: 1
---

# Phase 23 Plan 02: UI Components for Brainstormer Flow Summary

**One-liner:** Five new UI components — spec card with edit mode, handoff separator, task badge, status badge, and general-agent selector hook — using CSS variables and motion-safe animations.

## Tasks Completed

| Task | Name | Commit | Files |
|------|------|--------|-------|
| 1 | ChatSpecCard and ChatHandoffIndicator components | 1489e499 | ChatSpecCard.tsx, ChatHandoffIndicator.tsx |
| 2 | ChatTaskCreatedBadge, ChatStatusUpdateBadge, useBrainstormerDefault | 651864ba | ChatTaskCreatedBadge.tsx, ChatStatusUpdateBadge.tsx, useBrainstormerDefault.ts, ChatMessageList.tsx (fix) |

## Verification

- `pnpm exec tsc --noEmit -p ui/tsconfig.json` — PASS (clean, no errors)
- Existing test suite — pre-existing failures in server tests (skill-registry-routes, app-hmr-port, plugin-worker-manager, company-import-export-e2e) are unrelated to UI changes introduced here

## Deviations from Plan

### Auto-fixed Issues

**1. [Rule 3 - Blocking] Fixed missing messageType in ChatMessageList synthetic streaming entry**
- **Found during:** Task 2 TypeScript check
- **Issue:** `ChatMessage` shared type now requires `messageType: string | null` (added in Plan 23-00 DB migration), but the synthetic streaming entry object in `ChatMessageList.tsx` was missing this field, causing TS2322 type error
- **Fix:** Added `messageType: null` to the synthetic streaming entry object
- **Files modified:** `ui/src/components/ChatMessageList.tsx`
- **Commit:** 651864ba

**2. [Rule 2 - Pattern] Used project router abstraction instead of react-router-dom**
- **Found during:** Task 2 — plan said `import { Link } from "react-router-dom"` but project uses `@/lib/router` wrapper
- **Fix:** Used `import { Link } from "@/lib/router"` consistent with all other components in the codebase
- **Files modified:** `ui/src/components/ChatTaskCreatedBadge.tsx`, `ui/src/components/ChatStatusUpdateBadge.tsx`

## Known Stubs

None — all components have complete implementations. No data stubbed or hardcoded placeholder content that blocks plan goals.

## Self-Check: PASSED