Phase 4: Web Interface (#14)

* feat(web): scaffold Vite/React/TS project with Tailwind v4 tokens and self-hosted Geist

* feat(web): add API types and fetch client with the 5xx-never-verbatim error contract

* feat(web): add TanStack Query hooks for query answers and index status

* feat(web): add ConfidenceBadge and ErrorCard with icon-locked confidence-state discriminator

* fix(web): use real lucide-react auto-generated classes in ConfidenceBadge/ErrorCard tests

Remove hardcoded className props from icon elements that lucide-react merges
onto its own auto-generated class, which silently defeated the icon-identity
tests. Update the test selectors to match the actual classes generated by the
installed lucide-react 1.25.0 (lucide-circle-check, lucide-triangle-alert,
lucide-circle-x).

* feat(web): add IndexStatusBadge with the not-indexed/error/healthy discriminator

* feat(web): add QueryInput with Enter-to-submit and global '/' focus shortcut

* feat(web): add CopyButton, copies the speakable answer only

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* feat(web): add inline-expanding sources and supporting-points disclosures

* feat(web): add AnswerCard, LoadingState, and the AnswerPanel status switch

* feat(web): wire AppShell, TopBar, and QueryClientProvider into the real App

* ci(web): add unit/integration test job; add Playwright E2E scaffold for manual runs

* style(web): fix pre-existing Prettier drift so the new CI format check passes

AnswerPanel.test.tsx (Task 9) had a line exceeding printWidth that an
earlier `npm run format` run didn't catch; also add test-results/,
playwright-report/, blob-report/ to .prettierignore so Prettier stops
scanning Playwright's generated output (mirrors the existing dist/
entry — Prettier doesn't consult .gitignore, only .prettierignore).
Whitespace-only; no assertion or logic changes.

* fix(web): personal_examples is an object array, not string[] — matches real backend contract

The frontend types and SupportingPointsDisclosure assumed
personal_examples: string[], but the backend (apps/api/app/generation/schema.py)
returns PersonalExample objects ({project, example, source_chunk_ids}). A
real response with a populated personal_examples array would crash the
whole app with no error boundary to catch it. Also fixes QuerySource.heading
(string -> string | null) to match the backend's actual optional field,
guarding SourceItem against a dangling separator.

---------

Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>

Author: leyder-ben

.github/workflows/ci.yml

@@ -40,3 +40,26 @@ jobs:
         run: ruff check .
       - name: Run tests
         run: pytest -v
+
+  web:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: apps/web
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "22"
+          cache: "npm"
+          cache-dependency-path: apps/web/package-lock.json
+      - name: Install dependencies
+        run: npm ci
+      - name: Check formatting
+        run: npm run format
+      - name: Lint
+        run: npm run lint
+      - name: Typecheck
+        run: npm run typecheck
+      - name: Run tests
+        run: npm test

.gitignore

@@ -17,6 +17,11 @@ node_modules/
 dist/
 .vite/
 
+# Playwright E2E (generated, not source)
+test-results/
+playwright-report/
+blob-report/
+
 # Docker
 *.pid
 

apps/web/.prettierignore

@@ -0,0 +1,5 @@
+dist
+node_modules
+test-results
+playwright-report
+blob-report

apps/web/.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "es5",
+  "printWidth": 100
+}

apps/web/eslint.config.js

@@ -0,0 +1,13 @@
+import js from "@eslint/js";
+import reactHooks from "eslint-plugin-react-hooks";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  { ignores: ["dist"] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ["**/*.{ts,tsx}"],
+    plugins: { "react-hooks": reactHooks },
+    rules: { ...reactHooks.configs.recommended.rules },
+  }
+);

apps/web/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>vault-interview-copilot</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>