Puck — desktop fairy familiar (HF Build Small)

.dockerignore

@@ -0,0 +1,19 @@
+# Keep the build context lean — only the server, schema, and frontend source are needed.
+# (desktop/ holds a 4GB Tauri target; node_modules/.venv are reinstalled in-image.)
+**/node_modules
+**/.venv
+**/target
+**/__pycache__
+*.pyc
+desktop
+recognize
+molt/data
+server/data
+frontend/dist
+.git
+puck-handoff
+*.zip
+*.aiff
+.env
+.env.local
+**/.DS_Store

.env.example

@@ -0,0 +1,21 @@
+# Copy to .env.local (gitignored). The daemon loads .env.local at startup.
+# All optional — sensible defaults bake in. Real exported env vars override the file.
+
+# --- Text brain (narration + chat). Default: local Ollama. ---
+# PUCK_BRAIN_URL=http://127.0.0.1:11434/v1
+# PUCK_BRAIN_MODEL=hf.co/liahmartens/Holotron-12B-GGUF:Q8_0
+# PUCK_BRAIN_TIMEOUT=25
+
+# --- Vision (screenshot → events). ---
+# Cloud-primary (Modal vLLM) is the default stance: local 12B tiling melts laptops
+# and fails on weak machines. Non-localhost URL → whole-image; localhost → tiled.
+PUCK_VISION_URL=https://<you>--puck-brain-serve.modal.run/v1
+PUCK_VISION_MODEL=Hcompany/Holotron-12B
+# Optional local fallback (e.g. llama-server on :8080). Empty = cloud only.
+PUCK_VISION_FALLBACK_URL=
+PUCK_VISION_FALLBACK_MODEL=
+# A cold vLLM 12B start can take minutes; once warm it's ~5-15s.
+PUCK_VISION_TIMEOUT=120
+
+# Modal auth (for `modal deploy server/brain_modal.py`): run `modal token new` — it
+# writes ~/.modal.toml. It is NOT read from any env var; keep tokens out of the repo.

.gitignore

@@ -0,0 +1,29 @@
+# dependencies / build artifacts
+node_modules/
+dist/
+# desktop/src-tauri/target — 4GB Rust build
+target/
+.venv/
+__pycache__/
+*.pyc
+
+# secrets / local env — .env has Modal tokens; .env.example stays tracked
+.env
+.env.local
+.claude/settings.local.json
+
+# large, regenerable, or transient (not source)
+# 336MB ONNX CLIP model + index.npz — rebuilt by recognizer.build_index()
+recognize/model/
+# compiled Swift OCR binary — built by `swiftc ocr.swift`
+recognize/bin/
+# peek screenshots + log.jsonl — live capture data, often personal
+server/data/
+
+# handoff exports (stale duplicates of the tree)
+puck-handoff/
+puck-handoff.zip
+
+# misc
+.DS_Store
+*.aiff

BACKLOG.md

@@ -0,0 +1,238 @@
+# Puck backlog
+
+Ideas not yet built. Each entry: what, why, and where it slots into the architecture
+(engine = pure policy/data, ui = presentation, modes/sim = orchestration).
+
+## Gestures — sprite dances/reactions keyed to event type
+
+**What:** Puck performs a short gesture matched to *what* he's reporting, not just
+flying + speaking. A build passing → a little hop/spin of pride. Tests failing or a
+permission block → an urgent shake/alarm wiggle. Discord noise he ignored → a dismissive
+shrug. Claude finished → a satisfied stretch. Stale tab → a curious head-tilt. Sleep →
+a yawn. The gesture plays during the flight-to + bubble beat.
+
+**Why:** On a busy real desktop the sprite is glanceable; a gesture lets you read the
+*kind* of news pre-attentively, before the words. It's the single highest charm-per-line
+addition left, and it makes the overlay feel like a creature rather than a notifier.
+
+**Where it slots in:**
+- `engine/` — a pure `gestureFor(event | decision)` map: `EventDef.id`/`source` →
+  gesture name. Data, not logic; pin a couple of mappings with a test. Could also key
+  off the existing tier/mischief so high-mischief gestures are more theatrical.
+- `ui/Sprite.tsx` — a `gesture?: GestureName` prop adding a CSS class (`gesture-hop`,
+  `gesture-shake`, `gesture-shrug`, …); animations on `.puck-bob`/`.puck-face` only
+  (compositor-friendly transforms, like the existing flap/bob). Clear the class on
+  animationend so it re-triggers.
+- `modes/sim/SimApp.tsx` — set the gesture alongside the existing `flyTo`/`setBubble`
+  in `fireEvent`; clears when the surface resolves.
+
+**Notes:** keep gestures to transform/opacity so they stay GPU-composited (the whole
+sprite layer is). Reuse the per-form structure in `SpriteBody` — gestures should read
+on all four forms (mossling/wisp/gremlin/moth), so animate the wrapper, not form-specific
+parts. Pairs naturally with the existing mood tint + alert ring.
+
+**Color pulse (same feature, cheapest channel):** transient-tint the alert ring + glow
+to a per-event-type hue while a surface is pending — red/urgent for failures &
+permission blocks, gold/success for completions, grey/dim for ignored noise. The ring
+and `.puck-glow` already read CSS vars (`--accent`, `--glow`), so this is a single
+`--alert-hue` override set from the same `engine` map that picks the gesture — one
+`{ gesture, hue }` lookup feeds both. Even shipping the color pulse *alone* (before
+gesture animation work) is a real readability win. Don't fight the existing mood tint
+(`--puck-body` etc.): pulse the ring/glow, leave the body color to mood, so "what kind
+of news" (hue) and "how Puck feels lately" (mood) stay separate signals.
+
+## Ambient quips — Puck reacts to what you're doing
+
+**What:** Occasionally Puck mutters a quip or non-sequitur riffing on your current
+context — the active app, a window title, the shape of what you're typing. Not help,
+not a summary: flavor. "Still in the auth thicket, I see." / "That's a lot of tabs for
+one small human." / a non-sequitur about the dock breathing. Low frequency, skippable,
+never twice about the same thing.
+
+**Why:** This is the difference between a notifier that lives in the corner and a
+familiar that *shares the room*. It's the most "alive" feature on the list — and the
+most dangerous, so it ships last and most carefully.
+
+**Privacy is the feature, not a caveat** (design doc §17.3–17.4 are the law here):
+- **Local inference ONLY — hard gate.** Context never leaves the machine. If the brain
+  is the cloud path (Modal/ZeroGPU), this feature is *disabled*, full stop, not degraded.
+  Enforce in code: the quip path checks the resolved brain is localhost and refuses
+  otherwise — a loud guard, not a setting.
+- **Opt-in, off by default.** A distinct toggle from notifications; the permission copy
+  says plainly what's read and that it stays local.
+- **Ephemeral, never persisted, never a trace, never training data.** Context for a quip
+  is read, used for one generation, dropped. It must not touch the memory garden, the
+  trace export, or localStorage.
+- **Redact before the model sees it.** Strip obvious secrets (password fields, token-shaped
+  strings, anything in a field marked sensitive). Prefer *abstractions* over content —
+  "a long terminal command", "a code file", "a messaging app" — over the literal text.
+  Quoting back verbatim is the creepy line; stay on the abstract side of it.
+- **Never about people or private content.** App categories and your own activity, yes;
+  the contents of a DM, an email body, a name on screen — no.
+
+**Where it slots in:**
+- The desktop watcher (future, §9.2: NSWorkspace frontmost app, optional AX/screen) is the
+  context source — same daemon `/events` path, a new low-priority `context` event kind, or
+  a separate local-only endpoint that never queues.
+- `engine` decides *whether* to quip (rare; respects annoyance budget / presence, reuses
+  the interruption-taste machinery so an annoying quip trains Puck quieter).
+- The quip generation uses the local brain with a tight "one playful aside, ≤12 words,
+  never quote the user" prompt; surfaces through the existing bubble channel.
+
+**Ship order:** after the desktop watcher exists and after a privacy pass. Until then it's
+sim-only flavor at most (riffing on the fake desktop, where there's nothing real to leak).
+
+## Phototaxis — a fairy drawn to stimuli (whimsical wander)
+
+**What:** Puck should behave like a moth/fairy — *pulled* toward activity rather than
+drifting at random. Flits toward motion, lingers near what's lively, chases the
+occasional shiny thing, then loses interest.
+
+**Why:** The wander is the sprite's resting personality — it's on screen far more than
+any bubble. Uniform-random reads as a screensaver; attraction reads as *alive and
+curious*. Highest charm-per-effort of the ambient ideas.
+
+**Buildable now — zero new permissions (do this part first):**
+Replace the uniform-random wander target in `SimApp` with a weighted pull toward salient
+points we already have:
+- the **cursor** (occasional gentle follow / curious approach, then retreat — never
+  clingy; respects `presence`),
+- the **last event location** (he lingers where something just happened),
+- in the overlay, the **focused window** rect (future: NSWorkspace frontmost-app
+  position via the daemon — he hangs near where you're working, patrols where you're not).
+Keep it a *gradient*, not a leash: weighted-random pick among attractors + noise, so it
+stays unpredictable. Lives in the engine as a pure `pickWanderTarget(attractors, rng)`;
+the loop already exists. Tune against `presence` (low = aloof, high = follows the action).
+
+**Sensor-gated — backlog, same privacy rules as ambient quips (local-only, ephemeral):**
+- **Screen color / motion / "flashing lights":** needs ScreenCaptureKit — the transparent
+  overlay can't see what's beneath it. A coarse, downsampled brightness/motion map (NOT
+  readable content) could let him drift toward an area that just changed (a video started,
+  a notification flashed). Local-only, never stored, abstractions not pixels.
+- **Audio reactivity:** mic is a hard no by default; "system audio is playing / its level"
+  is lighter but still opt-in + local-only. A bass-thump bob or a turn-toward-the-sound
+  would be delightful but ships last, behind the same gate as quips.
+
+**Smell test for all of it:** attraction must stay *cute*, never *surveillant*. He reacts
+to the shape of activity (something moved, something's loud), never to its content.
+
+## Take-me-there — Puck knows where the activity is, and ferries you to it
+
+**What:** On a real notification, Puck should point you at the *actual* window that needs
+you — fly to it if it's on this Space, beckon "follow me" if it's on another — and
+**clicking him navigates there** (focuses the app, macOS brings its Space forward).
+
+**Current behavior (the gap):** wire events arrive with `target: null` (the sim's targets
+were fake windows), so in the overlay `fireEvent` flies Puck to a *random* screen point.
+He has no idea where the source app lives — we never gave him real-window awareness.
+This is the design doc's Phase 4 ("patrol the desktops you abandoned" presumes knowing
+where they are).
+
+**Phase 1 — click-to-activate (high value, no Space geometry needed):**
+- Event carries a **locator**: source app bundle id / pid / window title. The Claude hook
+  already has `TERM_PROGRAM`, `cwd`, and the calling pid available; `puck-run` knows its
+  terminal. Add an optional `locator` to the wire schema (`{bundleId?, pid?, title?}`).
+- Rust command `activate_target(locator)` -> `NSRunningApplication(bundleIdentifier:).activate`
+  (or AX focus by pid/title). macOS switches to that app's Space automatically.
+- Frontend: clicking Puck while a located surface is pending calls it. This alone delivers
+  "Puck lit up -> click -> you're where the thing is," across Spaces, without knowing which.
+
+**Phase 2 — same-Space vs other-Space (the fiddly bit):**
+- Determine if the target window is on the *current* Space: `CGWindowListCopyWindowInfo`
+  with `kCGWindowListOptionOnScreenOnly` lists on-screen windows; absent target -> elsewhere.
+  Robust Space identity needs the semi-private CGSSpace APIs — fragile, optional.
+- Same Space -> fly to the window's screen rect (window bounds from CGWindowList).
+  Other Space -> a "come hither" beckon toward the screen edge (pairs with the gesture
+  entry), and the click teleports.
+
+**Notes:** locator is metadata, not content — bundle id + window title, never window
+*contents* (anti-creep). Activation is an explicit user click (navigation, not an
+autonomous action), so it stays inside the safety tiers. Depends on: gesture vocabulary
+(beckon) and the future native window watcher (NSWorkspace frontmost / CGWindowList).
+
+## Camouflage — Puck adapts to what he's floating over
+
+**What:** When Puck drifts over text or busy content, he reacts to his surroundings like
+a chameleon/glass-wisp — goes translucent, refracts, or (dream version) "mirrors" the
+texture behind him onto his own body. Blends, then pops back when he moves to empty space.
+
+**Why:** Sells "he's really *in* your desktop, not pasted on top." A creature that
+responds to its background reads as inhabiting the space. Pairs with the wisp form
+(already glass-like).
+
+**Cheap / free now (no sensing):**
+- **Shy fade:** lower sprite opacity while stationary over the busy center of the screen,
+  restore when wandering to the margins — pure CSS/opacity on the existing wander state.
+  Reads as "blending in" without literally seeing anything.
+- **Refraction (maybe free, needs a WKWebView test):** a `backdrop-filter` glass body on
+  the sprite. In the transparent overlay this *might* sample the real desktop behind the
+  window (same open question as the speech-bubble blur) — if it does, a refractive/distort
+  body gives instant chameleon shimmer with zero screen-capture. Test in the Tauri overlay
+  before committing to it.
+
+**Dream version — literal mirror (screen-capture gated):**
+- Sample the screen region directly under the sprite (ScreenCaptureKit), downsample, and
+  paint it onto his body as living camouflage. Stunning, but it's the same hard gate as
+  ambient quips / phototaxis sensors: local-only, ephemeral, opt-in, never stored, never
+  leaves the machine. Texture/color only — never treated as readable content.
+
+**Where it slots in:** `ui/Sprite.tsx` (a `camouflage` intensity prop on `.puck-body`),
+driven by `modes/sim` from sprite position vs. screen regions. The shy-fade is a
+20-minute add; refraction is a test-then-maybe; the literal mirror waits for the screen
+watcher + privacy pass.
+
+## Real app icons — known apps, OS-extracted where possible
+
+**What:** Replace the glyph characters (✳ ◍ ✉ …) in the sim windows/dock and feed
+source-markers with real app icons — Claude, ChatGPT, Chrome, Gmail, Mail, Discord,
+Terminal, etc. Looks dramatically more legit, especially in the overlay.
+
+**Pulling the *actual* OS icon (the good version):**
+- macOS: `NSWorkspace.shared.icon(forFile: "/Applications/Foo.app")` returns the real
+  icon for any installed `.app` bundle — a Rust/Tauri command can extract → PNG → hand to
+  the webview. So Chrome, Mail, Discord, Slack, the host terminal: real icons, free, always
+  current.
+- **The limit you called:** a terminal *binary* (claude, codex) has no bundle and no icon.
+  Fall back to the **host terminal's** icon (iTerm/Terminal/Ghostty/Warp — which the Claude
+  hook can report via `TERM_PROGRAM`), or a curated Puck-styled glyph.
+- **Web apps with no native app** (ChatGPT, Gmail as a tab): no bundle to extract from —
+  these need a small **curated bundled icon set** (a dozen SVGs/PNGs).
+
+**So: hybrid.** OS extraction where a bundle exists (Rust command, overlay only), curated
+bundled set for web-apps + terminal-binary fallbacks (works everywhere incl. the Space/sim).
+
+**Where it slots in:**
+- `ui/Desktop.tsx` (`WIN_DEFS` icons, dock glyphs) and the feed `source` marker — currently
+  single glyph chars; swap for an `<Icon source=…>` that prefers OS-extracted, falls back to
+  bundled, falls back to glyph.
+- Overlay-only Rust command `app_icon(bundleId|path) -> png` for the extraction half.
+- Engine `SOURCES`/`EventDef` already carry source identity; add an optional `bundleId` hint.
+
+**Cheap first step (no native):** ship the curated bundled icon set + source→icon map; use
+glyph only as last resort. The OS-extraction half is an overlay enhancement on top.
+
+## Local vision — the private, free path for continuous perception
+
+**What:** Run Puck's eyes on-device instead of (or alongside) Modal, so real-screen
+perception is private and continuous vision costs ~nothing. Brain seam already supports
+it: point PUCK_VISION_URL at a local OpenAI-compatible server.
+
+**Capability is NOT the blocker** (verified 2026-06-07): screen-reading is OCR + light
+"what's notable" reasoning — small VLMs excel at it. Options:
+- **Holotron-12B local** via llama.cpp + mmproj — llama.cpp merged Nemotron-Nano-12B-v2-VL
+  (PR #19547). `convert_hf_to_gguf.py --mmproj` → vision projector → `llama-server`. Same
+  model as cloud, same capability, ~24GB on the 48GB Mac, free. NB: Ollama can't load the
+  mmproj — must use raw llama-server. Keeps the Nemotron Quest tie.
+- **Qwen2.5-VL-7B local** — ~6GB, 95.7 DocVQA, fast; ideal for *continuous ambient* (every
+  45s forever on the M4 Max). Loses the Nemotron tie, plenty for screen-reading.
+- MiniCPM-V 2.6 (~5.5GB), Moondream2 (1.9B, CPU) as even-lighter fallbacks.
+
+**Recommendation:** Holotron for the showcase + Quest (cloud now → local llama-server
+later as the private path); Qwen2.5-VL-7B-local as the cheap continuous engine. The
+visionMode "Continuous" tier (built, currently same cloud path) should switch to a local
+PUCK_VISION_URL when this lands.
+
+**Where it slots in:** zero engine/frontend change — it's a runtime: spin up
+`llama-server --mmproj` (or vLLM/mlx when fixed) and set PUCK_VISION_URL. Plus the
+real-screen capture (ScreenCaptureKit, overlay) to feed it actual pixels instead of the
+sim snapshot.

Dockerfile

@@ -0,0 +1,45 @@
+# Puck — Hugging Face Space (Docker SDK).
+# Two stages: build the React UI, then run the gr.Server daemon that serves it AND
+# proxies "peeks" to the cloud (Modal) vision brain. The macOS-only paths (screen OCR,
+# `say` voice, ONNX recognizer) self-disable on Linux; the Space hosts the browser SIM,
+# whose vision runs against Modal. Custom UI over gr.Server = the Off-Brand badge.
+
+# ---- stage 1: build the frontend ----
+FROM node:24-slim AS web
+WORKDIR /web
+COPY frontend/package.json frontend/package-lock.json* ./
+RUN npm ci || npm install
+COPY frontend/ ./
+RUN npm run build   # → /web/dist
+
+# ---- stage 2: python daemon ----
+FROM ghcr.io/astral-sh/uv:python3.14-bookworm-slim
+# HF Spaces run as uid 1000 — give it a writable HOME for the peek log + uv cache.
+RUN useradd -m -u 1000 user
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH \
+    UV_LINK_MODE=copy \
+    UV_COMPILE_BYTECODE=1 \
+    PUCK_HOST=0.0.0.0 \
+    PORT=7860 \
+    PUCK_VISION_URL=https://vuluan--puck-brain-serve.modal.run/v1 \
+    PUCK_VISION_MODEL=Hcompany/Holotron-12B \
+    PUCK_VISION_TIMEOUT=120
+WORKDIR /home/user/app
+
+# deps first (cached across code edits); the server's lockfile drives the resolve
+COPY --chown=user:user server/pyproject.toml server/uv.lock ./server/
+RUN cd server && uv sync --no-dev
+
+# app code + the assets app.py reads at import (schema/) + the built UI
+COPY --chown=user:user server/ ./server/
+COPY --chown=user:user schema/ ./schema/
+COPY --chown=user:user --from=web /web/dist ./frontend/dist
+RUN mkdir -p server/data && chown -R user:user /home/user/app
+
+USER user
+EXPOSE 7860
+WORKDIR /home/user/app/server
+# Run the venv's interpreter directly — no `uv` at runtime (it would hit a root-owned
+# build-time cache, and we don't want a re-resolve on boot). The env is already synced.
+CMD ["/home/user/app/server/.venv/bin/python", "app.py"]

README.md

@@ -0,0 +1,58 @@
+---
+title: Puck
+emoji: 🧚
+colorFrom: green
+colorTo: purple
+sdk: docker
+app_port: 7860
+pinned: false
+license: mit
+short_description: A mischievous desktop fairy that comments on your work
+tags:
+  - build-small
+  - thousand-token-wood
+  - off-brand
+  - off-the-grid
+  - field-notes
+  - best-demo
+  - track:wood
+  - sponsor:nvidia
+  - sponsor:modal
+  - achievement:offgrid
+  - achievement:welltuned
+  - achievement:offbrand
+  - achievement:llama
+  - achievement:fieldnotes
+---
+
+<!-- TRACK + BADGES: the tag slugs above are my best guess. Before submitting, paste this
+     README into the field-guide validator (https://build-small-hackathon-field-guide.hf.space/submit)
+     and use the EXACT slugs it expects for the Thousand Token Wood track + each badge. -->
+
+# 🧚 Puck — a desktop fairy familiar
+
+Puck is a small, mischievous creature that lives on your screen. He **roams**, **peeks** at one little patch of whatever you're doing, and **murmurs** a single in-character line about it — then drifts on. He's not an assistant and not a notifier. He's company: *marginally useful, reliably charming.*
+
+> **This Space is the playable demo** (a simulated desktop in your browser). Puck's real home is a transparent always-on-top overlay on your actual Mac desktop — that's the video. Here you can poke him, watch him roam, peek, react, and blend into the desktop.
+
+**▶️ Demo video:** _<add link — YouTube or uploaded to this Space>_ · **📣 Social post:** _<add link>_ · **📓 Field notes:** [the build writeup](submission/FIELD_NOTES.md)
+
+## What he does
+- **Roam → peek → quip.** Every so often he flutters somewhere and looks at the small region under him. A vision-language model *sees that patch and speaks in his voice* in one shot — the AI is doing the fun thing, not narrating from a script.
+- **Feels things.** Each peek is classified into an emotion that drives his whole reaction together — a **gesture** (giddy laugh, NANI-confusion, a worried tremble, a wistful droop), an **aura color**, and an **emotional voice** (pitch + pace). Puck's a *learning* creature, so confusion is his honest default — and endearing.
+- **Reads the room.** On a real terminal he uses on-device OCR to tell *which* coding agent you're running (Claude Code vs Codex vs opencode vs pi) and grounds his quip in the actual text on screen.
+- **Camouflages.** Sit still and he cloaks — his skin clears so the desktop reads right through him, with a faint shimmer and two watching eyes. Move, and he snaps back.
+- **Dreams.** At night he **blooms** the day's peeks into a small garden of memories.
+
+## Built Small
+Puck is a constellation of small, laptop-sized models — **nothing over 32B**, and it fits in your pocket:
+- 👁️ **Vision + voice-of-the-fairy:** Nemotron-Nano-**12B**-VL (a single VLM that both *sees* and *speaks* the quip).
+- 🔤 **Tool/site recognition:** on-device **Vision OCR** + an **ONNX CLIP ViT-B/32** (~88M) fingerprinter.
+- 🗣️ **Neural voice:** **Kokoro-82M**, running in-browser (WebGPU) — a fairy voice in 82M params.
+
+The whole companion runs locally and offline ("Off the Grid"). *This hosted Space* uses a cloud (Modal) copy of the 12B so it works in your browser — which scales to zero, so **the first peek may take a moment while Puck stretches his wings.** ✨
+
+## Under the hood
+A custom React UI served by a **`gradio.Server`** daemon (Off-Brand) — two habitats from one app: this browser **sim**, and a **Tauri** overlay for the real desktop. Region peeks, an emotion contract, a memory log that blooms into a garden.
+
+*HF Build Small — Thousand Token Wood (Creative).*

frontend/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

frontend/biome.json

@@ -0,0 +1,45 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.4.16/schema.json",
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "files": {
+    "ignoreUnknown": false
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 110
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "a11y": {
+        "useKeyWithClickEvents": "off",
+        "noStaticElementInteractions": "off",
+        "noNoninteractiveElementInteractions": "off",
+        "useSemanticElements": "off"
+      },
+      "style": {
+        "noDescendingSpecificity": "off"
+      }
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "double"
+    }
+  },
+  "assist": {
+    "enabled": true,
+    "actions": {
+      "source": {
+        "organizeImports": "on"
+      }
+    }
+  }
+}

frontend/bun.lock

