Merge branch 'worktree-agent-a1363a63' into Develop

# Conflicts:
#	.planning/ROADMAP.md
#	.planning/STATE.md

.planning/ROADMAP.md

@@ -217,11 +217,7 @@ Plans:
   3. Thread candidates navigate to detail pages instead of opening slide-out panels
   4. Item slide-out panel and candidate slide-out panel are removed from the root layout
   5. No visual distinction between reference items and standalone items — same layout, some fields may be empty
-**Plans:** 3 plans
+**Plans**: TBD
-Plans:
-- [ ] 21-01-PLAN.md — Item detail page with edit mode + catalog detail page enhancement
-- [ ] 21-02-PLAN.md — Candidate detail page with edit mode + add-candidate modal
-- [ ] 21-03-PLAN.md — Rewire card navigation + remove slide-out panels + UIStore cleanup
 **UI hint**: yes
 
 ### Phase 22: Add-from-Catalog & Thread Integration
@@ -270,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/3 | Planning | - |
+| 21. Item & Catalog Detail Pages | v2.0 | 1/3 | In Progress|  |
 | 22. Add-from-Catalog & Thread Integration | v2.0 | 0/? | Not started | - |
 | 23. Manual Entry Fallback | v2.0 | 0/? | Not started | - |

.planning/STATE.md

@@ -2,14 +2,14 @@
 gsd_state_version: 1.0
 milestone: v1.3
 milestone_name: Research & Decision Tools
-status: executing
+status: planning
-stopped_at: Phase 21 context gathered
+stopped_at: Completed 21-01-PLAN.md
-last_updated: "2026-04-06T12:56:33.435Z"
+last_updated: "2026-04-06T06:17:39.050Z"
-last_activity: 2026-04-06 -- Phase 21 execution started
+last_activity: 2026-04-06
 progress:
-  total_phases: 15
+  total_phases: 14
   completed_phases: 13
-  total_plans: 41
+  total_plans: 38
   completed_plans: 36
   percent: 0
 ---
@@ -21,14 +21,14 @@ progress:
 See: .planning/PROJECT.md (updated 2026-04-03)
 
 **Core value:** Help people make better gear decisions — discover what others use, compare real-world data, and see how a potential buy affects your setup before committing.
-**Current focus:** Phase 21 — item-catalog-detail-pages
+**Current focus:** v2.0 Platform Foundation — Phase 14 (PostgreSQL Migration)
 
 ## Current Position
 
-Phase: 21 (item-catalog-detail-pages) — EXECUTING
+Phase: 21 of 21 (Item & Catalog Detail Pages)
-Plan: 1 of 3
+Plan: 1 of 3 complete
-Status: Executing Phase 21
+Status: Executing
-Last activity: 2026-04-06 -- Phase 21 execution started
+Last activity: 2026-04-06
 
 Progress: [----------] 0% (v2.0 milestone)
 
@@ -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]: Edit mode on detail pages uses local useState, not UIStore panel state
+- [Phase 21]: Add to Collection button on catalog detail page is a stub (Phase 22 wires actual flow)
 
 ### Pending Todos
 
@@ -76,6 +78,6 @@ None active.
 
 ## Session Continuity
 
-Last session: 2026-04-06T12:42:30.311Z
+Last session: 2026-04-06T13:02:00.000Z
-Stopped at: Phase 21 context gathered
+Stopped at: Completed 21-01-PLAN.md
-Resume file: .planning/phases/21-item-catalog-detail-pages/21-CONTEXT.md
+Resume file: None

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

