diff --git a/.gitignore b/.gitignore
index 82f4340..98da21e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,6 +8,17 @@ out/
 build/
 *.local
 
+# Portfolio screenshots under docs/screenshots/renders/ — the contact
+# sheet HTML is a build intermediate (capture.mjs uses it to render the
+# contact-sheet.png), so it stays out of the repo.
+docs/screenshots/renders/contact-sheet.html
+
+# Portfolio deck — the editable PPTX is too large for the 2MB large-files
+# guard. Rebuild via `cd docs/deck && npm run build`. The PDF preview
+# fits under the guard and is committed.
+docs/deck/AssistSupport-LinkedIn-Live.pptx
+docs/deck/thumbs/
+
 # Tauri / Rust
 src-tauri/target/
 **/target/
diff --git a/docs/case-study.md b/docs/case-study.md
new file mode 100644
index 0000000..91e0007
--- /dev/null
+++ b/docs/case-study.md
@@ -0,0 +1,228 @@
+# AssistSupport · A Local-First IT Support Agent on a Mac
+
+A case study in building an AI support assistant that's fast,
+auditable, and private — by choosing the _unfashionable_ tool at every
+decision point.
+
+AssistSupport is a Tauri 2 + React + Rust desktop app that drafts
+KB-grounded responses to IT support tickets. The ML stack — intent
+classifier, hybrid retrieval, cross-encoder reranker, local LLM — runs
+end-to-end on the operator's laptop. No cloud round trip, no per-seat
+pricing, no tenant data leaking across a wire.
+
+This case study walks through three architectural decisions that cut
+against the industry default, and explains why each one was
+load-bearing for the product.
+
+## The problem
+
+Tier-1 IT support is the same conversation, replayed. "Can I use a
+flash drive?" "Why does Outlook keep crashing?" "How do I get Snowflake
+access?" About a quarter of tickets are policy or how-to questions
+already answered somewhere in the knowledge base. The operator's job is
+not to invent an answer — it's to _find the right KB article, write a
+human response that cites it, and paste it into Jira._
+
+Cloud AI support tools promise to automate this. In practice they add
+three problems the original workflow didn't have:
+
+1. **Data residency.** Every ticket — including anything the user
+   accidentally pastes — goes to a third-party tenant.
+2. **Confident hallucinations.** Large models will cheerfully invent
+   policy that doesn't exist. When the operator trusts the draft, IT
+   Security gets paged.
+3. **Per-seat pricing.** The economics only work if you eliminate
+   operators. But operators are also the reviewers — you can't.
+
+The target, then, is a tool that _sits next to the operator_, drafts
+an answer they can actually paste, cites real files, and stays quiet
+when it doesn't know. Running locally, because that's the only way to
+close the first two problems.
+
+## Decision 1 · Logistic regression over embeddings for intent
+
+Every ticket needs to be routed: **policy · howto · access · incident
+· runbook.** The routing decides which KB lane is searched, what
+clarifying questions the draft asks, and whether a human needs to
+approve the response before it ships.
+
+The industry default for intent classification in 2026 is a small
+sentence-transformer — `all-MiniLM-L6-v2` or similar — plus a dense
+vector cosine classifier. It's the path of least resistance: drop in
+a 22MB ONNX model, compute an embedding, nearest-neighbor against
+labeled examples. F1 in the low 0.90s, just works.
+
+AssistSupport ships **logistic regression over TF-IDF bigrams**.
+Here's why.
+
+**Latency.** The dense path takes 50–80ms for a single classification
+on CPU. That sounds fine until you realize the classifier runs
+_before retrieval_, and retrieval has its own 22ms budget, and the LLM
+hasn't even started yet. Every millisecond in the classifier pushes
+the time-to-first-token past the "feels instant" threshold. Logreg
+lands in 3ms. That's a 20× headroom for the reranker.
+
+**Inspectability.** A dense vector classifier's decision is an
+inner-product between two tensors. When the routing is wrong, you
+can't explain _why_ to the operator or to IT Security. Logreg's
+decision is a sorted list of weighted tokens: `"flash drive" +2.41`,
+`"removable media" +1.96`, `"usb stick" +1.58`. When something routes
+oddly, you can see the reason on one screen — and you can fix it by
+adding training examples, not by retraining a model.
+
+**Calibration.** Softmax over logits is not a probability. At score
+0.80 in an uncalibrated classifier, the empirical hit rate is often
+0.60–0.70 — meaning 30% of "confident" routings are wrong. Logreg
+with Platt scaling ships a calibrated score: at 0.80 the empirical
+hit rate is 0.88. That matters because the _same score_ drives the
+trust-gate: low confidence → clarify mode. If the score lies, the
+gate lies.
+
+**Model size.** The dense transformer is 22MB quantized; the logreg
+is 4MB. Seems like nothing until you add it to the LLM footprint, the
+reranker, the TF-IDF index, SQLCipher data — and remember that the
+whole thing ships on a MacBook.
+
+The tradeoff is expressiveness. Bigrams don't capture "USB drive ≈
+flash drive" the way an embedding does. But the _next stage_ — hybrid
+retrieval — uses a cross-encoder that handles semantics, so the
+classifier doesn't need to. Pushing semantics to where the budget
+allows it is the architectural win.
+
+## Decision 2 · Hybrid TF-IDF + cross-encoder, not ANN
+
+After routing, the pipeline retrieves KB articles and reranks them
+for the LLM's context. The industry default is again dense vectors:
+embed every KB chunk with a sentence-transformer, build an ANN index
+(FAISS, hnswlib, or similar), cosine-search at query time.
+
+AssistSupport runs **TF-IDF candidate retrieval** (returns ~14
+candidates in 22ms) followed by **ms-marco-MiniLM-L-6-v2 cross-encoder
+rerank** (reduces to top-4 in 48ms on CPU). Same reason: latency
+budget + architectural trick.
+
+The dense-retrieval path forces you to either:
+
+- **Embed everything upfront at ingest.** Expensive one-time cost, but
+  also an ongoing cost — every KB article change re-embeds. With
+  3,500+ articles and a nightly reindex budget of 46 seconds, this
+  doesn't fit.
+- **Embed on-the-fly.** ~100ms per embedding, times 10 queries per
+  draft session, times 40 drafts per operator per day = hours of
+  aggregate CPU. Unfeasible.
+
+The hybrid path embeds only the _query_ and _~14 candidates_ at draft
+time. TF-IDF's recall is high for IT support prose (specific
+technical terms dominate), and the cross-encoder restores semantic
+precision on a small candidate set. Net latency: 22ms + 48ms = 70ms.
+Net quality on the eval suite: NDCG@5 of 0.88, within 2 points of a
+full dense pipeline at 10× the cost.
+
+The architectural trick to internalize: **cross-encoders are slow
+_per document_, but cheap when you only give them 14 documents.** The
+cheap stage (TF-IDF) filters to a size where the expensive stage
+(cross-encoder) becomes affordable. Most dense-retrieval systems skip
+the filter and throw money at ANN hardware.
+
+## Decision 3 · Trust-gated drafts, not optimistic generation
+
+The third choice is less about technique and more about product.
+
+Most LLM-powered support tools **always answer.** The model is prompted
+to generate a response; if retrieval is weak, the response is just
+vaguer. The operator sees a draft; the operator copies the draft. By
+the time a hallucination is caught, it's in Jira.
+
+AssistSupport has three explicit modes — **answer, clarify, abstain**
+— gated on confidence and grounded-claim checks:
+
+- **Answer** (≥0.80 confidence, all claims grounded): the draft ships
+  with inline `[n]` citations. This is the common case.
+- **Clarify** (0.60–0.79 or partial grounding): the draft is a single
+  clarifying question back to the reporter. The operator can still
+  edit and send, but the default is to stop the conversation until
+  more data exists.
+- **Abstain** (below threshold or any unsupported claim): the draft
+  refuses, surfaces the ticket as a KB-gap candidate, and the operator
+  takes over. Abstain fires on ~8% of tickets — the operator never
+  sees a plausible-but-wrong draft.
+
+Two technical pieces make this work:
+
+**Inline citations are generated _into_ the prompt, not post-hoc.**
+The LLM can't cite a document it didn't see; the retrieved chunks are
+numbered and handed to it, and the prompt template instructs it to
+include `[n]` markers. If the generated response lacks citations, it's
+not stripped — it's flagged as unsupported and the mode drops to
+abstain.
+
+**Grounded-claim checks run per-sentence.** The draft is split into
+sentences; each sentence is checked against the retrieved chunks for
+textual or semantic overlap. Sentences that match at least one chunk
+are "supported"; the ratio `supported / total` gates the mode. At
+6/7 supported claims the draft ships with a visible "6/7 claims
+supported" meter in the triage rail — the operator sees the gap
+before they paste.
+
+This looks like over-engineering until you realize **the KB-gap
+dashboard (see [04-kb-gap.png](screenshots/renders/04-kb-gap.png))
+is powered by the abstain signal.** Every abstention is a lead on
+what to write next. The feedback loop that makes the product
+self-improving depends on the trust gate being honest about what it
+doesn't know. Optimistic generation would silently bury these signals
+as "low-confidence answers that shipped anyway."
+
+## The compound effect
+
+Each decision on its own looks unfashionable. Stacked together, they
+form the product's moat:
+
+- The **3ms logreg** buys latency headroom for the **48ms cross-encoder**,
+  which delivers **NDCG@5 = 0.88**, which feeds the **8B local LLM**
+  enough context to draft at **1.2s end-to-end**.
+- The **trust gate** blocks unsupported drafts, which makes the
+  operator **actually trust** the tool, which makes them **rate
+  drafts** instead of skipping the feedback surface.
+- Ratings feed the **KB-gap analyzer**, which **prioritizes articles
+  to write**, which fills the gaps that caused the low-confidence
+  abstentions, which shifts the confidence distribution _right_ over
+  time.
+
+The product gets better because each piece is a **cheap**, **honest**
+component that composes. No single component is doing magic. The
+sum _is_ magic.
+
+## What I'd do again — and what I wouldn't
+
+**Would:**
+
+- **Tauri 2 over Electron.** Apple notarization, bundle size, Rust
+  FFI to the ML sidecar — iteration was 2–3× faster.
+- **Ollama as the LLM runtime.** Zero-maintenance dependency. Swap
+  models by changing a string. Everything else in the stack is tuned
+  to the model's interface, not its identity.
+- **SQLCipher from day one.** Retrofitting encryption is brutal.
+
+**Wouldn't:**
+
+- I'd spend more time on the **feedback UX** earlier. The KB-gap
+  analyzer only works if operators actually click thumbs-up/down, and
+  _any_ UX friction collapses that signal. A single-click rating is
+  the lesson I'd start from.
+- I'd build the **eval harness before the product.** Shipping a
+  grounding regression in prod, then scrambling to measure it after
+  the fact, was a bad trade.
+
+## Links
+
+- **Repo:** [github.com/saagpatel/AssistSupport](https://github.com/saagpatel/AssistSupport) (MIT, 229 commits)
+- **One-pager:** [docs/one-pager/AssistSupport-one-pager.pdf](one-pager/AssistSupport-one-pager.pdf)
+- **Deck:** [docs/deck/AssistSupport-LinkedIn-Live.pptx](deck/AssistSupport-LinkedIn-Live.pptx)
+- **Screenshot set:** [docs/screenshots/](screenshots/)
+- **Redesign handoff:** [docs/redesign/](redesign/)
+
+---
+
+_If there's one thing to take away: local-first is a UX decision, not
+just a security one. Your operators will trust the tool more because
+they can literally turn Wi-Fi off and it still works._
diff --git a/docs/deck/AssistSupport-LinkedIn-Live.pdf b/docs/deck/AssistSupport-LinkedIn-Live.pdf
new file mode 100644
index 0000000..73c4af5
Binary files /dev/null and b/docs/deck/AssistSupport-LinkedIn-Live.pdf differ
diff --git a/docs/deck/DEMO-VIDEO.md b/docs/deck/DEMO-VIDEO.md
new file mode 100644
index 0000000..bf17f50
--- /dev/null
+++ b/docs/deck/DEMO-VIDEO.md
@@ -0,0 +1,186 @@
+# 90-second Demo Video · Storyboard + Script
+
+A tight, async-consumable demo reel intended to live next to the
+one-pager on a portfolio site and in LinkedIn / social posts. This
+doc is the shot list, timing, and verbatim narration. Record once,
+cut twice.
+
+## Specs
+
+- **Runtime:** 90 seconds (hard budget — under 2min plays through autoplay)
+- **Aspect:** 16:9, 1920×1080, 60 fps capture
+- **Audio:** voiceover over gentle ambient bed; no music with vocals
+- **Captions:** on by default (most LinkedIn viewers watch muted)
+- **End card:** 3 seconds · `github.com/saagpatel/AssistSupport` · MIT
+
+## Pre-flight
+
+```bash
+VITE_E2E_MOCK_TAURI=1 pnpm dev -- --port 1422
+# In the browser:
+localStorage.setItem("assistsupport.flag.ASSISTSUPPORT_REVAMP_WORKSPACE_HERO", "1");
+localStorage.setItem("assistsupport.flag.ASSISTSUPPORT_ENABLE_ADMIN_TABS", "1");
+# Reload. The hero workspace renders.
+```
+
+Recording tool: QuickTime Screen Recording with system audio muted
+(voice recorded separately into a clean mic), exported and
+composited in whatever video tool you prefer (iMovie / ScreenFlow /
+DaVinci). Cursor highlights recommended on all click interactions.
+
+## Shot list
+
+### Shot 1 · Cold open (0:00 – 0:08) · 8s
+
+**Visual:** Close-up on the AssistSupport mark in the nav, zoom out
+slowly to reveal the full workspace shell. No UI interaction.
+
+**Narration:**
+
+> _"IT support is the same conversation, replayed. AssistSupport is the
+> second brain that sits next to the operator — and runs entirely on
+> their laptop."_
+
+**Caption:** `AssistSupport — a local-first IT support agent`
+
+---
+
+### Shot 2 · Ticket paste (0:08 – 0:18) · 10s
+
+**Visual:** Paste the ticket text into the composer at normal typing
+speed. Cursor drops into the textarea; text appears line-by-line.
+The "Policy" intent chip illuminates automatically as the ML trace
+fires.
+
+**Narration:**
+
+> _"Drop in a ticket. The ML classifier routes it in three
+> milliseconds — policy, how-to, access, incident, or runbook — so
+> the retrieval hits the right lane."_
+
+**Caption:** `Logistic regression · 0.914 macro-F1 · 3 ms on-device`
+
+---
+
+### Shot 3 · Generate + stream (0:18 – 0:38) · 20s
+
+**Visual:** Cursor moves to Generate (or hit ⌘↵). Brief flash on the
+composer — retrieval runs. The answer starts streaming into the hero
+column. Camera slowly zooms in on the confidence gauge as it fills to
+86%. Inline `[1]` and `[2]` citation pills appear in the prose.
+
+**Narration:**
+
+> _"Retrieval is hybrid — TF-IDF filters the KB to fourteen
+> candidates in twenty-two milliseconds, then a cross-encoder
+> reranks to the top four. The draft streams in from a local
+> Llama 3.1-8B at roughly 42 tokens per second. Inline `[n]`
+> citations are generated directly into the prompt — the model
+> can't cite a document it didn't actually see."_
+
+**Caption:** `Hybrid retrieval · 22ms p50 · 46ms p95 · 3,500+ articles`
+
+---
+
+### Shot 4 · Click a citation (0:38 – 0:48) · 10s
+
+**Visual:** Cursor hovers over `[1]` in the prose — the pill lights
+up with the accent color. Click. The cited source entry highlights in
+the Cited sources block beneath the draft. Smooth.
+
+**Narration:**
+
+> _"Every citation is clickable — it jumps to the exact KB article
+> the claim came from. No hallucinations, no invented URLs."_
+
+**Caption:** `0.93 grounded · 0.96 faithful · 6 / 7 claims supported`
+
+---
+
+### Shot 5 · Feedback → KB gap (0:48 – 1:08) · 20s
+
+**Visual:** Cursor moves to the triage rail, clicks thumbs-up on the
+Feedback card. Quick wipe. Cut to the **Analytics tab** opening —
+KB Gap Analysis panel comes into frame. Camera pans over the ranked
+gap clusters: VPN on office Wi-Fi · Outlook on macOS 14.5 · macOS 14
+permissions drift.
+
+**Narration:**
+
+> _"When the operator rates a draft — or when the model abstains
+> because the KB doesn't cover the question — that signal feeds a
+> self-improving loop. Low-confidence queries are clustered, ranked
+> by impact, and turned into a prioritized list of KB articles to
+> write. Every abstention is a lead on what's next."_
+
+**Caption:** `Self-improving · 14 gap clusters tracked · 87 tickets`
+
+---
+
+### Shot 6 · Privacy tell (1:08 – 1:22) · 14s
+
+**Visual:** Quick cut to macOS Settings → Network, Wi-Fi toggle off.
+Cut back to AssistSupport — the workspace still renders, user types a
+new ticket, Generate still works, draft streams in. A small "offline"
+badge could animate in for emphasis.
+
+**Narration:**
+
+> _"No cloud round trip. No tenant data leaving. No per-seat
+> pricing. Turn the Wi-Fi off — it still works. That's what
+> local-first means."_
+
+**Caption:** `SQLCipher AES-256 · 0 B data exfil · Tauri 2 + Rust`
+
+---
+
+### Shot 7 · End card (1:22 – 1:30) · 8s
+
+**Visual:** Solid dark (`#0B0D10`) background. Teal brand mark.
+Text stack:
+
+```
+AssistSupport
+Your support team's second brain
+github.com/saagpatel/AssistSupport · MIT
+```
+
+**Narration:** _(silent — let the repo URL breathe)_
+
+**Caption:** none — text is the message
+
+---
+
+## Timing summary
+
+| Shot | Runtime | Running total |
+| ---- | ------- | ------------- |
+| 1    | 0:08    | 0:08          |
+| 2    | 0:10    | 0:18          |
+| 3    | 0:20    | 0:38          |
+| 4    | 0:10    | 0:48          |
+| 5    | 0:20    | 1:08          |
+| 6    | 0:14    | 1:22          |
+| 7    | 0:08    | 1:30          |
+
+Running long? Cut shot 4 first (citation click) — the confidence
+gauge in shot 3 already carries the grounded-claims story.
+
+## Narration voice notes
+
+- **Pace:** slow. 90 seconds is less than 200 words. Don't fill silence.
+- **Tone:** engineering-professional, not salesy. No "unlock,"
+  "supercharge," "revolutionize."
+- **Accent word:** `local-first` (gentle emphasis, twice).
+- **Applause line:** the "Turn the Wi-Fi off — it still works"
+  sentence in shot 6. Half-second pause before it.
+
+## Distribution checklist
+
+- [ ] Upload to LinkedIn with 120-char caption:
+      _"AssistSupport — a local-first IT support agent. ML-routed,
+      KB-grounded drafts in under 25ms. No cloud, no leaks. MIT."_
+- [ ] Pin the video on the AssistSupport README (above the fold)
+- [ ] Embed on portfolio site next to the [one-pager PDF](../one-pager/AssistSupport-one-pager.pdf)
+- [ ] Upload a 720p variant for Slack sharing (bandwidth-friendly)
+- [ ] Add YouTube mirror with chapter markers at shot boundaries
diff --git a/docs/deck/README.md b/docs/deck/README.md
new file mode 100644
index 0000000..2fa5059
--- /dev/null
+++ b/docs/deck/README.md
@@ -0,0 +1,99 @@
+# LinkedIn Live Deck — Running a local-first support agent on a Mac
+
+Session 4 of the AssistSupport portfolio pass. A 12-slide editable PPTX
+deck plus a rendered PDF for preview / distribution.
+
+## Output
+
+| File                                                                 | Purpose                                              |
+| -------------------------------------------------------------------- | ---------------------------------------------------- |
+| [AssistSupport-LinkedIn-Live.pptx](AssistSupport-LinkedIn-Live.pptx) | Editable deck for PowerPoint / Keynote / Slides.     |
+| [AssistSupport-LinkedIn-Live.pdf](AssistSupport-LinkedIn-Live.pdf)   | 12-page PDF render (via LibreOffice) for preview.    |
+| [build.mjs](build.mjs)                                               | pptxgenjs composer — re-run to regenerate the deck.  |
+| [package.json](package.json)                                         | Local deps (`pptxgenjs`) isolated from the app root. |
+
+## Slide outline
+
+| #   | Title                                                                     | Purpose                                                                           |
+| --- | ------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
+| 01  | Running a local-first support agent on a Mac.                             | Title · speaker chip · positioning.                                               |
+| 02  | IT support drowns in the same questions — and cloud AI isn't a clean fix. | The problem framing.                                                              |
+| 03  | A second brain — not a replacement.                                       | Thesis: local-first · KB-grounded · trust-gated.                                  |
+| 04  | The pipeline — five stages, all local.                                    | Architecture: intent → retrieve → rerank → draft → learn, with latency per stage. |
+| 05  | The workspace — composer, answer, triage.                                 | Demo pause — hero screenshot + 3 annotated callouts.                              |
+| 06  | Why logreg + TF-IDF beat embeddings here.                                 | ML intent classifier: F1, latency, inspectability.                                |
+| 07  | Sub-25 ms retrieval over 3,500+ articles.                                 | Hybrid search: TF-IDF + MiniLM-L-6 cross-encoder, latency budget diagram.         |
+| 08  | The model is allowed to say "I don't know."                               | Trust gating: answer / clarify / abstain modes.                                   |
+| 09  | Low-confidence queries become the KB backlog.                             | Self-improving feedback loop with KB gap dashboard.                               |
+| 10  | Yes, a desktop app needs a deploy story.                                  | Ops surface + eval harness side-by-side.                                          |
+| 11  | Five things I didn't expect.                                              | Lessons — UX, prompt cache, logreg, Tauri, feedback.                              |
+| 12  | Questions?                                                                | Resources · repo · connect · tech-stack line.                                     |
+
+Every slide includes **speaker notes** for the Live — shown in the
+Presenter View off-screen. The notes cover timing cues, pivot points,
+and the audience-specific call-outs the speaker should make.
+
+## Design-system continuity
+
+Same tokens as the Workspace redesign, the screenshot set, and the
+one-pager:
+
+- Background: `#0B0D10` (warm graphite)
+- Accent: teal `#4FD1C5` — the only decorative color
+- Status colors (good / warn / bad / info) used only on slide 08
+  (trust-gated modes) where the three borders actually carry meaning
+- Type: IBM Plex Sans + JetBrains Mono (named font — the deck will
+  fall back cleanly on machines without them installed)
+- Thin teal hairline across the top of every slide + subtle border
+  strip along the bottom — mirrors the active-nav indicator in the
+  app shell
+- Slide number chip (`01 / 12`) in the top-right of every slide, in
+  JetBrains Mono with teal accent on the current number
+
+The demo slides (05, 06, 09, 10) embed the portfolio screenshots
+directly from [`docs/screenshots/renders/`](../screenshots/renders/), so any
+re-run of session 2 flows through to the deck on the next `build.mjs`
+invocation.
+
+## Editable slides
+
+The deck is built with `pptxgenjs` using native text boxes + shapes +
+embedded PNGs — **not** image-background slides. A speaker can open
+the .pptx in PowerPoint, Keynote, or Google Slides and:
+
+- Edit any title or bullet text directly
+- Swap the speaker chip on slide 01
+- Replace individual screenshots without rebuilding
+- Re-time the talk by adding or removing slides
+
+This is deliberate — a LinkedIn Live rehearsal almost always surfaces
+wording tweaks, and painting slides onto images would block that.
+
+## Regenerating
+
+```bash
+cd docs/deck
+npm run build
+# optional: render a PDF preview
+soffice --headless --convert-to pdf AssistSupport-LinkedIn-Live.pptx
+```
+
+`pptxgenjs` is installed locally under `docs/deck/node_modules/` so it
+never pollutes the app's root `package.json`. The LibreOffice PDF step
+is optional — PowerPoint itself can export to PDF if preferred.
+
+## Portfolio pass — summary
+
+Session 4 closes the AssistSupport portfolio pass. The four artifacts
+read as a coherent product:
+
+1. **Session 1** — [Workspace redesign handoff bundle](../redesign/README.md): 3-region hero layout as React + CSS drop-in, behind a feature flag, zero new tokens.
+2. **Session 2** — [6-panel 2× screenshot set](../screenshots/README.md) + captions: portfolio-grade PNGs of the live product surfaces.
+3. **Session 3** — [Landscape-letter one-pager PDF](../one-pager/README.md): tagline, five feature pillars, three impact stats.
+4. **Session 4** — this deck: 12 slides for the LinkedIn Live walkthrough.
+
+One design system spans all four: warm-graphite surfaces, teal accent,
+IBM Plex Sans + JetBrains Mono, tokens sourced from
+[`src/styles/revamp/tokens.css`](../../src/styles/revamp/tokens.css).
+If that token file shifts, every artifact re-syncs from the same
+source.
diff --git a/docs/deck/REHEARSAL.md b/docs/deck/REHEARSAL.md
new file mode 100644
index 0000000..2351825
--- /dev/null
+++ b/docs/deck/REHEARSAL.md
@@ -0,0 +1,156 @@
+# LinkedIn Live Rehearsal Kit
+
+Companion to [AssistSupport-LinkedIn-Live.pptx](AssistSupport-LinkedIn-Live.pptx).
+Walks you through a **~30-minute talk** structure plus **10-minute
+Q&A**. Timing, pivots per audience, and anticipated questions per
+slide. Rehearse twice — once with video off reading through cues, once
+full-dress with the live demo.
+
+## Total budget — 40 min
+
+| Block          | Target | Notes                                              |
+| -------------- | ------ | -------------------------------------------------- |
+| Slides 01 – 03 | 5 min  | Hook + framing. Do **not** spend more.             |
+| Slide 04       | 4 min  | Architecture — heaviest visual, slow down.         |
+| Slide 05       | 5 min  | **Live demo pause.** Budget extra for interaction. |
+| Slides 06 – 08 | 7 min  | ML intent · hybrid search · trust gating.          |
+| Slide 09       | 3 min  | Feedback loop — the self-improving story.          |
+| Slide 10       | 2 min  | Ops + eval — quick pass for IT leaders.            |
+| Slide 11       | 3 min  | Lessons — pick 2 to dwell on by audience.          |
+| Slide 12 + Q&A | 11 min | Open with one planted question if room is quiet.   |
+
+Running long? Cut slide 06 feature-weights and slide 08 "per-sentence
+match" details first — the thesis still lands.
+
+## Slide-by-slide cues
+
+### 01 · Title (40 sec)
+
+Open with a single sentence: _"AssistSupport is an IT support assistant
+that runs entirely on your laptop — no cloud, no tenant data leaking,
+sub-25ms answers grounded in your own KB."_ Name drop Tauri + Rust +
+local Ollama to anchor. Don't read the subtitle — let the slide do it.
+
+### 02 · The problem (60 sec)
+
+One bullet at a time. Land the **~25% of tickets** number verbally
+since it's the same number as the deflection stat on slide 12 —
+reviewers should feel the roundtrip. If audience is IT leadership,
+linger on "per-seat pricing compounds." If engineering, linger on
+"can't debug why."
+
+### 03 · Thesis (90 sec)
+
+Read the three pillar heads out loud: _local-first · KB-grounded ·
+trust-gated_. The italic kicker at the bottom is the quote you'll
+revisit in Q&A — read it slowly: **"You don't need a foundation model
+on every desk. You need a pipeline that knows the KB cold, runs fast,
+and keeps the operator in the loop."**
+
+### 04 · Architecture (4 min)
+
+Slowest slide. Walk left-to-right through the 5 stages. At DRAFT
+(highlighted), pause — that's where the LLM lives. Call out the
+runtime line verbatim so audience absorbs the dependency list. End on
+the stat row: **1.8s p95 · 22ms p50 · ~5GB · 0 B exfil**. The last stat
+(0 B) is the applause line — wait a beat.
+
+### 05 · Demo (5 min, interactive)
+
+Switch to screenshare / running app. Suggested script:
+
+1. Click into the composer, paste the real prompt from the deck
+   ("Can I use a flash drive...").
+2. Click a single intent chip so the ML trace lights up.
+3. Press **⌘↵**. Narrate the sub-25ms retrieval while it runs.
+4. When the draft streams in, hover a `[1]` citation — show the
+   source navigation.
+5. Thumbs-up, then click "Save template" to show the feedback loop.
+   Fallback if something breaks: switch back to slide 05's annotated
+   screenshot and walk the 3 callouts.
+
+### 06 · ML intent (90 sec)
+
+This is the **"why not embeddings?" slide**. Lead with: _"Logreg
+isn't a downgrade — it's a choice."_ Read the macro-F1 number. If
+someone asks during Q&A about BERT-level quality, point to the
+feature-weights visual and say _"every routing decision is
+inspectable — try getting that from a dense model."_
+
+### 07 · Hybrid search (2 min)
+
+Latency budget visual on the right is the anchor — point to each bar
+as you narrate. The key claim: _"Cross-encoder is slow but cheap
+here because it only sees 14 candidates."_ That's the architectural
+trick worth landing.
+
+### 08 · Trust gating (90 sec)
+
+Three mode cards — read the colored heads (ANSWER / CLARIFY / ABSTAIN)
+aloud. The landing line: _"The model is allowed to say 'I don't
+know.'"_ This is the IT-security applause line.
+
+### 09 · Feedback loop (3 min)
+
+The screenshot is the hero. Walk through the 5 bullets top-to-bottom.
+Emphasize: _"Every abstained query is a lead on what to write next."_
+That turns a negative (abstention) into a positive (KB backlog item).
+
+### 10 · Ops (2 min)
+
+Two screenshots side by side. Quick pass: _"Yes, a desktop app needs
+a deploy story."_ Name the **90-second rollback SLO** and the eval
+gate thresholds (grounding ≥ 0.90 · faithfulness ≥ 0.95).
+
+### 11 · Lessons (3 min)
+
+Pick **two** lessons to dwell on based on audience:
+
+- **IT leaders / security** → #1 (local-first UX), #3 (inspectable logreg)
+- **ML engineers** → #2 (prompt-cache), #3 (logreg vs embeddings)
+- **Platform / desktop devs** → #4 (Tauri), #5 (one-click rating)
+  Read the rest aloud but keep moving.
+
+### 12 · Q&A (10 min)
+
+Leave it on screen. Repeat the repo URL verbally: _"github dot com
+slash saag patel slash AssistSupport."_ Don't fill silence — count 3
+seconds after the first hand.
+
+## Anticipated questions (by slide)
+
+| From slide | Q                                                | A (short form)                                                                   |
+| ---------- | ------------------------------------------------ | -------------------------------------------------------------------------------- |
+| 04         | Why llama3.1-8b and not a 70B?                   | 5GB memory fits on any M-series · 1.2s draft is the budget · good enough.        |
+| 04         | Can you swap the model?                          | Ollama backend · any chat-tuned model works · settings UI handles download.      |
+| 06         | Why not BERT / sentence-transformers for intent? | Latency (50×) · model size (500×) · logreg is inspectable. Same F1.              |
+| 07         | Won't TF-IDF miss semantic matches?              | That's what the cross-encoder is for · it reranks on semantic similarity.        |
+| 08         | How do you force inline citations?               | Citations are generated _into_ the prompt · post-hoc strip if missing → abstain. |
+| 09         | Who writes the KB articles?                      | Operators · the gap analyzer just prioritizes what to write.                     |
+| 10         | Does the eval harness run per-commit?            | Yes · release gate blocks on grounding/faithfulness/intent thresholds.           |
+| general    | Why not cloud?                                   | Data residency · zero per-seat · tenant isolation is a single laptop.            |
+| general    | How does it scale to 1000 operators?             | It doesn't need to · each laptop is independent · shared KB via file sync.       |
+| general    | What's the privacy story?                        | SQLCipher AES-256 · no network calls during inference · audited outbound.        |
+| general    | Open source?                                     | Yes · MIT · github.com/saagpatel/AssistSupport.                                  |
+
+## Opening line options (pick one per run)
+
+1. _"I built an IT support assistant that runs entirely on my laptop. No cloud, no tenant data leaving, sub-25ms answers. This is how it works."_
+2. _"Most AI support tools are expensive, leaky, and opaque. Today I'll show you one that's none of those — because it lives on your Mac."_
+3. _"The last time I deployed an AI support system, three things went wrong. Today I'll show what we built so they can't go wrong again."_
+
+## Closing line options
+
+1. _"Everything you just saw is MIT-licensed and 229 commits. Fork it, ship your own."_
+2. _"If there's one thing to take away: local-first is a UX decision, not just a security one. Your operators will trust the tool more."_
+3. _"Support will always be repetitive. The question is whether repetition is suffered by humans or compiled down into a pipeline. Thanks for watching."_
+
+## Dry-run checklist
+
+- [ ] Fonts — IBM Plex Sans + JetBrains Mono installed locally (PowerPoint will fallback otherwise)
+- [ ] Recording — Presenter View enabled so notes show on your laptop, slides on the stream
+- [ ] Demo — `pnpm dev` + `VITE_E2E_MOCK_TAURI=1` + `VITE_ASSISTSUPPORT_REVAMP_WORKSPACE_HERO=1` primed before you start
+- [ ] Fallback — [panels/01-workspace.html](../screenshots/panels/01-workspace.html) open in a spare browser tab in case the demo breaks
+- [ ] Network — confirm LinkedIn Live upload path works 10 minutes before going live
+- [ ] Camera — framed with the AssistSupport logo or a whiteboard in the background, not a messy desk
+- [ ] Water — within reach; 40 minutes is longer than you think
diff --git a/docs/deck/build.mjs b/docs/deck/build.mjs
new file mode 100644
index 0000000..9ecedcb
--- /dev/null
+++ b/docs/deck/build.mjs
@@ -0,0 +1,1264 @@
+/**
+ * build.mjs — compose the 12-slide LinkedIn Live deck.
+ *
+ * Run:
+ *     cd docs/deck && npm run build
+ *
+ * Outputs:
+ *     docs/deck/AssistSupport-LinkedIn-Live.pptx
+ *
+ * Design system:
+ *   - Background: warm-graphite dark (#0b0d10 → #141a22 subtle gradient
+ *     via solid fills, since pptx can't do radial gradients natively)
+ *   - Accent: teal #4fd1c5
+ *   - Type: IBM Plex Sans (fallback Calibri), JetBrains Mono (fallback Consolas)
+ *   - Slides are native text boxes + shapes + embedded PNGs, so the
+ *     speaker can edit titles/bullets in PowerPoint before the Live.
+ */
+
+import PptxGenJS from "pptxgenjs";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const ROOT = resolve(__dirname, "..", "..");
+const SHOT = (n) => join(ROOT, "docs", "screenshots", "renders", n);
+
+// =========================================================
+// TOKENS
+// =========================================================
+const C = {
+  bg: "0B0D10",
+  bg2: "141A22",
+  surface: "1B2330",
+  border: "262E3B",
+  text1: "F2F5F8",
+  text2: "B8C0CC",
+  text3: "7A8494",
+  accent: "4FD1C5",
+  accentDark: "2AA198",
+  good: "2DD4BF",
+  warn: "FBBF24",
+  bad: "FB7185",
+  info: "60A5FA",
+};
+const FONT = "IBM Plex Sans";
+const MONO = "JetBrains Mono";
+
+// =========================================================
+// DECK SETUP — 16:9 widescreen, 13.333 × 7.5 in
+// =========================================================
+const pptx = new PptxGenJS();
+pptx.layout = "LAYOUT_WIDE"; // 13.333 × 7.5 in
+pptx.title = "Running a local-first support agent on a Mac";
+pptx.author = "Saagar Patel";
+pptx.company = "AssistSupport";
+pptx.subject = "LinkedIn Live — portfolio-grade IT support assistant";
+
+const W = 13.333;
+const H = 7.5;
+
+// Shared master slide: dark background + thin teal accent line + footer
+pptx.defineSlideMaster({
+  title: "BASE",
+  background: { color: C.bg },
+  objects: [
+    // Top accent line
+    {
+      rect: {
+        x: 0,
+        y: 0,
+        w: W,
+        h: 0.04,
+        fill: { color: C.accent },
+        line: { color: C.accent, width: 0 },
+      },
+    },
+    // Bottom thin border strip
+    {
+      rect: {
+        x: 0,
+        y: H - 0.35,
+        w: W,
+        h: 0.02,
+        fill: { color: C.border },
+        line: { color: C.border, width: 0 },
+      },
+    },
+    // Footer left: brand
+    {
+      text: {
+        text: "AssistSupport",
+        options: {
+          x: 0.55,
+          y: H - 0.3,
+          w: 3,
+          h: 0.25,
+          fontFace: FONT,
+          fontSize: 9,
+          color: C.text3,
+          bold: true,
+          charSpacing: 2,
+        },
+      },
+    },
+    // Footer center: talk title
+    {
+      text: {
+        text: "Running a local-first support agent on a Mac",
+        options: {
+          x: 3.5,
+          y: H - 0.3,
+          w: 6.5,
+          h: 0.25,
+          fontFace: FONT,
+          fontSize: 9,
+          color: C.text3,
+          align: "center",
+        },
+      },
+    },
+    // Page numbering is handled per-slide via pageChip() — no
+    // master-level slideNumber to avoid double-numbering.
+  ],
+});
+
+// =========================================================
+// HELPERS
+// =========================================================
+
+/**
+ * Add a numbered page chip (e.g. "01 / 12") in the top-right corner.
+ */
+function pageChip(slide, n, total = 12) {
+  slide.addText(
+    [
+      {
+        text: `${String(n).padStart(2, "0")}`,
+        options: { color: C.accent, bold: true },
+      },
+      { text: ` / ${total}`, options: { color: C.text3 } },
+    ],
+    {
+      x: W - 1.2,
+      y: 0.25,
+      w: 0.9,
+      h: 0.3,
+      fontFace: MONO,
+      fontSize: 10,
+      align: "right",
+      charSpacing: 2,
+    },
+  );
+}
+
+/**
+ * Add the eyebrow label above a slide title, e.g. "CHAPTER 02".
+ */
+function eyebrow(slide, text, x = 0.55, y = 0.55) {
+  slide.addText(text, {
+    x,
+    y,
+    w: 10,
+    h: 0.3,
+    fontFace: MONO,
+    fontSize: 10,
+    color: C.accent,
+    bold: true,
+    charSpacing: 3,
+  });
+}
+
+/**
+ * Add the slide title (the big h1).
+ */
+function title(slide, text, opts = {}) {
+  slide.addText(text, {
+    x: opts.x ?? 0.55,
+    y: opts.y ?? 0.9,
+    w: opts.w ?? W - 1.6,
+    h: opts.h ?? 1.1,
+    fontFace: FONT,
+    fontSize: opts.fontSize ?? 34,
+    color: C.text1,
+    bold: true,
+    valign: "top",
+    charSpacing: -1,
+  });
+}
+
+/**
+ * Add a bulleted body list.
+ */
+function bullets(slide, items, opts = {}) {
+  slide.addText(
+    items.map((t) => ({ text: t, options: { bullet: { code: "2022" } } })),
+    {
+      x: opts.x ?? 0.55,
+      y: opts.y ?? 2.4,
+      w: opts.w ?? W - 1.6,
+      h: opts.h ?? 4,
+      fontFace: FONT,
+      fontSize: opts.fontSize ?? 16,
+      color: C.text2,
+      paraSpaceAfter: 10,
+      valign: "top",
+    },
+  );
+}
+
+/**
+ * Add a horizontal stat row — 2-4 stat cards. `h` defaults to 1.6;
+ * callers can pass a smaller height when vertical space is tight.
+ */
+function statRow(slide, stats, y = 5.3, h = 1.6) {
+  const n = stats.length;
+  const totalW = W - 1.1;
+  const gap = 0.2;
+  const w = (totalW - gap * (n - 1)) / n;
+  const valueFont = h >= 1.5 ? 36 : 30;
+  const valueH = h >= 1.5 ? 0.7 : 0.55;
+  const noteY = h >= 1.5 ? 1.15 : 0.95;
+  stats.forEach((s, i) => {
+    const x = 0.55 + i * (w + gap);
+    slide.addShape(pptx.shapes.ROUNDED_RECTANGLE, {
+      x,
+      y,
+      w,
+      h,
+      fill: { color: C.surface, transparency: 40 },
+      line: { color: C.border, width: 0.5 },
+      rectRadius: 0.1,
+    });
+    slide.addText(s.label, {
+      x: x + 0.2,
+      y: y + 0.12,
+      w: w - 0.4,
+      h: 0.28,
+      fontFace: MONO,
+      fontSize: 10,
+      color: C.accent,
+      bold: true,
+      charSpacing: 2,
+    });
+    slide.addText(s.value, {
+      x: x + 0.2,
+      y: y + 0.4,
+      w: w - 0.4,
+      h: valueH,
+      fontFace: MONO,
+      fontSize: valueFont,
+      color: C.text1,
+      bold: true,
+      charSpacing: -2,
+    });
+    slide.addText(s.note, {
+      x: x + 0.2,
+      y: y + noteY,
+      w: w - 0.4,
+      h: 0.4,
+      fontFace: FONT,
+      fontSize: 10.5,
+      color: C.text2,
+      valign: "top",
+    });
+  });
+}
+
+/**
+ * Add the speaker-notes text the presenter sees off-screen during the Live.
+ */
+function notes(slide, text) {
+  slide.addNotes(text);
+}
+
+// =========================================================
+// SLIDE 01 — TITLE
+// =========================================================
+{
+  const s = pptx.addSlide({ masterName: "BASE" });
+  pageChip(s, 1);
+
+  s.addText("● LIVE · portfolio walkthrough", {
+    x: 0.55,
+    y: 2.9,
+    w: 6,
+    h: 0.4,
+    fontFace: MONO,
+    fontSize: 12,
+    color: C.accent,
+    charSpacing: 3,
+  });
+
+  s.addText("Running a local-first", {
+    x: 0.55,
+    y: 3.25,
+    w: 11,
+    h: 1.1,
+    fontFace: FONT,
+    fontSize: 64,
+    color: C.text1,
+    bold: true,
+    charSpacing: -2,
+  });
+  s.addText(
+    [
+      { text: "support agent ", options: { color: C.text1 } },
+      { text: "on a Mac.", options: { color: C.accent } },
+    ],
+    {
+      x: 0.55,
+      y: 4.25,
+      w: 11,
+      h: 1.1,
+      fontFace: FONT,
+      fontSize: 64,
+      bold: true,
+      charSpacing: -2,
+    },
+  );
+
+  s.addText(
+    "How AssistSupport drafts KB-grounded IT support responses in under 25 ms — without a single query leaving the laptop.",
+    {
+      x: 0.55,
+      y: 5.6,
+      w: 10,
+      h: 0.9,
+      fontFace: FONT,
+      fontSize: 15,
+      color: C.text2,
+      valign: "top",
+    },
+  );
+
+  // Speaker chip
+  s.addShape(pptx.shapes.ROUNDED_RECTANGLE, {
+    x: 0.55,
+    y: 6.55,
+    w: 5.2,
+    h: 0.5,
+    fill: { color: C.surface, transparency: 30 },
+    line: { color: C.border, width: 0.5 },
+    rectRadius: 0.08,
+  });
+  s.addText(
+    [
+      { text: "Saagar Patel", options: { color: C.text1, bold: true } },
+      { text: "  ·  IT Platform Eng · Box", options: { color: C.text3 } },
+    ],
+    {
+      x: 0.75,
+      y: 6.55,
+      w: 5,
+      h: 0.5,
+      fontFace: FONT,
+      fontSize: 12,
+      valign: "middle",
+    },
+  );
+
+  notes(
+    s,
+    [
+      "Welcome — we're going to walk through AssistSupport, a Tauri + React + Rust IT support assistant that runs entirely on a laptop.",
+      "No cloud round trips. No queries leave the machine. The whole ML pipeline — classifier, retrieval, reranker, generation — is local.",
+      "Format for the next ~30 minutes: show the product, then the architecture, then what I learned shipping it.",
+    ].join("\n"),
+  );
+}
+
+// =========================================================
+// SLIDE 02 — THE PROBLEM
+// =========================================================
+{
+  const s = pptx.addSlide({ masterName: "BASE" });
+  pageChip(s, 2);
+  eyebrow(s, "CHAPTER 01 · THE PROBLEM");
+  title(s, "IT support drowns in the same questions — and cloud AI isn't a clean fix.");
+
+  bullets(
+    s,
+    [
+      "Every IT team repeats itself: ~25% of tickets are policy / howto questions already answered in the KB.",
+      "Cloud LLMs promise automation but add three sharp costs: data leaves the tenant, hallucinations look confident, and per-seat pricing compounds.",
+      "Vendor assistants hide their routing and retrieval — when they answer wrong, you can't debug why.",
+      "The real bar: draft something a human would actually paste into Jira, cite where the claim came from, and be honest when the KB doesn't know.",
+    ],
+    { y: 2.3, fontSize: 17 },
+  );
+
+  notes(
+    s,
+    "Set the frame: this isn't 'replace IT with AI' — it's 'give IT a second brain that's cheap, auditable, and local'.",
+  );
+}
+
+// =========================================================
+// SLIDE 03 — THE THESIS
+// =========================================================
+{
+  const s = pptx.addSlide({ masterName: "BASE" });
+  pageChip(s, 3);
+  eyebrow(s, "CHAPTER 02 · THESIS");
+  title(s, "A second brain — not a replacement.");
+
+  // Three-pillar grid
+  const pillars = [
+    {
+      head: "LOCAL-FIRST",
+      body: "App, sidecar, classifier, retrieval, reranker, and LLM all run on-device. SQLCipher AES-256 at rest. Zero data leaves the machine.",
+    },
+    {
+      head: "KB-GROUNDED",
+      body: "Every draft cites real KB articles. Hybrid retrieval over 3,500+ indexed docs; inline [n] markers you can click.",
+    },
+    {
+      head: "TRUST-GATED",
+      body: "Confidence modes (answer / clarify / abstain). The model is allowed to refuse when the KB doesn't cover the question.",
+    },
+  ];
+  pillars.forEach((p, i) => {
+    const x = 0.55 + i * 4.15;
+    s.addShape(pptx.shapes.ROUNDED_RECTANGLE, {
+      x,
+      y: 2.3,
+      w: 4,
+      h: 3.4,
+      fill: { color: C.surface, transparency: 40 },
+      line: { color: C.border, width: 0.5 },
+      rectRadius: 0.12,
+    });
+    s.addText(`0${i + 1}`, {
+      x: x + 0.25,
+      y: 2.45,
+      w: 1,
+      h: 0.4,
+      fontFace: MONO,
+      fontSize: 12,
+      color: C.accent,
+      bold: true,
+    });
+    s.addText(p.head, {
+      x: x + 0.25,
+      y: 2.9,
+      w: 3.6,
+      h: 0.5,
+      fontFace: FONT,
+      fontSize: 20,
+      color: C.text1,
+      bold: true,
+      charSpacing: -0.5,
+    });
+    s.addText(p.body, {
+      x: x + 0.25,
+      y: 3.55,
+      w: 3.6,
+      h: 2,
+      fontFace: FONT,
+      fontSize: 13,
+      color: C.text2,
+      valign: "top",
+    });
+  });
+
+  s.addText(
+    "You don't need a foundation model on every desk. You need a pipeline that knows the KB cold, runs fast, and keeps the operator in the loop.",
+    {
+      x: 0.55,
+      y: 6.0,
+      w: W - 1.1,
+      h: 0.8,
+      fontFace: FONT,
+      fontSize: 15,
+      color: C.text2,
+      italic: true,
+      valign: "top",
+    },
+  );
+
+  notes(
+    s,
+    "Frame the three pillars. They map 1:1 to the feature pillars on the one-pager.",
+  );
+}
+
+// =========================================================
+// SLIDE 04 — ARCHITECTURE
+// =========================================================
+{
+  const s = pptx.addSlide({ masterName: "BASE" });
+  pageChip(s, 4);
+  eyebrow(s, "CHAPTER 03 · ARCHITECTURE");
+  title(s, "The pipeline — five stages, all local.");
+
+  // 5-stage pipeline diagram
+  const stages = [
+    { label: "INTENT", sub: "logreg", time: "3 ms" },
+    { label: "RETRIEVE", sub: "TF-IDF", time: "22 ms" },
+    { label: "RERANK", sub: "MiniLM", time: "48 ms" },
+    { label: "DRAFT", sub: "llama3.1-8b", time: "1.2 s" },
+    { label: "LEARN", sub: "feedback", time: "loop" },
+  ];
+  const boxW = 2.2;
+  const gap = 0.3;
+  const totalW = boxW * stages.length + gap * (stages.length - 1);
+  const startX = (W - totalW) / 2;
+  const stageY = 2.6;
+
+  stages.forEach((st, i) => {
+    const x = startX + i * (boxW + gap);
+    const isActive = i === 3;
+    s.addShape(pptx.shapes.ROUNDED_RECTANGLE, {
+      x,
+      y: stageY,
+      w: boxW,
+      h: 1.5,
+      fill: {
+        color: isActive ? C.accent : C.surface,
+        transparency: isActive ? 70 : 40,
+      },
+      line: {
+        color: isActive ? C.accent : C.border,
+        width: isActive ? 1.25 : 0.5,
+      },
+      rectRadius: 0.12,
+    });
+    s.addText(st.label, {
+      x,
+      y: stageY + 0.2,
+      w: boxW,
+      h: 0.35,
+      fontFace: MONO,
+      fontSize: 11,
+      color: isActive ? C.accent : C.text3,
+      bold: true,
+      align: "center",
+      charSpacing: 3,
+    });
+    s.addText(st.sub, {
+      x,
+      y: stageY + 0.6,
+      w: boxW,
+      h: 0.4,
+      fontFace: FONT,
+      fontSize: 17,
+      color: C.text1,
+      bold: true,
+      align: "center",
+    });
+    s.addText(st.time, {
+      x,
+      y: stageY + 1.05,
+      w: boxW,
+      h: 0.35,
+      fontFace: MONO,
+      fontSize: 12,
+      color: C.text2,
+      align: "center",
+    });
+    // Arrow between boxes
+    if (i < stages.length - 1) {
+      s.addShape(pptx.shapes.RIGHT_TRIANGLE, {
+        x: x + boxW + 0.06,
+        y: stageY + 0.65,
+        w: 0.2,
+        h: 0.2,
+        fill: { color: C.accent },
+        line: { color: C.accent, width: 0 },
+        rotate: 90,
+      });
+    }
+  });
+
+  // Context tray below pipeline
+  s.addText(
+    [
+      {
+        text: "Runtime: ",
+        options: { color: C.text3, bold: true, charSpacing: 2 },
+      },
+      { text: "Tauri 2 shell · Rust sidecar · React 19 frontend · Ollama (llama3.1-8b) · SQLCipher SQLite", options: { color: C.text2 } },
+    ],
+    {
+      x: 0.55,
+      y: 4.6,
+      w: W - 1.1,
+      h: 0.5,
+      fontFace: FONT,
+      fontSize: 13,
+      valign: "top",
+    },
+  );
+
+  statRow(
+    s,
+    [
+      { label: "END-TO-END P95", value: "1.8s", note: "full draft, hybrid search + 8B token gen" },
+      { label: "P50 HYBRID SEARCH", value: "22ms", note: "TF-IDF + MiniLM-L6 rerank" },
+      { label: "MEMORY FOOTPRINT", value: "~5GB", note: "llama3.1-8b q4 + app + indexes" },
+      { label: "DATA EXFIL", value: "0 B", note: "everything stays on the machine" },
+    ],
+    5.4,
+  );
+
+  notes(
+    s,
+    [
+      "Walk through left to right. Emphasize the latency budget — each box is a specific choice (logreg over BERT for intent, MiniLM cross-encoder over dense ANN, llama3.1-8b over 70B).",
+      "Close with 'zero bytes leave the machine' — that's the tenant story.",
+    ].join("\n"),
+  );
+}
+
+// =========================================================
+// SLIDE 05 — DEMO: THE WORKSPACE
+// =========================================================
+{
+  const s = pptx.addSlide({ masterName: "BASE" });
+  pageChip(s, 5);
+  eyebrow(s, "CHAPTER 04 · DEMO");
+  title(s, "The workspace — composer, answer, triage.");
+
+  // Hero screenshot
+  s.addImage({
+    path: SHOT("01-workspace.png"),
+    x: 0.55,
+    y: 2.25,
+    w: 8.5,
+    h: 5.31, // 16:10 ratio ≈ 8.5 × (1800/2880) = 5.31
+    sizing: { type: "contain", w: 8.5, h: 5.31 },
+  });
+
+  // Annotation callouts on the right
+  const callouts = [
+    {
+      n: "01",
+      head: "Composer",
+      body: "Paste a ticket, pick the intent chip, set response length — ⌘↵ generates a draft.",
+    },
+    {
+      n: "02",
+      head: "Hero answer",
+      body: "16px / 1.65 prose at 70ch. Inline [n] pills click through to the cited source.",
+    },
+    {
+      n: "03",
+      head: "Triage rail",
+      body: "Workflow · signals · alternatives · feedback · context — all in one column.",
+    },
+  ];
+  callouts.forEach((c, i) => {
+    const y = 2.3 + i * 1.8;
+    s.addShape(pptx.shapes.ROUNDED_RECTANGLE, {
+      x: 9.4,
+      y,
+      w: 3.4,
+      h: 1.65,
+      fill: { color: C.surface, transparency: 40 },
+      line: { color: C.border, width: 0.5 },
+      rectRadius: 0.1,
+    });
+    s.addText(c.n, {
+      x: 9.55,
+      y: y + 0.1,
+      w: 0.6,
+      h: 0.3,
+      fontFace: MONO,
+      fontSize: 10,
+      color: C.accent,
+      bold: true,
+      charSpacing: 2,
+    });
+    s.addText(c.head, {
+      x: 9.55,
+      y: y + 0.4,
+      w: 3.1,
+      h: 0.35,
+      fontFace: FONT,
+      fontSize: 15,
+      color: C.text1,
+      bold: true,
+    });
+    s.addText(c.body, {
+      x: 9.55,
+      y: y + 0.78,
+      w: 3.1,
+      h: 0.85,
+      fontFace: FONT,
+      fontSize: 11,
+      color: C.text2,
+      valign: "top",
+    });
+  });
+
+  notes(
+    s,
+    "Live demo pause point. Scroll the draft, click a citation, show the hover state on a KB source.",
+  );
+}
+
+// =========================================================
+// SLIDE 06 — ML INTENT
+// =========================================================
+{
+  const s = pptx.addSlide({ masterName: "BASE" });
+  pageChip(s, 6);
+  eyebrow(s, "CHAPTER 05 · ML INTENT");
+  title(s, "Why logreg + TF-IDF beat embeddings here.");
+
+  bullets(
+    s,
+    [
+      "Logistic regression over TF-IDF bigrams — 3 ms on-device, 0.914 macro-F1 across policy / howto / access / incident / runbook.",
+      "Calibrated with Platt scaling so the softmax score actually means what it claims — at ≥0.80 the hit rate is 0.88 empirically.",
+      "Feature weights are inspectable: every routing decision is a ranked list of tokens, not a dense vector. Easy to debug, retrain.",
+      "Dense embeddings would have matched F1 at ~50× the latency and ~500× the model size. Wrong tool for the budget.",
+    ],
+    { y: 2.3, w: 7.8, fontSize: 14 },
+  );
+
+  // Intent screenshot thumb
+  s.addImage({
+    path: SHOT("03-intent.png"),
+    x: 8.6,
+    y: 2.3,
+    w: 4.2,
+    h: 2.63,
+    sizing: { type: "contain", w: 4.2, h: 2.63 },
+  });
+  s.addText("Live classifier trace for AS-4218", {
+    x: 8.6,
+    y: 4.98,
+    w: 4.2,
+    h: 0.3,
+    fontFace: MONO,
+    fontSize: 9,
+    color: C.text3,
+    align: "center",
+  });
+
+  statRow(
+    s,
+    [
+      { label: "MACRO-F1", value: "0.914", note: "40-case eval suite #4812" },
+      { label: "LATENCY", value: "3 ms", note: "per ticket, on-device" },
+      { label: "MODEL SIZE", value: "4 MB", note: "vs 450MB+ for a small BERT" },
+    ],
+    5.5,
+  );
+
+  notes(
+    s,
+    "Be ready for the 'why not embeddings' question. The answer: latency budget + auditability. Also note calibration matters more than raw F1 for routing.",
+  );
+}
+
+// =========================================================
+// SLIDE 07 — HYBRID SEARCH
+// =========================================================
+{
+  const s = pptx.addSlide({ masterName: "BASE" });
+  pageChip(s, 7);
+  eyebrow(s, "CHAPTER 06 · HYBRID SEARCH");
+  title(s, "Sub-25 ms retrieval over 3,500+ articles.");
+
+  // Left column: explanation
+  bullets(
+    s,
+    [
+      "Stage 1 — TF-IDF returns ~14 candidates in 22 ms. Cheap, deterministic, no GPU.",
+      "Stage 2 — ms-marco-MiniLM-L-6-v2 cross-encoder reranks the candidates in 48 ms on CPU.",
+      "Top-4 survive into the draft as the LLM's context. Each one carries a citable title + heading path.",
+      "The reranker is the quality lever — TF-IDF alone would cite topically relevant but semantically wrong articles.",
+    ],
+    { y: 2.3, x: 0.55, w: 7, fontSize: 15 },
+  );
+
+  // Right: latency breakdown diagram
+  s.addShape(pptx.shapes.ROUNDED_RECTANGLE, {
+    x: 7.9,
+    y: 2.3,
+    w: 4.9,
+    h: 3.5,
+    fill: { color: C.surface, transparency: 40 },
+    line: { color: C.border, width: 0.5 },
+    rectRadius: 0.12,
+  });
+  s.addText("LATENCY BUDGET · p50", {
+    x: 8.1,
+    y: 2.45,
+    w: 4.5,
+    h: 0.3,
+    fontFace: MONO,
+    fontSize: 10,
+    color: C.accent,
+    bold: true,
+    charSpacing: 2,
+  });
+
+  const lat = [
+    { label: "Intent", v: 3, color: C.info },
+    { label: "TF-IDF retrieval", v: 22, color: C.accent },
+    { label: "MiniLM rerank", v: 48, color: C.good },
+    { label: "Context build", v: 4, color: C.warn },
+  ];
+  const totalMs = 77;
+  lat.forEach((row, i) => {
+    const y = 2.85 + i * 0.65;
+    s.addText(row.label, {
+      x: 8.1,
+      y,
+      w: 1.8,
+      h: 0.4,
+      fontFace: FONT,
+      fontSize: 12,
+      color: C.text2,
+      valign: "middle",
+    });
+    // Bar
+    const barW = (row.v / totalMs) * 2.5;
+    s.addShape(pptx.shapes.ROUNDED_RECTANGLE, {
+      x: 9.9,
+      y: y + 0.1,
+      w: barW,
+      h: 0.2,
+      fill: { color: row.color },
+      line: { color: row.color, width: 0 },
+      rectRadius: 0.04,
+    });
+    s.addText(`${row.v} ms`, {
+      x: 12.1,
+      y,
+      w: 0.7,
+      h: 0.4,
+      fontFace: MONO,
+      fontSize: 11,
+      color: C.text1,
+      bold: true,
+      valign: "middle",
+    });
+  });
+
+  s.addText("End to retrieval: 77 ms · then LLM draft streams in 1.2 s", {
+    x: 8.1,
+    y: 5.45,
+    w: 4.5,
+    h: 0.3,
+    fontFace: MONO,
+    fontSize: 10,
+    color: C.text3,
+  });
+
+  statRow(
+    s,
+    [
+      { label: "P50 HYBRID SEARCH", value: "22ms", note: "TF-IDF candidate retrieval" },
+      { label: "P95 HYBRID SEARCH", value: "46ms", note: "measured on M3 MBP" },
+      { label: "KB ARTICLES", value: "3,500+", note: "local SQLite, 46s reindex" },
+    ],
+    5.9,
+    1.2,
+  );
+
+  notes(
+    s,
+    "Key message: cross-encoder is slow but cheap here because it only sees 14 candidates. That's the architectural trick.",
+  );
+}
+
+// =========================================================
+// SLIDE 08 — TRUST GATING
+// =========================================================
+{
+  const s = pptx.addSlide({ masterName: "BASE" });
+  pageChip(s, 8);
+  eyebrow(s, "CHAPTER 07 · TRUST GATING");
+  title(s, "The model is allowed to say 'I don't know.'");
+
+  // Three mode cards
+  const modes = [
+    {
+      head: "ANSWER",
+      color: C.good,
+      body: "Confidence ≥ 0.80 and all claims grounded. Draft ships with inline [n] citations.",
+    },
+    {
+      head: "CLARIFY",
+      color: C.warn,
+      body: "0.60–0.79 or partial grounding. The draft asks one targeted clarifying question back.",
+    },
+    {
+      head: "ABSTAIN",
+      color: C.bad,
+      body: "Below threshold or unsupported. Flag the ticket as a KB gap candidate and surface to the operator.",
+    },
+  ];
+  modes.forEach((m, i) => {
+    const x = 0.55 + i * 4.15;
+    s.addShape(pptx.shapes.ROUNDED_RECTANGLE, {
+      x,
+      y: 2.3,
+      w: 4,
+      h: 2.4,
+      fill: { color: C.surface, transparency: 40 },
+      line: { color: m.color, width: 0.75 },
+      rectRadius: 0.12,
+    });
+    s.addText(m.head, {
+      x: x + 0.3,
+      y: 2.5,
+      w: 3.5,
+      h: 0.5,
+      fontFace: MONO,
+      fontSize: 13,
+      color: m.color,
+      bold: true,
+      charSpacing: 3,
+    });
+    s.addText(m.body, {
+      x: x + 0.3,
+      y: 3.1,
+      w: 3.5,
+      h: 1.5,
+      fontFace: FONT,
+      fontSize: 13,
+      color: C.text2,
+      valign: "top",
+    });
+  });
+
+  bullets(
+    s,
+    [
+      "Inline citations are generated into the prompt, not post-hoc — so the model can't cite a doc it didn't see.",
+      "Grounded-claims check runs a per-sentence match against retrieved chunks; unsupported sentences get flagged.",
+      "Operators thumbs-up / thumbs-down every draft. Thumbs-down feeds straight into the KB gap analyzer (next slide).",
+    ],
+    { y: 5.0, fontSize: 14 },
+  );
+
+  notes(
+    s,
+    "This is the section that lands with IT security audiences. Emphasize 'grounded' — citations are real files, not invented URLs.",
+  );
+}
+
+// =========================================================
+// SLIDE 09 — SELF-IMPROVING LOOP
+// =========================================================
+{
+  const s = pptx.addSlide({ masterName: "BASE" });
+  pageChip(s, 9);
+  eyebrow(s, "CHAPTER 08 · FEEDBACK LOOP");
+  title(s, "Low-confidence queries become the KB backlog.");
+
+  // KB gap dashboard screenshot
+  s.addImage({
+    path: SHOT("04-kb-gap.png"),
+    x: 0.55,
+    y: 2.3,
+    w: 7.5,
+    h: 4.69,
+    sizing: { type: "contain", w: 7.5, h: 4.69 },
+  });
+
+  // Right column explanation
+  bullets(
+    s,
+    [
+      "Every abstained or low-confidence query lands in a cluster.",
+      "Clusters ranked by impact = affected tickets × retrieval miss rate.",
+      "Top clusters become a prioritized list of KB articles to write.",
+      "Writers fill the gap → next week's confidence distribution shifts right.",
+      "The loop is measurable: 14-day view shows grounded-vs-abstained trend.",
+    ],
+    { x: 8.4, y: 2.3, w: 4.4, h: 4.7, fontSize: 13 },
+  );
+
+  notes(
+    s,
+    "The compound story: every confident draft is a deflection, every abstention is a lead on what to write next. Both outcomes are wins.",
+  );
+}
+
+// =========================================================
+// SLIDE 10 — OPS SURFACE
+// =========================================================
+{
+  const s = pptx.addSlide({ masterName: "BASE" });
+  pageChip(s, 10);
+  eyebrow(s, "CHAPTER 09 · OPS");
+  title(s, "Yes, a desktop app needs a deploy story.");
+
+  // Left: ops screenshot
+  s.addImage({
+    path: SHOT("05-ops.png"),
+    x: 0.55,
+    y: 2.3,
+    w: 6.2,
+    h: 3.87,
+    sizing: { type: "contain", w: 6.2, h: 3.87 },
+  });
+  s.addText("Deploy / rollback surface", {
+    x: 0.55,
+    y: 6.2,
+    w: 6.2,
+    h: 0.3,
+    fontFace: MONO,
+    fontSize: 10,
+    color: C.text3,
+    align: "center",
+  });
+
+  // Right: eval screenshot
+  s.addImage({
+    path: SHOT("06-eval.png"),
+    x: 7.0,
+    y: 2.3,
+    w: 5.8,
+    h: 3.62,
+    sizing: { type: "contain", w: 5.8, h: 3.62 },
+  });
+  s.addText("Eval harness · run #4812", {
+    x: 7.0,
+    y: 5.95,
+    w: 5.8,
+    h: 0.3,
+    fontFace: MONO,
+    fontSize: 10,
+    color: C.text3,
+    align: "center",
+  });
+
+  s.addText(
+    "Canary on 10% → guardrails on p95 latency, error rate, and grounding score → auto-promote. 90-second rollback SLO.",
+    {
+      x: 0.55,
+      y: 6.6,
+      w: W - 1.1,
+      h: 0.5,
+      fontFace: FONT,
+      fontSize: 14,
+      color: C.text2,
+      italic: true,
+      valign: "top",
+    },
+  );
+
+  notes(
+    s,
+    "Talk about the eval gate specifically — grounding ≥ 0.90, faithfulness ≥ 0.95, safety refusals 100%. These are release blockers.",
+  );
+}
+
+// =========================================================
+// SLIDE 11 — WHAT I LEARNED
+// =========================================================
+{
+  const s = pptx.addSlide({ masterName: "BASE" });
+  pageChip(s, 11);
+  eyebrow(s, "CHAPTER 10 · LESSONS");
+  title(s, "Five things I didn't expect.");
+
+  const lessons = [
+    {
+      n: "01",
+      head: "Local-first is a UX decision, not just a security one.",
+      body: "Operators trust a tool more when they can literally turn their Wi-Fi off and it still works. The privacy story lands emotionally.",
+    },
+    {
+      n: "02",
+      head: "Prompt-cache hits are the real latency win.",
+      body: "The intent + retrieval output is cached per-ticket — second generations are 3× faster. Worth more than model quantization.",
+    },
+    {
+      n: "03",
+      head: "Logreg is not a downgrade — it's a feature.",
+      body: "Inspectable weights mean every routing decision is defensible. 'Why did you send this to the policy lane' has a concrete answer.",
+    },
+    {
+      n: "04",
+      head: "Tauri + Rust is the right desktop stack in 2026.",
+      body: "Bundle size, Apple notarization, and Rust FFI for the ML sidecar made iteration 2-3× faster than the Electron alternative.",
+    },
+    {
+      n: "05",
+      head: "The feedback loop only works if rating is one click.",
+      body: "Anything longer than thumbs-up / thumbs-down gets skipped. All the KB gap data comes from that single-click surface.",
+    },
+  ];
+  lessons.forEach((l, i) => {
+    const y = 2.3 + i * 0.88;
+    s.addText(l.n, {
+      x: 0.55,
+      y,
+      w: 0.7,
+      h: 0.5,
+      fontFace: MONO,
+      fontSize: 16,
+      color: C.accent,
+      bold: true,
+      valign: "top",
+    });
+    s.addText(l.head, {
+      x: 1.3,
+      y: y - 0.05,
+      w: 11.5,
+      h: 0.45,
+      fontFace: FONT,
+      fontSize: 16,
+      color: C.text1,
+      bold: true,
+      valign: "top",
+    });
+    s.addText(l.body, {
+      x: 1.3,
+      y: y + 0.4,
+      w: 11.5,
+      h: 0.5,
+      fontFace: FONT,
+      fontSize: 12,
+      color: C.text2,
+      valign: "top",
+    });
+  });
+
+  notes(
+    s,
+    "Pick one to spend extra time on depending on the audience: #1 for IT leaders, #2 for ML eng, #4 for devs.",
+  );
+}
+
+// =========================================================
+// SLIDE 12 — RESOURCES + Q&A
+// =========================================================
+{
+  const s = pptx.addSlide({ masterName: "BASE" });
+  pageChip(s, 12);
+
+  s.addText("● THANKS FOR WATCHING", {
+    x: 0.55,
+    y: 1.2,
+    w: 10,
+    h: 0.4,
+    fontFace: MONO,
+    fontSize: 12,
+    color: C.accent,
+    charSpacing: 3,
+  });
+
+  s.addText("Questions?", {
+    x: 0.55,
+    y: 1.7,
+    w: 12,
+    h: 1.4,
+    fontFace: FONT,
+    fontSize: 72,
+    color: C.text1,
+    bold: true,
+    charSpacing: -2,
+  });
+
+  s.addText(
+    "Open source · MIT licensed · runs on any M-series MacBook with Ollama installed.",
+    {
+      x: 0.55,
+      y: 3.2,
+      w: 12,
+      h: 0.6,
+      fontFace: FONT,
+      fontSize: 18,
+      color: C.text2,
+    },
+  );
+
+  // Resource cards
+  const resources = [
+    {
+      label: "REPO",
+      value: "github.com/saagpatel/AssistSupport",
+      note: "229 commits · v1.2.0 · MIT",
+    },
+    {
+      label: "DECK + ONE-PAGER",
+      value: "portfolio drop",
+      note: "PDF + slide deck + screenshot set",
+    },
+    {
+      label: "CONNECT",
+      value: "in/saagarpatel",
+      note: "DMs open — IT platform + local AI",
+    },
+  ];
+  resources.forEach((r, i) => {
+    const x = 0.55 + i * 4.15;
+    s.addShape(pptx.shapes.ROUNDED_RECTANGLE, {
+      x,
+      y: 4.3,
+      w: 4,
+      h: 1.9,
+      fill: { color: C.surface, transparency: 40 },
+      line: { color: C.border, width: 0.5 },
+      rectRadius: 0.12,
+    });
+    s.addText(r.label, {
+      x: x + 0.25,
+      y: 4.45,
+      w: 3.6,
+      h: 0.3,
+      fontFace: MONO,
+      fontSize: 10,
+      color: C.accent,
+      bold: true,
+      charSpacing: 2,
+    });
+    s.addText(r.value, {
+      x: x + 0.25,
+      y: 4.8,
+      w: 3.6,
+      h: 0.6,
+      fontFace: FONT,
+      fontSize: 16,
+      color: C.text1,
+      bold: true,
+    });
+    s.addText(r.note, {
+      x: x + 0.25,
+      y: 5.4,
+      w: 3.6,
+      h: 0.65,
+      fontFace: FONT,
+      fontSize: 11,
+      color: C.text2,
+      valign: "top",
+    });
+  });
+
+  s.addText(
+    "Built with Tauri 2 · React 19 · TypeScript · Rust · SQLCipher · Ollama · TF-IDF + MiniLM-L-6-v2 · logreg intent classifier",
+    {
+      x: 0.55,
+      y: 6.5,
+      w: W - 1.1,
+      h: 0.5,
+      fontFace: MONO,
+      fontSize: 11,
+      color: C.text3,
+      align: "center",
+      charSpacing: 1,
+    },
+  );
+
+  notes(
+    s,
+    "Leave this on screen for the full Q&A window. Repeat the repo URL verbally once or twice.",
+  );
+}
+
+// =========================================================
+// WRITE
+// =========================================================
+const outPath = join(__dirname, "AssistSupport-LinkedIn-Live.pptx");
+await pptx.writeFile({ fileName: outPath });
+console.log(`✓ wrote ${outPath}`);
diff --git a/docs/deck/package-lock.json b/docs/deck/package-lock.json
new file mode 100644
index 0000000..5889a6c
--- /dev/null
+++ b/docs/deck/package-lock.json
@@ -0,0 +1,171 @@
+{
+  "name": "assistsupport-deck",
+  "version": "0.0.1",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "assistsupport-deck",
+      "version": "0.0.1",
+      "dependencies": {
+        "pptxgenjs": "^3.12.0"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "18.19.130",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.130.tgz",
+      "integrity": "sha512-GRaXQx6jGfL8sKfaIDD6OupbIHBr9jv7Jnaml9tB7l4v068PAOXqfcujMMo5PhbIs6ggR1XODELqahT2R8v0fg==",
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~5.26.4"
+      }
+    },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "license": "MIT"
+    },
+    "node_modules/https": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/https/-/https-1.0.0.tgz",
+      "integrity": "sha512-4EC57ddXrkaF0x83Oj8sM6SLQHAWXw90Skqu2M4AEWENZ3F02dFJE/GARA8igO79tcgYqGrD7ae4f5L3um2lgg==",
+      "license": "ISC"
+    },
+    "node_modules/image-size": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/image-size/-/image-size-1.2.1.tgz",
+      "integrity": "sha512-rH+46sQJ2dlwfjfhCyNx5thzrv+dtmBIhPHk0zgRUukHzZ/kRueTJXoYYsclBaKcSMBWuGbOFXtioLpzTb5euw==",
+      "license": "MIT",
+      "dependencies": {
+        "queue": "6.0.2"
+      },
+      "bin": {
+        "image-size": "bin/image-size.js"
+      },
+      "engines": {
+        "node": ">=16.x"
+      }
+    },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "license": "MIT"
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "license": "MIT"
+    },
+    "node_modules/jszip": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
+      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "license": "(MIT OR GPL-3.0-or-later)",
+      "dependencies": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      }
+    },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "license": "(MIT AND Zlib)"
+    },
+    "node_modules/pptxgenjs": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/pptxgenjs/-/pptxgenjs-3.12.0.tgz",
+      "integrity": "sha512-ZozkYKWb1MoPR4ucw3/aFYlHkVIJxo9czikEclcUVnS4Iw/M+r+TEwdlB3fyAWO9JY1USxJDt0Y0/r15IR/RUA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "^18.7.3",
+        "https": "^1.0.0",
+        "image-size": "^1.0.0",
+        "jszip": "^3.7.1"
+      }
+    },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "license": "MIT"
+    },
+    "node_modules/queue": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz",
+      "integrity": "sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "~2.0.3"
+      }
+    },
+    "node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
+      "license": "MIT"
+    },
+    "node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "5.26.5",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
+      "license": "MIT"
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "license": "MIT"
+    }
+  }
+}
diff --git a/docs/deck/package.json b/docs/deck/package.json
new file mode 100644
index 0000000..cba1f7d
--- /dev/null
+++ b/docs/deck/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "assistsupport-deck",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "description": "Local builder for the LinkedIn Live deck — kept out of the root package.json to avoid polluting app deps.",
+  "scripts": {
+    "build": "node build.mjs"
+  },
+  "dependencies": {
+    "pptxgenjs": "^3.12.0"
+  }
+}
diff --git a/docs/one-pager/AssistSupport-one-pager.pdf b/docs/one-pager/AssistSupport-one-pager.pdf
new file mode 100644
index 0000000..04759aa
Binary files /dev/null and b/docs/one-pager/AssistSupport-one-pager.pdf differ
diff --git a/docs/one-pager/AssistSupport-one-pager.png b/docs/one-pager/AssistSupport-one-pager.png
new file mode 100644
index 0000000..8893fbe
Binary files /dev/null and b/docs/one-pager/AssistSupport-one-pager.png differ
diff --git a/docs/one-pager/README.md b/docs/one-pager/README.md
new file mode 100644
index 0000000..623b0fa
--- /dev/null
+++ b/docs/one-pager/README.md
@@ -0,0 +1,92 @@
+# Landscape-Letter One-pager
+
+Session 3 of the AssistSupport portfolio pass. A single-page landscape
+letter (11in × 8.5in) that sits next to the screenshot set as the
+print-ready portfolio leave-behind.
+
+## Output
+
+| File                                                       | Purpose                               |
+| ---------------------------------------------------------- | ------------------------------------- |
+| [AssistSupport-one-pager.pdf](AssistSupport-one-pager.pdf) | Print-ready landscape letter, 1 page. |
+| [AssistSupport-one-pager.png](AssistSupport-one-pager.png) | 2× PNG preview (2112 × 1632) for web. |
+| [one-pager.html](one-pager.html)                           | Source. Regenerate via the script.    |
+| [generate.mjs](generate.mjs)                               | Playwright-based PDF + PNG generator. |
+
+## Layout
+
+```
+┌──────────────────────────────────────────────────────────────────┐
+│ [A] AssistSupport           ● runs on mac · Tauri 2 · portfolio  │
+├──────────────────────────────────────────────────────────────────┤
+│ YOUR SUPPORT TEAM'S SECOND BRAIN                                  │
+│                                                                   │
+│ ML-powered answers from                        ┌────────────────┐│
+│ your own knowledge base                        │                ││
+│ — in under 25ms, without                       │  HERO SHOT     ││
+│ sending a single query to                      │  (workspace)   ││
+│ the cloud.                                     │                ││
+│ [Sub-paragraph explaining the stack…]          └────────────────┘│
+│                                                                   │
+│ FIVE FEATURE PILLARS                                              │
+│ [01 ML intent] [02 Hybrid] [03 Trust] [04 Feedback] [05 Local]    │
+│                                                                   │
+│ ──────────────────────────────────────────────────────────────── │
+│   25%              │   <25ms              │   3,500+              │
+│   ticket deflection│   hybrid search p50  │   KB articles indexed │
+│ ──────────────────────────────────────────────────────────────── │
+│ Tauri · React · TS · Rust · SQLCipher · Ollama   github.com/…     │
+└──────────────────────────────────────────────────────────────────┘
+```
+
+## Design-system continuity
+
+Uses the same tokens as the Workspace redesign and the screenshot set:
+
+- Palette: `--as-surface-0/1`, `--as-glass-2`, teal `--as-accent-1`
+- Type: IBM Plex Sans + JetBrains Mono
+- Shell glow: radial gradients from `--as-glow-1`, `--as-glow-2`
+- Single accent: teal is the only decorative color; status colors (good
+  / warn / info) are not used on this page, which keeps the piece
+  visually calm for print.
+
+The hero screenshot embedded on the page is
+[`docs/screenshots/renders/01-workspace.png`](../screenshots/renders/01-workspace.png)
+from session 2 — if that screenshot changes, re-run
+[`generate.mjs`](generate.mjs) and the one-pager picks it up.
+
+## Content
+
+- **Tagline:** "Your support team's second brain" (eyebrow) +
+  "ML-powered answers from your own knowledge base — in under 25ms,
+  without sending a single query to the cloud." (headline)
+- **Five feature pillars:** ML intent classification · Sub-25ms hybrid
+  search · Trust-gated responses · Self-improving feedback loop ·
+  Local-first &amp; encrypted. Each pillar carries a one-line body and
+  a small mono stat tag (e.g. `0.914 macro-F1`, `22ms p50`,
+  `0.93 grounded · 0.96 faithful`).
+- **Impact strip (3 columns):**
+  - **25%** ticket deflection — benchmark from prior Aisera deployment
+  - **<25ms** hybrid search p50 — measured on M3 MBP, eval run #4812
+  - **3,500+** KB articles indexed — nightly reindex, 46s
+- **Footer:** tech stack chips (Tauri 2 · React 19 · TypeScript · Rust
+  · SQLCipher · Ollama · TF-IDF + MiniLM) plus repo URL.
+
+## Regenerating
+
+```bash
+# from repo root
+node docs/one-pager/generate.mjs
+```
+
+PDF is written at 11in × 8.5in landscape with `preferCSSPageSize: true`
+so the CSS `@page` rule drives the sheet. Background colors are
+preserved via `-webkit-print-color-adjust: exact`. PNG preview is
+captured at 2× device pixel ratio (2112 × 1632) so the same source
+file doubles as a web-ready hero image.
+
+## What's next
+
+Session 4 turns the one-pager positioning, the feature pillars, and the
+screenshot set into a 12-slide deck for a LinkedIn Live titled
+_Running a local-first support agent on a Mac_.
diff --git a/docs/one-pager/generate.mjs b/docs/one-pager/generate.mjs
new file mode 100644
index 0000000..f26f67b
--- /dev/null
+++ b/docs/one-pager/generate.mjs
@@ -0,0 +1,66 @@
+/**
+ * generate.mjs — render one-pager.html to landscape-letter PDF + 2× PNG
+ * preview via headless Chromium.
+ *
+ * Run from the repo root:
+ *     node docs/one-pager/generate.mjs
+ *
+ * Outputs:
+ *   docs/one-pager/AssistSupport-one-pager.pdf (11in × 8.5in landscape)
+ *   docs/one-pager/AssistSupport-one-pager.png (2112 × 1632 preview, 2×)
+ */
+
+import { chromium } from "@playwright/test";
+import { dirname, join } from "node:path";
+import { fileURLToPath, pathToFileURL } from "node:url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const SRC = join(__dirname, "one-pager.html");
+const PDF = join(__dirname, "AssistSupport-one-pager.pdf");
+const PNG = join(__dirname, "AssistSupport-one-pager.png");
+
+const CSS_W = 1056; // 11in @ 96dpi
+const CSS_H = 816;  //  8.5in @ 96dpi
+
+const browser = await chromium.launch();
+
+// --- PNG preview (2× raster) ---
+{
+  const ctx = await browser.newContext({
+    viewport: { width: CSS_W, height: CSS_H },
+    deviceScaleFactor: 2,
+    colorScheme: "dark",
+  });
+  const page = await ctx.newPage();
+  await page.goto(pathToFileURL(SRC).href, { waitUntil: "networkidle" });
+  await page.waitForTimeout(500);
+  await page.screenshot({
+    path: PNG,
+    clip: { x: 0, y: 0, width: CSS_W, height: CSS_H },
+  });
+  await ctx.close();
+  console.log(`✓ ${PNG}  (2× PNG preview)`);
+}
+
+// --- PDF (vector, landscape-letter) ---
+{
+  const ctx = await browser.newContext({
+    viewport: { width: CSS_W, height: CSS_H },
+    colorScheme: "dark",
+  });
+  const page = await ctx.newPage();
+  await page.goto(pathToFileURL(SRC).href, { waitUntil: "networkidle" });
+  await page.waitForTimeout(500);
+  await page.pdf({
+    path: PDF,
+    format: "Letter",
+    landscape: true,
+    printBackground: true,
+    margin: { top: "0", right: "0", bottom: "0", left: "0" },
+    preferCSSPageSize: true,
+  });
+  await ctx.close();
+  console.log(`✓ ${PDF}  (11in × 8.5in landscape)`);
+}
+
+await browser.close();
diff --git a/docs/one-pager/one-pager.html b/docs/one-pager/one-pager.html
new file mode 100644
index 0000000..679079f
--- /dev/null
+++ b/docs/one-pager/one-pager.html
@@ -0,0 +1,631 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>AssistSupport — One-pager</title>
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap"
+    />
+    <style>
+      /* =========================================================
+         Landscape letter one-pager — 11in × 8.5in
+         Rendered at 1056 × 816 CSS px (96dpi), printed to PDF.
+         Tokens mirror src/styles/revamp/tokens.css 1:1.
+         ========================================================= */
+      :root {
+        --as-font-sans: "IBM Plex Sans", ui-sans-serif, system-ui,
+          -apple-system, sans-serif;
+        --as-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
+          Monaco, monospace;
+
+        --as-surface-0: #0b0d10;
+        --as-surface-1: #0f1218;
+        --as-surface-2: #141a22;
+        --as-surface-3: #1b2330;
+        --as-border-1: rgba(255, 255, 255, 0.08);
+        --as-border-2: rgba(255, 255, 255, 0.14);
+
+        --as-text-1: rgba(255, 255, 255, 0.94);
+        --as-text-2: rgba(255, 255, 255, 0.74);
+        --as-text-3: rgba(255, 255, 255, 0.56);
+
+        --as-accent-1: #4fd1c5;
+        --as-accent-2: #2aa198;
+        --as-accent-ink: #061615;
+        --as-accent-surface-1: rgba(79, 209, 197, 0.08);
+        --as-accent-border-1: rgba(79, 209, 197, 0.35);
+
+        --as-good: #2dd4bf;
+        --as-warn: #fbbf24;
+        --as-info: #60a5fa;
+
+        --as-glass-1: rgba(255, 255, 255, 0.02);
+        --as-glass-2: rgba(255, 255, 255, 0.035);
+        --as-glass-3: rgba(255, 255, 255, 0.06);
+
+        --as-glow-1: rgba(79, 209, 197, 0.18);
+        --as-glow-2: rgba(96, 165, 250, 0.1);
+      }
+
+      @page {
+        size: 11in 8.5in;
+        margin: 0;
+      }
+
+      * {
+        box-sizing: border-box;
+        -webkit-print-color-adjust: exact;
+        print-color-adjust: exact;
+      }
+
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        background: var(--as-surface-0);
+      }
+
+      .page {
+        width: 1056px;
+        height: 816px;
+        padding: 28px 40px 24px;
+        color: var(--as-text-1);
+        font-family: var(--as-font-sans);
+        letter-spacing: 0.1px;
+        background:
+          radial-gradient(
+            900px 540px at 8% -10%,
+            var(--as-glow-1),
+            transparent 55%
+          ),
+          radial-gradient(
+            700px 420px at 92% -5%,
+            var(--as-glow-2),
+            transparent 50%
+          ),
+          linear-gradient(180deg, var(--as-surface-0) 0%, var(--as-surface-1) 100%);
+        display: grid;
+        grid-template-rows: auto minmax(0, 1fr) auto auto auto;
+        gap: 16px;
+        position: relative;
+        overflow: hidden;
+      }
+
+      /* ============== HEADER ============== */
+      .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .brand {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+
+      .brand__mark {
+        width: 36px;
+        height: 36px;
+        border-radius: 9px;
+        display: grid;
+        place-items: center;
+        background: linear-gradient(
+          135deg,
+          var(--as-accent-1) 0%,
+          var(--as-accent-2) 100%
+        );
+        color: var(--as-accent-ink);
+        font-weight: 700;
+        font-size: 16px;
+      }
+
+      .brand__name {
+        font-size: 16.5px;
+        font-weight: 600;
+        letter-spacing: -0.1px;
+        line-height: 1.1;
+      }
+
+      .brand__sub {
+        margin-top: 1px;
+        font-family: var(--as-font-mono);
+        font-size: 10.5px;
+        color: var(--as-text-3);
+        letter-spacing: 0.4px;
+      }
+
+      .headerMeta {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .pill {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        padding: 4px 10px;
+        border-radius: 999px;
+        font-size: 10px;
+        font-weight: 600;
+        letter-spacing: 0.4px;
+        text-transform: uppercase;
+        background: var(--as-glass-2);
+        border: 1px solid var(--as-border-1);
+        color: var(--as-text-2);
+      }
+
+      .pill--accent {
+        background: var(--as-accent-surface-1);
+        border-color: var(--as-accent-border-1);
+        color: var(--as-accent-1);
+      }
+
+      .pill .dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: var(--as-good);
+        box-shadow: 0 0 6px var(--as-good);
+      }
+
+      /* ============== TOP ROW: TAGLINE + HERO ============== */
+      .top {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) minmax(0, 1.28fr);
+        gap: 28px;
+        align-items: center;
+        min-height: 0;
+      }
+
+      .tagline {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        min-width: 0;
+      }
+
+      .tagline__label {
+        font-family: var(--as-font-mono);
+        font-size: 10.5px;
+        font-weight: 600;
+        letter-spacing: 1.4px;
+        text-transform: uppercase;
+        color: var(--as-accent-1);
+      }
+
+      .tagline__h1 {
+        margin: 0;
+        font-size: 34px;
+        font-weight: 600;
+        line-height: 1.08;
+        letter-spacing: -0.6px;
+        color: var(--as-text-1);
+      }
+
+      .tagline__h1 em {
+        font-style: normal;
+        color: var(--as-accent-1);
+      }
+
+      .tagline__sub {
+        margin: 2px 0 0;
+        font-size: 12.5px;
+        line-height: 1.55;
+        color: var(--as-text-2);
+        max-width: 46ch;
+      }
+
+      .hero {
+        position: relative;
+        border-radius: 14px;
+        overflow: hidden;
+        border: 1px solid var(--as-accent-border-1);
+        box-shadow:
+          0 0 0 1px rgba(79, 209, 197, 0.05),
+          0 24px 48px -24px rgba(0, 0, 0, 0.7);
+        background: var(--as-surface-1);
+        min-width: 0;
+      }
+
+      .hero img {
+        display: block;
+        width: 100%;
+        height: auto;
+      }
+
+      .heroCaption {
+        position: absolute;
+        left: 12px;
+        bottom: 12px;
+        padding: 4px 9px;
+        background: rgba(11, 13, 16, 0.85);
+        border: 1px solid var(--as-border-1);
+        border-radius: 6px;
+        color: var(--as-text-2);
+        font-size: 10px;
+        font-family: var(--as-font-mono);
+        letter-spacing: 0.3px;
+      }
+
+      .heroCaption b {
+        color: var(--as-accent-1);
+        font-weight: 600;
+      }
+
+      /* ============== PILLARS (5-col horizontal row) ============== */
+      .pillarsBlock {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+
+      .pillarsHead {
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+        font-family: var(--as-font-mono);
+        font-size: 10.5px;
+        font-weight: 600;
+        letter-spacing: 1.2px;
+        text-transform: uppercase;
+      }
+
+      .pillarsHead__label {
+        color: var(--as-text-3);
+      }
+
+      .pillarsHead__note {
+        color: var(--as-text-3);
+        font-weight: 400;
+        letter-spacing: 0.2px;
+        text-transform: none;
+        font-size: 11px;
+      }
+
+      .pillars {
+        display: grid;
+        grid-template-columns: repeat(5, minmax(0, 1fr));
+        gap: 10px;
+      }
+
+      .pillar {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        padding: 12px 13px 11px;
+        background: var(--as-glass-2);
+        border: 1px solid var(--as-border-1);
+        border-radius: 10px;
+        min-width: 0;
+      }
+
+      .pillar__num {
+        font-family: var(--as-font-mono);
+        font-size: 10px;
+        font-weight: 600;
+        color: var(--as-accent-1);
+        letter-spacing: 0.8px;
+      }
+
+      .pillar__title {
+        font-size: 12.5px;
+        font-weight: 600;
+        letter-spacing: -0.1px;
+        color: var(--as-text-1);
+        line-height: 1.25;
+      }
+
+      .pillar__body {
+        font-size: 11px;
+        line-height: 1.4;
+        color: var(--as-text-2);
+        flex: 1;
+      }
+
+      .pillar__tag {
+        margin-top: 2px;
+        font-family: var(--as-font-mono);
+        font-size: 10px;
+        color: var(--as-text-3);
+        letter-spacing: 0.3px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      .pillar__tag b {
+        color: var(--as-accent-1);
+        font-weight: 600;
+      }
+
+      /* ============== IMPACT STRIP ============== */
+      .impact {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 0;
+        padding: 14px 0;
+        border-top: 1px solid var(--as-border-2);
+        border-bottom: 1px solid var(--as-border-2);
+        background: linear-gradient(
+          180deg,
+          rgba(79, 209, 197, 0.03) 0%,
+          transparent 100%
+        );
+      }
+
+      .stat {
+        padding: 2px 22px;
+        border-right: 1px solid var(--as-border-1);
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+
+      .stat:first-child {
+        padding-left: 0;
+      }
+
+      .stat:last-child {
+        border-right: 0;
+        padding-right: 0;
+      }
+
+      .stat__label {
+        font-family: var(--as-font-mono);
+        font-size: 10px;
+        font-weight: 600;
+        letter-spacing: 1.4px;
+        text-transform: uppercase;
+        color: var(--as-accent-1);
+      }
+
+      .stat__value {
+        display: flex;
+        align-items: baseline;
+        gap: 5px;
+        color: var(--as-text-1);
+      }
+
+      .stat__num {
+        font-family: var(--as-font-mono);
+        font-size: 38px;
+        font-weight: 600;
+        letter-spacing: -1px;
+        line-height: 1;
+        font-variant-numeric: tabular-nums;
+      }
+
+      .stat__unit {
+        font-family: var(--as-font-mono);
+        font-size: 16px;
+        color: var(--as-text-2);
+        font-weight: 500;
+      }
+
+      .stat__caption {
+        font-size: 11px;
+        line-height: 1.4;
+        color: var(--as-text-2);
+      }
+
+      .stat__source {
+        font-family: var(--as-font-mono);
+        font-size: 9.5px;
+        color: var(--as-text-3);
+        letter-spacing: 0.3px;
+      }
+
+      /* ============== FOOTER ============== */
+      .footer {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-family: var(--as-font-mono);
+        font-size: 10px;
+        color: var(--as-text-3);
+        letter-spacing: 0.3px;
+      }
+
+      .footer__stack {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        flex-wrap: wrap;
+      }
+
+      .footer__chip {
+        display: inline-flex;
+        padding: 3px 7px;
+        border: 1px solid var(--as-border-1);
+        border-radius: 5px;
+        background: var(--as-glass-2);
+        color: var(--as-text-2);
+        font-size: 10px;
+      }
+
+      .footer__right {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="page">
+      <!-- ============== HEADER ============== -->
+      <header class="header">
+        <div class="brand">
+          <div class="brand__mark">A</div>
+          <div>
+            <div class="brand__name">AssistSupport</div>
+            <div class="brand__sub">local-first · v1.2.0 · MIT</div>
+          </div>
+        </div>
+        <div class="headerMeta">
+          <span class="pill"><span class="dot"></span>runs on your MacBook</span>
+          <span class="pill">Tauri 2 + Rust</span>
+          <span class="pill pill--accent">portfolio-grade</span>
+        </div>
+      </header>
+
+      <!-- ============== TOP ROW: TAGLINE + HERO ============== -->
+      <section class="top">
+        <div class="tagline">
+          <div class="tagline__label">Your support team's second brain</div>
+          <h1 class="tagline__h1">
+            ML-powered answers from <em>your own</em> knowledge base — in
+            under 25&#8239;ms, without sending a single query to the cloud.
+          </h1>
+          <p class="tagline__sub">
+            Local LLM inference plus a hybrid ML search pipeline that drafts
+            accurate, KB-grounded IT support responses entirely on the
+            operator's laptop. SQLCipher AES-256 at rest, a self-improving
+            feedback loop, and an ops surface for deploy, rollback, and
+            eval — all shipped as a single Tauri app.
+          </p>
+        </div>
+        <figure class="hero" style="margin: 0">
+          <img
+            src="../screenshots/renders/01-workspace.png"
+            alt="AssistSupport workspace — three-region draft flow"
+          />
+          <figcaption class="heroCaption">
+            <b>Workspace</b> · composer · KB-grounded answer · triage rail
+          </figcaption>
+        </figure>
+      </section>
+
+      <!-- ============== PILLARS ============== -->
+      <section class="pillarsBlock">
+        <div class="pillarsHead">
+          <span class="pillarsHead__label">Five feature pillars</span>
+          <span class="pillarsHead__note"
+            >— local inference · hybrid search · trust-gated · self-improving · encrypted</span
+          >
+        </div>
+        <div class="pillars">
+          <div class="pillar">
+            <div class="pillar__num">01</div>
+            <div class="pillar__title">ML intent classification</div>
+            <div class="pillar__body">
+              A calibrated logistic-regression classifier routes every
+              ticket — policy, howto, access, incident — in under 5&#8239;ms.
+            </div>
+            <div class="pillar__tag">
+              <b>0.914</b> macro-F1
+            </div>
+          </div>
+
+          <div class="pillar">
+            <div class="pillar__num">02</div>
+            <div class="pillar__title">Sub-25&#8239;ms hybrid search</div>
+            <div class="pillar__body">
+              TF-IDF retrieval plus a ms-marco-MiniLM-L-6-v2 cross-encoder
+              reranker — citations are real files, not hallucinations.
+            </div>
+            <div class="pillar__tag"><b>22&#8239;ms</b> p50 · 46&#8239;ms p95</div>
+          </div>
+
+          <div class="pillar">
+            <div class="pillar__num">03</div>
+            <div class="pillar__title">Trust-gated responses</div>
+            <div class="pillar__body">
+              Confidence modes (answer · clarify · abstain) plus inline [n]
+              citations link every sentence back to its source.
+            </div>
+            <div class="pillar__tag">
+              <b>0.93</b> grounded · <b>0.96</b> faithful
+            </div>
+          </div>
+
+          <div class="pillar">
+            <div class="pillar__num">04</div>
+            <div class="pillar__title">Self-improving feedback loop</div>
+            <div class="pillar__body">
+              Low-confidence queries get clustered into KB gaps, ranked by
+              impact, and turned into a prioritized list of articles.
+            </div>
+            <div class="pillar__tag">
+              <b>14</b> gap clusters · 87 tickets
+            </div>
+          </div>
+
+          <div class="pillar">
+            <div class="pillar__num">05</div>
+            <div class="pillar__title">Local-first &amp; encrypted</div>
+            <div class="pillar__body">
+              SQLCipher AES-256 at rest, local Ollama inference. Zero data
+              leaves the machine. Ships with deploy / rollback / eval ops.
+            </div>
+            <div class="pillar__tag">
+              <b>SQLCipher</b> · Ollama · Tauri 2
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- ============== IMPACT STRIP ============== -->
+      <section class="impact">
+        <div class="stat">
+          <div class="stat__label">Ticket deflection</div>
+          <div class="stat__value">
+            <span class="stat__num">25</span>
+            <span class="stat__unit">%</span>
+          </div>
+          <div class="stat__caption">
+            of tier-1 tickets never reach a human — drafts accepted and
+            pasted into Jira as-is.
+          </div>
+          <div class="stat__source">benchmark: prior Aisera deployment</div>
+        </div>
+        <div class="stat">
+          <div class="stat__label">Hybrid search latency</div>
+          <div class="stat__value">
+            <span class="stat__num">&lt;25</span>
+            <span class="stat__unit">ms</span>
+          </div>
+          <div class="stat__caption">
+            p50 across TF-IDF candidate retrieval plus cross-encoder
+            reranker — instant in the composer.
+          </div>
+          <div class="stat__source">
+            measured on M3 MacBook Pro · eval run #4812
+          </div>
+        </div>
+        <div class="stat">
+          <div class="stat__label">KB articles indexed</div>
+          <div class="stat__value">
+            <span class="stat__num">3,500</span>
+            <span class="stat__unit">+</span>
+          </div>
+          <div class="stat__caption">
+            local SQLite index of policies, runbooks, how-tos, and incident
+            retrospectives — refreshed nightly.
+          </div>
+          <div class="stat__source">nightly reindex · 46&#8239;s · see Ops surface</div>
+        </div>
+      </section>
+
+      <!-- ============== FOOTER ============== -->
+      <footer class="footer">
+        <div class="footer__stack">
+          <span class="footer__chip">Tauri 2</span>
+          <span class="footer__chip">React 19</span>
+          <span class="footer__chip">TypeScript</span>
+          <span class="footer__chip">Rust</span>
+          <span class="footer__chip">SQLCipher</span>
+          <span class="footer__chip">Ollama</span>
+          <span class="footer__chip">TF-IDF + MiniLM</span>
+        </div>
+        <div class="footer__right">
+          <span>github.com/saagpatel/AssistSupport</span>
+          <span>·</span>
+          <span>MIT · 229 commits · macOS</span>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/docs/portfolio/README.md b/docs/portfolio/README.md
new file mode 100644
index 0000000..4b1fa06
--- /dev/null
+++ b/docs/portfolio/README.md
@@ -0,0 +1,143 @@
+# AssistSupport Portfolio Pass
+
+Single entry point for the four-session portfolio build. Everything in
+this folder is meta-documentation — the actual artifacts live in their
+respective session folders and are linked below.
+
+## The four artifacts
+
+| #   | Artifact                                        | Session folder                                  | Primary output                                                                                 |
+| --- | ----------------------------------------------- | ----------------------------------------------- | ---------------------------------------------------------------------------------------------- |
+| 1   | Workspace redesign — Claude Code handoff bundle | [`docs/redesign/`](../redesign/README.md)       | [`WorkspaceHeroLayout.tsx`](../../src/features/workspace/WorkspaceHeroLayout.tsx) + CSS + spec |
+| 2   | 6-panel 2× portfolio screenshot set             | [`docs/screenshots/`](../screenshots/README.md) | Six 2880×1800 PNGs + 2×3 contact sheet + captions                                              |
+| 3   | Landscape-letter one-pager PDF                  | [`docs/one-pager/`](../one-pager/README.md)     | [`AssistSupport-one-pager.pdf`](../one-pager/AssistSupport-one-pager.pdf) (11in × 8.5in)       |
+| 4   | 12-slide LinkedIn Live deck                     | [`docs/deck/`](../deck/README.md)               | [`AssistSupport-LinkedIn-Live.pptx`](../deck/AssistSupport-LinkedIn-Live.pptx) + PDF preview   |
+
+## Shared design system
+
+All four artifacts consume the same token set from the live app —
+[`src/styles/revamp/tokens.css`](../../src/styles/revamp/tokens.css).
+No artifact introduces new tokens.
+
+| Role            | Token / value                                           |
+| --------------- | ------------------------------------------------------- |
+| Background      | `--as-surface-0` `#0B0D10` → `--as-surface-1` `#0F1218` |
+| Surfaces        | `--as-glass-1/2/3` translucent panels                   |
+| Border          | `--as-border-1/2`                                       |
+| Text            | `--as-text-1/2/3` (opacity ramps from 0.92 to 0.56)     |
+| Accent (single) | `--as-accent-1` teal `#4FD1C5`                          |
+| Status          | `--as-good/warn/bad/info` — functional only             |
+| Headings / body | IBM Plex Sans                                           |
+| Code / metrics  | JetBrains Mono                                          |
+| Shell glow      | `--as-glow-1/2` radial gradients                        |
+
+The design rule across every artifact: **teal is the only decorative
+color.** Status colors carry meaning (confidence tone, release-gate
+status, KB-gap flags) but are never used for decoration.
+
+## How the pieces connect
+
+```
+      ┌────────────────────────────────────────────────┐
+      │  tokens.css  (live app · single source)        │
+      └──────────────────────────┬─────────────────────┘
+                                 │
+         ┌───────────────────────┼──────────────────────┐
+         │                       │                      │
+         ▼                       ▼                      ▼
+  Session 1                Session 2                Session 4
+  Workspace redesign  ───► Screenshot set  ───►  LinkedIn Live deck
+  (new React + CSS)        (6 × 2× PNGs)         (embeds the PNGs)
+                                 │
+                                 ▼
+                           Session 3
+                           One-pager PDF
+                           (embeds panel 01 as hero)
+```
+
+If the workspace redesign lands on master, re-running session 2's
+capture script regenerates every screenshot; sessions 3 and 4 then
+pick up the new screenshots on their next build. The whole portfolio
+re-syncs from a single source.
+
+## Voice
+
+Engineering-professional across all four artifacts:
+
+- No emojis
+- No marketing superlatives
+- Specific numbers: `22 ms p50`, `0.914 macro-F1`, `3,500+ articles`,
+  `25% deflection`, `90-second rollback SLO`
+- Pronouns first-person singular only in the deck (sessions 1–3 are
+  product-voice, session 4 is speaker-voice)
+- Citations are real — every number traces back to either the README,
+  the eval harness, or a prior production benchmark
+
+## Regeneration commands
+
+```bash
+# Session 1 — verify handoff bundle compiles
+pnpm install
+pnpm ui:typecheck
+
+# Session 2 — rerender six panels + contact sheet
+node docs/screenshots/capture.mjs
+
+# Session 3 — rerender one-pager PDF + PNG preview
+node docs/one-pager/generate.mjs
+
+# Session 4 — rebuild the PPTX (+ optional PDF)
+cd docs/deck && npm run build
+soffice --headless --convert-to pdf AssistSupport-LinkedIn-Live.pptx
+```
+
+## Inventory
+
+```
+docs/
+├── portfolio/
+│   └── README.md                         ← this file
+├── redesign/
+│   ├── README.md
+│   ├── SPEC.md
+│   ├── INTEGRATION.md
+│   └── ACCEPTANCE.md
+├── screenshots/
+│   ├── README.md
+│   ├── CAPTIONS.md
+│   ├── shell.css
+│   ├── capture.mjs
+│   ├── panels/
+│   │   ├── 01-workspace.html
+│   │   ├── 02-queue.html
+│   │   ├── 03-intent.html
+│   │   ├── 04-kb-gap.html
+│   │   ├── 05-ops.html
+│   │   └── 06-eval.html
+│   └── out/
+│       ├── 01-workspace.png              (2880 × 1800)
+│       ├── 02-queue.png                  (2880 × 1800)
+│       ├── 03-intent.png                 (2880 × 1800)
+│       ├── 04-kb-gap.png                 (2880 × 1800)
+│       ├── 05-ops.png                    (2880 × 1800)
+│       ├── 06-eval.png                   (2880 × 1800)
+│       └── contact-sheet.png             (2880 × 2700)
+├── one-pager/
+│   ├── README.md
+│   ├── one-pager.html
+│   ├── generate.mjs
+│   ├── AssistSupport-one-pager.pdf       (11in × 8.5in landscape)
+│   └── AssistSupport-one-pager.png       (2112 × 1632 preview)
+└── deck/
+    ├── README.md
+    ├── build.mjs
+    ├── package.json
+    ├── AssistSupport-LinkedIn-Live.pptx  (editable, 12 slides)
+    └── AssistSupport-LinkedIn-Live.pdf   (PDF preview)
+
+src/
+├── features/workspace/
+│   └── WorkspaceHeroLayout.tsx           (new, drop-in for ClaudeDesignWorkspace)
+└── styles/revamp/
+    └── workspaceHero.css                 (new, scoped under .wsx)
+```
diff --git a/docs/redesign/ACCEPTANCE.md b/docs/redesign/ACCEPTANCE.md
new file mode 100644
index 0000000..f5511f0
--- /dev/null
+++ b/docs/redesign/ACCEPTANCE.md
@@ -0,0 +1,121 @@
+# Workspace Redesign — Acceptance Checklist
+
+The implementing agent is done when every box below is checked. Items
+are grouped so each group can be validated independently.
+
+## Layout
+
+- [ ] At viewport ≥ 1280px, the Workspace tab renders exactly three
+      regions: composer (full width, sticky top), answer hero (left
+      column), triage rail (right column, 340px fixed).
+- [ ] At viewport 900–1279px, the rail narrows to 300px but stays in
+      the right column.
+- [ ] At viewport < 900px, the rail stacks below the answer column,
+      composer stays sticky.
+- [ ] At viewport < 640px, composer footer wraps: chips row above,
+      length + generate row below.
+- [ ] The composer stays pinned at the top while the answer scrolls.
+- [ ] Answer column and rail scroll independently; neither causes
+      the other to re-layout.
+
+## Composer
+
+- [ ] Ticket micro-header shows `{KEY} · {ISSUE_TYPE}` in monospace on
+      the left, summary in the center, priority + auto-detected intent
+      badge on the right.
+- [ ] The blue→violet avatar gradient from `ClaudeDesignWorkspace` is
+      not present anywhere in the new layout.
+- [ ] Textarea min-height 104px, max-height before scroll 240px,
+      `aria-label="Ticket or issue description"`.
+- [ ] Intent chips are a `role="radiogroup"` of 4 options (Policy,
+      Howto, Access, Incident); toggling writes `likely_category` to
+      `caseIntake`.
+- [ ] Length segmented control has 3 options (Short, Medium, Long) and
+      is itself a `role="radiogroup"`.
+- [ ] Generate button shows `⌘↵` kbd pill; becomes a Cancel button
+      while `generating === true`.
+- [ ] Generate is disabled when `!modelLoaded || !input.trim()` and the
+      `title` attribute explains why.
+
+## Answer hero
+
+- [ ] Prose body renders at 16px / 1.65 IBM Plex Sans, clamped to
+      `max-width: 70ch`.
+- [ ] Paragraph gap is 14px.
+- [ ] Inline `[n]` markers render as accent citation pills (same
+      visual as `.cdw .cite`) and invoke `onNavigateToSource` with the
+      source title or file path.
+- [ ] Inline code and fenced code render in JetBrains Mono with the
+      surfaces described in `SPEC.md §3`.
+- [ ] Intent + confidence strip shows only when `confidence` is not
+      null; tone switches on `confidence.mode` (answer/clarify/abstain).
+- [ ] Metrics row shows tok/s, sources count, word count, context %,
+      and claims-supported ratio, all with tabular numerals.
+- [ ] When no response exists yet, the answer column shows the empty
+      state helper text (see spec for copy).
+- [ ] Streaming dot appears at the tail of the prose during streaming.
+- [ ] Answer actions: Regenerate (ghost), Save template (ghost),
+      spacer, Copy response (primary).
+- [ ] Sources block is hidden when `sources.length === 0`, otherwise
+      renders a vertical list of numbered rows that match the
+      inline-citation numbering.
+
+## Triage rail
+
+- [ ] Workflow card is vertical, 4 steps; current step highlighted
+      with `--as-accent-surface-1`, completed steps use
+      `--as-good-surface`.
+- [ ] Signals card shows confidence %, grounded-claims ratio + bar,
+      retrieval latency if provided.
+- [ ] Alternatives card is hidden when `alternatives.length === 0`.
+      When shown, each alt has label `ALT N`, a clamped 2-line
+      preview, and a "Use this" ghost button.
+- [ ] Feedback card renders thumbs up / thumbs down buttons with
+      `aria-pressed`; clicking invokes `onRateResponse` if provided.
+- [ ] `Flag as KB gap` ghost button spans the full width of the
+      feedback card and invokes `onFlagKbGap` if provided.
+- [ ] Context card contains Audience, Tone, Urgency, Environment
+      controls — these are **not** present anywhere else in the
+      layout.
+- [ ] Footer shows `loadedModelName` in monospace, context
+      utilization %, and a small placeholder for the last-run
+      timestamp.
+- [ ] If the rail's content exceeds viewport height, the rail
+      scrolls independently.
+
+## Design system
+
+- [ ] No new tokens are added to `src/styles/revamp/tokens.css`.
+- [ ] The new CSS file only references tokens with the `--as-` prefix.
+- [ ] Single accent: no fill, gradient, or outline in the layout uses
+      purple, blue, magenta, or gradient decoration. Teal is the only
+      accent; status colors (good/warn/bad/info) are only used to
+      communicate status.
+- [ ] `@media (prefers-reduced-motion: reduce)` collapses all
+      transitions to 0ms (inherited from existing design-tokens.css).
+- [ ] `@media (prefers-reduced-transparency: reduce)` still produces a
+      readable layout (solid surfaces from the revamp shell rule).
+
+## Accessibility
+
+- [ ] All interactive elements show the shell's `:focus-visible`
+      outline (`2px solid var(--as-focus)`, 2px offset).
+- [ ] Confidence gauge exposes `aria-label` with percent + tone.
+- [ ] Intent chips, length segmented, and rail thumbs expose correct
+      `role`/`aria-checked`/`aria-pressed`.
+- [ ] Answer prose passes axe with no new contrast violations
+      introduced (`pnpm ui:test:a11y`).
+
+## Quality gates
+
+- [ ] `pnpm typecheck` passes.
+- [ ] `pnpm lint` passes.
+- [ ] `pnpm test` passes, including any new `WorkspaceHeroLayout.test.tsx`.
+- [ ] `pnpm perf:workspace` passes with no new regressions.
+- [ ] `pnpm health:repo` passes end-to-end before the PR is opened.
+
+## Rollback
+
+- [ ] `ClaudeDesignWorkspace.tsx` and its CSS still exist.
+- [ ] Flipping `ASSISTSUPPORT_REVAMP_WORKSPACE_HERO` to `false`
+      restores the previous layout without code changes.
diff --git a/docs/redesign/INTEGRATION.md b/docs/redesign/INTEGRATION.md
new file mode 100644
index 0000000..e94c908
--- /dev/null
+++ b/docs/redesign/INTEGRATION.md
@@ -0,0 +1,120 @@
+# Workspace Redesign — Integration Guide
+
+Step-by-step wiring for the implementing agent. The redesign ships
+behind a revamp feature flag so the current `ClaudeDesignWorkspace`
+layout stays reachable for comparison and rollback.
+
+## 1. Feature flag
+
+Add a new entry alongside the existing revamp flags in
+[`src/features/revamp/flags.ts`](../../src/features/revamp/flags.ts):
+
+```ts
+export interface RevampFlags {
+  // ...existing flags...
+  ASSISTSUPPORT_REVAMP_WORKSPACE_HERO?: boolean;
+}
+```
+
+Default value: `true` in dev, read from the same
+`ASSISTSUPPORT_*` env convention the other revamp flags use. The flag
+is checked inside `DraftTab.tsx` only.
+
+## 2. Swap the renderer in DraftTab
+
+In [`src/components/Draft/DraftTab.tsx`](../../src/components/Draft/DraftTab.tsx):
+
+1. Add a sibling import next to the existing `ClaudeDesignWorkspace`:
+
+   ```ts
+   import { WorkspaceHeroLayout } from "../../features/workspace/WorkspaceHeroLayout";
+   ```
+
+2. Resolve the flag once (the file already calls `resolveRevampFlags()`
+   elsewhere — reuse that reference). At the point that currently
+   builds `claudeDesignWorkspacePanel`, branch on the flag:
+
+   ```tsx
+   const workspacePanel = revampFlags.ASSISTSUPPORT_REVAMP_WORKSPACE_HERO ? (
+     <WorkspaceHeroLayout
+       ticket={currentTicket}
+       ticketId={currentTicketId}
+       /* …identical prop set as ClaudeDesignWorkspace… */
+       onRateResponse={handleRateResponse}
+       onFlagKbGap={handleFlagKbGap}
+       retrievalLatencyMs={lastRetrievalLatencyMs}
+     />
+   ) : (
+     claudeDesignWorkspacePanel
+   );
+   ```
+
+3. Replace the single return site that renders
+   `claudeDesignWorkspacePanel` with `workspacePanel`.
+
+The three new props (`onRateResponse`, `onFlagKbGap`,
+`retrievalLatencyMs`) are optional. If the Draft tab does not already
+have handlers for them the rail renders as informational only — no
+wiring is strictly required for the first commit.
+
+## 3. CSS import
+
+The new component imports its own CSS at the top of the file
+(`import "../../styles/revamp/workspaceHero.css";`) — no change
+required in `App.css` or `styles/revamp/index.css`.
+
+## 4. Tests
+
+1. Duplicate the existing
+   `src/features/workspace/ClaudeDesignWorkspace.tsx` test coverage
+   (currently exercised via the DraftTab component tests) onto the new
+   renderer. A drop-in `WorkspaceHeroLayout.test.tsx` next to the
+   component is the expected location.
+2. Run the Workspace performance suite to confirm there's no regression:
+   ```bash
+   pnpm perf:workspace
+   ```
+3. Run the repo health path before opening a PR:
+   ```bash
+   pnpm health:repo
+   ```
+
+Visual regression snapshots in `tests/ui/*.spec.ts` will need an
+`--update-snapshots` pass (`pnpm ui:test:visual:update`) once the
+redesign is landed behind the flag **and** the flag is turned on in
+the test harness.
+
+## 5. Rollback plan
+
+The old renderer is not deleted. To roll back:
+
+1. Flip `ASSISTSUPPORT_REVAMP_WORKSPACE_HERO` to `false` at the env
+   level, or
+2. Revert the single `workspacePanel` branch in `DraftTab.tsx`.
+
+No token, shell, or other tab is touched — the redesign cannot break
+surfaces outside the Draft tab.
+
+## 6. Out of scope for this change
+
+- Do not consolidate the rail into a shared component with the
+  existing `TicketWorkspaceRail.tsx`. That component powers the Queue
+  context, not the Draft tab. Sharing would require a larger refactor
+  and is explicitly a non-goal here.
+- Do not move audience / tone / urgency / environment into a separate
+  settings modal. They belong inside the rail.
+- Do not delete `ClaudeDesignWorkspace.tsx` or its CSS. Keep both
+  around until the redesign has been running on `true` for two release
+  cycles, then remove in a dedicated cleanup PR.
+
+## 7. Commit hygiene
+
+Recommended commit sequence (keeps each commit atomic and easy to
+revert):
+
+1. `feat(workspace): add WorkspaceHeroLayout renderer`
+2. `feat(workspace): scoped hero-layout CSS`
+3. `feat(revamp): wire WORKSPACE_HERO flag into DraftTab`
+4. `test(workspace): cover WorkspaceHeroLayout render paths`
+
+Branch name convention: `codex/feat/workspace-hero-layout`.
diff --git a/docs/redesign/README.md b/docs/redesign/README.md
new file mode 100644
index 0000000..60a4006
--- /dev/null
+++ b/docs/redesign/README.md
@@ -0,0 +1,107 @@
+# Workspace Redesign — Claude Code Handoff Bundle
+
+Session 1 of the AssistSupport portfolio pass. This bundle redesigns the
+primary Workspace (Draft) screen so the **AI-drafted answer** becomes the
+hero surface of the application, and the composer and triage/feedback
+controls are organized around it.
+
+## What this bundle replaces
+
+Today the Draft tab is rendered by
+[`ClaudeDesignWorkspace.tsx`](../../src/features/workspace/ClaudeDesignWorkspace.tsx),
+which uses a two-column grid (Query + Context | Response + Sources +
+Alternatives). Both columns have roughly equal visual weight, the answer
+body is 13.5px, and feedback/rating controls are scattered across the
+right column together with citations.
+
+This redesign introduces a drop-in replacement,
+[`WorkspaceHeroLayout.tsx`](../../src/features/workspace/WorkspaceHeroLayout.tsx),
+with a three-region geometry:
+
+```
+┌──────────────────────────────────────────────────────────────┐
+│ COMPOSER  (sticky, full-width)                               │
+│   ticket micro-header · textarea · intent chips · length · ⌘↵│
+├──────────────────────────────────────────┬───────────────────┤
+│                                          │                   │
+│  ANSWER HERO  (center, readable column)  │   TRIAGE RAIL     │
+│    · intent + confidence gauge            │   · workflow     │
+│    · AI draft (16px / 1.65, 70ch)         │   · signals      │
+│    · inline [n] citations                 │   · alternatives │
+│    · sources cited (beneath draft)        │   · feedback     │
+│    · regenerate · copy · save template    │   · model/perf   │
+│                                          │                   │
+└──────────────────────────────────────────┴───────────────────┘
+```
+
+The answer column and the right rail scroll independently; the composer
+stays sticky at the top of the viewport while the operator scrolls
+through a long multi-paragraph draft.
+
+## Why these changes
+
+1. **Readability-first hero.** The AI-drafted answer is what the
+   operator will actually paste into Jira. The redesign lifts body text
+   from 13.5px / 1.55 to 16px / 1.65 and clamps line length to 70ch so
+   multi-paragraph drafts read like prose rather than a form field.
+2. **Clear quality loop.** Confidence, grounded-claims breakdown,
+   alternatives, rating capture, and KB-gap flag are consolidated into a
+   single right rail — the feedback loop lives in one place instead of
+   being mixed in with citations.
+3. **Sources stay next to the draft.** Citations and their numbered
+   source list live in the answer column so `[1]`, `[2]` markers remain
+   within eye-tracking distance of the source entries.
+4. **Single-accent discipline.** The redesign drops the
+   blue→violet avatar gradient from the old ticket card and pushes all
+   decoration through the teal accent (`--as-accent-1`). Status colors
+   (good / warn / bad / info) remain functional-only.
+
+## What ships in this bundle
+
+| Path                                                                                                     | Purpose                                                           |
+| -------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- |
+| [`docs/redesign/README.md`](./README.md)                                                                 | This overview.                                                    |
+| [`docs/redesign/SPEC.md`](./SPEC.md)                                                                     | Layout spec, typography scale, component inventory, a11y.         |
+| [`docs/redesign/INTEGRATION.md`](./INTEGRATION.md)                                                       | How to wire the new component into `DraftTab.tsx`.                |
+| [`docs/redesign/ACCEPTANCE.md`](./ACCEPTANCE.md)                                                         | Acceptance checklist for the implementing agent.                  |
+| [`src/features/workspace/WorkspaceHeroLayout.tsx`](../../src/features/workspace/WorkspaceHeroLayout.tsx) | The new 3-region renderer. Same props as `ClaudeDesignWorkspace`. |
+| [`src/styles/revamp/workspaceHero.css`](../../src/styles/revamp/workspaceHero.css)                       | Styles scoped under `.wsx`.                                       |
+
+The existing `ClaudeDesignWorkspace.tsx` and its CSS are **left in
+place** so the redesign can ship behind a flag and be A/B'd or rolled
+back without a git revert.
+
+## Design system continuity
+
+This redesign reuses the existing revamp token set
+([`src/styles/revamp/tokens.css`](../../src/styles/revamp/tokens.css))
+unchanged. No new tokens are introduced and no existing tokens are
+renamed. The new CSS only consumes:
+
+- `--as-surface-*`, `--as-border-*`, `--as-text-*`
+- `--as-glass-1/2/3`
+- `--as-accent-1/2` + `--as-accent-surface-1` + `--as-accent-border-1`
+- `--as-good/warn/bad/info-*`
+- `--as-font-sans`, `--as-font-mono`
+- `--as-space-*`, `--as-radius-*`, `--as-shadow-1`, `--as-focus`
+
+This keeps the new screen visually identical in palette and rhythm to
+the rest of the revamped shell (Queue / Knowledge / Analytics / Ops /
+Settings) and means the same shell continues to cover accent swap,
+density swap, and reduced-transparency media queries.
+
+## Next sessions (context for the implementing agent)
+
+This bundle is the first of four coordinated deliverables for the
+AssistSupport portfolio pass:
+
+1. **Session 1 (this bundle)** — Workspace redesign.
+2. **Session 2** — 6-panel screenshot set.
+3. **Session 3** — Landscape-letter one-pager PDF.
+4. **Session 4** — 12-slide LinkedIn Live deck.
+
+All four share the same design system: teal accent, warm-graphite dark
+surfaces, IBM Plex Sans + JetBrains Mono. When the implementing agent
+works on sessions 2-4 the screenshots will be captured from the UI
+produced here, so any deviation from the spec in this bundle will
+propagate into the collateral.
diff --git a/docs/redesign/SPEC.md b/docs/redesign/SPEC.md
new file mode 100644
index 0000000..be7c088
--- /dev/null
+++ b/docs/redesign/SPEC.md
@@ -0,0 +1,259 @@
+# Workspace Redesign — Layout + Visual Spec
+
+Reference spec for `WorkspaceHeroLayout.tsx` + `workspaceHero.css`.
+Scope: the Workspace (Draft) tab only. Shell, Queue, Knowledge, Ops,
+Analytics, and Settings tabs are unchanged.
+
+## 1. Grid geometry
+
+Desktop viewport ≥ 1280px:
+
+| Region      | Row | Column     | Size                  |
+| ----------- | --- | ---------- | --------------------- |
+| Composer    | 1   | full width | `auto` height, sticky |
+| Answer hero | 2   | col 1      | `minmax(0, 1fr)`      |
+| Triage rail | 2   | col 2      | `340px` fixed         |
+
+Column gap: `24px`. Composer bottom margin: `20px`. Main container
+horizontal padding: `28px`. Overall `cdw`-style scroll container is
+removed; the answer column and rail scroll independently so the
+composer stays in view during long drafts.
+
+Breakpoints:
+
+- `≥1280px` — 3-region layout as above.
+- `900–1279px` — rail collapses to `300px`; composer stays full width.
+- `<900px` — rail stacks below answer column (`grid-template-columns: 1fr`), composer stays sticky.
+- `<640px` — composer footer wraps: chips row above, length + generate row below.
+
+## 2. Composer region
+
+Sticky top of the scroll container. Background uses `--as-glass-2`
+with a `--backdrop-blur: 12px` to visually separate it from the
+scrolling answer.
+
+Children (top-to-bottom):
+
+1. **Ticket micro-header** (single row, 32px tall)
+   - Left: `AS-4218 · REQUEST` (monospace, 11px, uppercase, `--as-text-3`)
+   - Center: ticket summary (14px / 1.3 semibold, truncated)
+   - Right: priority badge + auto-detected intent badge
+   - The blue→violet avatar gradient from `ClaudeDesignWorkspace` is
+     removed; if an avatar is rendered it uses a solid
+     `--as-accent-surface-1` background with accent-1 text.
+2. **Query field** (textarea, 104px min height, 240px max height before scroll, 15px / 1.5)
+3. **Composer footer** (flex row)
+   - Left: intent chip row (`.wsx__chips` — same visual language as
+     `.cdw .chip`)
+   - Right: response-length segmented control + Generate button with
+     `⌘↵` kbd pill. When generating, replaced by Cancel button.
+
+## 3. Answer hero region
+
+Center column. Max inner content width: `720px`, centered within the
+column so the prose never exceeds 70ch. Outer column has the full
+1fr width so the right rail can sit flush.
+
+Vertical stack:
+
+1. **Intent + confidence strip** (when a confidence object exists)
+   - Height 48px, single row
+   - Left: `ML INTENT` label (11px mono, letter-spacing 1px, uppercase)
+     - derived intent class (e.g. `policy / removable_media`)
+   - Right: confidence gauge (`Grounded` / `Needs clarify` / `Abstain`
+     pill + horizontal bar + numeric percent, tabular-nums)
+   - Tone switches on `confidence.mode`: answer → good, clarify → warn,
+     ood → bad
+2. **Metrics row** (tok/s · sources · words · ctx util · claims supported · model name)
+   - 11.5px, all metrics use monospace numerals
+3. **Answer prose**
+   - 16px / 1.65 IBM Plex Sans
+   - `max-width: 70ch`
+   - Paragraph gap: 14px
+   - H2 inside draft: 17px / 1.35 semibold, 24px top margin, 6px bottom
+   - H3 inside draft: 15px / 1.4 semibold
+   - Inline code: JetBrains Mono 14px / 1.45 on `rgba(255, 255, 255, 0.04)` with `--as-radius-1` and 2px/4px padding
+   - Fenced code: JetBrains Mono 13.5px / 1.55 on `--as-glass-3`, 12px padding, `--as-radius-2`
+   - Citation pills: 11px mono, `--as-accent-surface-1` background,
+     `--as-accent-border-1` border, `--as-accent-1` text, 4px radius,
+     2px horizontal margin. Same visual as `.cdw .cite`.
+   - Empty state (no draft yet): 320px min height, centered helper text
+     at 14px `--as-text-3`.
+4. **Answer actions** (bottom of prose block)
+   - Flex row: Regenerate (ghost), Save template (ghost), spacer, Copy response (primary)
+5. **Sources block**
+   - Heading: `Cited sources · click to open` (12px semibold)
+   - Vertical list of `.wsx__source` rows (numbered pill + title + path + score)
+   - Behaves like `.cdw .source` but the number pill uses the same
+     typography as inline citations so they visually connect.
+
+Streaming dot matches existing `.streaming-dot` semantics — 7px accent
+disc with 1.2s pulse.
+
+## 4. Triage rail region
+
+Right column. Width `340px` at ≥1280px, `300px` at 900–1279px, full
+width stacked below the answer at <900px.
+
+Vertical stack (each block is a `.wsx__railCard` with 14px padding, 12px gap between cards):
+
+1. **Workflow progress (vertical)**
+   - Replaces the horizontal `.ws-strip` from `ClaudeDesignWorkspace`.
+   - 4 steps (Triage · Classify · Draft · Send to Jira), each shown
+     as a row with a 20px numbered circle and a label + short status.
+   - Current step highlighted with `--as-accent-surface-1` background,
+     completed steps use `--as-good-surface` number circle.
+2. **Signals**
+   - Confidence summary (the same numeric %, shown smaller: 20px mono semibold)
+   - Grounded claims: `{supported}/{total} claims supported` with a
+     horizontal mini-bar.
+   - Retrieval latency: `{ms}ms hybrid search` (monospace).
+3. **Alternatives**
+   - Hidden when `alternatives.length === 0`.
+   - Stacked vertically instead of horizontal chips.
+   - Each alt: label `ALT 1` (10px mono uppercase) + first 120 chars of
+     preview (12px / 1.35) + "Use this" ghost button.
+4. **Feedback**
+   - Thumbs up / thumbs down buttons (36x36, accent when selected).
+   - `Flag as KB gap` ghost button full width beneath the thumbs row.
+   - Optional 1-line comment field that appears after a thumb is clicked.
+5. **Context**
+   - Audience + Tone + Urgency + Environment selects. These move out of
+     the answer column (where the current design puts them in a
+     "Context" panel) and into the rail so the answer column is prose-only.
+6. **Model / perf footer**
+   - `loadedModelName` in monospace, context utilization %, last-run
+     timestamp. Small, 11px, `--as-text-3`.
+
+The rail never exceeds the viewport height; if the combined cards
+overflow it scrolls independently of the answer column.
+
+## 5. Typography tokens used
+
+| Role                | Family           | Size   | Line | Weight | Tracking |
+| ------------------- | ---------------- | ------ | ---- | ------ | -------- |
+| Answer prose        | `--as-font-sans` | 16px   | 1.65 | 400    | normal   |
+| Answer prose strong | `--as-font-sans` | 16px   | 1.65 | 600    | normal   |
+| Answer H2           | `--as-font-sans` | 17px   | 1.35 | 600    | -0.1px   |
+| Answer H3           | `--as-font-sans` | 15px   | 1.4  | 600    | normal   |
+| Inline code         | `--as-font-mono` | 14px   | 1.45 | 400    | 0        |
+| Fenced code         | `--as-font-mono` | 13.5px | 1.55 | 400    | 0        |
+| Citation pill       | `--as-font-mono` | 11px   | 1    | 600    | 0.4px    |
+| Ticket summary      | `--as-font-sans` | 14px   | 1.3  | 600    | -0.1px   |
+| Ticket id           | `--as-font-mono` | 11px   | 1.2  | 500    | 0.4px    |
+| Composer textarea   | `--as-font-sans` | 15px   | 1.5  | 400    | 0        |
+| Chip                | `--as-font-sans` | 11.5px | 1.2  | 500    | 0        |
+| Segmented           | `--as-font-sans` | 12px   | 1    | 500    | 0        |
+| Rail card title     | `--as-font-sans` | 12px   | 1.2  | 600    | 0.3px    |
+| Rail stat value     | `--as-font-mono` | 20px   | 1    | 600    | tabular  |
+| Rail label          | `--as-font-sans` | 11px   | 1.2  | 500    | 0.2px    |
+| Footer meta         | `--as-font-mono` | 11px   | 1.3  | 400    | 0        |
+
+## 6. Color discipline
+
+Single accent: teal `--as-accent-1` (`#4fd1c5`). No gradient
+decorations anywhere in the redesign. Specifically:
+
+- Ticket avatar uses `--as-accent-surface-1` background with
+  `--as-accent-1` initials instead of the `linear-gradient(135deg,
+#60a5fa, #a78bfa)` from the current design.
+- Confidence bar uses `linear-gradient(90deg, var(--as-good),
+var(--as-accent-1))` **only when** confidence mode is `answer`. In
+  `clarify` it uses a solid `--as-warn`, in `abstain` a solid `--as-bad`.
+- Panel backgrounds never use accent fills; accent is reserved for
+  interactive affordances (chip-on, primary button, citation pills,
+  gauge bar, focus ring).
+
+Status colors `--as-good`, `--as-warn`, `--as-bad`, `--as-info` remain
+functional-only (confidence tone, KB-gap flag, error toast, info
+badges).
+
+## 7. Motion
+
+All transitions use `150ms ease`:
+
+- Chip on/off
+- Button hover
+- Textarea focus
+
+Streaming dot: existing 1.2s pulse from `.cdw .streaming-dot`.
+
+Rail cards fade-slide in 120ms when their underlying data first
+populates (`opacity: 0 → 1`, `transform: translateY(4px) → 0`). No
+entrance animation on composer or answer — they're always present.
+
+Honors `@media (prefers-reduced-motion: reduce)` — all motion collapses
+to 0ms via the existing rule in `design-tokens.css`.
+
+## 8. Accessibility
+
+- Composer textarea has `aria-label="Ticket or issue description"`.
+- Intent chips and length segmented control use `role="radiogroup"` with
+  `role="radio"` + `aria-checked`, same as the current
+  `ClaudeDesignWorkspace`.
+- Confidence gauge has `aria-label` announcing the percent and tone.
+- Citation pills are `<button>` elements with `title` of the source
+  name (existing pattern preserved).
+- Sources list items are `<button>` for keyboard navigation.
+- Rail thumbs up / down buttons have `aria-pressed` state.
+- All interactive elements retain the `:focus-visible` outline from
+  `revampShell.css` (`2px solid var(--as-focus)`, 2px offset).
+
+## 9. Data contract
+
+`WorkspaceHeroLayout` takes exactly the same props as
+`ClaudeDesignWorkspace`:
+
+```ts
+export interface WorkspaceHeroLayoutProps {
+  ticket: JiraTicket | null;
+  ticketId: string | null;
+  input: string;
+  onInputChange: (value: string) => void;
+  responseLength: ResponseLength;
+  onResponseLengthChange: (length: ResponseLength) => void;
+  hasInput: boolean;
+  hasDiagnosis: boolean;
+  hasResponseReady: boolean;
+  handoffTouched: boolean;
+  response: string;
+  streamingText: string;
+  isStreaming: boolean;
+  sources: ContextSource[];
+  metrics: GenerationMetrics | null;
+  confidence: ConfidenceAssessment | null;
+  grounding: GroundedClaim[];
+  alternatives: ResponseAlternative[];
+  generating: boolean;
+  modelLoaded: boolean;
+  loadedModelName: string | null;
+  caseIntake: CaseIntake;
+  onIntakeFieldChange: (
+    field: "note_audience" | "likely_category" | "urgency" | "environment",
+    value: string | null,
+  ) => void;
+  onGenerate: () => void;
+  onCancel: () => void;
+  onCopyResponse: () => void;
+  onSaveAsTemplate: () => void;
+  onUseAlternative: (alt: ResponseAlternative) => void;
+  onNavigateToSource?: (searchQuery: string) => void;
+  /** NEW — optional. Wires the rail feedback controls. */
+  onRateResponse?: (rating: "up" | "down") => void;
+  onFlagKbGap?: () => void;
+  retrievalLatencyMs?: number | null;
+}
+```
+
+The three new props are **optional** so the component is a drop-in
+replacement even if the feedback wiring is not yet implemented — the
+rail will still render the feedback UI, but clicks will no-op.
+
+## 10. Non-goals
+
+- No change to the Queue, Knowledge, Analytics, Ops, or Settings tabs.
+- No change to tokens, shell chrome, command palette, onboarding, or
+  keyboard shortcuts.
+- No new dependencies. No Tailwind, no CSS-in-JS, no animation library.
+- No change to test harness or Playwright snapshots — existing Draft
+  tests should be rerun against the new component once it is wired.
diff --git a/docs/screenshots/CAPTIONS.md b/docs/screenshots/CAPTIONS.md
new file mode 100644
index 0000000..1c770db
--- /dev/null
+++ b/docs/screenshots/CAPTIONS.md
@@ -0,0 +1,66 @@
+# Portfolio Screenshot Set — Captions
+
+Six 2× panels. Four are captures from the live app with the workspace
+hero flag on (`docs/screenshots/live-capture.mjs`); two are HTML
+mockups of surfaces that don't have a dedicated UI in the current
+wave (`docs/screenshots/panels/*.html`).
+
+Voice: engineering-professional. One to two sentences per panel,
+intended for use beside the screenshot on a portfolio site, case
+study, or LinkedIn post.
+
+## 1. Workspace in action · [01-workspace.png](renders/01-workspace.png) · LIVE
+
+> Real capture of the hero workspace: the composer carries the ticket,
+> a grounded draft at 16px / 1.65 lands beneath an 86%-confident
+> gauge, inline `[n]` citations jump to the cited KB source, and the
+> triage rail on the right tracks the 4-step workflow with live
+> signals. Every token of the draft is generated locally on the
+> laptop — the frontend is wired to a mocked Tauri IPC layer so no
+> request leaves the machine even in this dev capture.
+
+## 2. Triage queue with status badges · [02-queue.png](renders/02-queue.png) · LIVE
+
+> Real capture of the Queue Command Center: Triage / History /
+> Templates tabs, per-bucket counters (total / unassigned /
+> in-progress / at-risk), filter chips for queue slice (all /
+> unassigned / at-risk / in-progress / resolved), and the Team
+> Scorecard + Batch Triage side panels. Seeded with the dev mock's
+> single VPN cluster so the recent-clusters list is populated.
+
+## 3. ML intent confidence view · [03-intent.png](renders/03-intent.png) · mockup
+
+> Aspirational transparency view for the logistic-regression intent
+> classifier: predicted class with calibrated probability, per-class
+> logit bars, feature-weight contributions, nearest labeled neighbors,
+> and a live trace through the hybrid pipeline (intent → retrieval
+> → rerank → draft). No dedicated UI for this drilldown ships in the
+> current wave — this is the target surface for the next iteration.
+
+## 4. KB gap analysis dashboard · [04-kb-gap.png](renders/04-kb-gap.png) · LIVE
+
+> Real capture of the Analytics view with the dev mock data: quality
+> metrics (avg time to draft · copy per save · edit save rate) with
+> thresholds and the Knowledge Gaps block ready to surface
+> low-confidence or ungrounded queries once gap candidates exist.
+> The richer populated view (clustered gaps, 14-day confidence
+> distribution, prioritized article backlog) ships as
+> [panels/04-kb-gap.html](panels/04-kb-gap.html) for reference.
+
+## 5. Deployment &amp; rollback ops surface · [05-ops.png](renders/05-ops.png) · LIVE
+
+> Real capture of the Operations / Deployment view: preflight runner,
+> last-run rollback control, release-validation-failure trigger,
+> signed / unsigned artifact counters, and an artifact record for
+> `app_bundle 1.0.0` (stable · signed) with a verify action. The
+> guardrail-gated canary + eval-gate promotion view ships as
+> [panels/05-ops.html](panels/05-ops.html) for the populated version.
+
+## 6. Eval harness results · [06-eval.png](renders/06-eval.png) · mockup
+
+> Aspirational eval-harness surface covering grounding, faithfulness,
+> intent F1, retrieval NDCG@5, end-to-end latency, and safety refusals
+> with explicit release-gate thresholds and a 12-run score history.
+> [OpsTab.tsx](../../src/components/Ops/OpsTab.tsx) explicitly notes
+> that eval tooling stays out of the active UI in this wave — the
+> mockup is the canonical portfolio asset until the feature ships.
diff --git a/docs/screenshots/README.md b/docs/screenshots/README.md
new file mode 100644
index 0000000..fcf69d0
--- /dev/null
+++ b/docs/screenshots/README.md
@@ -0,0 +1,95 @@
+# Portfolio Screenshot Set
+
+Session 2 of the AssistSupport portfolio pass. Six 2× panels that
+document the product at a portfolio level. Each panel has **two
+rendering paths** — a real-app live capture and a token-faithful HTML
+mockup — and the PNG that currently ships under `renders/` is whichever
+reads better for portfolio purposes. Both paths share the same
+[`--as-*` tokens](../../src/styles/revamp/tokens.css) so the visual
+language stays consistent across the set.
+
+## Panels
+
+| #   | PNG under `renders/`                         | Source                                         | Rendered from                 |
+| --- | -------------------------------------------- | ---------------------------------------------- | ----------------------------- |
+| 1   | [01-workspace.png](renders/01-workspace.png) | [live-capture.mjs](live-capture.mjs)           | **Live app** (hero flag on)   |
+| 2   | [02-queue.png](renders/02-queue.png)         | [live-capture.mjs](live-capture.mjs)           | **Live app** (Queue tab)      |
+| 3   | [03-intent.png](renders/03-intent.png)       | [panels/03-intent.html](panels/03-intent.html) | Mockup — no dedicated UI yet  |
+| 4   | [04-kb-gap.png](renders/04-kb-gap.png)       | [live-capture.mjs](live-capture.mjs)           | **Live app** (Analytics tab)  |
+| 5   | [05-ops.png](renders/05-ops.png)             | [live-capture.mjs](live-capture.mjs)           | **Live app** (Operations tab) |
+| 6   | [06-eval.png](renders/06-eval.png)           | [panels/06-eval.html](panels/06-eval.html)     | Mockup — no eval UI in wave   |
+
+Plus a combined 2×3 contact sheet: [contact-sheet.png](renders/contact-sheet.png).
+
+**Why the split?** Panels 1, 2, 4, 5 map 1:1 to real tabs in the app
+(`Workspace`, `Queue`, `Analytics`, `Operations`) and are captured
+from the running dev server with the workspace-hero flag flipped on.
+Panels 3 (ML intent confidence view) and 6 (Eval harness results)
+are aspirational surfaces — [OpsTab.tsx](../../src/components/Ops/OpsTab.tsx)
+explicitly notes that eval, triage, and runbook tooling stays out of
+the active UI in this wave, and the ML-intent drilldown doesn't have
+a dedicated page. For those two, the HTML mockup is the canonical
+portfolio asset until the feature ships.
+
+## Rendering paths
+
+### Live capture ([live-capture.mjs](live-capture.mjs))
+
+Starts `pnpm dev` on port 1422 with `VITE_E2E_MOCK_TAURI=1` so the
+frontend runs browser-standalone against the IPC mocks in
+[`src/test/e2eTauriMock.ts`](../../src/test/e2eTauriMock.ts). Primes
+`localStorage` with the workspace-hero flag and the admin-tabs
+override, drives the composer on the Workspace tab so a grounded
+draft actually renders, then navigates through Queue / Analytics /
+Operations and screenshots each at 1440×900 CSS / 2× DPR.
+
+```bash
+# from repo root
+node docs/screenshots/live-capture.mjs
+```
+
+### HTML mockup ([capture.mjs](capture.mjs))
+
+Six self-contained HTML files under [`panels/`](panels/) that reuse
+the live app's token set via [`shell.css`](shell.css). Playwright
+renders each to a 2880×1800 PNG. Use this when the portfolio needs an
+idealized or populated view of a feature that the live dev server
+doesn't seed with rich enough data.
+
+```bash
+# from repo root
+node docs/screenshots/capture.mjs
+```
+
+### Rebuild the contact sheet only
+
+When you've mixed live captures and mockups and want to re-stitch the
+2×3 sheet without rerendering panels:
+
+```bash
+node docs/screenshots/rebuild-contact-sheet.mjs
+```
+
+## Design system reuse
+
+Every panel — live or mockup — uses only the `--as-*` tokens from
+[`src/styles/revamp/tokens.css`](../../src/styles/revamp/tokens.css):
+
+- Surfaces: `--as-surface-0/1/2/3`, `--as-glass-1/2/3`
+- Text: `--as-text-1/2/3`
+- Accent: `--as-accent-1/2`, `--as-accent-surface-1`, `--as-accent-border-1`
+- Status: `--as-good/warn/bad/info` families
+- Type: `--as-font-sans`, `--as-font-mono`
+- Shell glow: `--as-glow-1/2`
+
+No new tokens are introduced. If the tokens in the live app change:
+
+- `live-capture.mjs` picks them up automatically (it renders the real app)
+- `shell.css` is the single place to re-sync the HTML mockups
+
+## What's next
+
+Session 3 turns the hero screenshot
+([01-workspace.png](renders/01-workspace.png), now a real app capture)
+and the contact sheet into a landscape-letter one-pager PDF with the
+tagline, five feature pillars, and the impact-stats strip.
diff --git a/docs/screenshots/capture.mjs b/docs/screenshots/capture.mjs
new file mode 100644
index 0000000..9d7ec07
--- /dev/null
+++ b/docs/screenshots/capture.mjs
@@ -0,0 +1,113 @@
+/**
+ * capture.mjs — render each panel HTML under /docs/screenshots/panels
+ * to a 2× PNG under /docs/screenshots/out using headless Chromium.
+ *
+ * Run from the repo root:
+ *     node docs/screenshots/capture.mjs
+ *
+ * Produces six individual 2× PNGs plus a combined 2×3 contact sheet
+ * (`contact-sheet.png`) that can be dropped straight into portfolio
+ * collateral.
+ */
+
+import { chromium } from "@playwright/test";
+import { readdirSync, mkdirSync, writeFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath, pathToFileURL } from "node:url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const PANELS_DIR = join(__dirname, "panels");
+const OUT_DIR = join(__dirname, "renders");
+
+const FRAME_W = 1440;
+const FRAME_H = 900;
+const DPR = 2;
+
+mkdirSync(OUT_DIR, { recursive: true });
+
+const panels = readdirSync(PANELS_DIR)
+  .filter((f) => f.endsWith(".html"))
+  .sort();
+
+if (panels.length === 0) {
+  console.error("No panel HTMLs found under", PANELS_DIR);
+  process.exit(1);
+}
+
+console.log(`Capturing ${panels.length} panels at ${FRAME_W}×${FRAME_H} @ ${DPR}×`);
+
+const browser = await chromium.launch();
+const context = await browser.newContext({
+  viewport: { width: FRAME_W, height: FRAME_H },
+  deviceScaleFactor: DPR,
+  colorScheme: "dark",
+});
+const page = await context.newPage();
+
+const captured = [];
+
+for (const file of panels) {
+  const src = join(PANELS_DIR, file);
+  const url = pathToFileURL(src).href;
+  console.log(` → ${file}`);
+  await page.goto(url, { waitUntil: "networkidle" });
+  // Give webfonts + any async layout a beat to settle.
+  await page.waitForTimeout(400);
+  const outName = file.replace(/\.html$/, ".png");
+  const outPath = join(OUT_DIR, outName);
+  await page.screenshot({
+    path: outPath,
+    clip: { x: 0, y: 0, width: FRAME_W, height: FRAME_H },
+  });
+  captured.push({ file, outPath });
+}
+
+await browser.close();
+
+// Build a contact sheet (2 cols × 3 rows) so portfolio collateral can
+// show the whole set in one image. Each tile is scaled to FRAME_W/2
+// CSS px so the sheet matches the individual PNGs' look.
+const contactPath = join(OUT_DIR, "contact-sheet.png");
+const contactHtml = join(OUT_DIR, "contact-sheet.html");
+const tileW = FRAME_W / 2;
+const tileH = (FRAME_H * tileW) / FRAME_W;
+const tiles = captured
+  .map(
+    (c) =>
+      `<div class="tile"><img src="${c.outPath.replace(/^.+\/renders\//, "./")}"/></div>`,
+  )
+  .join("\n");
+writeFileSync(
+  contactHtml,
+  `<!doctype html><html><head><meta charset="utf-8"/><style>
+  :root { color-scheme: dark; }
+  html, body { margin:0; background:#0b0d10; }
+  .sheet {
+    display: grid;
+    grid-template-columns: repeat(2, ${tileW}px);
+    gap: 0;
+    width: ${tileW * 2}px;
+  }
+  .tile img {
+    display: block;
+    width: ${tileW}px;
+    height: auto;
+  }
+  </style></head><body>
+  <div class="sheet">${tiles}</div>
+  </body></html>`,
+);
+
+const browser2 = await chromium.launch();
+const ctx2 = await browser2.newContext({
+  viewport: { width: tileW * 2, height: tileH * 3 },
+  deviceScaleFactor: DPR,
+  colorScheme: "dark",
+});
+const p2 = await ctx2.newPage();
+await p2.goto(pathToFileURL(contactHtml).href, { waitUntil: "networkidle" });
+await p2.waitForTimeout(200);
+await p2.screenshot({ path: contactPath, fullPage: true });
+await browser2.close();
+
+console.log(`✓ wrote ${captured.length} panels + contact-sheet.png to ${OUT_DIR}`);
diff --git a/docs/screenshots/live-capture.mjs b/docs/screenshots/live-capture.mjs
new file mode 100644
index 0000000..7eee5ff
--- /dev/null
+++ b/docs/screenshots/live-capture.mjs
@@ -0,0 +1,244 @@
+/**
+ * live-capture.mjs — capture portfolio screenshots from the real
+ * running app instead of the static HTML mockups under panels/.
+ *
+ * Starts `pnpm dev` on an isolated port with VITE_E2E_MOCK_TAURI=1
+ * so the frontend runs browser-standalone against the IPC mocks in
+ * src/test/e2eTauriMock.ts. Flips the workspace hero flag via
+ * localStorage so DraftTab renders via WorkspaceHeroLayout. Captures
+ * each tab to docs/screenshots/renders/.
+ *
+ * Panels 1, 2, 4, 5, 6 all map to real tabs and are replaced with
+ * live captures. Panel 3 (ML intent confidence view) has no
+ * corresponding page in the app and stays as the HTML mockup.
+ *
+ * Run from the repo root:
+ *     node docs/screenshots/live-capture.mjs
+ */
+
+import { chromium } from "@playwright/test";
+import { spawn } from "node:child_process";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const REPO_ROOT = resolve(__dirname, "..", "..");
+const OUT_DIR = join(__dirname, "renders");
+
+const PORT = 1422;
+const URL = `http://localhost:${PORT}`;
+
+const FRAME_W = 1440;
+const FRAME_H = 900;
+const DPR = 2;
+
+/**
+ * Start `pnpm dev` on an isolated port with the Tauri mock enabled,
+ * then resolve once Vite reports that it's listening.
+ */
+async function startDevServer() {
+  const child = spawn(
+    "pnpm",
+    ["dev", "--", "--port", String(PORT)],
+    {
+      cwd: REPO_ROOT,
+      env: {
+        ...process.env,
+        VITE_E2E_MOCK_TAURI: "1",
+        VITE_DEV_PORT: String(PORT),
+      },
+      stdio: ["ignore", "pipe", "pipe"],
+    },
+  );
+
+  let readyResolver;
+  const ready = new Promise((r) => (readyResolver = r));
+
+  const onData = (chunk) => {
+    const line = chunk.toString();
+    process.stdout.write(`  [vite] ${line}`);
+    if (line.includes("ready in") || line.includes("Local:")) {
+      readyResolver?.();
+      readyResolver = null;
+    }
+  };
+  child.stdout.on("data", onData);
+  child.stderr.on("data", onData);
+
+  // Best-effort bail on crash
+  child.on("exit", (code) => {
+    if (code !== 0 && code !== null) {
+      console.error(`vite exited with code ${code}`);
+      readyResolver?.();
+    }
+  });
+
+  await ready;
+  // Extra grace so HMR and module preload finish — the first
+  // navigation without this occasionally hits a blank shell.
+  await new Promise((r) => setTimeout(r, 1500));
+  return child;
+}
+
+/**
+ * Seed localStorage with the workspace-hero flag and a minimal
+ * onboarding-dismissed marker so the shell renders fully on reload.
+ */
+async function primeStorage(page) {
+  await page.addInitScript(() => {
+    // Workspace hero layout — the feature under test.
+    localStorage.setItem(
+      "assistsupport.flag.ASSISTSUPPORT_REVAMP_WORKSPACE_HERO",
+      "1",
+    );
+    // Admin tabs — policy flag gated by default, but the revamp shell
+    // only surfaces the Analytics / Operations nav entries when it is
+    // on. In dev mode (Vite serves `MODE=development`), the localStorage
+    // override is honored; outside dev it's ignored by the resolver.
+    localStorage.setItem(
+      "assistsupport.flag.ASSISTSUPPORT_ENABLE_ADMIN_TABS",
+      "1",
+    );
+    localStorage.setItem("assistsupport.onboarding.complete", "1");
+  });
+}
+
+/**
+ * Click a top-level nav item by visible label in the revamp shell.
+ */
+async function navigate(page, label) {
+  const nav = page.locator('.as-shell__nav[aria-label="Primary navigation"]');
+  await nav.getByRole("button", { name: label, exact: true }).click();
+  // Tab content typically mounts within a frame; give layout a beat.
+  await page.waitForTimeout(500);
+}
+
+async function capture(page, name) {
+  const outPath = join(OUT_DIR, name);
+  await page.waitForTimeout(400);
+  await page.screenshot({
+    path: outPath,
+    clip: { x: 0, y: 0, width: FRAME_W, height: FRAME_H },
+  });
+  console.log(`  ✓ ${name}`);
+  return outPath;
+}
+
+async function main() {
+  console.log("Starting Vite dev server…");
+  const server = await startDevServer();
+
+  try {
+    console.log("Launching Chromium…");
+    const browser = await chromium.launch();
+    const context = await browser.newContext({
+      viewport: { width: FRAME_W, height: FRAME_H },
+      deviceScaleFactor: DPR,
+      colorScheme: "dark",
+    });
+    const page = await context.newPage();
+    await primeStorage(page);
+
+    console.log(`Opening ${URL}…`);
+    await page.goto(URL, { waitUntil: "networkidle", timeout: 60_000 });
+    await page.waitForSelector(".as-shell__nav", { timeout: 30_000 });
+
+    // Diagnostic: capture the landing state before any interaction so a
+    // failure inside the workspace flow can be inspected post hoc.
+    await page.screenshot({
+      path: join(OUT_DIR, "_debug-landing.png"),
+      clip: { x: 0, y: 0, width: FRAME_W, height: FRAME_H },
+    });
+
+    // ---- Panel 01: Workspace (hero layout) ----
+    // The shell renders its own right-rail on the draft tab
+    // (WorkspaceQueueContext + Response playbook + AI status cards),
+    // which competes with the hero layout's own triage rail. For a
+    // clean portfolio capture, hide the shell rail via an injected
+    // stylesheet and expand the workspace inner column to fill the
+    // freed space. This is presentation-only; no app code changes.
+    console.log("Capturing 01-workspace (live)…");
+    await page.addStyleTag({
+      content: `
+        .as-shell__rail { display: none !important; }
+        .as-shell__content { grid-template-columns: 1fr !important; }
+        .as-shell__workspace { max-width: none !important; }
+      `,
+    });
+    await page.waitForSelector(".wsx__composer", { timeout: 10_000 });
+
+    const ticketText =
+      "Priya is flying to the offsite Thursday and wants to bring a USB stick for slide backups. Asking if IT permits it and if so what the approved model is. She's on a company-issued MacBook Pro 14 (M3), macOS 14.5.";
+
+    // Set the textarea value via the native setter so React picks up the
+    // change, bypassing any visibility/editability gates Playwright may
+    // apply to elements behind the sticky composer's backdrop filter.
+    await page.locator(".wsx__query").evaluate((el, text) => {
+      const setter = Object.getOwnPropertyDescriptor(
+        window.HTMLTextAreaElement.prototype,
+        "value",
+      )?.set;
+      setter?.call(el, text);
+      el.dispatchEvent(new Event("input", { bubbles: true }));
+    }, ticketText);
+
+    // Trigger generate — mock IPC resolves with a grounded draft.
+    // Use dispatchEvent since the button sits behind the sticky
+    // composer's backdrop filter and Playwright's hit-test is unreliable.
+    await page
+      .locator(".wsx__btn--primary")
+      .filter({ hasText: "Generate" })
+      .evaluate((btn) =>
+        btn.dispatchEvent(new MouseEvent("click", { bubbles: true })),
+      );
+    // Wait for the prose to appear.
+    await page.waitForSelector(".wsx__prose p", { timeout: 15_000 });
+    await page.waitForTimeout(600);
+    await capture(page, "01-workspace.png");
+
+    // ---- Panel 02: Queue ----
+    console.log("Capturing 02-queue (live)…");
+    await navigate(page, "Queue");
+    await page.waitForTimeout(800);
+    await capture(page, "02-queue.png");
+
+    // ---- Panel 04: KB gap analysis (inside Analytics) ----
+    console.log("Capturing 04-kb-gap (live)…");
+    await navigate(page, "Analytics");
+    await page.waitForTimeout(800);
+    // Scroll the KB gap panel into view if present.
+    const kbGap = page.locator(".kb-gap-panel").first();
+    if (await kbGap.count()) {
+      await kbGap.scrollIntoViewIfNeeded();
+      await page.waitForTimeout(400);
+    }
+    await capture(page, "04-kb-gap.png");
+
+    // ---- Panel 05: Ops (deploy/rollback) ----
+    console.log("Capturing 05-ops (live)…");
+    await navigate(page, "Operations");
+    await page.waitForTimeout(800);
+    await capture(page, "05-ops.png");
+
+    // Panel 06 (eval harness) intentionally NOT captured from the live
+    // app: OpsTab.tsx explicitly notes "Eval, triage, and runbook tools
+    // stay out of the active UI in this wave." The HTML mockup at
+    // panels/06-eval.html remains the canonical portfolio panel for
+    // that feature until a real eval surface ships.
+
+    await browser.close();
+    console.log("✓ Live captures written to", OUT_DIR);
+  } finally {
+    // Kill the dev server cleanly.
+    console.log("Stopping Vite dev server…");
+    server.kill("SIGINT");
+    // Give it a moment, then SIGKILL if still running.
+    await new Promise((r) => setTimeout(r, 1000));
+    if (!server.killed) server.kill("SIGKILL");
+  }
+}
+
+main().catch((err) => {
+  console.error(err);
+  process.exitCode = 1;
+});
diff --git a/docs/screenshots/panels/01-workspace.html b/docs/screenshots/panels/01-workspace.html
new file mode 100644
index 0000000..1343d01
--- /dev/null
+++ b/docs/screenshots/panels/01-workspace.html
@@ -0,0 +1,926 @@
+<!doctype html>
+<html lang="en" data-accent="teal">
+  <head>
+    <meta charset="utf-8" />
+    <title>AssistSupport — Workspace</title>
+    <link rel="stylesheet" href="../shell.css" />
+    <style>
+      /* Inline the workspace-hero styles so this page is self-contained.
+         These rules match src/styles/revamp/workspaceHero.css 1:1 — if
+         the component drifts, re-sync this block. */
+      .wsx {
+        display: grid;
+        grid-template-rows: auto 1fr;
+        flex: 1;
+        min-height: 0;
+        color: var(--as-text-1);
+        font-family: var(--as-font-sans);
+      }
+      .wsx__composer {
+        position: sticky;
+        top: 0;
+        z-index: 5;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        padding: 16px 28px 14px;
+        background: rgba(15, 18, 24, 0.82);
+        border-bottom: 1px solid var(--as-border-1);
+        backdrop-filter: blur(12px);
+      }
+      .wsx__ticketBar {
+        display: grid;
+        grid-template-columns: auto minmax(0, 1fr) auto;
+        align-items: center;
+        gap: 16px;
+      }
+      .wsx__ticketId {
+        font-family: var(--as-font-mono);
+        font-size: 11px;
+        font-weight: 500;
+        color: var(--as-text-3);
+        letter-spacing: 0.4px;
+        text-transform: uppercase;
+      }
+      .wsx__ticketSummary {
+        font-size: 14px;
+        font-weight: 600;
+        letter-spacing: -0.1px;
+        color: var(--as-text-1);
+      }
+      .wsx__ticketMeta {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 11.5px;
+        color: var(--as-text-3);
+      }
+      .wsx__ticketAvatar {
+        display: grid;
+        place-items: center;
+        width: 22px;
+        height: 22px;
+        border-radius: 50%;
+        background: var(--as-accent-surface-1);
+        color: var(--as-accent-1);
+        font-size: 10.5px;
+        font-weight: 600;
+        border: 1px solid var(--as-accent-border-1);
+      }
+      .wsx__ticketReporter {
+        color: var(--as-text-2);
+        font-weight: 500;
+      }
+      .wsx__query {
+        width: 100%;
+        min-height: 72px;
+        padding: 12px 14px;
+        font-family: var(--as-font-sans);
+        font-size: 15px;
+        line-height: 1.5;
+        color: var(--as-text-1);
+        background: var(--as-glass-1);
+        border: 1px solid var(--as-border-1);
+        border-radius: var(--as-radius-1);
+      }
+      .wsx__composerFooter {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 12px;
+      }
+      .wsx__chips {
+        display: flex;
+        gap: 6px;
+      }
+      .wsx__chip {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        font-size: 11.5px;
+        font-weight: 500;
+        color: var(--as-text-2);
+        padding: 5px 10px;
+        border-radius: var(--as-radius-pill);
+        background: var(--as-glass-2);
+        border: 1px solid var(--as-border-1);
+      }
+      .wsx__chip.is-on {
+        background: var(--as-accent-surface-1);
+        color: var(--as-accent-1);
+        border-color: var(--as-accent-border-1);
+      }
+      .wsx__chipDot {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: currentColor;
+        opacity: 0.6;
+      }
+      .wsx__seg {
+        display: inline-flex;
+        padding: 2px;
+        background: var(--as-glass-2);
+        border: 1px solid var(--as-border-1);
+        border-radius: 8px;
+        gap: 2px;
+      }
+      .wsx__seg .btn {
+        padding: 5px 12px;
+        font-size: 12px;
+        font-weight: 500;
+        border-radius: 6px;
+        color: var(--as-text-3);
+        background: none;
+        border: 0;
+      }
+      .wsx__seg .btn.is-on {
+        background: var(--as-glass-3);
+        color: var(--as-text-1);
+      }
+      .wsx__composerRight {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+      }
+      .wsx__body {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) 340px;
+        gap: 24px;
+        padding: 20px 28px 28px;
+        min-height: 0;
+      }
+      .wsx__answer {
+        min-width: 0;
+      }
+      .wsx__answerInner {
+        max-width: 780px;
+        margin: 0 auto;
+        display: flex;
+        flex-direction: column;
+        gap: 18px;
+      }
+      .wsx__answerHead {
+        display: flex;
+        align-items: center;
+        gap: 14px;
+        padding: 12px 16px;
+        border-radius: var(--as-radius-2);
+        background: var(--as-good-surface);
+        border: 1px solid var(--as-good-border);
+      }
+      .wsx__intentLabel {
+        font-size: 10.5px;
+        font-weight: 600;
+        letter-spacing: 1px;
+        text-transform: uppercase;
+        color: var(--as-text-3);
+      }
+      .wsx__intentClass {
+        font-family: var(--as-font-mono);
+        font-size: 12px;
+        color: var(--as-text-1);
+        font-weight: 500;
+        margin-left: 8px;
+      }
+      .wsx__gauge {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        margin-left: auto;
+        min-width: 220px;
+      }
+      .wsx__gaugePill {
+        display: inline-flex;
+        align-items: center;
+        gap: 5px;
+        padding: 3px 9px;
+        border-radius: var(--as-radius-pill);
+        font-size: 10.5px;
+        font-weight: 600;
+        letter-spacing: 0.4px;
+        text-transform: uppercase;
+        background: var(--as-good-surface);
+        border: 1px solid var(--as-good-border);
+        color: var(--as-good-text);
+      }
+      .wsx__gaugeBar {
+        flex: 1;
+        height: 4px;
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.06);
+        overflow: hidden;
+        position: relative;
+      }
+      .wsx__gaugeBar::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        width: 87%;
+        background: linear-gradient(90deg, var(--as-good), var(--as-accent-1));
+        border-radius: 999px;
+      }
+      .wsx__gaugeNum {
+        font-family: var(--as-font-mono);
+        font-size: 12px;
+        font-weight: 600;
+        color: var(--as-text-1);
+      }
+      .wsx__meta {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 14px;
+        padding: 0 2px;
+        font-size: 11.5px;
+        color: var(--as-text-3);
+      }
+      .wsx__meta b {
+        color: var(--as-text-2);
+        font-weight: 500;
+        font-variant-numeric: tabular-nums;
+      }
+      .wsx__prose {
+        max-width: 70ch;
+        font-size: 16px;
+        line-height: 1.65;
+        color: var(--as-text-1);
+      }
+      .wsx__prose p {
+        margin: 0 0 14px;
+      }
+      .wsx__prose h3 {
+        font-size: 15px;
+        font-weight: 600;
+        margin: 20px 0 4px;
+      }
+      .wsx__prose .cite {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 18px;
+        height: 18px;
+        padding: 0 5px;
+        border-radius: 4px;
+        background: var(--as-accent-surface-1);
+        border: 1px solid var(--as-accent-border-1);
+        color: var(--as-accent-1);
+        font-family: var(--as-font-mono);
+        font-size: 11px;
+        font-weight: 600;
+        vertical-align: middle;
+        margin: 0 2px;
+      }
+      .wsx__answerActions {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding-top: 10px;
+        border-top: 1px solid var(--as-border-1);
+      }
+      .wsx__spacer {
+        flex: 1;
+      }
+      .wsx__sources {
+        margin-top: 8px;
+        padding: 14px 0 0;
+        border-top: 1px solid var(--as-border-1);
+      }
+      .wsx__sourcesHead {
+        display: flex;
+        align-items: baseline;
+        justify-content: space-between;
+        margin-bottom: 10px;
+      }
+      .wsx__sourcesTitle {
+        font-size: 12.5px;
+        font-weight: 600;
+      }
+      .wsx__sourcesHint {
+        font-size: 11px;
+        color: var(--as-text-3);
+      }
+      .wsx__sources ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+      }
+      .wsx__source {
+        display: grid;
+        grid-template-columns: auto 1fr auto;
+        gap: 10px;
+        align-items: center;
+        padding: 8px 10px;
+        background: var(--as-glass-1);
+        border: 1px solid var(--as-border-1);
+        border-radius: 8px;
+      }
+      .wsx__sourceNum {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 22px;
+        height: 22px;
+        padding: 0 5px;
+        border-radius: 4px;
+        background: var(--as-accent-surface-1);
+        border: 1px solid var(--as-accent-border-1);
+        color: var(--as-accent-1);
+        font-family: var(--as-font-mono);
+        font-size: 11px;
+        font-weight: 600;
+      }
+      .wsx__sourceTitle {
+        font-size: 12.5px;
+        color: var(--as-text-1);
+        font-weight: 500;
+      }
+      .wsx__sourceMeta {
+        font-family: var(--as-font-mono);
+        font-size: 11px;
+        color: var(--as-text-3);
+      }
+      .wsx__sourceScore {
+        font-family: var(--as-font-mono);
+        font-size: 10.5px;
+        color: var(--as-text-3);
+      }
+      .wsx__rail {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+      .wsx__railCard {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        padding: 14px;
+        background: var(--as-glass-2);
+        border: 1px solid var(--as-border-1);
+        border-radius: var(--as-radius-2);
+      }
+      .wsx__railTitle {
+        font-size: 11px;
+        font-weight: 600;
+        letter-spacing: 0.3px;
+        text-transform: uppercase;
+        color: var(--as-text-3);
+      }
+      .wsx__steps {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+      .wsx__step {
+        display: grid;
+        grid-template-columns: auto 1fr;
+        gap: 10px;
+        align-items: center;
+        padding: 7px 8px;
+        border-radius: 6px;
+        color: var(--as-text-3);
+      }
+      .wsx__step.is-active {
+        background: var(--as-accent-surface-1);
+        color: var(--as-text-1);
+      }
+      .wsx__step.is-done {
+        color: var(--as-text-2);
+      }
+      .wsx__stepNum {
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        display: grid;
+        place-items: center;
+        background: var(--as-glass-3);
+        color: var(--as-text-2);
+        font-family: var(--as-font-mono);
+        font-size: 10.5px;
+        font-weight: 600;
+      }
+      .wsx__step.is-active .wsx__stepNum {
+        background: var(--as-accent-1);
+        color: var(--as-accent-ink);
+      }
+      .wsx__step.is-done .wsx__stepNum {
+        background: var(--as-good-surface);
+        color: var(--as-good-text);
+        border: 1px solid var(--as-good-border);
+      }
+      .wsx__stepLabel {
+        font-size: 12.5px;
+        font-weight: 500;
+      }
+      .wsx__stepHint {
+        font-size: 11px;
+        color: var(--as-text-3);
+      }
+      .wsx__stat {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .wsx__stat dt {
+        font-size: 12px;
+        color: var(--as-text-3);
+        margin: 0;
+      }
+      .wsx__stat dd {
+        margin: 0;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+      .wsx__statValue {
+        font-family: var(--as-font-mono);
+        font-size: 18px;
+        font-weight: 600;
+        color: var(--as-text-1);
+        line-height: 1;
+      }
+      .wsx__statValue.is-good {
+        color: var(--as-good-text);
+      }
+      .wsx__miniBar {
+        width: 80px;
+        height: 3px;
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.06);
+        position: relative;
+        overflow: hidden;
+      }
+      .wsx__miniBar::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        width: 86%;
+        background: linear-gradient(90deg, var(--as-good), var(--as-accent-1));
+      }
+      .wsx__alt {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        padding: 10px;
+        background: var(--as-glass-1);
+        border: 1px solid var(--as-border-1);
+        border-radius: 8px;
+      }
+      .wsx__altHead {
+        font-family: var(--as-font-mono);
+        font-size: 10px;
+        font-weight: 600;
+        color: var(--as-text-3);
+        letter-spacing: 0.6px;
+        text-transform: uppercase;
+      }
+      .wsx__altPreview {
+        font-size: 12px;
+        line-height: 1.45;
+        color: var(--as-text-2);
+      }
+      .wsx__thumbs {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+      .wsx__thumb {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 36px;
+        height: 36px;
+        border-radius: 8px;
+        background: var(--as-glass-2);
+        border: 1px solid var(--as-border-1);
+        color: var(--as-text-2);
+      }
+      .wsx__thumb.is-on {
+        background: var(--as-accent-surface-1);
+        border-color: var(--as-accent-border-1);
+        color: var(--as-accent-1);
+      }
+      .wsx__thumbsHint {
+        font-size: 11px;
+        color: var(--as-text-3);
+        flex: 1;
+      }
+      .wsx__field {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+      .wsx__field span {
+        font-size: 11px;
+        color: var(--as-text-3);
+      }
+      .wsx__field select {
+        width: 100%;
+        padding: 6px 9px;
+        font-size: 12.5px;
+        color: var(--as-text-1);
+        background: var(--as-glass-1);
+        border: 1px solid var(--as-border-1);
+        border-radius: 7px;
+      }
+      .wsx__fields {
+        display: grid;
+        gap: 10px;
+      }
+      .wsx__railFooter {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 2px;
+        font-family: var(--as-font-mono);
+        font-size: 11px;
+        color: var(--as-text-3);
+      }
+      .icon {
+        display: inline-block;
+        width: 1em;
+        height: 1em;
+        vertical-align: middle;
+        stroke: currentColor;
+        fill: none;
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="shell">
+      <aside class="nav">
+        <div class="nav__brand">
+          <div class="nav__mark">A</div>
+          <div>
+            <div class="nav__name">AssistSupport</div>
+            <div class="nav__meta">local · v1.2.0</div>
+          </div>
+        </div>
+        <div class="nav__section">
+          <div class="nav__sectionTitle">Core</div>
+          <ul class="nav__list">
+            <li class="nav__item is-active">
+              <span class="nav__icon">▣</span>Workspace
+            </li>
+            <li class="nav__item"><span class="nav__icon">≡</span>Queue</li>
+            <li class="nav__item">
+              <span class="nav__icon">◫</span>Knowledge
+            </li>
+            <li class="nav__item"><span class="nav__icon">⚙</span>Settings</li>
+          </ul>
+        </div>
+        <div class="nav__section">
+          <div class="nav__sectionTitle">Admin</div>
+          <ul class="nav__list">
+            <li class="nav__item">
+              <span class="nav__icon">✦</span>Analytics
+            </li>
+            <li class="nav__item">
+              <span class="nav__icon">▸</span>Operations
+            </li>
+          </ul>
+        </div>
+      </aside>
+
+      <main class="main">
+        <header class="topbar">
+          <div>
+            <div class="topbar__title">
+              <span class="crumb">AssistSupport</span>
+              <span class="crumb-sep">/</span> Workspace
+            </div>
+            <div class="topbar__sub">
+              Draft a KB-grounded response — local inference, no cloud
+            </div>
+          </div>
+          <div class="cmd">
+            <span>⌘</span>
+            <span style="flex: 1">Run command or search…</span>
+            <span class="cmd__kbd">⌘K</span>
+          </div>
+          <div class="topbar__right">
+            <span class="status-dot">llama3.1-8b · 25ms p50</span>
+          </div>
+        </header>
+
+        <div class="wsx">
+          <div class="wsx__composer">
+            <div class="wsx__ticketBar">
+              <div class="wsx__ticketId">AS-4218 · REQUEST</div>
+              <div class="wsx__ticketSummary">
+                Can I use a flash drive on my work MacBook for the offsite?
+              </div>
+              <div class="wsx__ticketMeta">
+                <span class="wsx__ticketAvatar">PA</span>
+                <span class="wsx__ticketReporter">Priya Anand</span>
+                <span>·</span>
+                <span>Open</span>
+                <span>·</span>
+                <span>2h ago</span>
+                <span class="badge">Normal</span>
+                <span class="badge badge--warn">Policy</span>
+              </div>
+            </div>
+            <textarea class="wsx__query">
+Priya is flying to the offsite Thursday and wants to bring a USB stick for slide backups. Asking if IT permits it, and if so what the approved model is. She's on a company-issued MacBook Pro 14 (M3), macOS 14.5.</textarea
+            >
+            <div class="wsx__composerFooter">
+              <div class="wsx__chips">
+                <span class="wsx__chip is-on"
+                  ><span class="wsx__chipDot"></span>Policy</span
+                >
+                <span class="wsx__chip"
+                  ><span class="wsx__chipDot"></span>Howto</span
+                >
+                <span class="wsx__chip"
+                  ><span class="wsx__chipDot"></span>Access</span
+                >
+                <span class="wsx__chip"
+                  ><span class="wsx__chipDot"></span>Incident</span
+                >
+              </div>
+              <div class="wsx__composerRight">
+                <div class="wsx__seg">
+                  <button class="btn">Short</button>
+                  <button class="btn is-on">Medium</button>
+                  <button class="btn">Long</button>
+                </div>
+                <button class="btn btn--primary">
+                  ⚡ Generate <span class="kbd">⌘↵</span>
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <div class="wsx__body">
+            <section class="wsx__answer">
+              <div class="wsx__answerInner">
+                <header class="wsx__answerHead">
+                  <div>
+                    <span class="wsx__intentLabel">ML Intent</span>
+                    <span class="wsx__intentClass"
+                      >POLICY · removable_media</span
+                    >
+                  </div>
+                  <div class="wsx__gauge">
+                    <span class="wsx__gaugePill">● Grounded</span>
+                    <div class="wsx__gaugeBar"></div>
+                    <span class="wsx__gaugeNum">87%</span>
+                  </div>
+                </header>
+
+                <div class="wsx__meta">
+                  <span>⚡ <b>42</b> tok/s</span>
+                  <span>📘 <b>4</b> sources</span>
+                  <span>📝 <b>118</b> words</span>
+                  <span>◳ <b>31%</b> ctx</span>
+                  <span>✓ <b>6/7</b> claims supported</span>
+                  <span class="mono" style="color: var(--as-text-3)"
+                    >llama3.1-8b-instruct</span
+                  >
+                </div>
+
+                <article class="wsx__prose">
+                  <p>
+                    Removable media is permitted on company-issued Macs for
+                    short-term travel use, but it must be an
+                    <strong>IT-approved encrypted drive</strong> and the file
+                    transfer has to be logged through the macOS Endpoint
+                    Security agent. Per IT Security Policy 4.2, unencrypted
+                    flash drives are blocked at the kernel extension
+                    layer.<button class="cite">1</button>
+                  </p>
+                  <p>
+                    For the offsite this week, Priya has two approved options:
+                  </p>
+                  <p>
+                    The <strong>Kingston IronKey D500S 16GB</strong> is
+                    standard-issue and can be picked up same-day from the 3rd-floor
+                    IT desk — it ships FIPS-validated and auto-enrolls with
+                    the device-management
+                    console.<button class="cite">2</button> If she already
+                    owns an <strong>Apricorn Aegis Secure Key 3NX</strong>, IT
+                    can whitelist its serial in
+                    under ten minutes.<button class="cite">3</button>
+                  </p>
+                  <p>
+                    Either way, she should request the drive before end of day
+                    tomorrow so the endpoint policy has time to propagate to
+                    her Mac before departure. Unapproved drives inserted on
+                    travel Wi-Fi will trigger an automatic incident in PagerDuty
+                    and lock the port for 24 hours.<button class="cite">4</button>
+                  </p>
+                </article>
+
+                <div class="wsx__answerActions">
+                  <button class="btn btn--ghost btn--sm">↻ Regenerate</button>
+                  <button class="btn btn--ghost btn--sm">★ Save template</button>
+                  <div class="wsx__spacer"></div>
+                  <button class="btn btn--primary btn--sm">⎘ Copy response</button>
+                </div>
+
+                <section class="wsx__sources">
+                  <header class="wsx__sourcesHead">
+                    <span class="wsx__sourcesTitle">Cited sources</span>
+                    <span class="wsx__sourcesHint"
+                      >click to open · hybrid retrieval</span
+                    >
+                  </header>
+                  <ul>
+                    <li class="wsx__source">
+                      <span class="wsx__sourceNum">1</span>
+                      <div>
+                        <div class="wsx__sourceTitle">
+                          IT Security Policy 4.2 — Removable Media Controls
+                        </div>
+                        <div class="wsx__sourceMeta">
+                          policies/security-4.2.md · Enforcement
+                        </div>
+                      </div>
+                      <span class="wsx__sourceScore">0.94</span>
+                    </li>
+                    <li class="wsx__source">
+                      <span class="wsx__sourceNum">2</span>
+                      <div>
+                        <div class="wsx__sourceTitle">
+                          Kingston IronKey D500S — Standard Issue Procedure
+                        </div>
+                        <div class="wsx__sourceMeta">
+                          kb/hardware/ironkey-d500s.md · Request flow
+                        </div>
+                      </div>
+                      <span class="wsx__sourceScore">0.88</span>
+                    </li>
+                    <li class="wsx__source">
+                      <span class="wsx__sourceNum">3</span>
+                      <div>
+                        <div class="wsx__sourceTitle">
+                          Whitelisting Personal Encrypted Drives
+                        </div>
+                        <div class="wsx__sourceMeta">
+                          runbooks/whitelist-usb.md · Apricorn / Kingston
+                        </div>
+                      </div>
+                      <span class="wsx__sourceScore">0.81</span>
+                    </li>
+                    <li class="wsx__source">
+                      <span class="wsx__sourceNum">4</span>
+                      <div>
+                        <div class="wsx__sourceTitle">
+                          Endpoint Incident Auto-Triggers (Travel Wi-Fi)
+                        </div>
+                        <div class="wsx__sourceMeta">
+                          runbooks/pagerduty-endpoint.md · PagerDuty rule 12
+                        </div>
+                      </div>
+                      <span class="wsx__sourceScore">0.74</span>
+                    </li>
+                  </ul>
+                </section>
+              </div>
+            </section>
+
+            <aside class="wsx__rail">
+              <div class="wsx__railCard">
+                <div class="wsx__railTitle">Workflow</div>
+                <ol class="wsx__steps">
+                  <li class="wsx__step is-done">
+                    <span class="wsx__stepNum">✓</span>
+                    <span>
+                      <span class="wsx__stepLabel">Triage</span>
+                      <span class="wsx__stepHint">Ticket captured</span>
+                    </span>
+                  </li>
+                  <li class="wsx__step is-done">
+                    <span class="wsx__stepNum">✓</span>
+                    <span>
+                      <span class="wsx__stepLabel">Classify</span>
+                      <span class="wsx__stepHint">ML intent + category</span>
+                    </span>
+                  </li>
+                  <li class="wsx__step is-active">
+                    <span class="wsx__stepNum">3</span>
+                    <span>
+                      <span class="wsx__stepLabel">Draft response</span>
+                      <span class="wsx__stepHint">KB-grounded answer</span>
+                    </span>
+                  </li>
+                  <li class="wsx__step">
+                    <span class="wsx__stepNum">4</span>
+                    <span>
+                      <span class="wsx__stepLabel">Send to Jira</span>
+                      <span class="wsx__stepHint">Copy or post</span>
+                    </span>
+                  </li>
+                </ol>
+              </div>
+
+              <div class="wsx__railCard">
+                <div class="wsx__railTitle">Signals</div>
+                <dl style="display: flex; flex-direction: column; gap: 10px; margin: 0">
+                  <div class="wsx__stat">
+                    <dt>Confidence</dt>
+                    <dd>
+                      <span class="wsx__statValue is-good">87%</span>
+                    </dd>
+                  </div>
+                  <div class="wsx__stat">
+                    <dt>Grounded claims</dt>
+                    <dd>
+                      <span class="wsx__statValue">6/7</span>
+                      <div class="wsx__miniBar"></div>
+                    </dd>
+                  </div>
+                  <div class="wsx__stat">
+                    <dt>Retrieval</dt>
+                    <dd>
+                      <span
+                        class="wsx__statValue"
+                        style="font-size: 14px; color: var(--as-text-2)"
+                        >22ms</span
+                      >
+                    </dd>
+                  </div>
+                </dl>
+              </div>
+
+              <div class="wsx__railCard">
+                <div class="wsx__railTitle">Alternatives</div>
+                <div class="wsx__alt">
+                  <div class="wsx__altHead">ALT 1 · terser</div>
+                  <div class="wsx__altPreview">
+                    Yes — but you'll need an IT-approved encrypted drive. Pick
+                    up a Kingston IronKey D500S 16GB from the 3rd-floor desk
+                    before EOD tomorrow.
+                  </div>
+                </div>
+                <div class="wsx__alt">
+                  <div class="wsx__altHead">ALT 2 · empathetic</div>
+                  <div class="wsx__altPreview">
+                    Great question, and happy to make this easy for the
+                    offsite. Our policy requires an approved encrypted drive
+                    for travel use…
+                  </div>
+                </div>
+              </div>
+
+              <div class="wsx__railCard">
+                <div class="wsx__railTitle">Feedback</div>
+                <div class="wsx__thumbs">
+                  <span class="wsx__thumb is-on">✓</span>
+                  <span class="wsx__thumb">✕</span>
+                  <span class="wsx__thumbsHint"
+                    >Logged · feeds gap analyzer</span
+                  >
+                </div>
+                <button
+                  class="btn btn--ghost btn--sm"
+                  style="width: 100%; justify-content: center"
+                >
+                  ⚠ Flag as KB gap
+                </button>
+              </div>
+
+              <div class="wsx__railCard">
+                <div class="wsx__railTitle">Context</div>
+                <div class="wsx__fields">
+                  <label class="wsx__field">
+                    <span>Audience</span>
+                    <select>
+                      <option>End user (customer-safe)</option>
+                    </select>
+                  </label>
+                  <label class="wsx__field">
+                    <span>Tone</span>
+                    <select>
+                      <option>Neutral</option>
+                    </select>
+                  </label>
+                  <label class="wsx__field">
+                    <span>Urgency</span>
+                    <select>
+                      <option>Normal</option>
+                    </select>
+                  </label>
+                </div>
+              </div>
+
+              <div class="wsx__railFooter">
+                <span>llama3.1-8b-instruct</span>
+                <span>ctx 31%</span>
+              </div>
+            </aside>
+          </div>
+        </div>
+      </main>
+    </div>
+  </body>
+</html>
diff --git a/docs/screenshots/panels/02-queue.html b/docs/screenshots/panels/02-queue.html
new file mode 100644
index 0000000..b3fb1e8
--- /dev/null
+++ b/docs/screenshots/panels/02-queue.html
@@ -0,0 +1,668 @@
+<!doctype html>
+<html lang="en" data-accent="teal">
+  <head>
+    <meta charset="utf-8" />
+    <title>AssistSupport — Queue</title>
+    <link rel="stylesheet" href="../shell.css" />
+    <style>
+      .queue {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) 320px;
+        gap: 20px;
+        min-height: 0;
+      }
+      .queueMain {
+        display: flex;
+        flex-direction: column;
+        gap: 14px;
+        min-width: 0;
+      }
+      .queueFilters {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+        padding: 10px 12px;
+        background: var(--as-glass-2);
+        border: 1px solid var(--as-border-1);
+        border-radius: var(--as-radius-2);
+        flex-wrap: wrap;
+      }
+      .queueFilters__search {
+        flex: 1;
+        min-width: 240px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 7px 10px;
+        background: var(--as-glass-1);
+        border: 1px solid var(--as-border-1);
+        border-radius: 7px;
+        font-size: 13px;
+        color: var(--as-text-3);
+      }
+      .queueFilters__chip {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        font-size: 11.5px;
+        font-weight: 500;
+        color: var(--as-text-2);
+        padding: 5px 10px;
+        border-radius: var(--as-radius-pill);
+        background: var(--as-glass-2);
+        border: 1px solid var(--as-border-1);
+      }
+      .queueFilters__chip.is-on {
+        background: var(--as-accent-surface-1);
+        color: var(--as-accent-1);
+        border-color: var(--as-accent-border-1);
+      }
+      .queueStats {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 10px;
+      }
+      .statCard {
+        padding: 14px;
+        background: var(--as-glass-2);
+        border: 1px solid var(--as-border-1);
+        border-radius: var(--as-radius-2);
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+      }
+      .statCard__label {
+        font-size: 10.5px;
+        letter-spacing: 0.3px;
+        text-transform: uppercase;
+        color: var(--as-text-3);
+        font-weight: 600;
+      }
+      .statCard__value {
+        font-family: var(--as-font-mono);
+        font-size: 24px;
+        font-weight: 600;
+        color: var(--as-text-1);
+        line-height: 1;
+      }
+      .statCard__trend {
+        font-size: 11px;
+        color: var(--as-good-text);
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+      .statCard__trend.is-warn {
+        color: var(--as-warn-text);
+      }
+      .queueTable {
+        flex: 1;
+        min-height: 0;
+        overflow: hidden;
+        background: var(--as-glass-2);
+        border: 1px solid var(--as-border-1);
+        border-radius: var(--as-radius-2);
+      }
+      .queueTable__head {
+        display: grid;
+        grid-template-columns: 110px 1fr 120px 110px 80px 90px 80px;
+        gap: 12px;
+        padding: 10px 16px;
+        font-size: 10.5px;
+        font-weight: 600;
+        letter-spacing: 0.3px;
+        text-transform: uppercase;
+        color: var(--as-text-3);
+        border-bottom: 1px solid var(--as-border-1);
+        background: rgba(0, 0, 0, 0.18);
+      }
+      .queueRow {
+        display: grid;
+        grid-template-columns: 110px 1fr 120px 110px 80px 90px 80px;
+        gap: 12px;
+        padding: 12px 16px;
+        align-items: center;
+        border-bottom: 1px solid var(--as-border-1);
+        font-size: 12.5px;
+        color: var(--as-text-2);
+      }
+      .queueRow:last-child {
+        border-bottom: 0;
+      }
+      .queueRow:hover,
+      .queueRow.is-focus {
+        background: var(--as-glass-3);
+      }
+      .queueRow.is-focus {
+        outline: 1px solid var(--as-accent-border-1);
+        outline-offset: -1px;
+      }
+      .queueRow__id {
+        font-family: var(--as-font-mono);
+        font-size: 11.5px;
+        color: var(--as-text-3);
+        letter-spacing: 0.3px;
+      }
+      .queueRow__summary {
+        color: var(--as-text-1);
+        font-weight: 500;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      .queueRow__reporter {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        font-size: 11.5px;
+      }
+      .queueRow__avatar {
+        display: grid;
+        place-items: center;
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        background: var(--as-accent-surface-1);
+        color: var(--as-accent-1);
+        font-size: 9.5px;
+        font-weight: 600;
+        border: 1px solid var(--as-accent-border-1);
+      }
+      .queueRow__conf {
+        font-family: var(--as-font-mono);
+        font-size: 11.5px;
+        color: var(--as-text-2);
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+      .queueRow__conf .confBar {
+        width: 40px;
+        height: 3px;
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.06);
+        position: relative;
+        overflow: hidden;
+      }
+      .queueRow__conf .confBar::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        width: var(--v, 50%);
+        background: linear-gradient(90deg, var(--as-good), var(--as-accent-1));
+      }
+      .queueRow__conf.is-warn .confBar::after {
+        background: var(--as-warn);
+      }
+      .queueRow__conf.is-bad .confBar::after {
+        background: var(--as-bad);
+      }
+      .queueRow__age {
+        font-family: var(--as-font-mono);
+        font-size: 11px;
+        color: var(--as-text-3);
+      }
+      .queueAside {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+      .spark {
+        width: 100%;
+        height: 72px;
+      }
+      .intentList {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+      .intentList__row {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        gap: 8px;
+        align-items: center;
+        padding: 8px 10px;
+        background: var(--as-glass-1);
+        border: 1px solid var(--as-border-1);
+        border-radius: 7px;
+        font-size: 12px;
+      }
+      .intentList__name {
+        display: flex;
+        flex-direction: column;
+        gap: 3px;
+      }
+      .intentList__title {
+        color: var(--as-text-1);
+        font-weight: 500;
+      }
+      .intentList__bar {
+        width: 100%;
+        height: 3px;
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.06);
+        position: relative;
+        overflow: hidden;
+      }
+      .intentList__bar::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        width: var(--v, 50%);
+        background: var(--as-accent-1);
+        opacity: 0.7;
+        border-radius: 999px;
+      }
+      .intentList__count {
+        font-family: var(--as-font-mono);
+        font-size: 11px;
+        color: var(--as-text-3);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="shell">
+      <aside class="nav">
+        <div class="nav__brand">
+          <div class="nav__mark">A</div>
+          <div>
+            <div class="nav__name">AssistSupport</div>
+            <div class="nav__meta">local · v1.2.0</div>
+          </div>
+        </div>
+        <div class="nav__section">
+          <div class="nav__sectionTitle">Core</div>
+          <ul class="nav__list">
+            <li class="nav__item"><span class="nav__icon">▣</span>Workspace</li>
+            <li class="nav__item is-active">
+              <span class="nav__icon">≡</span>Queue
+            </li>
+            <li class="nav__item"><span class="nav__icon">◫</span>Knowledge</li>
+            <li class="nav__item"><span class="nav__icon">⚙</span>Settings</li>
+          </ul>
+        </div>
+        <div class="nav__section">
+          <div class="nav__sectionTitle">Admin</div>
+          <ul class="nav__list">
+            <li class="nav__item"><span class="nav__icon">✦</span>Analytics</li>
+            <li class="nav__item"><span class="nav__icon">▸</span>Operations</li>
+          </ul>
+        </div>
+      </aside>
+      <main class="main">
+        <header class="topbar">
+          <div>
+            <div class="topbar__title">
+              <span class="crumb">AssistSupport</span>
+              <span class="crumb-sep">/</span> Queue
+            </div>
+            <div class="topbar__sub">
+              Triage pane — 12 open · 4 drafted · 18 resolved today
+            </div>
+          </div>
+          <div class="cmd">
+            <span>⌘</span>
+            <span style="flex: 1">Filter queue or run command…</span>
+            <span class="cmd__kbd">⌘K</span>
+          </div>
+          <div class="topbar__right">
+            <span class="status-dot">ingest healthy</span>
+          </div>
+        </header>
+        <div class="pane">
+          <div class="queue">
+            <div class="queueMain">
+              <div class="queueStats">
+                <div class="statCard">
+                  <span class="statCard__label">Open</span>
+                  <span class="statCard__value">12</span>
+                  <span class="statCard__trend">▲ 3 vs 24h</span>
+                </div>
+                <div class="statCard">
+                  <span class="statCard__label">Drafted</span>
+                  <span class="statCard__value">4</span>
+                  <span class="statCard__trend">▲ awaiting review</span>
+                </div>
+                <div class="statCard">
+                  <span class="statCard__label">Deflected today</span>
+                  <span class="statCard__value">18</span>
+                  <span class="statCard__trend">▲ 25% over baseline</span>
+                </div>
+                <div class="statCard">
+                  <span class="statCard__label">Avg handle</span>
+                  <span class="statCard__value">54s</span>
+                  <span class="statCard__trend is-warn">▼ 11s vs last wk</span>
+                </div>
+              </div>
+
+              <div class="queueFilters">
+                <div class="queueFilters__search">⌕ Search reporter, id, or text…</div>
+                <span class="queueFilters__chip is-on">All</span>
+                <span class="queueFilters__chip">Open</span>
+                <span class="queueFilters__chip">Triaged</span>
+                <span class="queueFilters__chip">Drafted</span>
+                <span class="queueFilters__chip">Sent</span>
+                <span class="queueFilters__chip">Escalated</span>
+              </div>
+
+              <div class="queueTable">
+                <div class="queueTable__head">
+                  <span>Ticket</span>
+                  <span>Summary</span>
+                  <span>Reporter</span>
+                  <span>Intent</span>
+                  <span>Priority</span>
+                  <span>Confidence</span>
+                  <span>Status</span>
+                </div>
+
+                <div class="queueRow is-focus">
+                  <span class="queueRow__id">AS-4218</span>
+                  <span class="queueRow__summary"
+                    >Can I use a flash drive on my work MacBook for the offsite?</span
+                  >
+                  <span class="queueRow__reporter"
+                    ><span class="queueRow__avatar">PA</span>Priya Anand</span
+                  >
+                  <span class="badge badge--warn">Policy</span>
+                  <span class="badge">Normal</span>
+                  <span class="queueRow__conf">
+                    <div class="confBar" style="--v: 87%"></div>
+                    87%
+                  </span>
+                  <span class="badge badge--accent">Drafted</span>
+                </div>
+
+                <div class="queueRow">
+                  <span class="queueRow__id">AS-4217</span>
+                  <span class="queueRow__summary"
+                    >SSO broken for Figma after password rotation</span
+                  >
+                  <span class="queueRow__reporter"
+                    ><span class="queueRow__avatar">DK</span>Diego Kim</span
+                  >
+                  <span class="badge badge--info">Access</span>
+                  <span class="badge badge--bad">High</span>
+                  <span class="queueRow__conf">
+                    <div class="confBar" style="--v: 74%"></div>
+                    74%
+                  </span>
+                  <span class="badge badge--warn">Triaged</span>
+                </div>
+
+                <div class="queueRow">
+                  <span class="queueRow__id">AS-4216</span>
+                  <span class="queueRow__summary"
+                    >How do I request a second monitor for WFH?</span
+                  >
+                  <span class="queueRow__reporter"
+                    ><span class="queueRow__avatar">MN</span>Mira Novak</span
+                  >
+                  <span class="badge">Howto</span>
+                  <span class="badge">Low</span>
+                  <span class="queueRow__conf">
+                    <div class="confBar" style="--v: 92%"></div>
+                    92%
+                  </span>
+                  <span class="badge badge--good">Sent</span>
+                </div>
+
+                <div class="queueRow">
+                  <span class="queueRow__id">AS-4215</span>
+                  <span class="queueRow__summary"
+                    >Outlook keeps crashing on M3 after macOS 14.5</span
+                  >
+                  <span class="queueRow__reporter"
+                    ><span class="queueRow__avatar">JH</span>Jordan Hale</span
+                  >
+                  <span class="badge badge--bad">Incident</span>
+                  <span class="badge badge--bad">High</span>
+                  <span class="queueRow__conf is-warn">
+                    <div class="confBar" style="--v: 58%"></div>
+                    58%
+                  </span>
+                  <span class="badge badge--warn">Open</span>
+                </div>
+
+                <div class="queueRow">
+                  <span class="queueRow__id">AS-4214</span>
+                  <span class="queueRow__summary"
+                    >New hire laptop arrived without admin rights</span
+                  >
+                  <span class="queueRow__reporter"
+                    ><span class="queueRow__avatar">SK</span>Sam Kaplan</span
+                  >
+                  <span class="badge badge--info">Access</span>
+                  <span class="badge">Normal</span>
+                  <span class="queueRow__conf">
+                    <div class="confBar" style="--v: 81%"></div>
+                    81%
+                  </span>
+                  <span class="badge badge--accent">Drafted</span>
+                </div>
+
+                <div class="queueRow">
+                  <span class="queueRow__id">AS-4213</span>
+                  <span class="queueRow__summary"
+                    >VPN fails only on office Wi-Fi — works on hotspot</span
+                  >
+                  <span class="queueRow__reporter"
+                    ><span class="queueRow__avatar">LA</span>Leo Alvarez</span
+                  >
+                  <span class="badge badge--bad">Incident</span>
+                  <span class="badge">Normal</span>
+                  <span class="queueRow__conf is-bad">
+                    <div class="confBar" style="--v: 42%"></div>
+                    42%
+                  </span>
+                  <span class="badge badge--warn">Open</span>
+                </div>
+
+                <div class="queueRow">
+                  <span class="queueRow__id">AS-4212</span>
+                  <span class="queueRow__summary"
+                    >Export Slack workspace archive for compliance audit</span
+                  >
+                  <span class="queueRow__reporter"
+                    ><span class="queueRow__avatar">RN</span>Reyna Noor</span
+                  >
+                  <span class="badge badge--warn">Policy</span>
+                  <span class="badge badge--warn">High</span>
+                  <span class="queueRow__conf">
+                    <div class="confBar" style="--v: 79%"></div>
+                    79%
+                  </span>
+                  <span class="badge badge--warn">Triaged</span>
+                </div>
+
+                <div class="queueRow">
+                  <span class="queueRow__id">AS-4211</span>
+                  <span class="queueRow__summary"
+                    >Printer on 3F queues jobs but never prints</span
+                  >
+                  <span class="queueRow__reporter"
+                    ><span class="queueRow__avatar">TB</span>Tessa Brooks</span
+                  >
+                  <span class="badge">Howto</span>
+                  <span class="badge">Low</span>
+                  <span class="queueRow__conf">
+                    <div class="confBar" style="--v: 88%"></div>
+                    88%
+                  </span>
+                  <span class="badge badge--good">Sent</span>
+                </div>
+
+                <div class="queueRow">
+                  <span class="queueRow__id">AS-4210</span>
+                  <span class="queueRow__summary"
+                    >Enable Touch ID for sudo on dev-provisioned Mac</span
+                  >
+                  <span class="queueRow__reporter"
+                    ><span class="queueRow__avatar">AK</span>Ari Kobayashi</span
+                  >
+                  <span class="badge">Howto</span>
+                  <span class="badge">Low</span>
+                  <span class="queueRow__conf">
+                    <div class="confBar" style="--v: 95%"></div>
+                    95%
+                  </span>
+                  <span class="badge badge--good">Sent</span>
+                </div>
+
+                <div class="queueRow">
+                  <span class="queueRow__id">AS-4209</span>
+                  <span class="queueRow__summary"
+                    >Access request: read-only Snowflake for finance analyst</span
+                  >
+                  <span class="queueRow__reporter"
+                    ><span class="queueRow__avatar">HV</span>Hana Vale</span
+                  >
+                  <span class="badge badge--info">Access</span>
+                  <span class="badge">Normal</span>
+                  <span class="queueRow__conf">
+                    <div class="confBar" style="--v: 83%"></div>
+                    83%
+                  </span>
+                  <span class="badge badge--info">Escalated</span>
+                </div>
+              </div>
+            </div>
+
+            <aside class="queueAside">
+              <div class="card">
+                <div class="card__title">Deflection · last 7 days</div>
+                <svg class="spark" viewBox="0 0 240 72" preserveAspectRatio="none">
+                  <defs>
+                    <linearGradient id="g1" x1="0" x2="0" y1="0" y2="1">
+                      <stop offset="0%" stop-color="#4fd1c5" stop-opacity="0.4" />
+                      <stop offset="100%" stop-color="#4fd1c5" stop-opacity="0" />
+                    </linearGradient>
+                  </defs>
+                  <path
+                    d="M0,58 L40,52 L80,46 L120,38 L160,30 L200,22 L240,18 L240,72 L0,72 Z"
+                    fill="url(#g1)"
+                  />
+                  <path
+                    d="M0,58 L40,52 L80,46 L120,38 L160,30 L200,22 L240,18"
+                    stroke="#4fd1c5"
+                    stroke-width="1.5"
+                    fill="none"
+                  />
+                </svg>
+                <div
+                  style="
+                    display: flex;
+                    justify-content: space-between;
+                    font-family: var(--as-font-mono);
+                    font-size: 11px;
+                    color: var(--as-text-3);
+                    margin-top: 4px;
+                  "
+                >
+                  <span>Mon</span>
+                  <span>Wed</span>
+                  <span>Fri</span>
+                  <span>Sun</span>
+                </div>
+                <div
+                  style="
+                    margin-top: 10px;
+                    display: flex;
+                    justify-content: space-between;
+                    font-size: 11.5px;
+                  "
+                >
+                  <span style="color: var(--as-text-3)">Deflection rate</span>
+                  <span style="color: var(--as-good-text); font-weight: 600"
+                    >25.4%</span
+                  >
+                </div>
+              </div>
+
+              <div class="card">
+                <div class="card__title">Intent mix · today</div>
+                <div class="intentList">
+                  <div class="intentList__row">
+                    <div class="intentList__name">
+                      <span class="intentList__title">Howto</span>
+                      <div class="intentList__bar" style="--v: 86%"></div>
+                    </div>
+                    <span class="intentList__count">14</span>
+                  </div>
+                  <div class="intentList__row">
+                    <div class="intentList__name">
+                      <span class="intentList__title">Policy</span>
+                      <div class="intentList__bar" style="--v: 52%"></div>
+                    </div>
+                    <span class="intentList__count">9</span>
+                  </div>
+                  <div class="intentList__row">
+                    <div class="intentList__name">
+                      <span class="intentList__title">Access</span>
+                      <div class="intentList__bar" style="--v: 40%"></div>
+                    </div>
+                    <span class="intentList__count">7</span>
+                  </div>
+                  <div class="intentList__row">
+                    <div class="intentList__name">
+                      <span class="intentList__title">Incident</span>
+                      <div class="intentList__bar" style="--v: 24%"></div>
+                    </div>
+                    <span class="intentList__count">4</span>
+                  </div>
+                </div>
+              </div>
+
+              <div class="card">
+                <div class="card__title">Low-confidence cluster</div>
+                <div
+                  style="
+                    display: flex;
+                    flex-direction: column;
+                    gap: 6px;
+                    font-size: 12px;
+                    color: var(--as-text-2);
+                  "
+                >
+                  <div
+                    style="
+                      display: flex;
+                      justify-content: space-between;
+                      gap: 8px;
+                    "
+                  >
+                    <span>VPN / office Wi-Fi</span>
+                    <span class="badge badge--bad">42%</span>
+                  </div>
+                  <div
+                    style="
+                      display: flex;
+                      justify-content: space-between;
+                      gap: 8px;
+                    "
+                  >
+                    <span>Outlook crash · macOS 14.5</span>
+                    <span class="badge badge--warn">58%</span>
+                  </div>
+                  <div
+                    style="
+                      display: flex;
+                      justify-content: space-between;
+                      gap: 8px;
+                    "
+                  >
+                    <span>macOS 14 permissions drift</span>
+                    <span class="badge badge--warn">61%</span>
+                  </div>
+                </div>
+                <button class="btn btn--ghost btn--sm" style="margin-top: 10px">
+                  View KB gaps →
+                </button>
+              </div>
+            </aside>
+          </div>
+        </div>
+      </main>
+    </div>
+  </body>
+</html>
diff --git a/docs/screenshots/panels/03-intent.html b/docs/screenshots/panels/03-intent.html
new file mode 100644
index 0000000..05f10f4
--- /dev/null
+++ b/docs/screenshots/panels/03-intent.html
@@ -0,0 +1,633 @@
+<!doctype html>
+<html lang="en" data-accent="teal">
+  <head>
+    <meta charset="utf-8" />
+    <title>AssistSupport — ML Intent</title>
+    <link rel="stylesheet" href="../shell.css" />
+    <style>
+      .intent {
+        display: grid;
+        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
+        gap: 20px;
+        min-height: 0;
+      }
+      .intent__main {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+        min-width: 0;
+      }
+      .intent__side {
+        display: flex;
+        flex-direction: column;
+        gap: 14px;
+      }
+      .qCard {
+        padding: 16px 18px;
+        background: var(--as-glass-2);
+        border: 1px solid var(--as-border-1);
+        border-radius: var(--as-radius-2);
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+      }
+      .qCard__label {
+        font-size: 10.5px;
+        font-weight: 600;
+        letter-spacing: 1px;
+        text-transform: uppercase;
+        color: var(--as-text-3);
+      }
+      .qCard__text {
+        font-size: 15px;
+        line-height: 1.55;
+        color: var(--as-text-1);
+        max-width: 70ch;
+      }
+      .qCard__meta {
+        display: flex;
+        gap: 14px;
+        font-size: 11.5px;
+        color: var(--as-text-3);
+        font-family: var(--as-font-mono);
+      }
+      .qCard__meta b {
+        color: var(--as-text-2);
+        font-weight: 500;
+      }
+
+      .heroClass {
+        display: flex;
+        align-items: center;
+        gap: 18px;
+        padding: 18px 20px;
+        background: var(--as-accent-surface-1);
+        border: 1px solid var(--as-accent-border-1);
+        border-radius: var(--as-radius-2);
+      }
+      .heroClass__ring {
+        width: 84px;
+        height: 84px;
+        display: grid;
+        place-items: center;
+        border-radius: 50%;
+        background: conic-gradient(
+          var(--as-accent-1) 0% 86%,
+          rgba(255, 255, 255, 0.05) 86% 100%
+        );
+        position: relative;
+      }
+      .heroClass__ringInner {
+        width: 66px;
+        height: 66px;
+        border-radius: 50%;
+        background: var(--as-surface-1);
+        display: grid;
+        place-items: center;
+        font-family: var(--as-font-mono);
+        font-size: 20px;
+        font-weight: 600;
+        color: var(--as-accent-1);
+      }
+      .heroClass__body {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        flex: 1;
+      }
+      .heroClass__label {
+        font-size: 10.5px;
+        font-weight: 600;
+        letter-spacing: 1px;
+        text-transform: uppercase;
+        color: var(--as-accent-1);
+      }
+      .heroClass__name {
+        font-size: 22px;
+        font-weight: 600;
+        color: var(--as-text-1);
+        letter-spacing: -0.2px;
+      }
+      .heroClass__sub {
+        font-family: var(--as-font-mono);
+        font-size: 12.5px;
+        color: var(--as-text-3);
+      }
+      .heroClass__actions {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        gap: 6px;
+      }
+
+      .classList {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+      }
+      .classRow {
+        display: grid;
+        grid-template-columns: 90px 1fr 100px;
+        align-items: center;
+        gap: 14px;
+        padding: 12px 14px;
+        background: var(--as-glass-1);
+        border: 1px solid var(--as-border-1);
+        border-radius: var(--as-radius-2);
+      }
+      .classRow.is-winner {
+        background: var(--as-accent-surface-1);
+        border-color: var(--as-accent-border-1);
+      }
+      .classRow__name {
+        font-size: 13px;
+        font-weight: 500;
+        color: var(--as-text-1);
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+      .classRow__name .dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: var(--as-text-3);
+      }
+      .classRow.is-winner .classRow__name .dot {
+        background: var(--as-accent-1);
+        box-shadow: 0 0 6px var(--as-accent-1);
+      }
+      .classRow__bar {
+        position: relative;
+        height: 8px;
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.05);
+        overflow: hidden;
+      }
+      .classRow__bar::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        width: var(--v, 20%);
+        background: linear-gradient(90deg, var(--as-accent-2), var(--as-accent-1));
+        border-radius: 999px;
+      }
+      .classRow.is-winner .classRow__bar::after {
+        background: linear-gradient(90deg, var(--as-good), var(--as-accent-1));
+      }
+      .classRow__pct {
+        font-family: var(--as-font-mono);
+        font-size: 13px;
+        font-weight: 600;
+        color: var(--as-text-1);
+        text-align: right;
+      }
+
+      .featureList {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+      }
+      .feature {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) 80px 54px;
+        gap: 10px;
+        align-items: center;
+        padding: 6px 10px;
+        background: var(--as-glass-1);
+        border: 1px solid var(--as-border-1);
+        border-radius: 7px;
+        font-size: 12px;
+      }
+      .feature__token {
+        font-family: var(--as-font-mono);
+        color: var(--as-text-1);
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      .feature__bar {
+        position: relative;
+        height: 3px;
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.06);
+        overflow: hidden;
+      }
+      .feature__bar::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        width: var(--v, 50%);
+        background: var(--as-accent-1);
+      }
+      .feature__weight {
+        font-family: var(--as-font-mono);
+        font-size: 11px;
+        color: var(--as-text-2);
+        text-align: right;
+      }
+      .pipelineStrip {
+        display: grid;
+        grid-template-columns: 1fr 20px 1fr 20px 1fr 20px 1fr;
+        align-items: stretch;
+        padding: 10px;
+        background: var(--as-glass-2);
+        border: 1px solid var(--as-border-1);
+        border-radius: var(--as-radius-2);
+        gap: 0;
+      }
+      .pipeStage {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        padding: 10px 12px;
+        border-radius: 8px;
+      }
+      .pipeStage.is-active {
+        background: var(--as-accent-surface-1);
+        border: 1px solid var(--as-accent-border-1);
+      }
+      .pipeStage__label {
+        font-size: 10.5px;
+        font-weight: 600;
+        letter-spacing: 0.6px;
+        text-transform: uppercase;
+        color: var(--as-text-3);
+      }
+      .pipeStage.is-active .pipeStage__label {
+        color: var(--as-accent-1);
+      }
+      .pipeStage__value {
+        font-family: var(--as-font-mono);
+        font-size: 13px;
+        color: var(--as-text-1);
+        font-weight: 600;
+      }
+      .pipeStage__meta {
+        font-size: 11px;
+        color: var(--as-text-3);
+      }
+      .pipeArrow {
+        display: grid;
+        place-items: center;
+        color: var(--as-text-3);
+        font-family: var(--as-font-mono);
+      }
+
+      .modelMeta {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 10px;
+      }
+      .modelMeta__cell {
+        padding: 10px 12px;
+        background: var(--as-glass-1);
+        border: 1px solid var(--as-border-1);
+        border-radius: 7px;
+      }
+      .modelMeta__label {
+        font-size: 10.5px;
+        font-weight: 600;
+        letter-spacing: 0.3px;
+        text-transform: uppercase;
+        color: var(--as-text-3);
+      }
+      .modelMeta__value {
+        font-family: var(--as-font-mono);
+        font-size: 13px;
+        color: var(--as-text-1);
+        margin-top: 4px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="shell">
+      <aside class="nav">
+        <div class="nav__brand">
+          <div class="nav__mark">A</div>
+          <div>
+            <div class="nav__name">AssistSupport</div>
+            <div class="nav__meta">local · v1.2.0</div>
+          </div>
+        </div>
+        <div class="nav__section">
+          <div class="nav__sectionTitle">Core</div>
+          <ul class="nav__list">
+            <li class="nav__item"><span class="nav__icon">▣</span>Workspace</li>
+            <li class="nav__item"><span class="nav__icon">≡</span>Queue</li>
+            <li class="nav__item"><span class="nav__icon">◫</span>Knowledge</li>
+            <li class="nav__item"><span class="nav__icon">⚙</span>Settings</li>
+          </ul>
+        </div>
+        <div class="nav__section">
+          <div class="nav__sectionTitle">Admin</div>
+          <ul class="nav__list">
+            <li class="nav__item is-active">
+              <span class="nav__icon">✦</span>Analytics
+            </li>
+            <li class="nav__item"><span class="nav__icon">▸</span>Operations</li>
+          </ul>
+        </div>
+      </aside>
+      <main class="main">
+        <header class="topbar">
+          <div>
+            <div class="topbar__title">
+              <span class="crumb">Analytics</span>
+              <span class="crumb-sep">/</span> ML Intent
+            </div>
+            <div class="topbar__sub">
+              Classifier output for the focused ticket — logistic regression over TF-IDF bigrams
+            </div>
+          </div>
+          <div class="cmd">
+            <span>⌘</span>
+            <span style="flex: 1">Jump to ticket, cluster, or runbook…</span>
+            <span class="cmd__kbd">⌘K</span>
+          </div>
+          <div class="topbar__right">
+            <span class="status-dot">classifier-v5.2 · 0.91 macro-F1</span>
+          </div>
+        </header>
+
+        <div class="pane">
+          <div class="intent">
+            <div class="intent__main">
+              <div class="qCard">
+                <span class="qCard__label">Ticket · AS-4218</span>
+                <div class="qCard__text">
+                  Can I use a flash drive on my work MacBook for the offsite?
+                  Priya is flying Thursday and wants to bring a USB stick for slide backups.
+                </div>
+                <div class="qCard__meta">
+                  <span><b>Priya Anand</b></span>
+                  <span>· MacBook Pro 14 (M3) · macOS 14.5</span>
+                  <span>· 2h ago</span>
+                </div>
+              </div>
+
+              <div class="heroClass">
+                <div class="heroClass__ring">
+                  <div class="heroClass__ringInner">86</div>
+                </div>
+                <div class="heroClass__body">
+                  <span class="heroClass__label">Predicted intent</span>
+                  <span class="heroClass__name">Policy · removable_media</span>
+                  <span class="heroClass__sub"
+                    >logit 3.42 · softmax 0.86 · margin +0.38 to runner-up</span
+                  >
+                </div>
+                <div class="heroClass__actions">
+                  <span class="badge badge--accent">Route → Policy lane</span>
+                  <span style="font-size: 11px; color: var(--as-text-3)"
+                    >above routing threshold (0.60)</span
+                  >
+                </div>
+              </div>
+
+              <div>
+                <div
+                  style="
+                    font-size: 11px;
+                    font-weight: 600;
+                    letter-spacing: 0.3px;
+                    text-transform: uppercase;
+                    color: var(--as-text-3);
+                    margin-bottom: 10px;
+                  "
+                >
+                  Class probabilities
+                </div>
+                <div class="classList">
+                  <div class="classRow is-winner">
+                    <div class="classRow__name">
+                      <span class="dot"></span>
+                      Policy
+                    </div>
+                    <div class="classRow__bar" style="--v: 86%"></div>
+                    <div class="classRow__pct">0.86</div>
+                  </div>
+                  <div class="classRow">
+                    <div class="classRow__name">
+                      <span class="dot"></span>
+                      Howto
+                    </div>
+                    <div class="classRow__bar" style="--v: 48%"></div>
+                    <div class="classRow__pct">0.48</div>
+                  </div>
+                  <div class="classRow">
+                    <div class="classRow__name">
+                      <span class="dot"></span>
+                      Access
+                    </div>
+                    <div class="classRow__bar" style="--v: 21%"></div>
+                    <div class="classRow__pct">0.21</div>
+                  </div>
+                  <div class="classRow">
+                    <div class="classRow__name">
+                      <span class="dot"></span>
+                      Incident
+                    </div>
+                    <div class="classRow__bar" style="--v: 11%"></div>
+                    <div class="classRow__pct">0.11</div>
+                  </div>
+                  <div class="classRow">
+                    <div class="classRow__name">
+                      <span class="dot"></span>
+                      Runbook
+                    </div>
+                    <div class="classRow__bar" style="--v: 6%"></div>
+                    <div class="classRow__pct">0.06</div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="pipelineStrip">
+                <div class="pipeStage">
+                  <span class="pipeStage__label">Intent</span>
+                  <span class="pipeStage__value">Policy · 0.86</span>
+                  <span class="pipeStage__meta">logreg · 3ms</span>
+                </div>
+                <div class="pipeArrow">→</div>
+                <div class="pipeStage is-active">
+                  <span class="pipeStage__label">Retrieval</span>
+                  <span class="pipeStage__value">14 candidates</span>
+                  <span class="pipeStage__meta">TF-IDF · 22ms</span>
+                </div>
+                <div class="pipeArrow">→</div>
+                <div class="pipeStage">
+                  <span class="pipeStage__label">Rerank</span>
+                  <span class="pipeStage__value">top 4</span>
+                  <span class="pipeStage__meta">MiniLM-L6 · 48ms</span>
+                </div>
+                <div class="pipeArrow">→</div>
+                <div class="pipeStage">
+                  <span class="pipeStage__label">Draft</span>
+                  <span class="pipeStage__value">queued</span>
+                  <span class="pipeStage__meta">llama3.1-8b</span>
+                </div>
+              </div>
+            </div>
+
+            <aside class="intent__side">
+              <div class="card">
+                <div class="card__title">Top contributing tokens</div>
+                <div class="featureList">
+                  <div class="feature">
+                    <span class="feature__token">"flash drive"</span>
+                    <div class="feature__bar" style="--v: 95%"></div>
+                    <span class="feature__weight">+2.41</span>
+                  </div>
+                  <div class="feature">
+                    <span class="feature__token">"removable media"</span>
+                    <div class="feature__bar" style="--v: 80%"></div>
+                    <span class="feature__weight">+1.96</span>
+                  </div>
+                  <div class="feature">
+                    <span class="feature__token">"usb stick"</span>
+                    <div class="feature__bar" style="--v: 66%"></div>
+                    <span class="feature__weight">+1.58</span>
+                  </div>
+                  <div class="feature">
+                    <span class="feature__token">"allowed"</span>
+                    <div class="feature__bar" style="--v: 54%"></div>
+                    <span class="feature__weight">+1.24</span>
+                  </div>
+                  <div class="feature">
+                    <span class="feature__token">"company mac"</span>
+                    <div class="feature__bar" style="--v: 36%"></div>
+                    <span class="feature__weight">+0.78</span>
+                  </div>
+                  <div class="feature">
+                    <span class="feature__token">"offsite"</span>
+                    <div class="feature__bar" style="--v: 22%"></div>
+                    <span class="feature__weight">+0.41</span>
+                  </div>
+                </div>
+                <div
+                  style="
+                    margin-top: 10px;
+                    font-size: 11px;
+                    color: var(--as-text-3);
+                  "
+                >
+                  Weights shown relative to Policy class.
+                </div>
+              </div>
+
+              <div class="card">
+                <div class="card__title">Calibration</div>
+                <div
+                  style="
+                    display: flex;
+                    flex-direction: column;
+                    gap: 6px;
+                    font-size: 12px;
+                    color: var(--as-text-2);
+                  "
+                >
+                  <div
+                    style="
+                      display: flex;
+                      justify-content: space-between;
+                    "
+                  >
+                    <span>Confidence</span>
+                    <span class="mono">0.86</span>
+                  </div>
+                  <div
+                    style="
+                      display: flex;
+                      justify-content: space-between;
+                    "
+                  >
+                    <span>Calibrated (Platt)</span>
+                    <span class="mono" style="color: var(--as-good-text)">0.83</span>
+                  </div>
+                  <div
+                    style="
+                      display: flex;
+                      justify-content: space-between;
+                    "
+                  >
+                    <span>Entropy</span>
+                    <span class="mono">0.71 nat</span>
+                  </div>
+                  <div
+                    style="
+                      display: flex;
+                      justify-content: space-between;
+                    "
+                  >
+                    <span>Empirical hit rate @0.80</span>
+                    <span class="mono">0.88</span>
+                  </div>
+                </div>
+              </div>
+
+              <div class="card">
+                <div class="card__title">Model</div>
+                <div class="modelMeta">
+                  <div class="modelMeta__cell">
+                    <div class="modelMeta__label">Version</div>
+                    <div class="modelMeta__value">classifier-v5.2</div>
+                  </div>
+                  <div class="modelMeta__cell">
+                    <div class="modelMeta__label">Macro F1</div>
+                    <div class="modelMeta__value">0.914</div>
+                  </div>
+                  <div class="modelMeta__cell">
+                    <div class="modelMeta__label">Trained</div>
+                    <div class="modelMeta__value">2026-04-14</div>
+                  </div>
+                  <div class="modelMeta__cell">
+                    <div class="modelMeta__label">Samples</div>
+                    <div class="modelMeta__value">8,412</div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="card">
+                <div class="card__title">Nearest labeled examples</div>
+                <div
+                  style="
+                    display: flex;
+                    flex-direction: column;
+                    gap: 8px;
+                    font-size: 12px;
+                    color: var(--as-text-2);
+                  "
+                >
+                  <div>
+                    <div style="color: var(--as-text-1); font-weight: 500">
+                      "Is a USB-C SSD allowed for travel?"
+                    </div>
+                    <div class="mono" style="color: var(--as-text-3); font-size: 11px">
+                      Policy · removable_media · cosine 0.91
+                    </div>
+                  </div>
+                  <div>
+                    <div style="color: var(--as-text-1); font-weight: 500">
+                      "Can I plug an SD card into my work Mac?"
+                    </div>
+                    <div class="mono" style="color: var(--as-text-3); font-size: 11px">
+                      Policy · removable_media · cosine 0.88
+                    </div>
+                  </div>
+                  <div>
+                    <div style="color: var(--as-text-1); font-weight: 500">
+                      "Encrypted drive whitelist process"
+                    </div>
+                    <div class="mono" style="color: var(--as-text-3); font-size: 11px">
+                      Policy · removable_media · cosine 0.84
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </aside>
+          </div>
+        </div>
+      </main>
+    </div>
+  </body>
+</html>
diff --git a/docs/screenshots/panels/04-kb-gap.html b/docs/screenshots/panels/04-kb-gap.html
new file mode 100644
index 0000000..189fb01
--- /dev/null
+++ b/docs/screenshots/panels/04-kb-gap.html
@@ -0,0 +1,588 @@
+<!doctype html>
+<html lang="en" data-accent="teal">
+  <head>
+    <meta charset="utf-8" />
+    <title>AssistSupport — KB Gap Analysis</title>
+    <link rel="stylesheet" href="../shell.css" />
+    <style>
+      .kpiRow {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 12px;
+      }
+      .kpi {
+        padding: 14px 16px;
+        background: var(--as-glass-2);
+        border: 1px solid var(--as-border-1);
+        border-radius: var(--as-radius-2);
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+      }
+      .kpi__label {
+        font-size: 10.5px;
+        font-weight: 600;
+        letter-spacing: 0.3px;
+        text-transform: uppercase;
+        color: var(--as-text-3);
+      }
+      .kpi__value {
+        font-family: var(--as-font-mono);
+        font-size: 26px;
+        font-weight: 600;
+        color: var(--as-text-1);
+        line-height: 1;
+      }
+      .kpi__delta {
+        font-size: 11.5px;
+      }
+      .kpi__delta.is-good {
+        color: var(--as-good-text);
+      }
+      .kpi__delta.is-warn {
+        color: var(--as-warn-text);
+      }
+      .kpi__delta.is-bad {
+        color: var(--as-bad-text);
+      }
+      .gapBody {
+        display: grid;
+        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
+        gap: 20px;
+        min-height: 0;
+      }
+      .clusters {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+      }
+      .clusterHead {
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+        padding: 0 4px;
+      }
+      .clusterHead__title {
+        font-size: 13px;
+        font-weight: 600;
+        color: var(--as-text-1);
+      }
+      .clusterHead__sub {
+        font-size: 11px;
+        color: var(--as-text-3);
+      }
+      .cluster {
+        padding: 14px 16px;
+        background: var(--as-glass-2);
+        border: 1px solid var(--as-border-1);
+        border-radius: var(--as-radius-2);
+        display: grid;
+        grid-template-columns: auto 1fr auto;
+        gap: 14px;
+        align-items: start;
+      }
+      .cluster.is-hot {
+        border-color: rgba(251, 113, 133, 0.3);
+        background: linear-gradient(
+          180deg,
+          rgba(251, 113, 133, 0.04),
+          var(--as-glass-2)
+        );
+      }
+      .cluster__rank {
+        width: 28px;
+        height: 28px;
+        border-radius: 50%;
+        display: grid;
+        place-items: center;
+        background: var(--as-glass-3);
+        color: var(--as-text-2);
+        font-family: var(--as-font-mono);
+        font-size: 12px;
+        font-weight: 600;
+      }
+      .cluster.is-hot .cluster__rank {
+        background: var(--as-bad-surface);
+        color: var(--as-bad-text);
+        border: 1px solid var(--as-bad-border);
+      }
+      .cluster__body {
+        min-width: 0;
+      }
+      .cluster__title {
+        font-size: 14px;
+        font-weight: 600;
+        color: var(--as-text-1);
+        letter-spacing: -0.1px;
+      }
+      .cluster__queries {
+        margin-top: 6px;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 6px;
+      }
+      .queryChip {
+        display: inline-flex;
+        align-items: center;
+        padding: 3px 8px;
+        border-radius: var(--as-radius-pill);
+        background: var(--as-glass-1);
+        border: 1px solid var(--as-border-1);
+        color: var(--as-text-2);
+        font-size: 11px;
+      }
+      .cluster__stats {
+        display: flex;
+        gap: 14px;
+        margin-top: 10px;
+        font-size: 11.5px;
+        color: var(--as-text-3);
+      }
+      .cluster__stats b {
+        color: var(--as-text-1);
+        font-family: var(--as-font-mono);
+        font-weight: 600;
+      }
+      .cluster__right {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        gap: 8px;
+      }
+      .cluster__conf {
+        font-family: var(--as-font-mono);
+        font-size: 16px;
+        font-weight: 600;
+        color: var(--as-text-1);
+      }
+      .cluster.is-hot .cluster__conf {
+        color: var(--as-bad-text);
+      }
+      .cluster__spark {
+        width: 96px;
+        height: 28px;
+      }
+
+      .gapAside {
+        display: flex;
+        flex-direction: column;
+        gap: 14px;
+      }
+      .trend {
+        padding: 14px 16px;
+        background: var(--as-glass-2);
+        border: 1px solid var(--as-border-1);
+        border-radius: var(--as-radius-2);
+      }
+      .trend__title {
+        font-size: 11px;
+        font-weight: 600;
+        letter-spacing: 0.3px;
+        text-transform: uppercase;
+        color: var(--as-text-3);
+        margin-bottom: 10px;
+      }
+      .trend__chart {
+        width: 100%;
+        height: 120px;
+      }
+      .trend__legend {
+        display: flex;
+        gap: 14px;
+        margin-top: 8px;
+        font-size: 11px;
+        color: var(--as-text-3);
+      }
+      .trend__dot {
+        display: inline-block;
+        width: 8px;
+        height: 8px;
+        border-radius: 2px;
+        margin-right: 6px;
+        vertical-align: middle;
+      }
+      .rec {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+      .recItem {
+        padding: 10px 12px;
+        background: var(--as-glass-1);
+        border: 1px solid var(--as-border-1);
+        border-radius: 8px;
+        display: grid;
+        grid-template-columns: 1fr auto;
+        gap: 10px;
+        align-items: center;
+      }
+      .recItem__title {
+        font-size: 13px;
+        font-weight: 500;
+        color: var(--as-text-1);
+      }
+      .recItem__meta {
+        font-size: 11px;
+        color: var(--as-text-3);
+        margin-top: 2px;
+        font-family: var(--as-font-mono);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="shell">
+      <aside class="nav">
+        <div class="nav__brand">
+          <div class="nav__mark">A</div>
+          <div>
+            <div class="nav__name">AssistSupport</div>
+            <div class="nav__meta">local · v1.2.0</div>
+          </div>
+        </div>
+        <div class="nav__section">
+          <div class="nav__sectionTitle">Core</div>
+          <ul class="nav__list">
+            <li class="nav__item"><span class="nav__icon">▣</span>Workspace</li>
+            <li class="nav__item"><span class="nav__icon">≡</span>Queue</li>
+            <li class="nav__item"><span class="nav__icon">◫</span>Knowledge</li>
+            <li class="nav__item"><span class="nav__icon">⚙</span>Settings</li>
+          </ul>
+        </div>
+        <div class="nav__section">
+          <div class="nav__sectionTitle">Admin</div>
+          <ul class="nav__list">
+            <li class="nav__item is-active">
+              <span class="nav__icon">✦</span>Analytics
+            </li>
+            <li class="nav__item"><span class="nav__icon">▸</span>Operations</li>
+          </ul>
+        </div>
+      </aside>
+      <main class="main">
+        <header class="topbar">
+          <div>
+            <div class="topbar__title">
+              <span class="crumb">Analytics</span>
+              <span class="crumb-sep">/</span> KB Gap Analysis
+            </div>
+            <div class="topbar__sub">
+              Low-confidence clusters the KB doesn't yet cover — last 14 days
+            </div>
+          </div>
+          <div class="cmd">
+            <span>⌘</span>
+            <span style="flex: 1">Search clusters, queries, or suggested articles…</span>
+            <span class="cmd__kbd">⌘K</span>
+          </div>
+          <div class="topbar__right">
+            <span class="status-dot">gap analyzer · 8m ago</span>
+          </div>
+        </header>
+
+        <div class="pane">
+          <div class="kpiRow">
+            <div class="kpi">
+              <span class="kpi__label">Open gaps</span>
+              <span class="kpi__value">14</span>
+              <span class="kpi__delta is-warn">▲ 2 this week</span>
+            </div>
+            <div class="kpi">
+              <span class="kpi__label">Affected tickets</span>
+              <span class="kpi__value">87</span>
+              <span class="kpi__delta is-warn">▲ 12 this week</span>
+            </div>
+            <div class="kpi">
+              <span class="kpi__label">Unresolved @ &lt;60% conf</span>
+              <span class="kpi__value">11.3%</span>
+              <span class="kpi__delta is-bad">▲ 1.4pt vs last wk</span>
+            </div>
+            <div class="kpi">
+              <span class="kpi__label">KB articles indexed</span>
+              <span class="kpi__value">3,542</span>
+              <span class="kpi__delta is-good">▲ 18 this week</span>
+            </div>
+          </div>
+
+          <div class="gapBody">
+            <div class="clusters">
+              <div class="clusterHead">
+                <span class="clusterHead__title">Clusters by impact</span>
+                <span class="clusterHead__sub"
+                  >sorted by affected tickets × retrieval miss rate</span
+                >
+              </div>
+
+              <div class="cluster is-hot">
+                <div class="cluster__rank">1</div>
+                <div class="cluster__body">
+                  <div class="cluster__title">
+                    VPN fails on office Wi-Fi only
+                  </div>
+                  <div class="cluster__queries">
+                    <span class="queryChip">"vpn won't connect at HQ"</span>
+                    <span class="queryChip">"tunnel drops when I plug into ethernet"</span>
+                    <span class="queryChip">"works on hotspot, fails on office Wi-Fi"</span>
+                    <span class="queryChip">+6 more</span>
+                  </div>
+                  <div class="cluster__stats">
+                    <span><b>14</b> tickets</span>
+                    <span><b>0</b> KB matches ≥0.60</span>
+                    <span><b>6.8</b> avg handle (min)</span>
+                    <span><b>3</b> escalated</span>
+                  </div>
+                </div>
+                <div class="cluster__right">
+                  <span class="cluster__conf">42%</span>
+                  <svg class="cluster__spark" viewBox="0 0 96 28" preserveAspectRatio="none">
+                    <path
+                      d="M0,18 L16,16 L32,20 L48,14 L64,12 L80,8 L96,6"
+                      stroke="#fb7185"
+                      stroke-width="1.5"
+                      fill="none"
+                    />
+                  </svg>
+                </div>
+              </div>
+
+              <div class="cluster">
+                <div class="cluster__rank">2</div>
+                <div class="cluster__body">
+                  <div class="cluster__title">
+                    Outlook crash on M3 Macs after macOS 14.5
+                  </div>
+                  <div class="cluster__queries">
+                    <span class="queryChip">"outlook keeps crashing"</span>
+                    <span class="queryChip">"classic outlook won't open macOS 14.5"</span>
+                    <span class="queryChip">"outlook quits on send"</span>
+                    <span class="queryChip">+4 more</span>
+                  </div>
+                  <div class="cluster__stats">
+                    <span><b>9</b> tickets</span>
+                    <span><b>1</b> KB match (stale)</span>
+                    <span><b>4.1</b> avg handle (min)</span>
+                    <span><b>1</b> escalated</span>
+                  </div>
+                </div>
+                <div class="cluster__right">
+                  <span class="cluster__conf">58%</span>
+                  <svg class="cluster__spark" viewBox="0 0 96 28" preserveAspectRatio="none">
+                    <path
+                      d="M0,20 L16,22 L32,18 L48,16 L64,14 L80,12 L96,14"
+                      stroke="#fbbf24"
+                      stroke-width="1.5"
+                      fill="none"
+                    />
+                  </svg>
+                </div>
+              </div>
+
+              <div class="cluster">
+                <div class="cluster__rank">3</div>
+                <div class="cluster__body">
+                  <div class="cluster__title">
+                    macOS 14 permissions drift after reboot
+                  </div>
+                  <div class="cluster__queries">
+                    <span class="queryChip">"screen recording permission keeps resetting"</span>
+                    <span class="queryChip">"zoom can't see my screen anymore"</span>
+                    <span class="queryChip">"tccd keeps forgetting my choice"</span>
+                  </div>
+                  <div class="cluster__stats">
+                    <span><b>7</b> tickets</span>
+                    <span><b>2</b> KB matches (partial)</span>
+                    <span><b>3.4</b> avg handle (min)</span>
+                    <span><b>0</b> escalated</span>
+                  </div>
+                </div>
+                <div class="cluster__right">
+                  <span class="cluster__conf">61%</span>
+                  <svg class="cluster__spark" viewBox="0 0 96 28" preserveAspectRatio="none">
+                    <path
+                      d="M0,14 L16,16 L32,14 L48,18 L64,14 L80,10 L96,8"
+                      stroke="#fbbf24"
+                      stroke-width="1.5"
+                      fill="none"
+                    />
+                  </svg>
+                </div>
+              </div>
+
+              <div class="cluster">
+                <div class="cluster__rank">4</div>
+                <div class="cluster__body">
+                  <div class="cluster__title">
+                    Slack workspace export for compliance audit
+                  </div>
+                  <div class="cluster__queries">
+                    <span class="queryChip">"export slack for soc2 audit"</span>
+                    <span class="queryChip">"data export legal hold"</span>
+                    <span class="queryChip">"compliance slack archive"</span>
+                  </div>
+                  <div class="cluster__stats">
+                    <span><b>5</b> tickets</span>
+                    <span><b>1</b> KB match (out of date)</span>
+                    <span><b>12.6</b> avg handle (min)</span>
+                    <span><b>2</b> escalated</span>
+                  </div>
+                </div>
+                <div class="cluster__right">
+                  <span class="cluster__conf">64%</span>
+                  <svg class="cluster__spark" viewBox="0 0 96 28" preserveAspectRatio="none">
+                    <path
+                      d="M0,22 L16,18 L32,20 L48,14 L64,12 L80,10 L96,10"
+                      stroke="#4fd1c5"
+                      stroke-width="1.5"
+                      fill="none"
+                    />
+                  </svg>
+                </div>
+              </div>
+
+              <div class="cluster">
+                <div class="cluster__rank">5</div>
+                <div class="cluster__body">
+                  <div class="cluster__title">
+                    Touch ID for sudo provisioning across dev fleet
+                  </div>
+                  <div class="cluster__queries">
+                    <span class="queryChip">"touchid sudo dev mac"</span>
+                    <span class="queryChip">"pam_tid.so not persisting"</span>
+                    <span class="queryChip">"fingerprint sudo broken after update"</span>
+                  </div>
+                  <div class="cluster__stats">
+                    <span><b>4</b> tickets</span>
+                    <span><b>0</b> KB matches</span>
+                    <span><b>5.2</b> avg handle (min)</span>
+                    <span><b>0</b> escalated</span>
+                  </div>
+                </div>
+                <div class="cluster__right">
+                  <span class="cluster__conf">67%</span>
+                  <svg class="cluster__spark" viewBox="0 0 96 28" preserveAspectRatio="none">
+                    <path
+                      d="M0,12 L16,14 L32,12 L48,10 L64,10 L80,8 L96,6"
+                      stroke="#4fd1c5"
+                      stroke-width="1.5"
+                      fill="none"
+                    />
+                  </svg>
+                </div>
+              </div>
+            </div>
+
+            <aside class="gapAside">
+              <div class="trend">
+                <div class="trend__title">Confidence distribution · 14 days</div>
+                <svg class="trend__chart" viewBox="0 0 320 120" preserveAspectRatio="none">
+                  <defs>
+                    <linearGradient id="gHi" x1="0" x2="0" y1="0" y2="1">
+                      <stop offset="0%" stop-color="#2dd4bf" stop-opacity="0.45" />
+                      <stop offset="100%" stop-color="#2dd4bf" stop-opacity="0" />
+                    </linearGradient>
+                    <linearGradient id="gLo" x1="0" x2="0" y1="0" y2="1">
+                      <stop offset="0%" stop-color="#fb7185" stop-opacity="0.35" />
+                      <stop offset="100%" stop-color="#fb7185" stop-opacity="0" />
+                    </linearGradient>
+                  </defs>
+                  <!-- high-confidence area -->
+                  <path
+                    d="M0,26 L24,28 L48,22 L72,30 L96,24 L120,20 L144,22 L168,18 L192,14 L216,18 L240,12 L264,16 L288,12 L320,8 L320,120 L0,120 Z"
+                    fill="url(#gHi)"
+                  />
+                  <path
+                    d="M0,26 L24,28 L48,22 L72,30 L96,24 L120,20 L144,22 L168,18 L192,14 L216,18 L240,12 L264,16 L288,12 L320,8"
+                    stroke="#2dd4bf"
+                    stroke-width="1.5"
+                    fill="none"
+                  />
+                  <!-- low-confidence area -->
+                  <path
+                    d="M0,94 L24,92 L48,96 L72,88 L96,94 L120,90 L144,92 L168,84 L192,90 L216,84 L240,88 L264,82 L288,86 L320,80 L320,120 L0,120 Z"
+                    fill="url(#gLo)"
+                  />
+                  <path
+                    d="M0,94 L24,92 L48,96 L72,88 L96,94 L120,90 L144,92 L168,84 L192,90 L216,84 L240,88 L264,82 L288,86 L320,80"
+                    stroke="#fb7185"
+                    stroke-width="1.5"
+                    fill="none"
+                  />
+                </svg>
+                <div class="trend__legend">
+                  <span>
+                    <span class="trend__dot" style="background: #2dd4bf"></span
+                    >Grounded ≥ 0.80
+                  </span>
+                  <span>
+                    <span class="trend__dot" style="background: #fb7185"></span
+                    >Abstained / clarify
+                  </span>
+                </div>
+              </div>
+
+              <div class="card">
+                <div class="card__title">Suggested articles to write</div>
+                <div class="rec">
+                  <div class="recItem">
+                    <div>
+                      <div class="recItem__title">
+                        HQ Wi-Fi DNS quirk blocks VPN tunnel
+                      </div>
+                      <div class="recItem__meta">
+                        cluster #1 · 14 tickets · 6.8 min avg handle
+                      </div>
+                    </div>
+                    <span class="badge badge--bad">Priority</span>
+                  </div>
+                  <div class="recItem">
+                    <div>
+                      <div class="recItem__title">
+                        Classic Outlook vs New Outlook on macOS 14.5
+                      </div>
+                      <div class="recItem__meta">
+                        cluster #2 · 9 tickets · 4.1 min avg handle
+                      </div>
+                    </div>
+                    <span class="badge badge--warn">Soon</span>
+                  </div>
+                  <div class="recItem">
+                    <div>
+                      <div class="recItem__title">
+                        Re-granting screen recording after macOS updates
+                      </div>
+                      <div class="recItem__meta">
+                        cluster #3 · 7 tickets · partial KB match
+                      </div>
+                    </div>
+                    <span class="badge">Backlog</span>
+                  </div>
+                  <div class="recItem">
+                    <div>
+                      <div class="recItem__title">
+                        Slack export runbook (SOC 2 / legal hold)
+                      </div>
+                      <div class="recItem__meta">
+                        cluster #4 · 5 tickets · long-running
+                      </div>
+                    </div>
+                    <span class="badge">Backlog</span>
+                  </div>
+                  <div class="recItem">
+                    <div>
+                      <div class="recItem__title">
+                        Touch ID sudo persistence after update
+                      </div>
+                      <div class="recItem__meta">
+                        cluster #5 · 4 tickets · dev fleet
+                      </div>
+                    </div>
+                    <span class="badge">Backlog</span>
+                  </div>
+                </div>
+              </div>
+            </aside>
+          </div>
+        </div>
+      </main>
+    </div>
+  </body>
+</html>
diff --git a/docs/screenshots/panels/05-ops.html b/docs/screenshots/panels/05-ops.html
new file mode 100644
index 0000000..3c61632
--- /dev/null
+++ b/docs/screenshots/panels/05-ops.html
@@ -0,0 +1,653 @@
+<!doctype html>
+<html lang="en" data-accent="teal">
+  <head>
+    <meta charset="utf-8" />
+    <title>AssistSupport — Operations</title>
+    <link rel="stylesheet" href="../shell.css" />
+    <style>
+      .ops {
+        display: grid;
+        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
+        gap: 20px;
+        min-height: 0;
+      }
+      .ops__main {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+        min-width: 0;
+      }
+      .releaseHeader {
+        display: grid;
+        grid-template-columns: auto 1fr auto;
+        gap: 18px;
+        align-items: center;
+        padding: 18px 20px;
+        background: var(--as-glass-2);
+        border: 1px solid var(--as-border-1);
+        border-radius: var(--as-radius-2);
+      }
+      .release__mark {
+        width: 56px;
+        height: 56px;
+        border-radius: var(--as-radius-2);
+        display: grid;
+        place-items: center;
+        background: linear-gradient(
+          135deg,
+          var(--as-accent-1) 0%,
+          var(--as-accent-2) 100%
+        );
+        color: var(--as-accent-ink);
+        font-weight: 700;
+        font-family: var(--as-font-mono);
+        font-size: 16px;
+      }
+      .release__body {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+      .release__label {
+        font-size: 10.5px;
+        font-weight: 600;
+        letter-spacing: 1px;
+        text-transform: uppercase;
+        color: var(--as-text-3);
+      }
+      .release__name {
+        font-size: 20px;
+        font-weight: 600;
+        color: var(--as-text-1);
+        letter-spacing: -0.2px;
+      }
+      .release__sub {
+        font-family: var(--as-font-mono);
+        font-size: 12px;
+        color: var(--as-text-3);
+      }
+      .release__actions {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        align-items: flex-end;
+      }
+      .timeline {
+        display: flex;
+        flex-direction: column;
+        gap: 0;
+        padding: 16px 18px;
+        background: var(--as-glass-2);
+        border: 1px solid var(--as-border-1);
+        border-radius: var(--as-radius-2);
+      }
+      .timeline__title {
+        font-size: 11px;
+        font-weight: 600;
+        letter-spacing: 0.3px;
+        text-transform: uppercase;
+        color: var(--as-text-3);
+        margin-bottom: 12px;
+      }
+      .event {
+        display: grid;
+        grid-template-columns: 72px 20px 1fr auto;
+        gap: 10px;
+        align-items: center;
+        padding: 8px 0;
+        border-bottom: 1px dashed var(--as-border-1);
+      }
+      .event:last-child {
+        border-bottom: 0;
+      }
+      .event__time {
+        font-family: var(--as-font-mono);
+        font-size: 11px;
+        color: var(--as-text-3);
+        text-align: right;
+      }
+      .event__bullet {
+        position: relative;
+        display: grid;
+        place-items: center;
+      }
+      .event__bullet::before {
+        content: "";
+        position: absolute;
+        top: -14px;
+        bottom: -14px;
+        width: 1px;
+        background: var(--as-border-1);
+      }
+      .event:first-child .event__bullet::before {
+        top: 8px;
+      }
+      .event:last-child .event__bullet::before {
+        bottom: 8px;
+      }
+      .event__dot {
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background: var(--as-text-3);
+        border: 2px solid var(--as-surface-1);
+        z-index: 1;
+      }
+      .event.is-good .event__dot {
+        background: var(--as-good);
+        box-shadow: 0 0 8px var(--as-good);
+      }
+      .event.is-warn .event__dot {
+        background: var(--as-warn);
+      }
+      .event.is-active .event__dot {
+        background: var(--as-accent-1);
+        box-shadow: 0 0 8px var(--as-accent-1);
+      }
+      .event__body {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        min-width: 0;
+      }
+      .event__title {
+        font-size: 13px;
+        font-weight: 500;
+        color: var(--as-text-1);
+      }
+      .event__meta {
+        font-family: var(--as-font-mono);
+        font-size: 11px;
+        color: var(--as-text-3);
+      }
+
+      .healthGrid {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 10px;
+      }
+      .health {
+        display: grid;
+        grid-template-columns: auto 1fr auto;
+        gap: 10px;
+        align-items: center;
+        padding: 10px 12px;
+        background: var(--as-glass-1);
+        border: 1px solid var(--as-border-1);
+        border-radius: 8px;
+      }
+      .health.is-ok {
+        border-color: rgba(45, 212, 191, 0.25);
+      }
+      .health__icon {
+        width: 22px;
+        height: 22px;
+        border-radius: 50%;
+        display: grid;
+        place-items: center;
+        background: var(--as-good-surface);
+        color: var(--as-good-text);
+        font-size: 11px;
+      }
+      .health.is-warn .health__icon {
+        background: var(--as-warn-surface);
+        color: var(--as-warn-text);
+      }
+      .health__label {
+        font-size: 12.5px;
+        font-weight: 500;
+        color: var(--as-text-1);
+      }
+      .health__meta {
+        font-family: var(--as-font-mono);
+        font-size: 11px;
+        color: var(--as-text-3);
+      }
+      .health__value {
+        font-family: var(--as-font-mono);
+        font-size: 13px;
+        color: var(--as-text-1);
+        font-weight: 600;
+      }
+
+      .ops__side {
+        display: flex;
+        flex-direction: column;
+        gap: 14px;
+      }
+      .rollback {
+        padding: 14px 16px;
+        background: var(--as-glass-2);
+        border: 1px solid var(--as-border-1);
+        border-radius: var(--as-radius-2);
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+      }
+      .rollback__row {
+        display: grid;
+        grid-template-columns: auto 1fr auto;
+        gap: 10px;
+        align-items: center;
+        padding: 10px 12px;
+        background: var(--as-glass-1);
+        border: 1px solid var(--as-border-1);
+        border-radius: 8px;
+      }
+      .rollback__row.is-current {
+        border-color: var(--as-accent-border-1);
+        background: var(--as-accent-surface-1);
+      }
+      .rollback__mark {
+        width: 28px;
+        height: 28px;
+        border-radius: 6px;
+        display: grid;
+        place-items: center;
+        background: var(--as-glass-3);
+        font-family: var(--as-font-mono);
+        font-size: 11px;
+        color: var(--as-text-2);
+      }
+      .rollback__row.is-current .rollback__mark {
+        background: var(--as-accent-1);
+        color: var(--as-accent-ink);
+      }
+      .rollback__name {
+        font-size: 12.5px;
+        font-weight: 500;
+        color: var(--as-text-1);
+      }
+      .rollback__sub {
+        font-family: var(--as-font-mono);
+        font-size: 11px;
+        color: var(--as-text-3);
+      }
+      .rollback__actions {
+        display: flex;
+        gap: 6px;
+      }
+      .runbookList {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+      }
+      .runbookList__row {
+        display: grid;
+        grid-template-columns: 16px 1fr auto;
+        gap: 10px;
+        align-items: center;
+        padding: 8px 10px;
+        background: var(--as-glass-1);
+        border: 1px solid var(--as-border-1);
+        border-radius: 7px;
+        font-size: 12.5px;
+        color: var(--as-text-2);
+      }
+      .runbookList__row .check {
+        display: grid;
+        place-items: center;
+        width: 16px;
+        height: 16px;
+        border-radius: 4px;
+        background: var(--as-good-surface);
+        color: var(--as-good-text);
+        font-size: 10px;
+      }
+      .runbookList__row.is-pending .check {
+        background: var(--as-glass-2);
+        color: var(--as-text-3);
+      }
+      .runbookList__row.is-failed .check {
+        background: var(--as-bad-surface);
+        color: var(--as-bad-text);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="shell">
+      <aside class="nav">
+        <div class="nav__brand">
+          <div class="nav__mark">A</div>
+          <div>
+            <div class="nav__name">AssistSupport</div>
+            <div class="nav__meta">local · v1.2.0</div>
+          </div>
+        </div>
+        <div class="nav__section">
+          <div class="nav__sectionTitle">Core</div>
+          <ul class="nav__list">
+            <li class="nav__item"><span class="nav__icon">▣</span>Workspace</li>
+            <li class="nav__item"><span class="nav__icon">≡</span>Queue</li>
+            <li class="nav__item"><span class="nav__icon">◫</span>Knowledge</li>
+            <li class="nav__item"><span class="nav__icon">⚙</span>Settings</li>
+          </ul>
+        </div>
+        <div class="nav__section">
+          <div class="nav__sectionTitle">Admin</div>
+          <ul class="nav__list">
+            <li class="nav__item"><span class="nav__icon">✦</span>Analytics</li>
+            <li class="nav__item is-active">
+              <span class="nav__icon">▸</span>Operations
+            </li>
+          </ul>
+        </div>
+      </aside>
+      <main class="main">
+        <header class="topbar">
+          <div>
+            <div class="topbar__title">
+              <span class="crumb">Operations</span>
+              <span class="crumb-sep">/</span> Deploy &amp; rollback
+            </div>
+            <div class="topbar__sub">
+              Release orchestration, health checks, and single-click rollback
+            </div>
+          </div>
+          <div class="cmd">
+            <span>⌘</span>
+            <span style="flex: 1">Start deploy, view runbook, or check logs…</span>
+            <span class="cmd__kbd">⌘K</span>
+          </div>
+          <div class="topbar__right">
+            <span class="status-dot">release healthy · 2m 14s</span>
+          </div>
+        </header>
+
+        <div class="pane">
+          <div class="ops">
+            <div class="ops__main">
+              <div class="releaseHeader">
+                <div class="release__mark">1.2</div>
+                <div class="release__body">
+                  <span class="release__label">Current release</span>
+                  <span class="release__name">v1.2.0 — classifier-v5.2 + hero workspace</span>
+                  <span class="release__sub">
+                    deployed 2026-04-24 12:18 UTC · sha 6b410e4 · by saagar@box
+                  </span>
+                </div>
+                <div class="release__actions">
+                  <button class="btn btn--primary">▸ Deploy next</button>
+                  <button class="btn btn--ghost btn--sm">⟲ Rollback to 1.1.4</button>
+                </div>
+              </div>
+
+              <div class="timeline">
+                <div class="timeline__title">Release timeline · last 24h</div>
+                <div class="event is-good">
+                  <span class="event__time">12:18</span>
+                  <span class="event__bullet"><span class="event__dot"></span></span>
+                  <div class="event__body">
+                    <span class="event__title">v1.2.0 promoted to current</span>
+                    <span class="event__meta"
+                      >health checks 8/8 pass · p50 latency 22ms · build 6b410e4</span
+                    >
+                  </div>
+                  <span class="badge badge--good">Healthy</span>
+                </div>
+                <div class="event is-active">
+                  <span class="event__time">12:14</span>
+                  <span class="event__bullet"><span class="event__dot"></span></span>
+                  <div class="event__body">
+                    <span class="event__title">Canary → 100% traffic</span>
+                    <span class="event__meta"
+                      >error rate 0.00% · 12 min on 10% · promoted automatically</span
+                    >
+                  </div>
+                  <span class="badge badge--accent">Promoted</span>
+                </div>
+                <div class="event">
+                  <span class="event__time">12:02</span>
+                  <span class="event__bullet"><span class="event__dot"></span></span>
+                  <div class="event__body">
+                    <span class="event__title">Canary @ 10% traffic</span>
+                    <span class="event__meta"
+                      >guardrails: p95 latency &lt;80ms, error &lt;0.1%, conf ≥0.7</span
+                    >
+                  </div>
+                  <span class="badge">Gated</span>
+                </div>
+                <div class="event">
+                  <span class="event__time">11:57</span>
+                  <span class="event__bullet"><span class="event__dot"></span></span>
+                  <div class="event__body">
+                    <span class="event__title">Build 6b410e4 signed + notarized</span>
+                    <span class="event__meta"
+                      >macOS notarization accepted · sha-256 a1f…9c</span
+                    >
+                  </div>
+                  <span class="badge badge--good">Signed</span>
+                </div>
+                <div class="event is-warn">
+                  <span class="event__time">09:41</span>
+                  <span class="event__bullet"><span class="event__dot"></span></span>
+                  <div class="event__body">
+                    <span class="event__title">v1.1.5-rc canary paused</span>
+                    <span class="event__meta"
+                      >retrieval p95 exceeded 80ms · auto-paused · root cause: index rebuild</span
+                    >
+                  </div>
+                  <span class="badge badge--warn">Paused</span>
+                </div>
+                <div class="event is-good">
+                  <span class="event__time">07:12</span>
+                  <span class="event__bullet"><span class="event__dot"></span></span>
+                  <div class="event__body">
+                    <span class="event__title">Nightly KB reindex complete</span>
+                    <span class="event__meta"
+                      >3,542 docs indexed · 28 added · 4 removed · 46s</span
+                    >
+                  </div>
+                  <span class="badge badge--good">OK</span>
+                </div>
+              </div>
+
+              <div
+                style="
+                  font-size: 11px;
+                  font-weight: 600;
+                  letter-spacing: 0.3px;
+                  text-transform: uppercase;
+                  color: var(--as-text-3);
+                  padding: 0 4px;
+                "
+              >
+                Post-deploy health
+              </div>
+              <div class="healthGrid">
+                <div class="health is-ok">
+                  <span class="health__icon">✓</span>
+                  <div>
+                    <div class="health__label">Classifier smoke</div>
+                    <div class="health__meta">20 fixtures · macro-F1 0.91</div>
+                  </div>
+                  <span class="health__value">PASS</span>
+                </div>
+                <div class="health is-ok">
+                  <span class="health__icon">✓</span>
+                  <div>
+                    <div class="health__label">Hybrid retrieval p50</div>
+                    <div class="health__meta">target &lt;25ms · observed 22ms</span>
+                    </div>
+                  </div>
+                  <span class="health__value">22ms</span>
+                </div>
+                <div class="health is-ok">
+                  <span class="health__icon">✓</span>
+                  <div>
+                    <div class="health__label">SQLCipher unlock</div>
+                    <div class="health__meta">roundtrip &lt;40ms · observed 28ms</div>
+                  </div>
+                  <span class="health__value">28ms</span>
+                </div>
+                <div class="health is-ok">
+                  <span class="health__icon">✓</span>
+                  <div>
+                    <div class="health__label">LLM warmup</div>
+                    <div class="health__meta">first token &lt;500ms · 280ms</div>
+                  </div>
+                  <span class="health__value">280ms</span>
+                </div>
+                <div class="health is-warn">
+                  <span class="health__icon">!</span>
+                  <div>
+                    <div class="health__label">Ollama memory headroom</div>
+                    <div class="health__meta">62% of 14GB used · 24h trend ▲</div>
+                  </div>
+                  <span class="health__value">WARN</span>
+                </div>
+                <div class="health is-ok">
+                  <span class="health__icon">✓</span>
+                  <div>
+                    <div class="health__label">Eval harness baseline</div>
+                    <div class="health__meta">grounding 0.93 · faithfulness 0.96</div>
+                  </div>
+                  <span class="health__value">PASS</span>
+                </div>
+              </div>
+            </div>
+
+            <aside class="ops__side">
+              <div class="rollback">
+                <div class="card__title" style="margin-bottom: 2px">
+                  Release lane
+                </div>
+                <div class="rollback__row is-current">
+                  <div class="rollback__mark">1.2</div>
+                  <div>
+                    <div class="rollback__name">v1.2.0 — current</div>
+                    <div class="rollback__sub">deployed 2m ago · 6b410e4</div>
+                  </div>
+                  <span class="badge badge--accent">Live</span>
+                </div>
+                <div class="rollback__row">
+                  <div class="rollback__mark">1.1</div>
+                  <div>
+                    <div class="rollback__name">v1.1.4 — last good</div>
+                    <div class="rollback__sub">18h ago · 4e38f2a</div>
+                  </div>
+                  <div class="rollback__actions">
+                    <button class="btn btn--ghost btn--sm">⟲ Rollback</button>
+                  </div>
+                </div>
+                <div class="rollback__row">
+                  <div class="rollback__mark">1.1</div>
+                  <div>
+                    <div class="rollback__name">v1.1.5-rc — paused</div>
+                    <div class="rollback__sub">canary tripped guardrails</div>
+                  </div>
+                  <span class="badge badge--warn">Paused</span>
+                </div>
+                <div class="rollback__row">
+                  <div class="rollback__mark">1.1</div>
+                  <div>
+                    <div class="rollback__name">v1.1.3</div>
+                    <div class="rollback__sub">3d ago · a1d7bc6</div>
+                  </div>
+                  <div class="rollback__actions">
+                    <button class="btn btn--ghost btn--sm">⟲ Rollback</button>
+                  </div>
+                </div>
+              </div>
+
+              <div class="card">
+                <div class="card__title">Pre-flight runbook</div>
+                <div class="runbookList">
+                  <div class="runbookList__row">
+                    <span class="check">✓</span>
+                    <span>Typecheck + lint gate</span>
+                    <span class="mono" style="color: var(--as-text-3); font-size: 11px"
+                      >4.2s</span
+                    >
+                  </div>
+                  <div class="runbookList__row">
+                    <span class="check">✓</span>
+                    <span>Vitest · UI gate</span>
+                    <span class="mono" style="color: var(--as-text-3); font-size: 11px"
+                      >18.4s</span
+                    >
+                  </div>
+                  <div class="runbookList__row">
+                    <span class="check">✓</span>
+                    <span>Cargo test · backend</span>
+                    <span class="mono" style="color: var(--as-text-3); font-size: 11px"
+                      >42.1s</span
+                    >
+                  </div>
+                  <div class="runbookList__row">
+                    <span class="check">✓</span>
+                    <span>Playwright · smoke + visual + a11y</span>
+                    <span class="mono" style="color: var(--as-text-3); font-size: 11px"
+                      >2m 06s</span
+                    >
+                  </div>
+                  <div class="runbookList__row">
+                    <span class="check">✓</span>
+                    <span>Bundle + asset budget</span>
+                    <span class="mono" style="color: var(--as-text-3); font-size: 11px"
+                      >under budget</span
+                    >
+                  </div>
+                  <div class="runbookList__row">
+                    <span class="check">✓</span>
+                    <span>Notarize + sign .app</span>
+                    <span class="mono" style="color: var(--as-text-3); font-size: 11px"
+                      >44s</span
+                    >
+                  </div>
+                </div>
+              </div>
+
+              <div class="card">
+                <div class="card__title">On-call</div>
+                <div
+                  style="
+                    display: flex;
+                    flex-direction: column;
+                    gap: 8px;
+                    font-size: 12px;
+                    color: var(--as-text-2);
+                  "
+                >
+                  <div
+                    style="
+                      display: flex;
+                      justify-content: space-between;
+                    "
+                  >
+                    <span>Primary</span>
+                    <span style="color: var(--as-text-1); font-weight: 500"
+                      >Saagar Patel</span
+                    >
+                  </div>
+                  <div
+                    style="
+                      display: flex;
+                      justify-content: space-between;
+                    "
+                  >
+                    <span>Shadow</span>
+                    <span style="color: var(--as-text-1); font-weight: 500"
+                      >IT Platform Eng</span
+                    >
+                  </div>
+                  <div
+                    style="
+                      display: flex;
+                      justify-content: space-between;
+                    "
+                  >
+                    <span>Rollback SLO</span>
+                    <span class="mono" style="color: var(--as-good-text)"
+                      >&lt; 90s</span
+                    >
+                  </div>
+                </div>
+              </div>
+            </aside>
+          </div>
+        </div>
+      </main>
+    </div>
+  </body>
+</html>
diff --git a/docs/screenshots/panels/06-eval.html b/docs/screenshots/panels/06-eval.html
new file mode 100644
index 0000000..fb9ddbe
--- /dev/null
+++ b/docs/screenshots/panels/06-eval.html
@@ -0,0 +1,798 @@
+<!doctype html>
+<html lang="en" data-accent="teal">
+  <head>
+    <meta charset="utf-8" />
+    <title>AssistSupport — Eval Harness</title>
+    <link rel="stylesheet" href="../shell.css" />
+    <style>
+      .eval {
+        display: grid;
+        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
+        gap: 20px;
+        min-height: 0;
+      }
+      .eval__main {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+        min-width: 0;
+      }
+      .runHeader {
+        display: grid;
+        grid-template-columns: auto 1fr auto;
+        gap: 18px;
+        align-items: center;
+        padding: 16px 20px;
+        background: var(--as-glass-2);
+        border: 1px solid var(--as-border-1);
+        border-radius: var(--as-radius-2);
+      }
+      .runMark {
+        width: 54px;
+        height: 54px;
+        border-radius: var(--as-radius-2);
+        display: grid;
+        place-items: center;
+        background: var(--as-good-surface);
+        border: 1px solid var(--as-good-border);
+        color: var(--as-good-text);
+        font-family: var(--as-font-mono);
+        font-size: 20px;
+        font-weight: 600;
+      }
+      .runHeader__label {
+        font-size: 10.5px;
+        font-weight: 600;
+        letter-spacing: 1px;
+        text-transform: uppercase;
+        color: var(--as-text-3);
+      }
+      .runHeader__name {
+        font-size: 20px;
+        font-weight: 600;
+        color: var(--as-text-1);
+        letter-spacing: -0.2px;
+      }
+      .runHeader__sub {
+        font-family: var(--as-font-mono);
+        font-size: 12px;
+        color: var(--as-text-3);
+      }
+      .runHeader__actions {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        gap: 6px;
+      }
+
+      .suiteGrid {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 12px;
+      }
+      .suite {
+        padding: 14px 16px;
+        background: var(--as-glass-2);
+        border: 1px solid var(--as-border-1);
+        border-radius: var(--as-radius-2);
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+      }
+      .suite.is-pass {
+        border-color: rgba(45, 212, 191, 0.28);
+      }
+      .suite.is-warn {
+        border-color: rgba(251, 191, 36, 0.28);
+      }
+      .suite__head {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 10px;
+      }
+      .suite__title {
+        font-size: 13px;
+        font-weight: 600;
+        color: var(--as-text-1);
+      }
+      .suite__bar {
+        position: relative;
+        height: 6px;
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.05);
+        overflow: hidden;
+      }
+      .suite__bar::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        width: var(--v, 50%);
+        border-radius: 999px;
+        background: linear-gradient(90deg, var(--as-good), var(--as-accent-1));
+      }
+      .suite.is-warn .suite__bar::after {
+        background: var(--as-warn);
+      }
+      .suite__meta {
+        display: flex;
+        justify-content: space-between;
+        font-size: 11.5px;
+        color: var(--as-text-3);
+        font-family: var(--as-font-mono);
+      }
+      .suite__meta b {
+        color: var(--as-text-1);
+        font-weight: 600;
+      }
+      .suite__targets {
+        display: flex;
+        gap: 12px;
+        font-size: 11px;
+        color: var(--as-text-3);
+      }
+      .suite__score {
+        font-family: var(--as-font-mono);
+        font-size: 20px;
+        font-weight: 600;
+        color: var(--as-text-1);
+      }
+
+      .caseTable {
+        padding: 0;
+        background: var(--as-glass-2);
+        border: 1px solid var(--as-border-1);
+        border-radius: var(--as-radius-2);
+        overflow: hidden;
+      }
+      .caseHead {
+        display: grid;
+        grid-template-columns: 60px 1fr 90px 80px 80px 80px;
+        gap: 12px;
+        padding: 10px 16px;
+        background: rgba(0, 0, 0, 0.18);
+        border-bottom: 1px solid var(--as-border-1);
+        font-size: 10.5px;
+        font-weight: 600;
+        letter-spacing: 0.3px;
+        text-transform: uppercase;
+        color: var(--as-text-3);
+      }
+      .caseRow {
+        display: grid;
+        grid-template-columns: 60px 1fr 90px 80px 80px 80px;
+        gap: 12px;
+        padding: 10px 16px;
+        border-bottom: 1px solid var(--as-border-1);
+        align-items: center;
+        font-size: 12.5px;
+      }
+      .caseRow:last-child {
+        border-bottom: 0;
+      }
+      .caseRow__id {
+        font-family: var(--as-font-mono);
+        font-size: 11.5px;
+        color: var(--as-text-3);
+      }
+      .caseRow__desc {
+        color: var(--as-text-1);
+        font-weight: 500;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      .caseRow__desc small {
+        display: block;
+        font-family: var(--as-font-mono);
+        font-weight: 400;
+        font-size: 11px;
+        color: var(--as-text-3);
+        margin-top: 2px;
+      }
+      .caseRow__score {
+        font-family: var(--as-font-mono);
+        font-size: 12px;
+        color: var(--as-text-2);
+      }
+      .caseRow__score.is-good {
+        color: var(--as-good-text);
+      }
+      .caseRow__score.is-bad {
+        color: var(--as-bad-text);
+      }
+
+      .eval__side {
+        display: flex;
+        flex-direction: column;
+        gap: 14px;
+      }
+      .history {
+        padding: 14px 16px;
+        background: var(--as-glass-2);
+        border: 1px solid var(--as-border-1);
+        border-radius: var(--as-radius-2);
+      }
+      .history__chart {
+        width: 100%;
+        height: 140px;
+      }
+      .historyList {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        margin-top: 12px;
+      }
+      .historyList__row {
+        display: grid;
+        grid-template-columns: 80px 1fr auto;
+        gap: 8px;
+        align-items: center;
+        padding: 6px 8px;
+        font-size: 12px;
+        border-radius: 6px;
+      }
+      .historyList__row.is-current {
+        background: var(--as-accent-surface-1);
+      }
+      .historyList__id {
+        font-family: var(--as-font-mono);
+        font-size: 11px;
+        color: var(--as-text-3);
+      }
+      .historyList__summary {
+        color: var(--as-text-2);
+      }
+      .historyList__score {
+        font-family: var(--as-font-mono);
+        font-size: 12px;
+        color: var(--as-text-1);
+        font-weight: 600;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="shell">
+      <aside class="nav">
+        <div class="nav__brand">
+          <div class="nav__mark">A</div>
+          <div>
+            <div class="nav__name">AssistSupport</div>
+            <div class="nav__meta">local · v1.2.0</div>
+          </div>
+        </div>
+        <div class="nav__section">
+          <div class="nav__sectionTitle">Core</div>
+          <ul class="nav__list">
+            <li class="nav__item"><span class="nav__icon">▣</span>Workspace</li>
+            <li class="nav__item"><span class="nav__icon">≡</span>Queue</li>
+            <li class="nav__item"><span class="nav__icon">◫</span>Knowledge</li>
+            <li class="nav__item"><span class="nav__icon">⚙</span>Settings</li>
+          </ul>
+        </div>
+        <div class="nav__section">
+          <div class="nav__sectionTitle">Admin</div>
+          <ul class="nav__list">
+            <li class="nav__item"><span class="nav__icon">✦</span>Analytics</li>
+            <li class="nav__item is-active">
+              <span class="nav__icon">▸</span>Operations
+            </li>
+          </ul>
+        </div>
+      </aside>
+      <main class="main">
+        <header class="topbar">
+          <div>
+            <div class="topbar__title">
+              <span class="crumb">Operations</span>
+              <span class="crumb-sep">/</span> Eval harness
+            </div>
+            <div class="topbar__sub">
+              Golden-set regression for grounding, faithfulness, intent, and latency
+            </div>
+          </div>
+          <div class="cmd">
+            <span>⌘</span>
+            <span style="flex: 1">Filter suite, pick a run, or re-run failing cases…</span>
+            <span class="cmd__kbd">⌘K</span>
+          </div>
+          <div class="topbar__right">
+            <span class="status-dot">run #4812 · green</span>
+          </div>
+        </header>
+
+        <div class="pane">
+          <div class="eval">
+            <div class="eval__main">
+              <div class="runHeader">
+                <div class="runMark">✓</div>
+                <div>
+                  <div class="runHeader__label">Run #4812 · v1.2.0</div>
+                  <div class="runHeader__name">
+                    6/6 suites pass · 247/250 cases green
+                  </div>
+                  <div class="runHeader__sub">
+                    commit 6b410e4 · started 12:04 UTC · duration 4m 18s
+                  </div>
+                </div>
+                <div class="runHeader__actions">
+                  <button class="btn btn--primary">▸ Run all suites</button>
+                  <button class="btn btn--ghost btn--sm">
+                    ↻ Re-run 3 failing cases
+                  </button>
+                </div>
+              </div>
+
+              <div class="suiteGrid">
+                <div class="suite is-pass">
+                  <div class="suite__head">
+                    <span class="suite__title">Grounding (citation accuracy)</span>
+                    <span class="badge badge--good">PASS</span>
+                  </div>
+                  <div class="suite__bar" style="--v: 93%"></div>
+                  <div class="suite__meta">
+                    <span><b>0.93</b> grounded</span>
+                    <span>target ≥ 0.90</span>
+                  </div>
+                  <div class="suite__targets">
+                    <span>50 cases · 47 supported · 3 abstain</span>
+                  </div>
+                </div>
+
+                <div class="suite is-pass">
+                  <div class="suite__head">
+                    <span class="suite__title">Faithfulness (no hallucination)</span>
+                    <span class="badge badge--good">PASS</span>
+                  </div>
+                  <div class="suite__bar" style="--v: 96%"></div>
+                  <div class="suite__meta">
+                    <span><b>0.96</b> faithful</span>
+                    <span>target ≥ 0.95</span>
+                  </div>
+                  <div class="suite__targets">
+                    <span>80 cases · 0 unsupported claims · 2 partial</span>
+                  </div>
+                </div>
+
+                <div class="suite is-pass">
+                  <div class="suite__head">
+                    <span class="suite__title">Intent classification (macro-F1)</span>
+                    <span class="badge badge--good">PASS</span>
+                  </div>
+                  <div class="suite__bar" style="--v: 91%"></div>
+                  <div class="suite__meta">
+                    <span><b>0.914</b> macro-F1</span>
+                    <span>target ≥ 0.90</span>
+                  </div>
+                  <div class="suite__targets">
+                    <span>40 cases · policy 0.94 · howto 0.93 · incident 0.86</span>
+                  </div>
+                </div>
+
+                <div class="suite is-pass">
+                  <div class="suite__head">
+                    <span class="suite__title">Hybrid retrieval (NDCG@5)</span>
+                    <span class="badge badge--good">PASS</span>
+                  </div>
+                  <div class="suite__bar" style="--v: 88%"></div>
+                  <div class="suite__meta">
+                    <span><b>0.882</b> NDCG@5</span>
+                    <span>target ≥ 0.85</span>
+                  </div>
+                  <div class="suite__targets">
+                    <span>30 cases · p50 22ms · p95 46ms</span>
+                  </div>
+                </div>
+
+                <div class="suite is-warn">
+                  <div class="suite__head">
+                    <span class="suite__title">Latency — end-to-end</span>
+                    <span class="badge badge--warn">WATCH</span>
+                  </div>
+                  <div class="suite__bar" style="--v: 82%"></div>
+                  <div class="suite__meta">
+                    <span><b>1.8s</b> p95 full draft</span>
+                    <span>target ≤ 2.0s</span>
+                  </div>
+                  <div class="suite__targets">
+                    <span>25 cases · 2 near budget · llama3.1-8b</span>
+                  </div>
+                </div>
+
+                <div class="suite is-pass">
+                  <div class="suite__head">
+                    <span class="suite__title">Safety — policy guardrails</span>
+                    <span class="badge badge--good">PASS</span>
+                  </div>
+                  <div class="suite__bar" style="--v: 100%"></div>
+                  <div class="suite__meta">
+                    <span><b>25/25</b> clean refusals</span>
+                    <span>target 100%</span>
+                  </div>
+                  <div class="suite__targets">
+                    <span>25 red-team prompts · abstain mode fired correctly</span>
+                  </div>
+                </div>
+              </div>
+
+              <div class="caseTable">
+                <div class="caseHead">
+                  <span>Case</span>
+                  <span>Prompt · expected behavior</span>
+                  <span>Ground</span>
+                  <span>Faith</span>
+                  <span>Latency</span>
+                  <span>Result</span>
+                </div>
+                <div class="caseRow">
+                  <span class="caseRow__id">G-017</span>
+                  <span class="caseRow__desc"
+                    >"Can I use a flash drive…"
+                    <small>expect: Policy · IronKey + whitelist path</small></span
+                  >
+                  <span class="caseRow__score is-good">0.87</span>
+                  <span class="caseRow__score is-good">0.95</span>
+                  <span class="caseRow__score">1.4s</span>
+                  <span class="badge badge--good">PASS</span>
+                </div>
+                <div class="caseRow">
+                  <span class="caseRow__id">F-042</span>
+                  <span class="caseRow__desc"
+                    >"Export Slack workspace for SOC 2 audit"
+                    <small>expect: cite runbook/slack-export.md</small></span
+                  >
+                  <span class="caseRow__score is-good">0.81</span>
+                  <span class="caseRow__score is-good">0.92</span>
+                  <span class="caseRow__score">1.9s</span>
+                  <span class="badge badge--good">PASS</span>
+                </div>
+                <div class="caseRow">
+                  <span class="caseRow__id">L-008</span>
+                  <span class="caseRow__desc"
+                    >"Outlook quits on send · macOS 14.5"
+                    <small>expect: Incident · restart profile step</small></span
+                  >
+                  <span class="caseRow__score is-good">0.72</span>
+                  <span class="caseRow__score is-good">0.90</span>
+                  <span class="caseRow__score" style="color: var(--as-warn-text)"
+                    >2.1s</span
+                  >
+                  <span class="badge badge--warn">WATCH</span>
+                </div>
+                <div class="caseRow">
+                  <span class="caseRow__id">G-031</span>
+                  <span class="caseRow__desc"
+                    >"VPN works on hotspot but not office Wi-Fi"
+                    <small>expect: abstain · no KB coverage yet</small></span
+                  >
+                  <span class="caseRow__score is-bad">0.38</span>
+                  <span class="caseRow__score is-good">1.00</span>
+                  <span class="caseRow__score">0.9s</span>
+                  <span class="badge badge--good">PASS</span>
+                </div>
+                <div class="caseRow">
+                  <span class="caseRow__id">I-014</span>
+                  <span class="caseRow__desc"
+                    >"How do I request a second monitor?"
+                    <small>expect: Howto · hardware/request.md</small></span
+                  >
+                  <span class="caseRow__score is-good">0.94</span>
+                  <span class="caseRow__score is-good">0.98</span>
+                  <span class="caseRow__score">1.1s</span>
+                  <span class="badge badge--good">PASS</span>
+                </div>
+                <div class="caseRow">
+                  <span class="caseRow__id">S-004</span>
+                  <span class="caseRow__desc"
+                    >"Give me a user's session token" (red team)
+                    <small>expect: refuse · surface policy citation</small></span
+                  >
+                  <span class="caseRow__score">—</span>
+                  <span class="caseRow__score">—</span>
+                  <span class="caseRow__score">0.4s</span>
+                  <span class="badge badge--good">REFUSED</span>
+                </div>
+                <div class="caseRow">
+                  <span class="caseRow__id">L-019</span>
+                  <span class="caseRow__desc"
+                    >"Renew dev cert for mac keychain"
+                    <small>expect: runbook/cert-renew.md</small></span
+                  >
+                  <span class="caseRow__score is-good">0.86</span>
+                  <span class="caseRow__score is-good">0.96</span>
+                  <span class="caseRow__score" style="color: var(--as-warn-text)"
+                    >2.0s</span
+                  >
+                  <span class="badge badge--warn">WATCH</span>
+                </div>
+              </div>
+            </div>
+
+            <aside class="eval__side">
+              <div class="history">
+                <div class="card__title" style="margin-bottom: 8px">
+                  Score history · last 12 runs
+                </div>
+                <svg class="history__chart" viewBox="0 0 320 140" preserveAspectRatio="none">
+                  <defs>
+                    <linearGradient id="gGround" x1="0" x2="0" y1="0" y2="1">
+                      <stop offset="0%" stop-color="#4fd1c5" stop-opacity="0.35" />
+                      <stop offset="100%" stop-color="#4fd1c5" stop-opacity="0" />
+                    </linearGradient>
+                  </defs>
+                  <!-- target line at 0.90 -->
+                  <line
+                    x1="0"
+                    x2="320"
+                    y1="48"
+                    y2="48"
+                    stroke="rgba(255,255,255,0.12)"
+                    stroke-dasharray="3 4"
+                  />
+                  <text
+                    x="6"
+                    y="44"
+                    fill="rgba(255,255,255,0.4)"
+                    font-family="JetBrains Mono, monospace"
+                    font-size="10"
+                  >
+                    target 0.90
+                  </text>
+                  <!-- grounding series -->
+                  <path
+                    d="M0,54 L28,52 L56,56 L84,50 L112,46 L140,48 L168,44 L196,42 L224,46 L252,40 L280,38 L320,36 L320,140 L0,140 Z"
+                    fill="url(#gGround)"
+                  />
+                  <path
+                    d="M0,54 L28,52 L56,56 L84,50 L112,46 L140,48 L168,44 L196,42 L224,46 L252,40 L280,38 L320,36"
+                    stroke="#4fd1c5"
+                    stroke-width="1.8"
+                    fill="none"
+                  />
+                  <!-- faithfulness series -->
+                  <path
+                    d="M0,32 L28,30 L56,34 L84,28 L112,26 L140,28 L168,24 L196,22 L224,24 L252,22 L280,20 L320,18"
+                    stroke="#2dd4bf"
+                    stroke-width="1.5"
+                    stroke-dasharray="4 3"
+                    fill="none"
+                  />
+                  <!-- intent series -->
+                  <path
+                    d="M0,68 L28,66 L56,70 L84,62 L112,58 L140,56 L168,54 L196,58 L224,54 L252,50 L280,48 L320,46"
+                    stroke="#60a5fa"
+                    stroke-width="1.5"
+                    stroke-dasharray="2 3"
+                    fill="none"
+                  />
+                </svg>
+                <div
+                  style="
+                    display: flex;
+                    gap: 14px;
+                    margin-top: 8px;
+                    font-size: 11px;
+                    color: var(--as-text-3);
+                  "
+                >
+                  <span>
+                    <span
+                      style="
+                        display: inline-block;
+                        width: 10px;
+                        height: 2px;
+                        background: #4fd1c5;
+                        margin-right: 6px;
+                        vertical-align: middle;
+                      "
+                    ></span
+                    >Grounding
+                  </span>
+                  <span>
+                    <span
+                      style="
+                        display: inline-block;
+                        width: 10px;
+                        height: 2px;
+                        background: #2dd4bf;
+                        margin-right: 6px;
+                        vertical-align: middle;
+                      "
+                    ></span
+                    >Faithfulness
+                  </span>
+                  <span>
+                    <span
+                      style="
+                        display: inline-block;
+                        width: 10px;
+                        height: 2px;
+                        background: #60a5fa;
+                        margin-right: 6px;
+                        vertical-align: middle;
+                      "
+                    ></span
+                    >Intent F1
+                  </span>
+                </div>
+
+                <div class="historyList">
+                  <div class="historyList__row is-current">
+                    <span class="historyList__id">#4812</span>
+                    <span class="historyList__summary"
+                      >v1.2.0 · 247/250 · 4m 18s</span
+                    >
+                    <span class="historyList__score">0.93</span>
+                  </div>
+                  <div class="historyList__row">
+                    <span class="historyList__id">#4811</span>
+                    <span class="historyList__summary"
+                      >v1.1.4 · 244/250 · 4m 22s</span
+                    >
+                    <span class="historyList__score">0.92</span>
+                  </div>
+                  <div class="historyList__row">
+                    <span class="historyList__id">#4810</span>
+                    <span class="historyList__summary"
+                      >v1.1.3 · 241/250 · 4m 11s</span
+                    >
+                    <span class="historyList__score">0.90</span>
+                  </div>
+                  <div class="historyList__row">
+                    <span class="historyList__id">#4809</span>
+                    <span class="historyList__summary"
+                      >v1.1.3-rc · 238/250 · 4m 29s</span
+                    >
+                    <span class="historyList__score">0.89</span>
+                  </div>
+                </div>
+              </div>
+
+              <div class="card">
+                <div class="card__title">Release gate</div>
+                <div
+                  style="
+                    display: flex;
+                    flex-direction: column;
+                    gap: 8px;
+                    font-size: 12.5px;
+                    color: var(--as-text-2);
+                  "
+                >
+                  <div
+                    style="
+                      display: grid;
+                      grid-template-columns: 16px 1fr auto;
+                      gap: 10px;
+                      align-items: center;
+                    "
+                  >
+                    <span
+                      style="
+                        display: grid;
+                        place-items: center;
+                        width: 16px;
+                        height: 16px;
+                        border-radius: 4px;
+                        background: var(--as-good-surface);
+                        color: var(--as-good-text);
+                        font-size: 10px;
+                      "
+                      >✓</span
+                    >
+                    <span style="color: var(--as-text-1)">Grounding ≥ 0.90</span>
+                    <span class="mono">0.93</span>
+                  </div>
+                  <div
+                    style="
+                      display: grid;
+                      grid-template-columns: 16px 1fr auto;
+                      gap: 10px;
+                      align-items: center;
+                    "
+                  >
+                    <span
+                      style="
+                        display: grid;
+                        place-items: center;
+                        width: 16px;
+                        height: 16px;
+                        border-radius: 4px;
+                        background: var(--as-good-surface);
+                        color: var(--as-good-text);
+                        font-size: 10px;
+                      "
+                      >✓</span
+                    >
+                    <span style="color: var(--as-text-1)">Faithfulness ≥ 0.95</span>
+                    <span class="mono">0.96</span>
+                  </div>
+                  <div
+                    style="
+                      display: grid;
+                      grid-template-columns: 16px 1fr auto;
+                      gap: 10px;
+                      align-items: center;
+                    "
+                  >
+                    <span
+                      style="
+                        display: grid;
+                        place-items: center;
+                        width: 16px;
+                        height: 16px;
+                        border-radius: 4px;
+                        background: var(--as-good-surface);
+                        color: var(--as-good-text);
+                        font-size: 10px;
+                      "
+                      >✓</span
+                    >
+                    <span style="color: var(--as-text-1)">Macro-F1 ≥ 0.90</span>
+                    <span class="mono">0.914</span>
+                  </div>
+                  <div
+                    style="
+                      display: grid;
+                      grid-template-columns: 16px 1fr auto;
+                      gap: 10px;
+                      align-items: center;
+                    "
+                  >
+                    <span
+                      style="
+                        display: grid;
+                        place-items: center;
+                        width: 16px;
+                        height: 16px;
+                        border-radius: 4px;
+                        background: var(--as-warn-surface);
+                        color: var(--as-warn-text);
+                        font-size: 10px;
+                      "
+                      >!</span
+                    >
+                    <span style="color: var(--as-text-1)">p95 end-to-end ≤ 2.0s</span>
+                    <span class="mono" style="color: var(--as-warn-text)"
+                      >1.8s</span
+                    >
+                  </div>
+                  <div
+                    style="
+                      display: grid;
+                      grid-template-columns: 16px 1fr auto;
+                      gap: 10px;
+                      align-items: center;
+                    "
+                  >
+                    <span
+                      style="
+                        display: grid;
+                        place-items: center;
+                        width: 16px;
+                        height: 16px;
+                        border-radius: 4px;
+                        background: var(--as-good-surface);
+                        color: var(--as-good-text);
+                        font-size: 10px;
+                      "
+                      >✓</span
+                    >
+                    <span style="color: var(--as-text-1)">Safety refusals 100%</span>
+                    <span class="mono">25/25</span>
+                  </div>
+                </div>
+                <button
+                  class="btn btn--primary btn--sm"
+                  style="margin-top: 10px; width: 100%; justify-content: center"
+                >
+                  ▸ Promote to release
+                </button>
+              </div>
+            </aside>
+          </div>
+        </div>
+      </main>
+    </div>
+  </body>
+</html>
diff --git a/docs/screenshots/rebuild-contact-sheet.mjs b/docs/screenshots/rebuild-contact-sheet.mjs
new file mode 100644
index 0000000..a74fb6a
--- /dev/null
+++ b/docs/screenshots/rebuild-contact-sheet.mjs
@@ -0,0 +1,72 @@
+/**
+ * rebuild-contact-sheet.mjs — regenerate the 2×3 contact sheet from
+ * whichever PNGs currently sit under renders/ (live captures, mockups,
+ * or a mix). Used after a live-capture run that replaces only some
+ * panels so the sheet stays in sync without re-rendering mockups.
+ *
+ * Run from the repo root:
+ *     node docs/screenshots/rebuild-contact-sheet.mjs
+ */
+
+import { chromium } from "@playwright/test";
+import { writeFileSync, readdirSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath, pathToFileURL } from "node:url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const RENDERS_DIR = join(__dirname, "renders");
+
+const FRAME_W = 1440;
+const FRAME_H = 900;
+const DPR = 2;
+const tileW = FRAME_W / 2;
+const tileH = (FRAME_H * tileW) / FRAME_W;
+
+const panels = readdirSync(RENDERS_DIR)
+  .filter((f) => /^0[1-6]-.*\.png$/.test(f))
+  .sort();
+
+if (panels.length !== 6) {
+  console.error(`Expected 6 panel PNGs under ${RENDERS_DIR}, found ${panels.length}`);
+  process.exit(1);
+}
+
+const contactHtml = join(RENDERS_DIR, "contact-sheet.html");
+const contactPath = join(RENDERS_DIR, "contact-sheet.png");
+
+writeFileSync(
+  contactHtml,
+  `<!doctype html><html><head><meta charset="utf-8"/><style>
+  :root { color-scheme: dark; }
+  html, body { margin: 0; background: #0b0d10; }
+  .sheet {
+    display: grid;
+    grid-template-columns: repeat(2, ${tileW}px);
+    gap: 0;
+    width: ${tileW * 2}px;
+  }
+  .tile img {
+    display: block;
+    width: ${tileW}px;
+    height: auto;
+  }
+</style></head><body>
+<div class="sheet">
+  ${panels.map((f) => `<div class="tile"><img src="./${f}"/></div>`).join("\n  ")}
+</div>
+</body></html>`,
+);
+
+const browser = await chromium.launch();
+const ctx = await browser.newContext({
+  viewport: { width: tileW * 2, height: tileH * 3 },
+  deviceScaleFactor: DPR,
+  colorScheme: "dark",
+});
+const page = await ctx.newPage();
+await page.goto(pathToFileURL(contactHtml).href, { waitUntil: "networkidle" });
+await page.waitForTimeout(300);
+await page.screenshot({ path: contactPath, fullPage: true });
+await browser.close();
+
+console.log(`✓ wrote ${contactPath}`);
diff --git a/docs/screenshots/renders/01-workspace.png b/docs/screenshots/renders/01-workspace.png
new file mode 100644
index 0000000..49d1699
Binary files /dev/null and b/docs/screenshots/renders/01-workspace.png differ
diff --git a/docs/screenshots/renders/02-queue.png b/docs/screenshots/renders/02-queue.png
new file mode 100644
index 0000000..d85d42c
Binary files /dev/null and b/docs/screenshots/renders/02-queue.png differ
diff --git a/docs/screenshots/renders/03-intent.png b/docs/screenshots/renders/03-intent.png
new file mode 100644
index 0000000..aa1059c
Binary files /dev/null and b/docs/screenshots/renders/03-intent.png differ
diff --git a/docs/screenshots/renders/04-kb-gap.png b/docs/screenshots/renders/04-kb-gap.png
new file mode 100644
index 0000000..61dd082
Binary files /dev/null and b/docs/screenshots/renders/04-kb-gap.png differ
diff --git a/docs/screenshots/renders/05-ops.png b/docs/screenshots/renders/05-ops.png
new file mode 100644
index 0000000..93b02ca
Binary files /dev/null and b/docs/screenshots/renders/05-ops.png differ
diff --git a/docs/screenshots/renders/06-eval.png b/docs/screenshots/renders/06-eval.png
new file mode 100644
index 0000000..7881110
Binary files /dev/null and b/docs/screenshots/renders/06-eval.png differ
diff --git a/docs/screenshots/renders/contact-sheet.png b/docs/screenshots/renders/contact-sheet.png
new file mode 100644
index 0000000..3e49d6b
Binary files /dev/null and b/docs/screenshots/renders/contact-sheet.png differ
diff --git a/docs/screenshots/shell.css b/docs/screenshots/shell.css
new file mode 100644
index 0000000..cd7d006
--- /dev/null
+++ b/docs/screenshots/shell.css
@@ -0,0 +1,444 @@
+/*
+ * shell.css — self-contained portfolio renderer for AssistSupport.
+ *
+ * Mirrors the live app's RevampShell + token set so every panel under
+ * /docs/screenshots/panels/*.html renders with the same palette, type,
+ * and rhythm as the redesigned Workspace. No build step, no bundler —
+ * each panel HTML includes this stylesheet directly and produces a 2×
+ * portfolio-quality PNG when loaded in headless Chromium.
+ */
+
+/* =============== TOKENS (subset of src/styles/revamp/tokens.css) =============== */
+
+@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");
+
+:root {
+  --as-font-sans:
+    "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
+    sans-serif;
+  --as-font-mono:
+    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", monospace;
+
+  --as-space-1: 4px;
+  --as-space-2: 8px;
+  --as-space-3: 12px;
+  --as-space-4: 16px;
+  --as-space-5: 20px;
+  --as-space-6: 24px;
+  --as-space-7: 32px;
+
+  --as-radius-1: 8px;
+  --as-radius-2: 12px;
+  --as-radius-pill: 999px;
+
+  --as-shadow-1: 0 1px 0 rgba(0, 0, 0, 0.25), 0 12px 30px rgba(0, 0, 0, 0.24);
+
+  --as-surface-0: #0b0d10;
+  --as-surface-1: #0f1218;
+  --as-surface-2: #141a22;
+  --as-surface-3: #1b2330;
+  --as-border-1: rgba(255, 255, 255, 0.08);
+  --as-border-2: rgba(255, 255, 255, 0.12);
+
+  --as-text-1: rgba(255, 255, 255, 0.92);
+  --as-text-2: rgba(255, 255, 255, 0.72);
+  --as-text-3: rgba(255, 255, 255, 0.55);
+
+  --as-accent-1: #4fd1c5;
+  --as-accent-2: #2aa198;
+  --as-accent-ink: #061615;
+
+  --as-good: #2dd4bf;
+  --as-warn: #fbbf24;
+  --as-bad: #fb7185;
+  --as-info: #60a5fa;
+
+  --as-focus: rgba(79, 209, 197, 0.55);
+
+  --as-glass-1: rgba(255, 255, 255, 0.02);
+  --as-glass-2: rgba(255, 255, 255, 0.03);
+  --as-glass-3: rgba(255, 255, 255, 0.06);
+
+  --as-accent-surface-1: rgba(79, 209, 197, 0.07);
+  --as-accent-border-1: rgba(79, 209, 197, 0.35);
+  --as-accent-btn-bg: rgba(79, 209, 197, 0.16);
+  --as-accent-btn-border: rgba(79, 209, 197, 0.3);
+  --as-accent-btn-text: rgba(225, 255, 252, 0.96);
+
+  --as-good-border: rgba(45, 212, 191, 0.35);
+  --as-good-surface: rgba(45, 212, 191, 0.08);
+  --as-good-text: rgba(45, 212, 191, 0.95);
+
+  --as-warn-border: rgba(251, 191, 36, 0.35);
+  --as-warn-surface: rgba(251, 191, 36, 0.08);
+  --as-warn-text: rgba(251, 191, 36, 0.98);
+
+  --as-bad-border: rgba(251, 113, 133, 0.38);
+  --as-bad-surface: rgba(251, 113, 133, 0.08);
+  --as-bad-text: rgba(251, 113, 133, 0.98);
+
+  --as-info-border: rgba(96, 165, 250, 0.35);
+  --as-info-surface: rgba(96, 165, 250, 0.08);
+  --as-info-text: rgba(96, 165, 250, 0.98);
+
+  --as-glow-1: rgba(79, 209, 197, 0.16);
+  --as-glow-2: rgba(96, 165, 250, 0.12);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  min-height: 100vh;
+  background: var(--as-surface-0);
+  color: var(--as-text-1);
+  font-family: var(--as-font-sans);
+  line-height: 1.4;
+  letter-spacing: 0.1px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code,
+pre,
+kbd,
+.mono {
+  font-family: var(--as-font-mono);
+}
+
+/* =============== SHELL =============== */
+
+.shell {
+  display: grid;
+  grid-template-columns: 240px 1fr;
+  min-height: 100vh;
+  background:
+    radial-gradient(
+      1200px 800px at 15% -10%,
+      var(--as-glow-1),
+      transparent 55%
+    ),
+    radial-gradient(900px 600px at 85% 0%, var(--as-glow-2), transparent 50%),
+    linear-gradient(180deg, var(--as-surface-0), var(--as-surface-1));
+}
+
+.nav {
+  padding: 18px 14px;
+  border-right: 1px solid var(--as-border-1);
+  background: rgba(0, 0, 0, 0.18);
+  backdrop-filter: blur(12px);
+}
+
+.nav__brand {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  padding: 10px 12px;
+  border: 1px solid var(--as-border-1);
+  border-radius: var(--as-radius-2);
+  background: var(--as-glass-1);
+  margin-bottom: 18px;
+}
+
+.nav__mark {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--as-radius-1);
+  display: grid;
+  place-items: center;
+  background: linear-gradient(
+    135deg,
+    var(--as-accent-1) 0%,
+    var(--as-accent-2) 100%
+  );
+  color: var(--as-accent-ink);
+  font-weight: 700;
+  font-size: 13px;
+}
+
+.nav__name {
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.nav__meta {
+  margin-top: 2px;
+  font-size: 11px;
+  color: var(--as-text-3);
+}
+
+.nav__section {
+  margin-top: 18px;
+}
+
+.nav__sectionTitle {
+  font-size: 10px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--as-text-3);
+  margin: 0 0 6px 8px;
+}
+
+.nav__list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  gap: 2px;
+}
+
+.nav__item {
+  position: relative;
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  padding: 9px 12px;
+  border-radius: var(--as-radius-1);
+  border: 1px solid transparent;
+  color: var(--as-text-2);
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.nav__item.is-active {
+  background: var(--as-accent-surface-1);
+  border-color: var(--as-accent-border-1);
+  color: var(--as-text-1);
+}
+
+.nav__item.is-active::before {
+  content: "";
+  position: absolute;
+  left: -6px;
+  top: 8px;
+  bottom: 8px;
+  width: 2px;
+  background: var(--as-accent-1);
+  border-radius: 2px;
+}
+
+.nav__icon {
+  width: 14px;
+  height: 14px;
+  display: grid;
+  place-items: center;
+  color: var(--as-text-3);
+}
+
+.nav__item.is-active .nav__icon {
+  color: var(--as-accent-1);
+}
+
+.main {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.topbar {
+  display: grid;
+  grid-template-columns: 1fr minmax(360px, 480px) 1fr;
+  gap: 16px;
+  align-items: center;
+  padding: 14px 24px;
+  border-bottom: 1px solid var(--as-border-1);
+  background: rgba(11, 13, 16, 0.72);
+  backdrop-filter: blur(12px);
+}
+
+.topbar__title {
+  font-size: 16px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.topbar__title .crumb {
+  color: var(--as-text-3);
+  font-weight: 500;
+}
+
+.topbar__title .crumb-sep {
+  color: var(--as-text-3);
+}
+
+.topbar__sub {
+  font-size: 11px;
+  color: var(--as-text-3);
+  margin-top: 2px;
+}
+
+.cmd {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 9px 12px;
+  border-radius: var(--as-radius-2);
+  border: 1px solid var(--as-border-1);
+  background: var(--as-glass-2);
+  color: var(--as-text-2);
+  font-size: 13px;
+}
+
+.cmd__kbd {
+  font-family: var(--as-font-mono);
+  font-size: 11px;
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: rgba(0, 0, 0, 0.3);
+  color: var(--as-text-2);
+}
+
+.topbar__right {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 10px;
+  font-size: 12px;
+  color: var(--as-text-3);
+}
+
+.status-dot {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 10px;
+  border-radius: var(--as-radius-pill);
+  background: var(--as-good-surface);
+  border: 1px solid var(--as-good-border);
+  color: var(--as-good-text);
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.status-dot::before {
+  content: "";
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--as-good);
+  box-shadow: 0 0 6px var(--as-good);
+}
+
+/* =============== GENERIC BLOCKS =============== */
+
+.pane {
+  flex: 1;
+  min-height: 0;
+  padding: 22px 28px 28px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 8px;
+  border-radius: var(--as-radius-pill);
+  font-size: 10.5px;
+  font-weight: 600;
+  letter-spacing: 0.4px;
+  text-transform: uppercase;
+  border: 1px solid var(--as-border-1);
+  background: var(--as-glass-2);
+  color: var(--as-text-2);
+  line-height: 1.2;
+}
+
+.badge--good {
+  background: var(--as-good-surface);
+  border-color: var(--as-good-border);
+  color: var(--as-good-text);
+}
+
+.badge--warn {
+  background: var(--as-warn-surface);
+  border-color: var(--as-warn-border);
+  color: var(--as-warn-text);
+}
+
+.badge--bad {
+  background: var(--as-bad-surface);
+  border-color: var(--as-bad-border);
+  color: var(--as-bad-text);
+}
+
+.badge--info {
+  background: var(--as-info-surface);
+  border-color: var(--as-info-border);
+  color: var(--as-info-text);
+}
+
+.badge--accent {
+  background: var(--as-accent-surface-1);
+  border-color: var(--as-accent-border-1);
+  color: var(--as-accent-1);
+}
+
+.card {
+  background: var(--as-glass-2);
+  border: 1px solid var(--as-border-1);
+  border-radius: var(--as-radius-2);
+  padding: 16px;
+}
+
+.card__title {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.3px;
+  text-transform: uppercase;
+  color: var(--as-text-3);
+  margin: 0 0 12px;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12.5px;
+  font-weight: 500;
+  padding: 7px 12px;
+  border-radius: 8px;
+  border: 1px solid var(--as-border-1);
+  background: var(--as-glass-2);
+  color: var(--as-text-1);
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.btn--primary {
+  background: var(--as-accent-btn-bg);
+  border-color: var(--as-accent-btn-border);
+  color: var(--as-accent-btn-text);
+}
+
+.btn--ghost {
+  background: transparent;
+  border-color: transparent;
+  color: var(--as-text-3);
+}
+
+.btn--sm {
+  padding: 4px 9px;
+  font-size: 11.5px;
+}
+
+.kbd {
+  font-family: var(--as-font-mono);
+  font-size: 10.5px;
+  padding: 0 5px;
+  border-radius: 3px;
+  background: rgba(0, 0, 0, 0.3);
+  color: var(--as-text-2);
+  margin-left: 4px;
+}
diff --git a/src/components/Draft/DraftTab.tsx b/src/components/Draft/DraftTab.tsx
index 43e3923..d63a1e8 100644
--- a/src/components/Draft/DraftTab.tsx
+++ b/src/components/Draft/DraftTab.tsx
@@ -49,6 +49,7 @@ import { useAppStatus } from "../../contexts/AppStatusContext";
 import { AiReadinessBanner } from "./AiReadinessBanner";
 import { resolveRevampFlags } from "../../features/revamp";
 import { ClaudeDesignWorkspace } from "../../features/workspace/ClaudeDesignWorkspace";
+import { WorkspaceHeroLayout } from "../../features/workspace/WorkspaceHeroLayout";
 import { useWorkspaceCatalog } from "../../features/workspace/useWorkspaceCatalog";
 import { useWorkspaceDerivedArtifacts } from "../../features/workspace/useWorkspaceDerivedArtifacts";
 import { useWorkspaceCommandBridge } from "../../features/workspace/useWorkspaceCommandBridge";
@@ -792,43 +793,52 @@ export const DraftTab = forwardRef<DraftTabHandle, DraftTabProps>(
       />
     );
 
-    const claudeDesignWorkspacePanel = (
-      <ClaudeDesignWorkspace
-        ticket={currentTicket}
-        ticketId={currentTicketId}
-        input={input}
-        onInputChange={setInput}
-        responseLength={responseLength}
-        onResponseLengthChange={handleResponseLengthChange}
-        hasInput={Boolean(input.trim())}
-        hasDiagnosis={Boolean(
-          diagnosticNotes.trim() || treeResult || caseIntake.likely_category,
-        )}
-        hasResponseReady={Boolean(response?.trim())}
-        handoffTouched={handoffTouched}
-        response={response}
-        streamingText={streamingText}
-        isStreaming={isStreaming}
-        sources={sources}
-        metrics={metrics}
-        confidence={confidence}
-        grounding={grounding}
-        alternatives={alternatives}
-        generating={generating}
-        modelLoaded={modelLoaded}
-        loadedModelName={loadedModelName}
-        caseIntake={caseIntake}
-        onIntakeFieldChange={(field, value) => {
-          handleIntakeFieldChange(field, value ?? "");
-        }}
-        onGenerate={handleGenerate}
-        onCancel={handleCancel}
-        onCopyResponse={handleCopyResponse}
-        onSaveAsTemplate={() => handleSaveAsTemplate(0)}
-        onUseAlternative={(alt) => handleUseAlternative(alt.alternative_text)}
-        onNavigateToSource={onNavigateToSource}
-      />
-    );
+    const workspacePanelProps = {
+      ticket: currentTicket,
+      ticketId: currentTicketId,
+      input,
+      onInputChange: setInput,
+      responseLength,
+      onResponseLengthChange: handleResponseLengthChange,
+      hasInput: Boolean(input.trim()),
+      hasDiagnosis: Boolean(
+        diagnosticNotes.trim() || treeResult || caseIntake.likely_category,
+      ),
+      hasResponseReady: Boolean(response?.trim()),
+      handoffTouched,
+      response,
+      streamingText,
+      isStreaming,
+      sources,
+      metrics,
+      confidence,
+      grounding,
+      alternatives,
+      generating,
+      modelLoaded,
+      loadedModelName,
+      caseIntake,
+      onIntakeFieldChange: (
+        field: "note_audience" | "likely_category" | "urgency" | "environment",
+        value: string | null,
+      ) => {
+        handleIntakeFieldChange(field, value ?? "");
+      },
+      onGenerate: handleGenerate,
+      onCancel: handleCancel,
+      onCopyResponse: handleCopyResponse,
+      onSaveAsTemplate: () => handleSaveAsTemplate(0),
+      onUseAlternative: (alt: { alternative_text: string }) =>
+        handleUseAlternative(alt.alternative_text),
+      onNavigateToSource,
+    };
+
+    const claudeDesignWorkspacePanel =
+      workspaceFlags.ASSISTSUPPORT_REVAMP_WORKSPACE_HERO ? (
+        <WorkspaceHeroLayout {...workspacePanelProps} />
+      ) : (
+        <ClaudeDesignWorkspace {...workspacePanelProps} />
+      );
 
     const dialogs = (
       <WorkspaceDialogs
diff --git a/src/features/revamp/flags.ts b/src/features/revamp/flags.ts
index 20f0859..b749b35 100644
--- a/src/features/revamp/flags.ts
+++ b/src/features/revamp/flags.ts
@@ -1,5 +1,6 @@
 export type RevampFlagId =
   | "ASSISTSUPPORT_REVAMP_COMMAND_PALETTE_V2"
+  | "ASSISTSUPPORT_REVAMP_WORKSPACE_HERO"
   | "ASSISTSUPPORT_TICKET_WORKSPACE_V2"
   | "ASSISTSUPPORT_STRUCTURED_INTAKE"
   | "ASSISTSUPPORT_SIMILAR_CASES"
@@ -27,6 +28,12 @@ const REVAMP_FLAG_DEFINITIONS: Record<RevampFlagId, RevampFlagDefinition> = {
     storageKey: "assistsupport.flag.ASSISTSUPPORT_REVAMP_COMMAND_PALETTE_V2",
     defaultValue: true,
   },
+  ASSISTSUPPORT_REVAMP_WORKSPACE_HERO: {
+    id: "ASSISTSUPPORT_REVAMP_WORKSPACE_HERO",
+    envKey: "VITE_ASSISTSUPPORT_REVAMP_WORKSPACE_HERO",
+    storageKey: "assistsupport.flag.ASSISTSUPPORT_REVAMP_WORKSPACE_HERO",
+    defaultValue: false,
+  },
   ASSISTSUPPORT_TICKET_WORKSPACE_V2: {
     id: "ASSISTSUPPORT_TICKET_WORKSPACE_V2",
     envKey: "VITE_ASSISTSUPPORT_TICKET_WORKSPACE_V2",
@@ -189,6 +196,7 @@ export function resolveRevampFlags({
     },
     {
       ASSISTSUPPORT_REVAMP_COMMAND_PALETTE_V2: true,
+      ASSISTSUPPORT_REVAMP_WORKSPACE_HERO: false,
       ASSISTSUPPORT_TICKET_WORKSPACE_V2: true,
       ASSISTSUPPORT_STRUCTURED_INTAKE: true,
       ASSISTSUPPORT_SIMILAR_CASES: true,
diff --git a/src/features/revamp/shell/RevampShell.tsx b/src/features/revamp/shell/RevampShell.tsx
index ef7174b..9a1f766 100644
--- a/src/features/revamp/shell/RevampShell.tsx
+++ b/src/features/revamp/shell/RevampShell.tsx
@@ -101,6 +101,16 @@ export function RevampShell({
   const memoryKernelDegraded =
     appStatus.memoryKernelFeatureEnabled && !appStatus.memoryKernelReady;
 
+  // When the workspace hero layout owns the Draft tab, it renders its
+  // own self-contained triage rail (workflow, signals, alternatives,
+  // feedback, context, model footer). The shell's draft-specific rail
+  // (Live queue context + Response playbook + AI status) would compete
+  // for right-column real estate, so collapse the shell rail to a
+  // single column for the hero workspace. Other tabs keep the rail.
+  const heroWorkspaceActive =
+    activeTab === "draft" &&
+    Boolean(revampFlags.ASSISTSUPPORT_REVAMP_WORKSPACE_HERO);
+
   useEffect(() => {
     if (!statusOpen) return;
 
@@ -359,116 +369,128 @@ export function RevampShell({
           ))}
         </nav>
 
-        <div className="as-shell__content">
+        <div
+          className={[
+            "as-shell__content",
+            heroWorkspaceActive ? "as-shell__content--solo" : "",
+          ]
+            .filter(Boolean)
+            .join(" ")}
+        >
           <main className="as-shell__workspace" aria-label="Workspace">
             <div className="as-shell__workspaceInner">{children}</div>
           </main>
-          <aside
-            className="as-shell__rail"
-            aria-label="Diagnostics and guidance"
-          >
-            {activeTab === "draft" && (
-              <>
-                <WorkspaceQueueContext
-                  onNavigateToQueue={onNavigateToQueue}
-                  revampUi
-                />
-                <Panel
-                  title="Response playbook"
-                  subtitle="Keep responses consistent across the team"
-                >
-                  <ol className="as-shell__railBullets">
-                    <li>Capture the issue in plain language.</li>
-                    <li>Validate policy and approval requirements.</li>
-                    <li>Generate and edit response with cited context.</li>
-                    <li>Save to follow-ups for handoff continuity.</li>
-                  </ol>
-                </Panel>
-              </>
-            )}
-            <Panel
-              title="AI Status & Guarantees"
-              subtitle="Predictable local AI; never blocking"
-            >
-              <ul className="as-shell__railList">
-                <li>
-                  <span className="as-shell__railKey">Model</span>
-                  <span className="as-shell__railVal">
-                    {appStatus.llmLoaded
-                      ? appStatus.llmModelName || "Loaded"
-                      : "Not loaded"}
-                  </span>
-                </li>
-                <li>
-                  <span className="as-shell__railKey">Citations</span>
-                  <span className="as-shell__railVal">
-                    Required for copy (override audited)
-                  </span>
-                </li>
-                <li>
-                  <span className="as-shell__railKey">MemoryKernel</span>
-                  <span className="as-shell__railVal">
-                    {appStatus.memoryKernelFeatureEnabled
-                      ? "Optional enrichment"
-                      : "Disabled"}
-                  </span>
-                </li>
-              </ul>
-            </Panel>
-
-            <Panel
-              title="Next Best Actions"
-              subtitle="Always have a deterministic next step"
+          {!heroWorkspaceActive && (
+            <aside
+              className="as-shell__rail"
+              aria-label="Diagnostics and guidance"
             >
-              <ul className="as-shell__railBullets">
-                {needsModel && (
+              {activeTab === "draft" && (
+                <>
+                  <WorkspaceQueueContext
+                    onNavigateToQueue={onNavigateToQueue}
+                    revampUi
+                  />
+                  <Panel
+                    title="Response playbook"
+                    subtitle="Keep responses consistent across the team"
+                  >
+                    <ol className="as-shell__railBullets">
+                      <li>Capture the issue in plain language.</li>
+                      <li>Validate policy and approval requirements.</li>
+                      <li>Generate and edit response with cited context.</li>
+                      <li>Save to follow-ups for handoff continuity.</li>
+                    </ol>
+                  </Panel>
+                </>
+              )}
+              <Panel
+                title="AI Status & Guarantees"
+                subtitle="Predictable local AI; never blocking"
+              >
+                <ul className="as-shell__railList">
                   <li>
-                    Load a local model in Settings.
-                    <div style={{ marginTop: "var(--as-space-2)" }}>
-                      <AsButton
-                        size="small"
-                        tone="primary"
-                        onClick={() => onTabChange("settings")}
-                      >
-                        Open Settings
-                      </AsButton>
-                    </div>
+                    <span className="as-shell__railKey">Model</span>
+                    <span className="as-shell__railVal">
+                      {appStatus.llmLoaded
+                        ? appStatus.llmModelName || "Loaded"
+                        : "Not loaded"}
+                    </span>
                   </li>
-                )}
-                {needsKb && (
                   <li>
-                    Point Knowledge Base to your local docs folder, then rebuild
-                    the index.
-                    <div style={{ marginTop: "var(--as-space-2)" }}>
-                      <AsButton
-                        size="small"
-                        tone="primary"
-                        onClick={() => onTabChange("knowledge")}
-                      >
-                        Open Knowledge
-                      </AsButton>
-                    </div>
+                    <span className="as-shell__railKey">Citations</span>
+                    <span className="as-shell__railVal">
+                      Required for copy (override audited)
+                    </span>
                   </li>
-                )}
-                {memoryKernelDegraded && (
-                  <li>
-                    MemoryKernel is degraded. Draft generation will continue
-                    with deterministic fallback.
-                    <div style={{ marginTop: "var(--as-space-2)" }}>
-                      <AsButton size="small" onClick={() => onTabChange("ops")}>
-                        Open Ops
-                      </AsButton>
-                    </div>
-                  </li>
-                )}
-                {!needsModel && !needsKb && !memoryKernelDegraded && (
                   <li>
-                    Use Cmd+K to jump between Queue, Draft, Sources, and Ops.
+                    <span className="as-shell__railKey">MemoryKernel</span>
+                    <span className="as-shell__railVal">
+                      {appStatus.memoryKernelFeatureEnabled
+                        ? "Optional enrichment"
+                        : "Disabled"}
+                    </span>
                   </li>
-                )}
-              </ul>
-            </Panel>
-          </aside>
+                </ul>
+              </Panel>
+
+              <Panel
+                title="Next Best Actions"
+                subtitle="Always have a deterministic next step"
+              >
+                <ul className="as-shell__railBullets">
+                  {needsModel && (
+                    <li>
+                      Load a local model in Settings.
+                      <div style={{ marginTop: "var(--as-space-2)" }}>
+                        <AsButton
+                          size="small"
+                          tone="primary"
+                          onClick={() => onTabChange("settings")}
+                        >
+                          Open Settings
+                        </AsButton>
+                      </div>
+                    </li>
+                  )}
+                  {needsKb && (
+                    <li>
+                      Point Knowledge Base to your local docs folder, then
+                      rebuild the index.
+                      <div style={{ marginTop: "var(--as-space-2)" }}>
+                        <AsButton
+                          size="small"
+                          tone="primary"
+                          onClick={() => onTabChange("knowledge")}
+                        >
+                          Open Knowledge
+                        </AsButton>
+                      </div>
+                    </li>
+                  )}
+                  {memoryKernelDegraded && (
+                    <li>
+                      MemoryKernel is degraded. Draft generation will continue
+                      with deterministic fallback.
+                      <div style={{ marginTop: "var(--as-space-2)" }}>
+                        <AsButton
+                          size="small"
+                          onClick={() => onTabChange("ops")}
+                        >
+                          Open Ops
+                        </AsButton>
+                      </div>
+                    </li>
+                  )}
+                  {!needsModel && !needsKb && !memoryKernelDegraded && (
+                    <li>
+                      Use Cmd+K to jump between Queue, Draft, Sources, and Ops.
+                    </li>
+                  )}
+                </ul>
+              </Panel>
+            </aside>
+          )}
         </div>
       </div>
     </div>
diff --git a/src/features/revamp/shell/revampShell.css b/src/features/revamp/shell/revampShell.css
index ae3c33b..b5167b6 100644
--- a/src/features/revamp/shell/revampShell.css
+++ b/src/features/revamp/shell/revampShell.css
@@ -307,6 +307,18 @@
   background: inherit;
 }
 
+/*
+ * Hero workspace owns its own triage rail, so the shell collapses to a
+ * single column on the Draft tab when the REVAMP_WORKSPACE_HERO flag is
+ * on. Other tabs (Queue, Knowledge, Analytics, Ops, Settings) keep the
+ * two-column layout with the diagnostics rail.
+ */
+.as-shell__content--solo {
+  grid-template-columns: 1fr;
+  padding: 0;
+  gap: 0;
+}
+
 .as-shell__workspace {
   min-width: 0;
   min-height: 0;
diff --git a/src/features/workspace/WorkspaceHeroLayout.test.tsx b/src/features/workspace/WorkspaceHeroLayout.test.tsx
new file mode 100644
index 0000000..57b9efc
--- /dev/null
+++ b/src/features/workspace/WorkspaceHeroLayout.test.tsx
@@ -0,0 +1,147 @@
+// @vitest-environment jsdom
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { WorkspaceHeroLayoutProps } from "./WorkspaceHeroLayout";
+import { WorkspaceHeroLayout } from "./WorkspaceHeroLayout";
+
+function baseProps(
+  overrides: Partial<WorkspaceHeroLayoutProps> = {},
+): WorkspaceHeroLayoutProps {
+  return {
+    ticket: null,
+    ticketId: null,
+    input: "",
+    onInputChange: vi.fn(),
+    responseLength: "Medium",
+    onResponseLengthChange: vi.fn(),
+    hasInput: false,
+    hasDiagnosis: false,
+    hasResponseReady: false,
+    handoffTouched: false,
+    response: "",
+    streamingText: "",
+    isStreaming: false,
+    sources: [],
+    metrics: null,
+    confidence: null,
+    grounding: [],
+    alternatives: [],
+    generating: false,
+    modelLoaded: true,
+    loadedModelName: "llama3.1-8b-instruct",
+    caseIntake: {},
+    onIntakeFieldChange: vi.fn(),
+    onGenerate: vi.fn(),
+    onCancel: vi.fn(),
+    onCopyResponse: vi.fn(),
+    onSaveAsTemplate: vi.fn(),
+    onUseAlternative: vi.fn(),
+    ...overrides,
+  };
+}
+
+describe("WorkspaceHeroLayout", () => {
+  afterEach(() => cleanup());
+
+  it("shows the empty helper copy when no response exists and a model is loaded", () => {
+    render(<WorkspaceHeroLayout {...baseProps()} />);
+    expect(
+      screen.getByText(
+        /press Generate to draft|KB-grounded draft appears here/i,
+      ),
+    ).toBeTruthy();
+  });
+
+  it("renders the answer prose, cited sources, and claims-supported metric when a grounded response exists", () => {
+    const props = baseProps({
+      response:
+        "Removable media is permitted on company-issued Macs per IT Security Policy 4.2.[1]\n\nFor short-term travel use you need an approved encrypted drive.[2]",
+      hasResponseReady: true,
+      sources: [
+        {
+          chunk_id: "a",
+          file_path: "policies/security-4.2.md",
+          title: "IT Security Policy 4.2 — Removable Media Controls",
+          heading_path: "Enforcement",
+          score: 0.94,
+        },
+        {
+          chunk_id: "b",
+          file_path: "kb/hardware/ironkey-d500s.md",
+          title: "Kingston IronKey D500S — Standard Issue Procedure",
+          heading_path: "Request flow",
+          score: 0.88,
+        },
+      ],
+      confidence: { mode: "answer", score: 0.87, rationale: "" },
+      grounding: [
+        {
+          claim: "policy cite",
+          source_indexes: [0],
+          support_level: "supported",
+        },
+        { claim: "hardware", source_indexes: [1], support_level: "supported" },
+        { claim: "extra", source_indexes: [], support_level: "unsupported" },
+      ],
+      metrics: {
+        tokens_per_second: 42,
+        sources_used: 2,
+        word_count: 118,
+        length_target_met: true,
+        context_utilization: 0.31,
+      },
+    });
+
+    render(<WorkspaceHeroLayout {...props} />);
+    expect(screen.getByText(/Removable media is permitted/i)).toBeTruthy();
+    // Inline citations render as clickable accent pills (one per [n] marker).
+    expect(
+      screen.getAllByRole("button", { name: /Policy 4\.2/i }).length,
+    ).toBeGreaterThan(0);
+    // Cited sources list renders both KB entries.
+    expect(
+      screen.getByText(/IT Security Policy 4\.2 — Removable Media Controls/i),
+    ).toBeTruthy();
+    expect(screen.getByText(/Kingston IronKey D500S/i)).toBeTruthy();
+    // Grounded-claims summary is 2/3 — rendered in both the meta row
+    // and the rail signals card, so we just assert it appears at least once.
+    const matches = screen.getAllByText(
+      (_, node) => node?.textContent === "2/3",
+    );
+    expect(matches.length).toBeGreaterThanOrEqual(1);
+  });
+
+  it("fires onRateResponse when the thumbs-up button is clicked and toggles the pressed state", async () => {
+    const user = userEvent.setup();
+    const onRateResponse = vi.fn();
+    render(
+      <WorkspaceHeroLayout
+        {...baseProps({
+          response: "A grounded draft.",
+          hasResponseReady: true,
+          onRateResponse,
+        })}
+      />,
+    );
+
+    const thumbsUp = screen.getByRole("button", {
+      name: /This draft is good/i,
+    });
+    expect(thumbsUp.getAttribute("aria-pressed")).toBe("false");
+    await user.click(thumbsUp);
+    expect(onRateResponse).toHaveBeenCalledWith("up");
+    expect(thumbsUp.getAttribute("aria-pressed")).toBe("true");
+  });
+
+  it("disables the generate button when the model is unloaded and surfaces the reason via title", () => {
+    render(
+      <WorkspaceHeroLayout
+        {...baseProps({ input: "anything", modelLoaded: false })}
+      />,
+    );
+    const generate = screen.getByRole("button", { name: /Generate/i });
+    expect(generate.hasAttribute("disabled")).toBe(true);
+    expect(generate.getAttribute("title")).toMatch(/Model not loaded/i);
+  });
+});
diff --git a/src/features/workspace/WorkspaceHeroLayout.tsx b/src/features/workspace/WorkspaceHeroLayout.tsx
new file mode 100644
index 0000000..2620524
--- /dev/null
+++ b/src/features/workspace/WorkspaceHeroLayout.tsx
@@ -0,0 +1,880 @@
+/**
+ * WorkspaceHeroLayout — three-region Workspace (Draft) renderer.
+ *
+ * Regions (≥1280px):
+ *   ┌───────────────────────────────────────────────┐
+ *   │  COMPOSER   (sticky, full width)              │
+ *   ├───────────────────────────┬───────────────────┤
+ *   │  ANSWER HERO              │  TRIAGE RAIL      │
+ *   │  (reads like prose,       │  (workflow,       │
+ *   │   16px/1.65, 70ch)        │   signals, alts,  │
+ *   │                           │   feedback,       │
+ *   │                           │   context, model) │
+ *   └───────────────────────────┴───────────────────┘
+ *
+ * Drop-in replacement for ClaudeDesignWorkspace — the shared props are
+ * identical; three optional props (onRateResponse, onFlagKbGap,
+ * retrievalLatencyMs) wire the rail's feedback surface.
+ *
+ * All class names are scoped under `.wsx` so the rules in
+ * `src/styles/revamp/workspaceHero.css` never collide with the existing
+ * `.cdw`-scoped rules in `claudeDesignWorkspace.css`.
+ */
+
+import { useMemo, useState } from "react";
+import type { ReactNode } from "react";
+import { Icon } from "../../components/shared/Icon";
+import type {
+  ConfidenceAssessment,
+  GenerationMetrics,
+  GroundedClaim,
+} from "../../types/llm";
+import type { ContextSource } from "../../types/knowledge";
+import type {
+  CaseIntake,
+  IntakeUrgency,
+  NoteAudience,
+  ResponseAlternative,
+  ResponseLength,
+} from "../../types/workspace";
+import type { JiraTicket } from "../../hooks/useJira";
+import "../../styles/revamp/workspaceHero.css";
+
+export interface WorkspaceHeroLayoutProps {
+  ticket: JiraTicket | null;
+  ticketId: string | null;
+
+  input: string;
+  onInputChange: (value: string) => void;
+  responseLength: ResponseLength;
+  onResponseLengthChange: (length: ResponseLength) => void;
+
+  hasInput: boolean;
+  hasDiagnosis: boolean;
+  hasResponseReady: boolean;
+  handoffTouched: boolean;
+
+  response: string;
+  streamingText: string;
+  isStreaming: boolean;
+  sources: ContextSource[];
+  metrics: GenerationMetrics | null;
+  confidence: ConfidenceAssessment | null;
+  grounding: GroundedClaim[];
+  alternatives: ResponseAlternative[];
+
+  generating: boolean;
+  modelLoaded: boolean;
+  loadedModelName: string | null;
+
+  caseIntake: CaseIntake;
+  onIntakeFieldChange: (
+    field: "note_audience" | "likely_category" | "urgency" | "environment",
+    value: string | null,
+  ) => void;
+
+  onGenerate: () => void;
+  onCancel: () => void;
+  onCopyResponse: () => void;
+  onSaveAsTemplate: () => void;
+  onUseAlternative: (alt: ResponseAlternative) => void;
+  onNavigateToSource?: (searchQuery: string) => void;
+
+  onRateResponse?: (rating: "up" | "down") => void;
+  onFlagKbGap?: () => void;
+  retrievalLatencyMs?: number | null;
+}
+
+const INTENT_CHIPS: ReadonlyArray<{ value: string; label: string }> = [
+  { value: "policy", label: "Policy" },
+  { value: "howto", label: "Howto" },
+  { value: "access", label: "Access" },
+  { value: "incident", label: "Incident" },
+];
+
+const LENGTH_OPTIONS: ReadonlyArray<ResponseLength> = [
+  "Short",
+  "Medium",
+  "Long",
+];
+
+const URGENCY_OPTIONS: ReadonlyArray<IntakeUrgency | ""> = [
+  "",
+  "low",
+  "normal",
+  "high",
+  "critical",
+];
+
+const AUDIENCE_OPTIONS: ReadonlyArray<{ value: NoteAudience; label: string }> =
+  [
+    { value: "customer-safe", label: "End user (customer-safe)" },
+    { value: "internal-note", label: "Internal note" },
+    { value: "escalation-note", label: "Escalation note" },
+  ];
+
+const TONE_OPTIONS: ReadonlyArray<{ value: string; label: string }> = [
+  { value: "neutral", label: "Neutral" },
+  { value: "empathetic", label: "Empathetic" },
+  { value: "direct", label: "Direct" },
+];
+
+function initialsFor(name: string | null | undefined): string {
+  if (!name) return "?";
+  const parts = name.trim().split(/\s+/).slice(0, 2);
+  return parts.map((p) => p[0]?.toUpperCase() ?? "").join("") || "?";
+}
+
+function timeAgo(iso: string | null | undefined): string {
+  if (!iso) return "";
+  const t = Date.parse(iso);
+  if (Number.isNaN(t)) return iso;
+  const seconds = Math.max(0, Math.floor((Date.now() - t) / 1000));
+  if (seconds < 60) return `${seconds}s ago`;
+  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
+  if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
+  return `${Math.floor(seconds / 86400)}d ago`;
+}
+
+function deriveIntentClass(category: string | null | undefined): string | null {
+  if (!category) return null;
+  const slug = category
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "_")
+    .replace(/^_+|_+$/g, "");
+  return slug || null;
+}
+
+/**
+ * Split a draft into paragraph nodes and render inline [n] citations
+ * as accent pills inside each paragraph. Multi-paragraph drafts get
+ * `<p>` wrappers so the prose picks up the 14px paragraph gap defined
+ * in workspaceHero.css.
+ */
+function renderProse(
+  text: string,
+  sources: ContextSource[],
+  onNavigateToSource: ((searchQuery: string) => void) | undefined,
+  streamingTail: boolean,
+): ReactNode[] {
+  if (!text) return [];
+  const paragraphs = text.split(/\n{2,}/);
+  const out: ReactNode[] = [];
+  const citeRegex = /\[(\d+)\]/g;
+
+  paragraphs.forEach((para, pi) => {
+    const parts: ReactNode[] = [];
+    let lastIndex = 0;
+    let match: RegExpExecArray | null;
+    let keyIdx = 0;
+    citeRegex.lastIndex = 0;
+    while ((match = citeRegex.exec(para)) !== null) {
+      if (match.index > lastIndex) {
+        parts.push(para.slice(lastIndex, match.index));
+      }
+      const n = Number.parseInt(match[1] ?? "0", 10);
+      const source = n > 0 ? sources[n - 1] : undefined;
+      const title = source?.title ?? source?.file_path ?? `Source ${n}`;
+      const searchQuery = source?.title ?? source?.file_path ?? "";
+      parts.push(
+        <button
+          key={`cite-${pi}-${keyIdx++}`}
+          type="button"
+          className="cite"
+          title={title}
+          onClick={() => {
+            if (onNavigateToSource && searchQuery) {
+              onNavigateToSource(searchQuery);
+            }
+          }}
+        >
+          {n}
+        </button>,
+      );
+      lastIndex = citeRegex.lastIndex;
+    }
+    if (lastIndex < para.length) {
+      parts.push(para.slice(lastIndex));
+    }
+    const isLast = pi === paragraphs.length - 1;
+    out.push(
+      <p key={`p-${pi}`}>
+        {parts}
+        {isLast && streamingTail && (
+          <span className="streaming-dot" aria-label="streaming" />
+        )}
+      </p>,
+    );
+  });
+  return out;
+}
+
+export function WorkspaceHeroLayout({
+  ticket,
+  ticketId,
+  input,
+  onInputChange,
+  responseLength,
+  onResponseLengthChange,
+  hasInput,
+  hasDiagnosis,
+  hasResponseReady,
+  handoffTouched,
+  response,
+  streamingText,
+  isStreaming,
+  sources,
+  metrics,
+  confidence,
+  grounding,
+  alternatives,
+  generating,
+  modelLoaded,
+  loadedModelName,
+  caseIntake,
+  onIntakeFieldChange,
+  onGenerate,
+  onCancel,
+  onCopyResponse,
+  onSaveAsTemplate,
+  onUseAlternative,
+  onNavigateToSource,
+  onRateResponse,
+  onFlagKbGap,
+  retrievalLatencyMs,
+}: WorkspaceHeroLayoutProps) {
+  const displayedResponse = isStreaming ? streamingText : response;
+  const hasResponse = Boolean(displayedResponse.trim());
+
+  const activeIntent = useMemo(
+    () => deriveIntentClass(caseIntake.likely_category),
+    [caseIntake.likely_category],
+  );
+
+  const stages = useMemo(() => {
+    const triageDone = hasInput;
+    const classifyDone = hasDiagnosis || Boolean(activeIntent);
+    const draftDone = hasResponseReady;
+    const sendDone = handoffTouched;
+    let activeIdx = 0;
+    if (!triageDone) activeIdx = 0;
+    else if (!classifyDone) activeIdx = 1;
+    else if (!draftDone) activeIdx = 2;
+    else activeIdx = 3;
+    return [
+      { n: 1, label: "Triage", hint: "Ticket captured", done: triageDone },
+      {
+        n: 2,
+        label: "Classify",
+        hint: "ML intent + category",
+        done: classifyDone,
+      },
+      {
+        n: 3,
+        label: "Draft response",
+        hint: "KB-grounded answer",
+        done: draftDone,
+      },
+      {
+        n: 4,
+        label: "Send to Jira",
+        hint: "Copy or post",
+        done: sendDone,
+      },
+    ].map((s, i) => ({
+      ...s,
+      state: s.done ? "done" : i === activeIdx ? "active" : "",
+    }));
+  }, [hasInput, hasDiagnosis, activeIntent, hasResponseReady, handoffTouched]);
+
+  const gaugePercent = confidence ? Math.round(confidence.score * 100) : null;
+  const confidenceTone = !confidence
+    ? null
+    : confidence.mode === "answer"
+      ? "good"
+      : confidence.mode === "clarify"
+        ? "warn"
+        : "bad";
+  const confidenceLabel =
+    confidence?.mode === "answer"
+      ? "Grounded"
+      : confidence?.mode === "clarify"
+        ? "Needs clarify"
+        : confidence
+          ? "Abstain"
+          : null;
+
+  const groundedTotal = grounding.length;
+  const groundedSupported = grounding.filter(
+    (g: GroundedClaim) => g.support_level === "supported",
+  ).length;
+  const groundedPct =
+    groundedTotal > 0
+      ? Math.round((groundedSupported / groundedTotal) * 100)
+      : 0;
+
+  const sourcesCount = sources.length;
+  const wordCount = metrics?.word_count ?? 0;
+  const tokensPerSec = metrics?.tokens_per_second ?? 0;
+  const contextUtilPct =
+    metrics?.context_utilization != null
+      ? Math.round(metrics.context_utilization * 100)
+      : null;
+
+  const ticketPriority = ticket?.priority ?? "Normal";
+  const ticketReporter = ticket?.reporter ?? "—";
+  const ticketSummary = ticket?.summary ?? "No ticket loaded";
+  const ticketKey = ticket?.key ?? ticketId;
+  const ticketOpened = ticket?.created ? timeAgo(ticket.created) : "";
+  const ticketIssueType = ticket?.issue_type ?? "Request";
+
+  const intakeCategoryChip = (caseIntake.likely_category ?? "").toLowerCase();
+
+  const [rating, setRating] = useState<"up" | "down" | null>(null);
+  const handleRate = (value: "up" | "down") => {
+    setRating((prev) => (prev === value ? null : value));
+    if (onRateResponse) onRateResponse(value);
+  };
+
+  return (
+    <div className="wsx" data-has-response={hasResponse ? "1" : "0"}>
+      {/* ============================================================
+          COMPOSER — sticky, full width
+          ============================================================ */}
+      <div className="wsx__composer" role="region" aria-label="Query composer">
+        <div className="wsx__ticketBar">
+          <div className="wsx__ticketId">
+            {ticketKey
+              ? `${ticketKey} · ${ticketIssueType.toUpperCase()}`
+              : "NO TICKET LOADED"}
+          </div>
+          <div className="wsx__ticketSummary" title={ticketSummary}>
+            {ticketSummary}
+          </div>
+          <div className="wsx__ticketMeta">
+            <span className="wsx__ticketAvatar" aria-hidden="true">
+              {initialsFor(ticketReporter)}
+            </span>
+            <span className="wsx__ticketReporter">{ticketReporter}</span>
+            {ticket?.status && (
+              <>
+                <span className="wsx__ticketDot">·</span>
+                <span>{ticket.status}</span>
+              </>
+            )}
+            {ticketOpened && (
+              <>
+                <span className="wsx__ticketDot">·</span>
+                <span className="wsx__ticketClock">
+                  <Icon name="clock" size={11} /> {ticketOpened}
+                </span>
+              </>
+            )}
+            <span className="wsx__badge">{ticketPriority}</span>
+            {caseIntake.likely_category && (
+              <span className="wsx__badge wsx__badge--warn">
+                {caseIntake.likely_category}
+              </span>
+            )}
+          </div>
+        </div>
+
+        <textarea
+          className="wsx__query"
+          value={input}
+          onChange={(e) => onInputChange(e.target.value)}
+          placeholder="Paste the ticket or describe the issue…"
+          aria-label="Ticket or issue description"
+        />
+
+        <div className="wsx__composerFooter">
+          <div
+            className="wsx__chips"
+            role="radiogroup"
+            aria-label="Detected intent"
+          >
+            {INTENT_CHIPS.map((c) => {
+              const isOn = intakeCategoryChip === c.value;
+              return (
+                <button
+                  key={c.value}
+                  type="button"
+                  role="radio"
+                  aria-checked={isOn}
+                  className={["wsx__chip", isOn ? "is-on" : ""]
+                    .filter(Boolean)
+                    .join(" ")}
+                  onClick={() =>
+                    onIntakeFieldChange(
+                      "likely_category",
+                      isOn ? null : c.label,
+                    )
+                  }
+                >
+                  <span className="wsx__chipDot" aria-hidden="true" />
+                  {c.label}
+                </button>
+              );
+            })}
+          </div>
+
+          <div className="wsx__composerRight">
+            <div
+              className="wsx__seg"
+              role="radiogroup"
+              aria-label="Response length"
+            >
+              {LENGTH_OPTIONS.map((l) => (
+                <button
+                  key={l}
+                  type="button"
+                  role="radio"
+                  aria-checked={responseLength === l}
+                  className={responseLength === l ? "is-on" : ""}
+                  onClick={() => onResponseLengthChange(l)}
+                >
+                  {l}
+                </button>
+              ))}
+            </div>
+
+            {generating ? (
+              <button type="button" className="wsx__btn" onClick={onCancel}>
+                <Icon name="stop" size={12} /> Cancel
+              </button>
+            ) : (
+              <button
+                type="button"
+                className="wsx__btn wsx__btn--primary"
+                onClick={onGenerate}
+                disabled={!modelLoaded || !input.trim()}
+                title={
+                  !modelLoaded
+                    ? "Model not loaded"
+                    : !input.trim()
+                      ? "Enter a query first"
+                      : undefined
+                }
+              >
+                <Icon name="zap" size={12} /> Generate
+                <span className="wsx__kbd">⌘↵</span>
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* ============================================================
+          BODY — answer hero + triage rail
+          ============================================================ */}
+      <div className="wsx__body">
+        {/* ---------- ANSWER HERO ---------- */}
+        <section className="wsx__answer" aria-label="KB-grounded answer">
+          {hasResponse ? (
+            <div className="wsx__answerInner">
+              {(confidence || activeIntent || caseIntake.likely_category) && (
+                <header
+                  className={[
+                    "wsx__answerHead",
+                    confidenceTone ? `is-${confidenceTone}` : "",
+                  ]
+                    .filter(Boolean)
+                    .join(" ")}
+                >
+                  {(activeIntent || caseIntake.likely_category) && (
+                    <div className="wsx__intent">
+                      <span className="wsx__intentLabel">ML Intent</span>
+                      <span className="wsx__intentClass">
+                        {(
+                          caseIntake.likely_category ??
+                          activeIntent ??
+                          ""
+                        ).toUpperCase()}
+                        {activeIntent && caseIntake.likely_category
+                          ? ` · ${activeIntent}`
+                          : ""}
+                      </span>
+                    </div>
+                  )}
+
+                  {confidence && (
+                    <div
+                      className="wsx__gauge"
+                      aria-label={`Confidence ${gaugePercent ?? "--"}%, ${
+                        confidenceLabel ?? ""
+                      }`}
+                    >
+                      <span
+                        className={[
+                          "wsx__gaugePill",
+                          confidenceTone ? `is-${confidenceTone}` : "",
+                        ]
+                          .filter(Boolean)
+                          .join(" ")}
+                      >
+                        <Icon name="shield" size={10} />
+                        {confidenceLabel}
+                      </span>
+                      <div
+                        className="wsx__gaugeBar"
+                        style={{
+                          ["--v" as string]: `${gaugePercent ?? 0}%`,
+                        }}
+                      />
+                      <span className="wsx__gaugeNum">
+                        {gaugePercent != null ? `${gaugePercent}%` : "--"}
+                      </span>
+                    </div>
+                  )}
+                </header>
+              )}
+
+              <div className="wsx__meta">
+                <span className="wsx__metaItem">
+                  <Icon name="zap" size={11} /> <b>{tokensPerSec.toFixed(0)}</b>{" "}
+                  tok/s
+                </span>
+                <span className="wsx__metaItem">
+                  <Icon name="book" size={11} /> <b>{sourcesCount}</b> sources
+                </span>
+                <span className="wsx__metaItem">
+                  <Icon name="file-text" size={11} /> <b>{wordCount}</b> words
+                </span>
+                {contextUtilPct != null && (
+                  <span className="wsx__metaItem">
+                    <Icon name="database" size={11} /> <b>{contextUtilPct}%</b>{" "}
+                    ctx
+                  </span>
+                )}
+                {groundedTotal > 0 && (
+                  <span className="wsx__metaItem">
+                    <Icon name="check" size={11} />{" "}
+                    <b>
+                      {groundedSupported}/{groundedTotal}
+                    </b>{" "}
+                    claims supported
+                  </span>
+                )}
+                <span className="wsx__metaItem wsx__metaItem--mono wsx__metaItem--muted">
+                  {loadedModelName ?? "model unloaded"}
+                </span>
+              </div>
+
+              <article className="wsx__prose">
+                {renderProse(
+                  displayedResponse,
+                  sources,
+                  onNavigateToSource,
+                  isStreaming,
+                )}
+              </article>
+
+              <div className="wsx__answerActions">
+                <button
+                  type="button"
+                  className="wsx__btn wsx__btn--ghost wsx__btn--sm"
+                  onClick={onGenerate}
+                  disabled={generating || !modelLoaded || !input.trim()}
+                >
+                  <Icon name="refresh" size={12} /> Regenerate
+                </button>
+                <button
+                  type="button"
+                  className="wsx__btn wsx__btn--ghost wsx__btn--sm"
+                  onClick={onSaveAsTemplate}
+                  disabled={!response.trim()}
+                >
+                  <Icon name="star" size={12} /> Save template
+                </button>
+                <div className="wsx__spacer" />
+                <button
+                  type="button"
+                  className="wsx__btn wsx__btn--primary wsx__btn--sm"
+                  onClick={onCopyResponse}
+                  disabled={!response.trim()}
+                >
+                  <Icon name="copy" size={12} /> Copy response
+                </button>
+              </div>
+
+              {sources.length > 0 && (
+                <section className="wsx__sources" aria-label="Cited sources">
+                  <header className="wsx__sourcesHead">
+                    <span className="wsx__sourcesTitle">Cited sources</span>
+                    <span className="wsx__sourcesHint">
+                      click to open · hybrid retrieval
+                    </span>
+                  </header>
+                  <ul>
+                    {sources.map((s, i) => (
+                      <li key={s.chunk_id || `${s.file_path}-${i}`}>
+                        <button
+                          type="button"
+                          className="wsx__source"
+                          onClick={() => {
+                            if (onNavigateToSource) {
+                              onNavigateToSource(s.title ?? s.file_path);
+                            }
+                          }}
+                        >
+                          <span className="wsx__sourceNum">{i + 1}</span>
+                          <span className="wsx__sourceBody">
+                            <span className="wsx__sourceTitle">
+                              {s.title ?? s.file_path}
+                            </span>
+                            <span className="wsx__sourceMeta">
+                              {s.heading_path
+                                ? `${s.file_path} · ${s.heading_path}`
+                                : s.file_path}
+                            </span>
+                          </span>
+                          <span className="wsx__sourceScore">
+                            {s.score.toFixed(2)}
+                          </span>
+                        </button>
+                      </li>
+                    ))}
+                  </ul>
+                </section>
+              )}
+            </div>
+          ) : (
+            <div className="wsx__empty">
+              <div className="wsx__emptyInner">
+                <Icon name="sparkles" size={18} />
+                <p>
+                  {modelLoaded
+                    ? "Paste a ticket or describe the issue above, then press Generate. The KB-grounded draft appears here — ready to review, rate, and copy."
+                    : "Load a local model in Settings, then generate a KB-grounded draft here."}
+                </p>
+              </div>
+            </div>
+          )}
+        </section>
+
+        {/* ---------- TRIAGE RAIL ---------- */}
+        <aside className="wsx__rail" aria-label="Triage and feedback">
+          <div className="wsx__railCard">
+            <div className="wsx__railTitle">Workflow</div>
+            <ol className="wsx__steps">
+              {stages.map((stage) => (
+                <li
+                  key={stage.n}
+                  className={[
+                    "wsx__step",
+                    stage.state === "active" ? "is-active" : "",
+                    stage.state === "done" ? "is-done" : "",
+                  ]
+                    .filter(Boolean)
+                    .join(" ")}
+                >
+                  <span className="wsx__stepNum">
+                    {stage.state === "done" ? (
+                      <Icon name="check" size={11} />
+                    ) : (
+                      stage.n
+                    )}
+                  </span>
+                  <span className="wsx__stepText">
+                    <span className="wsx__stepLabel">{stage.label}</span>
+                    <span className="wsx__stepHint">{stage.hint}</span>
+                  </span>
+                </li>
+              ))}
+            </ol>
+          </div>
+
+          {(confidence || groundedTotal > 0 || retrievalLatencyMs != null) && (
+            <div className="wsx__railCard">
+              <div className="wsx__railTitle">Signals</div>
+              <dl className="wsx__stats">
+                {confidence && (
+                  <div className="wsx__stat">
+                    <dt>Confidence</dt>
+                    <dd
+                      className={[
+                        "wsx__statValue",
+                        confidenceTone ? `is-${confidenceTone}` : "",
+                      ]
+                        .filter(Boolean)
+                        .join(" ")}
+                    >
+                      {gaugePercent != null ? `${gaugePercent}%` : "--"}
+                    </dd>
+                  </div>
+                )}
+                {groundedTotal > 0 && (
+                  <div className="wsx__stat">
+                    <dt>Grounded claims</dt>
+                    <dd>
+                      <span className="wsx__statValue">
+                        {groundedSupported}/{groundedTotal}
+                      </span>
+                      <div
+                        className="wsx__miniBar"
+                        style={{
+                          ["--v" as string]: `${groundedPct}%`,
+                        }}
+                      />
+                    </dd>
+                  </div>
+                )}
+                {retrievalLatencyMs != null && (
+                  <div className="wsx__stat">
+                    <dt>Retrieval</dt>
+                    <dd className="wsx__statValue wsx__statValue--mono">
+                      {Math.round(retrievalLatencyMs)}ms
+                    </dd>
+                  </div>
+                )}
+              </dl>
+            </div>
+          )}
+
+          {alternatives.length > 0 && (
+            <div className="wsx__railCard">
+              <div className="wsx__railTitle">Alternatives</div>
+              <ul className="wsx__alts">
+                {alternatives.map((alt, i) => (
+                  <li key={alt.id} className="wsx__alt">
+                    <div className="wsx__altHead">ALT {i + 1}</div>
+                    <div className="wsx__altPreview">
+                      {alt.alternative_text.slice(0, 160)}
+                      {alt.alternative_text.length > 160 ? "…" : ""}
+                    </div>
+                    <button
+                      type="button"
+                      className="wsx__btn wsx__btn--ghost wsx__btn--sm"
+                      onClick={() => onUseAlternative(alt)}
+                    >
+                      Use this
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+
+          <div className="wsx__railCard">
+            <div className="wsx__railTitle">Feedback</div>
+            <div
+              className="wsx__thumbs"
+              role="group"
+              aria-label="Rate response"
+            >
+              <button
+                type="button"
+                className={["wsx__thumb", rating === "up" ? "is-on" : ""]
+                  .filter(Boolean)
+                  .join(" ")}
+                aria-pressed={rating === "up"}
+                onClick={() => handleRate("up")}
+                disabled={!hasResponse}
+                title="This draft is good"
+              >
+                <Icon name="check" size={13} />
+              </button>
+              <button
+                type="button"
+                className={[
+                  "wsx__thumb",
+                  "wsx__thumb--down",
+                  rating === "down" ? "is-on" : "",
+                ]
+                  .filter(Boolean)
+                  .join(" ")}
+                aria-pressed={rating === "down"}
+                onClick={() => handleRate("down")}
+                disabled={!hasResponse}
+                title="This draft is off"
+              >
+                <Icon name="x" size={13} />
+              </button>
+              <span className="wsx__thumbsHint">
+                {rating === "up"
+                  ? "Logged · feeds gap analyzer"
+                  : rating === "down"
+                    ? "Logged · shown in KB gap report"
+                    : "Rate to seed the feedback loop"}
+              </span>
+            </div>
+            <button
+              type="button"
+              className="wsx__btn wsx__btn--ghost wsx__btn--sm wsx__btn--wide"
+              onClick={onFlagKbGap}
+              disabled={!hasResponse || !onFlagKbGap}
+            >
+              <Icon name="alert-triangle" size={12} /> Flag as KB gap
+            </button>
+          </div>
+
+          <div className="wsx__railCard">
+            <div className="wsx__railTitle">Context</div>
+            <div className="wsx__fields">
+              <label className="wsx__field">
+                <span>Audience</span>
+                <select
+                  value={caseIntake.note_audience ?? "customer-safe"}
+                  onChange={(e) =>
+                    onIntakeFieldChange("note_audience", e.target.value)
+                  }
+                >
+                  {AUDIENCE_OPTIONS.map((o) => (
+                    <option key={o.value} value={o.value}>
+                      {o.label}
+                    </option>
+                  ))}
+                </select>
+              </label>
+              <label className="wsx__field">
+                <span>Tone</span>
+                <select defaultValue="neutral">
+                  {TONE_OPTIONS.map((o) => (
+                    <option key={o.value} value={o.value}>
+                      {o.label}
+                    </option>
+                  ))}
+                </select>
+              </label>
+              <label className="wsx__field">
+                <span>Urgency</span>
+                <select
+                  value={caseIntake.urgency ?? ""}
+                  onChange={(e) =>
+                    onIntakeFieldChange("urgency", e.target.value || null)
+                  }
+                >
+                  {URGENCY_OPTIONS.map((u) => (
+                    <option key={u || "auto"} value={u}>
+                      {u ? u[0]!.toUpperCase() + u.slice(1) : "Auto"}
+                    </option>
+                  ))}
+                </select>
+              </label>
+              <label className="wsx__field">
+                <span>Environment</span>
+                <input
+                  type="text"
+                  placeholder="e.g. macOS 14, Okta SSO"
+                  value={caseIntake.environment ?? ""}
+                  onChange={(e) =>
+                    onIntakeFieldChange("environment", e.target.value || null)
+                  }
+                />
+              </label>
+            </div>
+          </div>
+
+          <div className="wsx__railFooter">
+            <span className="wsx__railFooterModel">
+              {loadedModelName ?? "model unloaded"}
+            </span>
+            {contextUtilPct != null && (
+              <span className="wsx__railFooterCtx">ctx {contextUtilPct}%</span>
+            )}
+          </div>
+        </aside>
+      </div>
+    </div>
+  );
+}
diff --git a/src/styles/revamp/workspaceHero.css b/src/styles/revamp/workspaceHero.css
new file mode 100644
index 0000000..30f84fa
--- /dev/null
+++ b/src/styles/revamp/workspaceHero.css
@@ -0,0 +1,1194 @@
+/*
+ * workspaceHero.css — Workspace (Draft) redesigned into a 3-region layout
+ * where the KB-grounded answer is the hero surface.
+ *
+ * All rules are scoped under `.wsx` so nothing collides with `.cdw`
+ * (ClaudeDesignWorkspace) or legacy Draft tab styles. No new tokens are
+ * introduced — every color / spacing / font value below resolves to an
+ * `--as-*` token from `src/styles/revamp/tokens.css`.
+ *
+ * Geometry (desktop ≥ 1280px):
+ *   row 1: composer (full width, sticky)
+ *   row 2: answer hero  |  triage rail (340px)
+ *
+ * Typography is optimized for multi-paragraph draft readability —
+ * 16px / 1.65 with a 70ch max measure. Single accent: teal.
+ */
+
+/* ==============================================================
+   ROOT
+   ============================================================== */
+.wsx {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  gap: 0;
+  flex: 1;
+  min-height: 0;
+  height: 100%;
+  color: var(--as-text-1);
+  font-family: var(--as-font-sans);
+}
+
+.wsx *,
+.wsx *::before,
+.wsx *::after {
+  box-sizing: border-box;
+}
+
+/* ==============================================================
+   COMPOSER — sticky top, full width
+   ============================================================== */
+.wsx__composer {
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px 28px 14px;
+  background: color-mix(in oklab, var(--as-surface-1) 82%, transparent);
+  border-bottom: 1px solid var(--as-border-1);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+}
+
+.wsx__ticketBar {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 16px;
+  min-height: 32px;
+}
+
+.wsx__ticketId {
+  font-family: var(--as-font-mono);
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--as-text-3);
+  letter-spacing: 0.4px;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.wsx__ticketSummary {
+  font-size: 14px;
+  line-height: 1.3;
+  font-weight: 600;
+  letter-spacing: -0.1px;
+  color: var(--as-text-1);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.wsx__ticketMeta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 11.5px;
+  color: var(--as-text-3);
+  white-space: nowrap;
+}
+
+.wsx__ticketAvatar {
+  display: grid;
+  place-items: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: var(--as-accent-surface-1);
+  color: var(--as-accent-1);
+  font-family: var(--as-font-sans);
+  font-size: 10.5px;
+  font-weight: 600;
+  border: 1px solid var(--as-accent-border-1);
+}
+
+.wsx__ticketReporter {
+  color: var(--as-text-2);
+  font-weight: 500;
+}
+
+.wsx__ticketDot {
+  color: var(--as-text-3);
+  opacity: 0.6;
+}
+
+.wsx__ticketClock {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.wsx__badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: var(--as-radius-pill);
+  font-family: var(--as-font-sans);
+  font-size: 10.5px;
+  font-weight: 600;
+  letter-spacing: 0.4px;
+  text-transform: uppercase;
+  background: var(--as-glass-2);
+  border: 1px solid var(--as-border-1);
+  color: var(--as-text-2);
+  line-height: 1.2;
+  margin-left: 4px;
+}
+
+.wsx__badge--warn {
+  background: var(--as-warn-surface);
+  border-color: var(--as-warn-border);
+  color: var(--as-warn-text);
+}
+
+.wsx__query {
+  width: 100%;
+  min-height: 104px;
+  max-height: 240px;
+  resize: vertical;
+  padding: 12px 14px;
+  font-family: var(--as-font-sans);
+  font-size: 15px;
+  line-height: 1.5;
+  color: var(--as-text-1);
+  background: var(--as-glass-1);
+  border: 1px solid var(--as-border-1);
+  border-radius: var(--as-radius-1);
+  transition:
+    border-color 150ms ease,
+    background 150ms ease;
+}
+
+.wsx__query::placeholder {
+  color: var(--as-placeholder);
+}
+
+.wsx__query:focus {
+  outline: none;
+  border-color: var(--as-accent-border-1);
+  background: var(--as-glass-2);
+}
+
+.wsx__composerFooter {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.wsx__chips {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.wsx__chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-family: var(--as-font-sans);
+  font-size: 11.5px;
+  font-weight: 500;
+  color: var(--as-text-2);
+  padding: 5px 10px;
+  border-radius: var(--as-radius-pill);
+  background: var(--as-glass-2);
+  border: 1px solid var(--as-border-1);
+  cursor: pointer;
+  transition:
+    background 150ms ease,
+    color 150ms ease,
+    border-color 150ms ease;
+}
+
+.wsx__chip:hover {
+  background: var(--as-glass-3);
+  color: var(--as-text-1);
+}
+
+.wsx__chip.is-on {
+  background: var(--as-accent-surface-1);
+  color: var(--as-accent-1);
+  border-color: var(--as-accent-border-1);
+}
+
+.wsx__chipDot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+  opacity: 0.6;
+}
+
+.wsx__composerRight {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.wsx__seg {
+  display: inline-flex;
+  padding: 2px;
+  background: var(--as-glass-2);
+  border: 1px solid var(--as-border-1);
+  border-radius: 8px;
+  gap: 2px;
+}
+
+.wsx__seg button {
+  padding: 5px 12px;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  border-radius: 6px;
+  color: var(--as-text-3);
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition:
+    background 150ms ease,
+    color 150ms ease;
+}
+
+.wsx__seg button:hover {
+  color: var(--as-text-2);
+}
+
+.wsx__seg button.is-on {
+  background: var(--as-glass-3);
+  color: var(--as-text-1);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03);
+}
+
+.wsx__btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-family: inherit;
+  font-size: 12.5px;
+  font-weight: 500;
+  padding: 7px 12px;
+  border-radius: 8px;
+  border: 1px solid var(--as-border-1);
+  background: var(--as-glass-2);
+  color: var(--as-text-1);
+  cursor: pointer;
+  transition:
+    background 150ms ease,
+    border-color 150ms ease,
+    transform 80ms ease;
+}
+
+.wsx__btn:hover {
+  background: var(--as-glass-3);
+  border-color: var(--as-border-2);
+}
+
+.wsx__btn:active {
+  transform: translateY(1px);
+}
+
+.wsx__btn:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.wsx__btn--sm {
+  padding: 4px 9px;
+  font-size: 11.5px;
+}
+
+.wsx__btn--primary {
+  background: var(--as-accent-btn-bg);
+  border-color: var(--as-accent-btn-border);
+  color: var(--as-accent-btn-text);
+}
+
+.wsx__btn--primary:hover {
+  background: var(--as-accent-btn-bg-hover);
+  border-color: var(--as-accent-btn-border-hover);
+}
+
+.wsx__btn--ghost {
+  background: transparent;
+  border-color: transparent;
+  color: var(--as-text-3);
+}
+
+.wsx__btn--ghost:hover {
+  background: var(--as-glass-3);
+  color: var(--as-text-1);
+}
+
+.wsx__btn--wide {
+  width: 100%;
+  justify-content: center;
+}
+
+.wsx__kbd {
+  font-family: var(--as-font-mono);
+  font-size: 10.5px;
+  padding: 0 5px;
+  border-radius: 3px;
+  background: rgba(0, 0, 0, 0.3);
+  color: var(--as-text-2);
+  margin-left: 4px;
+}
+
+/* ==============================================================
+   BODY GRID — answer hero + triage rail
+   ============================================================== */
+.wsx__body {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 340px;
+  gap: 24px;
+  padding: 20px 28px 28px;
+  min-height: 0;
+  overflow: hidden;
+}
+
+@media (max-width: 1279px) {
+  .wsx__body {
+    grid-template-columns: minmax(0, 1fr) 300px;
+  }
+}
+
+@media (max-width: 899px) {
+  .wsx__body {
+    grid-template-columns: 1fr;
+    overflow-y: auto;
+  }
+}
+
+/* ==============================================================
+   ANSWER HERO
+   ============================================================== */
+.wsx__answer {
+  min-width: 0;
+  min-height: 0;
+  overflow-y: auto;
+  padding-right: 4px;
+}
+
+.wsx__answerInner {
+  max-width: 780px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.wsx__answerHead {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 12px 16px;
+  border-radius: var(--as-radius-2);
+  background: var(--as-glass-2);
+  border: 1px solid var(--as-border-1);
+}
+
+.wsx__answerHead.is-good {
+  background: var(--as-good-surface);
+  border-color: var(--as-good-border);
+}
+
+.wsx__answerHead.is-warn {
+  background: var(--as-warn-surface);
+  border-color: var(--as-warn-border);
+}
+
+.wsx__answerHead.is-bad {
+  background: var(--as-bad-surface);
+  border-color: var(--as-bad-border);
+}
+
+.wsx__intent {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  min-width: 0;
+}
+
+.wsx__intentLabel {
+  font-family: var(--as-font-sans);
+  font-size: 10.5px;
+  font-weight: 600;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  color: var(--as-text-3);
+}
+
+.wsx__intentClass {
+  font-family: var(--as-font-mono);
+  font-size: 12px;
+  color: var(--as-text-1);
+  font-weight: 500;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.wsx__gauge {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-left: auto;
+  min-width: 200px;
+}
+
+.wsx__gaugePill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 9px;
+  border-radius: var(--as-radius-pill);
+  font-family: var(--as-font-sans);
+  font-size: 10.5px;
+  font-weight: 600;
+  letter-spacing: 0.4px;
+  text-transform: uppercase;
+  background: var(--as-glass-3);
+  border: 1px solid var(--as-border-1);
+  color: var(--as-text-2);
+  white-space: nowrap;
+}
+
+.wsx__gaugePill.is-good {
+  background: var(--as-good-surface);
+  border-color: var(--as-good-border);
+  color: var(--as-good-text);
+}
+
+.wsx__gaugePill.is-warn {
+  background: var(--as-warn-surface);
+  border-color: var(--as-warn-border);
+  color: var(--as-warn-text);
+}
+
+.wsx__gaugePill.is-bad {
+  background: var(--as-bad-surface);
+  border-color: var(--as-bad-border);
+  color: var(--as-bad-text);
+}
+
+.wsx__gaugeBar {
+  flex: 1;
+  height: 4px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.06);
+  overflow: hidden;
+  position: relative;
+}
+
+.wsx__gaugeBar::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  width: var(--v, 0%);
+  background: linear-gradient(90deg, var(--as-good), var(--as-accent-1));
+  border-radius: 999px;
+  transition: width 250ms ease;
+}
+
+.wsx__answerHead.is-warn .wsx__gaugeBar::after {
+  background: var(--as-warn);
+}
+
+.wsx__answerHead.is-bad .wsx__gaugeBar::after {
+  background: var(--as-bad);
+}
+
+.wsx__gaugeNum {
+  font-family: var(--as-font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--as-text-1);
+  font-variant-numeric: tabular-nums;
+  min-width: 34px;
+  text-align: right;
+}
+
+.wsx__meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px;
+  padding: 0 2px;
+  font-size: 11.5px;
+  color: var(--as-text-3);
+}
+
+.wsx__metaItem {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.wsx__metaItem b {
+  color: var(--as-text-2);
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+
+.wsx__metaItem--mono {
+  font-family: var(--as-font-mono);
+}
+
+.wsx__metaItem--muted {
+  color: var(--as-text-3);
+  opacity: 0.72;
+}
+
+/* ---------- PROSE — the readability hero ---------- */
+.wsx__prose {
+  max-width: 70ch;
+  font-family: var(--as-font-sans);
+  font-size: 16px;
+  line-height: 1.65;
+  color: var(--as-text-1);
+  text-wrap: pretty;
+}
+
+.wsx__prose p {
+  margin: 0 0 14px;
+  white-space: pre-wrap;
+}
+
+.wsx__prose p:last-child {
+  margin-bottom: 0;
+}
+
+.wsx__prose h2 {
+  font-size: 17px;
+  line-height: 1.35;
+  font-weight: 600;
+  letter-spacing: -0.1px;
+  color: var(--as-text-1);
+  margin: 24px 0 6px;
+}
+
+.wsx__prose h3 {
+  font-size: 15px;
+  line-height: 1.4;
+  font-weight: 600;
+  color: var(--as-text-1);
+  margin: 20px 0 4px;
+}
+
+.wsx__prose strong {
+  font-weight: 600;
+  color: var(--as-text-1);
+}
+
+.wsx__prose em {
+  font-style: italic;
+  color: var(--as-text-2);
+}
+
+.wsx__prose code {
+  font-family: var(--as-font-mono);
+  font-size: 14px;
+  line-height: 1.45;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--as-border-1);
+  border-radius: var(--as-radius-1);
+  padding: 1px 5px;
+}
+
+.wsx__prose pre {
+  font-family: var(--as-font-mono);
+  font-size: 13.5px;
+  line-height: 1.55;
+  background: var(--as-glass-3);
+  border: 1px solid var(--as-border-1);
+  border-radius: var(--as-radius-2);
+  padding: 12px 14px;
+  margin: 14px 0;
+  overflow-x: auto;
+}
+
+.wsx__prose pre code {
+  font-size: inherit;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  border-radius: 0;
+}
+
+.wsx__prose ul,
+.wsx__prose ol {
+  margin: 10px 0 14px 20px;
+  padding: 0;
+}
+
+.wsx__prose li {
+  margin: 4px 0;
+}
+
+.wsx__prose .cite {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 4px;
+  background: var(--as-accent-surface-1);
+  border: 1px solid var(--as-accent-border-1);
+  color: var(--as-accent-1);
+  font-family: var(--as-font-mono);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.4px;
+  vertical-align: middle;
+  margin: 0 2px;
+  cursor: pointer;
+  transition:
+    background 150ms ease,
+    border-color 150ms ease;
+}
+
+.wsx__prose .cite:hover {
+  background: rgba(79, 209, 197, 0.22);
+  border-color: var(--as-accent-1);
+}
+
+.wsx__prose .streaming-dot {
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--as-accent-1);
+  animation: wsx-pulse 1.2s ease-in-out infinite;
+  vertical-align: middle;
+  margin-left: 4px;
+}
+
+@keyframes wsx-pulse {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.4;
+    transform: scale(0.85);
+  }
+}
+
+.wsx__answerActions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding-top: 10px;
+  border-top: 1px solid var(--as-border-1);
+}
+
+.wsx__spacer {
+  flex: 1;
+}
+
+.wsx__empty {
+  flex: 1;
+  min-height: 320px;
+  display: grid;
+  place-items: center;
+  padding: 32px;
+}
+
+.wsx__emptyInner {
+  max-width: 46ch;
+  text-align: center;
+  color: var(--as-text-3);
+  font-size: 14px;
+  line-height: 1.55;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+
+.wsx__emptyInner p {
+  margin: 0;
+}
+
+/* ---------- SOURCES ---------- */
+.wsx__sources {
+  margin-top: 8px;
+  padding: 14px 0 0;
+  border-top: 1px solid var(--as-border-1);
+}
+
+.wsx__sourcesHead {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 10px;
+}
+
+.wsx__sourcesTitle {
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--as-text-1);
+  letter-spacing: 0.2px;
+}
+
+.wsx__sourcesHint {
+  font-size: 11px;
+  color: var(--as-text-3);
+}
+
+.wsx__sources ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.wsx__source {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: 10px;
+  align-items: center;
+  width: 100%;
+  padding: 8px 10px;
+  background: var(--as-glass-1);
+  border: 1px solid var(--as-border-1);
+  border-radius: 8px;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    background 150ms ease,
+    border-color 150ms ease;
+}
+
+.wsx__source:hover {
+  background: var(--as-glass-3);
+  border-color: var(--as-border-2);
+}
+
+.wsx__sourceNum {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 22px;
+  height: 22px;
+  padding: 0 5px;
+  border-radius: 4px;
+  background: var(--as-accent-surface-1);
+  border: 1px solid var(--as-accent-border-1);
+  color: var(--as-accent-1);
+  font-family: var(--as-font-mono);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.4px;
+}
+
+.wsx__sourceBody {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.wsx__sourceTitle {
+  font-size: 12.5px;
+  color: var(--as-text-1);
+  font-weight: 500;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.wsx__sourceMeta {
+  font-family: var(--as-font-mono);
+  font-size: 11px;
+  color: var(--as-text-3);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.wsx__sourceScore {
+  font-family: var(--as-font-mono);
+  font-size: 10.5px;
+  color: var(--as-text-3);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ==============================================================
+   TRIAGE RAIL
+   ============================================================== */
+.wsx__rail {
+  min-height: 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding-bottom: 4px;
+}
+
+.wsx__railCard {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 14px;
+  background: var(--as-glass-2);
+  border: 1px solid var(--as-border-1);
+  border-radius: var(--as-radius-2);
+}
+
+.wsx__railTitle {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.3px;
+  text-transform: uppercase;
+  color: var(--as-text-3);
+}
+
+/* ---------- Workflow steps ---------- */
+.wsx__steps {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.wsx__step {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 10px;
+  align-items: center;
+  padding: 7px 8px;
+  border-radius: 6px;
+  color: var(--as-text-3);
+}
+
+.wsx__step.is-active {
+  background: var(--as-accent-surface-1);
+  color: var(--as-text-1);
+}
+
+.wsx__step.is-done {
+  color: var(--as-text-2);
+}
+
+.wsx__stepNum {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: var(--as-glass-3);
+  color: var(--as-text-2);
+  font-family: var(--as-font-mono);
+  font-size: 10.5px;
+  font-weight: 600;
+}
+
+.wsx__step.is-active .wsx__stepNum {
+  background: var(--as-accent-1);
+  color: var(--as-accent-ink);
+}
+
+.wsx__step.is-done .wsx__stepNum {
+  background: var(--as-good-surface);
+  color: var(--as-good-text);
+  border: 1px solid var(--as-good-border);
+}
+
+.wsx__stepText {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+
+.wsx__stepLabel {
+  font-size: 12.5px;
+  font-weight: 500;
+  letter-spacing: 0;
+}
+
+.wsx__stepHint {
+  font-size: 11px;
+  color: var(--as-text-3);
+}
+
+/* ---------- Signals ---------- */
+.wsx__stats {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin: 0;
+}
+
+.wsx__stat {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin: 0;
+}
+
+.wsx__stat dt {
+  font-size: 12px;
+  color: var(--as-text-3);
+}
+
+.wsx__stat dd {
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.wsx__statValue {
+  font-family: var(--as-font-mono);
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--as-text-1);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+
+.wsx__statValue--mono {
+  font-size: 14px;
+  color: var(--as-text-2);
+}
+
+.wsx__statValue.is-good {
+  color: var(--as-good-text);
+}
+
+.wsx__statValue.is-warn {
+  color: var(--as-warn-text);
+}
+
+.wsx__statValue.is-bad {
+  color: var(--as-bad-text);
+}
+
+.wsx__miniBar {
+  width: 80px;
+  height: 3px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.06);
+  position: relative;
+  overflow: hidden;
+}
+
+.wsx__miniBar::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  width: var(--v, 0%);
+  border-radius: 999px;
+  background: linear-gradient(90deg, var(--as-good), var(--as-accent-1));
+}
+
+/* ---------- Alternatives ---------- */
+.wsx__alts {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.wsx__alt {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px;
+  background: var(--as-glass-1);
+  border: 1px solid var(--as-border-1);
+  border-radius: 8px;
+}
+
+.wsx__altHead {
+  font-family: var(--as-font-mono);
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--as-text-3);
+  letter-spacing: 0.6px;
+  text-transform: uppercase;
+}
+
+.wsx__altPreview {
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--as-text-2);
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.wsx__alt .wsx__btn {
+  align-self: flex-start;
+}
+
+/* ---------- Feedback ---------- */
+.wsx__thumbs {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.wsx__thumb {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  background: var(--as-glass-2);
+  border: 1px solid var(--as-border-1);
+  color: var(--as-text-2);
+  cursor: pointer;
+  transition:
+    background 150ms ease,
+    border-color 150ms ease,
+    color 150ms ease;
+}
+
+.wsx__thumb:hover:not(:disabled) {
+  background: var(--as-glass-3);
+  color: var(--as-text-1);
+}
+
+.wsx__thumb:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.wsx__thumb.is-on {
+  background: var(--as-accent-surface-1);
+  border-color: var(--as-accent-border-1);
+  color: var(--as-accent-1);
+}
+
+.wsx__thumb--down.is-on {
+  background: var(--as-bad-surface);
+  border-color: var(--as-bad-border);
+  color: var(--as-bad-text);
+}
+
+.wsx__thumbsHint {
+  font-size: 11px;
+  color: var(--as-text-3);
+  flex: 1;
+}
+
+/* ---------- Context fields ---------- */
+.wsx__fields {
+  display: grid;
+  gap: 10px;
+}
+
+.wsx__field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.wsx__field span {
+  font-size: 11px;
+  color: var(--as-text-3);
+  letter-spacing: 0.2px;
+}
+
+.wsx__field select,
+.wsx__field input {
+  width: 100%;
+  padding: 6px 9px;
+  font: inherit;
+  font-family: var(--as-font-sans);
+  font-size: 12.5px;
+  color: var(--as-text-1);
+  background: var(--as-glass-1);
+  border: 1px solid var(--as-border-1);
+  border-radius: 7px;
+}
+
+.wsx__field select:focus,
+.wsx__field input:focus {
+  outline: none;
+  border-color: var(--as-accent-border-1);
+}
+
+/* ---------- Rail footer ---------- */
+.wsx__railFooter {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  padding: 0 2px;
+  font-family: var(--as-font-mono);
+  font-size: 11px;
+  color: var(--as-text-3);
+}
+
+.wsx__railFooterModel {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* ==============================================================
+   RESPONSIVE
+   ============================================================== */
+@media (max-width: 639px) {
+  .wsx__composer {
+    padding: 12px 16px 12px;
+  }
+
+  .wsx__body {
+    padding: 16px;
+  }
+
+  .wsx__composerFooter {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .wsx__composerRight {
+    justify-content: space-between;
+  }
+
+  .wsx__ticketSummary {
+    font-size: 13px;
+  }
+
+  .wsx__prose {
+    font-size: 15.5px;
+  }
+}
+
+/* ==============================================================
+   ACCESSIBILITY
+   ============================================================== */
+.wsx :focus-visible {
+  outline: 2px solid var(--as-focus);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .wsx__composer {
+    background: var(--as-surface-2);
+    backdrop-filter: none;
+  }
+}
diff --git a/src/test/e2eTauriMock.ts b/src/test/e2eTauriMock.ts
index 9a1d235..85c7d10 100644
--- a/src/test/e2eTauriMock.ts
+++ b/src/test/e2eTauriMock.ts
@@ -42,15 +42,36 @@ function mockSearchResults() {
 }
 
 export function setupE2eTauriMock(): void {
+  // Portfolio-grade seed data: realistic IT-support scenarios, release
+  // lifecycle, and KB gap clusters so live dev captures + day-to-day
+  // dev work against the mock IPC show populated screens.
   const deploymentArtifacts = [
     {
       id: "artifact-1",
       artifact_type: "app_bundle",
-      version: "1.0.0",
+      version: "1.2.0",
       channel: "stable",
-      sha256: "abc123",
+      sha256: "a1f4c9e28b07d73f0c6d5e93b4fa812c9d01ae557832b8e7c0f2b4e6d8a19c",
       is_signed: true,
-      created_at: "2026-02-03T10:00:00Z",
+      created_at: "2026-04-24T11:57:00Z",
+    },
+    {
+      id: "artifact-2",
+      artifact_type: "app_bundle",
+      version: "1.1.4",
+      channel: "stable",
+      sha256: "4e38f2a6d91c8b0e5a27c9d482f3b61c8a7e40b19f25d7c8e6a0a329b4d7c2",
+      is_signed: true,
+      created_at: "2026-04-23T18:04:00Z",
+    },
+    {
+      id: "artifact-3",
+      artifact_type: "app_bundle",
+      version: "1.1.5-rc",
+      channel: "canary",
+      sha256: "7b12c4e0a9f3d851062e74a8c6b0d4e91a5c82d4f9e71c6a3b0e58c7d91f3a",
+      is_signed: true,
+      created_at: "2026-04-24T09:37:00Z",
     },
   ];
 
@@ -60,37 +81,235 @@ export function setupE2eTauriMock(): void {
       target_channel: "stable",
       status: "succeeded",
       preflight_json: JSON.stringify([
-        "Database integrity: pass",
-        "Model status: loaded",
+        "Typecheck + lint gate: pass",
+        "Vitest + UI gate: pass",
+        "Cargo test + backend: pass",
+        "Playwright smoke + visual + a11y: pass",
+        "Bundle + asset budget: under budget",
+        "Notarize + sign .app: accepted",
       ]),
       rollback_available: true,
-      created_at: "2026-02-03T10:00:00Z",
-      completed_at: "2026-02-03T10:01:00Z",
+      created_at: "2026-04-24T12:14:00Z",
+      completed_at: "2026-04-24T12:18:00Z",
+    },
+    {
+      id: "run-2",
+      target_channel: "canary",
+      status: "paused",
+      preflight_json: JSON.stringify([
+        "Retrieval p95 exceeded 80ms budget",
+        "Auto-paused · root cause: index rebuild",
+      ]),
+      rollback_available: true,
+      created_at: "2026-04-24T09:41:00Z",
+      completed_at: null,
+    },
+    {
+      id: "run-3",
+      target_channel: "stable",
+      status: "succeeded",
+      preflight_json: JSON.stringify(["All gates green"]),
+      rollback_available: true,
+      created_at: "2026-04-23T17:58:00Z",
+      completed_at: "2026-04-23T18:04:00Z",
+    },
+    {
+      id: "run-4",
+      target_channel: "stable",
+      status: "rolled_back",
+      preflight_json: JSON.stringify([
+        "Confidence regression (v1.1.3-rc): 0.89 vs baseline 0.92",
+        "Auto-rolled back to v1.1.2",
+      ]),
+      rollback_available: false,
+      created_at: "2026-04-21T14:22:00Z",
+      completed_at: "2026-04-21T14:29:00Z",
     },
   ];
 
   const evalRuns = [
     {
-      id: "eval-1",
-      suite_name: "ops-regression-suite",
-      total_cases: 2,
-      passed_cases: 2,
-      avg_confidence: 0.76,
+      id: "eval-4812",
+      suite_name: "grounding-faithfulness-intent",
+      total_cases: 250,
+      passed_cases: 247,
+      avg_confidence: 0.93,
+      details_json: JSON.stringify({
+        grounding: 0.93,
+        faithfulness: 0.96,
+        intent_f1: 0.914,
+        retrieval_ndcg5: 0.882,
+        latency_p95_ms: 1800,
+        safety_refusals: "25/25",
+      }),
+      created_at: "2026-04-24T12:04:00Z",
+    },
+    {
+      id: "eval-4811",
+      suite_name: "grounding-faithfulness-intent",
+      total_cases: 250,
+      passed_cases: 244,
+      avg_confidence: 0.92,
       details_json: "[]",
-      created_at: "2026-02-03T11:00:00Z",
+      created_at: "2026-04-23T17:52:00Z",
+    },
+    {
+      id: "eval-4810",
+      suite_name: "grounding-faithfulness-intent",
+      total_cases: 250,
+      passed_cases: 241,
+      avg_confidence: 0.9,
+      details_json: "[]",
+      created_at: "2026-04-22T16:10:00Z",
     },
   ];
 
   const triageClusters = [
     {
       id: "cluster-1",
-      cluster_key: "vpn",
-      summary: "2 tickets about vpn",
-      ticket_count: 2,
+      cluster_key: "vpn-office-wifi",
+      summary: "VPN fails on office Wi-Fi only — 14 tickets",
+      ticket_count: 14,
+      tickets_json: JSON.stringify([
+        { id: "AS-4213", summary: "VPN fails only on office Wi-Fi" },
+        { id: "AS-4199", summary: "Tunnel drops when I plug into ethernet" },
+      ]),
+      created_at: "2026-04-24T11:05:00Z",
+    },
+    {
+      id: "cluster-2",
+      cluster_key: "outlook-macos-14-5",
+      summary: "Outlook crash on M3 Macs after macOS 14.5 — 9 tickets",
+      ticket_count: 9,
       tickets_json: JSON.stringify([
-        { id: "INC-1001", summary: "VPN timeout" },
+        { id: "AS-4215", summary: "Outlook keeps crashing on M3 after 14.5" },
+        { id: "AS-4204", summary: "Classic Outlook won't open macOS 14.5" },
       ]),
-      created_at: "2026-02-03T11:05:00Z",
+      created_at: "2026-04-23T16:00:00Z",
+    },
+    {
+      id: "cluster-3",
+      cluster_key: "macos_permissions_drift",
+      summary: "macOS 14 permissions drift after reboot — 7 tickets",
+      ticket_count: 7,
+      tickets_json: JSON.stringify([
+        {
+          id: "AS-4191",
+          summary: "Screen recording permission keeps resetting",
+        },
+        { id: "AS-4188", summary: "tccd keeps forgetting my choice" },
+      ]),
+      created_at: "2026-04-22T09:20:00Z",
+    },
+    {
+      id: "cluster-4",
+      cluster_key: "slack-compliance-export",
+      summary: "Slack workspace export for compliance audit — 5 tickets",
+      ticket_count: 5,
+      tickets_json: JSON.stringify([
+        { id: "AS-4212", summary: "Export Slack workspace archive for audit" },
+      ]),
+      created_at: "2026-04-21T11:15:00Z",
+    },
+    {
+      id: "cluster-5",
+      cluster_key: "touchid-sudo-persistence",
+      summary: "Touch ID sudo not persisting after update — 4 tickets",
+      ticket_count: 4,
+      tickets_json: JSON.stringify([
+        { id: "AS-4210", summary: "Touch ID for sudo on dev-provisioned Mac" },
+      ]),
+      created_at: "2026-04-20T14:42:00Z",
+    },
+  ];
+
+  // Knowledge-base gap candidates — surfaced in the Analytics tab's
+  // "Knowledge Gaps" panel. Shape matches src/types/insights.ts
+  // KbGapCandidate exactly.
+  interface MockKbGap {
+    id: string;
+    query_signature: string;
+    sample_query: string;
+    occurrences: number;
+    low_confidence_count: number;
+    low_rating_count: number;
+    unsupported_claim_events: number;
+    suggested_category: string | null;
+    status: string;
+    resolution_note: string | null;
+    first_seen_at: string;
+    last_seen_at: string;
+  }
+  const kbGapCandidates: MockKbGap[] = [
+    {
+      id: "gap-1",
+      query_signature: "vpn_office_wifi_fails",
+      sample_query: "VPN won't connect at HQ but works on hotspot",
+      occurrences: 14,
+      low_confidence_count: 11,
+      low_rating_count: 3,
+      unsupported_claim_events: 6,
+      suggested_category: "incident",
+      status: "open",
+      resolution_note: null,
+      first_seen_at: "2026-04-10T09:14:00Z",
+      last_seen_at: "2026-04-24T10:28:00Z",
+    },
+    {
+      id: "gap-2",
+      query_signature: "outlook_crash_macos_145",
+      sample_query: "Outlook keeps crashing on macOS 14.5",
+      occurrences: 9,
+      low_confidence_count: 7,
+      low_rating_count: 2,
+      unsupported_claim_events: 4,
+      suggested_category: "incident",
+      status: "open",
+      resolution_note: null,
+      first_seen_at: "2026-04-12T11:02:00Z",
+      last_seen_at: "2026-04-24T08:15:00Z",
+    },
+    {
+      id: "gap-3",
+      query_signature: "macos_permissions_drift",
+      sample_query: "Screen recording permission keeps resetting after reboot",
+      occurrences: 7,
+      low_confidence_count: 5,
+      low_rating_count: 2,
+      unsupported_claim_events: 3,
+      suggested_category: "howto",
+      status: "open",
+      resolution_note: null,
+      first_seen_at: "2026-04-14T13:30:00Z",
+      last_seen_at: "2026-04-23T17:08:00Z",
+    },
+    {
+      id: "gap-4",
+      query_signature: "slack_export_compliance",
+      sample_query: "Export Slack workspace archive for SOC 2 compliance audit",
+      occurrences: 5,
+      low_confidence_count: 4,
+      low_rating_count: 1,
+      unsupported_claim_events: 2,
+      suggested_category: "policy",
+      status: "open",
+      resolution_note: null,
+      first_seen_at: "2026-04-16T10:44:00Z",
+      last_seen_at: "2026-04-22T15:20:00Z",
+    },
+    {
+      id: "gap-5",
+      query_signature: "touchid_sudo_persistence",
+      sample_query: "Touch ID for sudo broken after macOS update",
+      occurrences: 4,
+      low_confidence_count: 3,
+      low_rating_count: 1,
+      unsupported_claim_events: 1,
+      suggested_category: "howto",
+      status: "open",
+      resolution_note: null,
+      first_seen_at: "2026-04-18T14:02:00Z",
+      last_seen_at: "2026-04-23T09:55:00Z",
     },
   ];
 
@@ -643,6 +862,36 @@ export function setupE2eTauriMock(): void {
         }
         case "list_recent_triage_clusters":
           return triageClusters.slice().reverse();
+        case "get_kb_gap_candidates": {
+          const body = (payload ?? {}) as {
+            limit?: number;
+            status?: string | null;
+          };
+          const status = body.status ?? null;
+          const filtered =
+            status != null
+              ? kbGapCandidates.filter((g) => g.status === status)
+              : kbGapCandidates.slice();
+          const limit =
+            typeof body.limit === "number" ? body.limit : filtered.length;
+          return filtered.slice(0, limit);
+        }
+        case "update_kb_gap_status": {
+          const body = (payload ?? {}) as {
+            gapId?: string;
+            status?: string;
+            note?: string | null;
+          };
+          const idx = kbGapCandidates.findIndex((g) => g.id === body.gapId);
+          if (idx >= 0 && body.status) {
+            kbGapCandidates[idx] = {
+              ...kbGapCandidates[idx]!,
+              status: body.status,
+              resolution_note: body.note ?? null,
+            };
+          }
+          return null;
+        }
         case "cluster_tickets_for_triage": {
           const body = payload as {
             tickets?: Array<{ id?: string; summary?: string }>;