@@ -0,0 +1,371 @@
+{
+  "lockfileVersion": 1,
+  "configVersion": 1,
+  "workspaces": {
+    "": {
+      "name": "frontend",
+      "dependencies": {
+        "@tauri-apps/api": "^2.11.0",
+        "html-to-image": "^1.11.13",
+        "kokoro-js": "^1.2.1",
+        "react": "^19.2.6",
+        "react-dom": "^19.2.6",
+      },
+      "devDependencies": {
+        "@biomejs/biome": "^2.4.16",
+        "@types/node": "^24.12.3",
+        "@types/react": "^19.2.14",
+        "@types/react-dom": "^19.2.3",
+        "@vitejs/plugin-react": "^6.0.1",
+        "typescript": "~6.0.2",
+        "vite": "^8.0.12",
+        "vitest": "^4.1.8",
+      },
+    },
+  },
+  "packages": {
+    "@biomejs/biome": ["@biomejs/biome@2.4.16", "", { "optionalDependencies": { "@biomejs/cli-darwin-arm64": "2.4.16", "@biomejs/cli-darwin-x64": "2.4.16", "@biomejs/cli-linux-arm64": "2.4.16", "@biomejs/cli-linux-arm64-musl": "2.4.16", "@biomejs/cli-linux-x64": "2.4.16", "@biomejs/cli-linux-x64-musl": "2.4.16", "@biomejs/cli-win32-arm64": "2.4.16", "@biomejs/cli-win32-x64": "2.4.16" }, "bin": { "biome": "bin/biome" } }, "sha512-x9ajFh1zChVybCiM3TN6OD4phAqLgtPZjFrZF+aTMYCPjwBO+k529TX7PPsAqtGNLeV4UgzwQnowEgS7bGmzcA=="],
+
+    "@biomejs/cli-darwin-arm64": ["@biomejs/cli-darwin-arm64@2.4.16", "", { "os": "darwin", "cpu": "arm64" }, "sha512-wxPvu4XOA85YJk9ixSWUmq/QBHbid85BISbOAqqBM/5xQpPk9ayjk5375tOlSC0BeCwNSbPFafQBm+vBumXq0A=="],
+
+    "@biomejs/cli-darwin-x64": ["@biomejs/cli-darwin-x64@2.4.16", "", { "os": "darwin", "cpu": "x64" }, "sha512-xFCqGPwYusQJp4N4NJLi1XJiZqjwFdjhT+KqtNy+Ug3qgfczqnTa6MSDvxJF6TkuDLoYJItMapz6tAf7kCekFw=="],
+
+    "@biomejs/cli-linux-arm64": ["@biomejs/cli-linux-arm64@2.4.16", "", { "os": "linux", "cpu": "arm64" }, "sha512-2kFb4//jxfZaP6D+Rj5VkHkxgyD9EoRAVBEQb8PKRv+s4NO2zYNJKXFaJmK1CmhufJOWEfpHKaRbOja7qjmdhQ=="],
+
+    "@biomejs/cli-linux-arm64-musl": ["@biomejs/cli-linux-arm64-musl@2.4.16", "", { "os": "linux", "cpu": "arm64" }, "sha512-oYxnW0ARfJkr72ezzF2OR8N/rtkgLUQeYtF8cFhVswbknHxtTcmzSsanVJP8yQKnGpGpc2ck6c5zLvHahL6Cbg=="],
+
+    "@biomejs/cli-linux-x64": ["@biomejs/cli-linux-x64@2.4.16", "", { "os": "linux", "cpu": "x64" }, "sha512-NbcBbi/nJqn5baae6wqRXdS7Gadf2uRpehSh6vMSYpG8OhkXl/Xg8aorWrJ+9VWqAT5ml90alLvorkpMW0nBwQ=="],
+
+    "@biomejs/cli-linux-x64-musl": ["@biomejs/cli-linux-x64-musl@2.4.16", "", { "os": "linux", "cpu": "x64" }, "sha512-iHDS+MCM65DPqWGu+ECC3uoALyj2H7F4nVUPxIPjz/PIl94EUu+EDfGZDzFP+NY1EOPVt9NQvwFqq7HdMmowdg=="],
+
+    "@biomejs/cli-win32-arm64": ["@biomejs/cli-win32-arm64@2.4.16", "", { "os": "win32", "cpu": "arm64" }, "sha512-0rgImMsNb5v/chhkIFe3wu7PEFClS6RBAYUijGL9UsYN3PanSaoK24HSSuSJb1pYbYYVjzAyZTl3gtjJ84BM8A=="],
+
+    "@biomejs/cli-win32-x64": ["@biomejs/cli-win32-x64@2.4.16", "", { "os": "win32", "cpu": "x64" }, "sha512-Kp85jgoBHa05gix6UIRjfCDiUV3w/8VIdZ247VyyO2gEjaw12WEVhdIjlxp/AMzXxqxQwbxNTDVZ3Mwd2RG5rw=="],
+
+    "@emnapi/core": ["@emnapi/core@1.10.0", "", { "dependencies": { "@emnapi/wasi-threads": "1.2.1", "tslib": "^2.4.0" } }, "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw=="],
+
+    "@emnapi/runtime": ["@emnapi/runtime@1.10.0", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA=="],
+
+    "@emnapi/wasi-threads": ["@emnapi/wasi-threads@1.2.1", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w=="],
+
+    "@huggingface/jinja": ["@huggingface/jinja@0.5.9", "", {}, "sha512-uWTG+l3VJRsl7EXxYizuL3P+cCPoc3cRqbWWRcQN0FhejRfbdq0RNhCmbY/YDtnTcz9icdLYuLDjsnz4d8JMuw=="],
+
+    "@huggingface/transformers": ["@huggingface/transformers@3.8.1", "", { "dependencies": { "@huggingface/jinja": "^0.5.3", "onnxruntime-node": "1.21.0", "onnxruntime-web": "1.22.0-dev.20250409-89f8206ba4", "sharp": "^0.34.1" } }, "sha512-tsTk4zVjImqdqjS8/AOZg2yNLd1z9S5v+7oUPpXaasDRwEDhB+xnglK1k5cad26lL5/ZIaeREgWWy0bs9y9pPA=="],
+
+    "@img/colour": ["@img/colour@1.1.0", "", {}, "sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ=="],
+
+    "@img/sharp-darwin-arm64": ["@img/sharp-darwin-arm64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-darwin-arm64": "1.2.4" }, "os": "darwin", "cpu": "arm64" }, "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w=="],
+
+    "@img/sharp-darwin-x64": ["@img/sharp-darwin-x64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-darwin-x64": "1.2.4" }, "os": "darwin", "cpu": "x64" }, "sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw=="],
+
+    "@img/sharp-libvips-darwin-arm64": ["@img/sharp-libvips-darwin-arm64@1.2.4", "", { "os": "darwin", "cpu": "arm64" }, "sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g=="],
+
+    "@img/sharp-libvips-darwin-x64": ["@img/sharp-libvips-darwin-x64@1.2.4", "", { "os": "darwin", "cpu": "x64" }, "sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg=="],
+
+    "@img/sharp-libvips-linux-arm": ["@img/sharp-libvips-linux-arm@1.2.4", "", { "os": "linux", "cpu": "arm" }, "sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A=="],
+
+    "@img/sharp-libvips-linux-arm64": ["@img/sharp-libvips-linux-arm64@1.2.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw=="],
+
+    "@img/sharp-libvips-linux-ppc64": ["@img/sharp-libvips-linux-ppc64@1.2.4", "", { "os": "linux", "cpu": "ppc64" }, "sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA=="],
+
+    "@img/sharp-libvips-linux-riscv64": ["@img/sharp-libvips-linux-riscv64@1.2.4", "", { "os": "linux", "cpu": "none" }, "sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA=="],
+
+    "@img/sharp-libvips-linux-s390x": ["@img/sharp-libvips-linux-s390x@1.2.4", "", { "os": "linux", "cpu": "s390x" }, "sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ=="],
+
+    "@img/sharp-libvips-linux-x64": ["@img/sharp-libvips-linux-x64@1.2.4", "", { "os": "linux", "cpu": "x64" }, "sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw=="],
+
+    "@img/sharp-libvips-linuxmusl-arm64": ["@img/sharp-libvips-linuxmusl-arm64@1.2.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw=="],
+
+    "@img/sharp-libvips-linuxmusl-x64": ["@img/sharp-libvips-linuxmusl-x64@1.2.4", "", { "os": "linux", "cpu": "x64" }, "sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg=="],
+
+    "@img/sharp-linux-arm": ["@img/sharp-linux-arm@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-arm": "1.2.4" }, "os": "linux", "cpu": "arm" }, "sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw=="],
+
+    "@img/sharp-linux-arm64": ["@img/sharp-linux-arm64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-arm64": "1.2.4" }, "os": "linux", "cpu": "arm64" }, "sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg=="],
+
+    "@img/sharp-linux-ppc64": ["@img/sharp-linux-ppc64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-ppc64": "1.2.4" }, "os": "linux", "cpu": "ppc64" }, "sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA=="],
+
+    "@img/sharp-linux-riscv64": ["@img/sharp-linux-riscv64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-riscv64": "1.2.4" }, "os": "linux", "cpu": "none" }, "sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw=="],
+
+    "@img/sharp-linux-s390x": ["@img/sharp-linux-s390x@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-s390x": "1.2.4" }, "os": "linux", "cpu": "s390x" }, "sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg=="],
+
+    "@img/sharp-linux-x64": ["@img/sharp-linux-x64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-x64": "1.2.4" }, "os": "linux", "cpu": "x64" }, "sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ=="],
+
+    "@img/sharp-linuxmusl-arm64": ["@img/sharp-linuxmusl-arm64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linuxmusl-arm64": "1.2.4" }, "os": "linux", "cpu": "arm64" }, "sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg=="],
+
+    "@img/sharp-linuxmusl-x64": ["@img/sharp-linuxmusl-x64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linuxmusl-x64": "1.2.4" }, "os": "linux", "cpu": "x64" }, "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q=="],
+
+    "@img/sharp-wasm32": ["@img/sharp-wasm32@0.34.5", "", { "dependencies": { "@emnapi/runtime": "^1.7.0" }, "cpu": "none" }, "sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw=="],
+
+    "@img/sharp-win32-arm64": ["@img/sharp-win32-arm64@0.34.5", "", { "os": "win32", "cpu": "arm64" }, "sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g=="],
+
+    "@img/sharp-win32-ia32": ["@img/sharp-win32-ia32@0.34.5", "", { "os": "win32", "cpu": "ia32" }, "sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg=="],
+
+    "@img/sharp-win32-x64": ["@img/sharp-win32-x64@0.34.5", "", { "os": "win32", "cpu": "x64" }, "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw=="],
+
+    "@isaacs/fs-minipass": ["@isaacs/fs-minipass@4.0.1", "", { "dependencies": { "minipass": "^7.0.4" } }, "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w=="],
+
+    "@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.5", "", {}, "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og=="],
+
+    "@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.1.4", "", { "dependencies": { "@tybys/wasm-util": "^0.10.1" }, "peerDependencies": { "@emnapi/core": "^1.7.1", "@emnapi/runtime": "^1.7.1" } }, "sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow=="],
+
+    "@oxc-project/types": ["@oxc-project/types@0.133.0", "", {}, "sha512-KzkdCd6Uxqnf6l3HOw1xfatAlUURA0g14cvBYFyJ5SaNOQbOUvBr9PKArcPcrNIeRsBdgcUzOGrhKveVpvOIGA=="],
+
+    "@protobufjs/aspromise": ["@protobufjs/aspromise@1.1.2", "", {}, "sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ=="],
+
+    "@protobufjs/base64": ["@protobufjs/base64@1.1.2", "", {}, "sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg=="],
+
+    "@protobufjs/codegen": ["@protobufjs/codegen@2.0.5", "", {}, "sha512-zgXFLzW3Ap33e6d0Wlj4MGIm6Ce8O89n/apUaGNB/jx+hw+ruWEp7EwGUshdLKVRCxZW12fp9r40E1mQrf/34g=="],
+
+    "@protobufjs/eventemitter": ["@protobufjs/eventemitter@1.1.1", "", {}, "sha512-vW1GmwMZNnL+gMRaovlh9yZX74kc+TTU3FObkkurpMaRtBfLP3ldjS9KQWlwZgraRE0+dheEEoAxdzcJQ8eXZg=="],
+
+    "@protobufjs/fetch": ["@protobufjs/fetch@1.1.1", "", { "dependencies": { "@protobufjs/aspromise": "^1.1.1" } }, "sha512-GpptLrs57adMSuHi3VNj0mAF8dwh36LMaYF6XyJ6JMWlVsc+t42tm1HSEDmOs3A8fC9yyeisgLhsTVQokOZ0zw=="],
+
+    "@protobufjs/float": ["@protobufjs/float@1.0.2", "", {}, "sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ=="],
+
+    "@protobufjs/inquire": ["@protobufjs/inquire@1.1.2", "", {}, "sha512-pa0vFRuws4wkvaXKK1uXZMAwAX4/t8ANaJo45iw/oQHNQ9q5xUzwgFmVJGXiga2BeN+zpX7Vf9vmsiIa2J+MUw=="],
+
+    "@protobufjs/path": ["@protobufjs/path@1.1.2", "", {}, "sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA=="],
+
+    "@protobufjs/pool": ["@protobufjs/pool@1.1.0", "", {}, "sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw=="],
+
+    "@protobufjs/utf8": ["@protobufjs/utf8@1.1.1", "", {}, "sha512-oOAWABowe8EAbMyWKM0tYDKi8Yaox52D+HWZhAIJqQXbqe0xI/GV7FhLWqlEKreMkfDjshR5FKgi3mnle0h6Eg=="],
+
+    "@rolldown/binding-android-arm64": ["@rolldown/binding-android-arm64@1.0.3", "", { "os": "android", "cpu": "arm64" }, "sha512-454rs7jHngixp/NMxd5srYD57OnzSlZ/eFTETjORQHLwJG1lRtmNOJcBerZlfu4GjKqeq8aCCIQrMdHyhI51Hw=="],
+
+    "@rolldown/binding-darwin-arm64": ["@rolldown/binding-darwin-arm64@1.0.3", "", { "os": "darwin", "cpu": "arm64" }, "sha512-PcAhP+ynjURNyy8SKGl5DQP94aGuB/7JrXJb/t7P+hanXvQVMWzUvRRhBAcg/lNRadBhoUPqSoP4xw5tR/KBEA=="],
+
+    "@rolldown/binding-darwin-x64": ["@rolldown/binding-darwin-x64@1.0.3", "", { "os": "darwin", "cpu": "x64" }, "sha512-9YpfeUvSE2RS7wysJ81uOZkXJz7f7Q55H2Gvp3VEw/EsahqDtrphrZ0EwDLK5vvKOzaCrBsjF8JmnMLcUt78Gg=="],
+
+    "@rolldown/binding-freebsd-x64": ["@rolldown/binding-freebsd-x64@1.0.3", "", { "os": "freebsd", "cpu": "x64" }, "sha512-yB1IlAsSNHncV6SCTL27/MVGR5htvQsoGxIv5KMGXALp+Ll1wYsn+x98M9MW7qa+NdSbvrrY7ANI4wLJ0n1e6g=="],
+
+    "@rolldown/binding-linux-arm-gnueabihf": ["@rolldown/binding-linux-arm-gnueabihf@1.0.3", "", { "os": "linux", "cpu": "arm" }, "sha512-Yi30IVAAfLUCy2MseFjbB1jAMDl1VMCAas5StnYp8da9+CKvMd2H2cbEjWcw5NPaPqzvYkVIaF1nNUG+b7u/sw=="],
+
+    "@rolldown/binding-linux-arm64-gnu": ["@rolldown/binding-linux-arm64-gnu@1.0.3", "", { "os": "linux", "cpu": "arm64" }, "sha512-jsO7R8To+AdlYgUmN5sHSCZbfhtMBkO0WUx8iORQnPcMMdgr7qM2DQmMwgabs3GhNztdmoKkMKQFHD6DTMCIQw=="],
+
+    "@rolldown/binding-linux-arm64-musl": ["@rolldown/binding-linux-arm64-musl@1.0.3", "", { "os": "linux", "cpu": "arm64" }, "sha512-VWkUHwWriDciit80wleYwKILoR/KMvxh/IdwS/paX+ZgpuRpCrKLUdadJbc0NpBEiyhpYawsJ73j9aCvOH+f7Q=="],
+
+    "@rolldown/binding-linux-ppc64-gnu": ["@rolldown/binding-linux-ppc64-gnu@1.0.3", "", { "os": "linux", "cpu": "ppc64" }, "sha512-5f1laC0SlIR0yDbFCd8acUhvJIag6N3zC5P7oUPN6wX0aOma+uKJ0wBDH5aq7I1PVI2ttTlhJwzwRIBnLiSGEg=="],
+
+    "@rolldown/binding-linux-s390x-gnu": ["@rolldown/binding-linux-s390x-gnu@1.0.3", "", { "os": "linux", "cpu": "s390x" }, "sha512-Iq4ko0r4XsgbrF/LunNgHtAGLRRVE2kXonAXQ/MV0mC6jQpMOhW1SvtZja2EhC/kd05++bP78dsqBeIQyYJ6Yg=="],
+
+    "@rolldown/binding-linux-x64-gnu": ["@rolldown/binding-linux-x64-gnu@1.0.3", "", { "os": "linux", "cpu": "x64" }, "sha512-B8m6tD5+/N5FeNQFbKlLA/2yVq9ycQP1SeedyEYYKWBNR3ZQbkvIUcNnDNM03lO1l5F2roiiFJGgvoLLyZXtSg=="],
+
+    "@rolldown/binding-linux-x64-musl": ["@rolldown/binding-linux-x64-musl@1.0.3", "", { "os": "linux", "cpu": "x64" }, "sha512-pSdpdUJHkuCxun9LE7jvgUB9qsRgaiyNNCX7m/AvHTcq67AiT/Yhoxvw5zPfhrM8k/BfP8ce/hMOpthKDpEUow=="],
+
+    "@rolldown/binding-openharmony-arm64": ["@rolldown/binding-openharmony-arm64@1.0.3", "", { "os": "none", "cpu": "arm64" }, "sha512-OXXS3RKJgX2uLwM+gYyuH5omcH8fL1LJs96pZGgtetVCahON57+d4SJHzTgZiOjxgGkSnpXpOsWuPDGAKAigEg=="],
+
+    "@rolldown/binding-wasm32-wasi": ["@rolldown/binding-wasm32-wasi@1.0.3", "", { "dependencies": { "@emnapi/core": "1.10.0", "@emnapi/runtime": "1.10.0", "@napi-rs/wasm-runtime": "^1.1.4" }, "cpu": "none" }, "sha512-JTtb8BWFynicNSoPrehsCzBtOKjZ6jhMiPFEmOiuXg1Fl8dn2KHQob+GuPSGR0dryQa1PQJbzjF3dqO/whhjLg=="],
+
+    "@rolldown/binding-win32-arm64-msvc": ["@rolldown/binding-win32-arm64-msvc@1.0.3", "", { "os": "win32", "cpu": "arm64" }, "sha512-gEdFFEN70A/jxb2svrWsN3aDL7OUtmvlOy+6fa2jxG8K0wQ1ZbdeLGnidov6Yu5/733dI5ySfzFlQ/cb0bSz1g=="],
+
+    "@rolldown/binding-win32-x64-msvc": ["@rolldown/binding-win32-x64-msvc@1.0.3", "", { "os": "win32", "cpu": "x64" }, "sha512-eXB7CHuaQdqmJcc3koCNtNPmT/bj2gc999kUFgBxG8Ac0NdgXc4rkCHhqrgrhN3zddvvvrgzj1e90SuSfmyIXA=="],
+
+    "@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.1", "", {}, "sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw=="],
+
+    "@standard-schema/spec": ["@standard-schema/spec@1.1.0", "", {}, "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w=="],
+
+    "@tauri-apps/api": ["@tauri-apps/api@2.11.0", "", {}, "sha512-7CinYODhky9lmO23xHnUFv0Xt43fbtWMyxZcLcRBlFkcgXKuEirBvHpmtJ89YMhyeGcq20Wuc47Fa4XjyniywA=="],
+
+    "@tybys/wasm-util": ["@tybys/wasm-util@0.10.2", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-RoBvJ2X0wuKlWFIjrwffGw1IqZHKQqzIchKaadZZfnNpsAYp2mM0h36JtPCjNDAHGgYez/15uMBpfGwchhiMgg=="],
+
+    "@types/chai": ["@types/chai@5.2.3", "", { "dependencies": { "@types/deep-eql": "*", "assertion-error": "^2.0.1" } }, "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA=="],
+
+    "@types/deep-eql": ["@types/deep-eql@4.0.2", "", {}, "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw=="],
+
+    "@types/estree": ["@types/estree@1.0.9", "", {}, "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg=="],
+
+    "@types/node": ["@types/node@24.13.1", "", { "dependencies": { "undici-types": "~7.18.0" } }, "sha512-RSpUJGmvsJ1ZeBehQZFhIdpsz+bIpES0nIQXko4Ybq+N+kX6XvOq3Jo+iJ82FWLdblFq85AsMikd3m35jgezYg=="],
+
+    "@types/react": ["@types/react@19.2.17", "", { "dependencies": { "csstype": "^3.2.2" } }, "sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw=="],
+
+    "@types/react-dom": ["@types/react-dom@19.2.3", "", { "peerDependencies": { "@types/react": "^19.2.0" } }, "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ=="],
+
+    "@vitejs/plugin-react": ["@vitejs/plugin-react@6.0.2", "", { "dependencies": { "@rolldown/pluginutils": "^1.0.0" }, "peerDependencies": { "@rolldown/plugin-babel": "^0.1.7 || ^0.2.0", "babel-plugin-react-compiler": "^1.0.0", "vite": "^8.0.0" }, "optionalPeers": ["@rolldown/plugin-babel", "babel-plugin-react-compiler"] }, "sha512-DlSMqo4WhThw4vB8Mpn0Woe9J+Jfq1geJ61AKW0QEgLzGMNwtIMdxbDUzLxcun8W7NbJO0e2Jg/Nxm3cCSVzzg=="],
+
+    "@vitest/expect": ["@vitest/expect@4.1.8", "", { "dependencies": { "@standard-schema/spec": "^1.1.0", "@types/chai": "^5.2.2", "@vitest/spy": "4.1.8", "@vitest/utils": "4.1.8", "chai": "^6.2.2", "tinyrainbow": "^3.1.0" } }, "sha512-h3nDO677RDLEGlBxyQ5CW8RlMThSKSRLUePLOx09gNIWRL40edgA1GCZSZgf1W55MFAG6/Sw14KeaAnqv0NKdQ=="],
+
+    "@vitest/mocker": ["@vitest/mocker@4.1.8", "", { "dependencies": { "@vitest/spy": "4.1.8", "estree-walker": "^3.0.3", "magic-string": "^0.30.21" }, "peerDependencies": { "msw": "^2.4.9", "vite": "^6.0.0 || ^7.0.0 || ^8.0.0" }, "optionalPeers": ["msw", "vite"] }, "sha512-LEiN/xe4OSIbKe9HQIp5OC24agGD9J5CnmMgsLohVVoOPWL9a2sBoR6VBx43jQZb7Kr1l4RCuyCJzcAa0+dojw=="],
+
+    "@vitest/pretty-format": ["@vitest/pretty-format@4.1.8", "", { "dependencies": { "tinyrainbow": "^3.1.0" } }, "sha512-9GasEBxpZ1VYIpqHf/0+YGg121uSNwCKOJqIrTwWP/TB7DmFCiaBpNl3aPZzoLWfWkuqhbH8vJIVobZkvdo2cA=="],
+
+    "@vitest/runner": ["@vitest/runner@4.1.8", "", { "dependencies": { "@vitest/utils": "4.1.8", "pathe": "^2.0.3" } }, "sha512-EmVxeBAfMJvycdjd6Hm+RbFBbA9fKvo0Kx37hNpBYoYeavH3RNsBXWDooR1mgD52dCrxIIuP7UotpfiwOikvcg=="],
+
+    "@vitest/snapshot": ["@vitest/snapshot@4.1.8", "", { "dependencies": { "@vitest/pretty-format": "4.1.8", "@vitest/utils": "4.1.8", "magic-string": "^0.30.21", "pathe": "^2.0.3" } }, "sha512-acfZboRmAIf05DEKcBQy33VXojFJjtUdLyo7oOmV9kebb2xdU01UknNiPuPZoJZQyO7DF0gZdTGTpeAzET9QPQ=="],
+
+    "@vitest/spy": ["@vitest/spy@4.1.8", "", {}, "sha512-6EevtBp6OZOPF7bmz36HrGMeP3txgVSrgebWxHOafDXGkhIzfXK14f8KF6MuFfgXXUeHxmpD3BQxkV00/3s5mA=="],
+
+    "@vitest/utils": ["@vitest/utils@4.1.8", "", { "dependencies": { "@vitest/pretty-format": "4.1.8", "convert-source-map": "^2.0.0", "tinyrainbow": "^3.1.0" } }, "sha512-uOJamYALNhfJ6iolExyQM40yIQwDqYnkKtQ5VCiSe17E33H0aQ/u+1GlRuz4LZBk6Mm3sg90G9hEbmEt37C1Zg=="],
+
+    "assertion-error": ["assertion-error@2.0.1", "", {}, "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA=="],
+
+    "boolean": ["boolean@3.2.0", "", {}, "sha512-d0II/GO9uf9lfUHH2BQsjxzRJZBdsjgsBiW4BvhWk/3qoKwQFjIDVN19PfX8F2D/r9PCMTtLWjYVCFrpeYUzsw=="],
+
+    "chai": ["chai@6.2.2", "", {}, "sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg=="],
+
+    "chownr": ["chownr@3.0.0", "", {}, "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g=="],
+
+    "convert-source-map": ["convert-source-map@2.0.0", "", {}, "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="],
+
+    "csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],
+
+    "define-data-property": ["define-data-property@1.1.4", "", { "dependencies": { "es-define-property": "^1.0.0", "es-errors": "^1.3.0", "gopd": "^1.0.1" } }, "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A=="],
+
+    "define-properties": ["define-properties@1.2.1", "", { "dependencies": { "define-data-property": "^1.0.1", "has-property-descriptors": "^1.0.0", "object-keys": "^1.1.1" } }, "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg=="],
+
+    "detect-libc": ["detect-libc@2.1.2", "", {}, "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ=="],
+
+    "detect-node": ["detect-node@2.1.0", "", {}, "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g=="],
+
+    "es-define-property": ["es-define-property@1.0.1", "", {}, "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g=="],
+
+    "es-errors": ["es-errors@1.3.0", "", {}, "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw=="],
+
+    "es-module-lexer": ["es-module-lexer@2.1.0", "", {}, "sha512-n27zTYMjYu1aj4MjCWzSP7G9r75utsaoc8m61weK+W8JMBGGQybd43GstCXZ3WNmSFtGT9wi59qQTW6mhTR5LQ=="],
+
+    "es6-error": ["es6-error@4.1.1", "", {}, "sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg=="],
+
+    "escape-string-regexp": ["escape-string-regexp@4.0.0", "", {}, "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="],
+
+    "estree-walker": ["estree-walker@3.0.3", "", { "dependencies": { "@types/estree": "^1.0.0" } }, "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g=="],
+
+    "expect-type": ["expect-type@1.3.0", "", {}, "sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA=="],
+
+    "fdir": ["fdir@6.5.0", "", { "peerDependencies": { "picomatch": "^3 || ^4" }, "optionalPeers": ["picomatch"] }, "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg=="],
+
+    "flatbuffers": ["flatbuffers@25.9.23", "", {}, "sha512-MI1qs7Lo4Syw0EOzUl0xjs2lsoeqFku44KpngfIduHBYvzm8h2+7K8YMQh1JtVVVrUvhLpNwqVi4DERegUJhPQ=="],
+
+    "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
+
+    "global-agent": ["global-agent@3.0.0", "", { "dependencies": { "boolean": "^3.0.1", "es6-error": "^4.1.1", "matcher": "^3.0.0", "roarr": "^2.15.3", "semver": "^7.3.2", "serialize-error": "^7.0.1" } }, "sha512-PT6XReJ+D07JvGoxQMkT6qji/jVNfX/h364XHZOWeRzy64sSFr+xJ5OX7LI3b4MPQzdL4H8Y8M0xzPpsVMwA8Q=="],
+
+    "globalthis": ["globalthis@1.0.4", "", { "dependencies": { "define-properties": "^1.2.1", "gopd": "^1.0.1" } }, "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ=="],
+
+    "gopd": ["gopd@1.2.0", "", {}, "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg=="],
+
+    "guid-typescript": ["guid-typescript@1.0.9", "", {}, "sha512-Y8T4vYhEfwJOTbouREvG+3XDsjr8E3kIr7uf+JZ0BYloFsttiHU0WfvANVsR7TxNUJa/WpCnw/Ino/p+DeBhBQ=="],
+
+    "has-property-descriptors": ["has-property-descriptors@1.0.2", "", { "dependencies": { "es-define-property": "^1.0.0" } }, "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg=="],
+
+    "html-to-image": ["html-to-image@1.11.13", "", {}, "sha512-cuOPoI7WApyhBElTTb9oqsawRvZ0rHhaHwghRLlTuffoD1B2aDemlCruLeZrUIIdvG7gs9xeELEPm6PhuASqrg=="],
+
+    "json-stringify-safe": ["json-stringify-safe@5.0.1", "", {}, "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA=="],
+
+    "kokoro-js": ["kokoro-js@1.2.1", "", { "dependencies": { "@huggingface/transformers": "^3.5.1", "phonemizer": "^1.2.1" } }, "sha512-oq0HZJWis3t8lERkMJh84WLU86dpYD0EuBPtqYnLlQzyFP1OkyBRDcweAqCfhNOpltyN9j/azp1H6uuC47gShw=="],
+
+    "lightningcss": ["lightningcss@1.32.0", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-android-arm64": "1.32.0", "lightningcss-darwin-arm64": "1.32.0", "lightningcss-darwin-x64": "1.32.0", "lightningcss-freebsd-x64": "1.32.0", "lightningcss-linux-arm-gnueabihf": "1.32.0", "lightningcss-linux-arm64-gnu": "1.32.0", "lightningcss-linux-arm64-musl": "1.32.0", "lightningcss-linux-x64-gnu": "1.32.0", "lightningcss-linux-x64-musl": "1.32.0", "lightningcss-win32-arm64-msvc": "1.32.0", "lightningcss-win32-x64-msvc": "1.32.0" } }, "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ=="],
+
+    "lightningcss-android-arm64": ["lightningcss-android-arm64@1.32.0", "", { "os": "android", "cpu": "arm64" }, "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg=="],
+
+    "lightningcss-darwin-arm64": ["lightningcss-darwin-arm64@1.32.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ=="],
+
+    "lightningcss-darwin-x64": ["lightningcss-darwin-x64@1.32.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w=="],
+
+    "lightningcss-freebsd-x64": ["lightningcss-freebsd-x64@1.32.0", "", { "os": "freebsd", "cpu": "x64" }, "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig=="],
+
+    "lightningcss-linux-arm-gnueabihf": ["lightningcss-linux-arm-gnueabihf@1.32.0", "", { "os": "linux", "cpu": "arm" }, "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw=="],
+
+    "lightningcss-linux-arm64-gnu": ["lightningcss-linux-arm64-gnu@1.32.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ=="],
+
+    "lightningcss-linux-arm64-musl": ["lightningcss-linux-arm64-musl@1.32.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg=="],
+
+    "lightningcss-linux-x64-gnu": ["lightningcss-linux-x64-gnu@1.32.0", "", { "os": "linux", "cpu": "x64" }, "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA=="],
+
+    "lightningcss-linux-x64-musl": ["lightningcss-linux-x64-musl@1.32.0", "", { "os": "linux", "cpu": "x64" }, "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg=="],
+
+    "lightningcss-win32-arm64-msvc": ["lightningcss-win32-arm64-msvc@1.32.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw=="],
+
+    "lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.32.0", "", { "os": "win32", "cpu": "x64" }, "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q=="],
+
+    "long": ["long@5.3.2", "", {}, "sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA=="],
+
+    "magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
+
+    "matcher": ["matcher@3.0.0", "", { "dependencies": { "escape-string-regexp": "^4.0.0" } }, "sha512-OkeDaAZ/bQCxeFAozM55PKcKU0yJMPGifLwV4Qgjitu+5MoAfSQN4lsLJeXZ1b8w0x+/Emda6MZgXS1jvsapng=="],
+
+    "minipass": ["minipass@7.1.3", "", {}, "sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A=="],
+
+    "minizlib": ["minizlib@3.1.0", "", { "dependencies": { "minipass": "^7.1.2" } }, "sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw=="],
+
+    "nanoid": ["nanoid@3.3.12", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ=="],
+
+    "object-keys": ["object-keys@1.1.1", "", {}, "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="],
+
+    "obug": ["obug@2.1.2", "", {}, "sha512-AWGB9WFcRXOQs48Z/udjI5ZcZMHXwX8XPByNpOydgcGsDLIzjGizhoMWJyKAWze7AVW/2W1i+/gPX4YtKe5cyg=="],
+
+    "onnxruntime-common": ["onnxruntime-common@1.21.0", "", {}, "sha512-Q632iLLrtCAVOTO65dh2+mNbQir/QNTVBG3h/QdZBpns7mZ0RYbLRBgGABPbpU9351AgYy7SJf1WaeVwMrBFPQ=="],
+
+    "onnxruntime-node": ["onnxruntime-node@1.21.0", "", { "dependencies": { "global-agent": "^3.0.0", "onnxruntime-common": "1.21.0", "tar": "^7.0.1" }, "os": [ "linux", "win32", "darwin", ] }, "sha512-NeaCX6WW2L8cRCSqy3bInlo5ojjQqu2fD3D+9W5qb5irwxhEyWKXeH2vZ8W9r6VxaMPUan+4/7NDwZMtouZxEw=="],
+
+    "onnxruntime-web": ["onnxruntime-web@1.22.0-dev.20250409-89f8206ba4", "", { "dependencies": { "flatbuffers": "^25.1.24", "guid-typescript": "^1.0.9", "long": "^5.2.3", "onnxruntime-common": "1.22.0-dev.20250409-89f8206ba4", "platform": "^1.3.6", "protobufjs": "^7.2.4" } }, "sha512-0uS76OPgH0hWCPrFKlL8kYVV7ckM7t/36HfbgoFw6Nd0CZVVbQC4PkrR8mBX8LtNUFZO25IQBqV2Hx2ho3FlbQ=="],
+
+    "pathe": ["pathe@2.0.3", "", {}, "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w=="],
+
+    "phonemizer": ["phonemizer@1.2.1", "", {}, "sha512-v0KJ4mi2T4Q7eJQ0W15Xd4G9k4kICSXE8bpDeJ8jisL4RyJhNWsweKTOi88QXFc4r4LZlz5jVL5lCHhkpdT71A=="],
+
+    "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
+
+    "picomatch": ["picomatch@4.0.4", "", {}, "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A=="],
+
+    "platform": ["platform@1.3.6", "", {}, "sha512-fnWVljUchTro6RiCFvCXBbNhJc2NijN7oIQxbwsyL0buWJPG85v81ehlHI9fXrJsMNgTofEoWIQeClKpgxFLrg=="],
+
+    "postcss": ["postcss@8.5.15", "", { "dependencies": { "nanoid": "^3.3.12", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A=="],
+
+    "protobufjs": ["protobufjs@7.6.2", "", { "dependencies": { "@protobufjs/aspromise": "^1.1.2", "@protobufjs/base64": "^1.1.2", "@protobufjs/codegen": "^2.0.5", "@protobufjs/eventemitter": "^1.1.1", "@protobufjs/fetch": "^1.1.1", "@protobufjs/float": "^1.0.2", "@protobufjs/inquire": "^1.1.2", "@protobufjs/path": "^1.1.2", "@protobufjs/pool": "^1.1.0", "@protobufjs/utf8": "^1.1.1", "@types/node": ">=13.7.0", "long": "^5.3.2" } }, "sha512-N9EiLovGEQOJSPF26Ij7qUGvahfEnq0eeYZ02aigIedkmz1qZSwjnP9SBITHJuF/6MYbIW4HDN8zdYjsjqJKXQ=="],
+
+    "react": ["react@19.2.7", "", {}, "sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ=="],
+
+    "react-dom": ["react-dom@19.2.7", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.7" } }, "sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ=="],
+
+    "roarr": ["roarr@2.15.4", "", { "dependencies": { "boolean": "^3.0.1", "detect-node": "^2.0.4", "globalthis": "^1.0.1", "json-stringify-safe": "^5.0.1", "semver-compare": "^1.0.0", "sprintf-js": "^1.1.2" } }, "sha512-CHhPh+UNHD2GTXNYhPWLnU8ONHdI+5DI+4EYIAOaiD63rHeYlZvyh8P+in5999TTSFgUYuKUAjzRI4mdh/p+2A=="],
+
+    "rolldown": ["rolldown@1.0.3", "", { "dependencies": { "@oxc-project/types": "=0.133.0", "@rolldown/pluginutils": "^1.0.0" }, "optionalDependencies": { "@rolldown/binding-android-arm64": "1.0.3", "@rolldown/binding-darwin-arm64": "1.0.3", "@rolldown/binding-darwin-x64": "1.0.3", "@rolldown/binding-freebsd-x64": "1.0.3", "@rolldown/binding-linux-arm-gnueabihf": "1.0.3", "@rolldown/binding-linux-arm64-gnu": "1.0.3", "@rolldown/binding-linux-arm64-musl": "1.0.3", "@rolldown/binding-linux-ppc64-gnu": "1.0.3", "@rolldown/binding-linux-s390x-gnu": "1.0.3", "@rolldown/binding-linux-x64-gnu": "1.0.3", "@rolldown/binding-linux-x64-musl": "1.0.3", "@rolldown/binding-openharmony-arm64": "1.0.3", "@rolldown/binding-wasm32-wasi": "1.0.3", "@rolldown/binding-win32-arm64-msvc": "1.0.3", "@rolldown/binding-win32-x64-msvc": "1.0.3" }, "bin": { "rolldown": "./bin/cli.mjs" } }, "sha512-i00lAJ2ks1BYr7rjNjKC7BcqAS7nVfiT3QX1SI5aY+AFHblCmaUf9OE9dbdzDvW6dJxbi2ZCZiy9v3CcwOiX3g=="],
+
+    "scheduler": ["scheduler@0.27.0", "", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="],
+
+    "semver": ["semver@7.8.2", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-c8jsqUZm3omBOI66G90z1Dyw5z622G8oLG+omfsHBJf3CWQTlOcwOjvOG6wtiNfW6anKm/eA39LMwMtMez2TiQ=="],
+
+    "semver-compare": ["semver-compare@1.0.0", "", {}, "sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow=="],
+
+    "serialize-error": ["serialize-error@7.0.1", "", { "dependencies": { "type-fest": "^0.13.1" } }, "sha512-8I8TjW5KMOKsZQTvoxjuSIa7foAwPWGOts+6o7sgjz41/qMD9VQHEDxi6PBvK2l0MXUmqZyNpUK+T2tQaaElvw=="],
+
+    "sharp": ["sharp@0.34.5", "", { "dependencies": { "@img/colour": "^1.0.0", "detect-libc": "^2.1.2", "semver": "^7.7.3" }, "optionalDependencies": { "@img/sharp-darwin-arm64": "0.34.5", "@img/sharp-darwin-x64": "0.34.5", "@img/sharp-libvips-darwin-arm64": "1.2.4", "@img/sharp-libvips-darwin-x64": "1.2.4", "@img/sharp-libvips-linux-arm": "1.2.4", "@img/sharp-libvips-linux-arm64": "1.2.4", "@img/sharp-libvips-linux-ppc64": "1.2.4", "@img/sharp-libvips-linux-riscv64": "1.2.4", "@img/sharp-libvips-linux-s390x": "1.2.4", "@img/sharp-libvips-linux-x64": "1.2.4", "@img/sharp-libvips-linuxmusl-arm64": "1.2.4", "@img/sharp-libvips-linuxmusl-x64": "1.2.4", "@img/sharp-linux-arm": "0.34.5", "@img/sharp-linux-arm64": "0.34.5", "@img/sharp-linux-ppc64": "0.34.5", "@img/sharp-linux-riscv64": "0.34.5", "@img/sharp-linux-s390x": "0.34.5", "@img/sharp-linux-x64": "0.34.5", "@img/sharp-linuxmusl-arm64": "0.34.5", "@img/sharp-linuxmusl-x64": "0.34.5", "@img/sharp-wasm32": "0.34.5", "@img/sharp-win32-arm64": "0.34.5", "@img/sharp-win32-ia32": "0.34.5", "@img/sharp-win32-x64": "0.34.5" } }, "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg=="],
+
+    "siginfo": ["siginfo@2.0.0", "", {}, "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g=="],
+
+    "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
+
+    "sprintf-js": ["sprintf-js@1.1.3", "", {}, "sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA=="],
+
+    "stackback": ["stackback@0.0.2", "", {}, "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw=="],
+
+    "std-env": ["std-env@4.1.0", "", {}, "sha512-Rq7ybcX2RuC55r9oaPVEW7/xu3tj8u4GeBYHBWCychFtzMIr86A7e3PPEBPT37sHStKX3+TiX/Fr/ACmJLVlLQ=="],
+
+    "tar": ["tar@7.5.16", "", { "dependencies": { "@isaacs/fs-minipass": "^4.0.0", "chownr": "^3.0.0", "minipass": "^7.1.2", "minizlib": "^3.1.0", "yallist": "^5.0.0" } }, "sha512-56adEpPMouktRlBLXiaYFFzZ/3+JXa8P9n7WbR+ibIjtviN55mEaOkiysCnPnWm+7kkui1Dn8J9l+g6zV8731w=="],
+
+    "tinybench": ["tinybench@2.9.0", "", {}, "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg=="],
+
+    "tinyexec": ["tinyexec@1.2.4", "", {}, "sha512-SHf/r48b7vOrjve9PxJo3MN5v5yuyjHvdUcrQffT3WXMUfnGmHDVbC4k3sHJaJTgZCwpUplIaAo5ANtMyp3YHg=="],
+
+    "tinyglobby": ["tinyglobby@0.2.17", "", { "dependencies": { "fdir": "^6.5.0", "picomatch": "^4.0.4" } }, "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g=="],
+
+    "tinyrainbow": ["tinyrainbow@3.1.0", "", {}, "sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw=="],
+
+    "tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
+
+    "type-fest": ["type-fest@0.13.1", "", {}, "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg=="],
+
+    "typescript": ["typescript@6.0.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw=="],
+
+    "undici-types": ["undici-types@7.18.2", "", {}, "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w=="],
+
+    "vite": ["vite@8.0.16", "", { "dependencies": { "lightningcss": "^1.32.0", "picomatch": "^4.0.4", "postcss": "^8.5.15", "rolldown": "1.0.3", "tinyglobby": "^0.2.17" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "@vitejs/devtools": "^0.1.18", "esbuild": "^0.27.0 || ^0.28.0", "jiti": ">=1.21.0", "less": "^4.0.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "@vitejs/devtools", "esbuild", "jiti", "less", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-h9bXPmJichP5fLmVQo3PyaGSDE2n3aPuomeAlVRm0JLmt4rY6zmPKd59HYI4LNW8oTK7tlTsuC7l/m7awx9Jcw=="],
+
+    "vitest": ["vitest@4.1.8", "", { "dependencies": { "@vitest/expect": "4.1.8", "@vitest/mocker": "4.1.8", "@vitest/pretty-format": "4.1.8", "@vitest/runner": "4.1.8", "@vitest/snapshot": "4.1.8", "@vitest/spy": "4.1.8", "@vitest/utils": "4.1.8", "es-module-lexer": "^2.0.0", "expect-type": "^1.3.0", "magic-string": "^0.30.21", "obug": "^2.1.1", "pathe": "^2.0.3", "picomatch": "^4.0.3", "std-env": "^4.0.0-rc.1", "tinybench": "^2.9.0", "tinyexec": "^1.0.2", "tinyglobby": "^0.2.15", "tinyrainbow": "^3.1.0", "vite": "^6.0.0 || ^7.0.0 || ^8.0.0", "why-is-node-running": "^2.3.0" }, "peerDependencies": { "@edge-runtime/vm": "*", "@opentelemetry/api": "^1.9.0", "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0", "@vitest/browser-playwright": "4.1.8", "@vitest/browser-preview": "4.1.8", "@vitest/browser-webdriverio": "4.1.8", "@vitest/coverage-istanbul": "4.1.8", "@vitest/coverage-v8": "4.1.8", "@vitest/ui": "4.1.8", "happy-dom": "*", "jsdom": "*" }, "optionalPeers": ["@edge-runtime/vm", "@opentelemetry/api", "@types/node", "@vitest/browser-playwright", "@vitest/browser-preview", "@vitest/browser-webdriverio", "@vitest/coverage-istanbul", "@vitest/coverage-v8", "@vitest/ui", "happy-dom", "jsdom"], "bin": { "vitest": "vitest.mjs" } }, "sha512-flY6ScbCIt9HThs+C5HS7jvGOB560DJtk/Z15IQROTA6zEy49Nh8T/dofWTQL+n3vswqn87sbJNiuqw1SDp5Ig=="],
+
+    "why-is-node-running": ["why-is-node-running@2.3.0", "", { "dependencies": { "siginfo": "^2.0.0", "stackback": "0.0.2" }, "bin": { "why-is-node-running": "cli.js" } }, "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w=="],
+
+    "yallist": ["yallist@5.0.0", "", {}, "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw=="],
+
+    "onnxruntime-web/onnxruntime-common": ["onnxruntime-common@1.22.0-dev.20250409-89f8206ba4", "", {}, "sha512-vDJMkfCfb0b1A836rgHj+ORuZf4B4+cc2bASQtpeoJLueuFc5DuYwjIZUBrSvx/fO5IrLjLz+oTrB3pcGlhovQ=="],
+  }
+}

frontend/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en" data-theme="terrarium">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Puck — desktop familiar</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "puck-frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "biome check src",
+    "format": "biome format --write src",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "export:deck": "bun run scripts/export-deck.ts"
+  },
+  "dependencies": {
+    "@tauri-apps/api": "^2.11.0",
+    "html-to-image": "^1.11.13",
+    "kokoro-js": "^1.2.1",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.4.16",
+    "@types/node": "^24.12.3",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "typescript": "~6.0.2",
+    "vite": "^8.0.12",
+    "vitest": "^4.1.8"
+  }
+}

frontend/scripts/export-deck.ts

@@ -0,0 +1,13 @@
+// Export the engine's event deck to JSON for the Python-side molt tooling.
+// The deck's hand-written tier lines are the gold personality dataset —
+// this keeps molt/ reading the same source of truth the sim runs on.
+// Regenerate: bun run export:deck   (from frontend/)
+
+import { mkdirSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+import { EVENTS } from "../src/engine/events";
+
+const out = join(import.meta.dir, "../../molt/data/deck.json");
+mkdirSync(join(import.meta.dir, "../../molt/data"), { recursive: true });
+writeFileSync(out, `${JSON.stringify(EVENTS, null, 2)}\n`);
+console.log(`wrote ${EVENTS.length} events → ${out}`);

frontend/src/engine/chat.ts

@@ -0,0 +1,38 @@
+import type { FairyState, Rng } from "./types";
+import { pick } from "./util";
+
+// Keyword-routed scripted replies — the seam where a real model slots in later.
+export function reply(text: string, fs: FairyState, rng: Rng = Math.random): string {
+  const q = text.toLowerCase();
+  const dramatic = fs.mischief > 60;
+  const pools: Record<string, string[]> = {
+    sleep: dramatic
+      ? ["Tired already? Fine. Tuck me in and I'll dream us both smarter."]
+      : ["Say the word and I'll start Night Bloom. I sleep, I sort, I wake up a little different."],
+    memory: [
+      "Everything I keep lives in the garden — water it, prune it, pin it. I only plant what's durable.",
+    ],
+    mischief: ["Crank the Goblin Weather and I get theatrical. Lower it and I behave. Mostly."],
+    claude: dramatic
+      ? ["The code goblin on Desktop 2? I keep one eye on its scratching at all times."]
+      : ["I watch Claude closely. The moment it finishes, you'll hear from me."],
+    who: [
+      "I'm Puck. I'm not your assistant — I'm the thing that lives in the corners and patrols what you abandon.",
+    ],
+    help: ["I help in the margins. Unfinished tasks, loud inboxes, builds that finish while you look away."],
+    discord: ["The social bog? I filter it hard. Mentions reach you. Swamp noise does not."],
+    thanks: ["Mm. I'll remember you said that.", "Plant it in the garden, then. A kindness."],
+  };
+  for (const k of Object.keys(pools)) if (q.includes(k)) return pick(pools[k], rng);
+  return pick(
+    [
+      "I heard you. I'm mostly watching the desktops you left behind, though.",
+      "Noted. I'll fold it into tonight's Night Bloom.",
+      dramatic
+        ? "A fair point, for a human. I'll consider it while I patrol."
+        : "Got it. I'll keep that in mind on the next patrol.",
+      "I'm half-listening and fully loyal. Both at once.",
+    ],
+    rng,
+  );
+}

frontend/src/engine/engine.test.ts

@@ -0,0 +1,338 @@
+// Behavior pins: these values are computed from the prototype's formulas.
+// If a test fails on a contract change, that's a deliberate engine change — not a test to "fix".
+import { describe, expect, it } from "vitest";
+import { EVENTS } from "./events";
+import {
+  acceptAutomation,
+  applyBias,
+  automationOffer,
+  confidence,
+  declineAutomation,
+  defaultProfile,
+  dispositionLabel,
+  ensureSources,
+  handlesEvent,
+  hasAutomation,
+  irks,
+  rateSource,
+  statsFor,
+  voiceTags,
+} from "./learning";
+import { nightBloom } from "./nightBloom";
+import { applyMode, decide, score } from "./scoring";
+import { learn, speak } from "./speech";
+import { defaultState, defaultTaste, moodFor, rateFairy } from "./state";
+import type { FairyState, FeedItem, Rating } from "./types";
+
+const ev = (id: string) => {
+  const e = EVENTS.find((x) => x.id === id);
+  if (!e) throw new Error(`no event ${id}`);
+  return e;
+};
+
+const neutral: FairyState = { ...defaultState(), mischief: 50, protectiveness: 50, curiosity: 50 };
+
+describe("score", () => {
+  it("passes base scores through at neutral personality", () => {
+    expect(score(ev("claude_done"), neutral)).toEqual(ev("claude_done").base);
+  });
+
+  it("protectiveness raises annoyance and relevance; mischief lowers annoyance", () => {
+    const s = score(ev("discord_noise"), {
+      ...neutral,
+      protectiveness: 70,
+      mischief: 30,
+      curiosity: 50,
+    });
+    // annoyance: 86 + 20*0.25 - (-20)*0.15 = 94
+    expect(s.annoyance).toBe(94);
+    // relevance: 18 + 20*0.1 = 20
+    expect(s.relevance).toBe(20);
+    // interest: 14 + 0 + (-20)*0.15 = 11
+    expect(s.interest).toBe(11);
+  });
+
+  it("clamps to 0..100", () => {
+    const s = score(ev("discord_noise"), { ...neutral, protectiveness: 100, mischief: 0 });
+    expect(s.annoyance).toBe(100);
+  });
+});
+
+describe("decide", () => {
+  it("interrupts when urgency and relevance are both >= 80", () => {
+    expect(decide({ urgency: 84, relevance: 86, novelty: 55, annoyance: 30, interest: 70 })).toBe(
+      "interrupt",
+    );
+  });
+
+  it("ignores low-relevance high-annoyance noise", () => {
+    expect(decide(score(ev("discord_noise"), neutral))).toBe("ignore");
+  });
+
+  it("notifies on high-worth events (claude_done at neutral: worth 239)", () => {
+    expect(decide(score(ev("claude_done"), neutral))).toBe("notify");
+  });
+
+  it("walks the bands: glow > 120, scroll > 70, else ignore", () => {
+    const base = { novelty: 0, annoyance: 0 };
+    expect(decide({ ...base, urgency: 50, relevance: 50, interest: 50, annoyance: 0 })).toBe("glow"); // worth 150
+    expect(decide({ ...base, urgency: 30, relevance: 30, interest: 30, annoyance: 0 })).toBe("scroll"); // worth 90
+    expect(decide({ ...base, urgency: 20, relevance: 20, interest: 20, annoyance: 0 })).toBe("ignore"); // worth 60
+  });
+});
+
+describe("speak", () => {
+  it("picks mythic when taste favors theatre and mischief is high (rng pinned)", () => {
+    const u = speak(
+      ev("claude_done"),
+      { ...neutral, mischief: 80 },
+      { theatrical: 1, terse: 0, useful: 0, warm: 1 },
+      () => 0.99, // caprice equal across tiers; side-quest roll 0.99 > 0.4 → no side quest
+    );
+    expect(u.tier).toBe("mythic");
+    expect(u.text).toBe(ev("claude_done").lines.mythic);
+  });
+
+  it("picks plain when taste favors terse-useful (rng pinned)", () => {
+    const u = speak(ev("claude_done"), neutral, { theatrical: 0, terse: 1, useful: 1, warm: 0 }, () => 0);
+    expect(u.tier).toBe("plain");
+    expect(u.tags).toEqual(["useful", "terse"]);
+  });
+
+  it("appends a side quest at high mischief when the roll hits", () => {
+    const u = speak(ev("claude_done"), { ...neutral, mischief: 80 }, defaultTaste(), () => 0.1);
+    expect(u.text.length).toBeGreaterThan(ev("claude_done").lines[u.tier].length);
+  });
+});
+
+describe("learn (taste)", () => {
+  it("helpful reinforces used tags and usefulness", () => {
+    const t = learn(defaultTaste(), ["theatrical", "warm"], "helpful");
+    expect(t.theatrical).toBeCloseTo(0.58);
+    expect(t.warm).toBeCloseTo(0.63);
+    expect(t.useful).toBeCloseTo(0.58);
+  });
+
+  it("annoying suppresses used tags, extra penalty on theatrical", () => {
+    const t = learn(defaultTaste(), ["theatrical", "warm"], "annoying");
+    expect(t.theatrical).toBeCloseTo(0.38); // -0.08 then -0.04
+    expect(t.warm).toBeCloseTo(0.47);
+  });
+
+  it("cute trades usefulness for theatre", () => {
+    const t = learn(defaultTaste(), ["useful", "terse"], "cute");
+    expect(t.theatrical).toBeCloseTo(0.58);
+    expect(t.useful).toBeCloseTo(0.46);
+  });
+
+  it("clamps to 0..1", () => {
+    let t = defaultTaste();
+    for (let i = 0; i < 20; i++) t = learn(t, ["theatrical"], "annoying");
+    expect(t.theatrical).toBe(0);
+  });
+});
+
+describe("learning profile", () => {
+  it("ratings push per-source bias with the prototype's step sizes", () => {
+    let p = defaultProfile();
+    p = rateSource(p, "Mail", "helpful");
+    expect(p.sources.Mail).toMatchObject({ bias: 9, helpful: 1, samples: 1 });
+    p = rateSource(p, "Mail", "annoying");
+    expect(p.sources.Mail.bias).toBe(-3);
+    p = rateSource(p, "Mail", "cute");
+    expect(p.sources.Mail.bias).toBe(-6);
+    expect(p.sources.Mail.samples).toBe(3);
+  });
+
+  it("bias clamps at ±50", () => {
+    let p = defaultProfile();
+    for (let i = 0; i < 10; i++) p = rateSource(p, "Discord", "annoying");
+    expect(p.sources.Discord.bias).toBe(-50);
+  });
+
+  it("survives a profile persisted before a source existed (Learning-tab crash regression)", () => {
+    // simulate old localStorage: a profile whose sources map predates "Git"
+    const old = defaultProfile();
+    delete (old.sources as Record<string, unknown>).Git;
+    // the unguarded paths that crashed the overlay must now be safe
+    expect(statsFor(old, "Git")).toMatchObject({ bias: 0, samples: 0 });
+    expect(() => irks(old)).not.toThrow();
+    expect(ensureSources(old).sources.Git).toBeDefined();
+    // a profile that already has every source is returned unchanged (no needless writes)
+    const full = defaultProfile();
+    expect(ensureSources(full)).toBe(full);
+  });
+
+  it("applyBias shifts along the ladder, one rung per 18 bias", () => {
+    expect(applyBias("glow", 18)).toBe("notify");
+    expect(applyBias("glow", -18)).toBe("scroll");
+    expect(applyBias("glow", 9)).toBe("notify"); // Math.round(0.5) = 1
+    expect(applyBias("ignore", -50)).toBe("ignore");
+  });
+
+  it("applyBias never manufactures an interrupt", () => {
+    expect(applyBias("notify", 50)).toBe("notify");
+    expect(applyBias("interrupt", 50)).toBe("interrupt");
+  });
+
+  it("offers Discord automation after 2 annoying ratings, once only", () => {
+    let p = defaultProfile(); // seeded with Discord.annoying = 1
+    expect(automationOffer(p, "Discord")).toBeNull();
+    p = rateSource(p, "Discord", "annoying");
+    const offer = automationOffer(p, "Discord");
+    expect(offer?.id).toBe("mute_channels");
+    p = declineAutomation(p, "Discord");
+    expect(automationOffer(p, "Discord")).toBeNull(); // declined = don't re-offer
+  });
+
+  it("Build earns automation through helpful ratings instead", () => {
+    let p = defaultProfile();
+    p = rateSource(p, "Build", "helpful");
+    expect(automationOffer(p, "Build")).toBeNull();
+    p = rateSource(p, "Build", "helpful");
+    expect(automationOffer(p, "Build")?.id).toBe("watch_builds");
+    p = acceptAutomation(p, "Build");
+    expect(hasAutomation(p, "Build")).toBe(true);
+    expect(automationOffer(p, "Build")).toBeNull();
+  });
+
+  it("automations handle only their scoped events — a mention escapes the muted bog", () => {
+    let p = defaultProfile();
+    p = acceptAutomation(p, "Discord");
+    expect(handlesEvent(p, "Discord", "discord_noise")?.id).toBe("mute_channels");
+    expect(handlesEvent(p, "Discord", "discord_mention")).toBeNull();
+  });
+
+  it("watching builds silently never eats a failure", () => {
+    let p = defaultProfile();
+    p = acceptAutomation(p, "Build");
+    expect(handlesEvent(p, "Build", "build_done")?.id).toBe("watch_builds");
+    expect(handlesEvent(p, "Build", "build_fail")).toBeNull();
+  });
+
+  it("handlesEvent is null before the automation is accepted", () => {
+    expect(handlesEvent(defaultProfile(), "Discord", "discord_noise")).toBeNull();
+  });
+
+  it("confidence caps at 1 after 5 samples", () => {
+    expect(confidence(0)).toBe(0);
+    expect(confidence(3)).toBeCloseTo(0.6);
+    expect(confidence(9)).toBe(1);
+  });
+
+  it("dispositionLabel bands", () => {
+    expect(dispositionLabel(30).t).toBe("interrupt freely");
+    expect(dispositionLabel(10).t).toBe("speak up");
+    expect(dispositionLabel(0).t).toBe("log quietly");
+    expect(dispositionLabel(-20).t).toBe("rarely surface");
+    expect(dispositionLabel(-40).t).toBe("stay silent");
+  });
+
+  it("irks lists annoying sources, most-flagged first", () => {
+    let p = defaultProfile();
+    p = rateSource(p, "Mail", "annoying");
+    p = rateSource(p, "Mail", "annoying");
+    const list = irks(p);
+    expect(list.map((s) => s.id)).toEqual(["Mail", "Discord"]);
+  });
+
+  it("voiceTags falls back when taste is undecided", () => {
+    expect(voiceTags({ theatrical: 0.5, terse: 0.5, useful: 0.5, warm: 0.5 })).toEqual([
+      "still figuring you out",
+    ]);
+    expect(voiceTags({ theatrical: 0.3, terse: 0.7, useful: 0.7, warm: 0.7 })).toEqual([
+      "to the point",
+      "brief",
+      "warm",
+      "low drama",
+    ]);
+  });
+});
+
+describe("nightBloom", () => {
+  const item = (id: string, rating: Rating | null): FeedItem => ({
+    uid: id + rating,
+    id,
+    source: ev(id).source,
+    say: "",
+    tier: "plain",
+    tags: [],
+    decision: "notify",
+    time: "12:00",
+    rating,
+  });
+
+  it("converts ratings into personality deltas", () => {
+    const r = nightBloom(
+      [item("claude_done", "helpful"), item("discord_noise", "annoying"), item("build_done", "cute")],
+      () => 0,
+    );
+    expect(r.deltas).toEqual({
+      protectiveness: 2 + 1,
+      attachment: 1,
+      chattiness: -3 - 1,
+      mischief: -2 + 2,
+      age: 1,
+    });
+    expect(r.counts).toEqual({ helpful: 1, annoying: 1, cute: 1 });
+    expect(r.rules).toHaveLength(3);
+  });
+
+  it("promotes memories from helpful/annoying ratings, deduped by event", () => {
+    const r = nightBloom(
+      [item("claude_done", "helpful"), item("claude_done", "helpful"), item("build_done", "cute")],
+      () => 0,
+    );
+    expect(r.memories).toEqual([ev("claude_done").memory]);
+  });
+
+  it("a quiet day still drifts: curiosity +2, one tone memory", () => {
+    const r = nightBloom([item("claude_done", null)], () => 0);
+    expect(r.deltas).toEqual({ curiosity: 2, age: 1 });
+    expect(r.memories[0].type).toBe("tone");
+  });
+
+  it("an empty day yields no memories", () => {
+    expect(nightBloom([], () => 0).memories).toEqual([]);
+  });
+});
+
+describe("applyMode", () => {
+  it("silent demotes notify/interrupt to scroll, leaves quiet rungs alone", () => {
+    expect(applyMode("notify", "silent")).toBe("scroll");
+    expect(applyMode("interrupt", "silent")).toBe("scroll");
+    expect(applyMode("glow", "silent")).toBe("glow");
+  });
+
+  it("goblin promotes glow to notify; patrol/polite change nothing", () => {
+    expect(applyMode("glow", "goblin")).toBe("notify");
+    expect(applyMode("notify", "goblin")).toBe("notify");
+    expect(applyMode("notify", "patrol")).toBe("notify");
+    expect(applyMode("glow", "polite")).toBe("glow");
+  });
+});
+
+describe("rateFairy", () => {
+  it("nudges personality per rating (prototype steps)", () => {
+    expect(rateFairy(neutral, "helpful")).toMatchObject({
+      protectiveness: neutral.protectiveness + 2,
+      attachment: neutral.attachment + 1,
+    });
+    expect(rateFairy(neutral, "annoying").chattiness).toBe(neutral.chattiness - 3);
+    expect(rateFairy(neutral, "cute").attachment).toBe(neutral.attachment + 1);
+  });
+
+  it("clamps at the 0..100 bounds", () => {
+    expect(rateFairy({ ...neutral, protectiveness: 99 }, "helpful").protectiveness).toBe(100);
+    expect(rateFairy({ ...neutral, chattiness: 1 }, "annoying").chattiness).toBe(0);
+  });
+});
+
+describe("moodFor", () => {
+  it("maps fairy state to mood with prototype thresholds", () => {
+    expect(moodFor({ ...neutral, energy: 20 })).toBe("sleepy");
+    expect(moodFor({ ...neutral, mischief: 70 })).toBe("mischief");
+    expect(moodFor({ ...neutral, protectiveness: 80 })).toBe("proud");
+    expect(moodFor(neutral)).toBe("curious");
+  });
+});

frontend/src/engine/events.ts

@@ -0,0 +1,260 @@
+import type { EventDef } from "./types";
+
+// The event deck Puck patrols. Lines come in three voice tiers;
+// taste + fairy state pick which one he actually says.
+export const EVENTS: readonly EventDef[] = [
+  {
+    id: "claude_done",
+    source: "Claude",
+    target: "claude",
+    glyph: "✦",
+    title: "Task finished — Implement Memory Garden",
+    base: { urgency: 76, relevance: 91, novelty: 48, annoyance: 16, interest: 88 },
+    effect: "claude_done",
+    lines: {
+      plain: "Claude finished the Memory Garden task. 7 files changed — worth a review.",
+      playful: "The thing on Desktop 2 says it's done. Seven files different. Go look before it gets cocky.",
+      mythic:
+        "The code goblin has stopped scratching. It claims the garden blooms — I am suspicious but pleased.",
+    },
+    memory: {
+      text: "Vu wants to know the moment Claude finishes a task.",
+      type: "preference",
+      icon: "🪶",
+    },
+  },
+  {
+    id: "claude_permission",
+    source: "Claude",
+    target: "claude",
+    glyph: "✋",
+    title: "Permission needed — run database migration",
+    // blocked-waiting-on-you is the design doc's killer case: urgent AND relevant → interrupt band
+    base: { urgency: 82, relevance: 88, novelty: 45, annoyance: 20, interest: 70 },
+    effect: "none",
+    lines: {
+      plain: "Claude needs a yes or no before it can continue. It's blocked until you answer.",
+      playful: "The code goblin is pawing at a locked door. It needs your yes to keep going.",
+      mythic: "The goblin halts mid-ritual, hand raised — it awaits your blessing to proceed.",
+    },
+    memory: {
+      text: "A blocked Claude is wasted time — permission requests are interrupt-worthy.",
+      type: "boundary",
+      icon: "🗝️",
+    },
+  },
+  {
+    id: "build_done",
+    source: "Build",
+    target: "terminal",
+    glyph: "▸",
+    title: "Build succeeded in 2m 14s",
+    base: { urgency: 58, relevance: 72, novelty: 30, annoyance: 22, interest: 60 },
+    effect: "build_done",
+    lines: {
+      plain: "Build passed. 2m 14s, no errors.",
+      playful: "The long-running spell finished and didn't explode. Green across the board.",
+      mythic: "The forge cooled. Two minutes of smoke, zero curses. The artifact is whole.",
+    },
+    memory: {
+      text: "Builds on Desktop 2 are worth a quiet nod, not a shout.",
+      type: "pattern",
+      icon: "🌿",
+    },
+  },
+  {
+    id: "build_fail",
+    source: "Build",
+    target: "terminal",
+    glyph: "✕",
+    title: "Tests failed — 3 failing in auth.test.ts",
+    base: { urgency: 84, relevance: 86, novelty: 55, annoyance: 30, interest: 70 },
+    effect: "build_fail",
+    lines: {
+      plain: "Tests failed: 3 failing in auth.test.ts. You'll want this now.",
+      playful: "The forge spat sparks — three tests went red in auth. I'd peek before it spreads.",
+      mythic: "Something in the auth thicket bit back. Three little failures, fangs out. I bring word early.",
+    },
+    memory: {
+      text: "Vu wants failing tests surfaced fast, even mid-focus.",
+      type: "boundary",
+      icon: "🍄",
+    },
+  },
+  {
+    id: "mail_important",
+    source: "Mail",
+    target: "mail",
+    glyph: "✉",
+    title: "New mail — Hugging Face (hackathon)",
+    base: { urgency: 64, relevance: 80, novelty: 60, annoyance: 28, interest: 72 },
+    effect: "mail_unread",
+    lines: {
+      plain: "Email from Hugging Face about the hackathon. Looks like it matters.",
+      playful: "A letter came from the hackathon people. It smells official, not spammy.",
+      mythic: "A rectangle from Hugging Face arrived. It hums with deadline. Worth opening, I think.",
+    },
+    memory: {
+      text: "Mail from the hackathon org is always worth a flag.",
+      type: "preference",
+      icon: "🗝️",
+    },
+  },
+  {
+    id: "mail_finance",
+    source: "Mail",
+    target: "mail",
+    glyph: "✉",
+    title: "New mail — Fidelity statement",
+    base: { urgency: 30, relevance: 44, novelty: 25, annoyance: 46, interest: 30 },
+    effect: "mail_unread",
+    lines: {
+      plain: "A statement from Fidelity landed. Not urgent — filed it for later.",
+      playful: "A rectangle from Fidelity arrived. It smells like finance. No fire, just numbers.",
+      mythic: "A grey envelope from the money-keepers. It can wait in the reeds until you're ready.",
+    },
+    memory: {
+      text: "Finance mail is low-urgency unless Vu says otherwise.",
+      type: "aversion",
+      icon: "🍄",
+    },
+  },
+  {
+    id: "discord_noise",
+    source: "Discord",
+    target: "discord",
+    glyph: "◍",
+    title: "12 messages in #general",
+    base: { urgency: 12, relevance: 18, novelty: 10, annoyance: 86, interest: 14 },
+    effect: "discord_noise",
+    lines: {
+      plain: "Discord #general got noisy. Nothing aimed at you — leaving it.",
+      playful: "Discord made swamp noises again. Twelve of them. No emergency in the muck.",
+      mythic: "The social bog gurgled twelve times. I waded in, found no treasure, waded out.",
+    },
+    memory: {
+      text: "Vu does not want general Discord chatter surfaced.",
+      type: "aversion",
+      icon: "🍄",
+    },
+  },
+  {
+    id: "discord_mention",
+    source: "Discord",
+    target: "discord",
+    glyph: "◍",
+    title: "@mention from Mira in #puck-build",
+    base: { urgency: 70, relevance: 78, novelty: 65, annoyance: 32, interest: 66 },
+    effect: "discord_mention",
+    lines: {
+      plain: "Mira mentioned you in #puck-build. That one's actually for you.",
+      playful: "Someone named Mira poked you directly in #puck-build. The rest is bog noise, but this isn't.",
+      mythic: "A voice in the bog called your true name — Mira, in the build-channel. That, I carry to you.",
+    },
+    memory: {
+      text: "Direct @mentions are worth surfacing; channel noise is not.",
+      type: "boundary",
+      icon: "🗝️",
+    },
+  },
+  {
+    id: "calendar_soon",
+    source: "Calendar",
+    target: "calendar",
+    glyph: "◷",
+    title: "Demo sync in 10 minutes",
+    base: { urgency: 80, relevance: 82, novelty: 40, annoyance: 24, interest: 58 },
+    effect: "calendar_soon",
+    lines: {
+      plain: "Heads up — demo sync in 10 minutes.",
+      playful: "A meeting is creeping up — the demo sync, ten minutes out. Just so you're not ambushed.",
+      mythic: "The clock-spirits whisper: a gathering approaches in ten minutes. Ready your face.",
+    },
+    memory: {
+      text: "Vu likes a 10-minute warning before meetings.",
+      type: "preference",
+      icon: "🌿",
+    },
+  },
+  {
+    id: "stale_tab",
+    source: "Browser",
+    target: null,
+    glyph: "❍",
+    title: "Tab open 3 days — 'sqlite-vec docs'",
+    base: { urgency: 8, relevance: 34, novelty: 20, annoyance: 40, interest: 52 },
+    effect: "none",
+    lines: {
+      plain: "That sqlite-vec docs tab has been open 3 days. Read it or close it?",
+      playful: "A tab has been loitering for three days — sqlite-vec docs. It deserves judgment.",
+      mythic: "A tab has gone feral after three days in the open. The sqlite-vec scroll. Tame it or free it.",
+    },
+    memory: {
+      text: "Vu collects docs tabs and rarely returns to them.",
+      type: "pattern",
+      icon: "❍",
+    },
+  },
+  {
+    id: "browser_newpage",
+    source: "Browser",
+    target: null,
+    glyph: "❍",
+    // childlike-wonder dimension: a fresh page is a doorway, and Puck wants to peek
+    title: "New page opened — a long-read about deep-sea creatures",
+    base: { urgency: 10, relevance: 38, novelty: 80, annoyance: 18, interest: 82 },
+    effect: "none",
+    lines: {
+      plain: "You opened something about deep-sea creatures. Looks interesting.",
+      playful: "Ooh — a new portal just opened, all about deep-sea creatures. Can I look? I want to look.",
+      mythic:
+        "A doorway bloomed in the glass! Beyond it, glowing things from the deep. I pressed my face to it.",
+    },
+    memory: {
+      text: "Vu opens long-reads; Puck is endlessly curious about them.",
+      type: "preference",
+      icon: "🫧",
+    },
+  },
+  {
+    id: "browser_rabbithole",
+    source: "Browser",
+    target: null,
+    glyph: "❍",
+    title: "Eleven tabs deep on one topic",
+    base: { urgency: 14, relevance: 42, novelty: 55, annoyance: 30, interest: 74 },
+    effect: "none",
+    lines: {
+      plain: "Eleven tabs on the same thing now. You're down a rabbit hole.",
+      playful:
+        "Eleven little doorways, all the same shape — you've tumbled down a rabbit hole and I tumbled after you.",
+      mythic:
+        "Eleven portals, one obsession. We are both lost in the warren now, and I do not wish to be found.",
+    },
+    memory: {
+      text: "Vu rabbit-holes; Puck happily follows the curiosity rather than scolding it.",
+      type: "pattern",
+      icon: "🫧",
+    },
+  },
+  {
+    id: "git_push",
+    source: "Git",
+    target: "terminal",
+    glyph: "⎇",
+    // the showcase for repetition-as-personality: celebrated once, shrugged-at on a streak
+    title: "Pushed 3 commits to origin/main",
+    base: { urgency: 28, relevance: 56, novelty: 34, annoyance: 16, interest: 52 },
+    effect: "none",
+    lines: {
+      plain: "Pushed to origin/main — 3 commits up.",
+      playful: "Whoosh — three commits flung at origin. They stuck the landing.",
+      mythic: "Three parcels hurled into the great remote void. They arrived. Probably.",
+    },
+    memory: {
+      text: "Vu ships in small frequent pushes — celebrate the first, shrug at the streak.",
+      type: "pattern",
+      icon: "⎇",
+    },
+  },
+];

frontend/src/engine/index.ts

@@ -0,0 +1,22 @@
+export { reply } from "./chat";
+export { EVENTS } from "./events";
+export * as Learn from "./learning";
+export { nightBloom, outcomeRating } from "./nightBloom";
+export {
+  asPeekEmotion,
+  PEEK_EMOTIONS,
+  type PeekEmotion,
+  type Reaction,
+  type ReactionKind,
+  reactionForEmotion,
+  reactionForEvent,
+  reactionForRating,
+  summonReaction,
+} from "./reactions";
+export { applyMode, decide, score } from "./scoring";
+export { learn, STYLE_TAGS, speak } from "./speech";
+export { defaultState, defaultTaste, moodFor, rateFairy, seedMemories } from "./state";
+export { buildTraces, type TraceRecord } from "./traces";
+export * from "./types";
+export * from "./util";
+export { isWireEvent, toEventDef, type WireEvent } from "./wire";

frontend/src/engine/learning.ts

@@ -0,0 +1,213 @@
+// The visible learning profile: per-source interruption bias that ratings
+// push around, learned tone tags, and the automation offers that bridge
+// toward acting on the user's behalf.
+
+import type {
+  AutomationDef,
+  Decision,
+  LearnedAutomation,
+  Profile,
+  Rating,
+  SourceId,
+  SourceStats,
+  Taste,
+} from "./types";
+import { clamp } from "./util";
+
+export interface SourceInfo {
+  id: SourceId;
+  glyph: string;
+  label: string;
+}
+
+export const SOURCES: readonly SourceInfo[] = [
+  { id: "Claude", glyph: "✳", label: "Claude Code" },
+  { id: "Build", glyph: "▦", label: "Builds & tests" },
+  { id: "Mail", glyph: "✉", label: "Mail" },
+  { id: "Discord", glyph: "◍", label: "Discord" },
+  { id: "Calendar", glyph: "◷", label: "Calendar" },
+  { id: "Browser", glyph: "❍", label: "Stray tabs" },
+  { id: "Git", glyph: "⎇", label: "Git" },
+];
+
+// automations Puck can offer once he's confident a source annoys you
+export const AUTOMATIONS: Partial<Record<SourceId, AutomationDef>> = {
+  Discord: {
+    id: "mute_channels",
+    verb: "auto-mute noisy channels",
+    offer:
+      "You've waved off the social bog a few times now. Want me to mute the loud channels and only ping you on direct @mentions?",
+    done: "muted #general · only @mentions reach you",
+    handles: ["discord_noise"],
+  },
+  Mail: {
+    id: "file_finance",
+    verb: "auto-file finance mail",
+    offer:
+      "Three statements, three shrugs. Shall I quietly file finance & statement mail from now on, and only flag the ones that look urgent?",
+    done: "filed Fidelity statement · finance mail handled",
+    handles: ["mail_finance"],
+  },
+  Browser: {
+    id: "close_stale",
+    verb: "close stale tabs",
+    offer: "These docs tabs go feral and you never return. Want me to close anything untouched for 3+ days?",
+    done: "closed 'sqlite-vec docs' · 3 days untouched",
+    handles: ["stale_tab"],
+  },
+  Build: {
+    id: "watch_builds",
+    verb: "watch builds silently",
+    offer:
+      "You always glance at builds yourself. Want me to stop announcing the passing ones and only speak up when something breaks?",
+    done: "passing builds logged silently · failures still surface",
+    handles: ["build_done"],
+  },
+};
+
+const EMPTY_STATS: SourceStats = { bias: 0, helpful: 0, annoying: 0, cute: 0, samples: 0 };
+
+/** A source's stats, or empty defaults if this (possibly older) profile predates
+ *  the source. Indexing profile.sources directly is unsafe — use this. */
+export function statsFor(profile: Profile, id: SourceId): SourceStats {
+  return profile.sources[id] ?? EMPTY_STATS;
+}
+
+/** Backfill any SOURCES added after this profile was persisted. Adding a source
+ *  must never leave old profiles with a missing entry (that crashed the Learning
+ *  tab render). Returns the same object when nothing's missing. */
+export function ensureSources(profile: Profile): Profile {
+  const missing = SOURCES.filter((s) => !profile.sources[s.id]);
+  if (!missing.length) return profile;
+  const sources = { ...profile.sources };
+  for (const s of missing) sources[s.id] = { ...EMPTY_STATS };
+  return { ...profile, sources };
+}
+
+export function defaultProfile(): Profile {
+  const sources = {} as Record<SourceId, SourceStats>;
+  for (const s of SOURCES) sources[s.id] = { ...EMPTY_STATS };
+  // seed a couple so a fresh profile isn't blank
+  sources.Claude.bias = 10;
+  sources.Claude.helpful = 1;
+  sources.Claude.samples = 1;
+  sources.Discord.bias = -8;
+  sources.Discord.annoying = 1;
+  sources.Discord.samples = 1;
+  return { sources, automations: [], offered: {} };
+}
+
+export function sourceBias(profile: Profile, source: SourceId): number {
+  return profile.sources[source]?.bias ?? 0;
+}
+
+/** A rating pushes that source's bias (helpful↑ surface more, annoying↓ back off). */
+export function rateSource(profile: Profile, source: SourceId, rating: Rating): Profile {
+  if (!profile.sources[source]) return profile;
+  const s = { ...profile.sources[source] };
+  s.samples += 1;
+  if (rating === "helpful") {
+    s.bias = clamp(s.bias + 9, -50, 50);
+    s.helpful++;
+  }
+  if (rating === "annoying") {
+    s.bias = clamp(s.bias - 12, -50, 50);
+    s.annoying++;
+  }
+  if (rating === "cute") {
+    s.bias = clamp(s.bias - 3, -50, 50);
+    s.cute++;
+  }
+  return { ...profile, sources: { ...profile.sources, [source]: s } };
+}
+
+// Learned bias shifts a decision up/down the ladder (never manufactures
+// a full interrupt — those stay reserved for genuine urgency).
+const LADDER: Decision[] = ["ignore", "scroll", "glow", "notify", "interrupt"];
+
+export function applyBias(decision: Decision, bias: number): Decision {
+  let idx = LADDER.indexOf(decision);
+  if (idx < 0) return decision;
+  idx = clamp(idx + Math.round(bias / 18), 0, 4);
+  if (decision !== "interrupt" && idx === 4) idx = 3;
+  return LADDER[idx];
+}
+
+export interface Disposition {
+  t: string;
+  k: "hi" | "mid" | "lo" | "off";
+}
+
+export function dispositionLabel(bias: number): Disposition {
+  if (bias >= 28) return { t: "interrupt freely", k: "hi" };
+  if (bias >= 8) return { t: "speak up", k: "mid" };
+  if (bias > -8) return { t: "log quietly", k: "lo" };
+  if (bias > -28) return { t: "rarely surface", k: "lo" };
+  return { t: "stay silent", k: "off" };
+}
+
+/** Confidence grows with samples, caps at 1. */
+export function confidence(samples: number): number {
+  return Math.min(1, samples / 5);
+}
+
+/** Readable tone tags from the taste vector. */
+export function voiceTags(taste: Taste): string[] {
+  const tags: string[] = [];
+  if (taste.useful > 0.6) tags.push("to the point");
+  if (taste.terse > 0.6) tags.push("brief");
+  if (taste.warm > 0.6) tags.push("warm");
+  if (taste.theatrical > 0.62) tags.push("theatrical");
+  else if (taste.theatrical < 0.4) tags.push("low drama");
+  if (!tags.length) tags.push("still figuring you out");
+  return tags;
+}
+
+/** What irks you — distinct annoying sources, most-flagged first. */
+export function irks(profile: Profile): (SourceInfo & { n: number })[] {
+  return SOURCES.map((s) => ({ ...s, n: statsFor(profile, s.id).annoying }))
+    .filter((s) => s.n > 0)
+    .sort((a, b) => b.n - a.n);
+}
+
+/** Should Puck offer an automation for this source right now? */
+export function automationOffer(
+  profile: Profile,
+  source: SourceId,
+): (AutomationDef & { source: SourceId }) | null {
+  const auto = AUTOMATIONS[source];
+  if (!auto) return null;
+  if (profile.offered[source]) return null;
+  if (profile.automations.find((a) => a.id === auto.id)) return null;
+  const s = profile.sources[source];
+  // Build earns its automation by being consistently *helpful*; the rest by annoying you
+  const ready = source === "Build" ? s.helpful >= 2 : s.annoying >= 2;
+  return ready ? { source, ...auto } : null;
+}
+
+export function acceptAutomation(profile: Profile, source: SourceId): Profile {
+  const auto = AUTOMATIONS[source];
+  if (!auto) return profile;
+  return {
+    ...profile,
+    offered: { ...profile.offered, [source]: true },
+    automations: [...profile.automations, { id: auto.id, source, verb: auto.verb, done: auto.done }],
+  };
+}
+
+export function declineAutomation(profile: Profile, source: SourceId): Profile {
+  return { ...profile, offered: { ...profile.offered, [source]: true } };
+}
+
+export function hasAutomation(profile: Profile, source: SourceId): boolean {
+  const auto = AUTOMATIONS[source];
+  return !!auto && profile.automations.some((a) => a.id === auto.id);
+}
+
+/** The accepted automation that silently handles this event, if any.
+ *  Scoped per-event, not per-source: muting the bog must not eat a @mention. */
+export function handlesEvent(profile: Profile, source: SourceId, eventId: string): LearnedAutomation | null {
+  const auto = AUTOMATIONS[source];
+  if (!auto?.handles.includes(eventId)) return null;
+  return profile.automations.find((a) => a.id === auto.id) ?? null;
+}

frontend/src/engine/nightBloom.ts

@@ -0,0 +1,93 @@
+import { EVENTS } from "./events";
+import type { FairyStat, FeedItem, MemorySeed, NightBloomResult, Rating, Rng } from "./types";
+import { pick } from "./util";
+
+const DREAMS = [
+  "I walked across three desktops. One smelled of code smoke, one of unopened letters, one of abandoned tabs.",
+  "I dreamed Desktop 2 was a forest of half-built things, all of them humming to be finished.",
+  "In the dream the inbox was a swamp and I was a small loyal frog, choosing which croaks to carry to you.",
+  "I dreamed I grew a second pair of wings, just for patrolling the corners you forget.",
+] as const;
+
+const MORNINGS = [
+  "I dreamed of Desktop 2. It is where unfinished things go to molt.",
+  "Morning. I sorted the moss from the noise. I am a slightly better familiar than yesterday.",
+  "I woke a little less chatty and a little more loyal to the things you leave running.",
+  "The bog is quieter in my head now. I kept what mattered, composted the rest.",
+] as const;
+
+/** A surfaced comment's learning signal, derived from BEHAVIOR (not buttons):
+ *  tapping through = wanted it, swatting away = too noisy. Explicit ratings (the
+ *  sim's bubble/modal) still win when present. This is the heart of "learn while
+ *  you sleep" — the day's actions become tomorrow's taste. */
+export function outcomeRating(item: FeedItem): Rating | null {
+  if (item.rating) return item.rating;
+  const o = item.outcome;
+  if (!o) return null;
+  if (o.type === "clicked_through") return "helpful"; // opened it → worth surfacing
+  if (o.type === "swatted" || o.type === "dismissed") return "annoying"; // flung away → too much
+  return null; // expired / unresolved — no clear signal, don't punish silence
+}
+
+/** Consolidate the day's feed into personality drift, memories, and a dream. */
+export function nightBloom(log: FeedItem[], rng: Rng = Math.random): NightBloomResult {
+  const signals = log
+    .map((e) => ({ e, r: outcomeRating(e) }))
+    .filter((s): s is { e: FeedItem; r: Rating } => s.r != null);
+  const counts: Record<Rating, number> = { helpful: 0, annoying: 0, cute: 0 };
+  for (const s of signals) counts[s.r] += 1;
+
+  // personality drift from the day's reactions
+  const deltas: NightBloomResult["deltas"] = {};
+  const add = (k: FairyStat | "age", v: number) => {
+    deltas[k] = (deltas[k] || 0) + v;
+  };
+  if (counts.helpful) {
+    add("protectiveness", counts.helpful * 2);
+    add("attachment", counts.helpful);
+  }
+  if (counts.annoying) {
+    add("chattiness", -counts.annoying * 3);
+    add("mischief", -counts.annoying * 2);
+    add("protectiveness", counts.annoying);
+  }
+  if (counts.cute) {
+    add("mischief", counts.cute * 2);
+    add("chattiness", -counts.cute);
+  }
+  if (!signals.length) add("curiosity", 2);
+  add("age", 1); // a small drift each night regardless
+
+  // memories: promote the strongest signals (a thing tapped-through or swatted)
+  const memories: MemorySeed[] = [];
+  const seen = new Set<string>();
+  for (const { e, r } of signals) {
+    const def = EVENTS.find((x) => x.id === e.id);
+    if (!def || seen.has(def.id)) continue;
+    if (r === "helpful" || r === "annoying") {
+      memories.push({ ...def.memory });
+      seen.add(def.id);
+    }
+  }
+  if (!memories.length && log.length) {
+    memories.push({
+      text: "Vu mostly let me patrol in peace today. I'll trust my own taste more.",
+      type: "tone",
+      icon: "🌿",
+    });
+  }
+
+  const rules: string[] = [];
+  if (counts.helpful) rules.push("Keep surfacing Claude and build completions promptly.");
+  if (counts.annoying) rules.push("Fewer interruptions for low-stakes noise.");
+  if (counts.cute) rules.push("A little more theatre is allowed.");
+
+  return {
+    deltas,
+    memories,
+    rules,
+    dream: pick(DREAMS, rng),
+    morning: pick(MORNINGS, rng),
+    counts,
+  };
+}

frontend/src/engine/reactions.test.ts

@@ -0,0 +1,77 @@
+import { describe, expect, it } from "vitest";
+import { EVENTS } from "./events";
+import {
+  asPeekEmotion,
+  PEEK_EMOTIONS,
+  reactionForEmotion,
+  reactionForEvent,
+  reactionForRating,
+} from "./reactions";
+
+const ev = (id: string) => {
+  const e = EVENTS.find((x) => x.id === id);
+  if (!e) throw new Error(`no such event: ${id}`);
+  return e;
+};
+const stableRng = () => 0.99; // never trips the mischief-dance branch
+
+describe("reactionForEvent", () => {
+  it("celebrates a fresh win and shouts", () => {
+    const r = reactionForEvent(ev("git_push"), { repeats: 0, rng: stableRng });
+    expect(r.kind).toBe("celebrate");
+    expect(r.shout).toBe("shipped!");
+  });
+
+  it("decays to a shrug when the same event keeps recurring", () => {
+    expect(reactionForEvent(ev("git_push"), { repeats: 1, rng: stableRng }).kind).toBe("pop");
+    expect(reactionForEvent(ev("git_push"), { repeats: 3, rng: stableRng }).kind).toBe("shrug");
+  });
+
+  it("keeps alarms sharp no matter how often they fire", () => {
+    expect(reactionForEvent(ev("build_fail"), { repeats: 0, rng: stableRng }).kind).toBe("nani");
+    expect(reactionForEvent(ev("build_fail"), { repeats: 9, rng: stableRng }).kind).toBe("nani");
+  });
+
+  it("high mischief can turn a celebration into a dance", () => {
+    const r = reactionForEvent(ev("claude_done"), { repeats: 0, mischief: 90, rng: () => 0 });
+    expect(r.kind).toBe("dance");
+  });
+
+  it("falls back to a pop for an unmapped event", () => {
+    const fake = { ...ev("git_push"), id: "totally_new" };
+    expect(reactionForEvent(fake, { rng: stableRng }).kind).toBe("pop");
+  });
+});
+
+describe("reactionForRating", () => {
+  it("maps ratings to felt reactions", () => {
+    expect(reactionForRating("cute").kind).toBe("dance");
+    expect(reactionForRating("annoying").kind).toBe("sulk");
+    expect(reactionForRating("helpful").kind).toBe("pop");
+  });
+});
+
+describe("peek emotions", () => {
+  const stable = () => 0.99;
+
+  it("maps each emotion to its gesture with a shout", () => {
+    expect(reactionForEmotion("confused").kind).toBe("nani");
+    expect(reactionForEmotion("amused").kind).toBe("laugh");
+    expect(reactionForEmotion("worried").kind).toBe("fret");
+    expect(reactionForEmotion("wistful").kind).toBe("sad");
+    expect(reactionForEmotion("curious").kind).toBe("perk");
+    expect(reactionForEmotion("delighted", { rng: stable }).kind).toBe("celebrate");
+    for (const e of PEEK_EMOTIONS) expect(reactionForEmotion(e).shout).toBeTruthy();
+  });
+
+  it("lets a giddy (high-mischief) Puck escalate delight into a dance", () => {
+    expect(reactionForEmotion("delighted", { mischief: 90, rng: () => 0 }).kind).toBe("dance");
+  });
+
+  it("coerces unknown/missing brain strings to curious", () => {
+    expect(asPeekEmotion("amused")).toBe("amused");
+    expect(asPeekEmotion("nonsense")).toBe("curious");
+    expect(asPeekEmotion(undefined)).toBe("curious");
+    expect(asPeekEmotion(null)).toBe("curious");
+  });
+});

frontend/src/engine/reactions.ts

@@ -0,0 +1,146 @@
+// Puck's visible reactions — the personality layer that sits on top of judgment.
+// The engine already decides *whether* to surface an event (the Decision ladder)
+// and *what words* to use (speech tiers); this decides *how he physically reacts*:
+// a one-shot body gesture plus an optional shout floating over the sprite.
+// Pure data — SimApp plays the gesture; nothing here touches React or the DOM.
+
+import type { EventDef, Rating, Rng } from "./types";
+import { pick } from "./util";
+
+export type ReactionKind =
+  | "celebrate" // joyful bounce + spin — a win landed
+  | "nani" // anime freeze-frame snap-zoom — alarm, "wait, WHAT?"
+  | "perk" // lean-in scale-up — curiosity, something worth a look
+  | "shrug" // deflated tilt — nonchalance, "not this again"
+  | "sulk" // droop + shrink — chastened, an annoyed swat landed
+  | "dance" // wiggle spin — delight / high mischief
+  | "summon" // big insistent size-up + bounce — "hey, look at this!" (replaces the
+  // screen-takeover interrupt modal: demands attention without blocking)
+  | "laugh" // giggle bounce — found something funny (a meme, a joke)
+  | "sad" // droop + dim — something poignant, lonely, or failing
+  | "fret" // recoil + tremble — the human seems angry or frustrated
+  | "pop"; // tiny default acknowledgement
+
+export interface Reaction {
+  kind: ReactionKind;
+  /** Floating exclamation over the sprite; omit for a wordless gesture. */
+  shout?: string;
+  /** One-shot duration (ms). Kept in lockstep with the CSS animation lengths in
+   *  ui.css (.puck.react-*) so SimApp clears the reaction exactly as it ends. */
+  ms: number;
+}
+
+const MS: Record<ReactionKind, number> = {
+  celebrate: 1100,
+  nani: 900,
+  perk: 750,
+  shrug: 1000,
+  sulk: 1050,
+  dance: 1500,
+  summon: 1600,
+  laugh: 1200,
+  sad: 1300,
+  fret: 1100,
+  pop: 480,
+};
+
+const make = (kind: ReactionKind, shout?: string): Reaction => ({ kind, shout, ms: MS[kind] });
+
+// ---- peek emotions: how Puck FEELS about a patch he peeked at ----------------
+// The vision brain classifies each peek into one of these (it's a learning, not-too-
+// clever sprite — confusion is common and endearing). Each maps to a body gesture +
+// a pool of shouts. This is the companion loop's personality layer (the event map
+// below is the older, dormant notification path).
+
+export type PeekEmotion = "curious" | "confused" | "amused" | "delighted" | "worried" | "wistful";
+
+const EMOTION_GESTURE: Record<PeekEmotion, ReactionKind> = {
+  curious: "perk",
+  confused: "nani", // it doesn't understand — the freeze-frame "wait, what IS that?"
+  amused: "laugh",
+  delighted: "celebrate",
+  worried: "fret", // the human seems angry/frustrated, or errors are piling up
+  wistful: "sad",
+};
+
+const EMOTION_SHOUTS: Record<PeekEmotion, readonly string[]> = {
+  curious: ["ooh?", "hm?", "?"],
+  confused: ["NANI?!", "eh?!", "wha—", "huh?!"],
+  amused: ["pfft", "hehe", "haha!", "heh"],
+  delighted: ["ooh!", "yes!", "nice!", "✨"],
+  worried: ["eep", "easy…", "uh oh", "yikes"],
+  wistful: ["…oh", "hm.", "…"],
+};
+
+/** Canonical emotion list (mirrors PEEK_EMOTIONS in brain.py). */
+export const PEEK_EMOTIONS = Object.keys(EMOTION_GESTURE) as PeekEmotion[];
+
+/** Coerce an arbitrary brain string to a known emotion (defaults to curious). */
+export function asPeekEmotion(s: string | undefined | null): PeekEmotion {
+  return s != null && Object.hasOwn(EMOTION_GESTURE, s) ? (s as PeekEmotion) : "curious";
+}
+
+/** Map a peeked-at emotion to the gesture Puck plays, with a fitting shout.
+ *  A giddy (high-mischief) Puck escalates plain delight into a full dance. */
+export function reactionForEmotion(
+  emotion: PeekEmotion,
+  opts: { mischief?: number; rng?: Rng } = {},
+): Reaction {
+  const { mischief = 45, rng = Math.random } = opts;
+  const shout = pick(EMOTION_SHOUTS[emotion], rng);
+  if (emotion === "delighted" && mischief > 70 && rng() < 0.5) return make("dance", shout);
+  return make(EMOTION_GESTURE[emotion], shout);
+}
+
+/** The attention-grab for important events — Puck's non-blocking answer to the
+ *  old interrupt modal. Triggered by the orchestrator, not the event→reaction map. */
+export function summonReaction(): Reaction {
+  return make("summon", "!");
+}
+
+// Base reaction per event id. Anything not listed falls back to a small pop.
+const BY_ID: Record<string, Reaction> = {
+  claude_done: make("celebrate", "done!"),
+  claude_permission: make("perk", "?"),
+  build_done: make("celebrate", "green!"),
+  build_fail: make("nani", "NANI?!"),
+  mail_important: make("perk"),
+  mail_finance: make("shrug"),
+  discord_mention: make("perk", "!"),
+  discord_noise: make("shrug"),
+  calendar_soon: make("nani", "!"),
+  stale_tab: make("shrug"),
+  browser_newpage: make("perk", "ooh"),
+  browser_rabbithole: make("perk", "deeper…"),
+  git_push: make("celebrate", "shipped!"),
+};
+
+// Decay toward nonchalance when the same thing keeps happening — the first push
+// is "shipped!", the second a quiet pop, the third a tired shrug.
+const REPEAT_SHRUGS = ["again?", "…another one", "not again", "sure, fine"] as const;
+
+/** How Puck physically reacts to an event surfacing.
+ *  Repetition is the personality beat (celebrate → pop → shrug), but *alarms*
+ *  keep their bite no matter how often they recur — a fire is always a fire. */
+export function reactionForEvent(
+  ev: EventDef,
+  opts: { repeats?: number; mischief?: number; rng?: Rng } = {},
+): Reaction {
+  const { repeats = 0, mischief = 45, rng = Math.random } = opts;
+  const base = BY_ID[ev.id] ?? make("pop");
+
+  if (base.kind !== "nani") {
+    if (repeats >= 2) return make("shrug", pick(REPEAT_SHRUGS, rng));
+    if (repeats === 1) return make("pop"); // muted second take
+  }
+  // a high-mischief Puck sometimes turns a celebration into a little dance
+  if (base.kind === "celebrate" && mischief > 70 && rng() < 0.4) return make("dance", base.shout);
+  return base;
+}
+
+/** Reaction to the user rating one of Puck's comments. */
+export function reactionForRating(rating: Rating): Reaction {
+  if (rating === "cute") return make("dance", "♪");
+  if (rating === "annoying") return make("sulk", "…sorry");
+  return make("pop"); // helpful — a small satisfied pop
+}

frontend/src/engine/scoring.ts

@@ -0,0 +1,30 @@
+import type { Decision, EventDef, EventScores, FairyState, PuckMode } from "./types";
+import { clamp } from "./util";
+
+/** Personality bends the raw event scores before the decision bands see them. */
+export function score(ev: EventDef, fs: FairyState): EventScores {
+  const s = { ...ev.base };
+  // protectiveness raises the bar for annoyance; mischief lowers Puck's filter
+  s.annoyance = clamp(s.annoyance + (fs.protectiveness - 50) * 0.25 - (fs.mischief - 50) * 0.15);
+  s.interest = clamp(s.interest + (fs.curiosity - 50) * 0.2 + (fs.mischief - 50) * 0.15);
+  s.relevance = clamp(s.relevance + (fs.protectiveness - 50) * 0.1);
+  return s;
+}
+
+/** Decision bands → rungs of the interruption ladder. */
+export function decide(s: EventScores): Decision {
+  const worth = s.relevance + s.urgency + s.interest - s.annoyance;
+  if (s.urgency >= 80 && s.relevance >= 80) return "interrupt";
+  if (s.relevance < 35 && s.annoyance > 60) return "ignore";
+  if (worth > 180) return "notify";
+  if (worth > 120) return "glow";
+  if (worth > 70) return "scroll";
+  return "ignore";
+}
+
+/** Mode overrides applied after scoring + learned bias (mirrors applyBias). */
+export function applyMode(decision: Decision, mode: PuckMode): Decision {
+  if (mode === "silent" && (decision === "notify" || decision === "interrupt")) return "scroll";
+  if (mode === "goblin" && decision === "glow") return "notify";
+  return decision;
+}

frontend/src/engine/speech.ts

@@ -0,0 +1,56 @@
+import type { EventDef, FairyState, Rating, Rng, StyleTag, Taste, Tier, Utterance } from "./types";
+import { clamp01, pick } from "./util";
+
+export const STYLE_TAGS: Record<Tier, StyleTag[]> = {
+  plain: ["useful", "terse"],
+  playful: ["useful", "warm"],
+  mythic: ["theatrical", "warm"],
+};
+
+const SIDE_QUESTS = [
+  "Pay me in a snack and I'll watch it for you.",
+  "I left a tiny ✦ on it so I can find it again.",
+  "I also rearranged one desktop icon. You'll never know which.",
+] as const;
+
+/** Pick the voice tier the taste vector + fairy state favor, with a little caprice. */
+export function speak(ev: EventDef, fs: FairyState, taste: Taste, rng: Rng = Math.random): Utterance {
+  const tiers = Object.keys(ev.lines) as Tier[];
+  let best: Tier = tiers[0];
+  let bestW = -1e9;
+  for (const tier of tiers) {
+    const tags = STYLE_TAGS[tier];
+    let w = tags.reduce((a, t) => a + (taste[t] ?? 0.5), 0);
+    if (tier === "mythic") w += (fs.mischief - 50) / 90; // mischief loves drama
+    if (tier === "plain") w += (fs.protectiveness - 50) / 140;
+    w += rng() * 0.5; // a little caprice
+    if (w > bestW) {
+      bestW = w;
+      best = tier;
+    }
+  }
+  let text = ev.lines[best];
+  // high mischief sometimes tacks on a harmless side-quest
+  if (fs.mischief > 70 && rng() < 0.4) text += ` ${pick(SIDE_QUESTS, rng)}`;
+  return { text, tier: best, tags: STYLE_TAGS[best] };
+}
+
+/** A rating nudges taste toward / away from the tags that were used. */
+export function learn(taste: Taste, tags: StyleTag[], rating: Rating): Taste {
+  const t = { ...taste };
+  const step = 0.08;
+  if (rating === "helpful") {
+    for (const g of tags) t[g] = clamp01(t[g] + step);
+    t.useful = clamp01(t.useful + step);
+  }
+  if (rating === "annoying") {
+    for (const g of tags) t[g] = clamp01(t[g] - step);
+    t.theatrical = clamp01(t.theatrical - step / 2);
+  }
+  if (rating === "cute") {
+    t.theatrical = clamp01(t.theatrical + step);
+    t.warm = clamp01(t.warm + step / 2);
+    t.useful = clamp01(t.useful - step / 2);
+  }
+  return t;
+}

frontend/src/engine/state.ts

@@ -0,0 +1,76 @@
+import type { FairyState, Memory, Mood, Rating, Taste } from "./types";
+import { clamp } from "./util";
+
+export function defaultState(): FairyState {
+  return {
+    energy: 78,
+    mischief: 45,
+    protectiveness: 60,
+    chattiness: 52,
+    curiosity: 80,
+    trust: 74,
+    attachment: 66,
+    ageDays: 4,
+    obsession: "forgotten desktops",
+  };
+}
+
+export function defaultTaste(): Taste {
+  return { theatrical: 0.5, terse: 0.5, useful: 0.5, warm: 0.55 };
+}
+
+/** Immediate personality nudge from a rating (Night Bloom does the larger drift). */
+export function rateFairy(fs: FairyState, rating: Rating): FairyState {
+  const n = { ...fs };
+  if (rating === "helpful") {
+    n.protectiveness = clamp(fs.protectiveness + 2);
+    n.attachment = clamp(fs.attachment + 1);
+  }
+  if (rating === "annoying") n.chattiness = clamp(fs.chattiness - 3);
+  if (rating === "cute") n.attachment = clamp(fs.attachment + 1);
+  return n;
+}
+
+export function moodFor(fs: FairyState): Mood {
+  if (fs.energy < 25) return "sleepy";
+  if (fs.mischief > 68) return "mischief";
+  if (fs.protectiveness > 72) return "proud";
+  return "curious";
+}
+
+export function seedMemories(): Memory[] {
+  return [
+    {
+      id: "m1",
+      text: "Puck is being built for the Hugging Face Build Small hackathon.",
+      type: "project",
+      icon: "🗝️",
+      salience: 0.9,
+      pinned: true,
+    },
+    {
+      id: "m2",
+      text: "Vu likes agents that are useful but pretend not to be.",
+      type: "preference",
+      icon: "🌿",
+      salience: 0.72,
+      pinned: false,
+    },
+    {
+      id: "m3",
+      text: "Desktop 2 is the workshop — where code smoke gathers.",
+      type: "place",
+      icon: "🪶",
+      salience: 0.66,
+      pinned: false,
+    },
+    {
+      id: "m4",
+      text: "Vu distrusts bloated, noisy notifications.",
+      type: "aversion",
+      icon: "🍄",
+      salience: 0.58,
+      pinned: false,
+    },
+  ];
+}

frontend/src/engine/traces.test.ts

@@ -0,0 +1,63 @@
+import { describe, expect, it } from "vitest";
+import { defaultProfile, rateSource } from "./learning";
+import { defaultState, defaultTaste } from "./state";
+import { buildTraces } from "./traces";
+import type { FeedItem } from "./types";
+
+const item = (over: Partial<FeedItem>): FeedItem => ({
+  uid: "u1",
+  id: "claude_done",
+  source: "Claude",
+  say: "The goblin rests.",
+  tier: "playful",
+  tags: ["useful", "warm"],
+  decision: "notify",
+  time: "12:00",
+  rating: null,
+  ...over,
+});
+
+describe("buildTraces", () => {
+  const fs = defaultState();
+  const taste = defaultTaste();
+  const now = new Date("2026-06-06T12:00:00Z");
+
+  it("snapshots event, fairy dials, taste, and per-source bias", () => {
+    let profile = defaultProfile();
+    profile = rateSource(profile, "Discord", "annoying"); // seed -8 → -20
+    const [t] = buildTraces([item({ source: "Discord", id: "discord_noise" })], fs, taste, profile, now);
+    expect(t.v).toBe(1);
+    expect(t.ts).toBe("2026-06-06T12:00:00.000Z");
+    expect(t.event).toMatchObject({ id: "discord_noise", source: "Discord", decision: "notify" });
+    expect(t.sourceBias).toBe(-20);
+    expect(t.fairy.mischief).toBe(fs.mischief);
+    expect(t.taste).toEqual(taste);
+  });
+
+  it("carries channel and outcome when present, null when absent", () => {
+    const outcome = { type: "dismissed" as const, rating: null, latencyMs: 420, visible: true };
+    const [a, b] = buildTraces(
+      [item({ channel: "toast", outcome }), item({ uid: "u2" })],
+      fs,
+      taste,
+      defaultProfile(),
+      now,
+    );
+    expect(a.event.channel).toBe("toast");
+    expect(a.outcome).toEqual(outcome);
+    expect(b.event.channel).toBeNull();
+    expect(b.outcome).toBeNull();
+  });
+
+  it("includes silent decisions too — ignore/scroll distributions matter for the notify head", () => {
+    const [t] = buildTraces(
+      [item({ decision: "ignore", channel: "feed" })],
+      fs,
+      taste,
+      defaultProfile(),
+      now,
+    );
+    expect(t.event.decision).toBe("ignore");
+    expect(t.outcome).toBeNull();
+  });
+});

frontend/src/engine/traces.ts

@@ -0,0 +1,54 @@
+// Trace records: the day's surfaced decisions + how the user reacted,
+// snapshotted with the fairy/taste/bias state that produced them.
+// This is the molt's training data — exported at Night Bloom, appended
+// to server/data/traces.jsonl by the daemon.
+
+import { sourceBias } from "./learning";
+import type { FairyState, FeedItem, Profile, SurfaceOutcome, Taste } from "./types";
+
+export interface TraceRecord {
+  v: 1;
+  ts: string;
+  event: Pick<FeedItem, "id" | "source" | "say" | "tier" | "decision"> & {
+    channel: FeedItem["channel"] | null;
+  };
+  /** the dials that shaped this decision, at export time */
+  fairy: Pick<FairyState, "mischief" | "protectiveness" | "chattiness" | "curiosity" | "energy">;
+  taste: Taste;
+  sourceBias: number;
+  outcome: SurfaceOutcome | null;
+}
+
+/** Snapshot the day's feed as training traces. Pure — caller decides when/where to ship. */
+export function buildTraces(
+  feed: FeedItem[],
+  fs: FairyState,
+  taste: Taste,
+  profile: Profile,
+  now: Date = new Date(),
+): TraceRecord[] {
+  const ts = now.toISOString();
+  const fairy = {
+    mischief: fs.mischief,
+    protectiveness: fs.protectiveness,
+    chattiness: fs.chattiness,
+    curiosity: fs.curiosity,
+    energy: fs.energy,
+  };
+  return feed.map((e) => ({
+    v: 1 as const,
+    ts,
+    event: {
+      id: e.id,
+      source: e.source,
+      say: e.say,
+      tier: e.tier,
+      decision: e.decision,
+      channel: e.channel ?? null,
+    },
+    fairy,
+    taste,
+    sourceBias: sourceBias(profile, e.source),
+    outcome: e.outcome ?? null,
+  }));
+}

frontend/src/engine/types.ts

@@ -0,0 +1,174 @@
+// Puck engine contract. Pure data — no React, no DOM.
+
+export type Rating = "helpful" | "annoying" | "cute";
+
+/** The interruption ladder, least → most intrusive. */
+export type Decision = "ignore" | "scroll" | "glow" | "notify" | "interrupt";
+
+/** Where a decision landed on screen (presentation policy, chosen per shell). */
+export type Channel = "feed" | "glow" | "bubble" | "toast" | "interrupt";
+
+/** How the user resolved a surfaced comment. The silent outcomes are labels too:
+ *  expired = not worth words, fast dismiss = reflex swat, slow dismiss = read-then-closed. */
+export type OutcomeType = "rated" | "dismissed" | "swatted" | "expired" | "clicked_through" | "unresolved";
+
+export interface SurfaceOutcome {
+  type: OutcomeType;
+  rating: Rating | null;
+  /** surface → first interaction (or expiry/sleep), ms */
+  latencyMs: number;
+  /** tab visibility at surface time — an unseen toast is not a rejected toast */
+  visible: boolean;
+}
+
+/** Voice tiers an event line can be written in. */
+export type Tier = "plain" | "playful" | "mythic";
+
+/** Style traits used to steer tier selection via the taste vector. */
+export type StyleTag = "useful" | "terse" | "warm" | "theatrical";
+
+export type Mood = "curious" | "mischief" | "sleepy" | "proud" | "grumpy";
+
+/** User-selected behavior mode (menu bar). Modifies decisions post-scoring. */
+export type PuckMode = "polite" | "patrol" | "goblin" | "silent";
+
+export type SourceId = "Claude" | "Build" | "Mail" | "Discord" | "Calendar" | "Browser" | "Git";
+
+/** Simulated-desktop mutation an event causes. */
+export type EffectId =
+  | "claude_done"
+  | "build_done"
+  | "build_fail"
+  | "mail_unread"
+  | "discord_mention"
+  | "discord_noise"
+  | "calendar_soon"
+  | "none";
+
+export type MemoryType = "preference" | "aversion" | "pattern" | "project" | "place" | "tone" | "boundary";
+
+export interface FairyState {
+  energy: number;
+  mischief: number;
+  protectiveness: number;
+  chattiness: number;
+  curiosity: number;
+  trust: number;
+  attachment: number;
+  ageDays: number;
+  obsession: string;
+}
+
+/** The 0..100 personality dials Night Bloom may drift. */
+export type FairyStat =
+  | "energy"
+  | "mischief"
+  | "protectiveness"
+  | "chattiness"
+  | "curiosity"
+  | "trust"
+  | "attachment";
+
+/** How much Puck believes you like each style trait, 0..1. */
+export type Taste = Record<StyleTag, number>;
+
+export interface EventScores {
+  urgency: number;
+  relevance: number;
+  novelty: number;
+  annoyance: number;
+  interest: number;
+}
+
+export interface MemorySeed {
+  text: string;
+  type: MemoryType;
+  icon: string;
+}
+
+export interface Memory extends MemorySeed {
+  id: string;
+  salience: number;
+  pinned: boolean;
+}
+
+export interface EventDef {
+  id: string;
+  source: SourceId;
+  /** Window the sprite flies to; null = nowhere in particular. */
+  target: string | null;
+  glyph: string;
+  title: string;
+  base: EventScores;
+  effect: EffectId;
+  lines: Record<Tier, string>;
+  memory: MemorySeed;
+}
+
+export interface Utterance {
+  text: string;
+  tier: Tier;
+  tags: StyleTag[];
+}
+
+export interface FeedItem {
+  uid: string;
+  id: string;
+  source: SourceId;
+  say: string;
+  tier: Tier;
+  tags: StyleTag[];
+  decision: Decision | "handled" | "learned";
+  time: string;
+  rating: Rating | null;
+  /** Presentation channel this landed on (absent for pre-tracking items). */
+  channel?: Channel;
+  /** Engagement resolution — fine-tune label material. Absent until resolved. */
+  outcome?: SurfaceOutcome;
+}
+
+export interface NightBloomResult {
+  /** "age" is ceremonial (always +1, displayed nowhere); stat keys get clamp-applied on wake. */
+  deltas: Partial<Record<FairyStat | "age", number>>;
+  memories: MemorySeed[];
+  rules: string[];
+  dream: string;
+  morning: string;
+  counts: Record<Rating, number>;
+}
+
+// ---- learning profile (per-source interruption taste) ----------------------
+
+export interface SourceStats {
+  /** -50..50; positive = surface more, negative = back off. */
+  bias: number;
+  helpful: number;
+  annoying: number;
+  cute: number;
+  samples: number;
+}
+
+export interface AutomationDef {
+  id: string;
+  verb: string;
+  offer: string;
+  done: string;
+  /** Event ids this automation handles silently. Anything else from the
+   *  source still goes through normal scoring — a mention still reaches
+   *  you after the bog is muted. */
+  handles: string[];
+}
+
+export interface LearnedAutomation extends Pick<AutomationDef, "id" | "verb" | "done"> {
+  source: SourceId;
+}
+
+export interface Profile {
+  sources: Record<SourceId, SourceStats>;
+  automations: LearnedAutomation[];
+  /** Sources we already offered an automation for (accepted or declined). */
+  offered: Partial<Record<SourceId, boolean>>;
+}
+
+/** Injectable randomness so tests are deterministic. */
+export type Rng = () => number;

frontend/src/engine/util.ts

@@ -0,0 +1,18 @@
+import type { Rng } from "./types";
+
+export const clamp = (n: number, lo = 0, hi = 100): number => Math.max(lo, Math.min(hi, n));
+
+export const clamp01 = (n: number): number => Math.max(0, Math.min(1, n));
+
+export const pick = <T>(a: readonly T[], rng: Rng = Math.random): T => a[Math.floor(rng() * a.length)];
+
+export const hhmm = (d: Date = new Date()): string =>
+  d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: false });
+
+export function shuffle<T>(a: T[], rng: Rng = Math.random): T[] {
+  for (let i = a.length - 1; i > 0; i--) {
+    const j = Math.floor(rng() * (i + 1));
+    [a[i], a[j]] = [a[j], a[i]];
+  }
+  return a;
+}

frontend/src/engine/wire.test.ts

@@ -0,0 +1,86 @@
+// Parity pins between engine/wire.ts and /schema/event.schema.json — the
+// cross-language contract. If these fail, one side of the wire drifted.
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { describe, expect, it } from "vitest";
+import { EVENTS } from "./events";
+import {
+  isWireEvent,
+  TEMPLATES,
+  toEventDef,
+  WIRE_OPTIONAL,
+  WIRE_REQUIRED,
+  WIRE_SOURCES,
+  type WireEvent,
+} from "./wire";
+
+const schema = JSON.parse(readFileSync(join(__dirname, "../../../schema/event.schema.json"), "utf8"));
+
+describe("schema parity", () => {
+  it("required fields match the JSON schema", () => {
+    expect([...WIRE_REQUIRED].sort()).toEqual([...schema.required].sort());
+  });
+
+  it("all schema properties are known to the TS side", () => {
+    expect(Object.keys(schema.properties).sort()).toEqual([...WIRE_REQUIRED, ...WIRE_OPTIONAL].sort());
+  });
+
+  it("source enum matches the JSON schema", () => {
+    expect([...WIRE_SOURCES].sort()).toEqual([...schema.properties.source.enum].sort());
+  });
+});
+
+describe("isWireEvent", () => {
+  it("accepts a minimal valid event", () => {
+    expect(isWireEvent({ source: "claude", type: "task_completed", title: "Done" })).toBe(true);
+  });
+
+  it("rejects unknown sources, empty fields, and non-objects", () => {
+    expect(isWireEvent({ source: "slack", type: "x", title: "y" })).toBe(false);
+    expect(isWireEvent({ source: "claude", type: "", title: "y" })).toBe(false);
+    expect(isWireEvent({ source: "claude", type: "x", title: "" })).toBe(false);
+    expect(isWireEvent(null)).toBe(false);
+    expect(isWireEvent("claude")).toBe(false);
+  });
+});
+
+describe("TEMPLATES integrity", () => {
+  it("every template id resolves to a deck event (renames can't silently fall through)", () => {
+    const ids = new Set(EVENTS.map((e) => e.id));
+    for (const id of Object.values(TEMPLATES)) expect(ids).toContain(id);
+  });
+});
+
+describe("toEventDef", () => {
+  const claude: WireEvent = {
+    source: "claude",
+    type: "task_completed",
+    title: "Implement wire schema",
+    summary: "3 files changed",
+  };
+
+  it("borrows the matching template's scoring", () => {
+    const def = toEventDef(claude);
+    const template = EVENTS.find((e) => e.id === "claude_done");
+    expect(def.base).toEqual(template?.base);
+    expect(def.source).toBe("Claude");
+    expect(def.lines.plain).toBe("Implement wire schema — 3 files changed");
+  });
+
+  it("real events never mutate sim windows and have no flight target", () => {
+    const def = toEventDef(claude);
+    expect(def.effect).toBe("none");
+    expect(def.target).toBeNull();
+  });
+
+  it("unknown types get middling fallback scores (never an interrupt)", () => {
+    const def = toEventDef({ source: "build", type: "linted", title: "Lint clean" });
+    expect(def.base.urgency).toBeLessThan(80);
+    expect(def.lines.plain).toBe("Lint clean");
+  });
+
+  it("build failures map to the urgent template", () => {
+    const def = toEventDef({ source: "build", type: "tests_failed", title: "2 failing" });
+    expect(def.base).toEqual(EVENTS.find((e) => e.id === "build_fail")?.base);
+  });
+});

frontend/src/engine/wire.ts

@@ -0,0 +1,96 @@
+// Wire events: what external watchers POST to the daemon (see /schema/event.schema.json).
+// This module is the only place wire shapes become engine EventDefs — the daemon
+// stays dumb pipes; mapping wire types onto scoring templates is policy, so it lives here.
+
+import { EVENTS } from "./events";
+import type { EventDef, EventScores, SourceId } from "./types";
+
+export interface WireEvent {
+  id?: string;
+  ts?: string;
+  source: "claude" | "build" | "mail" | "discord" | "calendar" | "browser";
+  type: string;
+  title: string;
+  summary?: string;
+  payload?: Record<string, unknown>;
+}
+
+/** Keep in lockstep with event.schema.json — pinned by a parity test. */
+export const WIRE_SOURCES = ["claude", "build", "mail", "discord", "calendar", "browser"] as const;
+export const WIRE_REQUIRED = ["source", "type", "title"] as const;
+export const WIRE_OPTIONAL = ["id", "ts", "summary", "payload"] as const;
+
+export function isWireEvent(v: unknown): v is WireEvent {
+  if (typeof v !== "object" || v === null) return false;
+  const o = v as Record<string, unknown>;
+  return (
+    typeof o.source === "string" &&
+    (WIRE_SOURCES as readonly string[]).includes(o.source) &&
+    typeof o.type === "string" &&
+    o.type.length > 0 &&
+    typeof o.title === "string" &&
+    o.title.length > 0
+  );
+}
+
+const SOURCE_IDS: Record<WireEvent["source"], SourceId> = {
+  claude: "Claude",
+  build: "Build",
+  mail: "Mail",
+  discord: "Discord",
+  calendar: "Calendar",
+  browser: "Browser",
+};
+
+// (source, type) → the sim-deck event whose base scores fit. Real events borrow
+// the deck's tuned scoring + memory seeds; only the words change.
+// Exported for the drift test: every value must name a real deck event.
+export const TEMPLATES: Record<string, string> = {
+  "claude/task_completed": "claude_done",
+  "claude/stop": "claude_done",
+  "claude/notification": "claude_done",
+  "claude/permission_needed": "claude_permission",
+  // a failed Claude turn borrows the failing-build urgency profile
+  "claude/failed": "build_fail",
+  "build/passed": "build_done",
+  "build/failed": "build_fail",
+  "build/tests_failed": "build_fail",
+  "mail/important": "mail_important",
+  "mail/statement": "mail_finance",
+  "discord/mention": "discord_mention",
+  "discord/noise": "discord_noise",
+  "calendar/soon": "calendar_soon",
+  "browser/stale_tab": "stale_tab",
+  "browser/new_page": "browser_newpage",
+  "browser/rabbit_hole": "browser_rabbithole",
+};
+
+// unknown (source, type): middling everything — surfaces as a scroll/glow, never an interrupt
+const FALLBACK_SCORES: EventScores = { urgency: 50, relevance: 60, novelty: 55, annoyance: 30, interest: 60 };
+
+/** Wrap a wire event in an EventDef the engine can score and voice. */
+export function toEventDef(w: WireEvent): EventDef {
+  const template = EVENTS.find((e) => e.id === TEMPLATES[`${w.source}/${w.type}`]);
+  const line = w.summary ? `${w.title} — ${w.summary}` : w.title;
+  return {
+    id: w.id ?? `wire_${w.source}_${w.type}`,
+    source: SOURCE_IDS[w.source],
+    // real events have no sim window to fly to; the shell decides where Puck goes
+    target: null,
+    glyph: template?.glyph ?? "✦",
+    title: w.title,
+    base: template?.base ?? FALLBACK_SCORES,
+    effect: "none",
+    // real titles speak for themselves; tier flavor comes from the template's framing
+    lines: {
+      plain: line,
+      playful: template ? `Word from the ${w.source} realm: ${line}` : line,
+      mythic: template ? `An omen from ${w.source}: ${line}` : line,
+    },
+    memory: template?.memory ?? {
+      text: `Vu gets real ${w.source} events now. Watch how he reacts.`,
+      type: "pattern",
+      icon: "🪶",
+    },
+  };
+}

frontend/src/lib/brain.ts

@@ -0,0 +1,49 @@
+// Client for the daemon's brain proxy. Every call degrades to null —
+// the scripted engine is the floor, the model is the ceiling. Puck is
+// never dead, just less eloquent.
+
+import type { FairyState, WireEvent } from "../engine";
+import { moodFor } from "../engine";
+
+interface BrainFairyState {
+  mood: string;
+  mischief: number;
+  obsession: string;
+}
+
+const forBrain = (fs: FairyState): BrainFairyState => ({
+  mood: moodFor(fs),
+  mischief: fs.mischief,
+  obsession: fs.obsession,
+});
+
+async function post(path: string, body: unknown, timeoutMs: number): Promise<string | null> {
+  try {
+    const res = await fetch(path, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body),
+      signal: AbortSignal.timeout(timeoutMs),
+    });
+    if (!res.ok) return null; // 503 = no brain configured; scripted fallback is the design
+    const data: unknown = await res.json();
+    const text = (data as { text?: unknown }).text;
+    return typeof text === "string" && text.length > 0 ? text : null;
+  } catch {
+    return null;
+  }
+}
+
+/** Fairy-voiced line for a real wire event. Null → use the template line. */
+export function brainNarrate(event: WireEvent, fs: FairyState): Promise<string | null> {
+  return post("/api/brain/narrate", { event, fairy_state: forBrain(fs) }, 25000);
+}
+
+/** In-character chat reply. Null → use the scripted keyword reply. */
+export function brainChat(
+  message: string,
+  fs: FairyState,
+  history: { who: string; text: string }[],
+): Promise<string | null> {
+  return post("/api/brain/chat", { message, fairy_state: forBrain(fs), history }, 25000);
+}

frontend/src/lib/daemon.ts

@@ -0,0 +1,47 @@
+// Poll the local daemon for real wire events. Offline-tolerant by design:
+// the sim is fully alive without a daemon, so failures are silent and the
+// poll backs off until the daemon answers again.
+
+import { isWireEvent, type WireEvent } from "../engine";
+
+const POLL_MS = 3000;
+const OFFLINE_BACKOFF_MS = 15000;
+
+export function startDaemonPoll(onEvents: (events: WireEvent[]) => void): () => void {
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  let stopped = false;
+
+  const tick = async () => {
+    if (stopped) return; // unmounted before first tick — never drain for a dead poller
+    let delay = POLL_MS;
+    try {
+      const res = await fetch("/api/events/pending", { signal: AbortSignal.timeout(2000) });
+      if (res.ok) {
+        const body: unknown = await res.json();
+        const list = (body as { events?: unknown[] }).events ?? [];
+        const valid = list.filter(isWireEvent);
+        // a malformed event on this path means the daemon let contract drift through — be loud
+        if (valid.length !== list.length)
+          console.error("puck: daemon sent events violating the wire schema", list);
+        // drain is destructive — a stopped poller (StrictMode's first mount) must not
+        // swallow events meant for the live one. Losing one drain to an unlucky unmount
+        // race is acceptable; silently eating every event on dev double-mount is not.
+        if (valid.length && !stopped) onEvents(valid);
+      } else {
+        delay = OFFLINE_BACKOFF_MS;
+      }
+    } catch {
+      delay = OFFLINE_BACKOFF_MS; // daemon not running — normal in Space/demo mode
+    }
+    if (!stopped) timer = setTimeout(tick, delay);
+  };
+
+  // drain is destructive, so the first fetch must not race React StrictMode's
+  // mount→unmount→mount: the doomed first instance is cleaned up synchronously,
+  // well inside this delay, so only the surviving poller ever touches the queue.
+  timer = setTimeout(tick, 350);
+  return () => {
+    stopped = true;
+    clearTimeout(timer);
+  };
+}

frontend/src/lib/debuglog.ts

@@ -0,0 +1,39 @@
+// Mirror the overlay's console to the daemon (/api/debug/log → /tmp/puck-frontend.log)
+// because the WKWebView inspector is unusable behind a fullscreen always-on-top
+// transparent window. Tauri-only so the browser sim isn't noisy.
+
+import { inTauri } from "./tauri";
+
+const stringify = (a: unknown): string => {
+  if (typeof a === "string") return a;
+  try {
+    return JSON.stringify(a);
+  } catch {
+    return String(a);
+  }
+};
+
+export function installDebugLog(): void {
+  if (!inTauri()) return;
+  const send = (level: string, args: unknown[]) => {
+    void fetch("/api/debug/log", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ level, msg: args.map(stringify).join(" ") }),
+    }).catch(() => {});
+  };
+  for (const level of ["log", "warn", "error"] as const) {
+    const orig = console[level].bind(console);
+    console[level] = (...args: unknown[]) => {
+      orig(...args);
+      send(level, args);
+    };
+  }
+  window.addEventListener("error", (e) =>
+    send("error", [`onerror: ${e.message} @ ${e.filename}:${e.lineno}`]),
+  );
+  window.addEventListener("unhandledrejection", (e) =>
+    send("error", [`unhandledrejection: ${String(e.reason)}`]),
+  );
+  console.log("puck: debug-log forwarding on");
+}

