docs(03): auto-generated context (frontend phase)

.planning/phases/03-dashboard-intake-ui/03-CONTEXT.md

@@ -0,0 +1,114 @@
+# Phase 3: Dashboard & Intake UI - Context
+
+**Gathered:** 2026-04-10
+**Status:** Ready for planning
+**Mode:** Auto-generated (autonomous mode)
+
+<domain>
+## Phase Boundary
+
+Users can browse their full inventory, run intake for new items, and view item detail — all through the React SPA served by the Go binary. This phase delivers the React+TypeScript frontend with the ClickHouse design system, inventory dashboard, intake flow, item detail view, and PWA installation with camera-based QR scanner.
+
+</domain>
+
+<decisions>
+## Implementation Decisions
+
+### Tech Stack (from PROJECT.md)
+- Vite 5.x for build tooling
+- React 18 + TypeScript 5.x
+- TanStack Router v1 for routing
+- TanStack Query v5 for server state
+- Zustand v4 for client state
+- shadcn/ui (Radix + Tailwind) for components
+- Tailwind CSS 3.x with ClickHouse design tokens
+- react-dropzone for file uploads
+- react-hot-toast for notifications
+- lucide-react for icons
+
+### Design System — ClickHouse
+- Pure black (#000000) canvas
+- Neon volt (#faff69) accent for CTAs
+- Forest green (#166534) for primary actions
+- Inter 900 (Black) for display typography
+- Charcoal borders rgba(65,65,65,0.8)
+- 4px sharp corners for buttons, 8px for cards
+- Reference: ~/.claude/DESIGN.md (already globally configured)
+
+### Project Structure
+- Frontend lives in `web/` directory
+- Built assets go to `web/dist/` (already embedded via go:embed)
+- Dev mode: Vite serves at http://localhost:5173, proxies /api to Go backend at :8080
+- Prod mode: Go binary serves embedded SPA
+
+### Routing
+- `/` — Inventory Dashboard (grid/list view)
+- `/item/:id` — Item detail
+- `/intake` — AI Intake Wizard (photo upload)
+- `/scan` — PWA camera QR scanner
+- 404 fallback to dashboard
+
+### PWA
+- Manifest.json with installable config
+- Service worker for offline shell caching
+- Camera access via MediaDevices API for QR scanning
+- QR decoding via @zxing/browser or html5-qrcode
+
+### State Management
+- TanStack Query for all NetBox data (dashboard list, item detail)
+- Zustand for UI state (intake wizard steps, scanner state)
+- No Redux
+
+### API Contract
+- Backend exposes: GET /api/inventory (list), GET /api/inventory/:id (detail), POST /api/intake (upload photos)
+- Phase 3 adds GET endpoints; intake POST already exists from Phase 2
+
+### Claude's Discretion
+All visual details and component hierarchy at Claude's discretion, following the ClickHouse DESIGN.md.
+
+</decisions>
+
+<code_context>
+## Existing Code Insights
+
+### Reusable Assets from Phase 1-2
+- `cmd/hwlab/main.go` — binary entry, already serves web/dist via go:embed
+- `internal/api/router.go` — chi router, add GET inventory endpoints
+- `internal/api/handlers/` — health.go, intake.go patterns
+- `internal/netbox/client.go` — ListDevices for dashboard
+- `web/dist/index.html` — current stub placeholder
+- `assets.go` — go:embed directive
+
+### Established Patterns
+- Integration tests skip gracefully
+- Module path: git.georgsen.dk/hwlab
+- ClickHouse design system global default
+
+### Integration Points
+- Add GET /api/inventory handler listing NetBox devices
+- Add GET /api/inventory/:id handler for detail
+- Replace web/dist stub with real Vite build output
+- Makefile targets: `make frontend` (vite build), `make dev` (parallel vite + go run)
+
+</code_context>
+
+<specifics>
+## Specific Ideas
+
+- Tailwind config should inherit ClickHouse tokens directly from ~/.claude/DESIGN.md
+- Use shadcn/ui CLI to scaffold components
+- Drag-drop intake zone with thumbnail preview
+- Dashboard uses data-table pattern with sort/filter
+- Item detail is a side-panel or full-page modal
+
+</specifics>
+
+<deferred>
+## Deferred Ideas
+
+- Real-time updates (websockets) — not needed for single-operator
+- Offline sync — PWA shell only
+- Advanced filtering (Phase 7 — AI NLP search)
+- Lab Advisor chat (Phase 6)
+
+</deferred>