docs(21-02): complete candidate detail page and thread modal plan

- Add 21-02-SUMMARY.md with execution results
- Update STATE.md, ROADMAP.md, REQUIREMENTS.md

.planning/REQUIREMENTS.md

@@ -63,7 +63,7 @@ Requirements for this milestone. Each maps to roadmap phases.
 - [ ] **DETAIL-01**: Clicking a collection item navigates to a full detail page (`/items/:id`) showing all item data
 - [ ] **DETAIL-02**: Clicking a catalog search result navigates to a public detail page (`/global-items/:id`) with "Add to Collection" button
 - [ ] **DETAIL-03**: Item detail page has edit mode toggle for modifying personal fields (notes, category, quantity, purchase price)
-- [ ] **DETAIL-04**: Thread candidates navigate to detail pages instead of opening slide-out panels
+- [x] **DETAIL-04**: Thread candidates navigate to detail pages instead of opening slide-out panels
 - [ ] **DETAIL-05**: Slide-out panels for items and candidates are removed from the application
 
 ### Tags
@@ -184,7 +184,7 @@ Which phases cover which requirements. Updated during roadmap creation.
 | DETAIL-01 | Phase 21 | Pending |
 | DETAIL-02 | Phase 21 | Pending |
 | DETAIL-03 | Phase 21 | Pending |
-| DETAIL-04 | Phase 21 | Pending |
+| DETAIL-04 | Phase 21 | Complete |
 | DETAIL-05 | Phase 21 | Pending |
 
 **Coverage:**

.planning/ROADMAP.md

@@ -57,7 +57,7 @@
 - [x] **Phase 18: Global Items & Public Profiles** — Global item catalog, user profiles, and public setup sharing (completed 2026-04-05)
 - [x] **Phase 19: Reference Item Model & Tags Schema** — Collection items as references to global catalog, tag system for discovery (completed 2026-04-05)
 - [x] **Phase 20: FAB & Full-Screen Catalog Search** — Global FAB with mini menu, full-screen catalog search with tag filtering (completed 2026-04-06)
-- [ ] **Phase 21: Item & Catalog Detail Pages** — Full detail pages for collection items and catalog entries, replacing slide-out panels
+- [x] **Phase 21: Item & Catalog Detail Pages** — Full detail pages for collection items and catalog entries, replacing slide-out panels (completed 2026-04-06)
 - [ ] **Phase 22: Add-from-Catalog & Thread Integration** — Add catalog items to collection and threads, resolution creates reference items
 - [ ] **Phase 23: Manual Entry Fallback** — Manual add for items not in catalog, non-functional submission prompt
 
@@ -266,6 +266,6 @@ Plans:
 | 18. Global Items & Public Profiles | v2.0 | 4/5 | Complete    | 2026-04-05 |
 | 19. Reference Item Model & Tags Schema | v2.0 | 3/3 | Complete    | 2026-04-05 |
 | 20. FAB & Full-Screen Catalog Search | v2.0 | 2/2 | Complete    | 2026-04-06 |
-| 21. Item & Catalog Detail Pages | v2.0 | 0/? | Not started | - |
+| 21. Item & Catalog Detail Pages | v2.0 | 1/1 | Complete   | 2026-04-06 |
 | 22. Add-from-Catalog & Thread Integration | v2.0 | 0/? | Not started | - |
 | 23. Manual Entry Fallback | v2.0 | 0/? | Not started | - |

.planning/STATE.md

@@ -3,14 +3,14 @@ gsd_state_version: 1.0
 milestone: v1.3
 milestone_name: Research & Decision Tools
 status: planning
-stopped_at: Completed 20-02-PLAN.md
+stopped_at: Completed 21-02-PLAN.md
-last_updated: "2026-04-06T06:17:39.050Z"
+last_updated: "2026-04-06T13:03:13.009Z"
 last_activity: 2026-04-06
 progress:
-  total_phases: 14
+  total_phases: 15
-  completed_phases: 13
+  completed_phases: 14
-  total_plans: 38
+  total_plans: 39
-  completed_plans: 36
+  completed_plans: 37
   percent: 0
 ---
 
@@ -58,6 +58,8 @@ Key decisions made during v2.0 planning:
 - [Phase 20]: Created tags table in schema (was missing, needed for GET /api/tags endpoint)
 - [Phase 20]: FAB visible on all authenticated routes, not just collection gear tab
 - [Phase 20]: Add button on catalog search cards is a stub (Phase 21 wires actual flow)
+- [Phase 21]: Candidate data fetched from useThread hook (find in array) not new API endpoint
+- [Phase 21]: AddCandidateModal inline in thread page, local modal pattern replacing UIStore panel
 
 ### Pending Todos
 
@@ -68,6 +70,7 @@ None active.
 | # | Description | Date | Commit | Directory |
 |---|-------------|------|--------|-----------|
 | 260406-j44 | Comprehensive dev seed script for bikepacking gear data | 2026-04-06 | — | [260406-j44-comprehensive-dev-seed-script-for-bikepa](./quick/260406-j44-comprehensive-dev-seed-script-for-bikepa/) |
+| Phase 21 P02 | 4min | 2 tasks | 2 files |
 
 ### Blockers/Concerns
 
@@ -76,6 +79,6 @@ None active.
 
 ## Session Continuity
 
-Last session: 2026-04-06T06:12:00.000Z
+Last session: 2026-04-06T13:03:13.007Z
-Stopped at: Completed 20-02-PLAN.md
+Stopped at: Completed 21-02-PLAN.md
 Resume file: None

.planning/phases/21-item-catalog-detail-pages/21-02-PLAN.md