frontend/src/lib/memories.ts

@@ -0,0 +1,63 @@
+// Puck's memory = the tail of his peek observations (what he saw + said). The
+// daemon logs every peek; this reads them back for the Memory tab + chat grounding.
+// At Night Bloom, those observations are distilled into durable garden memories.
+
+import type { MemorySeed } from "../engine";
+
+export interface Memory {
+  ts: string;
+  image: string;
+  quip: string;
+}
+
+/** Night Bloom: ask the daemon to distill the day's peeks into durable garden
+ *  memories. [] if the brain's down or the day was too thin. Slow (LLM). */
+export async function fetchBloom(fairyState: { mischief: number; mood: string }): Promise<MemorySeed[]> {
+  try {
+    const res = await fetch("/api/brain/bloom", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ fairy_state: fairyState }),
+      signal: AbortSignal.timeout(60000),
+    });
+    if (!res.ok) return [];
+    return ((await res.json()) as { memories?: MemorySeed[] }).memories ?? [];
+  } catch {
+    return [];
+  }
+}
+
+export async function fetchMemories(limit = 30): Promise<Memory[]> {
+  try {
+    const res = await fetch(`/api/memories?limit=${limit}`, { signal: AbortSignal.timeout(5000) });
+    if (!res.ok) return [];
+    return ((await res.json()) as { memories?: Memory[] }).memories ?? [];
+  } catch {
+    return []; // daemon down — no memory to show
+  }
+}
+
+/** Existing recognizer labels (to suggest reuse when teaching Puck). */
+export async function fetchLabels(): Promise<string[]> {
+  try {
+    const res = await fetch("/api/recognize/labels", { signal: AbortSignal.timeout(4000) });
+    if (!res.ok) return [];
+    return ((await res.json()) as { labels?: string[] }).labels ?? [];
+  } catch {
+    return [];
+  }
+}
+
+/** Teach Puck what a peek is → enrolls that screenshot as a fingerprint reference. */
+export async function labelPeek(image: string, label: string): Promise<boolean> {
+  try {
+    const res = await fetch("/api/recognize/label", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ image, label }),
+    });
+    return res.ok;
+  } catch {
+    return false;
+  }
+}

