Feat/v0.3 redesign 2

.gitignore

@@ -54,3 +54,6 @@ target
 #  and can be added to the global gitignore or merged into this file.  For a more nuclear
 #  option (not recommended) you can uncomment the following to ignore the entire idea folder.
 #.idea/
+
+# Local agent worktrees and runtime metadata
+.claude/

.prettierignore

@@ -9,3 +9,6 @@ src-tauri/mutants.out
 src-tauri/mutants.out.old
 src-tauri/target
 test-results
+
+# Handoff design package — source-of-truth, not authored by us
+docs/design/handoff/

components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles/tailwind.css",
+    "baseColor": "stone",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/cn",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/lib/hooks"
+  },
+  "iconLibrary": "lucide"
+}

docs/design/handoff/README.md

@@ -0,0 +1,62 @@
+# Design Handoff — Source of Truth
+
+This directory holds **immutable design source files** received from external
+design tooling. They are the visual contract that the v0.3 paper redesign
+implements. Treat them as **read-only reference**.
+
+## Current handoff
+
+- [`paper-redesign/`](./paper-redesign/) — Paper + Archival aesthetic (M16).
+  Original Claude Design (claude.ai/design) handoff bundle. Contains:
+  - `README.md` — handoff cover sheet from the design tool
+  - `project/PathKeep Redesign.html` — entry HTML loading all JSX
+  - `project/pk-tokens.css` — every CSS class used in the prototype (3,978 lines)
+  - `project/pk-app.jsx` — root shell composition + routing + tweaks
+  - `project/pk-components.jsx` — `PKSidebar` / `PKStatusBar` / `PKDetailPanel` /
+    `PKSearchPalette` / `PKHeatmap` / glyph set + domain colour helpers
+  - `project/pk-views.jsx` — `HomeView` (Dashboard) editorial layout
+  - `project/pk-contactsheet.jsx` — Browse view (contact sheet, day sticky,
+    domain stacks, session insights, hourly sparkline)
+  - `project/pk-browse-nav.jsx` — `CalendarPopover` / `DayNavControl` /
+    `YearRail` / archive density helper / placeholder day skeleton
+  - `project/pk-search.jsx` — three-mode search hero, filter chips, day-grouped
+    results, "See in context" jump
+  - `project/pk-intelligence.jsx` — KPI strip, topic timeline, domain rank
+    list, sessions, refind shelf, LLM-needed callouts
+  - `project/pk-assistant.jsx` — chat surface with evidence panel + sample
+    prompts (provider-gated in production)
+  - `project/pk-import.jsx` — method picker + stepper wizard + preview stats
+  - `project/pk-audit.jsx` — manifest chain visualization, runs table, storage
+    breakdown, snapshots, export panel
+  - `project/tweaks-panel.jsx` — design-tool tweaks panel (development only,
+    not shipped)
+  - `project/pathkeep-mark.svg` — brand mark
+
+## How agents should use this
+
+1. **Treat the HTML/JSX as visual law, not code to copy.** The handoff renders
+   in a browser via Babel-standalone; production builds with React 19 + TS +
+   Tailwind v4 + shadcn primitives. Re-derive class names, structure, and
+   tokens — don't transplant the prototype's React-18-via-UMD plumbing.
+2. **`pk-tokens.css` is the visual rule book.** Every measurement, every
+   colour, every animation curve. When in doubt, grep here first; it lists
+   exact pixel sizes (e.g. sidebar `216px`, topbar `52px`, statusbar `28px`,
+   day sticky offset `var(--cs-toolbar-h, 44px)`).
+3. **Functional depth may exceed the prototype.** The prototype mocks data
+   and skips many production concerns (i18n, AI provider gating, regex
+   validation, locked archive states, error boundaries). Backfill these
+   using the existing PathKeep production patterns.
+4. **The Settings page is not in the prototype.** Build it with the same
+   visual language; see `src/pages/settings/` for existing sections.
+
+## Authoritative project docs (override these as the redesign progresses)
+
+- `docs/design/design-tokens.md` — token catalogue (paper palette is current)
+- `docs/design/screens-and-nav.md` — route contract per screen
+- `docs/design/ux-principles.md` — PME, trust grammar, loading rules
+- `docs/design/ui-review-guardrails.md` — review heuristics
+- `docs/design/typography-and-font-fallback.md` — three-font policy
+
+The v0.3 redesign is **authorised to override** these docs where it
+contradicts the brutalist v0.2 design system; update each accepted doc as
+the route sweep lands.