@@ -0,0 +1,239 @@
+---
+phase: 21-item-catalog-detail-pages
+plan: 02
+type: execute
+wave: 1
+depends_on: []
+files_modified:
+  - src/client/routes/threads/$threadId/index.tsx
+  - src/client/routes/threads/$threadId/candidates/$candidateId.tsx
+autonomous: true
+requirements: [DETAIL-04]
+must_haves:
+  truths:
+    - "Navigating to /threads/:threadId/candidates/:candidateId renders a full candidate detail page"
+    - "Candidate detail page shows name, weight, price, notes, pros, cons, status, product link, image"
+    - "Edit mode toggle works: read-only by default, editable inputs when toggled"
+    - "Back navigation returns to parent thread"
+    - "Pick as winner and delete candidate actions are available"
+    - "Thread detail page at /threads/:threadId still works after route restructuring"
+    - "Add candidate button on thread page uses modal dialog instead of slide-out panel"
+  artifacts:
+    - path: "src/client/routes/threads/$threadId/index.tsx"
+      provides: "Restructured thread detail page (moved from $threadId.tsx)"
+    - path: "src/client/routes/threads/$threadId/candidates/$candidateId.tsx"
+      provides: "Candidate detail page with edit mode"
+      exports: ["Route"]
+  key_links:
+    - from: "src/client/routes/threads/$threadId/candidates/$candidateId.tsx"
+      to: "useThread hook"
+      via: "useThread(threadId) to get candidate data"
+      pattern: "useThread"
+    - from: "src/client/routes/threads/$threadId/candidates/$candidateId.tsx"
+      to: "useUpdateCandidate mutation"
+      via: "updateCandidate.mutate"
+      pattern: "useUpdateCandidate"
+---
+
+<objective>
+Create the candidate detail page at `/threads/:threadId/candidates/:candidateId` with edit mode toggle, and restructure the thread route to support nested candidate routes. Replace the "Add Candidate" slide-out trigger on the thread page with a modal dialog.
+
+Purpose: Creates the navigation target for candidate card clicks (rewired in Plan 03). The thread route restructuring is a prerequisite for the nested candidate route.
+Output: Restructured thread route directory + new candidate detail page + add-candidate modal on thread page
+</objective>
+
+<execution_context>
+@$HOME/.claude/get-shit-done/workflows/execute-plan.md
+@$HOME/.claude/get-shit-done/templates/summary.md
+</execution_context>
+
+<context>
+@.planning/PROJECT.md
+@.planning/ROADMAP.md
+@.planning/STATE.md
+@.planning/phases/21-item-catalog-detail-pages/21-CONTEXT.md
+@.planning/phases/21-item-catalog-detail-pages/21-RESEARCH.md
+
+@src/client/routes/threads/$threadId.tsx
+@src/client/hooks/useCandidates.ts
+@src/client/hooks/useThreads.ts
+@src/client/components/CandidateForm.tsx
+@src/client/components/CandidateCard.tsx
+@src/client/components/CandidateListItem.tsx
+@src/client/stores/uiStore.ts
+
+<interfaces>
+<!-- Key hooks and types the executor needs -->
+
+From src/client/hooks/useCandidates.ts:
+```typescript
+export function useCreateCandidate(threadId: number): UseMutationResult<CandidateResponse, Error, CreateCandidate & { imageFilename?: string }>;
+export function useUpdateCandidate(threadId: number): UseMutationResult<CandidateResponse, Error, UpdateCandidate & { candidateId: number; imageFilename?: string }>;
+export function useDeleteCandidate(threadId: number): UseMutationResult<{ success: boolean }, Error, number>;
+```
+
+From src/client/hooks/useThreads.ts:
+```typescript
+export function useThread(id: number): UseQueryResult<ThreadWithCandidates>;
+export function useResolveThread(): UseMutationResult;
+// ThreadWithCandidates.candidates[]: { id, threadId, name, weightGrams, priceCents, categoryId, categoryName, categoryIcon, notes, productUrl, imageFilename, imageUrl, status, pros, cons, sortOrder, createdAt, updatedAt }
+```
+
+From src/client/components/CandidateForm.tsx:
+```typescript
+interface CandidateFormProps { mode: "add" | "edit"; threadId: number; candidateId?: number | null; }
+interface FormData {
+  name: string; weightGrams: string; priceDollars: string; categoryId: number;
+  notes: string; productUrl: string; imageFilename: string | null; pros: string; cons: string;
+}
+```
+
+From src/client/stores/uiStore.ts (properties used by thread page):
+```typescript
+openCandidateAddPanel: () => void;     // WILL BE REMOVED in Plan 03
+openResolveDialog: (threadId: number, candidateId: number) => void;  // KEEP
+openConfirmDeleteCandidate: (id: number) => void;  // KEEP
+```
+</interfaces>
+</context>
+
+<tasks>
+
+<task type="auto">
+  <name>Task 1: Restructure thread route and create candidate detail page</name>
+  <files>
+    src/client/routes/threads/$threadId.tsx
+    src/client/routes/threads/$threadId/index.tsx
+    src/client/routes/threads/$threadId/candidates/$candidateId.tsx
+  </files>
+  <read_first>
+    - src/client/routes/threads/$threadId.tsx (full file — must move to index.tsx intact)
+    - src/client/hooks/useCandidates.ts (useUpdateCandidate, useDeleteCandidate hooks)
+    - src/client/hooks/useThreads.ts (useThread — returns ThreadWithCandidates with candidates array)
+    - src/client/components/CandidateForm.tsx (form fields and FormData interface to reuse for edit mode)
+    - src/client/components/CategoryPicker.tsx (for edit mode category picker)
+    - src/client/components/ImageUpload.tsx (for edit mode image upload)
+    - src/client/routes/global-items/$globalItemId.tsx (layout pattern reference)
+    - src/client/stores/uiStore.ts (openResolveDialog, openConfirmDeleteCandidate — keep using these)
+  </read_first>
+  <action>
+    **Step 1: Restructure thread route directory.**
+    - Move `src/client/routes/threads/$threadId.tsx` to `src/client/routes/threads/$threadId/index.tsx`
+    - Delete the original `$threadId.tsx` file
+    - The route path `/threads/$threadId` continues to work via the index.tsx convention
+    - IMPORTANT: Do NOT manually edit `routeTree.gen.ts` — it auto-regenerates
+
+    **Step 2: Create candidate detail page.**
+    Create `src/client/routes/threads/$threadId/candidates/$candidateId.tsx` with `createFileRoute("/threads/$threadId/candidates/$candidateId")`.
+
+    Per D-13: Shows candidate data — name, weight, price, notes, pros, cons, status, product link, image.
+    Per D-14: Edit mode toggle — same pattern as item detail page (local `useState<boolean>(false)`). In edit mode:
+    - Name, weight (grams string), price (dollars string), category (CategoryPicker), notes (textarea), product URL (text input), image (ImageUpload), pros (textarea), cons (textarea)
+    - Save button calls `useUpdateCandidate(threadId).mutate({ candidateId, name, weightGrams: parsed, priceCents: parsed, categoryId, notes, productUrl, imageFilename, pros, cons })` with `onSuccess: () => setIsEditing(false)`
+    - Cancel resets and exits edit mode
+    - Initialize form from candidate data when entering edit mode
+
+    Per D-15: Back navigation — `<Link to="/threads/$threadId" params={{ threadId: String(threadId) }}>← Back to thread</Link>`.
+    Per D-16: Thread-specific actions:
+    - "Pick as winner" button (only if thread is active/not resolved) — calls `useUIStore.openResolveDialog(threadId, candidateId)` which triggers the existing ResolveDialog in __root.tsx
+    - "Delete candidate" button — calls `useUIStore.openConfirmDeleteCandidate(candidateId)` which triggers the existing CandidateDeleteDialog in __root.tsx
+
+    Data fetching: Use `useThread(Number(threadIdParam))` to get the thread, then find the candidate via `thread.candidates.find(c => c.id === Number(candidateIdParam))`. This avoids needing a new API endpoint.
+
+    Layout: Same gallery-like pattern as item detail — `max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-6`. Hero image section, name as h1, badges (weight, price, category, status), pros/cons sections, notes section.
+
+    Loading state: shimmer placeholders.
+    Error state: "Candidate not found" with back link to thread.
+
+    Status display: Show current status using the StatusBadge component (but read-only — status changes happen via the existing status cycle on the card, not on the detail page).
+  </action>
+  <verify>
+    <automated>cd /home/jean-luc-makiola/Development/projects/GearBox && bun run lint 2>&1 | tail -5</automated>
+  </verify>
+  <acceptance_criteria>
+    - test -f src/client/routes/threads/\$threadId/index.tsx
+    - test ! -f src/client/routes/threads/\$threadId.tsx
+    - grep -q "createFileRoute.*threads.*threadId.*candidates.*candidateId" src/client/routes/threads/\$threadId/candidates/\$candidateId.tsx
+    - grep -q "useThread" src/client/routes/threads/\$threadId/candidates/\$candidateId.tsx
+    - grep -q "useUpdateCandidate" src/client/routes/threads/\$threadId/candidates/\$candidateId.tsx
+    - grep -q "isEditing" src/client/routes/threads/\$threadId/candidates/\$candidateId.tsx
+    - grep -q "Back to thread" src/client/routes/threads/\$threadId/candidates/\$candidateId.tsx
+    - grep -q "openResolveDialog\|Pick as winner" src/client/routes/threads/\$threadId/candidates/\$candidateId.tsx
+  </acceptance_criteria>
+  <done>
+    - Thread route restructured: `$threadId.tsx` moved to `$threadId/index.tsx`, `/threads/:threadId` still works
+    - Candidate detail page renders at `/threads/:threadId/candidates/:candidateId`
+    - Shows all candidate data: name, weight, price, notes, pros, cons, status, image
+    - Edit mode toggle works with form fields for all editable properties
+    - Back link returns to parent thread
+    - Pick as winner and delete actions available via existing dialogs
+  </done>
+</task>
+
+<task type="auto">
+  <name>Task 2: Add candidate modal dialog on thread page</name>
+  <files>
+    src/client/routes/threads/$threadId/index.tsx
+  </files>
+  <read_first>
+    - src/client/routes/threads/$threadId/index.tsx (just restructured — find the "Add Candidate" button)
+    - src/client/components/CandidateForm.tsx (form fields to replicate in modal)
+    - src/client/hooks/useCandidates.ts (useCreateCandidate hook)
+    - src/client/components/CategoryPicker.tsx (for category field)
+    - src/client/components/ImageUpload.tsx (for image field)
+  </read_first>
+  <action>
+    Per D-28: Replace the `openCandidateAddPanel()` call on the thread page with a local modal dialog for adding candidates.
+
+    In `src/client/routes/threads/$threadId/index.tsx`:
+    1. Add local state: `const [addCandidateOpen, setAddCandidateOpen] = useState(false)`
+    2. Replace the existing "Add Candidate" button's `onClick={() => openCandidateAddPanel()}` with `onClick={() => setAddCandidateOpen(true)}`
+    3. Remove the `openCandidateAddPanel` import from useUIStore
+    4. Add an `AddCandidateModal` component (can be defined in the same file or as a separate component — Claude's discretion) that:
+       - Renders as a fixed overlay with backdrop (`fixed inset-0 z-50 flex items-center justify-center`)
+       - Contains a form with fields: name (required), weight (grams), price (dollars), category (CategoryPicker), notes, product URL, image (ImageUpload), pros, cons
+       - Uses `useCreateCandidate(threadId)` for submission
+       - On success: closes modal, form resets
+       - On cancel/backdrop click: closes modal
+       - Style consistent with the existing CandidateDeleteDialog and ResolveDialog patterns in `__root.tsx`
+    5. Render the modal conditionally: `{addCandidateOpen && <AddCandidateModal threadId={threadId} onClose={() => setAddCandidateOpen(false)} />}`
+
+    The modal should be a reasonable size (`max-w-lg`) with scrollable content if needed. Form fields should match CandidateForm's field set. Validation: name is required (show inline error if empty on submit).
+  </action>
+  <verify>
+    <automated>cd /home/jean-luc-makiola/Development/projects/GearBox && bun run lint 2>&1 | tail -5</automated>
+  </verify>
+  <acceptance_criteria>
+    - grep -q "addCandidateOpen\|AddCandidateModal" src/client/routes/threads/\$threadId/index.tsx
+    - grep -q "useCreateCandidate" src/client/routes/threads/\$threadId/index.tsx
+    - grep -qv "openCandidateAddPanel" src/client/routes/threads/\$threadId/index.tsx
+  </acceptance_criteria>
+  <done>
+    - Thread page "Add Candidate" button opens a modal dialog instead of a slide-out panel
+    - Modal contains all candidate form fields (name, weight, price, category, notes, URL, image, pros, cons)
+    - Creating a candidate via the modal works and refreshes the thread data
+    - The `openCandidateAddPanel` UIStore call is no longer used on the thread page
+  </done>
+</task>
+
+</tasks>
+
+<verification>
+- `bun run lint` passes with no errors
+- `bun run dev` starts and routes work:
+  - `/threads/:threadId` renders thread detail (unchanged behavior after restructuring)
+  - `/threads/:threadId/candidates/:candidateId` renders candidate detail with edit toggle
+  - "Add Candidate" button on thread page opens modal, candidate creation works
+</verification>
+
+<success_criteria>
+- Thread route restructured without breaking existing `/threads/:threadId` functionality
+- Candidate detail page at `/threads/:threadId/candidates/:candidateId` with edit mode
+- Add candidate modal replaces slide-out panel trigger on thread page
+- All existing thread page functionality preserved (reorder, view modes, impact deltas)
+- Lint passes cleanly
+</success_criteria>
+
+<output>
+After completion, create `.planning/phases/21-item-catalog-detail-pages/21-02-SUMMARY.md`
+</output>

.planning/phases/21-item-catalog-detail-pages/21-02-SUMMARY.md

@@ -0,0 +1,90 @@
+---
+phase: 21-item-catalog-detail-pages
+plan: 02
+subsystem: ui
+tags: [react, tanstack-router, candidate-detail, modal-dialog, edit-mode]
+
+requires:
+  - phase: 20-fab-full-screen-catalog-search
+    provides: FAB and catalog search overlay foundation
+provides:
+  - Candidate detail page at /threads/:threadId/candidates/:candidateId with edit mode
+  - Restructured thread route directory for nested candidate routes
+  - Add-candidate modal dialog on thread page replacing slide-out panel
+affects: [21-03-candidate-card-navigation-rewire]
+
+tech-stack:
+  added: []
+  patterns: [nested-route-directory-structure, local-modal-pattern]
+
+key-files:
+  created:
+    - src/client/routes/threads/$threadId/candidates/$candidateId.tsx
+  modified:
+    - src/client/routes/threads/$threadId/index.tsx
+
+key-decisions:
+  - "StatusBadge on detail page is read-only (no onStatusChange) since status cycling happens on cards"
+  - "AddCandidateModal defined inline in thread index.tsx rather than separate component file"
+  - "Candidate data fetched from useThread hook (find in candidates array) rather than new endpoint"
+
+patterns-established:
+  - "Nested route directory: $threadId/index.tsx + $threadId/candidates/$candidateId.tsx"
+  - "Local modal pattern: useState in parent page controls modal visibility, no UIStore needed"
+
+requirements-completed: [DETAIL-04]
+
+duration: 4min
+completed: 2026-04-06
+---
+
+# Phase 21 Plan 02: Candidate Detail Page & Thread Route Restructuring Summary
+
+**Candidate detail page with edit mode toggle at /threads/:threadId/candidates/:candidateId, thread route directory restructured for nested routes, add-candidate modal replacing slide-out panel**
+
+## Performance
+
+- **Duration:** 4 min
+- **Started:** 2026-04-06T12:57:42Z
+- **Completed:** 2026-04-06T13:02:26Z
+- **Tasks:** 2
+- **Files modified:** 2
+
+## Accomplishments
+- Restructured thread route from flat file to directory structure supporting nested candidate routes
+- Created full candidate detail page with read/edit modes, image display, pros/cons, notes, and thread actions
+- Replaced UIStore openCandidateAddPanel call with local modal dialog containing all form fields
+
+## Task Commits
+
+Each task was committed atomically:
+
+1. **Task 1: Restructure thread route and create candidate detail page** - `cecaf78` (feat)
+2. **Task 2: Add candidate modal dialog on thread page** - `47b416e` (feat)
+
+## Files Created/Modified
+- `src/client/routes/threads/$threadId/index.tsx` - Moved from $threadId.tsx, updated imports, added AddCandidateModal
+- `src/client/routes/threads/$threadId/candidates/$candidateId.tsx` - New candidate detail page with edit mode toggle
+
+## Decisions Made
+- StatusBadge rendered as read-only on detail page (status changes happen via card interactions)
+- AddCandidateModal defined inline in the thread page file for simplicity
+- Candidate data sourced from useThread hook (find in array) to avoid new API endpoint
+
+## Deviations from Plan
+
+None - plan executed exactly as written.
+
+## Issues Encountered
+None
+
+## User Setup Required
+None - no external service configuration required.
+
+## Next Phase Readiness
+- Candidate detail page is ready for Plan 03 to rewire CandidateCard clicks as navigation links
+- Thread route directory structure supports the nested /candidates/:candidateId path
+
+---
+*Phase: 21-item-catalog-detail-pages*
+*Completed: 2026-04-06*