frontend/src/lib/molt.ts

@@ -0,0 +1,24 @@
+// Molt readiness — how Puck's learning actually accumulates. The daemon counts
+// the rated traces collected so far against the threshold for the next adapter
+// "molt". Night Bloom shows this so sleep reflects real progress, not theatre.
+// Null when the daemon is down (Space/demo mode) — the screen just omits the gauge.
+
+export interface MoltStatus {
+  /** rated traces accumulated server-side (server/data/traces.jsonl) */
+  traces: number;
+  /** traces needed before a molt (LoRA retrain from base) is eligible */
+  threshold: number;
+  /** hand-built SFT examples the molt starts from */
+  sftBase: number;
+  ready: boolean;
+}
+
+export async function fetchMoltStatus(): Promise<MoltStatus | null> {
+  try {
+    const res = await fetch("/api/molt/status", { signal: AbortSignal.timeout(4000) });
+    if (!res.ok) return null;
+    return (await res.json()) as MoltStatus;
+  } catch {
+    return null; // daemon offline — sleep still works, just without the gauge
+  }
+}

frontend/src/lib/notify.ts

@@ -0,0 +1,23 @@
+// System notifications for when the tab is buried — the bridge to real
+// desktop usage until the Tauri overlay exists. Click = engagement,
+// which the caller records as a clicked_through outcome.
+
+export function notifyPermission(): NotificationPermission | "unsupported" {
+  return "Notification" in window ? Notification.permission : "unsupported";
+}
+
+/** Must be called from a user gesture (settings toggle). */
+export async function requestNotifyPermission(): Promise<boolean> {
+  if (!("Notification" in window)) return false;
+  return (await Notification.requestPermission()) === "granted";
+}
+
+export function osNotify(body: string, onClick: () => void): void {
+  if (!("Notification" in window) || Notification.permission !== "granted") return;
+  const n = new Notification("Puck", { body, silent: true });
+  n.onclick = () => {
+    window.focus();
+    onClick();
+    n.close();
+  };
+}

