+ {isEditing ? (
+
+ ) : (
+
+ );
+}
+```
+
+### Pattern 3: Detail Page Layout (gallery-like)
+**What:** Consistent layout: back nav, hero image, title/badges, content sections, action buttons.
+**When to use:** All three detail pages.
+**Example structure (from existing `$globalItemId.tsx`):**
+```typescript
+{item.name}
+ )} +
+ {/* Back navigation */}
+
+ ← Back to collection
+
+
+ {/* Hero image */}
+
+```
+
+### Pattern 4: Navigation from Card Components
+**What:** Replace `openEditPanel(id)` calls with TanStack Router `useNavigate()` or `Link` component.
+**When to use:** ItemCard, CandidateCard, CandidateListItem, CatalogSearchOverlay grid/list cards.
+**Example:**
+```typescript
+// Before (ItemCard.tsx)
+const openEditPanel = useUIStore((s) => s.openEditPanel);
+onClick={() => openEditPanel(id)}
+
+// After
+import { useNavigate } from "@tanstack/react-router";
+const navigate = useNavigate();
+onClick={() => navigate({ to: "/items/$itemId", params: { itemId: String(id) } })}
+```
+
+### Anti-Patterns to Avoid
+- **Do NOT edit `routeTree.gen.ts` manually** -- it auto-generates when route files change.
+- **Do NOT put edit form state in Zustand** -- local `useState` per detail page is correct. Zustand is for cross-component UI state only.
+- **Do NOT remove `ItemForm.tsx` or `CandidateForm.tsx`** -- reuse their validation logic and field definitions in the edit mode sections of detail pages.
+- **Do NOT remove SlideOutPanel.tsx component file** -- D-25 explicitly keeps it for potential future use.
+
+## Don't Hand-Roll
+
+| Problem | Don't Build | Use Instead | Why |
+|---------|-------------|-------------|-----|
+| Form validation | Custom validation from scratch | Copy validation logic from `ItemForm.tsx` / `CandidateForm.tsx` | Proven patterns, consistent behavior |
+| Image URL resolution | Manual URL building | `withImageUrl` / `withImageUrls` from storage service (already called in routes) | Server already returns `imageUrl` field in API response |
+| Loading/error states | Custom skeleton per page | Follow existing pattern from `$globalItemId.tsx` (shimmer placeholders, error state with back link) | Consistency |
+| Confirmation dialogs | New dialog components | Existing `ConfirmDialog` pattern in `__root.tsx` and `useUIStore.openConfirmDelete` | Already works for items; same pattern for candidates on detail pages |
+
+## Common Pitfalls
+
+### Pitfall 1: Nested Route File Structure for Candidates
+**What goes wrong:** Creating `src/client/routes/threads/$threadId/candidates/$candidateId.tsx` while `$threadId.tsx` exists as a file (not a directory) causes TanStack Router confusion.
+**Why it happens:** TanStack Router file-based routing treats `$threadId.tsx` and `$threadId/` directory as conflicting. You need to restructure.
+**How to avoid:** Rename `src/client/routes/threads/$threadId.tsx` to `src/client/routes/threads/$threadId/index.tsx` (or `route.tsx`). Then create `$threadId/candidates/$candidateId.tsx` as a sibling directory.
+**Warning signs:** Route tree generation errors, blank page at `/threads/:threadId`.
+
+### Pitfall 2: Removing Panel State Before Wiring Navigation
+**What goes wrong:** Removing UIStore panel state and `__root.tsx` panel JSX before the card click handlers are updated causes runtime errors (calling undefined functions).
+**Why it happens:** Components like `ItemCard` still import `useUIStore((s) => s.openEditPanel)`.
+**How to avoid:** Order of operations: (1) Create detail pages, (2) Update card click handlers to navigate, (3) Then remove panel state and JSX.
+**Warning signs:** TypeScript errors on removed store properties, blank areas where panels used to be.
+
+### Pitfall 3: Edit Mode Form Not Syncing with Server Data
+**What goes wrong:** User enters edit mode, but form shows stale or default data.
+**Why it happens:** `useItem(id)` fetch may not have completed when edit mode is toggled, or form state is initialized once and never updated.
+**How to avoid:** Use `useEffect` to sync form state when both `isEditing === true` AND item data changes. Alternatively, initialize form data from item data only when entering edit mode (in the toggle handler).
+**Warning signs:** Form fields show empty or previous values.
+
+### Pitfall 4: CandidateCard/CandidateListItem Need threadId for Navigation
+**What goes wrong:** Navigation to `/threads/:threadId/candidates/:candidateId` requires both IDs, but the component may only have `candidateId`.
+**Why it happens:** CandidateCard already receives `threadId` as a prop. CandidateListItem receives it via `candidate.threadId`. Both are safe.
+**How to avoid:** Verify both components have access to `threadId` before changing click handlers. Both do.
+**Warning signs:** Navigation produces undefined params.
+
+### Pitfall 5: Catalog Search Overlay Card Click vs. Add Button
+**What goes wrong:** Making the entire card clickable navigates away from the search overlay, losing context.
+**Why it happens:** D-19 says card click navigates to `/global-items/:id`, but the overlay is open.
+**How to avoid:** Close the catalog search overlay before navigating. Or use `Link` component and let the navigation naturally close the overlay (overlay checks `catalogSearchOpen` state). The card body navigates; the "Add" button stays as a separate action with `e.stopPropagation()`.
+**Warning signs:** Overlay stays visible on top of detail page, or user loses search context unexpectedly.
+
+### Pitfall 6: "Add Candidate" on Thread Page After Panel Removal
+**What goes wrong:** The thread page currently opens the candidate add panel via `openCandidateAddPanel()`. After panels are removed, there's no way to add candidates.
+**Why it happens:** D-28 says to keep a simple button/form pattern, but the existing flow is entirely panel-based.
+**How to avoid:** Replace the "Add Candidate" button action on the thread page. Options: (1) inline form that expands on the thread page, (2) small modal dialog, (3) navigate to a dedicated add route. Recommendation: use a modal dialog -- it's the lightest change and consistent with existing dialog patterns in the app.
+**Warning signs:** No way to add candidates after panel removal.
+
+## Code Examples
+
+### Creating the Item Detail Route
+```typescript
+// src/client/routes/items/$itemId.tsx
+import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
+import { useState } from "react";
+import { useFormatters } from "../../hooks/useFormatters";
+import { useDeleteItem, useDuplicateItem, useItem, useUpdateItem } from "../../hooks/useItems";
+
+export const Route = createFileRoute("/items/$itemId")({
+ component: ItemDetailPage,
+});
+```
+
+### Restructuring Thread Route for Nesting
+```
+# Before:
+src/client/routes/threads/$threadId.tsx
+
+# After:
+src/client/routes/threads/$threadId/index.tsx # same content, path unchanged
+src/client/routes/threads/$threadId/candidates/
+ $candidateId.tsx # new candidate detail
+```
+
+The `index.tsx` file maps to `/threads/$threadId` exactly as before. The nested `candidates/$candidateId.tsx` maps to `/threads/$threadId/candidates/$candidateId`.
+
+### UIStore Cleanup (properties to remove)
+```typescript
+// Remove these from UIState interface and implementation:
+panelMode: "closed" | "add" | "edit";
+editingItemId: number | null;
+openAddPanel: () => void;
+openEditPanel: (itemId: number) => void;
+closePanel: () => void;
+
+candidatePanelMode: "closed" | "add" | "edit";
+editingCandidateId: number | null;
+openCandidateAddPanel: () => void;
+openCandidateEditPanel: (id: number) => void;
+closeCandidatePanel: () => void;
+
+// Keep these (still used):
+confirmDeleteItemId / openConfirmDelete / closeConfirmDelete // used by ConfirmDialog
+confirmDeleteCandidateId / openConfirmDeleteCandidate / closeConfirmDeleteCandidate // candidate delete
+resolveThreadId / resolveCandidateId / openResolveDialog / closeResolveDialog // resolve dialog
+// ... all other non-panel state
+```
+
+### Updating ItemCard Click Handler
+```typescript
+// src/client/components/ItemCard.tsx
+// Replace:
+import { useUIStore } from "../stores/uiStore";
+const openEditPanel = useUIStore((s) => s.openEditPanel);
+// With:
+import { useNavigate } from "@tanstack/react-router";
+const navigate = useNavigate();
+
+// onClick changes from:
+onClick={() => openEditPanel(id)}
+// To:
+onClick={() => navigate({ to: "/items/$itemId", params: { itemId: String(id) } })}
+```
+
+### Adding "Add to Collection" Button on Catalog Detail Page
+```typescript
+// In global-items/$globalItemId.tsx, add after hero/header:
+
+```
+This is a stub per D-10 -- actual add flow wired in Phase 22.
+
+## Validation Architecture
+
+### Test Framework
+| Property | Value |
+|----------|-------|
+| Framework | Playwright + Bun test |
+| Config file | `playwright.config.ts` (E2E), `bunfig.toml` (unit) |
+| Quick run command | `bun test tests/routes/` |
+| Full suite command | `bun run test:e2e` |
+
+### Phase Requirements to Test Map
+| Req ID | Behavior | Test Type | Automated Command | File Exists? |
+|--------|----------|-----------|-------------------|-------------|
+| DETAIL-01 | Item detail page renders at `/items/:id` | E2E | `bun run test:e2e -- --grep "item detail"` | No -- Wave 0 |
+| DETAIL-02 | Catalog detail page has "Add to Collection" button | E2E | `bun run test:e2e -- --grep "catalog detail"` | No -- Wave 0 |
+| DETAIL-03 | Edit mode toggle shows/hides form inputs | E2E | `bun run test:e2e -- --grep "edit mode"` | No -- Wave 0 |
+| DETAIL-04 | Candidate card click navigates to detail page | E2E | `bun run test:e2e -- --grep "candidate detail"` | No -- Wave 0 |
+| DETAIL-05 | No SlideOutPanel instances in rendered DOM | E2E | `bun run test:e2e -- --grep "panel removed"` | No -- Wave 0 |
+
+### Sampling Rate
+- **Per task commit:** `bun run lint && bun run dev` (manual visual check -- frontend-heavy)
+- **Per wave merge:** `bun run test:e2e`
+- **Phase gate:** Full E2E suite green before `/gsd:verify-work`
+
+### Wave 0 Gaps
+- [ ] `e2e/item-detail.spec.ts` -- covers DETAIL-01, DETAIL-03
+- [ ] `e2e/catalog-detail.spec.ts` -- covers DETAIL-02
+- [ ] `e2e/candidate-detail.spec.ts` -- covers DETAIL-04
+- [ ] `e2e/panel-removal.spec.ts` -- covers DETAIL-05
+- [ ] E2E seed data: verify `e2e/seed.ts` creates items and threads with candidates for detail page testing
+
+## Sources
+
+### Primary (HIGH confidence)
+- Codebase inspection: `src/client/routes/global-items/$globalItemId.tsx` -- existing detail page pattern
+- Codebase inspection: `src/client/routes/__root.tsx` -- panel instances to remove (lines 189-221)
+- Codebase inspection: `src/client/stores/uiStore.ts` -- panel state to clean (full file reviewed)
+- Codebase inspection: `src/client/components/ItemCard.tsx` -- current click handler using `openEditPanel`
+- Codebase inspection: `src/client/components/CandidateCard.tsx` -- current click handler using `openCandidateEditPanel`
+- Codebase inspection: `src/client/components/CandidateListItem.tsx` -- current click handler
+- Codebase inspection: `src/client/components/ItemForm.tsx` -- form fields and validation to reuse
+- Codebase inspection: `src/client/components/CandidateForm.tsx` -- candidate form to reuse
+- Codebase inspection: `src/client/hooks/useItems.ts` -- `useItem`, `useUpdateItem`, `useDeleteItem`, `useDuplicateItem` hooks
+- Codebase inspection: `src/client/hooks/useCandidates.ts` -- `useUpdateCandidate`, `useDeleteCandidate` hooks
+- Codebase inspection: `src/client/hooks/useGlobalItems.ts` -- `useGlobalItem` hook with ownerCount
+- Codebase inspection: `src/server/services/item.service.ts` -- `getItemById` COALESCE merge pattern
+- Codebase inspection: `src/server/routes/items.ts` -- `withImageUrl` applied to single item responses
+
+### Secondary (MEDIUM confidence)
+- TanStack Router file-based routing: nested parameterized routes require directory restructuring (verified against established pattern in `src/client/routes/setups/$setupId.tsx`)
+
+## Metadata
+
+**Confidence breakdown:**
+- Standard stack: HIGH -- no new dependencies, all existing
+- Architecture: HIGH -- all patterns verified against existing codebase
+- Pitfalls: HIGH -- identified from direct code inspection of affected files
+
+**Research date:** 2026-04-06
+**Valid until:** 2026-05-06 (stable -- frontend patterns, no external dependencies)
diff --git a/.planning/phases/21-item-catalog-detail-pages/21-VALIDATION.md b/.planning/phases/21-item-catalog-detail-pages/21-VALIDATION.md
new file mode 100644
index 0000000..6fbc7a5
--- /dev/null
+++ b/.planning/phases/21-item-catalog-detail-pages/21-VALIDATION.md
@@ -0,0 +1,69 @@
+---
+phase: 21
+slug: item-catalog-detail-pages
+status: draft
+nyquist_compliant: false
+wave_0_complete: false
+created: 2026-04-06
+---
+
+# Phase 21 — Validation Strategy
+
+> Per-phase validation contract for feedback sampling during execution.
+
+---
+
+## Test Infrastructure
+
+| Property | Value |
+|----------|-------|
+| **Framework** | bun test + Playwright (E2E) |
+| **Config file** | playwright.config.ts |
+| **Quick run command** | `bun run lint` |
+| **Full suite command** | `bun run lint && bun run build` |
+| **Estimated runtime** | ~10 seconds |
+
+---
+
+## Sampling Rate
+
+- **After every task commit:** Run `bun run lint`
+- **After every plan wave:** Run `bun run lint && bun run build`
+- **Before `/gsd:verify-work`:** Full suite + manual visual check
+- **Max feedback latency:** 10 seconds
+
+---
+
+## Per-Task Verification Map
+
+| Task ID | Plan | Wave | Requirement | Test Type | Automated Command | Status |
+|---------|------|------|-------------|-----------|-------------------|--------|
+| 01-T1 | 21-01 | 1 | DETAIL-01, DETAIL-03 | lint+visual | `bun run lint` | ⬜ pending |
+| 01-T2 | 21-01 | 1 | DETAIL-02 | lint+visual | `bun run lint` | ⬜ pending |
+| 02-T1 | 21-02 | 1 | DETAIL-04 | lint+visual | `bun run lint` | ⬜ pending |
+| 02-T2 | 21-02 | 1 | DETAIL-04 | lint+visual | `bun run lint` | ⬜ pending |
+| 03-T1 | 21-03 | 2 | DETAIL-04 | lint+grep | `bun run lint` | ⬜ pending |
+| 03-T2 | 21-03 | 2 | DETAIL-05 | lint+grep | `bun run lint` | ⬜ pending |
+
+---
+
+## Manual-Only Verifications
+
+| Behavior | Requirement | Why Manual | Test Instructions |
+|----------|-------------|------------|-------------------|
+| Item detail page renders with correct data | DETAIL-01 | Visual layout | Navigate to /items/:id, verify hero image, specs, notes |
+| Edit mode toggle works | DETAIL-03 | Visual interaction | Click Edit, verify fields become editable, save changes |
+| Catalog detail page with Add button | DETAIL-02 | Visual layout | Navigate to /global-items/:id, verify Add button present |
+| Candidate detail page in thread context | DETAIL-04 | Visual navigation | Click candidate in thread, verify detail page |
+| Panels removed from UI | DETAIL-05 | Visual absence | Verify no slide-out panels appear anywhere |
+
+---
+
+## Validation Sign-Off
+
+- [x] All tasks have automated verify (lint)
+- [x] Sampling continuity maintained
+- [ ] Manual visual verification pending
+- [ ] `nyquist_compliant: true` set in frontmatter
+
+**Approval:** pending
diff --git a/src/client/routes/items/$itemId.tsx b/src/client/routes/items/$itemId.tsx
new file mode 100644
index 0000000..f86e0a2
--- /dev/null
+++ b/src/client/routes/items/$itemId.tsx
@@ -0,0 +1,454 @@
+import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
+import { useState } from "react";
+import { CategoryPicker } from "../../components/CategoryPicker";
+import { ImageUpload } from "../../components/ImageUpload";
+import { useFormatters } from "../../hooks/useFormatters";
+import { useDuplicateItem, useItem, useUpdateItem } from "../../hooks/useItems";
+import { LucideIcon } from "../../lib/iconData";
+import { useUIStore } from "../../stores/uiStore";
+
+export const Route = createFileRoute("/items/$itemId")({
+ component: ItemDetail,
+});
+
+interface EditFormState {
+ name: string;
+ weightGrams: string;
+ priceDollars: string;
+ quantity: number;
+ categoryId: number;
+ notes: string;
+ productUrl: string;
+ imageFilename: string | null;
+}
+
+function ItemDetail() {
+ const { itemId } = Route.useParams();
+ const navigate = useNavigate();
+ const {
+ data: item,
+ isLoading,
+ error,
+ } = useItem(Number(itemId)) as ReturnType
+ ![]()
+
+
+ {/* Title + badges */}
+ {item.name}
+
+ {/* weight, price, category badges */}
+
+
+ {/* Content sections */}
+ {/* ... notes, product link, etc. */}
+
+
+ );
+ }
+
+ if (error || !item) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ← Back to collection
+
+
+ );
+ }
+
+ const imageUrl = item.imageUrl || null;
+
+ return (
+
+
+ Item not found
+
+ {/* Top bar */}
+
+
+ ← Back to collection
+
+ {!isEditing && (
+
+
+ {/* Hero image */}
+ {isEditing ? (
+
+
+
+
+
+ )}
+ {isEditing && (
+
+
+
+
+ )}
+
+
+ setForm((f) => ({ ...f, imageFilename: filename }))
+ }
+ />
+
+ ) : (
+
+ {imageUrl ? (
+ 
+ ) : (
+
+ )}
+
+ {/* Header / Name */}
+
+
+ )}
+
+ {isEditing ? (
+ setForm((f) => ({ ...f, name: e.target.value }))}
+ className="w-full text-2xl font-bold text-gray-900 border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
+ placeholder="Item name"
+ />
+ ) : (
+
+
+ {/* Badges / Specs */}
+ {isEditing ? (
+ {item.name}
+ )} +
+
+ ) : (
+
+
+
+ setForm((f) => ({
+ ...f,
+ weightGrams: e.target.value,
+ }))
+ }
+ className="w-full py-2 px-3 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
+ placeholder="0"
+ />
+
+
+
+
+ setForm((f) => ({
+ ...f,
+ priceDollars: e.target.value,
+ }))
+ }
+ className="w-full py-2 px-3 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
+ placeholder="0.00"
+ />
+
+
+
+
+ setForm((f) => ({
+ ...f,
+ quantity: Math.max(1, Number(e.target.value)),
+ }))
+ }
+ className="w-full py-2 px-3 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
+ />
+
+
+
+ setForm((f) => ({ ...f, categoryId: id }))}
+ />
+
+
+ {item.weightGrams != null && (
+
+ {weight(item.weightGrams)}
+
+ )}
+ {item.priceCents != null && (
+
+ {price(item.priceCents)}
+
+ )}
+
+
+ )}
+
+ {/* Notes */}
+ {isEditing ? (
+
+
+