@@ -0,0 +1,96 @@
+---
+phase: 21-item-catalog-detail-pages
+plan: 01
+subsystem: ui
+tags: [react, tanstack-router, detail-page, edit-mode, collection]
+
+requires:
+  - phase: 20-fab-full-screen-catalog-search
+    provides: "Global item hooks, catalog search overlay, FAB menu"
+provides:
+  - "Private item detail page at /items/:id with edit mode toggle"
+  - "Enhanced catalog detail page at /global-items/:id with Add to Collection stub"
+affects: [21-02, 21-03, phase-22]
+
+tech-stack:
+  added: []
+  patterns:
+    - "Detail page edit mode via local useState toggle"
+    - "Form state initialized from item data on edit enter"
+
+key-files:
+  created:
+    - src/client/routes/items/$itemId.tsx
+  modified:
+    - src/client/routes/global-items/$globalItemId.tsx
+
+key-decisions:
+  - "Used type assertion for imageUrl on item data (API enriches but TS interface lacks field)"
+  - "Edit mode uses local form state initialized on toggle, not controlled by UIStore"
+
+patterns-established:
+  - "Detail page pattern: hero image, name, spec badges, content sections, metadata footer"
+  - "Edit mode pattern: enterEditMode initializes form from data, Save calls mutation with onSuccess exit"
+
+requirements-completed: [DETAIL-01, DETAIL-02, DETAIL-03]
+
+duration: 4min
+completed: 2026-04-06
+---
+
+# Phase 21 Plan 01: Detail Pages Summary
+
+**Private item detail page with edit mode toggle at /items/:id, and enhanced catalog detail page with Add to Collection stub button**
+
+## Performance
+
+- **Duration:** 4 min
+- **Started:** 2026-04-06T12:57:54Z
+- **Completed:** 2026-04-06T13:02:13Z
+- **Tasks:** 2
+- **Files modified:** 2
+
+## Accomplishments
+- Full item detail page at `/items/:id` with hero image (or category icon placeholder), name, weight/price/category badges, notes, product link, and metadata
+- Edit mode toggle: read-only gallery view by default, inline editable fields with Save/Cancel when Edit clicked
+- Catalog detail page enhanced with image placeholder when no image, and "Add to Collection" stub button
+
+## Task Commits
+
+Each task was committed atomically:
+
+1. **Task 1: Create private item detail page with edit mode toggle** - `3228bca` (feat)
+2. **Task 2: Enhance catalog detail page with Add to Collection button** - `408025b` (feat)
+
+## Files Created/Modified
+- `src/client/routes/items/$itemId.tsx` - Private item detail page with edit mode, duplicate, delete, back nav
+- `src/client/routes/global-items/$globalItemId.tsx` - Enhanced with image placeholder and Add to Collection stub button
+
+## Decisions Made
+- Used type assertion to access `imageUrl` field that API enriches via `withImageUrl` but isn't in the TypeScript `ItemWithCategory` interface
+- Edit mode managed via local `useState<boolean>` rather than UIStore, keeping state scoped to the page
+
+## Deviations from Plan
+
+None - plan executed exactly as written.
+
+## Known Stubs
+
+| File | Line | Stub | Reason |
+|------|------|------|--------|
+| `src/client/routes/global-items/$globalItemId.tsx` | 133 | "Add to Collection" button logs to console | Actual add-from-catalog flow wired in Phase 22 (per D-10) |
+
+## Issues Encountered
+None
+
+## User Setup Required
+None - no external service configuration required.
+
+## Next Phase Readiness
+- Both detail pages exist and are ready for Plan 03 to rewire card click handlers to navigate here
+- Plan 02 (candidate detail page) can proceed independently
+- Phase 22 will wire the Add to Collection button to actual functionality
+
+---
+*Phase: 21-item-catalog-detail-pages*
+*Completed: 2026-04-06*

src/client/routeTree.gen.ts

@@ -17,6 +17,7 @@ import { Route as CollectionIndexRouteImport } from './routes/collection/index'
 import { Route as UsersUserIdRouteImport } from './routes/users/$userId'
 import { Route as ThreadsThreadIdRouteImport } from './routes/threads/$threadId'
 import { Route as SetupsSetupIdRouteImport } from './routes/setups/$setupId'