frontend/src/lib/settings.ts

@@ -0,0 +1,70 @@
+import type { BubbleStyle, SpriteForm } from "../ui/Sprite";
+import { DEFAULT_KOKORO_VOICE, type VoiceEngine, type VoiceMode } from "./voice";
+
+export type Theme = "terrarium" | "candlelight" | "nocturne";
+export type NotifyStyle = "adaptive" | "bubble" | "toast" | "interrupt";
+// off: never. ondemand: only the "Look around" button. ambient: auto, on a slow
+// timer, paused when idle/hidden so the cloud GPU scales to zero (cost-safe).
+export type VisionMode = "off" | "ondemand" | "ambient";
+
+/** Ambient capture interval. Doesn't change cloud cost much (GPU stays warm
+ *  while active regardless) — idle-off is the real saving — but a slower cadence
+ *  is gentler and plenty for a screen that changes on human timescales. */
+export const AMBIENT_INTERVAL_MS = 45_000;
+
+export interface Settings {
+  theme: Theme;
+  accent: string;
+  form: SpriteForm;
+  /** 0..100 — how often Puck wanders and how dense events are. */
+  presence: number;
+  mischief: number;
+  /** Comment typography: fairy serif, plain UI, or handwriting. */
+  voice: BubbleStyle;
+  voiceSound: VoiceMode;
+  /** Which TTS engine: local neural (Kokoro) or the OS voices. */
+  voiceEngine: VoiceEngine;
+  /** Chosen OS (speechSynthesis) voice name; "" = auto-pick a soft english voice. */
+  voiceName: string;
+  /** Chosen Kokoro voice id (e.g. "af_heart", "am_puck"). */
+  kokoroVoice: string;
+  /** Chosen macOS `say` voice name (e.g. "Samantha"); "" = system default. */
+  sayVoice: string;
+  /** Speak the short reaction shouts ("NANI?!", "shipped!") aloud too. */
+  speakShouts: boolean;
+  notify: NotifyStyle;
+  /** Mirror surfaced comments to OS notifications when the tab is hidden. */
+  osNotify: boolean;
+  /** How Puck uses his eyes (vision). Default on-demand: nothing runs unattended. */
+  visionMode: VisionMode;
+}
+
+export const ACCENTS = ["#e7b85c", "#8fcf86", "#e58fa6", "#b89be6", "#6fc6d6"] as const;
+
+export const defaultSettings = (): Settings => ({
+  theme: "terrarium",
+  accent: "#e7b85c",
+  form: "mossling",
+  presence: 62,
+  mischief: 45,
+  voice: "voice",
+  voiceSound: "full", // audible by default (browser autoplay may need one click first)
+  voiceEngine: "say", // Mac-native voice — works in the overlay and the browser demo alike
+  voiceName: "",
+  kokoroVoice: DEFAULT_KOKORO_VOICE,
+  sayVoice: "Samantha",
+  speakShouts: true,
+  notify: "adaptive",
+  osNotify: false,
+  visionMode: "ondemand",
+});
+
+/** Readable ink color for text on top of the accent. */
+export function inkFor(hex: string): string {
+  const h = hex.replace("#", "");
+  const n = parseInt(h.length === 3 ? h.replace(/./g, (c) => c + c) : h, 16);
+  const r = (n >> 16) & 255;
+  const g = (n >> 8) & 255;
+  const b = n & 255;
+  return r * 299 + g * 587 + b * 114 > 150000 ? "#22180a" : "#fff7e8";
+}

frontend/src/lib/storage.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+
+const PREFIX = "puck:";
+
+function load<T>(key: string, fallback: () => T): T {
+  try {
+    const raw = localStorage.getItem(PREFIX + key);
+    if (raw == null) return fallback();
+    // merge over fallback so new fields added later get their defaults
+    const parsed = JSON.parse(raw);
+    const base = fallback();
+    return typeof base === "object" && base !== null && !Array.isArray(base)
+      ? { ...base, ...(parsed as object) }
+      : (parsed as T);
+  } catch (e) {
+    console.error(`puck: failed to load ${key}, using defaults`, e);
+    return fallback();
+  }
+}
+
+/** useState backed by localStorage. `fallback` runs only when nothing is stored. */
+export function usePersistent<T>(key: string, fallback: () => T) {
+  const [value, setValue] = React.useState<T>(() => load(key, fallback));
+  React.useEffect(() => {
+    try {
+      localStorage.setItem(PREFIX + key, JSON.stringify(value));
+    } catch (e) {
+      console.error(`puck: failed to persist ${key}`, e);
+    }
+  }, [key, value]);
+  return [value, setValue] as const;
+}
+
+/** Wipe all of Puck's persisted state (the "forget everything" escape hatch). */
+export function forgetEverything() {
+  for (const k of Object.keys(localStorage)) {
+    if (k.startsWith(PREFIX)) localStorage.removeItem(k);
+  }
+}

frontend/src/lib/tauri.ts

@@ -0,0 +1,154 @@
+// Bridge to the Tauri overlay shell. The overlay window is click-through by
+// default; Rust polls the global cursor and re-enables events only while it's
+// inside one of these rects. The frontend's job: keep Rust's rect list fresh.
+// Everything no-ops outside Tauri (sim in a browser, the Space).
+
+interface HitRect {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+const HIT_SELECTORS = [
+  ".puck",
+  ".bubble",
+  ".toasts",
+  ".comp",
+  ".drop",
+  ".settings",
+  ".interrupt-card",
+  ".bloom-card",
+  // dev-only: vite's error overlay must be clickable or it's undismissable
+  // (anything interactive but unlisted = clicks sail through to apps below)
+  "vite-error-overlay",
+].join(", ");
+
+const PAD = 8; // forgiving edges — a near-miss poke should still land
+
+export function inTauri(): boolean {
+  return "__TAURI_INTERNALS__" in window;
+}
+
+// Best-effort event-source → macOS app name. Imperfect (Claude Code lives in a
+// terminal, "browser" could be any of several) but right for the common cases;
+// easy to refine once we can read the real frontmost app per event.
+const SOURCE_APP: Record<string, string> = {
+  Claude: "Claude",
+  Build: "Terminal",
+  Git: "Terminal",
+  Mail: "Mail",
+  Discord: "Discord",
+  Calendar: "Calendar",
+  Browser: "Safari",
+};
+
+export interface Region {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+/** What a peek yields: the line Puck says + how the patch made him feel (drives the
+ *  sprite gesture). `emotion` is a PeekEmotion string; the engine coerces it. */
+export interface PeekResult {
+  quip: string;
+  emotion: string;
+}
+
+/** Companion loop: Puck peeks at a small region (given in LOGICAL/CSS px — we
+ *  scale to physical here) and Rust returns the daemon's `{quip, emotion}`. Image
+ *  stays native-side; only the short result crosses the IPC. Null outside Tauri or
+ *  on failure (Screen Recording not granted, vision down). */
+export async function peekNative(
+  region: Region,
+  fairyState: { mischief: number; mood: string },
+): Promise<PeekResult | null> {
+  if (!inTauri()) return null;
+  const dpr = window.devicePixelRatio || 1;
+  try {
+    const { invoke } = await import("@tauri-apps/api/core");
+    const json = await invoke<string>("peek", {
+      x: Math.round(region.x * dpr),
+      y: Math.round(region.y * dpr),
+      w: Math.round(region.w * dpr),
+      h: Math.round(region.h * dpr),
+      fairyState,
+    });
+    const r = JSON.parse(json) as { quip?: string; emotion?: string };
+    return r.quip ? { quip: r.quip, emotion: r.emotion ?? "curious" } : null;
+  } catch (e) {
+    console.error("puck: native peek failed (grant Screen Recording?)", e);
+    return null;
+  }
+}
+
+/** Make the overlay the key window so you can type into it (chat). The borderless
+ *  always-on-top overlay never becomes key on its own. No-op outside Tauri. */
+export async function focusWindow(): Promise<void> {
+  if (!inTauri()) return;
+  try {
+    const { invoke } = await import("@tauri-apps/api/core");
+    await invoke("focus_window");
+  } catch (e) {
+    console.error("puck: focus_window failed", e);
+  }
+}
+
+/** Bring the app a notification is about to the front (the "tap to go there"). */
+export async function focusApp(source: string): Promise<void> {
+  if (!inTauri()) return;
+  const app = SOURCE_APP[source];
+  if (!app) return;
+  try {
+    const { invoke } = await import("@tauri-apps/api/core");
+    await invoke("focus_app", { app });
+  } catch (e) {
+    console.error("puck: focus_app failed", e);
+  }
+}
+
+/** Native "look around": Rust captures the real screen and posts it to the daemon
+ *  in the background, returning at once (the ~20s vision inference must not block
+ *  — perceived events arrive via the normal poll). Resolves true once the capture
+ *  is dispatched, false on failure (e.g. Screen Recording not granted). The image
+ *  never crosses the IPC bridge (multi-MB through it crashed WKWebView). */
+export async function lookAroundNative(fairyState: { mischief: number; mood: string }): Promise<boolean> {
+  if (!inTauri()) return false;
+  try {
+    const { invoke } = await import("@tauri-apps/api/core");
+    await invoke("look_around", { fairyState });
+    return true;
+  } catch (e) {
+    console.error("puck: native look-around failed (grant Screen Recording?)", e);
+    return false;
+  }
+}
+
+/** Poll interactive element rects and report them to the Rust cursor poller. */
+export function startHitRectReporter(): () => void {
+  if (!inTauri()) return () => {};
+  let last = "";
+  const iv = setInterval(async () => {
+    const rects: HitRect[] = [...document.querySelectorAll(HIT_SELECTORS)].map((el) => {
+      const r = el.getBoundingClientRect();
+      return {
+        x: Math.round(r.x - PAD),
+        y: Math.round(r.y - PAD),
+        w: Math.round(r.width + PAD * 2),
+        h: Math.round(r.height + PAD * 2),
+      };
+    });
+    const key = JSON.stringify(rects);
+    if (key === last) return; // don't spam IPC when nothing moved
+    last = key;
+    try {
+      const { invoke } = await import("@tauri-apps/api/core");
+      await invoke("set_hit_rects", { rects });
+    } catch (e) {
+      console.error("puck: hit-rect report failed", e);
+    }
+  }, 150);
+  return () => clearInterval(iv);
+}

frontend/src/lib/traces.ts

@@ -0,0 +1,31 @@
+// Ship trace records to the daemon at Night Bloom. Daemon down is normal
+// (Space/demo mode) — buffer in localStorage and retry at the next sleep,
+// so no day's labels are lost to a napping daemon.
+
+import type { TraceRecord } from "../engine";
+
+const BUFFER_KEY = "puck:trace-buffer";
+
+export async function exportTraces(records: TraceRecord[]): Promise<void> {
+  let buffered: TraceRecord[] = [];
+  try {
+    buffered = JSON.parse(localStorage.getItem(BUFFER_KEY) ?? "[]");
+  } catch (e) {
+    console.error("puck: corrupt trace buffer, dropping it", e);
+  }
+  const all = [...buffered, ...records];
+  if (!all.length) return;
+
+  try {
+    const res = await fetch("/api/traces", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ records: all }),
+      signal: AbortSignal.timeout(5000),
+    });
+    if (!res.ok) throw new Error(`daemon rejected traces: ${res.status}`);
+    localStorage.removeItem(BUFFER_KEY);
+  } catch {
+    localStorage.setItem(BUFFER_KEY, JSON.stringify(all));
+  }
+}

frontend/src/lib/useDrag.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+
+export interface Pos {
+  x: number;
+  y: number;
+}
+
+/** Mouse-drag helper shared by windows and panels. Clamps to the viewport. */
+export function useDrag(
+  pos: Pos,
+  onPos: (p: Pos) => void,
+  opts: { minX?: number; minY?: number; marginR?: number; marginB?: number } = {},
+) {
+  const { minX = 4, minY = 30, marginR = 80, marginB = 60 } = opts;
+  // fresh pos for the closure without re-binding listeners mid-drag
+  const ref = React.useRef(pos);
+  ref.current = pos;
+
+  return React.useCallback(
+    (e: React.MouseEvent) => {
+      const sx = e.clientX;
+      const sy = e.clientY;
+      const { x: ox, y: oy } = ref.current;
+      const move = (ev: MouseEvent) => {
+        onPos({
+          x: Math.max(minX, Math.min(window.innerWidth - marginR, ox + ev.clientX - sx)),
+          y: Math.max(minY, Math.min(window.innerHeight - marginB, oy + ev.clientY - sy)),
+        });
+      };
+      const up = () => {
+        window.removeEventListener("mousemove", move);
+        window.removeEventListener("mouseup", up);
+      };
+      window.addEventListener("mousemove", move);
+      window.addEventListener("mouseup", up);
+    },
+    [onPos, minX, minY, marginR, marginB],
+  );
+}

frontend/src/lib/useIdle.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+
+// Idle detection — the gate that makes cloud vision affordable. When the user
+// is away (no input for `thresholdMs`) or the tab is hidden, ambient vision
+// pauses so the Modal GPU scales to zero and bills nothing.
+export function useIdle(thresholdMs = 150_000): boolean {
+  const [idle, setIdle] = React.useState(false);
+  const last = React.useRef(Date.now());
+
+  React.useEffect(() => {
+    const bump = () => {
+      last.current = Date.now();
+      setIdle(false); // wake immediately on activity (React bails if already false)
+    };
+    const events = ["mousemove", "mousedown", "keydown", "wheel", "touchstart"] as const;
+    for (const e of events) window.addEventListener(e, bump, { passive: true });
+
+    const tick = setInterval(() => {
+      setIdle(document.hidden || Date.now() - last.current > thresholdMs);
+    }, 5000);
+
+    return () => {
+      for (const e of events) window.removeEventListener(e, bump);
+      clearInterval(tick);
+    };
+  }, [thresholdMs]);
+
+  return idle;
+}

frontend/src/lib/vision.ts

@@ -0,0 +1,137 @@
+// Puck's eyes. Capture what's on screen, hand it to the vision brain (Modal),
+// which returns wire events that the daemon queues — so the existing poll picks
+// them up and Puck reacts, no special handling here. Vision is just another
+// event source that happens to come from pixels instead of a hook.
+//
+// Sim/Space: snapshot the rendered desktop scene (html-to-image). The overlay's
+// real-screen path (ScreenCaptureKit via Rust) lands later; same /api/brain/see.
+
+import { toPng } from "html-to-image";
+import type { FairyState } from "../engine";
+import { moodFor } from "../engine";
+import { inTauri, lookAroundNative, type PeekResult, peekNative, type Region } from "./tauri";
+
+// Puck's own surfaces — he observes the desktop, not himself. Reading his own
+// feed back through vision would be a hall-of-mirrors (and trains on noise).
+const PUCK_UI = [
+  "puck", // the sprite
+  "comp", // companion (shows his own feed — the worst offender)
+  "bubble",
+  "toasts",
+  "drop", // menu dropdown
+  "settings",
+  "interrupt-wrap",
+  "bloom",
+];
+
+/** Sim: render the fake desktop and crop to the small region Puck is peering at
+ *  (Puck's own UI filtered out). The overlay crops in Rust instead. */
+async function snapshotRegion(region: Region): Promise<string | null> {
+  const root = document.getElementById("root");
+  if (!root) return null;
+  try {
+    const full = await toPng(root, {
+      pixelRatio: 1,
+      filter: (node) => !(node instanceof HTMLElement) || !PUCK_UI.some((c) => node.classList?.contains?.(c)),
+    });
+    const im = new Image();
+    im.src = full;
+    await im.decode();
+    const c = document.createElement("canvas");
+    c.width = region.w;
+    c.height = region.h;
+    const ctx = c.getContext("2d");
+    if (!ctx) return null;
+    ctx.drawImage(im, region.x, region.y, region.w, region.h, 0, 0, region.w, region.h);
+    return c.toDataURL("image/jpeg", 0.85);
+  } catch (e) {
+    console.error("puck: region snapshot failed", e);
+    return null;
+  }
+}
+
+/** Nudge the vision backend awake on load (fire-and-forget). On a hosted Space the
+ *  cloud 12B scales to zero; pinging now means it's warming before the first peek
+ *  (~50-95s out). No-op cost locally (a warm /models call). */
+export function warmVision(): void {
+  void fetch("/api/brain/warm", { method: "POST" }).catch(() => {});
+}
+
+/** The companion loop's eye: peek at the patch under Puck → `{quip, emotion}` (or null).
+ *  Overlay: Rust captures the region + the daemon voices it. Sim: crop the fake
+ *  desktop and POST it. No events, no queue — a line for a bubble + a felt reaction. */
+export async function peekScene(fs: FairyState, region: Region): Promise<PeekResult | null> {
+  const fairyState = { mischief: fs.mischief, mood: moodFor(fs) };
+  if (inTauri()) return peekNative(region, fairyState);
+  const image = await snapshotRegion(region);
+  if (!image) return null;
+  try {
+    const res = await fetch("/api/brain/peek", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ image, fairy_state: fairyState }),
+      signal: AbortSignal.timeout(70000),
+    });
+    if (!res.ok) return null;
+    const r = (await res.json()) as { quip?: string; emotion?: string };
+    return r.quip ? { quip: r.quip, emotion: r.emotion ?? "curious" } : null;
+  } catch {
+    return null;
+  }
+}
+
+/** Snapshot the SIMULATED desktop (sim/Space) to a PNG data URL, with Puck's own
+ *  UI filtered out. The overlay's real-screen path lives in `perceive` (it's
+ *  captured + posted entirely in Rust). */
+async function snapshotScene(): Promise<string | null> {
+  const root = document.getElementById("root");
+  if (!root) return null;
+  return toPng(root, {
+    pixelRatio: 1, // the VLM needs legible content, not retina detail — keep it small
+    filter: (node) => !(node instanceof HTMLElement) || !PUCK_UI.some((c) => node.classList?.contains?.(c)),
+  }).catch((e) => {
+    console.error("puck: scene snapshot failed", e);
+    return null;
+  });
+}
+
+/** Look at the screen; perceived events are queued daemon-side (the existing poll
+ *  delivers them). Returns the count it queued for UI feedback, or **null when vision
+ *  is unavailable** (no endpoint / offline / timeout) — caller treats null distinctly
+ *  ("my eyes are shut") from 0 ("nothing worth a fuss"). Null is graceful by design;
+ *  vision is optional and the sim runs without it. */
+export async function perceive(fs: FairyState): Promise<number | null> {
+  const fairyState = { mischief: fs.mischief, mood: moodFor(fs) };
+
+  // Overlay: Rust captures the real screen AND posts it (background) — the image
+  // never enters the webview. Blank Puck for ~2 frames so he isn't in the shot;
+  // lookAroundNative returns right after the capture (NOT after inference), so the
+  // blank is brief. Perceived events arrive via the poll. 0 = dispatched, null = failed.
+  if (inTauri()) {
+    const html = document.documentElement;
+    html.classList.add("capturing");
+    await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)));
+    try {
+      return (await lookAroundNative(fairyState)) ? 0 : null;
+    } finally {
+      html.classList.remove("capturing");
+    }
+  }
+
+  const image = await snapshotScene();
+  if (!image) return null;
+  try {
+    const res = await fetch("/api/brain/see", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ image, fairy_state: fairyState }),
+      signal: AbortSignal.timeout(70000), // cloud VLM + possible cold start
+    });
+    if (!res.ok) return null; // 503 = no vision endpoint configured; silent like the brain seam
+    // daemon returns { observed, queued, events }; we only surface the queued count
+    const data: unknown = await res.json();
+    return (data as { queued?: number }).queued ?? 0;
+  } catch {
+    return null; // offline / timeout — vision is optional, the sim runs without it
+  }
+}

frontend/src/lib/voice.ts

@@ -0,0 +1,421 @@
+// Puck's voice. Two engines behind one seam:
+//   - kokoro: local neural TTS (kokoro-js, Kokoro-82M ONNX) — runs in WebGPU/wasm
+//     right here in the page; model is fetched once from the HF CDN and cached by
+//     the browser. Genuinely characterful, fully local, works in the Tauri webview
+//     and the HF Space alike.
+//   - browser: OS SpeechSynthesis — instant, zero-download, the fallback when
+//     Kokoro hasn't loaded yet or errors.
+// Gated by the interruption ladder (`speaks`) and shaped by mood + reaction.
+// This module is the ONLY audio producer — callers never touch an engine directly.
+
+import type { KokoroTTS } from "kokoro-js";
+import type { Mood, ReactionKind } from "../engine";
+
+export type VoiceMode = "off" | "whisper" | "full";
+// browser = OS speechSynthesis · kokoro = local neural · say = macOS `say` via the
+// daemon (the only thing that works in the WKWebView overlay — it plays Mac-side).
+export type VoiceEngine = "browser" | "kokoro" | "say";
+export type VoiceChannel = "interrupt" | "bubble" | "toast" | "reaction";
+
+// ---- browser (OS) voices ----------------------------------------------------
+let voices: SpeechSynthesisVoice[] = [];
+let chosen: SpeechSynthesisVoice | null = null;
+
+const PREFERRED = [
+  "Samantha",
+  "Karen",
+  "Moira",
+  "Tessa",
+  "Fiona",
+  "Google UK English Female",
+  "Google US English",
+];
+
+function refresh() {
+  if (!("speechSynthesis" in window)) return;
+  voices = window.speechSynthesis.getVoices() || [];
+  chosen =
+    PREFERRED.map((n) => voices.find((v) => v.name === n)).find(Boolean) ??
+    voices.find((v) => /en[-_]/i.test(v.lang) && /female/i.test(v.name)) ??
+    voices.find((v) => /en[-_]/i.test(v.lang)) ??
+    voices[0] ??
+    null;
+}
+if (typeof window !== "undefined" && "speechSynthesis" in window) {
+  refresh();
+  window.speechSynthesis.onvoiceschanged = refresh;
+}
+
+/** OS voices for the Settings picker (english first). */
+export function listVoices(): { name: string; lang: string }[] {
+  return [...voices]
+    .sort((a, b) => Number(/en/i.test(b.lang)) - Number(/en/i.test(a.lang)))
+    .map((v) => ({ name: v.name, lang: v.lang }));
+}
+function voiceByName(name?: string): SpeechSynthesisVoice | null {
+  if (!name) return chosen;
+  return voices.find((v) => v.name === name) ?? chosen;
+}
+
+// ---- kokoro (neural) voices -------------------------------------------------
+// Curated subset of Kokoro's voices that suit a small, bright familiar.
+export const KOKORO_VOICES = [
+  { id: "af_heart", label: "Heart · warm" },
+  { id: "af_bella", label: "Bella · bright" },
+  { id: "af_nicole", label: "Nicole · soft" },
+  { id: "af_aoede", label: "Aoede · gentle" },
+  { id: "af_sky", label: "Sky · light" },
+  { id: "af_jessica", label: "Jessica · airy" },
+  { id: "bf_emma", label: "Emma · british" },
+  { id: "am_puck", label: "Puck · playful" },
+] as const;
+export const DEFAULT_KOKORO_VOICE = "af_heart";
+
+let kokoro: KokoroTTS | null = null;
+let kokoroPromise: Promise<KokoroTTS> | null = null;
+
+export function kokoroReady(): boolean {
+  return kokoro !== null;
+}
+
+// Only run neural TTS where WebGPU exists. Chromium-on-Mac has it; the Tauri
+// overlay's WKWebView does NOT — and loading transformers.js + the model there
+// crashed WebKit's content process. So gate Kokoro on WebGPU and let those
+// environments use the OS voice instead of a crash.
+export function kokoroSupported(): boolean {
+  return typeof navigator !== "undefined" && "gpu" in navigator;
+}
+
+/** Lazy-load the model (code-split + fetched once, cached by the browser). */
+export function loadKokoro(
+  onProgress?: (p: { progress?: number; status?: string }) => void,
+): Promise<KokoroTTS> {
+  if (kokoro) return Promise.resolve(kokoro);
+  if (!kokoroPromise) {
+    kokoroPromise = (async () => {
+      const { KokoroTTS } = await import("kokoro-js");
+      const device = "gpu" in navigator ? "webgpu" : "wasm";
+      const tts = await KokoroTTS.from_pretrained("onnx-community/Kokoro-82M-v1.0-ONNX", {
+        dtype: device === "webgpu" ? "fp32" : "q8", // fp32 only when the GPU can carry it
+        device,
+        progress_callback: onProgress as never,
+      });
+      kokoro = tts;
+      return tts;
+    })().catch((e) => {
+      kokoroPromise = null; // let a later attempt retry
+      throw e;
+    });
+  }
+  return kokoroPromise;
+}
+
+// the single in-flight neural clip, so cancel/mute can stop it mid-sentence
+let currentAudio: HTMLAudioElement | null = null;
+function stopKokoro() {
+  if (currentAudio) {
+    currentAudio.pause();
+    currentAudio = null;
+  }
+}
+
+async function speakKokoro(
+  text: string,
+  {
+    voiceName,
+    speed,
+    onStart,
+    onEnd,
+  }: { voiceName?: string; speed: number; onStart?: () => void; onEnd?: () => void },
+): Promise<boolean> {
+  try {
+    const tts = await loadKokoro();
+    const audio = await tts.generate(text, { voice: (voiceName || DEFAULT_KOKORO_VOICE) as never, speed });
+    const url = URL.createObjectURL(audio.toBlob());
+    stopKokoro();
+    const el = new Audio(url);
+    currentAudio = el;
+    el.onplay = () => onStart?.();
+    const done = () => {
+      onEnd?.();
+      URL.revokeObjectURL(url);
+      if (currentAudio === el) currentAudio = null;
+    };
+    el.onended = done;
+    el.onerror = done;
+    await el.play();
+    return true;
+  } catch (e) {
+    // model still downloading, webgpu hiccup, autoplay block — fall back to the OS voice
+    console.error("puck: kokoro tts failed → browser fallback", e);
+    return false;
+  }
+}
+
+// ---- native macOS voice (daemon `say`) --------------------------------------
+// Plays on the Mac itself, so it works in the WKWebView overlay where browser
+// audio is dead. The endpoint blocks until speech ends (or is superseded), so
+// the fetch resolving == speech finished — good enough to drive the animation.
+let sayAbort: AbortController | null = null;
+
+async function sayViaDaemon(
+  text: string,
+  {
+    voice,
+    rate,
+    pitch,
+    onStart,
+    onEnd,
+  }: { voice?: string; rate: number; pitch?: number; onStart?: () => void; onEnd?: () => void },
+): Promise<boolean> {
+  try {
+    sayAbort?.abort();
+    sayAbort = new AbortController();
+    onStart?.();
+    // macOS `say` has no pitch flag, but honors an inline [[pbas N]] (pitch baseline).
+    // Map our ~0.6–1.8 pitch onto it so the overlay's native voice carries emotion too
+    // (~50 ≈ neutral). The daemon passes text straight to `say`, so the command runs.
+    const shaped =
+      pitch && pitch !== 1
+        ? `[[pbas ${Math.round(Math.max(30, Math.min(92, 50 * pitch)))}]] ${text}`
+        : text;
+    const res = await fetch("/api/voice/say", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      // rate as words-per-minute (say's -r); 175 ≈ default cadence
+      body: JSON.stringify({ text: shaped, voice: voice || undefined, rate: Math.round(175 * rate) }),
+      signal: sayAbort.signal,
+    });
+    onEnd?.();
+    return res.ok; // 501 (non-mac) / offline → caller falls back to browser TTS
+  } catch {
+    onEnd?.(); // aborted (superseded) or daemon down
+    return false;
+  }
+}
+
+function stopSay() {
+  sayAbort?.abort();
+  void fetch("/api/voice/stop", { method: "POST" }).catch(() => {});
+}
+
+type SayVoice = { id: string; lang: string };
+let sayVoiceCache: SayVoice[] | null = null;
+/** macOS `say` voices for the Settings picker (fetched once from the daemon). */
+export async function sayVoices(): Promise<SayVoice[]> {
+  if (sayVoiceCache) return sayVoiceCache;
+  let list: SayVoice[] = [];
+  try {
+    const res = await fetch("/api/voice/voices", { signal: AbortSignal.timeout(4000) });
+    if (res.ok) list = ((await res.json()) as { voices?: SayVoice[] }).voices ?? [];
+  } catch {
+    /* daemon down / non-mac — no native voices to list */
+  }
+  sayVoiceCache = list;
+  return list;
+}
+
+// ---- shared shaping ---------------------------------------------------------
+const clean = (t: string) =>
+  t
+    .replace(/[\u{1F000}-\u{1FAFF}\u{2600}-\u{27BF}←-⇿✦✕▸◷◍❍☾⎇♪]/gu, "")
+    .replace(/\s+/g, " ")
+    .trim();
+
+// A spoken notification is a glance, not a paragraph: the bubble keeps the full
+// (sometimes mythic, two-sentence) line, but speech takes just the first sentence,
+// capped, so `say` doesn't read a whole monologue. Shouts are already short → no-op.
+function concise(t: string, maxWords = 13): string {
+  const first = t.split(/(?<=[.!?])\s+/)[0]?.trim() || t.trim();
+  const words = first.split(/\s+/);
+  return words.length <= maxWords ? first : `${words.slice(0, maxWords).join(" ")}…`;
+}
+
+/** Should this channel speak under this mode? */
+export function speaks(mode: VoiceMode, channel: VoiceChannel): boolean {
+  if (mode === "off") return false;
+  if (mode === "whisper") return channel === "interrupt";
+  return true; // full
+}
+
+// Mood sets the baseline delivery; a reaction layers a short emotional tilt on top.
+const MOOD_DELIVERY: Record<Mood, { rate: number; pitch: number }> = {
+  curious: { rate: 1.0, pitch: 1.05 },
+  mischief: { rate: 1.12, pitch: 1.22 },
+  sleepy: { rate: 0.84, pitch: 0.9 },
+  proud: { rate: 0.98, pitch: 1.0 },
+  grumpy: { rate: 0.95, pitch: 0.92 },
+};
+const REACTION_TILT: Partial<Record<ReactionKind, { rate: number; pitch: number }>> = {
+  nani: { rate: 0.18, pitch: 0.28 }, // startled, fast and high (confusion)
+  celebrate: { rate: 0.06, pitch: 0.16 },
+  perk: { rate: 0.02, pitch: 0.12 },
+  dance: { rate: 0.1, pitch: 0.2 },
+  laugh: { rate: 0.12, pitch: 0.25 }, // bright, giddy (amusement)
+  fret: { rate: 0.16, pitch: 0.16 }, // quick, tense (the human's upset)
+  sad: { rate: -0.22, pitch: -0.24 }, // slow, low, heavy (wistful)
+  shrug: { rate: -0.12, pitch: -0.12 },
+  sulk: { rate: -0.16, pitch: -0.16 },
+};
+
+export interface SpeakOpts {
+  mood?: Mood;
+  mischief?: number;
+  mode?: VoiceMode;
+  channel?: VoiceChannel;
+  /** Layer a reaction's emotional tilt onto the mood baseline. */
+  reaction?: ReactionKind;
+  engine?: VoiceEngine;
+  /** Voice id/name for the active engine; falls back to that engine's default. */
+  voiceName?: string;
+  onStart?: () => void;
+  onEnd?: () => void;
+}
+
+function browserSpeak(
+  text: string,
+  o: {
+    rate: number;
+    pitch: number;
+    mode: VoiceMode;
+    channel: VoiceChannel;
+    voiceName?: string;
+    onStart?: () => void;
+    onEnd?: () => void;
+  },
+): boolean {
+  if (!("speechSynthesis" in window)) {
+    o.onEnd?.();
+    return false;
+  }
+  try {
+    window.speechSynthesis.cancel();
+    const u = new SpeechSynthesisUtterance(clean(text));
+    const v = voiceByName(o.voiceName);
+    if (v) u.voice = v;
+    u.rate = o.rate;
+    u.pitch = o.pitch;
+    u.volume =
+      o.channel === "interrupt" ? (o.mode === "whisper" ? 0.5 : 0.95) : o.channel === "reaction" ? 0.7 : 0.6;
+    u.onstart = () => o.onStart?.();
+    u.onend = () => o.onEnd?.();
+    u.onerror = () => o.onEnd?.();
+    window.speechSynthesis.speak(u);
+    return true;
+  } catch {
+    o.onEnd?.();
+    return false;
+  }
+}
+
+export function speakAloud(
+  text: string,
+  {
+    mood = "curious",
+    mischief = 45,
+    mode = "whisper",
+    channel = "bubble",
+    reaction,
+    engine = "browser",
+    voiceName,
+    onStart,
+    onEnd,
+  }: SpeakOpts = {},
+): boolean {
+  if (!speaks(mode, channel)) {
+    onEnd?.();
+    return false;
+  }
+  const base = MOOD_DELIVERY[mood];
+  const tilt = (reaction && REACTION_TILT[reaction]) || { rate: 0, pitch: 0 };
+  const rate = Math.max(0.6, Math.min(1.6, base.rate + tilt.rate));
+  const pitch = Math.max(0.6, Math.min(1.8, base.pitch + tilt.pitch + (mischief - 45) / 300));
+  // the displayed bubble keeps the full line; speech gets the trimmed form
+  const spoken = concise(clean(text));
+
+  if (engine === "say") {
+    // Mac-side native voice (the overlay's only working path). Fall back to
+    // browser TTS if the daemon is down / not macOS.
+    void sayViaDaemon(spoken, { voice: voiceName, rate, pitch, onStart, onEnd }).then((ok) => {
+      if (!ok) browserSpeak(spoken, { rate, pitch, mode, channel, onStart, onEnd });
+    });
+    return true;
+  }
+  if (engine === "kokoro" && kokoroSupported()) {
+    const speed = Math.max(0.7, Math.min(1.4, rate)); // Kokoro has no pitch knob — voice + speed carry it
+    void speakKokoro(spoken, { voiceName, speed, onStart, onEnd }).then((ok) => {
+      if (!ok) browserSpeak(spoken, { rate, pitch, mode, channel, onStart, onEnd }); // graceful degrade
+    });
+    return true;
+  }
+  // browser engine, or Kokoro unsupported here (e.g. the WKWebView overlay).
+  // Only forward voiceName for the real browser engine — a Kokoro id ("af_heart")
+  // means nothing to the OS, so let it auto-pick.
+  return browserSpeak(spoken, {
+    rate,
+    pitch,
+    mode,
+    channel,
+    voiceName: engine === "browser" ? voiceName : undefined,
+    onStart,
+    onEnd,
+  });
+}
+
+// Browsers block programmatic audio until the user has interacted with the page.
+// Neural speech `await`s model-load + inference, so by the time it calls play()
+// the gesture is long gone → NotAllowedError. Fix: on the FIRST real interaction,
+// play a silent clip — that grants the page sticky activation, so every later
+// (event-driven, gesture-less) utterance is allowed. Idempotent.
+let unlocked = false;
+export function unlockAudio(): void {
+  if (unlocked) return;
+  unlocked = true;
+  try {
+    const a = new Audio("data:audio/wav;base64,UklGRiQAAABXQVZFZm10IBAAAAABAAEARKwAAIhYAQACABAAZGF0YQAAAAA=");
+    a.muted = true;
+    void a.play().catch(() => {});
+  } catch {
+    /* no Audio — neural path will just fall back to speechSynthesis */
+  }
+}
+
+function browserPreview(text: string, voiceName?: string): void {
+  if (!("speechSynthesis" in window)) return;
+  window.speechSynthesis.cancel();
+  const u = new SpeechSynthesisUtterance(text);
+  const v = voiceByName(voiceName);
+  if (v) u.voice = v;
+  u.pitch = 1.15;
+  u.rate = 1.02;
+  window.speechSynthesis.speak(u);
+}
+
+/** Audition a voice in Settings — bypasses the mode gate (it's an explicit tap). */
+export function previewVoice(engine: VoiceEngine, voiceName?: string): void {
+  const text = "Hello — I'm Puck. I'll keep an eye on things.";
+  if (engine === "say") {
+    void sayViaDaemon(text, { voice: voiceName, rate: 1.0 }).then((ok) => {
+      if (!ok) browserPreview(text);
+    });
+    return;
+  }
+  if (engine === "kokoro" && kokoroSupported()) {
+    // fall back to the OS voice if the model is still downloading or errors
+    void speakKokoro(text, { voiceName, speed: 1.05 }).then((ok) => {
+      if (!ok) browserPreview(text);
+    });
+    return;
+  }
+  browserPreview(text, engine === "browser" ? voiceName : undefined);
+}
+
+export function cancelSpeech() {
+  stopKokoro();
+  stopSay();
+  try {
+    window.speechSynthesis?.cancel();
+  } catch {
+    /* no speech engine — nothing to cancel */
+  }
+}

