---
phase: 03-dashboard-intake-ui
plan: "01"
type: execute
wave: 1
depends_on: []
files_modified:
  - web/package.json
  - web/tsconfig.json
  - web/tsconfig.node.json
  - web/vite.config.ts
  - web/tailwind.config.ts
  - web/postcss.config.cjs
  - web/index.html
  - web/src/main.tsx
  - web/src/App.tsx
  - web/src/router.tsx
  - web/src/lib/queryClient.ts
  - web/src/store/ui.ts
  - web/src/styles/globals.css
  - web/components.json
  - web/src/components/ui/button.tsx
  - web/src/components/ui/card.tsx
  - web/src/components/ui/badge.tsx
  - Makefile
autonomous: true
requirements: [UI-06]

must_haves:
  truths:
    - "Running `npm run dev` inside web/ serves the SPA at http://localhost:5173 with /api proxied to :8080"
    - "Running `npm run build` inside web/ produces web/dist/index.html and web/dist/assets/ that Go can embed"
    - "The page background is #000000 with neon volt (#faff69) as the accent color"
    - "Inter font weight 900 is loaded and applied to display headings"
    - "shadcn/ui Button, Card, and Badge components are available with ClickHouse tokens"
    - "TanStack Router renders a /health-check route returning a plain text component"
    - "TanStack Query QueryClientProvider wraps the app"
    - "Zustand uiStore is defined and importable"
  artifacts:
    - path: "web/package.json"
      provides: "npm project manifest with all dependencies pinned"
    - path: "web/tailwind.config.ts"
      provides: "ClickHouse design tokens as Tailwind CSS custom colors/fonts"
    - path: "web/src/main.tsx"
      provides: "React 18 entry point with Router + QueryClient providers"
    - path: "web/src/router.tsx"
      provides: "TanStack Router route tree with placeholder routes"
    - path: "web/src/store/ui.ts"
      provides: "Zustand UI store (view mode toggle, scanner state)"
    - path: "web/components.json"
      provides: "shadcn/ui CLI config"
    - path: "web/src/components/ui/button.tsx"
      provides: "shadcn/ui Button primitive"
    - path: "web/src/components/ui/card.tsx"
      provides: "shadcn/ui Card primitive"
    - path: "web/src/components/ui/badge.tsx"
      provides: "shadcn/ui Badge primitive"
  key_links:
    - from: "web/src/main.tsx"
      to: "web/src/router.tsx"
      via: "RouterProvider from @tanstack/react-router"
    - from: "web/tailwind.config.ts"
      to: "web/src/styles/globals.css"
      via: "@tailwind directives + CSS custom properties"
    - from: "web/vite.config.ts"
      to: "http://localhost:8080"
      via: "proxy: { '/api': 'http://localhost:8080' }"
---

<objective>
Bootstrap the React+TypeScript frontend with the full toolchain and ClickHouse design system.

Purpose: Every subsequent UI plan depends on this scaffold existing. The design tokens, component library, routing shell, and build pipeline must all be correct before feature development begins.
Output: A buildable SPA in web/ with Vite 5, React 18, TypeScript 5, Tailwind 3, shadcn/ui, TanStack Router v1, TanStack Query v5, Zustand v4, and the ClickHouse visual identity.
</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/phases/03-dashboard-intake-ui/03-CONTEXT.md
@assets.go
@web/dist/index.html

<interfaces>
<!-- Existing Go embed setup — web/dist is already embedded by assets.go at project root -->
<!-- web/dist/index.html is currently a stub placeholder — will be replaced by Vite build output -->
<!-- The Go server uses chi router and serves web/dist via go:embed -->

From assets.go:
```go
//go:embed web/dist
var StaticFiles embed.FS
```

From internal/api/router.go (SPA fallback handler):
```go
// Serves static files from embedded FS; falls back to index.html for client-side routing
r.Handle("/*", spaHandler{staticFS: staticFiles})
```
</interfaces>
</context>

<tasks>