+import { Route as ItemsItemIdRouteImport } from './routes/items/$itemId'
 import { Route as GlobalItemsGlobalItemIdRouteImport } from './routes/global-items/$globalItemId'
 
 const SettingsRoute = SettingsRouteImport.update({
@@ -59,6 +60,11 @@ const SetupsSetupIdRoute = SetupsSetupIdRouteImport.update({
   path: '/setups/$setupId',
   getParentRoute: () => rootRouteImport,
 } as any)
+const ItemsItemIdRoute = ItemsItemIdRouteImport.update({
+  id: '/items/$itemId',
+  path: '/items/$itemId',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const GlobalItemsGlobalItemIdRoute = GlobalItemsGlobalItemIdRouteImport.update({
   id: '/global-items/$globalItemId',
   path: '/global-items/$globalItemId',
@@ -70,6 +76,7 @@ export interface FileRoutesByFullPath {
   '/login': typeof LoginRoute
   '/settings': typeof SettingsRoute
   '/global-items/$globalItemId': typeof GlobalItemsGlobalItemIdRoute
+  '/items/$itemId': typeof ItemsItemIdRoute
   '/setups/$setupId': typeof SetupsSetupIdRoute
   '/threads/$threadId': typeof ThreadsThreadIdRoute
   '/users/$userId': typeof UsersUserIdRoute
@@ -81,6 +88,7 @@ export interface FileRoutesByTo {
   '/login': typeof LoginRoute
   '/settings': typeof SettingsRoute
   '/global-items/$globalItemId': typeof GlobalItemsGlobalItemIdRoute
+  '/items/$itemId': typeof ItemsItemIdRoute
   '/setups/$setupId': typeof SetupsSetupIdRoute
   '/threads/$threadId': typeof ThreadsThreadIdRoute
   '/users/$userId': typeof UsersUserIdRoute
@@ -93,6 +101,7 @@ export interface FileRoutesById {
   '/login': typeof LoginRoute
   '/settings': typeof SettingsRoute
   '/global-items/$globalItemId': typeof GlobalItemsGlobalItemIdRoute
+  '/items/$itemId': typeof ItemsItemIdRoute
   '/setups/$setupId': typeof SetupsSetupIdRoute
   '/threads/$threadId': typeof ThreadsThreadIdRoute
   '/users/$userId': typeof UsersUserIdRoute
@@ -106,6 +115,7 @@ export interface FileRouteTypes {
     | '/login'
     | '/settings'
     | '/global-items/$globalItemId'
+    | '/items/$itemId'
     | '/setups/$setupId'
     | '/threads/$threadId'
     | '/users/$userId'
@@ -117,6 +127,7 @@ export interface FileRouteTypes {
     | '/login'
     | '/settings'
     | '/global-items/$globalItemId'
+    | '/items/$itemId'
     | '/setups/$setupId'
     | '/threads/$threadId'
     | '/users/$userId'
@@ -128,6 +139,7 @@ export interface FileRouteTypes {
     | '/login'
     | '/settings'
     | '/global-items/$globalItemId'
+    | '/items/$itemId'
     | '/setups/$setupId'
     | '/threads/$threadId'
     | '/users/$userId'
@@ -140,6 +152,7 @@ export interface RootRouteChildren {
   LoginRoute: typeof LoginRoute
   SettingsRoute: typeof SettingsRoute
   GlobalItemsGlobalItemIdRoute: typeof GlobalItemsGlobalItemIdRoute
+  ItemsItemIdRoute: typeof ItemsItemIdRoute
   SetupsSetupIdRoute: typeof SetupsSetupIdRoute
   ThreadsThreadIdRoute: typeof ThreadsThreadIdRoute
   UsersUserIdRoute: typeof UsersUserIdRoute
@@ -205,6 +218,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof SetupsSetupIdRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/items/$itemId': {
+      id: '/items/$itemId'
+      path: '/items/$itemId'
+      fullPath: '/items/$itemId'
+      preLoaderRoute: typeof ItemsItemIdRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/global-items/$globalItemId': {
       id: '/global-items/$globalItemId'
       path: '/global-items/$globalItemId'
@@ -220,6 +240,7 @@ const rootRouteChildren: RootRouteChildren = {
   LoginRoute: LoginRoute,
   SettingsRoute: SettingsRoute,
   GlobalItemsGlobalItemIdRoute: GlobalItemsGlobalItemIdRoute,
+  ItemsItemIdRoute: ItemsItemIdRoute,
   SetupsSetupIdRoute: SetupsSetupIdRoute,
   ThreadsThreadIdRoute: ThreadsThreadIdRoute,
   UsersUserIdRoute: UsersUserIdRoute,

src/client/routes/global-items/$globalItemId.tsx

@@ -55,15 +55,27 @@ function GlobalItemDetail() {
 			</div>
 
 			{/* Image */}
-			{item.imageUrl && (
 			<div className="aspect-[16/9] bg-gray-50 rounded-xl overflow-hidden mb-6">
+				{item.imageUrl ? (
 					<img
 						src={item.imageUrl}
 						alt={`${item.brand} ${item.model}`}
 						className="w-full h-full object-cover"
 					/>
+				) : (
+					<div className="w-full h-full flex flex-col items-center justify-center">
+						<svg
+							className="w-16 h-16 text-gray-300"
+							fill="none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+							strokeWidth={1.5}
+						>
+							<path d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+						</svg>
 					</div>
 				)}
+			</div>
 
 			{/* Header */}
 			<div className="mb-6">
@@ -114,6 +126,17 @@ function GlobalItemDetail() {
 				)}
 			</div>
 
+			{/* Add to Collection */}
+			<div className="mb-6">
+				<button
+					type="button"
+					onClick={() => console.log("Add to collection — wired in Phase 22")}
+					className="bg-gray-700 text-white rounded-lg px-5 py-2.5 text-sm font-medium hover:bg-gray-800 transition-colors"
+				>
+					Add to Collection
+				</button>
+			</div>
+
 			{/* Description */}
 			{item.description && (
 				<div className="prose prose-sm prose-gray max-w-none">

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<typeof useItem> & {
+		data:
+			| (NonNullable<ReturnType<typeof useItem>["data"]> & {
+					imageUrl?: string | null;
+			  })
+			| undefined;
+	};
+	const { weight, price } = useFormatters();
+	const updateItem = useUpdateItem();
+	const duplicateItem = useDuplicateItem();
+	const openConfirmDelete = useUIStore((s) => s.openConfirmDelete);
+	const openExternalLink = useUIStore((s) => s.openExternalLink);
+
+	const [isEditing, setIsEditing] = useState(false);
+	const [form, setForm] = useState<EditFormState>({
+		name: "",
+		weightGrams: "",
+		priceDollars: "",
+		quantity: 1,
+		categoryId: 0,
+		notes: "",
+		productUrl: "",
+		imageFilename: null,
+	});
+
+	function enterEditMode() {
+		if (!item) return;
+		setForm({
+			name: item.name,
+			weightGrams: item.weightGrams != null ? String(item.weightGrams) : "",
+			priceDollars:
+				item.priceCents != null ? (item.priceCents / 100).toFixed(2) : "",
+			quantity: item.quantity,
+			categoryId: item.categoryId,
+			notes: item.notes || "",
+			productUrl: item.productUrl || "",
+			imageFilename: item.imageFilename,
+		});
+		setIsEditing(true);
+	}
+
+	function cancelEdit() {
+		setIsEditing(false);
+	}
+
+	function handleSave() {
+		if (!item) return;
+		const weightGrams = form.weightGrams.trim()
+			? Math.round(Number(form.weightGrams))
+			: null;
+		const priceCents = form.priceDollars.trim()
+			? Math.round(Number(form.priceDollars) * 100)
+			: null;
+
+		updateItem.mutate(
+			{
+				id: item.id,
+				name: form.name.trim(),
+				weightGrams,
+				priceCents,
+				quantity: form.quantity,
+				categoryId: form.categoryId,
+				notes: form.notes.trim() || null,
+				productUrl: form.productUrl.trim() || null,
+				imageFilename: form.imageFilename,
+			},
+			{
+				onSuccess: () => setIsEditing(false),
+			},
+		);
+	}
+
+	function handleDuplicate() {
+		if (!item) return;
+		duplicateItem.mutate(item.id, {
+			onSuccess: (newItem) => {
+				navigate({
+					to: "/items/$itemId",
+					params: { itemId: String(newItem.id) },
+				});
+			},
+		});
+	}
+
+	function handleDelete() {
+		if (!item) return;
+		openConfirmDelete(item.id);
+	}
+
+	if (isLoading) {
+		return (
+			<div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+				<div className="animate-pulse space-y-6">
+					<div className="h-4 bg-gray-100 rounded w-24" />
+					<div className="aspect-[4/3] bg-gray-100 rounded-xl" />
+					<div className="space-y-3">
+						<div className="h-8 bg-gray-100 rounded w-64" />
+						<div className="flex gap-2">
+							<div className="h-7 bg-gray-100 rounded-full w-20" />
+							<div className="h-7 bg-gray-100 rounded-full w-20" />
+							<div className="h-7 bg-gray-100 rounded-full w-28" />
+						</div>
+						<div className="h-4 bg-gray-100 rounded w-full" />
+						<div className="h-4 bg-gray-100 rounded w-3/4" />
+					</div>
+				</div>
+			</div>
+		);
+	}
+
+	if (error || !item) {
+		return (
+			<div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+				<Link
+					to="/collection"
+					className="text-sm text-gray-400 hover:text-gray-600 transition-colors"
+				>
+					&larr; Back to collection
+				</Link>
+				<div className="text-center py-16">
+					<p className="text-sm text-gray-500">Item not found</p>
+				</div>
+			</div>
+		);
+	}
+
+	const imageUrl = item.imageUrl || null;
+
+	return (
+		<div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+			{/* Top bar */}
+			<div className="flex items-center justify-between mb-6">
+				<Link
+					to="/collection"
+					className="text-sm text-gray-400 hover:text-gray-600 transition-colors"
+				>
+					&larr; Back to collection
+				</Link>
+				{!isEditing && (
+					<div className="flex items-center gap-2">
+						<button
+							type="button"
+							onClick={handleDuplicate}
+							disabled={duplicateItem.isPending}
+							className="px-3 py-1.5 text-sm text-gray-500 hover:text-gray-700 hover:bg-gray-50 rounded-lg transition-colors"
+						>
+							Duplicate
+						</button>
+						<button
+							type="button"
+							onClick={handleDelete}
+							className="px-3 py-1.5 text-sm text-red-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+						>
+							Delete
+						</button>
+						<button
+							type="button"
+							onClick={enterEditMode}
+							className="px-4 py-1.5 text-sm font-medium text-white bg-gray-700 hover:bg-gray-800 rounded-lg transition-colors"
+						>
+							Edit
+						</button>
+					</div>
+				)}
+				{isEditing && (
+					<div className="flex items-center gap-2">
+						<button
+							type="button"
+							onClick={cancelEdit}
+							className="px-3 py-1.5 text-sm text-gray-500 hover:text-gray-700 hover:bg-gray-50 rounded-lg transition-colors"
+						>
+							Cancel
+						</button>
+						<button
+							type="button"
+							onClick={handleSave}
+							disabled={updateItem.isPending || !form.name.trim()}
+							className="px-4 py-1.5 text-sm font-medium text-white bg-gray-700 hover:bg-gray-800 rounded-lg transition-colors disabled:opacity-50"
+						>
+							{updateItem.isPending ? "Saving..." : "Save"}
+						</button>
+					</div>
+				)}
+			</div>
+
+			{/* Hero image */}
+			{isEditing ? (
+				<div className="mb-6">
+					<ImageUpload
+						value={form.imageFilename}
+						imageUrl={imageUrl}
+						onChange={(filename) =>
+							setForm((f) => ({ ...f, imageFilename: filename }))
+						}
+					/>
+				</div>
+			) : (
+				<div className="aspect-[4/3] bg-gray-50 rounded-xl overflow-hidden mb-6">
+					{imageUrl ? (
+						<img
+							src={imageUrl}
+							alt={item.name}
+							className="w-full h-full object-cover"
+						/>
+					) : (
+						<div className="w-full h-full flex flex-col items-center justify-center">
+							<LucideIcon
+								name={item.categoryIcon}
+								size={64}
+								className="text-gray-300"
+							/>
+						</div>
+					)}
+				</div>
+			)}
+
+			{/* Header / Name */}
+			<div className="mb-4">
+				{isEditing ? (
+					<input
+						type="text"
+						value={form.name}
+						onChange={(e) => 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"
+					/>
+				) : (
+					<h1 className="text-2xl font-bold text-gray-900">{item.name}</h1>
+				)}
+			</div>
+
+			{/* Badges / Specs */}
+			{isEditing ? (
+				<div className="grid grid-cols-2 gap-4 mb-6">
+					<div>
+						<label className="block text-xs font-medium text-gray-500 mb-1">
+							Weight (g)
+						</label>
+						<input
+							type="number"
+							value={form.weightGrams}
+							onChange={(e) =>
+								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"
+						/>
+					</div>
+					<div>
+						<label className="block text-xs font-medium text-gray-500 mb-1">
+							Price ($)
+						</label>
+						<input
+							type="number"
+							step="0.01"
+							value={form.priceDollars}
+							onChange={(e) =>
+								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"
+						/>
+					</div>
+					<div>
+						<label className="block text-xs font-medium text-gray-500 mb-1">
+							Quantity
+						</label>
+						<input
+							type="number"
+							min={1}
+							value={form.quantity}
+							onChange={(e) =>
+								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"
+						/>
+					</div>
+					<div>
+						<label className="block text-xs font-medium text-gray-500 mb-1">
+							Category
+						</label>
+						<CategoryPicker
+							value={form.categoryId}
+							onChange={(id) => setForm((f) => ({ ...f, categoryId: id }))}
+						/>
+					</div>
+				</div>
+			) : (
+				<div className="flex flex-wrap gap-2 mb-6">
+					{item.weightGrams != null && (
+						<span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-50 text-blue-500">
+							{weight(item.weightGrams)}
+						</span>
+					)}
+					{item.priceCents != null && (
+						<span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-50 text-green-500">
+							{price(item.priceCents)}
+						</span>
+					)}
+					<span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-sm font-medium bg-gray-50 text-gray-600">
+						<LucideIcon
+							name={item.categoryIcon}
+							size={14}
+							className="text-gray-400"
+						/>
+						{item.categoryName}
+					</span>
+					{item.quantity > 1 && (
+						<span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-purple-50 text-purple-500">
+							Qty: {item.quantity}
+						</span>
+					)}
+				</div>
+			)}
+
+			{/* Notes */}
+			{isEditing ? (
+				<div className="mb-6">
+					<label className="block text-xs font-medium text-gray-500 mb-1">
+						Notes
+					</label>
+					<textarea
+						value={form.notes}
+						onChange={(e) => setForm((f) => ({ ...f, notes: e.target.value }))}
+						rows={4}
+						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 resize-none"
+						placeholder="Add notes..."
+					/>
+				</div>
+			) : (
+				item.notes && (
+					<div className="mb-6">
+						<h2 className="text-xs font-medium text-gray-400 uppercase tracking-wide mb-2">
+							Notes
+						</h2>
+						<p className="text-gray-600 text-sm leading-relaxed">
+							{item.notes}
+						</p>
+					</div>
+				)
+			)}
+
+			{/* Product URL */}
+			{isEditing ? (
+				<div className="mb-6">
+					<label className="block text-xs font-medium text-gray-500 mb-1">
+						Product URL
+					</label>
+					<input
+						type="url"
+						value={form.productUrl}
+						onChange={(e) =>
+							setForm((f) => ({
+								...f,
+								productUrl: 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="https://..."
+					/>
+				</div>
+			) : (
+				item.productUrl && (
+					<div className="mb-6">
+						<button
+							type="button"
+							onClick={() => openExternalLink(item.productUrl!)}
+							className="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 hover:bg-gray-100 rounded-lg transition-colors"
+						>
+							<svg
+								className="w-4 h-4"
+								fill="none"
+								stroke="currentColor"
+								viewBox="0 0 24 24"
+							>
+								<path
+									strokeLinecap="round"
+									strokeLinejoin="round"
+									strokeWidth={2}
+									d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+								/>
+							</svg>
+							View product
+						</button>
+					</div>
+				)
+			)}
+
+			{/* Metadata */}
+			{!isEditing && (
+				<div className="border-t border-gray-100 pt-4 mt-8">
+					<div className="flex gap-6 text-xs text-gray-400">
+						<span>
+							Added{" "}
+							{new Date(item.createdAt).toLocaleDateString(undefined, {
+								year: "numeric",
+								month: "short",
+								day: "numeric",
+							})}
+						</span>
+						<span>
+							Updated{" "}
+							{new Date(item.updatedAt).toLocaleDateString(undefined, {
+								year: "numeric",
+								month: "short",
+								day: "numeric",
+							})}
+						</span>
+					</div>
+				</div>
+			)}
+		</div>
+	);
+}