frontend/src/main.tsx

@@ -0,0 +1,22 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { installDebugLog } from "./lib/debuglog";
+import { SimApp } from "./modes/sim/SimApp";
+import "./styles/base.css";
+import "./styles/ui.css";
+
+installDebugLog(); // overlay console → daemon log (the WKWebView inspector is unusable)
+
+const root = document.getElementById("root");
+if (!root) throw new Error("no #root element");
+
+// ?mode=overlay → transparent shell over the real desktop; running inside the
+// Tauri shell implies overlay. Default (browser/Space) → sim.
+const overlay =
+  new URLSearchParams(location.search).get("mode") === "overlay" || "__TAURI_INTERNALS__" in window;
+
+createRoot(root).render(
+  <StrictMode>
+    <SimApp overlay={overlay} />
+  </StrictMode>,
+);

frontend/src/modes/sim/SimApp.tsx

@@ -0,0 +1,1021 @@
+// Puck — app orchestration. The living loop: events spawn,
+// Puck flies, scores, decides, comments, learns, sleeps.
+
+import * as React from "react";
+import {
+  applyMode,
+  buildTraces,
+  clamp,
+  type Decision,
+  decide,
+  defaultState,
+  defaultTaste,
+  EVENTS,
+  type EventDef,
+  type FairyStat,
+  type FairyState,
+  type FeedItem,
+  hhmm,
+  Learn,
+  learn as learnTaste,
+  type Memory,
+  type MemorySeed,
+  moodFor,
+  type NightBloomResult,
+  nightBloom,
+  type OutcomeType,
+  outcomeRating,
+  type PuckMode,
+  asPeekEmotion,
+  type Rating,
+  type Reaction,
+  type ReactionKind,
+  rateFairy,
+  reactionForEmotion,
+  reactionForEvent,
+  reactionForRating,
+  type SurfaceOutcome,
+  score,
+  seedMemories,
+  shuffle,
+  speak,
+  summonReaction,
+} from "../../engine";
+import { startDaemonPoll } from "../../lib/daemon";
+import { fetchBloom } from "../../lib/memories";
+import { fetchMoltStatus, type MoltStatus } from "../../lib/molt";
+import { osNotify } from "../../lib/notify";
+import { defaultSettings, inkFor, type Settings } from "../../lib/settings";
+import { usePersistent } from "../../lib/storage";
+import { focusApp, startHitRectReporter } from "../../lib/tauri";
+import { exportTraces } from "../../lib/traces";
+import type { Pos } from "../../lib/useDrag";
+import { useIdle } from "../../lib/useIdle";
+import { peekScene, warmVision } from "../../lib/vision";
+import {
+  cancelSpeech,
+  kokoroSupported,
+  loadKokoro,
+  speakAloud,
+  unlockAudio,
+  type VoiceChannel,
+  type VoiceEngine,
+} from "../../lib/voice";
+import { type ChatMsg, Companion, type CompanionTab, type MemoryAction } from "../../ui/Companion";
+import {
+  applyEffect,
+  DesktopWindows,
+  Dock,
+  type DockApp,
+  initialWinState,
+  MenuBar,
+  type WinState,
+} from "../../ui/Desktop";
+import {
+  Interrupt,
+  type InterruptData,
+  MenuDropdown,
+  NightBloom,
+  type OfferData,
+  type ToastItem,
+  Toasts,
+} from "../../ui/Overlays";
+import { SettingsPanel } from "../../ui/SettingsPanel";
+import { Bubble, type BubbleData, PuckSprite, type SpriteState } from "../../ui/Sprite";
+
+const MOOD_LABEL = {
+  curious: "curious",
+  mischief: "feeling mischievous",
+  sleepy: "drowsy",
+  proud: "proud",
+  grumpy: "grumpy",
+} as const;
+
+let UID = 0;
+const uid = () => `u${Date.now().toString(36)}-${++UID}`;
+
+// "tap to open" in the sim: source → which sim window to focus (the overlay uses
+// the native focusApp instead). Best-effort; not every source has a window.
+const SOURCE_WINDOW: Record<string, string> = {
+  Claude: "claude",
+  Build: "terminal",
+  Git: "terminal",
+  Mail: "mail",
+  Discord: "discord",
+  Calendar: "calendar",
+};
+
+const initialPositions = (): Record<string, Pos> => ({
+  claude: { x: 40, y: 60 },
+  terminal: { x: 40, y: 392 },
+  mail: { x: 486, y: 64 },
+  discord: { x: 486, y: 408 },
+  calendar: { x: 300, y: 300 },
+});
+
+type Channel = "feed" | "glow" | "bubble" | "toast" | "interrupt";
+
+// Decision→channel stays in the orchestrator on purpose: the engine ranks importance
+// (the Decision ladder); how that lands on screen is a presentation policy per shell
+// (sim bubble today, native notification in the Tauri overlay later).
+
+function channelFor(decision: Decision, notify: Settings["notify"]): Channel {
+  if (decision === "ignore" || decision === "scroll") return "feed";
+  if (decision === "glow") return "glow";
+  // notify or interrupt
+  if (notify === "interrupt") return "interrupt";
+  if (notify === "toast") return "toast";
+  if (notify === "bubble") return "bubble";
+  // adaptive: Puck decides
+  return decision === "interrupt" ? "interrupt" : "bubble";
+}
+
+// One organism, two habitats: the sim renders a fake desktop and spawns deck
+// events; the overlay renders transparent over the REAL desktop and only
+// real daemon events fire. Same engine, same learning, same creature.
+export function SimApp({ overlay = false }: { overlay?: boolean } = {}) {
+  // ---- persisted creature state -------------------------------------------
+  const [settings, setSettings] = usePersistent<Settings>("settings", defaultSettings);
+  const [fs, setFs] = usePersistent<FairyState>("fairy", defaultState);
+  const [taste, setTaste] = usePersistent("taste", defaultTaste);
+  const [profile, setProfile] = usePersistent("profile", Learn.defaultProfile);
+  const [memories, setMemories] = usePersistent<Memory[]>("memories", seedMemories);
+  const [feed, setFeed] = usePersistent<FeedItem[]>("feed", () => []);
+  // chat tab removed; setChat is still written by wake/offers (dormant, unshown)
+  const [, setChat] = usePersistent<ChatMsg[]>("chat", () => []);
+
+  // ---- ephemeral scene state -----------------------------------------------
+  const [positions, setPositions] = React.useState(initialPositions);
+  const [focused, setFocused] = React.useState<string | null>(null);
+  const [attnId, setAttnId] = React.useState<string | null>(null);
+  const [winState, setWinState] = React.useState<WinState>(initialWinState);
+
+  const [sprite, setSprite] = React.useState<SpriteState>({
+    x: 250,
+    y: 470,
+    flying: false,
+    resting: true,
+    facing: "right",
+  });
+  const [speaking, setSpeaking] = React.useState(false);
+  const [reaction, setReaction] = React.useState<{ kind: ReactionKind; shout?: string } | null>(null);
+  // monotonic — bumped on every reaction so the sprite restarts the animation
+  // even when the same gesture fires twice (back-to-back pushes still pop)
+  const [reactKey, setReactKey] = React.useState(0);
+  const [offer, setOffer] = React.useState<OfferData | null>(null);
+  const [bubble, setBubble] = React.useState<BubbleData | null>(null);
+  const [toasts, setToasts] = React.useState<ToastItem[]>([]);
+  const [interrupt, setInterrupt] = React.useState<InterruptData | null>(null);
+  const [sleeping, setSleeping] = React.useState<NightBloomResult | null>(null);
+  // real molt progress for the sleep screen (+ tonight's exported count); null = daemon down
+  const [molt, setMolt] = React.useState<(MoltStatus & { exported: number }) | null>(null);
+
+  const [companion, setCompanion] = React.useState(!overlay);
+  const [compTab, setCompTab] = React.useState<CompanionTab>("learn");
+  const [compPos, setCompPos] = React.useState<Pos>({ x: window.innerWidth - 404, y: 64 });
+  const [settingsOpen, setSettingsOpen] = React.useState(false);
+  const [settingsPos, setSettingsPos] = React.useState<Pos>({ x: window.innerWidth - 404, y: 400 });
+  const [dropdown, setDropdown] = React.useState(false);
+  const [muted, setMuted] = React.useState(false);
+  // camo: after sitting still a while Puck blends into the desktop (glassy/transparent
+  // skin); he snaps back the instant he acts. Pure ambient charm.
+  const [camo, setCamo] = React.useState(false);
+  const [mode, setMode] = React.useState<PuckMode>("patrol");
+  const [pulse, setPulse] = React.useState(0);
+  const [badge, setBadge] = React.useState(0);
+  const [clock, setClock] = React.useState(hhmm());
+
+  const mood = moodFor(fs);
+  const setSetting = <K extends keyof Settings>(key: K, value: Settings[K]) =>
+    setSettings((s) => ({ ...s, [key]: value }));
+
+  // ---- apply theme / accent / mood to <html> -------------------------------
+  React.useEffect(() => {
+    document.documentElement.dataset.theme = settings.theme;
+  }, [settings.theme]);
+  // biome-ignore lint/correctness/useExhaustiveDependencies: overlay never changes at runtime
+  React.useEffect(() => {
+    document.documentElement.classList.toggle("overlay", overlay);
+    // wake the (possibly cold, scale-to-zero) cloud vision before the first peek; in the
+    // browser sim, greet with a one-line "waking" intro so a first-time visitor (a judge
+    // on the hosted Space) knows the lull is Puck stretching, not a hang.
+    warmVision();
+    if (!overlay) {
+      const s = R.current.sprite;
+      setBubble({
+        uid: uid(),
+        source: "",
+        text: "mmf… give me a moment to wake up ✨",
+        tier: "playful",
+        tags: ["warm"],
+        x: s.x,
+        y: s.y,
+        ratable: false,
+      });
+    }
+    return startHitRectReporter();
+  }, []);
+  React.useEffect(() => {
+    const r = document.documentElement.style;
+    r.setProperty("--accent", settings.accent);
+    r.setProperty("--accent-ink", inkFor(settings.accent));
+  }, [settings.accent]);
+  React.useEffect(() => {
+    const c = document.documentElement.classList;
+    for (const m of ["curious", "mischief", "sleepy", "proud", "grumpy"]) c.remove(`mood-${m}`);
+    c.add(`mood-${sleeping ? "sleepy" : mood}`);
+  }, [mood, sleeping]);
+  // the mischief setting is the same dial as the fairy's mischief stat
+  React.useEffect(() => {
+    setFs((p) => (p.mischief === settings.mischief ? p : { ...p, mischief: settings.mischief }));
+  }, [settings.mischief, setFs]);
+  React.useEffect(() => {
+    const i = setInterval(() => setClock(hhmm()), 10000);
+    return () => clearInterval(i);
+  }, []);
+  // Heal a profile persisted before a source (e.g. Git) was added — otherwise the
+  // Learning tab indexes a missing profile.sources[id] and the render throws.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: one-shot migration on mount
+  React.useEffect(() => {
+    setProfile((p) => Learn.ensureSources(p));
+    // one-time: wipe the pre-companion-mode feed (old "CLAUDE … notified" alert
+    // entries are confusing cruft now that Puck only roams + quips)
+    if (!localStorage.getItem("puck:companion-reset")) {
+      localStorage.setItem("puck:companion-reset", "1");
+      setFeed([]);
+    }
+  }, []);
+  // On the first real interaction: unlock audio (so later gesture-less speech can
+  // play past the autoplay gate) and warm the neural model so the first utterance
+  // isn't a cold ~80MB wait. Fires once, then detaches.
+  React.useEffect(() => {
+    const onFirst = () => {
+      unlockAudio();
+      const s = R.current.settings;
+      // only warm the neural model where WebGPU exists — never in the WKWebView overlay
+      if (s.voiceEngine === "kokoro" && s.voiceSound !== "off" && kokoroSupported()) void loadKokoro();
+      window.removeEventListener("pointerdown", onFirst);
+      window.removeEventListener("keydown", onFirst);
+    };
+    window.addEventListener("pointerdown", onFirst);
+    window.addEventListener("keydown", onFirst);
+    return () => {
+      window.removeEventListener("pointerdown", onFirst);
+      window.removeEventListener("keydown", onFirst);
+    };
+  }, []);
+
+  // refs so the interval reads fresh values
+  const R = React.useRef({
+    fs,
+    taste,
+    mode,
+    settings,
+    sleeping,
+    bubble,
+    interrupt,
+    profile,
+    companion,
+    sprite,
+    muted,
+  });
+  R.current = { fs, taste, mode, settings, sleeping, bubble, interrupt, profile, companion, sprite, muted };
+
+  // ---- voice ---------------------------------------------------------------
+  const sayAloud = (text: string, channel: VoiceChannel, reaction?: ReactionKind) => {
+    const cur = R.current;
+    if (cur.muted) return; // muted Puck still emotes, just silently
+    // the overlay is a WKWebView — only the Mac-native `say` path makes sound there
+    const engine: VoiceEngine = overlay ? "say" : cur.settings.voiceEngine;
+    const voiceName =
+      engine === "kokoro"
+        ? cur.settings.kokoroVoice
+        : engine === "say"
+          ? cur.settings.sayVoice
+          : cur.settings.voiceName;
+    speakAloud(text, {
+      mood: moodFor(cur.fs),
+      mischief: cur.fs.mischief,
+      mode: cur.settings.voiceSound,
+      channel,
+      reaction,
+      engine,
+      voiceName,
+      onStart: () => setSpeaking(true),
+      onEnd: () => setSpeaking(false),
+    });
+  };
+
+  // ---- reactions (the visible personality layer) ---------------------------
+  const reactTimer = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const react = (rx: Reaction) => {
+    uncamo(); // any gesture snaps him out of hiding
+    setReactKey((k) => k + 1);
+    setReaction({ kind: rx.kind, shout: rx.shout });
+    // speak the shout too (a bubble/interrupt sentence ~760ms later cancels and
+    // supersedes it — so feed-only glances get the shout as their only audio)
+    if (rx.shout && R.current.settings.speakShouts) sayAloud(rx.shout, "reaction", rx.kind);
+    clearTimeout(reactTimer.current);
+    reactTimer.current = setTimeout(() => setReaction(null), rx.ms);
+  };
+  // short-term memory of what just happened, so a recurring event reads as
+  // "not again" rather than fresh delight. 2-min window; id-keyed.
+  const recent = React.useRef<{ id: string; t: number }[]>([]);
+  const repeatsOf = (id: string): number => {
+    const now = Date.now();
+    const live = recent.current.filter((e) => now - e.t < 120_000);
+    recent.current = [...live, { id, t: now }].slice(-30);
+    return live.filter((e) => e.id === id).length;
+  };
+
+  // ---- sprite flight -------------------------------------------------------
+  const flyTimer = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const flyTo = (x: number, y: number, after?: () => void) => {
+    uncamo(); // he can't fly while blended in — reveal, then move
+    setSprite((s) => ({ ...s, x, y, flying: true, resting: false, facing: x < s.x ? "left" : "right" }));
+    clearTimeout(flyTimer.current);
+    flyTimer.current = setTimeout(() => {
+      setSprite((s) => ({ ...s, flying: false, resting: true }));
+      after?.();
+    }, 760);
+  };
+  const winCenter = (id: string): Pos => {
+    const el = document.getElementById(`win-${id}`);
+    if (!el) return { x: window.innerWidth / 2, y: window.innerHeight / 2 };
+    const r = el.getBoundingClientRect();
+    return { x: r.left + r.width / 2, y: r.top + 18 };
+  };
+
+  // ---- fire one event ------------------------------------------------------
+  const queue = React.useRef<EventDef[]>([]);
+  const nextEvent = (): EventDef => {
+    if (!queue.current.length) queue.current = shuffle(EVENTS.slice());
+    const ev = queue.current.pop();
+    if (!ev) throw new Error("empty event deck");
+    return ev;
+  };
+
+  const fireEvent = (forced?: EventDef) => {
+    const cur = R.current;
+    if (cur.sleeping) return;
+    const ev = forced ?? nextEvent();
+
+    // an accepted automation covers this exact event? Puck handles it silently.
+    // (scoped per-event: a @mention still escapes the muted bog)
+    const auto = Learn.handlesEvent(cur.profile, ev.source, ev.id);
+    if (auto) {
+      setWinState((w) => applyEffect(w, ev.effect));
+      const item: FeedItem = {
+        uid: uid(),
+        id: ev.id,
+        source: ev.source,
+        say: `Handled it for you — ${auto.done}.`,
+        tier: "plain",
+        tags: ["useful"],
+        decision: "handled",
+        time: hhmm(),
+        rating: null,
+      };
+      setFeed((f) => [item, ...f].slice(0, 60));
+      if (ev.target) {
+        const t = winCenter(ev.target);
+        flyTo(t.x, t.y, () => setTimeout(() => setAttnId(null), 1000));
+      }
+      return;
+    }
+
+    const s = score(ev, cur.fs);
+    let decision = decide(s);
+    // LEARNED: shift the decision by what Puck knows about this source
+    decision = Learn.applyBias(decision, Learn.sourceBias(cur.profile, ev.source));
+    decision = applyMode(decision, cur.mode);
+
+    // mutate the relevant window
+    setWinState((w) => applyEffect(w, ev.effect));
+    if (ev.target) setAttnId(ev.target);
+
+    const v = speak(ev, cur.fs, cur.taste);
+    // emote about it even when there are no words — Puck reacting to everything
+    // on screen is the "marginally useful, always alive" character
+    react(reactionForEvent(ev, { repeats: repeatsOf(ev.id), mischief: cur.fs.mischief }));
+    // muted = stay watching but go quiet: everything drops to the feed, no popups
+    let channel = cur.muted ? "feed" : channelFor(decision, cur.settings.notify);
+    // the overlay has no sim windows to anchor a speech bubble to — surface every
+    // notification as a corner toast (tap to open / fling to swat), never a bubble
+    if (overlay && channel === "bubble") channel = "toast";
+    const item: FeedItem = {
+      uid: uid(),
+      id: ev.id,
+      source: ev.source,
+      say: v.text,
+      tier: v.tier,
+      tags: v.tags,
+      decision,
+      time: hhmm(),
+      rating: null,
+      channel,
+    };
+    setFeed((f) => [item, ...f].slice(0, 60));
+    // surfaced channels get an engagement clock; how (and whether) the user
+    // resolves them becomes a training label at Night Bloom
+    if (channel === "bubble" || channel === "toast" || channel === "interrupt") markSurfaced(item.uid);
+
+    const target = ev.target
+      ? winCenter(ev.target)
+      : { x: 200 + Math.random() * 400, y: 200 + Math.random() * 200 };
+
+    if (channel === "feed") {
+      // a glance, no words
+      if (ev.target) flyTo(target.x, target.y, () => setTimeout(() => setAttnId(null), 1400));
+      else setAttnId(null);
+      return;
+    }
+    if (channel === "glow") {
+      flyTo(target.x, target.y);
+      if (!cur.companion) setBadge((b) => b + 1);
+      setTimeout(() => setAttnId(null), 2600);
+      return;
+    }
+    if (channel === "interrupt") {
+      // Overlay: no screen takeover. Puck demands attention with a big "summon"
+      // dance + a (non-blocking) toast, not a modal — user feedback: a dance beats
+      // taking over the screen. The sim keeps the modal (its "take me there" can
+      // focus a sim window; the overlay can't focus real apps yet).
+      if (overlay) {
+        // dance in the open space just LEFT of the toast stack (top:34 right:12
+        // w:330), not under it — he was flying into the notifications and hiding
+        flyTo(window.innerWidth - 420, 96);
+        react(summonReaction());
+        setToasts((ts) => [...ts, { uid: item.uid, source: ev.source, say: v.text }]);
+        if (!cur.companion) setBadge((b) => b + 1);
+        mirrorToOs(item.uid, v.text);
+        sayAloud(v.text, "interrupt"); // interrupt channel speaks even in whisper
+        setTimeout(() => setAttnId(null), 2600);
+        return;
+      }
+      flyTo(window.innerWidth / 2, window.innerHeight / 2 - 80);
+      setInterrupt({ uid: item.uid, say: v.text, target: ev.target });
+      mirrorToOs(item.uid, v.text);
+      sayAloud(v.text, "interrupt");
+      return;
+    }
+    if (channel === "toast") {
+      flyTo(window.innerWidth - 420, 96); // beside the toast stack, not under it
+      setToasts((ts) => [...ts, { uid: item.uid, source: ev.source, say: v.text }]);
+      if (!cur.companion) setBadge((b) => b + 1);
+      mirrorToOs(item.uid, v.text);
+      sayAloud(v.text, "toast");
+      setTimeout(() => setAttnId(null), 2600);
+      return;
+    }
+    // bubble
+    flyTo(target.x, target.y, () => {
+      setBubble({
+        uid: item.uid,
+        source: ev.source,
+        text: v.text,
+        tier: v.tier,
+        tags: v.tags,
+        x: target.x,
+        y: target.y,
+        ratable: true,
+      });
+      mirrorToOs(item.uid, v.text);
+      sayAloud(v.text, "bubble");
+    });
+    if (!cur.companion) setBadge((b) => b + 1);
+  };
+
+  // ---- engagement outcomes (fine-tune labels) -------------------------------
+  const surfaced = React.useRef(new Map<string, { at: number; visible: boolean }>());
+  const markSurfaced = (feedUid: string) => {
+    surfaced.current.set(feedUid, { at: Date.now(), visible: document.visibilityState === "visible" });
+  };
+  // tab buried → reach through the OS; a click is real engagement
+  const mirrorToOs = (feedUid: string, text: string) => {
+    const cur = R.current;
+    if (!cur.settings.osNotify || !document.hidden) return;
+    osNotify(text, () => {
+      resolveOutcome(feedUid, "clicked_through");
+      setCompanion(true);
+      setBadge(0);
+    });
+  };
+  const resolveOutcome = (feedUid: string, type: OutcomeType, rating: Rating | null = null) => {
+    const s = surfaced.current.get(feedUid);
+    if (!s) return; // not a tracked surface (or already resolved)
+    surfaced.current.delete(feedUid);
+    const outcome: SurfaceOutcome = { type, rating, latencyMs: Date.now() - s.at, visible: s.visible };
+    setFeed((f) => f.map((x) => (x.uid === feedUid ? { ...x, outcome } : x)));
+  };
+
+  // ---- ratings & learning --------------------------------------------------
+  const applyRating = (feedUid: string, rating: Rating, tags?: FeedItem["tags"]) => {
+    const item = feed.find((x) => x.uid === feedUid);
+    const source = item?.source;
+    setTaste((tt) => learnTaste(tt, tags?.length ? tags : ["useful", "warm"], rating));
+    setFeed((f) => f.map((x) => (x.uid === feedUid ? { ...x, rating } : x)));
+    setFs((p) => rateFairy(p, rating));
+    // LEARNED: push this source's interruption bias, then maybe offer to act
+    if (source) {
+      setProfile((pr) => {
+        const next = Learn.rateSource(pr, source, rating);
+        const o = Learn.automationOffer(next, source);
+        if (o)
+          setTimeout(() => setOffer({ uid: uid(), source: o.source, verb: o.verb, offer: o.offer }), 900);
+        return next;
+      });
+    }
+    react(reactionForRating(rating));
+    setPulse((p) => p + 1);
+    setAttnId(null);
+  };
+
+  // accept / decline a learned automation
+  const acceptOffer = () => {
+    if (!offer) return;
+    setProfile((pr) => Learn.acceptAutomation(pr, offer.source));
+    setChat((c) => [
+      ...c,
+      {
+        who: "puck",
+        text: `Done. I'll handle ${offer.verb} from now on. You won't hear about it unless it matters.`,
+      },
+    ]);
+    setFeed((f) => [
+      {
+        uid: uid(),
+        id: `learned_${offer.source}`,
+        source: offer.source,
+        say: `Learned a new trick — I'll ${offer.verb} from now on.`,
+        tier: "plain" as const,
+        tags: ["useful" as const],
+        decision: "learned" as const,
+        time: hhmm(),
+        rating: null,
+      },
+      ...f,
+    ]);
+    setOffer(null);
+  };
+  const declineOffer = () => {
+    if (offer) setProfile((pr) => Learn.declineAutomation(pr, offer.source));
+    setOffer(null);
+  };
+
+  const rateBubble = (rating: Rating) => {
+    if (bubble) {
+      resolveOutcome(bubble.uid, "rated", rating);
+      applyRating(bubble.uid, rating, bubble.tags);
+    }
+    setBubble(null);
+  };
+  const dismissBubble = () => {
+    if (bubble) resolveOutcome(bubble.uid, "dismissed");
+    setBubble(null);
+    setAttnId(null);
+  };
+  // Toast interactions ARE the learning signal (no rating buttons): a tap opens
+  // the app it's about (positive), a fling swats it away (negative). Both just
+  // record an outcome — Night Bloom turns the day's behavior into taste/bias.
+  const goToast = (tUid: string) => {
+    const t = toasts.find((x) => x.uid === tUid);
+    resolveOutcome(tUid, "clicked_through");
+    if (t) {
+      if (overlay) void focusApp(t.source);
+      else if (SOURCE_WINDOW[t.source]) setFocused(SOURCE_WINDOW[t.source]);
+    }
+    setToasts((ts) => ts.filter((x) => x.uid !== tUid));
+    setAttnId(null);
+  };
+  const swatToast = (tUid: string) => {
+    resolveOutcome(tUid, "swatted");
+    setToasts((ts) => ts.filter((x) => x.uid !== tUid));
+    setAttnId(null);
+  };
+  const rateInterrupt = (rating: Rating) => {
+    if (interrupt) {
+      // "Take me there" is stronger than a thumbs-up — the interrupt earned a context switch
+      resolveOutcome(interrupt.uid, rating === "helpful" ? "clicked_through" : "rated", rating);
+      applyRating(interrupt.uid, rating, feed.find((f) => f.uid === interrupt.uid)?.tags);
+      if (rating === "helpful" && interrupt.target) setFocused(interrupt.target);
+    }
+    setInterrupt(null);
+  };
+
+  // ---- the companion loop: roam → peek at the patch under him → quip --------
+  // This IS Puck now: an ambient creature that drifts around, peeks at the small
+  // region he's hovering over, and murmurs one whimsical line about what he sees.
+  // No alerts, no events — calm-tech "Diversion" by default. (The old event/alert
+  // path is dormant; see the daemon poll below.)
+  const wnCD = React.useRef(5);
+  const pkCD = React.useRef(7); // ticks (≈s) until the first peek
+  const CAMO_TICKS = 7; // seconds of stillness before he blends in
+  const camoCD = React.useRef(CAMO_TICKS);
+  const uncamo = () => {
+    setCamo(false);
+    camoCD.current = CAMO_TICKS; // reset the stillness clock so he doesn't re-blend at once
+  };
+  const idle = useIdle();
+  const idleRef = React.useRef(idle);
+  idleRef.current = idle;
+  const peeking = React.useRef(false);
+
+  // the patch he's peering at: a window-ish box offset in his facing direction
+  // (so he's never in his own shot), clamped on-screen. Logical/CSS px.
+  const peekRegion = (s: SpriteState) => {
+    // a window-sized patch (logical px); peekNative scales by devicePixelRatio,
+    // so this covers the same screen area on retina. Bigger = more context for a
+    // better comment, still one fast inference (no tiling).
+    const W = 820;
+    const H = 560;
+    const x0 = s.facing === "left" ? s.x - 16 - W : s.x + 16;
+    return {
+      x: Math.round(Math.max(0, Math.min(window.innerWidth - W, x0))),
+      y: Math.round(Math.max(0, Math.min(window.innerHeight - H, s.y - H / 2))),
+      w: W,
+      h: H,
+    };
+  };
+
+  const doPeek = async () => {
+    if (peeking.current) return;
+    peeking.current = true;
+    uncamo(); // surface to take a look
+    const html = document.documentElement;
+    try {
+      const region = peekRegion(R.current.sprite);
+      // BLANK Puck's own UI (sprite, bubbles, the open companion panel) so the
+      // screenshot is the real desktop, not himself reading his own feed. The
+      // Rust capture grabs the region first thing; unblank shortly after (well
+      // before the ~5s VLM finishes) so it's only a brief flicker, not a freeze.
+      html.classList.add("capturing");
+      await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)));
+      const resultPromise = peekScene(R.current.fs, region);
+      setTimeout(() => html.classList.remove("capturing"), 800); // capture is done by now
+      const result = await resultPromise;
+      console.log("puck: peek", JSON.stringify(region), "→", result?.emotion, result?.quip);
+      if (!result) return;
+      const { quip, emotion } = result;
+      const s = R.current.sprite;
+      // FEEL it first — the VLM-classified emotion drives a one-shot gesture + shout
+      // (laugh, NANI-confusion, fret, …); the bubble sentence ~760ms later supersedes
+      // the shout's audio, so we hear the shout then the quip.
+      const rx = reactionForEmotion(asPeekEmotion(emotion), { mischief: R.current.fs.mischief });
+      react(rx);
+      // the quip IS the bubble — a self-dismissing murmur, no actions, no rating
+      setBubble({
+        uid: uid(),
+        source: "",
+        text: quip,
+        tier: "playful",
+        tags: ["warm"],
+        x: s.x,
+        y: s.y,
+        ratable: false,
+      });
+      // the persisted Memory tab (daemon peek log) is the record now — no feed.
+      // Speak the quip in the SAME emotional register as the gesture (rate + pitch tilt).
+      sayAloud(quip, "bubble", rx.kind);
+    } finally {
+      html.classList.remove("capturing");
+      peeking.current = false;
+    }
+  };
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: interval reads via refs
+  React.useEffect(() => {
+    const iv = setInterval(() => {
+      const cur = R.current;
+      if (cur.sleeping) return;
+      const presence = cur.settings.presence;
+      const restful = !cur.bubble && !cur.sprite.flying;
+      // wander
+      wnCD.current -= 1;
+      if (wnCD.current <= 0) {
+        wnCD.current = Math.round(3 + (100 - presence) / 12);
+        if (presence > 14 && restful && Math.random() < presence / 90) {
+          const x = 120 + Math.random() * (window.innerWidth - 460);
+          const y = 110 + Math.random() * (window.innerHeight - 320);
+          flyTo(x, y);
+        }
+      }
+      // peek + quip on an ambient cadence, paused when away / busy
+      pkCD.current -= 1;
+      if (pkCD.current <= 0) {
+        pkCD.current = 50 + Math.floor(Math.random() * 45); // ~50-95s, jittered
+        if (restful && !idleRef.current && !document.hidden && !peeking.current) void doPeek();
+      }
+      // camo: blend into the desktop after sitting still a while (uncloak is snappy and
+      // handled at the action sites — react/flyTo/doPeek/poke — so here we only fade IN)
+      if (restful && !peeking.current && !document.hidden) {
+        camoCD.current -= 1;
+        if (camoCD.current <= 0) setCamo(true);
+      } else {
+        camoCD.current = CAMO_TICKS;
+        setCamo(false);
+      }
+    }, 1000);
+    return () => clearInterval(iv);
+  }, []);
+
+  // auto-dismiss an unrated bubble after a while (becomes part of the scroll);
+  // expiry is itself a label: surfaced, seen or not, never engaged
+  // biome-ignore lint/correctness/useExhaustiveDependencies: resolveOutcome is recreated per render but stable in behavior
+  React.useEffect(() => {
+    if (!bubble) return;
+    const tm = setTimeout(() => {
+      resolveOutcome(bubble.uid, "expired");
+      setBubble(null);
+    }, 11000);
+    return () => clearTimeout(tm);
+  }, [bubble]);
+
+  // toasts you neither open nor swat expire on their own — that silence is a
+  // (mild) signal too, and it stops the corner from stacking up notifications
+  // biome-ignore lint/correctness/useExhaustiveDependencies: resolveOutcome stable in behavior
+  React.useEffect(() => {
+    if (!toasts.length) return;
+    const iv = setInterval(() => {
+      const now = Date.now();
+      const dead = toasts.filter((t) => {
+        const s = surfaced.current.get(t.uid);
+        return s && now - s.at > 15000;
+      });
+      if (!dead.length) return;
+      for (const t of dead) resolveOutcome(t.uid, "expired");
+      setToasts((ts) => ts.filter((t) => !dead.some((d) => d.uid === t.uid)));
+    }, 1000);
+    return () => clearInterval(iv);
+  }, [toasts]);
+
+  // ---- real events from the local daemon (DORMANT in companion mode) -------
+  // For the hackathon Puck is purely a companion that roams + comments — he does
+  // NOT alert on hooks (Claude finishing, builds, mentions). We still drain the
+  // queue so it doesn't grow, but surface nothing. The narrate→fireEvent path
+  // below stays in the code for when "useful alerts" come back later.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: poll reads via refs; bind once
+  React.useEffect(() => {
+    return startDaemonPoll(() => {
+      /* companion mode: drain + ignore — no alerting on hook events */
+    });
+  }, []);
+
+  // ---- memory garden actions ----------------------------------------------
+  const memAction = (kind: MemoryAction, id: string) => {
+    setMemories((ms) => {
+      if (kind === "prune") return ms.filter((m) => m.id !== id);
+      return ms.map((m) =>
+        m.id !== id
+          ? m
+          : kind === "water"
+            ? { ...m, salience: Math.min(1, m.salience + 0.12) }
+            : { ...m, pinned: !m.pinned, salience: m.pinned ? m.salience : 1 },
+      );
+    });
+  };
+
+  // ---- sleep / wake --------------------------------------------------------
+  const beginSleep = () => {
+    cancelSpeech();
+    setSpeaking(false);
+    setBubble(null);
+    setInterrupt(null);
+    setToasts([]);
+    setDropdown(false);
+    setOffer(null);
+    setSettingsOpen(false);
+    // export the day as training traces before the feed is composted.
+    // Anything still on screen resolves as "unresolved" with its dwell time.
+    const exportFeed = feed.map((x) => {
+      const s = surfaced.current.get(x.uid);
+      return s && !x.outcome
+        ? {
+            ...x,
+            outcome: {
+              type: "unresolved" as const,
+              rating: null,
+              latencyMs: Date.now() - s.at,
+              visible: s.visible,
+            },
+          }
+        : x;
+    });
+    surfaced.current.clear();
+    const records = buildTraces(exportFeed, fs, taste, profile);
+    // export first, THEN read status so the gauge includes tonight's just-appended traces
+    void exportTraces(records).then(() =>
+      fetchMoltStatus().then((m) => setMolt(m && { ...m, exported: records.length })),
+    );
+    setSleeping(nightBloom(feed));
+    // the day's peeks BLOOM into durable garden memories (LLM distill, ~slow) —
+    // they stream into the sleep result, then wake() plants them in the Garden
+    void fetchBloom({ mischief: fs.mischief, mood: moodFor(fs) }).then((bloomed) => {
+      if (bloomed.length) setSleeping((r) => (r ? { ...r, memories: [...bloomed, ...r.memories] } : r));
+    });
+  };
+  const wake = () => {
+    const r = sleeping;
+    if (r) {
+      setFs((p) => {
+        const n: FairyState = { ...p, ageDays: p.ageDays + 1, energy: 88 };
+        for (const [k, v] of Object.entries(r.deltas) as [FairyStat | "age", number][]) {
+          if (k !== "age") n[k] = clamp(n[k] + v);
+        }
+        return n;
+      });
+      if (r.deltas.mischief) setSetting("mischief", clamp(fs.mischief + r.deltas.mischief));
+      if (r.memories.length) {
+        setMemories((ms) => [
+          ...r.memories.map((m: MemorySeed, i: number) => ({
+            ...m,
+            id: `n${Date.now()}${i}`,
+            salience: 0.7,
+            pinned: false,
+          })),
+          ...ms,
+        ]);
+      }
+      setChat((c) => [...c, { who: "puck", text: r.morning }]);
+      // consolidate the day's BEHAVIOR into per-source interruption bias overnight
+      // (implicit only — items rated explicitly in the sim already shifted bias live)
+      setProfile((pr) => {
+        let next = pr;
+        for (const item of feed) {
+          if (item.rating) continue;
+          const rt = outcomeRating(item);
+          if (rt) next = Learn.rateSource(next, item.source, rt);
+        }
+        return next;
+      });
+    }
+    setSleeping(null);
+    setPulse((p) => p + 1);
+    setFeed([]);
+    setWinState(initialWinState());
+  };
+
+  // ---- status line for dropdown -------------------------------------------
+  const lastNotable = feed.find((f) => f.decision !== "ignore");
+  const status = lastNotable ? lastNotable.say : "All quiet. I'm patrolling the desktops you left behind.";
+
+  const openCompanion = () => {
+    uncamo(); // poked — pop into view
+    setCompanion(true);
+    setBadge(0);
+    setDropdown(false);
+  };
+
+  // Mute = Puck keeps watching (events still log to the feed) but goes silent and
+  // stops popping up. Muting now also cuts any audio/surface mid-flight.
+  const toggleMute = () => {
+    setDropdown(false);
+    setMuted((m) => {
+      if (!m) {
+        cancelSpeech();
+        setBubble(null);
+        setInterrupt(null);
+        setToasts([]);
+      }
+      return !m;
+    });
+  };
+
+  // menu "Look around": a manual peek-and-quip (same as the ambient loop, on demand)
+  const lookAround = () => {
+    setDropdown(false);
+    void doPeek();
+  };
+
+  const dockApps: DockApp[] = React.useMemo(
+    () => [
+      { id: "finder", name: "Finder", glyph: "🗂" },
+      {
+        id: "claude",
+        name: "Claude Code",
+        glyph: "✳",
+        running: true,
+        badge: winState.claude === "done" ? 1 : 0,
+      },
+      { id: "terminal", name: "Terminal", glyph: "▦", running: true },
+      { id: "mail", name: "Mail", glyph: "✉", badge: winState.mail.length },
+      { id: "discord", name: "Discord", glyph: "◍", badge: winState.discordMention ? 1 : 0 },
+      { id: "calendar", name: "Calendar", glyph: "◷" },
+      { id: "puck", name: "Puck", glyph: "❖", running: true, tint: "var(--accent)" },
+    ],
+    [winState],
+  );
+  const onDock = (id: string) => {
+    if (id === "puck") openCompanion();
+    else if (positions[id]) setFocused(id);
+  };
+
+  return (
+    <>
+      {!overlay && (
+        <>
+          <div className="wall-spores" />
+          <div className="vignette" />
+          <MenuBar
+            moodLabel={MOOD_LABEL[mood]}
+            puckActive={dropdown}
+            badge={badge}
+            onPuck={() => setDropdown((d) => !d)}
+            clock={clock}
+          />
+          <DesktopWindows
+            positions={positions}
+            onPos={(id, p) => setPositions((ps) => ({ ...ps, [id]: p }))}
+            onFocus={setFocused}
+            focused={focused}
+            attnId={attnId}
+            winState={winState}
+          />
+          <Dock apps={dockApps} onOpen={onDock} />
+        </>
+      )}
+
+      <Companion
+        open={companion}
+        pos={compPos}
+        onPos={setCompPos}
+        onClose={() => setCompanion(false)}
+        tab={compTab}
+        setTab={setCompTab}
+        memories={memories}
+        onMem={memAction}
+        fs={fs}
+        moodLabel={MOOD_LABEL[mood]}
+        pulseKey={pulse}
+      />
+
+      <PuckSprite
+        sprite={sprite}
+        form={settings.form}
+        speaking={speaking}
+        alert={!!bubble || !!interrupt || toasts.length > 0}
+        reaction={reaction?.kind ?? null}
+        shout={reaction?.shout}
+        reactKey={reactKey}
+        muted={muted}
+        camo={camo}
+        onPoke={openCompanion}
+        onMenu={() => setDropdown((d) => !d)}
+      />
+
+      {bubble && (
+        <Bubble data={bubble} bubbleStyle={settings.voice} onRate={rateBubble} onDismiss={dismissBubble} />
+      )}
+
+      <Toasts
+        items={toasts}
+        bubbleStyle={settings.voice}
+        onGo={goToast}
+        onSwat={swatToast}
+        offer={offer}
+        onAccept={acceptOffer}
+        onDecline={declineOffer}
+      />
+
+      <Interrupt data={interrupt} form={settings.form} onRate={rateInterrupt} />
+
+      <MenuDropdown
+        open={dropdown}
+        status={status}
+        mode={mode}
+        setMode={setMode}
+        muted={muted}
+        onMute={toggleMute}
+        onCompanion={openCompanion}
+        onPatrol={() => {
+          setDropdown(false);
+          fireEvent();
+        }}
+        onLook={lookAround}
+        onSleep={() => {
+          setDropdown(false);
+          beginSleep();
+        }}
+        onSettings={() => {
+          setDropdown(false);
+          setSettingsOpen(true);
+        }}
+        onClose={() => setDropdown(false)}
+      />
+
+      {sleeping && <NightBloom result={sleeping} molt={molt} onWake={wake} />}
+
+      <SettingsPanel
+        open={settingsOpen}
+        pos={settingsPos}
+        onPos={setSettingsPos}
+        onClose={() => setSettingsOpen(false)}
+        settings={settings}
+        onChange={setSetting}
+        overlay={overlay}
+        onPatrol={() => fireEvent()}
+        onSleep={beginSleep}
+      />
+    </>
+  );
+}