<task type="auto">
  <name>Task 1: Scaffold Vite+React project and apply ClickHouse design tokens</name>
  <files>
    web/package.json,
    web/tsconfig.json,
    web/tsconfig.node.json,
    web/vite.config.ts,
    web/tailwind.config.ts,
    web/postcss.config.cjs,
    web/index.html,
    web/src/styles/globals.css,
    web/components.json
  </files>
  <action>
    Read first: `web/dist/index.html` (current stub), `assets.go`, `internal/api/router.go`.

    **1. Create web/package.json** with these exact dependencies:
    ```json
    {
      "name": "hwlab",
      "private": true,
      "version": "0.0.0",
      "type": "module",
      "scripts": {
        "dev": "vite",
        "build": "tsc -b && vite build",
        "preview": "vite preview",
        "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
      },
      "dependencies": {
        "@radix-ui/react-slot": "^1.1.0",
        "@tanstack/react-query": "^5.51.0",
        "@tanstack/react-router": "^1.48.0",
        "@tanstack/router-devtools": "^1.48.0",
        "@zxing/browser": "^0.1.5",
        "class-variance-authority": "^0.7.0",
        "clsx": "^2.1.1",
        "lucide-react": "^0.417.0",
        "react": "^18.3.1",
        "react-dom": "^18.3.1",
        "react-dropzone": "^14.2.3",
        "react-hot-toast": "^2.4.1",
        "tailwind-merge": "^2.5.2",
        "zustand": "^4.5.4"
      },
      "devDependencies": {
        "@types/react": "^18.3.3",
        "@types/react-dom": "^18.3.0",
        "@typescript-eslint/eslint-plugin": "^7.15.0",
        "@typescript-eslint/parser": "^7.15.0",
        "@vitejs/plugin-react": "^4.3.1",
        "autoprefixer": "^10.4.19",
        "eslint": "^9.7.0",
        "postcss": "^8.4.40",
        "tailwindcss": "^3.4.7",
        "typescript": "^5.5.3",
        "vite": "^5.3.5"
      }
    }
    ```

    **2. Create web/vite.config.ts:**
    ```typescript
    import { defineConfig } from 'vite'
    import react from '@vitejs/plugin-react'
    import path from 'path'

    export default defineConfig({
      plugins: [react()],
      resolve: {
        alias: {
          '@': path.resolve(__dirname, './src'),
        },
      },
      build: {
        outDir: 'dist',
        emptyOutDir: true,
      },
      server: {
        port: 5173,
        proxy: {
          '/api': {
            target: 'http://localhost:8080',
            changeOrigin: true,
          },
        },
      },
    })
    ```

    **3. Create web/tsconfig.json** (strict mode, path aliases):
    ```json
    {
      "files": [],
      "references": [
        { "path": "./tsconfig.app.json" },
        { "path": "./tsconfig.node.json" }
      ]
    }
    ```

    Create web/tsconfig.app.json:
    ```json
    {
      "compilerOptions": {
        "target": "ES2020",
        "useDefineForClassFields": true,
        "lib": ["ES2020", "DOM", "DOM.Iterable"],
        "module": "ESNext",
        "skipLibCheck": true,
        "moduleResolution": "bundler",
        "allowImportingTsExtensions": true,
        "isolatedModules": true,
        "moduleDetection": "force",
        "noEmit": true,
        "jsx": "react-jsx",
        "strict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noFallthroughCasesInSwitch": true,
        "baseUrl": ".",
        "paths": {
          "@/*": ["./src/*"]
        }
      },
      "include": ["src"]
    }
    ```

    Create web/tsconfig.node.json:
    ```json
    {
      "compilerOptions": {
        "target": "ES2022",
        "lib": ["ES2023"],
        "module": "ESNext",
        "skipLibCheck": true,
        "moduleResolution": "bundler",
        "allowImportingTsExtensions": true,
        "isolatedModules": true,
        "moduleDetection": "force",
        "noEmit": true,
        "strict": true
      },
      "include": ["vite.config.ts"]
    }
    ```

    **4. Create web/postcss.config.cjs:**
    ```js
    module.exports = {
      plugins: {
        tailwindcss: {},
        autoprefixer: {},
      },
    }
    ```

    **5. Create web/tailwind.config.ts** with ClickHouse design tokens:
    ```typescript
    import type { Config } from 'tailwindcss'

    const config: Config = {
      darkMode: ['class'],
      content: ['./index.html', './src/**/*.{ts,tsx}'],
      theme: {
        extend: {
          colors: {
            // ClickHouse design system tokens
            'volt':       '#faff69',  // neon yellow-green — primary CTA accent
            'volt-pale':  '#f4f692',  // active/pressed state text
            'forest':     '#166534',  // primary action button (Get Started)
            'forest-dark':'#14572f',  // forest border variant
            'olive-dark': '#161600',  // subtle brand text
            'border-olive':'#4f5100', // ghost button borders
            // Surfaces
            'canvas':     '#000000',  // pure black background
            'near-black': '#141414',  // button bg, elevated surfaces
            'hover-gray': '#3a3a3a',  // button hover bg
            'charcoal':   '#414141',  // primary border (used at 80% opacity in CSS)
            'deep-charcoal':'#343434',// subtle dividers
          },
          fontFamily: {
            display: ['Inter', 'system-ui', 'sans-serif'],
            body:    ['Inter', 'system-ui', 'sans-serif'],
            code:    ['Inconsolata', 'monospace'],
          },
          fontWeight: {
            black: '900',
          },
          borderRadius: {
            sharp: '4px',
            card:  '8px',
          },
          letterSpacing: {
            widest: '1.4px',
          },
        },
      },
      plugins: [],
    }

    export default config
    ```

    **6. Create web/index.html** (replace the stub — this is the Vite entry point, not the final dist):
    ```html
    <!doctype html>
    <html lang="en" class="dark">
      <head>
        <meta charset="UTF-8" />
        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="manifest" href="/manifest.json" />
        <title>HWLab</title>
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" />
        <link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@600&family=Inter:wght@400;500;600;700;900&display=swap" rel="stylesheet" />
      </head>
      <body class="bg-canvas text-white antialiased">
        <div id="root"></div>
        <script type="module" src="/src/main.tsx"></script>
      </body>
    </html>
    ```

    **7. Create web/src/styles/globals.css** with CSS custom properties and Tailwind directives:
    ```css
    @tailwind base;
    @tailwind components;
    @tailwind utilities;

    @layer base {
      :root {
        --background: 0 0% 0%;
        --foreground: 0 0% 100%;
        --card: 0 0% 8%;
        --card-foreground: 0 0% 100%;
        --border: 0 0% 25%;
        --ring: 64 100% 71%;
        --radius: 0.5rem;
      }

      * {
        border-color: rgba(65, 65, 65, 0.8);
      }

      body {
        background-color: #000000;
        color: #ffffff;
      }

      /* Charcoal border utility */
      .border-charcoal-80 {
        border-color: rgba(65, 65, 65, 0.8);
      }

      /* ClickHouse card elevation */
      .card-elevated {
        box-shadow:
          rgba(0,0,0,0.1) 0px 10px 15px -3px,
          rgba(0,0,0,0.1) 0px 4px 6px -4px;
      }

      /* Neon accent glow (use sparingly) */
      .ring-volt {
        box-shadow: 0 0 0 2px #faff69;
      }

      /* Uppercase tracked label */
      .label-upper {
        text-transform: uppercase;
        letter-spacing: 1.4px;
        font-weight: 600;
        font-size: 0.75rem;
      }
    }
    ```

    **8. Create web/components.json** (shadcn/ui CLI config — dark mode, no rsc, Tailwind aliases):
    ```json
    {
      "$schema": "https://ui.shadcn.com/schema.json",
      "style": "default",
      "rsc": false,
      "tsx": true,
      "tailwind": {
        "config": "tailwind.config.ts",
        "css": "src/styles/globals.css",
        "baseColor": "zinc",
        "cssVariables": false,
        "prefix": ""
      },
      "aliases": {
        "components": "@/components",
        "utils": "@/lib/utils",
        "ui": "@/components/ui",
        "lib": "@/lib",
        "hooks": "@/hooks"
      },
      "iconLibrary": "lucide"
    }
    ```

    After creating config files: `cd web && npm install` to generate package-lock.json.
  </action>
  <verify>
    <automated>cd /home/mikkel/homelabby/web && npm run build 2>&1 | tail -5</automated>
  </verify>
  <done>
    `npm run build` inside web/ completes without errors and produces web/dist/index.html and web/dist/assets/. The tailwind.config.ts contains all ClickHouse color tokens (volt, forest, canvas, charcoal, near-black). The vite.config.ts proxy routes /api to http://localhost:8080.
  </done>