docs/design/handoff/paper-redesign/README.md

@@ -0,0 +1,25 @@
+# CODING AGENTS: READ THIS FIRST
+
+This is a **handoff bundle** from Claude Design (claude.ai/design).
+
+A user mocked up designs in HTML/CSS/JS using an AI design tool, then exported this bundle so a coding agent can implement the designs for real.
+
+## What you should do — IMPORTANT
+
+**Read the chat transcripts first.** There are 6 chat transcript(s) in `pathkeep-redesign-c/chats/`. The transcripts show the full back-and-forth between the user and the design assistant — they tell you **what the user actually wants** and **where they landed** after iterating. Don't skip them. The final HTML files are the output, but the chat is where the intent lives.
+
+**Read `pathkeep-redesign-c/project/PathKeep Redesign.html` in full.** The user had this file open when they triggered the handoff, so it's almost certainly the primary design they want built. Read it top to bottom — don't skim. Then **follow its imports**: open every file it pulls in (shared components, CSS, scripts) so you understand how the pieces fit together before you start implementing.
+
+**If anything is ambiguous, ask the user to confirm before you start implementing.** It's much cheaper to clarify scope up front than to build the wrong thing.
+
+## About the design files
+
+The design medium is **HTML/CSS/JS** — these are prototypes, not production code. Your job is to **recreate them pixel-perfectly** in whatever technology makes sense for the target codebase (React, Vue, native, whatever fits). Match the visual output; don't copy the prototype's internal structure unless it happens to fit.
+
+**Don't render these files in a browser or take screenshots unless the user asks you to.** Everything you need — dimensions, colors, layout rules — is spelled out in the source. Read the HTML and CSS directly; a screenshot won't tell you anything they don't.
+
+## Bundle contents
+
+- `pathkeep-redesign-c/README.md` — this file
+- `pathkeep-redesign-c/chats/` — conversation transcripts (read these!)
+- `pathkeep-redesign-c/project/` — the `PathKeep-redesign-c` project files (HTML prototypes, assets, components)

docs/design/handoff/paper-redesign/project/PathKeep Redesign.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="zh-Hant" data-theme="light">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>PathKeep — Redesign Prototype</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=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,300;1,6..72,400;1,6..72,500&family=JetBrains+Mono:wght@300;400;500;600&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="pk-tokens.css" />
+
+  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
+  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+</head>
+<body>
+  <div id="root"></div>
+
+  <script type="text/babel" src="tweaks-panel.jsx"></script>
+  <script type="text/babel" src="pk-components.jsx"></script>
+  <script type="text/babel" src="pk-browse-nav.jsx"></script>
+  <script type="text/babel" src="pk-contactsheet.jsx"></script>
+  <script type="text/babel" src="pk-search.jsx"></script>
+  <script type="text/babel" src="pk-views.jsx"></script>
+  <script type="text/babel" src="pk-intelligence.jsx"></script>
+  <script type="text/babel" src="pk-assistant.jsx"></script>
+  <script type="text/babel" src="pk-import.jsx"></script>
+  <script type="text/babel" src="pk-audit.jsx"></script>
+  <script type="text/babel" src="pk-app.jsx"></script>
+
+  <script type="text/babel">
+    const root = ReactDOM.createRoot(document.getElementById('root'));
+    root.render(<PathKeepApp />);
+  </script>
+</body>
+</html>