frontend/src/styles/base.css

@@ -0,0 +1,601 @@
+/* ============================================================
+   Puck — desktop familiar. Theme tokens + macOS chrome + sprite.
+   Three themes switch via data-theme on <html>.
+   Accent is overridable live via --accent (Tweaks).
+   ============================================================ */
+
+@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400;1,6..72,500;1,6..72,600&family=JetBrains+Mono:wght@400;500;600&family=Caveat:wght@500;600&display=swap");
+
+:root {
+  /* set by Tweaks; theme provides a fallback */
+  --accent: #e7b85c;
+  --accent-ink: #2a2010;
+  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
+  --voice: "Newsreader", Georgia, serif;
+  --mono: "JetBrains Mono", ui-monospace, monospace;
+  --hand: "Caveat", cursive;
+  --r: 12px;
+}
+
+/* ---------- Terrarium Night (default) ---------- */
+:root[data-theme="terrarium"] {
+  --wall: radial-gradient(120% 90% at 70% -10%, #16241a 0%, #0c130e 45%, #060a07 100%);
+  --wall-spores: rgba(231, 184, 92, 0.05);
+  --ink: #f0e7d0;
+  --ink-soft: rgba(240, 231, 208, 0.62);
+  --ink-faint: rgba(240, 231, 208, 0.34);
+  --panel: rgba(20, 30, 23, 0.74);
+  --panel-2: rgba(28, 40, 31, 0.82);
+  --panel-solid: #131c16;
+  --border: rgba(231, 200, 150, 0.16);
+  --border-strong: rgba(231, 200, 150, 0.32);
+  --menubar: rgba(10, 16, 12, 0.55);
+  --win-bg: rgba(18, 26, 21, 0.92);
+  --win-head: rgba(30, 42, 33, 0.9);
+  --win-border: rgba(231, 200, 150, 0.14);
+  --shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
+  --glow: rgba(231, 184, 92, 0.16);
+  --dot: rgba(231, 200, 150, 0.5);
+  color-scheme: dark;
+}
+
+/* ---------- Candlelight (cozy light) ---------- */
+:root[data-theme="candlelight"] {
+  --wall: radial-gradient(120% 100% at 60% -10%, #f3ead7 0%, #e9dcc2 50%, #ddcba9 100%);
+  --wall-spores: rgba(120, 80, 30, 0.045);
+  --ink: #33291a;
+  --ink-soft: rgba(51, 41, 26, 0.66);
+  --ink-faint: rgba(51, 41, 26, 0.4);
+  --panel: rgba(255, 250, 240, 0.86);
+  --panel-2: rgba(252, 245, 232, 0.95);
+  --panel-solid: #fbf5ea;
+  --border: rgba(80, 60, 30, 0.16);
+  --border-strong: rgba(80, 60, 30, 0.3);
+  --menubar: rgba(255, 250, 240, 0.6);
+  --win-bg: rgba(255, 252, 246, 0.96);
+  --win-head: rgba(245, 237, 223, 0.95);
+  --win-border: rgba(80, 60, 30, 0.14);
+  --shadow: 0 24px 60px rgba(80, 55, 20, 0.22);
+  --glow: rgba(214, 142, 60, 0.2);
+  --dot: rgba(120, 90, 40, 0.45);
+  color-scheme: light;
+}
+
+/* ---------- Glass Nocturne (cool frosted dark) ---------- */
+:root[data-theme="nocturne"] {
+  --wall: radial-gradient(120% 90% at 65% -10%, #1a2230 0%, #0e131c 50%, #080b11 100%);
+  --wall-spores: rgba(150, 190, 240, 0.05);
+  --ink: #e9eef6;
+  --ink-soft: rgba(233, 238, 246, 0.62);
+  --ink-faint: rgba(233, 238, 246, 0.34);
+  --panel: rgba(20, 27, 38, 0.66);
+  --panel-2: rgba(28, 37, 51, 0.78);
+  --panel-solid: #131a26;
+  --border: rgba(180, 205, 240, 0.16);
+  --border-strong: rgba(180, 205, 240, 0.32);
+  --menubar: rgba(12, 17, 25, 0.5);
+  --win-bg: rgba(18, 25, 36, 0.86);
+  --win-head: rgba(28, 38, 53, 0.86);
+  --win-border: rgba(180, 205, 240, 0.14);
+  --shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
+  --glow: rgba(120, 170, 240, 0.16);
+  --dot: rgba(180, 205, 240, 0.5);
+  color-scheme: dark;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  height: 100%;
+  overflow: hidden;
+}
+
+body {
+  font-family: var(--ui);
+  color: var(--ink);
+  background: var(--wall);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  user-select: none;
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+}
+
+/* faint drifting spore texture over the wallpaper */
+.wall-spores {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  background-image: radial-gradient(circle, var(--wall-spores) 1px, transparent 1.4px);
+  background-size: 46px 46px;
+  opacity: 0.8;
+  animation: drift 60s linear infinite;
+}
+@keyframes drift {
+  to {
+    background-position: 460px 230px;
+  }
+}
+
+.vignette {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 1;
+  box-shadow: inset 0 0 200px rgba(0, 0, 0, 0.35);
+}
+:root[data-theme="candlelight"] .vignette {
+  box-shadow: inset 0 0 220px rgba(90, 60, 20, 0.18);
+}
+
+/* ============================================================
+   macOS menu bar
+   ============================================================ */
+.menubar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 26px;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  padding: 0 12px;
+  background: var(--menubar);
+  backdrop-filter: blur(22px) saturate(150%);
+  -webkit-backdrop-filter: blur(22px) saturate(150%);
+  border-bottom: 0.5px solid var(--border);
+  font-size: 13px;
+}
+.menubar .mb-apple {
+  font-size: 14px;
+  opacity: 0.85;
+}
+.menubar .mb-app {
+  font-weight: 600;
+}
+.menubar .mb-menu {
+  opacity: 0.8;
+  font-weight: 400;
+}
+.menubar .mb-right {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+.menubar .mb-ico {
+  opacity: 0.78;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+}
+.menubar .mb-clock {
+  font-variant-numeric: tabular-nums;
+  font-size: 12.5px;
+  opacity: 0.9;
+}
+
+/* the Puck menu-bar status item */
+.mb-puck {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: default;
+  padding: 2px 7px;
+  border-radius: 7px;
+  position: relative;
+  transition: background 0.15s;
+}
+.mb-puck:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+.mb-puck.active {
+  background: rgba(255, 255, 255, 0.14);
+}
+.mb-puck .mb-puck-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--accent);
+  box-shadow: 0 0 8px var(--accent);
+}
+.mb-puck .mb-puck-mood {
+  font-size: 11.5px;
+  opacity: 0.75;
+  letter-spacing: 0.01em;
+}
+.mb-puck .badge {
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  min-width: 15px;
+  height: 15px;
+  border-radius: 8px;
+  background: #ff5b54;
+  color: #fff;
+  font-size: 10px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 4px;
+  box-shadow: 0 0 0 1.5px var(--menubar);
+}
+
+/* ============================================================
+   App windows on the desktop
+   ============================================================ */
+.win {
+  position: absolute;
+  z-index: 10;
+  background: var(--win-bg);
+  border: 0.5px solid var(--win-border);
+  border-radius: 11px;
+  box-shadow: var(--shadow);
+  backdrop-filter: blur(30px) saturate(140%);
+  -webkit-backdrop-filter: blur(30px) saturate(140%);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  transition:
+    box-shadow 0.2s,
+    transform 0.2s;
+}
+.win.dimmed {
+  filter: saturate(0.7) brightness(0.82);
+}
+.win.attn {
+  box-shadow:
+    var(--shadow),
+    0 0 0 1.5px var(--accent),
+    0 0 38px var(--glow);
+}
+.win-head {
+  height: 36px;
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 12px;
+  background: var(--win-head);
+  border-bottom: 0.5px solid var(--win-border);
+  cursor: grab;
+}
+.win-head:active {
+  cursor: grabbing;
+}
+.traffic {
+  display: flex;
+  gap: 8px;
+}
+.traffic i {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  display: block;
+}
+.traffic .r {
+  background: #ff5f57;
+}
+.traffic .y {
+  background: #febc2e;
+}
+.traffic .g {
+  background: #28c840;
+}
+.win-title {
+  font-size: 12.5px;
+  font-weight: 600;
+  opacity: 0.85;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+}
+.win-title .wt-ico {
+  font-size: 13px;
+}
+.win-sub {
+  margin-left: auto;
+  font-size: 11px;
+  opacity: 0.5;
+  font-family: var(--mono);
+}
+.win-body {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  padding: 14px 16px;
+}
+
+/* — Claude Code window — */
+.cc-line {
+  font-family: var(--mono);
+  font-size: 12px;
+  line-height: 1.7;
+  color: var(--ink-soft);
+}
+.cc-line .tok-fn {
+  color: var(--accent);
+}
+.cc-line .tok-dim {
+  opacity: 0.5;
+}
+.cc-task {
+  margin-top: 10px;
+  padding: 9px 11px;
+  border-radius: 9px;
+  background: var(--panel);
+  border: 0.5px solid var(--border);
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  font-size: 12px;
+}
+.cc-task .spin {
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  border: 2px solid var(--border-strong);
+  border-top-color: var(--accent);
+  animation: spin 0.8s linear infinite;
+}
+.cc-task.done .spin {
+  border: none;
+  animation: none;
+  color: #46c96a;
+  font-size: 14px;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.cc-task .pct {
+  margin-left: auto;
+  font-family: var(--mono);
+  font-size: 11px;
+  opacity: 0.6;
+}
+
+/* — Terminal / build window — */
+.term {
+  font-family: var(--mono);
+  font-size: 11.5px;
+  line-height: 1.65;
+  color: var(--ink-soft);
+}
+.term .ok {
+  color: #46c96a;
+}
+.term .err {
+  color: #ff6b6b;
+}
+.term .warn {
+  color: #f2c14e;
+}
+.term .prompt {
+  color: var(--accent);
+}
+.bar {
+  height: 6px;
+  border-radius: 4px;
+  background: var(--border);
+  overflow: hidden;
+  margin-top: 8px;
+}
+.bar i {
+  display: block;
+  height: 100%;
+  background: var(--accent);
+  transition: width 0.4s;
+}
+
+/* — Mail / Discord list windows — */
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: -6px -6px 0;
+}
+.list-row {
+  display: flex;
+  gap: 10px;
+  padding: 8px 8px;
+  border-radius: 8px;
+  align-items: flex-start;
+}
+.list-row.unread {
+  background: var(--panel);
+}
+.list-row .avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--accent-ink);
+  background: var(--accent);
+}
+.list-row .avatar.muted {
+  background: var(--border-strong);
+  color: var(--ink-soft);
+}
+.list-row .lr-main {
+  min-width: 0;
+  flex: 1;
+}
+.list-row .lr-top {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+}
+.list-row .lr-from {
+  font-size: 12.5px;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.list-row .lr-time {
+  font-size: 10.5px;
+  opacity: 0.45;
+  white-space: nowrap;
+  font-family: var(--mono);
+}
+.list-row .lr-sub {
+  font-size: 11.5px;
+  opacity: 0.62;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.list-row .lr-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--accent);
+  margin-top: 6px;
+  flex: none;
+}
+.list-row .lr-dot.hidden {
+  visibility: hidden;
+}
+
+/* — Calendar window — */
+.cal-day {
+  font-size: 11px;
+  opacity: 0.5;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+.cal-ev {
+  margin-top: 7px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  border-left: 3px solid var(--accent);
+  background: var(--panel);
+  font-size: 12px;
+}
+.cal-ev .ce-t {
+  font-weight: 600;
+}
+.cal-ev .ce-time {
+  opacity: 0.55;
+  font-size: 11px;
+  font-family: var(--mono);
+}
+
+/* ============================================================
+   Dock
+   ============================================================ */
+.dock {
+  position: fixed;
+  left: 50%;
+  bottom: 8px;
+  transform: translateX(-50%);
+  z-index: 45;
+  display: flex;
+  align-items: flex-end;
+  gap: 10px;
+  padding: 8px 12px;
+  border-radius: 18px;
+  background: var(--panel);
+  border: 0.5px solid var(--border);
+  backdrop-filter: blur(26px) saturate(150%);
+  -webkit-backdrop-filter: blur(26px) saturate(150%);
+  box-shadow: var(--shadow);
+}
+.dock-ico {
+  width: 42px;
+  height: 42px;
+  border-radius: 11px;
+  cursor: default;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 22px;
+  background: var(--panel-2);
+  border: 0.5px solid var(--border);
+  transition: transform 0.18s cubic-bezier(0.3, 0.8, 0.3, 1.4);
+}
+.dock-ico:hover {
+  transform: translateY(-9px) scale(1.12);
+}
+.dock-ico.run::after {
+  content: "";
+  position: absolute;
+  bottom: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: var(--ink-soft);
+}
+.dock-ico .dk-badge {
+  position: absolute;
+  top: -3px;
+  right: -3px;
+  min-width: 16px;
+  height: 16px;
+  border-radius: 8px;
+  background: #ff5b54;
+  color: #fff;
+  font-size: 10px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 4px;
+}
+
+/* ============================================================
+   Generic floating panel (companion, dropdown)
+   ============================================================ */
+.panel {
+  background: var(--panel-2);
+  border: 0.5px solid var(--border);
+  border-radius: var(--r);
+  backdrop-filter: blur(30px) saturate(150%);
+  -webkit-backdrop-filter: blur(30px) saturate(150%);
+  box-shadow: var(--shadow);
+}
+
+.sect-label {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+}
+
+/* scrollbars inside panels */
+.scroll {
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--border-strong) transparent;
+}
+.scroll::-webkit-scrollbar {
+  width: 9px;
+}
+.scroll::-webkit-scrollbar-thumb {
+  background: var(--border-strong);
+  border-radius: 5px;
+  border: 3px solid transparent;
+  background-clip: content-box;
+}

frontend/src/styles/ui.css