</task>

<task type="auto">
  <name>Task 2: Wire React app entry point with Router, QueryClient, design primitives, and shadcn/ui components</name>
  <files>
    web/src/main.tsx,
    web/src/App.tsx,
    web/src/router.tsx,
    web/src/lib/utils.ts,
    web/src/lib/queryClient.ts,
    web/src/store/ui.ts,
    web/src/components/ui/button.tsx,
    web/src/components/ui/card.tsx,
    web/src/components/ui/badge.tsx
  </files>
  <action>
    Read first: `web/src/styles/globals.css`, `web/tailwind.config.ts` (just created in Task 1).

    **1. Create web/src/lib/utils.ts** (shadcn/ui cn helper):
    ```typescript
    import { clsx, type ClassValue } from 'clsx'
    import { twMerge } from 'tailwind-merge'

    export function cn(...inputs: ClassValue[]) {
      return twMerge(clsx(inputs))
    }
    ```

    **2. Create web/src/lib/queryClient.ts:**
    ```typescript
    import { QueryClient } from '@tanstack/react-query'

    export const queryClient = new QueryClient({
      defaultOptions: {
        queries: {
          staleTime: 30_000,         // 30s — inventory data doesn't change rapidly
          retry: 2,
          refetchOnWindowFocus: false,
        },
      },
    })
    ```

    **3. Create web/src/store/ui.ts** (Zustand — UI state only, not server data):
    ```typescript
    import { create } from 'zustand'

    type ViewMode = 'grid' | 'list'

    interface UIStore {
      viewMode: ViewMode
      setViewMode: (mode: ViewMode) => void
      scannerActive: boolean
      setScannerActive: (active: boolean) => void
      intakeStep: number
      setIntakeStep: (step: number) => void
    }

    export const useUIStore = create<UIStore>((set) => ({
      viewMode: 'grid',
      setViewMode: (mode) => set({ viewMode: mode }),
      scannerActive: false,
      setScannerActive: (active) => set({ scannerActive: active }),
      intakeStep: 0,
      setIntakeStep: (step) => set({ intakeStep: step }),
    }))
    ```

    **4. Create web/src/router.tsx** — TanStack Router v1 route tree with placeholder routes for all Phase 3 views:
    ```typescript
    import { createRouter, createRoute, createRootRoute, Outlet } from '@tanstack/react-router'
    import { TanStackRouterDevtools } from '@tanstack/router-devtools'

    // Root layout — wraps all routes with the app shell
    const rootRoute = createRootRoute({
      component: () => (
        <>
          <Outlet />
          {import.meta.env.DEV && <TanStackRouterDevtools />}
        </>
      ),
    })

    // Routes — components are lazy-imported in Plan 03 and 04; stubs for now
    const indexRoute = createRoute({
      getParentRoute: () => rootRoute,
      path: '/',
      component: () => (
        <div className="min-h-screen bg-canvas flex items-center justify-center">
          <p className="text-volt font-display font-black text-2xl">HWLab — Dashboard loading…</p>
        </div>
      ),
    })

    const itemRoute = createRoute({
      getParentRoute: () => rootRoute,
      path: '/item/$id',
      component: () => (
        <div className="min-h-screen bg-canvas flex items-center justify-center">
          <p className="text-volt font-display font-black text-2xl">Item detail loading…</p>
        </div>
      ),
    })

    const intakeRoute = createRoute({
      getParentRoute: () => rootRoute,
      path: '/intake',
      component: () => (
        <div className="min-h-screen bg-canvas flex items-center justify-center">
          <p className="text-volt font-display font-black text-2xl">Intake wizard loading…</p>
        </div>
      ),
    })

    const scanRoute = createRoute({
      getParentRoute: () => rootRoute,
      path: '/scan',
      component: () => (
        <div className="min-h-screen bg-canvas flex items-center justify-center">
          <p className="text-volt font-display font-black text-2xl">QR Scanner loading…</p>
        </div>
      ),
    })

    const routeTree = rootRoute.addChildren([indexRoute, itemRoute, intakeRoute, scanRoute])

    export const router = createRouter({
      routeTree,
      defaultPreload: 'intent',
    })

    // TypeScript type augmentation for TanStack Router
    declare module '@tanstack/react-router' {
      interface Register {
        router: typeof router
      }
    }
    ```

    **5. Create web/src/App.tsx:**
    ```typescript
    import { QueryClientProvider } from '@tanstack/react-query'
    import { RouterProvider } from '@tanstack/react-router'
    import { Toaster } from 'react-hot-toast'
    import { queryClient } from '@/lib/queryClient'
    import { router } from '@/router'

    export function App() {
      return (
        <QueryClientProvider client={queryClient}>
          <RouterProvider router={router} />
          <Toaster
            position="bottom-right"
            toastOptions={{
              style: {
                background: '#141414',
                color: '#ffffff',
                border: '1px solid rgba(65,65,65,0.8)',
              },
              success: {
                iconTheme: { primary: '#faff69', secondary: '#000000' },
              },
            }}
          />
        </QueryClientProvider>
      )
    }
    ```

    **6. Create web/src/main.tsx:**
    ```typescript
    import React from 'react'
    import ReactDOM from 'react-dom/client'
    import './styles/globals.css'
    import { App } from './App'

    ReactDOM.createRoot(document.getElementById('root')!).render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
    )
    ```

    **7. Create shadcn/ui Button component at web/src/components/ui/button.tsx** (ClickHouse-themed variants):
    ```typescript
    import * as React from 'react'
    import { Slot } from '@radix-ui/react-slot'
    import { cva, type VariantProps } from 'class-variance-authority'
    import { cn } from '@/lib/utils'

    const buttonVariants = cva(
      'inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-volt disabled:pointer-events-none disabled:opacity-50',
      {
        variants: {
          variant: {
            // Neon primary — #faff69 background, near-black text
            default: 'bg-volt text-near-black rounded-sharp border border-volt hover:bg-near-black hover:text-white active:text-volt-pale',
            // Forest green — primary action
            forest: 'bg-forest text-white rounded-sharp border border-near-black hover:bg-near-black active:text-volt-pale',
            // Dark solid
            secondary: 'bg-near-black text-white rounded-sharp border border-near-black hover:bg-hover-gray active:text-volt-pale',
            // Ghost / outlined
            outline: 'bg-transparent text-white rounded-sharp border border-border-olive hover:bg-near-black active:text-volt-pale',
            // Destructive
            destructive: 'bg-red-900 text-white rounded-sharp hover:bg-red-800',
            // Invisible — just text
            ghost: 'bg-transparent text-white hover:text-volt',
            link: 'text-volt underline-offset-4 hover:underline',
          },
          size: {
            default: 'h-9 px-4 py-2',
            sm: 'h-8 px-3 text-xs',
            lg: 'h-11 px-8',
            icon: 'h-9 w-9',
          },
        },
        defaultVariants: {
          variant: 'default',
          size: 'default',
        },
      },
    )

    export interface ButtonProps
      extends React.ButtonHTMLAttributes<HTMLButtonElement>,
        VariantProps<typeof buttonVariants> {
      asChild?: boolean
    }

    const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
      ({ className, variant, size, asChild = false, ...props }, ref) => {
        const Comp = asChild ? Slot : 'button'
        return (
          <Comp
            className={cn(buttonVariants({ variant, size, className }))}
            ref={ref}
            {...props}
          />
        )
      },
    )
    Button.displayName = 'Button'

    export { Button, buttonVariants }
    ```

    **8. Create web/src/components/ui/card.tsx** (ClickHouse charcoal card):
    ```typescript
    import * as React from 'react'
    import { cn } from '@/lib/utils'

    const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
      ({ className, ...props }, ref) => (
        <div
          ref={ref}
          className={cn(
            'rounded-card border border-charcoal/80 bg-near-black text-white shadow-sm transition-colors',
            className,
          )}
          {...props}
        />
      ),
    )
    Card.displayName = 'Card'

    const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
      ({ className, ...props }, ref) => (
        <div ref={ref} className={cn('flex flex-col space-y-1.5 p-4', className)} {...props} />
      ),
    )
    CardHeader.displayName = 'CardHeader'

    const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
      ({ className, ...props }, ref) => (
        <h3 ref={ref} className={cn('font-semibold leading-none tracking-tight', className)} {...props} />
      ),
    )
    CardTitle.displayName = 'CardTitle'

    const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
      ({ className, ...props }, ref) => <div ref={ref} className={cn('p-4 pt-0', className)} {...props} />,
    )
    CardContent.displayName = 'CardContent'

    const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
      ({ className, ...props }, ref) => (
        <div ref={ref} className={cn('flex items-center p-4 pt-0', className)} {...props} />
      ),
    )
    CardFooter.displayName = 'CardFooter'

    export { Card, CardHeader, CardTitle, CardContent, CardFooter }
    ```

    **9. Create web/src/components/ui/badge.tsx** (status badges with ClickHouse tokens):
    ```typescript
    import * as React from 'react'
    import { cva, type VariantProps } from 'class-variance-authority'
    import { cn } from '@/lib/utils'

    const badgeVariants = cva(
      'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors',
      {
        variants: {
          variant: {
            default:         'border-volt/40 bg-volt/10 text-volt',
            indexed:         'border-green-500/40 bg-green-500/10 text-green-400',
            draft:           'border-charcoal/80 bg-charcoal/20 text-gray-400',
            needs_research:  'border-yellow-500/40 bg-yellow-500/10 text-yellow-400',
            researched:      'border-blue-500/40 bg-blue-500/10 text-blue-400',
            complete:        'border-forest/40 bg-forest/20 text-green-300',
            destructive:     'border-red-500/40 bg-red-500/10 text-red-400',
          },
        },
        defaultVariants: {
          variant: 'default',
        },
      },
    )

    export interface BadgeProps
      extends React.HTMLAttributes<HTMLDivElement>,
        VariantProps<typeof badgeVariants> {}

    function Badge({ className, variant, ...props }: BadgeProps) {
      return <div className={cn(badgeVariants({ variant }), className)} {...props} />
    }

    export { Badge, badgeVariants }
    ```

    **10. Update Makefile** to add frontend build and dev targets:
    - Read current Makefile first.
    - Add these targets after existing ones:
    ```makefile
    frontend:
    	cd web && npm run build

    dev-frontend:
    	cd web && npm run dev

    dev:
    	air -c .air.toml
    ```
    (Note: `dev` already exists — if it does, keep the existing `dev` and add only `frontend` and `dev-frontend`.)

    Finally run `cd web && npm run build` to verify the build succeeds and web/dist gets populated.
  </action>
  <verify>
    <automated>cd /home/mikkel/homelabby/web && npm run build 2>&1 | tail -10 && ls dist/assets/*.js 2>/dev/null | head -3</automated>
  </verify>
  <done>
    `npm run build` succeeds (exit 0). `web/dist/assets/` contains at least one .js file. `web/src/store/ui.ts` exports `useUIStore` with `viewMode`, `scannerActive`, `intakeStep`. `web/src/router.tsx` exports `router` with routes for `/`, `/item/$id`, `/intake`, `/scan`. All shadcn/ui primitives (Button, Card, Badge) have ClickHouse variants.
  </done>
</task>

</tasks>

<threat_model>
## Trust Boundaries

| Boundary | Description |
|----------|-------------|
| Browser → Go /api | All API requests cross this boundary; frontend must not forge hw_id or bypass intake |

## STRIDE Threat Register

| Threat ID | Category | Component | Disposition | Mitigation Plan |
|-----------|----------|-----------|-------------|-----------------|
| T-03-01 | Tampering | vite.config.ts proxy | accept | Dev proxy is localhost-only; no external exposure; production uses embedded SPA with no proxy |
| T-03-02 | Info Disclosure | google fonts CDN | accept | Only font metrics exposed; no auth tokens; acceptable for homelab context |
| T-03-03 | Spoofing | TanStack Router client-side routes | accept | No auth in Phase 3 — all routes are public; server enforces data access via NetBox token |
</threat_model>

<verification>
From project root:
1. `cd web && npm run build` — exits 0, produces web/dist/index.html
2. `ls web/dist/assets/*.js` — at least one JS bundle present
3. `go build ./...` — Go binary still compiles (embed path unchanged)
4. `grep -r "volt" web/tailwind.config.ts` — confirms ClickHouse tokens present
5. `grep "proxy" web/vite.config.ts` — confirms /api proxy to :8080
</verification>

<success_criteria>
- Vite 5 + React 18 + TypeScript 5 + Tailwind 3 project exists in web/
- `npm run build` produces web/dist/ ready for Go embed
- ClickHouse design tokens (volt, forest, canvas, charcoal, near-black) available as Tailwind classes
- Inter 900 weight loaded from Google Fonts
- TanStack Router renders placeholder routes for /, /item/$id, /intake, /scan
- TanStack Query QueryClientProvider wraps the app
- Zustand uiStore tracks viewMode, scannerActive, intakeStep
- shadcn/ui Button (neon/forest/secondary/outline variants), Card, Badge primitives exist
- Makefile has `frontend` and `dev-frontend` targets
</success_criteria>

<output>
After completion, create `.planning/phases/03-dashboard-intake-ui/03-01-SUMMARY.md` following the summary template.
</output>