@@ -0,0 +1,2175 @@
+/* ============================================================
+   Puck — sprite, companion window, comments, notifications,
+   Night Bloom. Loaded after styles.css.
+   ============================================================ */
+
+/* ============================================================
+   The sprite
+   ============================================================ */
+.puck {
+  position: fixed;
+  z-index: 60;
+  left: 0;
+  top: 0;
+  width: 64px;
+  height: 64px;
+  transform: translate(-100px, -100px);
+  transition: transform 1.25s cubic-bezier(0.45, 0.05, 0.25, 1);
+  pointer-events: none;
+  will-change: transform;
+}
+.puck.snappy {
+  transition: transform 0.7s cubic-bezier(0.5, 0, 0.2, 1);
+}
+.puck-hit {
+  position: absolute;
+  inset: -6px;
+  pointer-events: auto;
+  cursor: pointer;
+}
+
+/* inner wrapper handles bob + facing so the flight transform stays clean */
+.puck-bob {
+  width: 100%;
+  height: 100%;
+  animation: bob 3.1s ease-in-out infinite;
+  position: relative;
+}
+@keyframes bob {
+  0%,
+  100% {
+    transform: translateY(-3px);
+  }
+  50% {
+    transform: translateY(3px);
+  }
+}
+.puck.flying .puck-bob {
+  animation-duration: 0.9s;
+}
+.puck-face {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  transition: transform 0.4s;
+}
+.puck.face-left .puck-face {
+  transform: scaleX(-1);
+}
+
+/* glow halo */
+.puck-glow {
+  position: absolute;
+  inset: -55%;
+  border-radius: 50%;
+  background: radial-gradient(circle, var(--puck-glow, var(--glow)) 0%, transparent 62%);
+  opacity: 1;
+  animation: pulse 3.4s ease-in-out infinite;
+}
+@keyframes pulse {
+  0%,
+  100% {
+    transform: scale(0.9);
+    opacity: 0.6;
+  }
+  50% {
+    transform: scale(1.12);
+    opacity: 1;
+  }
+}
+
+/* body */
+.puck-body {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 38px;
+  height: 38px;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  background: radial-gradient(circle at 35% 30%, var(--puck-hi, #cdeccb), var(--puck-body, #8fd6a0) 70%);
+  box-shadow:
+    inset -3px -4px 8px rgba(0, 0, 0, 0.25),
+    0 3px 14px rgba(0, 0, 0, 0.4);
+}
+.puck-eye {
+  position: absolute;
+  top: 40%;
+  width: 6px;
+  height: 8px;
+  border-radius: 50%;
+  background: #15201a;
+}
+.puck-eye.l {
+  left: 31%;
+}
+.puck-eye.r {
+  right: 31%;
+}
+.puck-eye::after {
+  content: "";
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  width: 2.5px;
+  height: 2.5px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.9);
+}
+.puck-cheek {
+  position: absolute;
+  top: 56%;
+  width: 5px;
+  height: 3px;
+  border-radius: 50%;
+  background: rgba(255, 140, 120, 0.45);
+}
+.puck-cheek.l {
+  left: 26%;
+}
+.puck-cheek.r {
+  right: 26%;
+}
+
+/* wings */
+.puck-wing {
+  position: absolute;
+  top: 42%;
+  width: 26px;
+  height: 30px;
+  background: radial-gradient(
+    circle at 50% 30%,
+    rgba(255, 255, 255, 0.5),
+    var(--puck-wing, rgba(180, 230, 200, 0.32)) 70%,
+    transparent
+  );
+  border: 0.5px solid rgba(255, 255, 255, 0.4);
+}
+.puck-wing.l {
+  right: 56%;
+  border-radius: 60% 30% 50% 50%;
+  transform-origin: right center;
+  animation: flapL 0.34s ease-in-out infinite alternate;
+}
+.puck-wing.r {
+  left: 56%;
+  border-radius: 30% 60% 50% 50%;
+  transform-origin: left center;
+  animation: flapR 0.34s ease-in-out infinite alternate;
+}
+@keyframes flapL {
+  from {
+    transform: rotateY(20deg) rotate(8deg);
+  }
+  to {
+    transform: rotateY(60deg) rotate(-12deg);
+  }
+}
+@keyframes flapR {
+  from {
+    transform: rotateY(-20deg) rotate(-8deg);
+  }
+  to {
+    transform: rotateY(-60deg) rotate(12deg);
+  }
+}
+.puck.flying .puck-wing.l,
+.puck.flying .puck-wing.r {
+  animation-duration: 0.18s;
+}
+.puck.resting .puck-wing.l,
+.puck.resting .puck-wing.r {
+  animation-duration: 0.7s;
+}
+
+/* sparkle trail dot */
+.puck-trail {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: var(--accent);
+  opacity: 0;
+}
+.puck.flying .puck-trail {
+  animation: trail 0.9s ease-out infinite;
+}
+@keyframes trail {
+  0% {
+    opacity: 0.8;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: translate(-50%, 14px) scale(0.2);
+  }
+}
+
+/* mood tints applied to :root */
+.mood-curious {
+  --puck-body: #8fd6a0;
+  --puck-hi: #cdeccb;
+  --puck-wing: rgba(180, 230, 200, 0.34);
+  --puck-glow: rgba(150, 220, 170, 0.22);
+}
+.mood-mischief {
+  --puck-body: #c9a3ec;
+  --puck-hi: #ead7fa;
+  --puck-wing: rgba(210, 180, 240, 0.34);
+  --puck-glow: rgba(190, 150, 235, 0.24);
+}
+.mood-sleepy {
+  --puck-body: #7f93c4;
+  --puck-hi: #c3cdec;
+  --puck-wing: rgba(170, 185, 225, 0.3);
+  --puck-glow: rgba(150, 170, 225, 0.2);
+}
+.mood-proud {
+  --puck-body: #edc46a;
+  --puck-hi: #f7e6b3;
+  --puck-wing: rgba(240, 210, 150, 0.34);
+  --puck-glow: rgba(231, 184, 92, 0.26);
+}
+.mood-grumpy {
+  --puck-body: #d98a72;
+  --puck-hi: #f0bca8;
+  --puck-wing: rgba(225, 170, 150, 0.32);
+  --puck-glow: rgba(210, 130, 100, 0.22);
+}
+
+/* ============================================================
+   Speech bubble (Puck's comments anchored to the sprite)
+   ============================================================ */
+.bubble {
+  position: fixed;
+  z-index: 61;
+  max-width: 290px;
+  pointer-events: auto;
+  padding: 12px 15px 13px;
+  border-radius: 15px;
+  background: var(--panel-2);
+  border: 0.5px solid var(--border-strong);
+  backdrop-filter: blur(26px) saturate(150%);
+  -webkit-backdrop-filter: blur(26px) saturate(150%);
+  box-shadow:
+    var(--shadow),
+    0 0 28px var(--glow);
+  transform-origin: var(--bub-org, bottom left);
+  animation: bubpop 0.4s cubic-bezier(0.2, 1.3, 0.4, 1);
+}
+@keyframes bubpop {
+  from {
+    opacity: 0;
+    transform: scale(0.7) translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+.bubble.out {
+  animation: bubout 0.3s ease forwards;
+}
+@keyframes bubout {
+  to {
+    opacity: 0;
+    transform: scale(0.85) translateY(6px);
+  }
+}
+.bubble .bub-src {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--accent);
+  margin-bottom: 5px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.bubble .bub-src .bub-tier {
+  color: var(--ink-faint);
+  font-weight: 600;
+}
+.bubble .bub-text {
+  font-family: var(--voice);
+  font-style: italic;
+  font-size: 16px;
+  line-height: 1.4;
+  color: var(--ink);
+}
+.bubble.style-plain .bub-text {
+  font-family: var(--ui);
+  font-style: normal;
+  font-size: 14px;
+}
+.bubble.style-hand .bub-text {
+  font-family: var(--hand);
+  font-style: normal;
+  font-size: 20px;
+}
+.bubble .bub-tail {
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  background: inherit;
+  border-left: 0.5px solid var(--border-strong);
+  border-bottom: 0.5px solid var(--border-strong);
+  transform: rotate(45deg);
+}
+.bubble .bub-acts {
+  display: flex;
+  gap: 6px;
+  margin-top: 10px;
+}
+.bub-rate {
+  flex: 1;
+  appearance: none;
+  border: 0.5px solid var(--border);
+  background: var(--panel);
+  color: var(--ink-soft);
+  font-family: var(--ui);
+  font-size: 11px;
+  padding: 5px 4px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.13s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+}
+.bub-rate:hover {
+  background: var(--accent);
+  color: var(--accent-ink);
+  border-color: transparent;
+  transform: translateY(-1px);
+}
+
+/* ============================================================
+   Companion window — the "note-taking" feed surface
+   ============================================================ */
+.comp {
+  position: fixed;
+  z-index: 40;
+  width: 372px;
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100vh - 120px);
+}
+.comp-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 13px 14px 11px;
+  cursor: grab;
+}
+.comp-head:active {
+  cursor: grabbing;
+}
+.comp-spr {
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  flex: none;
+  position: relative;
+  background: radial-gradient(circle at 35% 30%, var(--puck-hi, #cdeccb), var(--puck-body, #8fd6a0) 70%);
+  box-shadow: inset -2px -3px 6px rgba(0, 0, 0, 0.25);
+}
+.comp-spr .e {
+  position: absolute;
+  top: 13px;
+  width: 4px;
+  height: 6px;
+  border-radius: 50%;
+  background: #15201a;
+}
+.comp-spr .e.l {
+  left: 11px;
+}
+.comp-spr .e.r {
+  right: 11px;
+}
+.comp-id {
+  line-height: 1.15;
+}
+.comp-id b {
+  font-size: 14px;
+}
+.comp-id span {
+  font-size: 11px;
+  color: var(--ink-soft);
+  display: block;
+  font-family: var(--voice);
+  font-style: italic;
+}
+.comp-head .comp-x {
+  margin-left: auto;
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: var(--ink-faint);
+  font-size: 14px;
+  cursor: pointer;
+  width: 24px;
+  height: 24px;
+  border-radius: 7px;
+}
+.comp-head .comp-x:hover {
+  background: var(--panel);
+  color: var(--ink);
+}
+
+.comp-tabs {
+  display: flex;
+  gap: 2px;
+  padding: 0 12px;
+  border-bottom: 0.5px solid var(--border);
+}
+.comp-tab {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: var(--ink-soft);
+  font-family: var(--ui);
+  font-size: 12.5px;
+  font-weight: 600;
+  padding: 9px 11px;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -0.5px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.comp-tab:hover {
+  color: var(--ink);
+}
+.comp-tab.on {
+  color: var(--ink);
+  border-bottom-color: var(--accent);
+}
+.comp-tab .tcount {
+  font-size: 10px;
+  background: var(--panel);
+  padding: 1px 6px;
+  border-radius: 9px;
+  font-weight: 700;
+}
+
+.comp-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 12px 14px;
+}
+
+/* feed items */
+.feed-day {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+  margin: 4px 0 10px;
+}
+.feed-item {
+  display: flex;
+  gap: 11px;
+  padding-bottom: 16px;
+  position: relative;
+}
+.feed-item::before {
+  content: "";
+  position: absolute;
+  left: 6px;
+  top: 16px;
+  bottom: -2px;
+  width: 1.5px;
+  background: var(--border);
+}
+.feed-item:last-child::before {
+  display: none;
+}
+.feed-dot {
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  flex: none;
+  margin-top: 2px;
+  background: var(--panel);
+  border: 2px solid var(--border-strong);
+  z-index: 1;
+}
+.feed-dot.notify {
+  background: var(--accent);
+  border-color: var(--accent);
+  box-shadow: 0 0 10px var(--glow);
+}
+.feed-dot.interrupt {
+  background: #ff5b54;
+  border-color: #ff5b54;
+}
+.feed-dot.ignore {
+  background: transparent;
+}
+.feed-main {
+  flex: 1;
+  min-width: 0;
+}
+.feed-meta {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  margin-bottom: 2px;
+}
+.feed-src {
+  font-size: 10.5px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--ink-soft);
+}
+.feed-time {
+  font-size: 10px;
+  color: var(--ink-faint);
+  font-family: var(--mono);
+  margin-left: auto;
+}
+.feed-say {
+  font-family: var(--voice);
+  font-style: italic;
+  font-size: 14.5px;
+  line-height: 1.42;
+  color: var(--ink);
+}
+.feed-say.plain {
+  font-family: var(--ui);
+  font-style: normal;
+  font-size: 13px;
+}
+.feed-decision {
+  font-size: 10.5px;
+  color: var(--ink-faint);
+  margin-top: 4px;
+  font-family: var(--mono);
+}
+.feed-rated {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 10.5px;
+  margin-top: 5px;
+  padding: 2px 8px;
+  border-radius: 9px;
+  background: var(--panel);
+  color: var(--ink-soft);
+}
+
+/* chat */
+.chat-log {
+  display: flex;
+  flex-direction: column;
+  gap: 11px;
+}
+.chat-msg {
+  max-width: 86%;
+  padding: 9px 13px;
+  border-radius: 14px;
+  font-size: 13.5px;
+  line-height: 1.4;
+}
+.chat-msg.user {
+  align-self: flex-end;
+  background: var(--accent);
+  color: var(--accent-ink);
+  border-bottom-right-radius: 5px;
+}
+.chat-msg.puck {
+  align-self: flex-start;
+  background: var(--panel);
+  border: 0.5px solid var(--border);
+  font-family: var(--voice);
+  font-style: italic;
+  font-size: 14.5px;
+  border-bottom-left-radius: 5px;
+}
+.chat-input {
+  display: flex;
+  gap: 8px;
+  padding: 11px 14px;
+  border-top: 0.5px solid var(--border);
+}
+.chat-input input {
+  flex: 1;
+  background: var(--panel);
+  border: 0.5px solid var(--border);
+  border-radius: 10px;
+  padding: 9px 12px;
+  color: var(--ink);
+  font-family: var(--ui);
+  font-size: 13px;
+  outline: none;
+}
+.chat-input input:focus {
+  border-color: var(--accent);
+}
+.chat-input button {
+  appearance: none;
+  border: 0;
+  background: var(--accent);
+  color: var(--accent-ink);
+  border-radius: 10px;
+  padding: 0 14px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+/* memory garden */
+.garden {
+  display: flex;
+  flex-direction: column;
+  gap: 9px;
+}
+.mem {
+  display: flex;
+  gap: 11px;
+  padding: 11px 12px;
+  border-radius: 11px;
+  background: var(--panel);
+  border: 0.5px solid var(--border);
+  align-items: flex-start;
+  transition:
+    transform 0.15s,
+    box-shadow 0.15s;
+}
+.mem.pinned {
+  border-color: var(--accent);
+  box-shadow:
+    0 0 0 0.5px var(--accent),
+    0 0 18px var(--glow);
+}
+.mem .mem-ico {
+  font-size: 19px;
+  flex: none;
+  line-height: 1.2;
+}
+.mem .mem-main {
+  flex: 1;
+  min-width: 0;
+}
+.mem .mem-text {
+  font-size: 13px;
+  line-height: 1.4;
+}
+.mem .mem-foot {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 7px;
+}
+.mem .mem-type {
+  font-size: 9.5px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+}
+.mem .mem-salience {
+  flex: 1;
+  height: 4px;
+  border-radius: 3px;
+  background: var(--border);
+  overflow: hidden;
+  max-width: 80px;
+}
+.mem .mem-salience i {
+  display: block;
+  height: 100%;
+  background: var(--accent);
+  transition: width 0.4s;
+}
+.mem .mem-acts {
+  display: flex;
+  gap: 4px;
+}
+.mem-btn {
+  appearance: none;
+  width: 24px;
+  height: 24px;
+  border-radius: 7px;
+  border: 0.5px solid var(--border);
+  background: transparent;
+  cursor: pointer;
+  font-size: 12px;
+  opacity: 0.6;
+  transition: all 0.13s;
+}
+.mem-btn:hover {
+  opacity: 1;
+  background: var(--panel-2);
+  transform: translateY(-1px);
+}
+.mem-btn.on {
+  opacity: 1;
+  background: var(--accent);
+  border-color: transparent;
+}
+
+.empty {
+  text-align: center;
+  color: var(--ink-faint);
+  font-family: var(--voice);
+  font-style: italic;
+  font-size: 14px;
+  padding: 30px 16px;
+  line-height: 1.5;
+}
+
+/* fairy state strip (companion footer) */
+.state-strip {
+  padding: 11px 14px;
+  border-top: 0.5px solid var(--border);
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 9px 16px;
+}
+.stat-top {
+  display: flex;
+  justify-content: space-between;
+  font-size: 10.5px;
+  margin-bottom: 4px;
+}
+.stat-top .sl {
+  color: var(--ink-soft);
+  font-weight: 600;
+}
+.stat-top .sv {
+  color: var(--ink-faint);
+  font-variant-numeric: tabular-nums;
+}
+.stat-bar {
+  height: 5px;
+  border-radius: 3px;
+  background: var(--border);
+  overflow: hidden;
+}
+.stat-bar i {
+  display: block;
+  height: 100%;
+  background: var(--accent);
+  transition: width 0.6s cubic-bezier(0.3, 0.8, 0.3, 1);
+  border-radius: 3px;
+}
+.stat-bar i.delta-up {
+  animation: glowup 1.2s ease;
+}
+@keyframes glowup {
+  0%,
+  100% {
+    box-shadow: none;
+  }
+  40% {
+    box-shadow: 0 0 12px var(--accent);
+  }
+}
+
+/* ============================================================
+   Menu-bar dropdown
+   ============================================================ */
+.drop {
+  position: fixed;
+  top: 30px;
+  z-index: 70;
+  width: 280px;
+  padding: 8px;
+}
+.drop-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  font-size: 13px;
+  cursor: pointer;
+}
+.drop-row:hover {
+  background: var(--accent);
+  color: var(--accent-ink);
+}
+.drop-row .dr-ico {
+  width: 18px;
+  text-align: center;
+  opacity: 0.8;
+}
+.drop-row .dr-k {
+  margin-left: auto;
+  font-size: 11px;
+  opacity: 0.5;
+  font-family: var(--mono);
+}
+.drop-sep {
+  height: 0.5px;
+  background: var(--border);
+  margin: 6px 4px;
+}
+.drop-status {
+  padding: 9px 11px 11px;
+}
+.drop-status .ds-line {
+  font-family: var(--voice);
+  font-style: italic;
+  font-size: 14px;
+  line-height: 1.4;
+  color: var(--ink);
+}
+.drop-modes {
+  display: flex;
+  gap: 5px;
+  margin-top: 10px;
+}
+.mode-pill {
+  flex: 1;
+  text-align: center;
+  font-size: 10.5px;
+  font-weight: 600;
+  padding: 6px 4px;
+  border-radius: 8px;
+  background: var(--panel);
+  border: 0.5px solid var(--border);
+  cursor: pointer;
+  color: var(--ink-soft);
+}
+.mode-pill.on {
+  background: var(--accent);
+  color: var(--accent-ink);
+  border-color: transparent;
+}
+
+/* ============================================================
+   Notifications (toast / interrupt)
+   ============================================================ */
+.toasts {
+  position: fixed;
+  top: 34px;
+  right: 12px;
+  z-index: 65;
+  display: flex;
+  flex-direction: column;
+  gap: 9px;
+  width: 330px;
+}
+.toast {
+  padding: 13px 14px;
+  border-radius: 14px;
+  background: var(--panel-2);
+  border: 0.5px solid var(--border);
+  backdrop-filter: blur(26px) saturate(150%);
+  -webkit-backdrop-filter: blur(26px) saturate(150%);
+  box-shadow: var(--shadow);
+  animation: toastin 0.45s cubic-bezier(0.2, 1.1, 0.4, 1);
+}
+@keyframes toastin {
+  from {
+    opacity: 0;
+    transform: translateX(40px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+.toast.out {
+  animation: toastout 0.3s ease forwards;
+}
+@keyframes toastout {
+  to {
+    opacity: 0;
+    transform: translateX(40px);
+  }
+}
+.toast-top {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+.toast-top .tt-spr {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  flex: none;
+  background: radial-gradient(circle at 35% 30%, var(--puck-hi, #cdeccb), var(--puck-body, #8fd6a0) 70%);
+}
+.toast-top .tt-name {
+  font-size: 12px;
+  font-weight: 700;
+}
+.toast-top .tt-time {
+  margin-left: auto;
+  font-size: 10.5px;
+  color: var(--ink-faint);
+  font-family: var(--mono);
+}
+.toast-top .tt-hint {
+  margin-left: auto;
+  font-size: 10px;
+  color: var(--ink-faint);
+  opacity: 0.7;
+  white-space: nowrap;
+}
+/* a toast is grab-and-fling: tap opens the app, throw swats it away */
+.toast.throw {
+  cursor: grab;
+  user-select: none;
+  touch-action: none;
+}
+.toast.throw:active {
+  cursor: grabbing;
+}
+.toast-say {
+  font-family: var(--voice);
+  font-style: italic;
+  font-size: 14.5px;
+  line-height: 1.4;
+}
+.toast-say.plain {
+  font-family: var(--ui);
+  font-style: normal;
+  font-size: 13px;
+}
+.toast-acts {
+  display: flex;
+  gap: 6px;
+  margin-top: 10px;
+}
+
+/* full interrupt overlay */
+.interrupt-wrap {
+  position: fixed;
+  inset: 0;
+  z-index: 80;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(3px);
+  animation: fadein 0.3s;
+}
+@keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.interrupt-card {
+  width: 380px;
+  padding: 22px;
+  text-align: center;
+  animation: bubpop 0.45s cubic-bezier(0.2, 1.3, 0.4, 1);
+}
+.interrupt-card .int-spr {
+  width: 56px;
+  height: 56px;
+  margin: 0 auto 14px;
+  position: relative;
+  background: radial-gradient(circle at 35% 30%, var(--puck-hi, #cdeccb), var(--puck-body, #8fd6a0) 70%);
+  border-radius: 50%;
+  box-shadow: 0 0 30px var(--glow);
+}
+.interrupt-card .int-say {
+  font-family: var(--voice);
+  font-style: italic;
+  font-size: 19px;
+  line-height: 1.4;
+  margin-bottom: 16px;
+}
+.interrupt-card .int-acts {
+  display: flex;
+  gap: 9px;
+}
+
+.btn {
+  appearance: none;
+  border: 0.5px solid var(--border);
+  background: var(--panel);
+  color: var(--ink);
+  font-family: var(--ui);
+  font-size: 12.5px;
+  font-weight: 600;
+  padding: 8px 12px;
+  border-radius: 9px;
+  cursor: pointer;
+  flex: 1;
+  transition: all 0.13s;
+}
+.btn:hover {
+  background: var(--panel-2);
+  transform: translateY(-1px);
+}
+.btn.primary {
+  background: var(--accent);
+  color: var(--accent-ink);
+  border-color: transparent;
+}
+.btn.primary:hover {
+  filter: brightness(1.08);
+}
+
+/* ============================================================
+   Night Bloom (sleep / wake)
+   ============================================================ */
+.bloom {
+  position: fixed;
+  inset: 0;
+  z-index: 90;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: radial-gradient(circle at 50% 40%, #14202c, #060a0f 80%);
+  animation: fadein 0.6s;
+  overflow: hidden;
+}
+:root[data-theme="candlelight"] .bloom {
+  background: radial-gradient(circle at 50% 40%, #2a2114, #140d06 80%);
+}
+.bloom-stars {
+  position: absolute;
+  inset: 0;
+  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.7) 0.6px, transparent 1px);
+  background-size: 38px 52px;
+  opacity: 0.18;
+  animation: twinkle 5s ease-in-out infinite;
+}
+@keyframes twinkle {
+  0%,
+  100% {
+    opacity: 0.1;
+  }
+  50% {
+    opacity: 0.25;
+  }
+}
+.bloom-card {
+  width: 460px;
+  max-width: 90vw;
+  text-align: center;
+  position: relative;
+  z-index: 1;
+  color: #f0e7d0;
+}
+.bloom-spr {
+  width: 70px;
+  height: 70px;
+  margin: 0 auto 20px;
+  position: relative;
+  border-radius: 50%;
+  background: radial-gradient(circle at 35% 30%, #c3cdec, #7f93c4 70%);
+  box-shadow: 0 0 50px rgba(150, 170, 225, 0.5);
+  animation: bob 3.6s ease-in-out infinite;
+}
+.bloom-spr .ze {
+  position: absolute;
+  top: 28px;
+  width: 8px;
+  height: 3px;
+  border-radius: 3px;
+  background: #1a2436;
+}
+.bloom-spr .ze.l {
+  left: 20px;
+}
+.bloom-spr .ze.r {
+  right: 20px;
+}
+.bloom-stage {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: rgba(240, 231, 208, 0.5);
+  margin-bottom: 14px;
+  min-height: 14px;
+}
+.bloom-title {
+  font-family: var(--voice);
+  font-style: italic;
+  font-size: 26px;
+  margin-bottom: 8px;
+}
+.bloom-text {
+  font-size: 14px;
+  line-height: 1.6;
+  color: rgba(240, 231, 208, 0.78);
+  min-height: 70px;
+}
+.bloom-dream {
+  font-family: var(--voice);
+  font-style: italic;
+  font-size: 17px;
+  line-height: 1.6;
+  color: rgba(240, 231, 208, 0.9);
+  padding: 0 10px;
+}
+.bloom-deltas {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin: 18px 0;
+  text-align: left;
+}
+.bloom-delta {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 13px;
+  padding: 9px 13px;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 0.5px solid rgba(255, 255, 255, 0.12);
+  animation: deltain 0.5s ease backwards;
+}
+@keyframes deltain {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+  }
+}
+.bloom-delta .bd-dir {
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+.bloom-delta .bd-dir.up {
+  color: #7fdc9a;
+}
+.bloom-delta .bd-dir.down {
+  color: #e89a8a;
+}
+.bloom-delta .bd-label {
+  flex: 1;
+}
+.bloom-mem {
+  font-family: var(--voice);
+  font-style: italic;
+}
+.bloom-prog {
+  display: flex;
+  gap: 5px;
+  justify-content: center;
+  margin-top: 20px;
+}
+.bloom-prog i {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: rgba(240, 231, 208, 0.25);
+  transition: all 0.3s;
+}
+.bloom-prog i.on {
+  background: rgba(240, 231, 208, 0.85);
+  transform: scale(1.3);
+}
+.bloom-btn {
+  margin-top: 24px;
+  appearance: none;
+  border: 0.5px solid rgba(255, 255, 255, 0.25);
+  background: rgba(255, 255, 255, 0.08);
+  color: #f0e7d0;
+  font-family: var(--ui);
+  font-size: 13.5px;
+  font-weight: 600;
+  padding: 11px 26px;
+  border-radius: 11px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.bloom-btn:hover {
+  background: rgba(255, 255, 255, 0.16);
+  transform: translateY(-1px);
+}
+
+/* sleeping-Z floaties */
+.zfly {
+  position: absolute;
+  font-family: var(--voice);
+  font-style: italic;
+  font-size: 22px;
+  color: rgba(240, 231, 208, 0.5);
+  animation: zfly 3.2s ease-out infinite;
+}
+@keyframes zfly {
+  0% {
+    opacity: 0;
+    transform: translateY(0) scale(0.6);
+  }
+  30% {
+    opacity: 0.7;
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-60px) translateX(20px) scale(1.2);
+  }
+}
+
+/* ============================================================
+   Speaking shimmer — sound rings when Puck talks aloud
+   ============================================================ */
+.puck-voicewave {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+  opacity: 0;
+}
+.puck.speaking .puck-voicewave {
+  opacity: 1;
+}
+.puck.speaking .puck-voicewave i {
+  position: absolute;
+  left: 0;
+  top: 0;
+  border-radius: 50%;
+  border: 1.5px solid var(--accent);
+  transform: translate(-50%, -50%);
+  animation: voicering 1.5s ease-out infinite;
+}
+.puck.speaking .puck-voicewave i:nth-child(2) {
+  animation-delay: 0.5s;
+}
+.puck.speaking .puck-voicewave i:nth-child(3) {
+  animation-delay: 1s;
+}
+@keyframes voicering {
+  0% {
+    width: 30px;
+    height: 30px;
+    opacity: 0.7;
+  }
+  100% {
+    width: 86px;
+    height: 86px;
+    opacity: 0;
+  }
+}
+.puck.speaking .puck-glow {
+  animation-duration: 0.7s;
+}
+
+/* ============================================================
+   Automation offer toast — the "want me to handle it?" card
+   ============================================================ */
+.toast.offer {
+  border-color: var(--accent);
+  box-shadow:
+    var(--shadow),
+    0 0 28px var(--glow);
+}
+.toast.offer .tt-name {
+  color: var(--accent);
+}
+
+/* feed dots for learned / handled */
+.feed-dot.handled {
+  background: var(--panel);
+  border-color: var(--accent);
+  position: relative;
+}
+.feed-dot.handled::after {
+  content: "✓";
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 8px;
+  color: var(--accent);
+  font-weight: 700;
+}
+.feed-dot.learned {
+  background: var(--accent);
+  border-color: var(--accent);
+  box-shadow: 0 0 12px var(--glow);
+}
+
+/* ============================================================
+   Learning panel
+   ============================================================ */
+.learn-note {
+  font-family: var(--voice);
+  font-style: italic;
+  font-size: 13.5px;
+  line-height: 1.45;
+  color: var(--ink-soft);
+  padding: 2px 0 4px;
+}
+/* Memory tab — Puck's recent observations (peek log) */
+.musings {
+  display: flex;
+  flex-direction: column;
+  margin-top: 6px;
+}
+.musing {
+  display: flex;
+  gap: 9px;
+  padding: 9px 2px;
+  border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.06));
+}
+.musing-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--accent);
+  margin-top: 6px;
+  flex: none;
+  opacity: 0.65;
+}
+.musing-main {
+  flex: 1;
+  min-width: 0;
+}
+.musing-text {
+  font-family: var(--voice);
+  font-style: italic;
+  font-size: 13.5px;
+  line-height: 1.4;
+}
+.musing-time {
+  font-size: 10.5px;
+  color: var(--ink-faint);
+  font-family: var(--mono);
+  margin-top: 3px;
+}
+/* a musing is clickable (→ label this peek) */
+button.musing {
+  width: 100%;
+  text-align: left;
+  font: inherit;
+  color: inherit;
+  background: none;
+  border: none;
+  border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.06));
+  cursor: pointer;
+}
+button.musing:hover {
+  background: rgba(255, 255, 255, 0.04);
+}
+/* labeling view: screenshot + reuse-a-label chips + a new label */
+.label-shot {
+  display: block;
+  width: 100%;
+  border-radius: 10px;
+  border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
+  margin: 8px 0;
+}
+.label-quip {
+  font-family: var(--voice);
+  font-style: italic;
+  font-size: 13px;
+  color: var(--ink-soft);
+  margin-bottom: 10px;
+}
+.label-pick {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 10px;
+}
+.label-pick .ltag {
+  cursor: pointer;
+  border: none;
+}
+.label-new {
+  display: flex;
+  gap: 6px;
+}
+.label-new input {
+  flex: 1;
+  min-width: 0;
+  font: inherit;
+  font-size: 12px;
+  color: var(--ink);
+  background: var(--surface-2, rgba(0, 0, 0, 0.08));
+  border: 1px solid var(--line, rgba(0, 0, 0, 0.12));
+  border-radius: 8px;
+  padding: 6px 8px;
+}
+.label-new button {
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+  background: var(--accent);
+  color: var(--accent-ink, #fff7e8);
+  border: none;
+  border-radius: 8px;
+  padding: 6px 12px;
+}
+.label-back {
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+  background: none;
+  color: var(--ink-faint);
+  border: none;
+  margin-top: 12px;
+  padding: 4px 0;
+}
+.label-saved {
+  font-size: 13px;
+  color: var(--accent);
+  padding: 10px 0;
+}
+.learn-empty {
+  font-size: 12.5px;
+  color: var(--ink-faint);
+  font-style: italic;
+  padding: 2px 0;
+}
+
+.learn-sources {
+  display: flex;
+  flex-direction: column;
+  gap: 11px;
+}
+.lsrc {
+  display: flex;
+  gap: 11px;
+  align-items: flex-start;
+}
+.lsrc-glyph {
+  font-size: 16px;
+  width: 22px;
+  text-align: center;
+  flex: none;
+  opacity: 0.85;
+  margin-top: 1px;
+}
+.lsrc-main {
+  flex: 1;
+  min-width: 0;
+}
+.lsrc-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 8px;
+  margin-bottom: 5px;
+}
+.lsrc-label {
+  font-size: 12.5px;
+  font-weight: 600;
+}
+.lsrc-disp {
+  font-size: 10.5px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  padding: 2px 8px;
+  border-radius: 9px;
+  background: var(--panel);
+  white-space: nowrap;
+}
+.lsrc-disp.hi {
+  color: var(--accent-ink);
+  background: var(--accent);
+}
+.lsrc-disp.mid {
+  color: var(--accent);
+}
+.lsrc-disp.lo {
+  color: var(--ink-soft);
+}
+.lsrc-disp.off {
+  color: var(--ink-faint);
+}
+.lsrc-track {
+  height: 6px;
+  border-radius: 4px;
+  background: var(--border);
+  overflow: hidden;
+  position: relative;
+}
+.lsrc-track::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: var(--border-strong);
+  z-index: 1;
+}
+.lsrc-fill {
+  display: block;
+  height: 100%;
+  background: var(--accent);
+  transition: width 0.5s cubic-bezier(0.3, 0.8, 0.3, 1);
+  border-radius: 4px;
+}
+.lsrc-fill.off,
+.lsrc-fill.lo {
+  background: var(--ink-faint);
+}
+.lsrc-conf {
+  font-size: 10px;
+  color: var(--ink-faint);
+  font-family: var(--mono);
+  margin-top: 4px;
+}
+
+.learn-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 7px;
+}
+.ltag {
+  font-size: 12px;
+  padding: 5px 11px;
+  border-radius: 20px;
+  background: var(--panel);
+  border: 0.5px solid var(--border);
+  color: var(--ink);
+  white-space: nowrap;
+}
+.ltag.irk {
+  border-color: rgba(230, 140, 110, 0.4);
+  color: var(--ink-soft);
+}
+
+.learn-autos {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.lauto {
+  display: flex;
+  gap: 11px;
+  padding: 11px 12px;
+  border-radius: 11px;
+  align-items: flex-start;
+  background: var(--panel);
+  border: 0.5px solid var(--accent);
+  box-shadow: 0 0 0 0.5px var(--accent);
+}
+.lauto-check {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--accent);
+  color: var(--accent-ink);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: 800;
+  flex: none;
+  margin-top: 1px;
+}
+.lauto-verb {
+  font-size: 13px;
+  font-weight: 600;
+}
+.lauto-done {
+  font-size: 11px;
+  color: var(--ink-soft);
+  font-family: var(--mono);
+  margin-top: 3px;
+}
+
+/* ============================================================
+   Settings panel (Tweaks reborn as product UI)
+   ============================================================ */
+.settings {
+  position: fixed;
+  z-index: 75;
+  width: 340px;
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100vh - 120px);
+}
+.set-body {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.set-body .sect-label {
+  margin-top: 8px;
+}
+.set-body .sect-label:first-child {
+  margin-top: 0;
+}
+.set-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.set-label {
+  font-size: 12px;
+  color: var(--ink-soft);
+  width: 88px;
+  flex: none;
+}
+.set-ctl {
+  flex: 1;
+  min-width: 0;
+}
+.set-pills {
+  display: flex;
+  gap: 5px;
+  flex-wrap: wrap;
+}
+.set-pills .mode-pill {
+  flex: 1 1 auto;
+  appearance: none;
+  font-family: var(--ui);
+}
+.set-swatches {
+  display: flex;
+  gap: 7px;
+}
+.set-swatch {
+  appearance: none;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  cursor: pointer;
+  border: 2px solid transparent;
+  transition:
+    transform 0.13s,
+    border-color 0.13s;
+}
+.set-swatch:hover {
+  transform: scale(1.12);
+}
+.set-swatch.on {
+  border-color: var(--ink);
+  transform: scale(1.12);
+}
+.set-slider {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+}
+.set-slider input[type="range"] {
+  flex: 1;
+  accent-color: var(--accent);
+}
+.set-val {
+  font-size: 11px;
+  font-family: var(--mono);
+  color: var(--ink-faint);
+  width: 24px;
+  text-align: right;
+}
+.set-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 6px;
+}
+
+/* menubar puck item is a real <button> now */
+.mb-puck {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+}
+
+/* ============================================================
+   Overlay mode — transparent shell over the real desktop
+   ============================================================ */
+html.overlay,
+html.overlay body {
+  background: transparent !important;
+}
+html.overlay .puck-hit {
+  cursor: pointer;
+}
+/* during a real-screen capture, blank Puck so his own sprite/bubbles don't land
+   in the screenshot he's about to read (the overlay window is otherwise clear) */
+html.capturing #root {
+  opacity: 0;
+  transition: none;
+}
+/* Glassier comment surfaces over the real desktop — let it show through, but keep
+   the blur so text stays legible (fully transparent would kill readability). */
+html.overlay .bubble,
+html.overlay .toast {
+  background: color-mix(in srgb, var(--panel-2) 60%, transparent);
+  backdrop-filter: blur(32px) saturate(160%);
+  -webkit-backdrop-filter: blur(32px) saturate(160%);
+}
+
+/* ============================================================
+   Attention: alert ring when something's waiting + hover-grow.
+   On a busy desktop a quiet bob is missable; the ring isn't.
+   ============================================================ */
+.puck-alert-ring {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 38px;
+  height: 38px;
+  margin: -19px 0 0 -19px;
+  border-radius: 50%;
+  border: 2px solid var(--accent);
+  opacity: 0;
+  pointer-events: none;
+}
+.puck.alert .puck-alert-ring {
+  animation: alertring 1.4s ease-out infinite;
+}
+@keyframes alertring {
+  0% {
+    opacity: 0.8;
+    transform: scale(0.7);
+  }
+  70% {
+    opacity: 0;
+    transform: scale(2.1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(2.1);
+  }
+}
+/* alert also quickens the bob and warms the glow so the whole sprite reads "!" */
+.puck.alert .puck-bob {
+  animation-duration: 1.5s;
+}
+.puck.alert .puck-glow {
+  animation-duration: 1.4s;
+}
+
+/* hover-grow on the pokeable creature — tactile "I'm clickable" feedback */
+.puck-bob {
+  transition: transform 0.18s cubic-bezier(0.3, 0.8, 0.3, 1.4);
+}
+.puck-hit:hover ~ .puck-bob,
+.puck-bob:has(.puck-hit:hover) {
+  transform: scale(1.18);
+}
+
+/* settings inline note (e.g. vision cost explainer) */
+.set-note {
+  font-size: 11px;
+  line-height: 1.4;
+  color: var(--ink-faint);
+  font-style: italic;
+  padding: 2px 0 2px;
+}
+
+/* voice picker — native select + audition button */
+.set-voicepick {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+.set-select {
+  flex: 1;
+  min-width: 0;
+  font: inherit;
+  font-size: 12px;
+  color: var(--ink);
+  background: var(--surface-2, rgba(0, 0, 0, 0.08));
+  border: 1px solid var(--line, rgba(0, 0, 0, 0.12));
+  border-radius: 8px;
+  padding: 5px 7px;
+}
+
+/* molt gauge on the Night Bloom wake screen — real trace accumulation */
+.bloom-molt {
+  margin: 14px auto 4px;
+  max-width: 320px;
+  text-align: left;
+}
+.bm-row {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  letter-spacing: 0.3px;
+  color: rgba(255, 247, 224, 0.82);
+  margin-bottom: 5px;
+}
+.bm-bar {
+  height: 6px;
+  border-radius: 99px;
+  background: rgba(255, 255, 255, 0.12);
+  overflow: hidden;
+}
+.bm-bar i {
+  display: block;
+  height: 100%;
+  border-radius: 99px;
+  background: linear-gradient(90deg, var(--accent), #fff7e0);
+  transition: width 0.8s ease;
+}
+.bm-note {
+  margin-top: 7px;
+  font-size: 11px;
+  line-height: 1.5;
+  color: rgba(255, 247, 224, 0.6);
+  font-style: italic;
+}
+
+/* ============================================================
+   Reactions — one-shot personality gestures. The react-* class
+   lands on .puck; .puck-bob is keyed in React so the animation
+   restarts even when the same reaction fires twice in a row.
+   Each keyframe starts and ends at neutral so the resting bob
+   resumes seamlessly when the class is removed. Durations mirror
+   ReactionKind MS in engine/reactions.ts.
+   ============================================================ */
+.puck[class*="react-"] .puck-bob {
+  animation-iteration-count: 1;
+}
+.puck.react-celebrate .puck-bob {
+  animation: react-celebrate 1.1s cubic-bezier(0.3, 0.7, 0.3, 1.3);
+}
+@keyframes react-celebrate {
+  0% {
+    transform: translateY(0) scale(1) rotate(0);
+  }
+  20% {
+    transform: translateY(-15px) scale(1.18) rotate(-8deg);
+  }
+  45% {
+    transform: translateY(2px) scale(0.96) rotate(6deg);
+  }
+  65% {
+    transform: translateY(-9px) scale(1.08) rotate(-4deg);
+  }
+  100% {
+    transform: translateY(0) scale(1) rotate(0);
+  }
+}
+.puck.react-nani .puck-bob {
+  animation: react-nani 0.9s cubic-bezier(0.2, 1.5, 0.3, 1);
+}
+@keyframes react-nani {
+  0% {
+    transform: scale(1);
+  }
+  14% {
+    transform: scale(1.03) translateX(-2px);
+  } /* the freeze beat */
+  22% {
+    transform: scale(1.46) translateY(-6px);
+  } /* SNAP zoom */
+  34% {
+    transform: scale(1.4) translateX(4px);
+  }
+  46% {
+    transform: scale(1.43) translateX(-4px);
+  }
+  60% {
+    transform: scale(1.41);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+.puck.react-perk .puck-bob {
+  animation: react-perk 0.75s ease;
+}
+@keyframes react-perk {
+  0% {
+    transform: scale(1) translateY(0);
+  }
+  40% {
+    transform: scale(1.16) translateY(-7px);
+  }
+  100% {
+    transform: scale(1) translateY(0);
+  }
+}
+.puck.react-shrug .puck-bob {
+  animation: react-shrug 1s ease-in-out;
+}
+@keyframes react-shrug {
+  0%,
+  100% {
+    transform: translateY(0) rotate(0) scale(1);
+  }
+  25% {
+    transform: translateY(3px) rotate(-7deg) scale(0.97);
+  }
+  60% {
+    transform: translateY(3px) rotate(7deg) scale(0.97);
+  }
+}
+.puck.react-sulk .puck-bob {
+  animation: react-sulk 1.05s ease;
+}
+@keyframes react-sulk {
+  0%,
+  100% {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+  }
+  35% {
+    transform: translateY(9px) scale(0.85);
+    opacity: 0.65;
+  }
+}
+.puck.react-dance .puck-bob {
+  animation: react-dance 1.5s ease-in-out;
+}
+@keyframes react-dance {
+  0%,
+  100% {
+    transform: translateY(0) rotate(0);
+  }
+  15% {
+    transform: translateY(-6px) rotate(-14deg);
+  }
+  35% {
+    transform: translateY(0) rotate(12deg);
+  }
+  55% {
+    transform: translateY(-6px) rotate(-12deg);
+  }
+  75% {
+    transform: translateY(0) rotate(10deg);
+  }
+}
+.puck.react-summon .puck-bob {
+  animation: react-summon 1.6s cubic-bezier(0.34, 1.56, 0.5, 1);
+}
+@keyframes react-summon {
+  0% {
+    transform: scale(1) translateY(0);
+  }
+  18% {
+    transform: scale(1.42) translateY(-12px) rotate(-6deg);
+  } /* big size-up */
+  34% {
+    transform: scale(1.34) translateY(2px) rotate(5deg);
+  }
+  50% {
+    transform: scale(1.42) translateY(-9px) rotate(-5deg);
+  } /* insistent second hop */
+  66% {
+    transform: scale(1.34) translateY(2px) rotate(4deg);
+  }
+  82% {
+    transform: scale(1.38) translateY(-5px) rotate(0deg);
+  }
+  100% {
+    transform: scale(1) translateY(0) rotate(0);
+  }
+}
+.puck.react-pop .puck-bob {
+  animation: react-pop 0.48s cubic-bezier(0.3, 0.8, 0.3, 1.4);
+}
+@keyframes react-pop {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  45% {
+    transform: scale(1.16);
+  }
+}
+/* laugh — giddy little bounces with a rocking wobble (found something funny) */
+.puck.react-laugh .puck-bob {
+  animation: react-laugh 1.2s ease-in-out;
+}
+@keyframes react-laugh {
+  0%,
+  100% {
+    transform: translateY(0) rotate(0) scale(1);
+  }
+  15% {
+    transform: translateY(-8px) rotate(-7deg) scale(1.06);
+  }
+  30% {
+    transform: translateY(1px) rotate(6deg) scale(0.98);
+  }
+  45% {
+    transform: translateY(-7px) rotate(-6deg) scale(1.05);
+  }
+  60% {
+    transform: translateY(1px) rotate(5deg) scale(0.98);
+  }
+  75% {
+    transform: translateY(-5px) rotate(-4deg) scale(1.03);
+  }
+}
+/* sad — a slow droop, shrinking and dimming (something poignant or lonely) */
+.puck.react-sad .puck-bob {
+  animation: react-sad 1.3s ease;
+}
+@keyframes react-sad {
+  0%,
+  100% {
+    transform: translateY(0) scale(1);
+    filter: none;
+  }
+  35%,
+  70% {
+    transform: translateY(7px) scale(0.9) rotate(-3deg);
+    filter: brightness(0.68) saturate(0.6);
+  }
+}
+/* fret — a startled recoil then a nervous side-to-side tremble (the human's upset) */
+.puck.react-fret .puck-bob {
+  animation: react-fret 1.1s ease;
+}
+@keyframes react-fret {
+  0%,
+  100% {
+    transform: translate(0, 0) scale(1);
+  }
+  10% {
+    transform: translate(0, -6px) scale(1.08);
+  }
+  25% {
+    transform: translateX(-4px) scale(1.04);
+  }
+  37% {
+    transform: translateX(4px) scale(1.04);
+  }
+  49% {
+    transform: translateX(-3px) scale(1.02);
+  }
+  61% {
+    transform: translateX(3px) scale(1.02);
+  }
+  73% {
+    transform: translateX(-2px);
+  }
+  85% {
+    transform: translateX(2px);
+  }
+}
+
+/* Emotion COLOR — the aura flushes a feeling-hue for the gesture's duration, then
+   reverts to the slow mood tint (--puck-glow is overridden on .puck, which beats the
+   mood-* ancestor and cascades to .puck-glow). Layered on top of the body's mood color
+   so curiosity stays "his" color and only the strong feelings recolor him. */
+.puck.react-nani {
+  --puck-glow: rgba(244, 244, 255, 0.62); /* white surprise flash */
+}
+.puck.react-laugh {
+  --puck-glow: rgba(246, 212, 120, 0.5); /* warm giggle gold */
+}
+.puck.react-celebrate,
+.puck.react-dance {
+  --puck-glow: rgba(255, 206, 105, 0.62); /* bright delight */
+}
+.puck.react-celebrate .puck-glow,
+.puck.react-dance .puck-glow {
+  animation-duration: 0.6s; /* giddy fast pulse */
+}
+.puck.react-fret {
+  --puck-glow: rgba(240, 92, 74, 0.58); /* alarm red */
+}
+.puck.react-fret .puck-glow {
+  animation-duration: 0.45s; /* anxious flicker */
+}
+.puck.react-sad {
+  --puck-glow: rgba(108, 148, 230, 0.42); /* cool, lonely blue */
+}
+.puck.react-sad .puck-glow {
+  animation-duration: 5s; /* slow, heavy */
+}
+
+/* muted — watching but silent: calm the glow, drop a small badge */
+.puck.muted .puck-glow {
+  opacity: 0.35;
+  animation-duration: 6s;
+}
+.puck-mute {
+  position: absolute;
+  right: -2px;
+  top: -2px;
+  font-size: 13px;
+  line-height: 1;
+  filter: grayscale(0.3);
+  pointer-events: none;
+  z-index: 4;
+}
+
+/* camo — after sitting still, Puck cloaks into an active-camo patch (the per-rule
+   comments below cover the visual; the gist: what's behind reads through sharp, with a
+   shimmer + rim so he's a cloaked shape, not a hole). Fades in over ~1.2s; dropping the
+   class is an instant "boo!" reveal. Trigger lives in SimApp's idle loop. */
+.puck.camo .puck-body {
+  /* Active camo, not transparency: the fill goes clear so what's behind reads through
+     SHARP (overlay: the real desktop through the transparent window; sim: the page).
+     NO blur — blur is what made it unreadable. */
+  background: transparent !important;
+  /* the camo TELL — a non-blurring shimmer (brightness/contrast/hue keep text legible,
+     unlike blur) so his shape registers as a cloaked patch, not a hole. The backdrop
+     shimmer only renders in the sim (the overlay's transparent window has nothing to
+     sample); the refractive rim below carries the tell in both habitats. */
+  backdrop-filter: brightness(1.08) contrast(1.05) hue-rotate(10deg);
+  -webkit-backdrop-filter: brightness(1.08) contrast(1.05) hue-rotate(10deg);
+  box-shadow:
+    inset 0 0 0 1px rgba(255, 255, 255, 0.13),
+    0 0 8px rgba(170, 215, 255, 0.16);
+  transition:
+    background 1.2s ease,
+    backdrop-filter 1.2s ease,
+    box-shadow 1.2s ease;
+}
+.puck.camo .puck-wing,
+.puck.camo .puck-cheek,
+.puck.camo .puck-trail,
+.puck.camo .puck-glow {
+  opacity: 0.07;
+  transition: opacity 1.2s ease;
+}
+.puck.camo .puck-eye {
+  opacity: 0.34; /* a faint watching glimmer through the cloak */
+  transition: opacity 1.2s ease;
+}
+
+/* the shout — a quick chat-flash that floats up and fades over the sprite */
+.puck-shout {
+  position: absolute;
+  left: 50%;
+  bottom: 100%;
+  white-space: nowrap;
+  font-weight: 800;
+  font-size: 14px;
+  letter-spacing: 0.2px;
+  color: var(--accent-ink, #fff7e8);
+  background: var(--accent);
+  padding: 2px 9px;
+  border-radius: 11px;
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
+  pointer-events: none;
+  z-index: 3;
+  animation: shout-pop 1s ease forwards;
+}
+@keyframes shout-pop {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, 6px) scale(0.6);
+  }
+  18% {
+    opacity: 1;
+    transform: translate(-50%, -6px) scale(1.1);
+  }
+  35% {
+    transform: translate(-50%, -8px) scale(1);
+  }
+  80% {
+    opacity: 1;
+    transform: translate(-50%, -12px) scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: translate(-50%, -22px) scale(0.95);
+  }
+}