From 8668db3ef10fa585d67bc3317976751c87e84fb4 Mon Sep 17 00:00:00 2001
From: Xore <Xore@users.noreply.github.com>
Date: Sun, 13 Sep 2026 14:16:17 +0200
Subject: [PATCH 1/5] =?UTF-8?q?fix(dashboard):=20a11y=20basics=20=E2=80=94?=
 =?UTF-8?q?=20skip=20link,=20toast=20live=20region,=20combobox=20palette,?=
 =?UTF-8?q?=20keyboard-reachable=20workbench=20cards;=20restore=20canonica?=
 =?UTF-8?q?l=20link=20tokens=20(design=20audit=20P3)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../frontend-next/src/components/AppShell.tsx | 29 +++++++++-
 .../src/components/CommandPalette.tsx         |  9 +++-
 .../src/components/LiveToasts.tsx             | 54 ++++++++++++++++---
 .../src/routes/payload-workbench.results.tsx  | 16 +++++-
 branding/templates/web/apiary-theme.css       |  4 +-
 5 files changed, 101 insertions(+), 11 deletions(-)

diff --git a/arcane/home/honeypot-dashboard/frontend-next/src/components/AppShell.tsx b/arcane/home/honeypot-dashboard/frontend-next/src/components/AppShell.tsx
index 0e9c6e160..58a6f56d3 100644
--- a/arcane/home/honeypot-dashboard/frontend-next/src/components/AppShell.tsx
+++ b/arcane/home/honeypot-dashboard/frontend-next/src/components/AppShell.tsx
@@ -107,6 +107,33 @@ export function AppShell({
 
   return (
     <div className={shellClass}>
+      <a
+        href="#main"
+        className="skip-link sr-only"
+        onFocus={(event) => {
+          Object.assign(event.currentTarget.style, {
+            position: 'fixed',
+            top: '8px',
+            left: '8px',
+            width: 'auto',
+            height: 'auto',
+            overflow: 'visible',
+            clip: 'auto',
+            whiteSpace: 'normal',
+            zIndex: 9999,
+            background: 'var(--surface, #fff)',
+            color: 'var(--text, #000)',
+            padding: '8px 16px',
+            borderRadius: '6px',
+            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
+          })
+        }}
+        onBlur={(event) => {
+          event.currentTarget.removeAttribute('style')
+        }}
+      >
+        Skip to main content
+      </a>
       <CommandPalette />
       <ProblemReportButton enabled={showProblemReportButton ?? false} />
       <ConfirmHost />
@@ -120,7 +147,7 @@ export function AppShell({
       {/* Click-to-dismiss backdrop behind the ≤520px drawer — visible only
           while .hp-nav-open is on the shell (theme.css:2143-2158). */}
       <div className="app-shell__nav-scrim" aria-hidden="true" onClick={() => setNavOpen(false)} />
-      <main className="app-main">
+      <main id="main" className="app-main">
         <div className="app-content app-content--wide" data-hp-page-content>
           {children}
         </div>
diff --git a/arcane/home/honeypot-dashboard/frontend-next/src/components/CommandPalette.tsx b/arcane/home/honeypot-dashboard/frontend-next/src/components/CommandPalette.tsx
index a64335df5..9820e7156 100644
--- a/arcane/home/honeypot-dashboard/frontend-next/src/components/CommandPalette.tsx
+++ b/arcane/home/honeypot-dashboard/frontend-next/src/components/CommandPalette.tsx
@@ -197,6 +197,11 @@ export function CommandPalette() {
             rows={1}
             placeholder="Investigate an IP, ASN, payload hash, session, HTTP path or free text…"
             aria-label="Investigate an indicator"
+            role="combobox"
+            aria-expanded={rows.length > 0}
+            aria-controls="command-palette-listbox"
+            aria-activedescendant={activeRow >= 0 ? `command-palette-option-${activeRow}` : undefined}
+            aria-autocomplete="list"
             value={query}
             onChange={(event) => {
               setQuery(event.target.value)
@@ -209,13 +214,15 @@ export function CommandPalette() {
           </button>
         </form>
         {rows.length > 0 ? (
-          <div className="command-palette__results" role="listbox" aria-label="Search results">
+          <div id="command-palette-listbox" className="command-palette__results" role="listbox" aria-label="Search results">
             {rows.map((row, index) => {
               const active = index === activeRow
               return (
                 <button
                   key={`${row.group}:${row.title}:${index}`}
+                  id={`command-palette-option-${index}`}
                   type="button"
+                  tabIndex={-1}
                   className={active ? 'command-palette__row active' : 'command-palette__row'}
                   role="option"
                   aria-selected={active}
diff --git a/arcane/home/honeypot-dashboard/frontend-next/src/components/LiveToasts.tsx b/arcane/home/honeypot-dashboard/frontend-next/src/components/LiveToasts.tsx
index a0d10ca66..06bdbe69a 100644
--- a/arcane/home/honeypot-dashboard/frontend-next/src/components/LiveToasts.tsx
+++ b/arcane/home/honeypot-dashboard/frontend-next/src/components/LiveToasts.tsx
@@ -205,11 +205,38 @@ export function LiveToasts() {
     }
   }, [])
 
+  const timers = useRef<Map<number, ReturnType<typeof setTimeout>>>(new Map())
+  useEffect(() => {
+    return () => {
+      for (const timer of timers.current.values()) clearTimeout(timer)
+    }
+  }, [])
+
+  const dismiss = useCallback((id: number) => {
+    const timer = timers.current.get(id)
+    if (timer) clearTimeout(timer)
+    timers.current.delete(id)
+    setToasts((current) => current.filter((toast) => toast.id !== id))
+  }, [])
+
+  const scheduleDismiss = useCallback((id: number) => {
+    const timer = setTimeout(() => dismiss(id), TOAST_MS)
+    timers.current.set(id, timer)
+  }, [dismiss])
+
+  // Hover/focus pauses the clock so a toast under the pointer or keyboard
+  // focus doesn't vanish mid-read; leaving/blurring restarts a fresh timer.
+  const pauseDismiss = useCallback((id: number) => {
+    const timer = timers.current.get(id)
+    if (timer) clearTimeout(timer)
+    timers.current.delete(id)
+  }, [])
+
   const show = useCallback((condition: Condition, message: string, severity: Severity) => {
     const id = nextId.current++
     setToasts((current) => [...current, { id, key: condition.key, message, severity, to: condition.to }])
-    setTimeout(() => setToasts((current) => current.filter((toast) => toast.id !== id)), TOAST_MS)
-  }, [])
+    scheduleDismiss(id)
+  }, [scheduleDismiss])
 
   const poll = useCallback(async () => {
     let health: SourceHealth | null
@@ -251,11 +278,26 @@ export function LiveToasts() {
 
   if (toasts.length === 0) return null
   return (
-    <div className="hp-toast-stack">
+    <div className="hp-toast-stack" role="status" aria-live="polite" aria-atomic="false">
       {toasts.map((toast) => (
-        <Link key={toast.id} className={`toast hp-toast toast--${toast.severity}`} to={toast.to}>
-          {toast.message}
-        </Link>
+        <div
+          key={toast.id}
+          className={`toast hp-toast toast--${toast.severity}`}
+          onMouseEnter={() => pauseDismiss(toast.id)}
+          onMouseLeave={() => scheduleDismiss(toast.id)}
+          onFocus={() => pauseDismiss(toast.id)}
+          onBlur={() => scheduleDismiss(toast.id)}
+        >
+          <Link to={toast.to}>{toast.message}</Link>
+          <button
+            type="button"
+            aria-label="Dismiss notification"
+            onClick={() => dismiss(toast.id)}
+            style={{ marginLeft: "auto", background: "transparent", border: 0, cursor: "pointer", font: "inherit", lineHeight: 1 }}
+          >
+            ×
+          </button>
+        </div>
       ))}
     </div>
   )
diff --git a/arcane/home/honeypot-dashboard/frontend-next/src/routes/payload-workbench.results.tsx b/arcane/home/honeypot-dashboard/frontend-next/src/routes/payload-workbench.results.tsx
index aedb79e1f..bc58bc280 100644
--- a/arcane/home/honeypot-dashboard/frontend-next/src/routes/payload-workbench.results.tsx
+++ b/arcane/home/honeypot-dashboard/frontend-next/src/routes/payload-workbench.results.tsx
@@ -628,7 +628,21 @@ function RecentRunsCard({ owner, refreshToken }: { owner: string; refreshToken:
         <>
           <div className="project-grid" id="workbench-results-list">
             {runs.map((run) => (
-              <div key={run.id} className="project-card" onClick={() => setSelected(selected === run.id ? null : run.id)}>
+              <div
+                key={run.id}
+                className="project-card"
+                role="button"
+                tabIndex={0}
+                aria-label={`Toggle details for ${run.recipe_name || run.recipe_id || 'one-off'}`}
+                aria-expanded={selected === run.id}
+                onClick={() => setSelected(selected === run.id ? null : run.id)}
+                onKeyDown={(event) => {
+                  if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault()
+                    setSelected(selected === run.id ? null : run.id)
+                  }
+                }}
+              >
                 <div className="project-card__header">
                   <span className="project-card__title">{run.recipe_name || run.recipe_id || 'one-off'}</span>
                   <div className="project-card__badges">
diff --git a/branding/templates/web/apiary-theme.css b/branding/templates/web/apiary-theme.css
index 0e520b918..ade7a463a 100644
--- a/branding/templates/web/apiary-theme.css
+++ b/branding/templates/web/apiary-theme.css
@@ -25,7 +25,7 @@
   --apiary-copper-fill-pressed: #c9684b;
   --apiary-copper-text: #dc8264;
   --apiary-copper-soft: rgba(217, 119, 87, 0.14);
-  --apiary-link: #6da7ec;
+  --apiary-link: #de866b;
   --apiary-success: #79c99e;
   --apiary-warning: #deb36a;
   --apiary-danger: #dc7774;
@@ -64,7 +64,7 @@
   --apiary-copper-fill-pressed: #bd7866;
   --apiary-copper-text: #9f513a;
   --apiary-copper-soft: rgba(199, 101, 72, 0.12);
-  --apiary-link: #2a78d6;
+  --apiary-link: #9b4f3a;
   --apiary-success: #3f8764;
   --apiary-warning: #9b6b25;
   --apiary-danger: #b34f4c;

From 328813c89a02b4cca1c4501012ee2a53418eed37 Mon Sep 17 00:00:00 2001
From: Xore <Xore@users.noreply.github.com>
Date: Sun, 13 Sep 2026 14:18:36 +0200
Subject: [PATCH 2/5] docs(design-lab): preserve the 2026-08-17 design lab
 record (#1763)

Preserve the design decision record (design-notes, claude-pure picks,
palettes, standing rules, playground) from the preserve-design-lab-1763
branch so it lives on main: clickable cards not links, no lazy-loading,
skeleton-first rendering, one page width, SPA feel.
---
 docs/design-lab/README.md                |  71 +++
 docs/design-lab/contrast_scan.js         |  59 ++
 docs/design-lab/design-notes.md          |  80 +++
 docs/design-lab/gen_palettes.py          | 116 ++++
 docs/design-lab/palettes.css             |  46 ++
 docs/design-lab/playground/compare.html  | 127 ++++
 docs/design-lab/playground/elements.html | 700 +++++++++++++++++++++++
 docs/design-lab/playground/index.html    |  86 +++
 docs/design-lab/playground/layouts.html  |   1 +
 docs/design-lab/v5-picks-override.css    | 145 +++++
 10 files changed, 1431 insertions(+)
 create mode 100644 docs/design-lab/README.md
 create mode 100644 docs/design-lab/contrast_scan.js
 create mode 100644 docs/design-lab/design-notes.md
 create mode 100644 docs/design-lab/gen_palettes.py
 create mode 100644 docs/design-lab/palettes.css
 create mode 100644 docs/design-lab/playground/compare.html
 create mode 100644 docs/design-lab/playground/elements.html
 create mode 100644 docs/design-lab/playground/index.html
 create mode 100644 docs/design-lab/playground/layouts.html
 create mode 100644 docs/design-lab/v5-picks-override.css

diff --git a/docs/design-lab/README.md b/docs/design-lab/README.md
new file mode 100644
index 000000000..2b4b50716
--- /dev/null
+++ b/docs/design-lab/README.md
@@ -0,0 +1,71 @@
+# Design lab
+
+The tooling that produced the dashboard's current design and its colour
+palettes. Recovered from a local scratch directory where it was the only
+copy — see #1763.
+
+Nothing here runs in production. It is kept because the stylesheet's own
+comments refer to decisions ("pick 6E, supersedes 6D") whose evidence lived
+nowhere durable, and because the palette generator is the only executable
+record of *why* the themes are the colours they are.
+
+Real hostnames, the internal server address and a captured attacker IP were
+replaced with documentation-range placeholders when these files were moved
+into the public repository. Nothing else was edited.
+
+## Contents
+
+| file | what it is |
+|---|---|
+| `gen_palettes.py` | Generates the accent palettes and auto-tunes each until it clears WCAG AA. Holds the seed hues and the pair table. |
+| `contrast_scan.js` | The scanning half of the same. |
+| `palettes.css` | Generated output — the block that was pasted into `theme.css`. |
+| `playground/` | `elements.html` is the option gallery Xore picked from: per-component variants, choices captured in `localStorage`, with a "copy picks" export. `compare.html` is a drag-split variant comparison. |
+| `v5-picks-override.css` | A named variant as a token-override block layered on the vendored `theme.css` — the authoring pattern the variants were built with. |
+| `design-notes.md` | The raw review log the picks came out of: per-page findings, the reference-app pattern catalog, and the directives collected during review. |
+
+## The two rounds
+
+The pick letters in `theme.css` comments refer to the **second** round. Both
+are recorded in merged PRs:
+
+| round | picks | shipped as |
+|---|---|---|
+| Design refresh | elements `1D/2D/3B/4C/5D/6D/7D/8B/9C/10C`, layouts `OV-B/EV-B/AS-C/RP-C`, shell `11C/12B/13B/14B` | #1573 + `Xore/theme#79` |
+| **Design refresh 2 — "claude-pure"** *(current)* | all-**E** element set, with `scroll:D events:D sources:D reports:D` | #1588 + `Xore/theme#84`–`#89`, pin `68e3f09` |
+
+The live design is the second: floating pill topbar with breadcrumb and
+avatar, focus-column overview, minute-grouped event feed with the normalized
+record pane opening only on row click, profile-card source grid,
+document-style reports studio, circular scroll button, serif empty states
+with line icons.
+
+## Standing rules set during that session
+
+- No lazy-loading. A "view more" button instead.
+- Anything populated from Elasticsearch renders skeletons first, then
+  hydrates.
+- One page width across all pages; the overview is full-width but keeps its
+  focus elements.
+- SPA feel: only the centre content refreshes, never a full browser reload.
+
+## Colour research
+
+The palettes came from a 2026 UI colour-trend pass, not a brand benchmark.
+Its findings were mostly about **grounds and neutrals** — elevated neutrals
+(soft greys, warm sand, stone, muted clay, oatmeal, taupe), zinc/slate as the
+dominant direction for technology products, lime with cool whites for
+dashboards, "avoid grey-on-grey fatigue" in dark mode, and earth tones for a
+sense of long-term value.
+
+Only the accent half was implementable at the time, because a preset could
+reach eight accent tokens. Finishing the other half is #1753.
+
+## Rebuilding the harness
+
+The original lab served variant builds against real Elasticsearch data on
+ports 19201–19205, driven by an env-guarded Go test that booted the dashboard
+with a stubbed OIDC session, a `STATIC_DIR` override and nil write-services
+so the real index stayed read-only. That harness depended on the Go dashboard
+and went away with it. A `frontend-next` equivalent needs the same read-only
+guarantees; scoped separately.
diff --git a/docs/design-lab/contrast_scan.js b/docs/design-lab/contrast_scan.js
new file mode 100644
index 000000000..b484f3a39
--- /dev/null
+++ b/docs/design-lab/contrast_scan.js
@@ -0,0 +1,59 @@
+// WCAG contrast scan for the current page (design lab).
+// Returns unique low-contrast (fg,bg) pairs with a sample selector + text.
+(() => {
+  const lum = (r, g, b) => {
+    const f = v => { v /= 255; return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4); };
+    return 0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b);
+  };
+  const parse = c => {
+    const m = c.match(/rgba?\(([\d.]+),\s*([\d.]+),\s*([\d.]+)(?:,\s*([\d.]+))?\)/);
+    return m ? [+m[1], +m[2], +m[3], m[4] === undefined ? 1 : +m[4]] : null;
+  };
+  const blend = (top, bottom) => {
+    const a = top[3];
+    return [top[0] * a + bottom[0] * (1 - a), top[1] * a + bottom[1] * (1 - a), top[2] * a + bottom[2] * (1 - a), 1];
+  };
+  const effBg = el => {
+    let bg = [32, 32, 31, 1]; // app ground fallback
+    const chain = [];
+    for (let n = el; n && n !== document.documentElement; n = n.parentElement) chain.push(n);
+    chain.reverse().forEach(n => {
+      const c = parse(getComputedStyle(n).backgroundColor);
+      if (c && c[3] > 0) bg = blend(c, bg);
+    });
+    return bg;
+  };
+  const ratio = (a, b) => {
+    const l1 = lum(a[0], a[1], a[2]), l2 = lum(b[0], b[1], b[2]);
+    const [hi, lo] = l1 > l2 ? [l1, l2] : [l2, l1];
+    return (hi + 0.05) / (lo + 0.05);
+  };
+  const seen = new Map();
+  document.querySelectorAll("body *").forEach(el => {
+    if (!el.offsetParent && getComputedStyle(el).position !== "fixed") return;
+    const text = [...el.childNodes].filter(n => n.nodeType === 3).map(n => n.textContent.trim()).join(" ").trim();
+    if (!text) return;
+    const cs = getComputedStyle(el);
+    const fg = parse(cs.color);
+    if (!fg || fg[3] < 0.1) return;
+    const bg = effBg(el);
+    const fgB = fg[3] < 1 ? blend(fg, bg) : fg;
+    const r = ratio(fgB, bg);
+    const size = parseFloat(cs.fontSize);
+    const bold = parseInt(cs.fontWeight, 10) >= 700;
+    const large = size >= 24 || (size >= 18.66 && bold);
+    const threshold = large ? 3 : 4.5;
+    if (r >= threshold) return;
+    const key = cs.color + "|" + JSON.stringify(bg.map(Math.round)) + "|" + (el.className || el.tagName);
+    if (seen.has(key)) return;
+    seen.set(key, {
+      ratio: Math.round(r * 100) / 100,
+      need: threshold,
+      color: cs.color,
+      bg: "rgb(" + bg.slice(0, 3).map(Math.round).join(",") + ")",
+      el: el.tagName.toLowerCase() + (el.className ? "." + String(el.className).trim().split(/\s+/).slice(0, 2).join(".") : ""),
+      text: text.slice(0, 40),
+    });
+  });
+  return [...seen.values()].sort((a, b) => a.ratio - b.ratio).slice(0, 25);
+})()
diff --git a/docs/design-lab/design-notes.md b/docs/design-lab/design-notes.md
new file mode 100644
index 000000000..2dc559161
--- /dev/null
+++ b/docs/design-lab/design-notes.md
@@ -0,0 +1,80 @@
+# APIARY dashboard design review — dashboard.example — 2026-08-17
+## Findings (running)
+- Overview (light): loads fast, authenticated. Heatmap "Activity — last 24h" dominates; lower rows (multipot, conpot-kamstrup, endlessh) appear near-empty/pale — visual weight wasted?
+- Theme toggle: monitor icon top-right (left of LIVE). Dark theme renders correctly on Overview.
+- Overview heatmap card ("Activity — last 24h") is a fixed-height inner scroll container: mouse wheel over it scrolls the card, not the page (scroll trap); inner scrollbar is very subtle. ~13+ sensor rows hidden below the fold of the card.
+- Heatmap uses one global color scale: dionaea (~90k/h) saturates; low-volume sensors (multipot ~240/h, endlessh, galah) render near-empty. Per-sensor normalization would make rows readable.
+- Header alert badge shows "99+" — alert count overflow, arguably alarming-by-default.
+- Overview "Recent events": every row renders its FULL normalized-event JSON article inline (#1447 intentional). On Overview this makes the stream ~18 x ~600px of JSON inside a fixed-height card__scroll; the table header (time/sensor/source ip/port/detail) no longer matches what the eye sees. Suggest: compact rows on Overview stream (detail on /events only), or max-height+inner-scroll on the article, or collapse-with-summary that keeps content in DOM for a11y.
+- Events table: "source ip" column too narrow → IP wraps mid-address (203.0.113.1 / 22); country badge wraps below. Port cell renders ":25" with leading colon — stylistic, looks like a typo when cell wraps.
+- Heatmap card keeps internal scroll position after page scroll; no affordance that rows are hidden above/below inside the card.
+- Sections on Live operations tab: Current activity (heatmap), Attack origins — live geographic view (map), Collection status (Sensor feeds, Protocols probed), ML classification backlog, Live event stream.
+- "Attack origins" Leaflet map (dark): world tiles don't fill card width at zoom 2 — large blank light-gray gutters left/right clash with dark theme; "World" reset control top-right is clipped mid-word; Leaflet attribution overlaps the card's bottom edge. Suggest maxBounds/fitBounds or ocean-colored background + unclipped control.
+- Uniform 340px card__scroll heights force inner scrolling on nearly every Overview card (heatmap 1357px, sensor feeds 1073px, recent events 11018px inside 340px!). Consider taller defaults or per-card sizing.
+- Sensor feeds: count column (accent-colored links) sits far from sensor badge; ACTIVE status + relative time right-aligned — scannable but the wide empty middle reads as a layout gap at 1568px.
+## Threat landscape tab
+- 127.0.0.1 ranks #6 in "Top source IPs" (94k events) — loopback/tunnel artifact polluting top-N; filter or label it.
+- "Network/provider classes" card: 4 short rows in a full-height card next to a packed 340px-scroll "Top autonomous systems" — unbalanced pair.
+- Traffic volume bytes + packets: two stacked near-identical spiky linear charts; raw axis numbers ("25,000,000,000") — humanize units (GB, M pkts), consider log scale or merged dual-axis card.
+- "Protocol-conformance violations": empty state renders "No data yet." twice (chart center + caption below).
+- "Top exploited CVEs": with 2 buckets, first bar is a giant unstyled gray slab ~40% of card width; second bar invisible (zero height rendering); rotated x-labels truncated ("DoublePulsar connection at…"). Needs barMaxWidth, readable labels, non-fallback color.
+## Attacker behavior tab (pre-refresh snapshot)
+- "Top commands" list shows visually duplicate entries: "enable" x2, "linuxshell" x2, "shell" x2, each 623 — likely trailing-whitespace/variant strings rendered identically; dedupe or make the difference visible.
+- Attacker OS donut: callout labels for tiny slices pile up/overlap at the top (7 labels stacked, leader lines crossing); legend below already covers them — drop callouts for <2% slices.
+- "TLS scanner fingerprints (JA4)" bar chart: 15 rotated x-labels are long truncated hashes ("t13i1910q0_9dc949149365…") — unreadable; bars all same gray. Horizontal bars + copyable full hash tooltip would serve better.
+- (paused here: user is redeploying a layout change; Evidence & campaigns tab + light-theme pass still pending)
+## Post-refresh session
+- BUG (repro'd): clicking the theme toggle shortly after first page load does not persist — hp-app.js savePrefs() early-returns while prefState.ready=false, so only localStorage is set; the subsequent server prefs sync ("system") then overwrites it on next load. Once prefs are ready the toggle persists fine (verified r14->r15). Fix: queue the pending patch until ready, or apply localStorage as source-of-truth when server still has defaults.
+- Theme cycle is system -> dark -> light with no visible state indication beyond a title tooltip; 3-state cycle on an icon button is hard to discover (user had to tell me where it is). Consider a small menu or showing the active mode.
+## Evidence & campaigns tab
+- "Suricata alerts" empty state leaks an ops diagnostic ("no alerts — is the VPS eve.json mount at /logs/suricata alive?") while sensor feeds show suricata ACTIVE with 1.4M events — either a data-path regression or wrong empty-state copy; sibling card says "no suricata alerts yet" (inconsistent phrasing).
+- "Correlated campaigns": score column shows 100 for every row (capped) — a column of identical values carries no information; consider hiding or showing the raw components. Header link copy "Every column, every network →" is cryptic.
+## ML anomalies page (dark)
+- Top bar center label reads "Operations" on this page (and page category is DETECTION) — topbar/page title mapping inconsistent (Overview page correctly says "Overview").
+- KPI tile "0 Anomalies, 24h" directly above a long table of OPEN anomalies from 6 days ago — leading stat contradicts what the eye sees; show open-backlog count alongside.
+- Table: explanation column repeats "Statistical outlier (composite score X)" on every row (redundant with score column); timestamps are raw ISO-with-millis ("2026-08-11T12:35:43.666Z") unlike the rest of the app; ~40 identical "acknowledge" buttons with no bulk action; several exact-duplicate rows (same second, same IP) differing only by 0.01 score.
+- Chart legend: "lstm_ae" series color is a dim gray-blue, label+points nearly invisible in dark theme.
+- Filter popover: fine (native selects), no explicit close affordance.
+## LLM analysis / Agent campaigns / Auth-failure events (dark)
+- Topbar center label says "Operations" on all Monitor pages regardless of the page (title mapping bug/inconsistency).
+- Auth-failure events: the ONLY content is a table, yet it's confined to a ~300px card__scroll with a clipped half-row at its edge while the rest of the viewport is blank — single-table pages should let the table grow. Timestamps are raw "2026-08-11T15:23:03.350000+00:00" (microseconds+offset). "0 Failed logins, 24h" tile above a card full of older rows (same pattern as ML anomalies).
+- LLM analysis: pre-search the semantic-search card shows an empty results table with headers + placeholder row — could hide the table until a query runs.
+- Empty states are inconsistent across pages: "No LLM analysis documents yet." / "No campaign has crossed a criticality-rule threshold yet." / "no suricata alerts yet" / "No data yet." — different tones and capitalization.
+## SPA-feel (user goal)
+- Requirement from Xore: the dashboard should feel like ONE page — persistent shell, only center content swaps; never a full browser reload. Today only the #1139/#1141 payload/results family uses fetch-and-swap (hp-dynamic-nav.js DYNAMIC_ROUTES + hp-app.js mountPage/replaceHoneypotPage); every sidebar link is a full navigation. Proposal: generalize the existing mechanism to all shell routes (sidebar, topbar links, back/forward via pushState), with per-page script re-init handled the way hp-dynamic-nav already does for its family.
+## CRITICAL: session decay silently kills all JS features
+- Repro: leave any page open ~5-10 min. Every /api/* fetch starts returning 401 "authentication required" (filter-values, settings/me, stats, whoami). Full-page navigation still works (redirect re-auth), so the operator sees a live-looking page whose filters return nothing, theme/preference saves are dropped (explains #1561's visible symptom), SSE stream dead. After manual reload, everything works again (filter-values returns 20 sensors).
+- Fix directions: on first 401 from any fetch, transparently re-auth (hidden iframe/redirect w/ prompt=none) or show a "session expired — click to renew" toast; make refreshSession actually keep API sessions alive under an open page (the 1-min proactive window may be misconfigured vs Keycloak token lifetimes).
+## Events filter popover
+- Autocomplete (#303) works when session is fresh: click sensor field → real values+counts. Missing on "attack path" and "since" fields (no data-hp-filter-field). Popover styling consistent.
+## User directives collected during review
+- One flawless page: SPA-feel, only center content refreshes (generalize hp-dynamic-nav to all routes).
+- Pages must fill viewport height/width with modest padding; Event explorer card called out as "very small, hard to see".
+- Filter fields should auto-populate on click (works, but broken by session decay; add to attack-path/since too).
+- Nav list should include hidden routes (found in routes.go, not in sidebar): /alerts, /source-health, /search, /sensors, /history, /dead-letters, /canarytokens, /ghidra, /revdeck, /cape, /github-analysis, /sandbox, /payload-workbench, /problem-reports(?), settings modal. Decide which become nav entries (grouped), which stay contextual.
+- Build local variant dashboard w/ real data (homeserver xore@<homeserver>) for side-by-side design choices incl. PDF design.
+## Investigate pages (rest)
+- /ips: solid table; date cols wrap to 2 lines at 1568px; source-ip wraps mid-IP occasionally.
+- /campaigns: worst column-crush — network CIDR wraps mid-value ("169.58.1/70.0/24"), provider wraps "networ/k", dates wrap "2026-/08-16", trailing "ES →" col clipped by card edge; 15 columns is too many for one table. Card shows ~4.5 rows, half viewport dead below.
+- /clusters: fine; "1 sensors:" grammar; investigate→/ES→ twin link columns could be one action menu.
+- /attackers: long skeleton load (~10s+); first/last timestamps wrap mid-CHARACTER across 3 lines ("2026-08-1 / 6T23:17:0 / 1Z"); verdict badge only on some rows; entity ids as bare hex links.
+- /kill-chain: sankey good; "Execution/Initial Access" node labels overlap; ATT&CK coverage grid uses LIGHT-GRAY zebra columns in dark theme (clashes hard); campaign timeline chart is nice.
+- /commands: best data page — horizontal bars readable; sources column crams 5 IPs + "+15"; dates wrap "2026-/08-16".
+- /recordings: clean; consistent.
+## Reports studio
+- Strongest page overall: numbered step tabs, template gallery, sticky action bar, PDF theme toggle pills. Template grid leaves a hole (9 cards in 6-wide grid).
+- Library: generated-report card exposes Delete right next to Download (destructive adjacency, no confirm visible); saved-definitions empty-state fine.
+## PDF (Payload Analysis Report, dark theme)
+- Branded header + stat tiles look good; BUT tile values truncate mid-word with ellipsis ("Windows DLL / pe-d…", "6.380 (not packed-l…") — unacceptable in a print artifact; tiles need wrap/autosize.
+- Copy bug: "Observed window: not available to not available".
+- 3 pages; body typography consistent; consider light-theme default for print friendliness (dark PDF prints badly).
+## Header/menus/dialogs
+- Search overlay: no live suggestions while session decayed; pressing Enter did nothing (silently dead). With fresh session untested-live but code has preview.
+- /alerts: 200 identical-class YARA alerts flood the list (source of the perpetual "99+" badge); per-row acknowledge + "acknowledge all (200)"; consider grouping by rule with counts.
+- /source-health: good page (KPI row, two-column detail, inline footnote). ES health chip "ES yellow" plain-text — could be a status badge.
+- Account menu (Dashboard settings / Account & security / Log out) fine; settings modal is well-structured (search, Personal/Administration groups, Appearance has theme/density/motion/high-contrast/large-text).
+- BUG "Report a problem" dialog: form fields clipped at viewport top, title "Report a problem" renders detached mid-dialog BELOW the form, bottom half of modal empty — broken layout order/positioning.
+- Sensor detail page exists in nav now (new deploy); session ids/timestamps wrap; card 340px again.
+## claude.ai exhaustive audit (patterns catalog, 2026-08-17)
+Pressed/inspected: sidebar collapse (+tooltip w/ Ctrl+B hint), sidebar search → centered overlay (first result preselected, "Enter" chip, relative ages right), Home/Code segmented toggle, + attach menu (grouped, submenu chevrons, shortcut hints, checkmark toggles), model selector (name + one-line description, Effort submenu, "More models" disclosure), incognito ghost icon (distinct darker full-screen mode w/ serif headline + explainer + chrome-less top bar), Recents page (serif title + right toolbar: search/filter/Select/primary), Artifacts (scope text-tabs All/Yours/Shared; illustrated empty state w/ headline+copy+CTA), Scheduled (empty state + dashed divider + TEMPLATE GALLERY: icon/title/desc/schedule chip), Customize → settings modal deep-link (Skills table w/ Browse+Add toolbar), settings modal (search-topped rail, label-left/control-right rows, 3-icon appearance segmented), chat-row hover kebab + section-label hover controls, humane 404 ("…finding this page isn't one of them" + Go back home). Skipped: logout, billing/payment/upgrade, mic/dictation, sending messages.
+Adoption ideas for APIARY (follow-ups): template-gallery empty states (reports/canarytokens/scheduled-reports), witty 404 page, "Enter" hint chip in palette results, tooltip+shortcut hints on icon buttons, hover kebab on table rows (partially done via 14B), settings deep-links from sidebar.
diff --git a/docs/design-lab/gen_palettes.py b/docs/design-lab/gen_palettes.py
new file mode 100644
index 000000000..d2cfc8c1e
--- /dev/null
+++ b/docs/design-lab/gen_palettes.py
@@ -0,0 +1,116 @@
+#!/usr/bin/env python3
+"""Generate AA-validated palette preset CSS for theme.css.
+
+Per palette x theme(dark/light) we need:
+  accent, accent-hover, accent-pressed, accent-soft,
+  accent-text-on-soft, text-on-accent, text-link, text-link-hover
+Checks (WCAG AA, >=4.5:1 for text):
+  accent-text-on-soft vs surface-1        (badge/soft ink)
+  text-link           vs surface-1        (links on cards)
+  text-on-accent      vs accent           (primary button ink)
+Auto-tunes lightness until every check passes.
+"""
+import colorsys
+
+DARK_S1 = "#2c2c2a"
+LIGHT_S1 = "#f4f2ed"
+
+def hex2rgb(h):
+    h = h.lstrip("#")
+    return tuple(int(h[i:i+2], 16) for i in (0, 2, 4))
+
+def rgb2hex(r, g, b):
+    return "#%02x%02x%02x" % (round(r), round(g), round(b))
+
+def rel_lum(rgb):
+    def f(c):
+        c = c / 255
+        return c / 12.92 if c <= 0.04045 else ((c + 0.055) / 1.055) ** 2.4
+    r, g, b = (f(c) for c in rgb)
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b
+
+def contrast(a, b):
+    la, lb = rel_lum(hex2rgb(a)), rel_lum(hex2rgb(b))
+    hi, lo = max(la, lb), min(la, lb)
+    return (hi + 0.05) / (lo + 0.05)
+
+def adjust_l(h, dl):
+    r, g, b = hex2rgb(h)
+    hh, ll, ss = colorsys.rgb_to_hls(r/255, g/255, b/255)
+    ll = min(1, max(0, ll + dl))
+    r, g, b = colorsys.hls_to_rgb(hh, ll, ss)
+    return rgb2hex(r*255, g*255, b*255)
+
+def tune(color, bg, target=4.5, direction=+1, max_steps=60):
+    c = color
+    for _ in range(max_steps):
+        if contrast(c, bg) >= target:
+            return c
+        c = adjust_l(c, 0.015 * direction)
+    return c
+
+def ink_for(accent):
+    # pick near-black or near-white ink for text-on-accent, whichever passes better
+    dark_ink = tune("#1c1613", accent, direction=-1)
+    light_ink = tune("#ffffff", accent, direction=+1)
+    cd, cl = contrast(dark_ink, accent), contrast(light_ink, accent)
+    return dark_ink if cd >= cl else light_ink
+
+# name -> (dark accent, light accent) seed hues
+PALETTES = {
+    "slate":    ("#8aa2c0", "#44618a"),
+    "ocean":    ("#55a7d8", "#1f6fa8"),
+    "sage":     ("#8fb27b", "#4d7a42"),
+    "lavender": ("#ab93e3", "#6d4fc4"),
+    "lime":     ("#b3cf5a", "#5f7d1f"),
+    "amber":    ("#d9a842", "#96690e"),
+    "rose":     ("#d98298", "#b04a66"),
+    "neon":     ("#3ee6c8", "#0f8f7a"),
+}
+
+def block(name, accent, s1, theme):
+    # soft ink must clear AA on surface-1; links likewise
+    soft_ink = tune(accent, s1, direction=(+1 if theme == "dark" else -1))
+    link = tune(accent, s1, direction=(+1 if theme == "dark" else -1))
+    link_hover = adjust_l(link, +0.06 if theme == "dark" else -0.06)
+    hover = adjust_l(accent, +0.05 if theme == "dark" else -0.04)
+    pressed = adjust_l(accent, -0.05 if theme == "dark" else -0.08)
+    r, g, b = hex2rgb(accent)
+    soft = f"rgba({r}, {g}, {b}, {0.16 if theme == 'dark' else 0.13})"
+    ink = ink_for(accent)
+    toks = [
+        ("--accent", accent), ("--accent-hover", hover), ("--accent-pressed", pressed),
+        ("--accent-soft", soft), ("--accent-text-on-soft", soft_ink),
+        ("--text-on-accent", ink), ("--text-link", link), ("--text-link-hover", link_hover),
+    ]
+    body = " ".join(f"{k}: {v};" for k, v in toks)
+    # report
+    checks = {
+        "soft-ink": contrast(soft_ink, s1),
+        "link": contrast(link, s1),
+        "btn-ink": contrast(ink, accent),
+    }
+    assert all(v >= 4.5 for v in checks.values()), (name, theme, checks)
+    return body, checks
+
+out = []
+report = []
+out.append("/* ── Palette presets (per Xore): one-click accent palettes, selected in")
+out.append("   Settings → Appearance and applied as data-hp-palette on <html>.")
+out.append('   "claude" is the default token set above (no attribute). Every pair')
+out.append("   below is WCAG-AA validated (soft ink + links vs surface-1, button")
+out.append("   ink vs accent) in BOTH themes by scripts in the APIARY design lab;")
+out.append("   status colors stay semantic across palettes. */")
+for name, (dark, light) in PALETTES.items():
+    d_body, d_checks = block(name, dark, DARK_S1, "dark")
+    l_body, l_checks = block(name, light, LIGHT_S1, "light")
+    out.append(f':root[data-hp-palette="{name}"] {{ {d_body} }}')
+    out.append(f'[data-theme="light"][data-hp-palette="{name}"] {{ {l_body} }}')
+    out.append("@media (prefers-color-scheme: light) {")
+    out.append(f'  :root:not([data-theme])[data-hp-palette="{name}"] {{ {l_body} }}')
+    out.append("}")
+    report.append(f"{name}: dark {d_checks} | light {l_checks}")
+
+open("/home/adminuser/.claude/jobs/e78c0b17/tmp/palettes.css", "w").write("\n".join(out) + "\n")
+print("\n".join(report))
+print("CSS written")
diff --git a/docs/design-lab/palettes.css b/docs/design-lab/palettes.css
new file mode 100644
index 000000000..9b5748403
--- /dev/null
+++ b/docs/design-lab/palettes.css
@@ -0,0 +1,46 @@
+/* ── Palette presets (per Xore): one-click accent palettes, selected in
+   Settings → Appearance and applied as data-hp-palette on <html>.
+   "claude" is the default token set above (no attribute). Every pair
+   below is WCAG-AA validated (soft ink + links vs surface-1, button
+   ink vs accent) in BOTH themes by scripts in the APIARY design lab;
+   status colors stay semantic across palettes. */
+:root[data-hp-palette="slate"] { --accent: #8aa2c0; --accent-hover: #9bafc9; --accent-pressed: #7995b7; --accent-soft: rgba(138, 162, 192, 0.16); --accent-text-on-soft: #8aa2c0; --text-on-accent: #1c1613; --text-link: #8aa2c0; --text-link-hover: #9eb2cb; }
+[data-theme="light"][data-hp-palette="slate"] { --accent: #44618a; --accent-hover: #3d577c; --accent-pressed: #374e6f; --accent-soft: rgba(68, 97, 138, 0.13); --accent-text-on-soft: #44618a; --text-on-accent: #ffffff; --text-link: #44618a; --text-link-hover: #3a5376; }
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme])[data-hp-palette="slate"] { --accent: #44618a; --accent-hover: #3d577c; --accent-pressed: #374e6f; --accent-soft: rgba(68, 97, 138, 0.13); --accent-text-on-soft: #44618a; --text-on-accent: #ffffff; --text-link: #44618a; --text-link-hover: #3a5376; }
+}
+:root[data-hp-palette="ocean"] { --accent: #55a7d8; --accent-hover: #6ab2dd; --accent-pressed: #409cd3; --accent-soft: rgba(85, 167, 216, 0.16); --accent-text-on-soft: #55a7d8; --text-on-accent: #1c1613; --text-link: #55a7d8; --text-link-hover: #6eb4de; }
+[data-theme="light"][data-hp-palette="ocean"] { --accent: #1f6fa8; --accent-hover: #1c6497; --accent-pressed: #195886; --accent-soft: rgba(31, 111, 168, 0.13); --accent-text-on-soft: #1f6fa8; --text-on-accent: #ffffff; --text-link: #1f6fa8; --text-link-hover: #1a5e8e; }
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme])[data-hp-palette="ocean"] { --accent: #1f6fa8; --accent-hover: #1c6497; --accent-pressed: #195886; --accent-soft: rgba(31, 111, 168, 0.13); --accent-text-on-soft: #1f6fa8; --text-on-accent: #ffffff; --text-link: #1f6fa8; --text-link-hover: #1a5e8e; }
+}
+:root[data-hp-palette="sage"] { --accent: #8fb27b; --accent-hover: #9dbb8b; --accent-pressed: #81a96b; --accent-soft: rgba(143, 178, 123, 0.16); --accent-text-on-soft: #8fb27b; --text-on-accent: #1c1613; --text-link: #8fb27b; --text-link-hover: #9fbd8e; }
+[data-theme="light"][data-hp-palette="sage"] { --accent: #4d7a42; --accent-hover: #456d3b; --accent-pressed: #3c6034; --accent-soft: rgba(77, 122, 66, 0.13); --accent-text-on-soft: #4a753f; --text-on-accent: #ffffff; --text-link: #4a753f; --text-link-hover: #3d6134; }
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme])[data-hp-palette="sage"] { --accent: #4d7a42; --accent-hover: #456d3b; --accent-pressed: #3c6034; --accent-soft: rgba(77, 122, 66, 0.13); --accent-text-on-soft: #4a753f; --text-on-accent: #ffffff; --text-link: #4a753f; --text-link-hover: #3d6134; }
+}
+:root[data-hp-palette="lavender"] { --accent: #ab93e3; --accent-hover: #bba7e8; --accent-pressed: #9b7fde; --accent-soft: rgba(171, 147, 227, 0.16); --accent-text-on-soft: #ab93e3; --text-on-accent: #1c1613; --text-link: #ab93e3; --text-link-hover: #beabe9; }
+[data-theme="light"][data-hp-palette="lavender"] { --accent: #6d4fc4; --accent-hover: #6040bf; --accent-pressed: #593baf; --accent-soft: rgba(109, 79, 196, 0.13); --accent-text-on-soft: #6d4fc4; --text-on-accent: #ffffff; --text-link: #6d4fc4; --text-link-hover: #5d3db7; }
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme])[data-hp-palette="lavender"] { --accent: #6d4fc4; --accent-hover: #6040bf; --accent-pressed: #593baf; --accent-soft: rgba(109, 79, 196, 0.13); --accent-text-on-soft: #6d4fc4; --text-on-accent: #ffffff; --text-link: #6d4fc4; --text-link-hover: #5d3db7; }
+}
+:root[data-hp-palette="lime"] { --accent: #b3cf5a; --accent-hover: #bcd56e; --accent-pressed: #aac946; --accent-soft: rgba(179, 207, 90, 0.16); --accent-text-on-soft: #b3cf5a; --text-on-accent: #1c1613; --text-link: #b3cf5a; --text-link-hover: #bed672; }
+[data-theme="light"][data-hp-palette="lime"] { --accent: #5f7d1f; --accent-hover: #536d1b; --accent-pressed: #465c17; --accent-soft: rgba(95, 125, 31, 0.13); --accent-text-on-soft: #5a771d; --text-on-accent: #ffffff; --text-link: #5a771d; --text-link-hover: #475e17; }
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme])[data-hp-palette="lime"] { --accent: #5f7d1f; --accent-hover: #536d1b; --accent-pressed: #465c17; --accent-soft: rgba(95, 125, 31, 0.13); --accent-text-on-soft: #5a771d; --text-on-accent: #ffffff; --text-link: #5a771d; --text-link-hover: #475e17; }
+}
+:root[data-hp-palette="amber"] { --accent: #d9a842; --accent-hover: #ddb257; --accent-pressed: #d59e2d; --accent-soft: rgba(217, 168, 66, 0.16); --accent-text-on-soft: #d9a842; --text-on-accent: #1c1613; --text-link: #d9a842; --text-link-hover: #deb45b; }
+[data-theme="light"][data-hp-palette="amber"] { --accent: #96690e; --accent-hover: #835c0c; --accent-pressed: #714f0b; --accent-soft: rgba(150, 105, 14, 0.13); --accent-text-on-soft: #8f640d; --text-on-accent: #ffffff; --text-link: #8f640d; --text-link-hover: #73500a; }
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme])[data-hp-palette="amber"] { --accent: #96690e; --accent-hover: #835c0c; --accent-pressed: #714f0b; --accent-soft: rgba(150, 105, 14, 0.13); --accent-text-on-soft: #8f640d; --text-on-accent: #ffffff; --text-link: #8f640d; --text-link-hover: #73500a; }
+}
+:root[data-hp-palette="rose"] { --accent: #d98298; --accent-hover: #df96a8; --accent-pressed: #d36e88; --accent-soft: rgba(217, 130, 152, 0.16); --accent-text-on-soft: #d98298; --text-on-accent: #1c1613; --text-link: #d98298; --text-link-hover: #e099ab; }
+[data-theme="light"][data-hp-palette="rose"] { --accent: #b04a66; --accent-hover: #a2445e; --accent-pressed: #933e55; --accent-soft: rgba(176, 74, 102, 0.13); --accent-text-on-soft: #b04a66; --text-on-accent: #ffffff; --text-link: #b04a66; --text-link-hover: #9a415a; }
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme])[data-hp-palette="rose"] { --accent: #b04a66; --accent-hover: #a2445e; --accent-pressed: #933e55; --accent-soft: rgba(176, 74, 102, 0.13); --accent-text-on-soft: #b04a66; --text-on-accent: #ffffff; --text-link: #b04a66; --text-link-hover: #9a415a; }
+}
+:root[data-hp-palette="neon"] { --accent: #3ee6c8; --accent-hover: #55e9ce; --accent-pressed: #27e3c2; --accent-soft: rgba(62, 230, 200, 0.16); --accent-text-on-soft: #3ee6c8; --text-on-accent: #1c1613; --text-link: #3ee6c8; --text-link-hover: #59ead0; }
+[data-theme="light"][data-hp-palette="neon"] { --accent: #0f8f7a; --accent-hover: #0d7d6a; --accent-pressed: #0b6a5a; --accent-soft: rgba(15, 143, 122, 0.13); --accent-text-on-soft: #0c7a68; --text-on-accent: #171210; --text-link: #0c7a68; --text-link-hover: #095e50; }
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme])[data-hp-palette="neon"] { --accent: #0f8f7a; --accent-hover: #0d7d6a; --accent-pressed: #0b6a5a; --accent-soft: rgba(15, 143, 122, 0.13); --accent-text-on-soft: #0c7a68; --text-on-accent: #171210; --text-link: #0c7a68; --text-link-hover: #095e50; }
+}
diff --git a/docs/design-lab/playground/compare.html b/docs/design-lab/playground/compare.html
new file mode 100644
index 000000000..080f287c8
--- /dev/null
+++ b/docs/design-lab/playground/compare.html
@@ -0,0 +1,127 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Split compare — APIARY Design Lab</title>
+<style>
+  :root{--bg:#20201f;--text:#e9e6df;--muted:#a8a49c;--accent:#d97757;--border:rgba(255,255,255,.12);--surface:#2c2c2a}
+  *{box-sizing:border-box}
+  body{margin:0;background:var(--bg);color:var(--text);font:13px "Fira Sans",system-ui,sans-serif;height:100vh;display:flex;flex-direction:column;overflow:hidden}
+  header{display:flex;gap:12px;align-items:center;padding:8px 14px;border-bottom:1px solid var(--border);flex-wrap:wrap}
+  header a{color:var(--accent);text-decoration:none}
+  header .lbl{color:var(--muted)}
+  select,input{background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:4px 8px;font:inherit}
+  input#path{width:200px}
+  button{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:4px 10px;cursor:pointer;font:inherit}
+  label.sync{display:flex;gap:5px;align-items:center;color:var(--muted);cursor:pointer}
+  #stage{position:relative;flex:1;overflow:hidden}
+  iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
+  #rightWrap{position:absolute;inset:0;overflow:hidden}
+  #divider{position:absolute;top:0;bottom:0;width:3px;background:var(--accent);cursor:ew-resize;z-index:10;box-shadow:0 0 8px rgba(0,0,0,.6)}
+  #divider::after{content:"◂ ▸";position:absolute;top:12px;left:50%;transform:translateX(-50%);background:var(--accent);color:#211a17;font-size:11px;border-radius:999px;padding:2px 8px;white-space:nowrap}
+  .badge{position:absolute;top:10px;z-index:9;background:rgba(0,0,0,.65);border-radius:999px;padding:3px 12px;font-size:12px;pointer-events:none}
+  #lb{left:12px}#rb{right:12px}
+</style>
+</head>
+<body>
+<header>
+  <a href="index.html">← lab</a>
+  <span class="lbl">left</span><select id="selL"></select>
+  <span class="lbl">right</span><select id="selR"></select>
+  <button id="swap" title="swap sides">⇄</button>
+  <span class="lbl">path</span><input id="path" value="/">
+  <button id="go">go</button>
+  <label class="sync"><input type="checkbox" id="sync" checked>sync scroll + nav</label>
+  <span class="lbl" id="info"></span>
+</header>
+<div id="stage">
+  <iframe id="left"></iframe>
+  <div id="rightWrap"><iframe id="right"></iframe></div>
+  <div id="divider"></div>
+  <span class="badge" id="lb"></span>
+  <span class="badge" id="rb"></span>
+</div>
+<script>
+const VARIANTS = [
+  [19201, 'base (stock)'],
+  [19202, 'v1 full-bleed'],
+  [19203, 'v2 soft'],
+  [19204, 'v3 dense'],
+  [19205, 'v4 claude'],
+  [19206, 'v5 your picks'],
+];
+const q = new URLSearchParams(location.search);
+let L = +(q.get('l') || 19201), R = +(q.get('r') || 19202);
+let path = q.get('path') || '/';
+
+const selL = document.getElementById('selL'), selR = document.getElementById('selR');
+for (const [port, name] of VARIANTS) {
+  selL.add(new Option(name, port));
+  selR.add(new Option(name, port));
+}
+selL.value = L; selR.value = R;
+
+const stage = document.getElementById('stage'), wrap = document.getElementById('rightWrap'),
+      div = document.getElementById('divider'), left = document.getElementById('left'),
+      right = document.getElementById('right'), pathIn = document.getElementById('path'),
+      syncBox = document.getElementById('sync');
+const name = p => (VARIANTS.find(v => v[0] === +p) || [p, p])[1];
+
+function refreshLabels() {
+  document.getElementById('lb').textContent = name(L);
+  document.getElementById('rb').textContent = name(R);
+  document.getElementById('info').textContent = `${name(L)} ⟷ ${name(R)}`;
+  history.replaceState(null, '', `compare.html?l=${L}&r=${R}&path=${encodeURIComponent(path)}`);
+}
+function load(side) {
+  if (!side || side === 'L') left.src = `http://127.0.0.1:${L}${path}`;
+  if (!side || side === 'R') right.src = `http://127.0.0.1:${R}${path}`;
+  pathIn.value = path;
+  refreshLabels();
+}
+
+selL.onchange = () => { L = +selL.value; load('L'); };
+selR.onchange = () => { R = +selR.value; load('R'); };
+document.getElementById('swap').onclick = () => { [L, R] = [R, L]; selL.value = L; selR.value = R; load(); };
+document.getElementById('go').onclick = () => { path = pathIn.value || '/'; load(); };
+pathIn.addEventListener('keydown', e => { if (e.key === 'Enter') { path = pathIn.value || '/'; load(); } });
+
+/* ── postMessage sync with the hp-app.js lab snippet inside each frame ── */
+const winOf = f => { try { return f.contentWindow; } catch { return null; } };
+const other = src => src === winOf(left) ? winOf(right) : (src === winOf(right) ? winOf(left) : null);
+let lastGoto = 0;
+addEventListener('message', e => {
+  const d = e.data || {};
+  if (!d.hpLab || !syncBox.checked) return;
+  const peer = other(e.source);
+  if (!peer) return;
+  if (d.type === 'scroll') {
+    peer.postMessage({hpLab: 1, type: 'setScroll', frac: d.frac}, '*');
+  } else if (d.type === 'nav') {
+    if (d.path !== path) {
+      path = d.path; pathIn.value = path; refreshLabels();
+      // debounce: the peer's own load will echo a nav message; only forward fresh user navigation
+      if (Date.now() - lastGoto > 400) {
+        lastGoto = Date.now();
+        peer.postMessage({hpLab: 1, type: 'goto', path}, '*');
+      }
+    }
+  }
+});
+
+/* ── draggable clip divider ── */
+function setSplit(x) {
+  const r = stage.getBoundingClientRect();
+  const pct = Math.min(.97, Math.max(.03, (x - r.left) / r.width));
+  div.style.left = `calc(${pct * 100}% - 1.5px)`;
+  wrap.style.clipPath = `inset(0 0 0 ${pct * 100}%)`;
+}
+let drag = false;
+div.addEventListener('pointerdown', e => { drag = true; div.setPointerCapture(e.pointerId); });
+addEventListener('pointermove', e => { if (drag) setSplit(e.clientX); });
+addEventListener('pointerup', () => drag = false);
+setSplit(stage.getBoundingClientRect().width / 2 + stage.getBoundingClientRect().left);
+load();
+</script>
+</body>
+</html>
diff --git a/docs/design-lab/playground/elements.html b/docs/design-lab/playground/elements.html
new file mode 100644
index 000000000..33c118dde
--- /dev/null
+++ b/docs/design-lab/playground/elements.html
@@ -0,0 +1,700 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Design Picker — APIARY Design Lab</title>
+<link rel="stylesheet" href="http://127.0.0.1:19201/static/theme.css">
+<style>
+  body{margin:0;background:var(--app-bg,#20201f);color:var(--text-primary,#e9e6df);font-family:var(--font-sans,sans-serif);padding:30px 34px}
+  .lab-head h1{margin:0 0 4px;font-size:24px}
+  .lab-head h1 em{color:var(--accent);font-style:normal}
+  .lab-head p{color:var(--text-secondary);margin:0 0 10px}
+  .lab-head a{color:var(--text-link)}
+  #picks{position:sticky;top:0;z-index:50;background:var(--surface-2);border:1px solid var(--border-strong);border-radius:12px;padding:10px 16px;margin:14px 0 26px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
+  #picks b{color:var(--accent)}
+  #picks button{cursor:pointer}
+  section.el{margin:0 0 40px}
+  section.el>h2{font-size:14px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-secondary);border-bottom:1px solid var(--border-subtle);padding-bottom:6px;margin:0 0 14px}
+  .opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px}
+  .opt{border:1px solid var(--border-subtle);border-radius:14px;background:var(--surface-0);padding:14px;cursor:pointer;position:relative;transition:border-color .15s}
+  .opt:hover{border-color:var(--border-strong)}
+  .opt.picked{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
+  .opt .tag{position:absolute;top:10px;right:12px;font-size:11px;color:var(--text-muted)}
+  .opt h3{margin:0 0 2px;font-size:13.5px;padding-right:86px}
+  .opt p.why{color:var(--text-muted);font-size:12px;margin:0 0 12px;padding-right:86px}
+  .demo{pointer-events:none}
+  .demo .card{margin-bottom:0}
+  /* ————— element option styles (scoped) ————— */
+  /* cards */
+  .cardB .card{border-color:transparent;box-shadow:0 1px 2px rgba(0,0,0,.14),0 10px 32px rgba(0,0,0,.18);border-radius:18px}
+  .cardC .card{border-top:2px solid var(--accent);border-radius:10px}
+  .cardD .card{padding:0;overflow:hidden}
+  .cardD .card h2{margin:0;padding:12px 18px;background:var(--surface-2);border-bottom:1px solid var(--border-subtle);font-size:13px}
+  .cardD .card .inner{padding:16px 18px}
+  /* skeletons */
+  @keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
+  @keyframes skpulse{0%,100%{opacity:.45}50%{opacity:1}}
+  .skB .skeleton-line{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 37%,var(--surface-2) 63%);background-size:800px 100%;animation:shimmer 1.4s linear infinite}
+  .skC .skeleton-line{animation:skpulse 1.6s ease-in-out infinite}
+  .skD .ghost-tile{height:54px;border-radius:10px;background:var(--surface-2);animation:skpulse 1.6s ease-in-out infinite}
+  .skD .ghost-row{height:12px;border-radius:6px;background:var(--surface-2);margin:8px 0;animation:skpulse 1.6s ease-in-out infinite}
+  /* KPI tiles */
+  .kpi{border:1px solid var(--border-subtle);border-radius:12px;padding:14px 18px;background:var(--surface-1)}
+  .kpi .num{font-size:26px;font-weight:700}
+  .kpi .lbl{color:var(--text-secondary);font-size:12px}
+  .kpiB .kpi .delta{display:inline-block;margin-left:8px;font-size:11px;border-radius:999px;padding:1px 8px;background:var(--success-soft);color:var(--success-text-on-soft);vertical-align:4px}
+  .kpiB .spark{margin-top:6px;height:22px;display:flex;align-items:flex-end;gap:2px}
+  .kpiB .spark i{flex:1;background:var(--accent-soft);border-radius:2px 2px 0 0}
+  .kpiB .spark i:nth-child(7){background:var(--accent)}
+  .kpiC .kpi{display:flex;align-items:center;gap:14px}
+  .kpiC .ic{width:38px;height:38px;border-radius:10px;background:var(--accent-soft);display:grid;place-items:center;color:var(--accent-text-on-soft);font-size:18px}
+  .kpiD .kpi{padding:10px 14px;border-radius:6px}
+  .kpiD .kpi .lbl{text-transform:uppercase;letter-spacing:.08em;font-size:10px;order:-1}
+  .kpiD .kpi .num{font-family:var(--font-mono);font-size:22px}
+  .kpiD .kpi{display:flex;flex-direction:column}
+  /* tables */
+  .tblB .data-table tbody tr:nth-child(odd) td{background:var(--surface-0)}
+  .tblC .data-table{border-collapse:separate;border-spacing:0 8px}
+  .tblC .data-table td{background:var(--surface-2);border:0;padding:10px 12px}
+  .tblC .data-table td:first-child{border-radius:10px 0 0 10px}
+  .tblC .data-table td:last-child{border-radius:0 10px 10px 0}
+  .tblC .data-table th{border:0}
+  .tblD .data-table td{font-family:var(--font-mono);font-size:12px;padding:4px 8px;border-right:1px solid var(--border-subtle)}
+  .tblD .data-table td:last-child{border-right:0}
+  /* badges */
+  .bdgB .badge{background:transparent;border:1px solid currentColor}
+  .bdgC .badge{background:transparent;padding-left:0}
+  .bdgC .badge::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-right:6px}
+  .bdgD .badge--info{background:var(--info);color:#14202b}
+  .bdgD .badge--success{background:var(--success);color:#0f2418}
+  .bdgD .badge--warning{background:var(--warning);color:#2a2008}
+  .bdgD .badge--danger{background:var(--danger);color:#2b1413}
+  /* buttons */
+  .btn-demo button{margin-right:8px}
+  .btnB button{border-radius:999px}
+  .btnC button{border-radius:5px;padding:4px 12px;font-size:12.5px}
+  .btnD button{background:transparent;border-color:transparent}
+  .btnD button:hover{background:var(--surface-2)}
+  .btnD button.primary{background:transparent;color:var(--accent);border:1px solid var(--accent)}
+  /* tabs */
+  .tabs{display:flex;gap:4px}
+  .tabsA .tabs{background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:12px;padding:4px}
+  .tabsA .t{padding:5px 14px;border-radius:9px;font-size:13px;color:var(--text-secondary)}
+  .tabsA .t.on{background:var(--accent);color:var(--text-on-accent);font-weight:600}
+  .tabsB .tabs{border-bottom:1px solid var(--border-subtle);gap:18px}
+  .tabsB .t{padding:7px 2px;font-size:13px;color:var(--text-secondary);border-bottom:2px solid transparent}
+  .tabsB .t.on{color:var(--text-primary);border-bottom-color:var(--accent)}
+  .tabsC .tabs{border:1px solid var(--border-strong);border-radius:9px;overflow:hidden;gap:0}
+  .tabsC .t{padding:6px 16px;font-size:12.5px;color:var(--text-secondary);border-right:1px solid var(--border-strong)}
+  .tabsC .t:last-child{border-right:0}
+  .tabsC .t.on{background:var(--surface-3);color:var(--text-primary)}
+  .tabsD .tabs{flex-direction:column;width:170px;gap:2px}
+  .tabsD .t{padding:6px 12px;border-radius:8px;font-size:13px;color:var(--text-secondary);border-left:2px solid transparent}
+  .tabsD .t.on{background:var(--surface-1);color:var(--text-primary);border-left-color:var(--accent);border-radius:0 8px 8px 0}
+  /* empty states */
+  .empty-demo{min-height:110px;display:grid;place-items:center;border-radius:10px}
+  .empA .empty-demo{font-family:var(--font-mono);font-size:13px;color:var(--text-muted)}
+  .empB .empty-demo{text-align:center}
+  .empB .ic{font-size:22px;opacity:.6}
+  .empB b{display:block;margin:6px 0 2px}
+  .empB small{color:var(--text-muted)}
+  .empB .act{margin-top:10px;display:inline-block;border:1px solid var(--border-strong);border-radius:999px;padding:4px 14px;font-size:12.5px}
+  .empC .empty-demo{border:1.5px dashed var(--border-strong);color:var(--text-muted);font-size:13px}
+  .empD .empty-demo{min-height:0;padding:8px 12px;background:var(--info-soft);color:var(--info-text-on-soft);border-radius:8px;font-size:12.5px;place-items:start}
+  /* scroll affordances */
+  .scr{height:120px;overflow:auto;border:1px solid var(--border-subtle);border-radius:10px;padding:0 12px}
+  .scr div{padding:8px 0;border-bottom:1px solid var(--border-subtle);font-size:13px;color:var(--text-secondary)}
+  .scrB .scr{background:
+    linear-gradient(var(--surface-1) 33%,rgba(0,0,0,0)) top/100% 24px no-repeat local,
+    linear-gradient(rgba(0,0,0,0),var(--surface-1) 66%) bottom/100% 24px no-repeat local,
+    radial-gradient(farthest-side at 50% 0,rgba(0,0,0,.3),rgba(0,0,0,0)) top/100% 10px no-repeat scroll,
+    radial-gradient(farthest-side at 50% 100%,rgba(0,0,0,.3),rgba(0,0,0,0)) bottom/100% 10px no-repeat scroll}
+  .scrC .wrapx{position:relative}
+  .scrC .more{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);background:var(--surface-3);border:1px solid var(--border-strong);border-radius:999px;font-size:11px;padding:2px 10px;color:var(--text-secondary)}
+  /* nav items */
+  .nav-demo{width:190px;display:flex;flex-direction:column;gap:2px}
+  .nav-demo a{display:flex;align-items:center;gap:9px;padding:6px 10px;font-size:13.5px;color:var(--text-secondary);text-decoration:none}
+  .nav-demo a .i{width:15px;text-align:center;opacity:.8}
+  .navA a.on{color:var(--text-primary);background:var(--surface-2);border-radius:8px}
+  .navB a{border-radius:999px}
+  .navB a:hover{background:var(--surface-1)}
+  .navB a.on{background:var(--surface-2);color:var(--text-primary)}
+  .navC a{border-left:2px solid transparent;border-radius:0}
+  .navC a.on{border-left-color:var(--accent);color:var(--text-primary);background:linear-gradient(90deg,var(--accent-soft),transparent 70%)}
+  .navD a{padding:4px 8px;font-size:12.5px}
+  .navD a.on{color:var(--accent)}
+
+  .vtag{position:absolute;top:30px;right:12px;font-size:10px;letter-spacing:.04em;border-radius:999px;padding:1px 8px;background:var(--surface-2);border:1px solid var(--border-subtle);color:var(--text-secondary)}
+  .vtag.base{color:var(--text-muted)}
+  .vtag.new{background:var(--accent-soft);color:var(--accent-text-on-soft);border-color:transparent}
+
+.prev{height:430px;overflow:hidden;border-radius:10px;border:1px solid var(--border-subtle);background:var(--app-bg);position:relative}
+  .prev .mock{width:1600px;transform:scale(.36);transform-origin:top left;pointer-events:none;position:absolute;top:0;left:0}
+  @media (min-width:1400px){.prev .mock{transform:scale(.42)}}
+  /* ————— mock building blocks ————— */
+  .mock{font-size:15px;padding:26px 34px;box-sizing:border-box}
+  .mock *{box-sizing:border-box}
+  .m-title{font-size:30px;font-weight:700;margin:0 0 4px}
+  .m-serif{font-family:Georgia,"Times New Roman",serif;font-weight:500}
+  .m-sub{color:var(--text-secondary);font-size:14.5px;margin:0 0 18px}
+  .m-row{display:flex;gap:14px;align-items:center}
+  .m-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px}
+  .m-kpi{border:1px solid var(--border-subtle);background:var(--surface-1);border-radius:12px;padding:14px 16px}
+  .m-kpi b{font-size:22px;display:block}
+  .m-kpi span{color:var(--text-secondary);font-size:12px}
+  .m-card{border:1px solid var(--border-subtle);background:var(--surface-1);border-radius:14px;padding:16px 18px;margin-bottom:14px}
+  .m-card h4{margin:0 0 10px;font-size:14px}
+  .m-tabs{display:inline-flex;gap:4px;background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:12px;padding:4px;margin-bottom:16px}
+  .m-tabs i{font-style:normal;padding:5px 14px;border-radius:9px;font-size:13px;color:var(--text-secondary)}
+  .m-tabs i.on{background:var(--accent);color:var(--text-on-accent);font-weight:600}
+  .m-heat{display:grid;grid-template-columns:repeat(24,1fr);gap:3px}
+  .m-heat i{aspect-ratio:1;border-radius:3px;background:var(--accent-soft)}
+  .m-heat i:nth-child(3n){background:rgba(217,119,87,.45)}
+  .m-heat i:nth-child(7n){background:var(--accent)}
+  .m-map{background:radial-gradient(ellipse at 35% 40%,rgba(217,119,87,.35) 0 6%,transparent 7%),radial-gradient(ellipse at 55% 35%,rgba(217,119,87,.5) 0 4%,transparent 5%),radial-gradient(ellipse at 70% 55%,rgba(217,119,87,.4) 0 5%,transparent 6%),radial-gradient(ellipse at 25% 60%,rgba(217,119,87,.3) 0 4%,transparent 5%),var(--surface-2);border-radius:10px}
+  .m-tbl{width:100%;border-collapse:collapse;font-size:13px}
+  .m-tbl th{text-align:left;color:var(--text-muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em;padding:6px 10px;border-bottom:1px solid var(--border-strong)}
+  .m-tbl td{padding:8px 10px;border-bottom:1px solid var(--border-subtle);color:var(--text-secondary)}
+  .m-tbl td:first-child{font-family:var(--font-mono);font-size:12px}
+  .m-tbl tr.sel td{background:var(--accent-soft)}
+  .m-chip{display:inline-block;border-radius:999px;padding:2px 10px;font-size:11.5px;background:var(--info-soft);color:var(--info-text-on-soft);margin-right:4px}
+  .m-chip.ok{background:var(--success-soft);color:var(--success-text-on-soft)}
+  .m-chip.warn{background:var(--warning-soft);color:var(--warning-text-on-soft)}
+  .m-mono{font-family:var(--font-mono);font-size:12px}
+  .m-btn{display:inline-block;border-radius:999px;padding:6px 16px;font-size:13px;background:var(--accent);color:var(--text-on-accent);font-weight:600}
+  .m-btn.sec{background:var(--surface-2);color:var(--text-primary);font-weight:400;border:1px solid var(--border-subtle)}
+  .m-json{background:var(--surface-2);border-radius:10px;padding:12px;font-family:var(--font-mono);font-size:11.5px;color:var(--text-secondary);line-height:1.5}
+  .m-spark{display:flex;align-items:flex-end;gap:3px;height:46px}
+  .m-spark i{flex:1;background:var(--accent-soft);border-radius:2px 2px 0 0}
+  .m-spark i:nth-child(2n){background:rgba(217,119,87,.4)}
+  .m-bar{height:8px;border-radius:4px;background:var(--accent);opacity:.75}
+  .m-ghostbtn{color:var(--text-link);font-size:13px}
+  .m-toolrow{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
+  .m-railstep{padding:8px 14px;border-left:2px solid transparent;color:var(--text-secondary);font-size:13.5px}
+  .m-railstep.on{border-left-color:var(--accent);color:var(--text-primary);background:var(--surface-1);border-radius:0 8px 8px 0}
+
+
+  /* shell mock helpers */
+  .sh-top{display:flex;align-items:center;gap:12px;border:1px solid var(--border-subtle);border-radius:10px;padding:8px 14px;background:var(--surface-0);font-size:12.5px;color:var(--text-secondary)}
+  .sh-top .grow{flex:1}
+  .sh-ic{width:22px;height:22px;border-radius:6px;background:var(--surface-2);display:inline-grid;place-items:center;font-size:11px}
+  .sh-live{border-radius:999px;background:var(--success-soft);color:var(--success-text-on-soft);padding:1px 10px;font-size:11px}
+  .sh-avatar{width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--text-on-accent);display:inline-grid;place-items:center;font-size:10px;font-weight:700}
+  .sh-search{flex:1;max-width:340px;background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:999px;padding:4px 14px;color:var(--text-muted)}
+  .sh-side{width:210px;border:1px solid var(--border-subtle);border-radius:12px;background:var(--surface-0);padding:10px;font-size:13px}
+  .sh-side .lbl{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin:10px 4px 4px}
+  .sh-side a{display:flex;gap:8px;align-items:center;padding:5px 9px;color:var(--text-secondary);border-radius:8px;text-decoration:none}
+  .sh-side a.on{color:var(--text-primary);background:var(--surface-2)}
+  .sh-side .cnt{margin-left:auto;font-size:10px;background:var(--danger-soft);color:var(--danger-text-on-soft);border-radius:999px;padding:0 7px}
+  .sh-seg{display:flex;background:var(--surface-2);border-radius:999px;padding:3px;margin-bottom:8px}
+  .sh-seg i{flex:1;text-align:center;font-style:normal;font-size:11.5px;padding:3px 0;border-radius:999px;color:var(--text-secondary)}
+  .sh-seg i.on{background:var(--surface-raised);color:var(--text-primary)}
+  .sh-new{display:block;text-align:center;background:var(--accent);color:var(--text-on-accent);border-radius:999px;padding:6px 0;font-weight:600;font-size:12.5px;margin-bottom:10px}
+  .sh-rail{width:52px;border:1px solid var(--border-subtle);border-radius:12px;background:var(--surface-0);padding:8px 0;display:flex;flex-direction:column;align-items:center;gap:6px}
+  .sh-rail .sh-ic{width:30px;height:30px;font-size:13px}
+  .sh-rail .sh-ic.on{background:var(--accent-soft);color:var(--accent-text-on-soft)}
+  .sh-fly{border:1px solid var(--border-strong);border-radius:10px;background:var(--surface-2);padding:8px 12px;font-size:12.5px;box-shadow:var(--shadow-raised)}
+  .sh-modal{border:1px solid var(--border-strong);border-radius:14px;background:var(--surface-1);box-shadow:var(--shadow-dialog);overflow:hidden}
+  .sh-drawer{border:1px solid var(--border-strong);border-radius:14px 0 0 14px;background:var(--surface-1);box-shadow:var(--shadow-dialog)}
+  .sh-dd{border:1px solid var(--border-strong);border-radius:12px;background:var(--surface-2);box-shadow:var(--shadow-raised);padding:6px;width:210px;font-size:12.5px}
+  .sh-dd .hd{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);padding:5px 8px 3px}
+  .sh-dd a{display:flex;gap:8px;align-items:center;padding:6px 8px;border-radius:8px;color:var(--text-secondary);text-decoration:none}
+  .sh-dd a:hover{background:var(--surface-3)}
+  .sh-rowact{display:flex;gap:6px}
+  .sh-rowact .sh-ic{opacity:.85}
+  .sh-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:8px;border:1px solid var(--border-strong);border-radius:12px;background:var(--surface-2);box-shadow:var(--shadow-raised);width:230px}
+  .sh-grid a{display:grid;place-items:center;gap:4px;padding:8px 4px;border-radius:8px;color:var(--text-secondary);font-size:10.5px;text-decoration:none}
+  .sh-grid a:hover{background:var(--surface-3)}
+  .sh-split{display:inline-flex;border:1px solid var(--accent);border-radius:10px;overflow:hidden;font-size:12.5px}
+  .sh-split b{padding:5px 12px;color:var(--accent)}
+  .sh-split i{font-style:normal;padding:5px 8px;border-left:1px solid var(--accent);color:var(--accent)}
+
+
+  /* ————— E/F additions: claude pure + claude × v3 dense ————— */
+  .vtag.mix{background:var(--warning-soft);color:var(--warning-text-on-soft);border-color:transparent}
+  .cardE .card{border:0;background:var(--surface-1);border-radius:20px;box-shadow:0 2px 6px rgba(0,0,0,.12),0 16px 40px rgba(0,0,0,.16);padding:20px 22px}
+  .cardE .card h2{font-family:Georgia,serif;font-weight:500}
+  .cardF .card{border:0;background:var(--surface-1);border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.16);padding:12px 14px}
+  .cardF .card h2{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.09em;color:var(--text-muted)}
+  .skE .ghost-card{border:0;border-radius:20px;background:var(--surface-1);box-shadow:0 2px 6px rgba(0,0,0,.1);padding:18px;animation:skpulse 2s ease-in-out infinite}
+  .skE .ghost-title{width:40%;height:13px;border-radius:7px;background:var(--surface-3);margin-bottom:12px}
+  .skE .ghost-line{height:10px;border-radius:5px;background:var(--surface-2);margin:8px 0}
+  .skF .scanrow{display:flex;gap:6px;margin:6px 0;animation:skpulse 1.2s ease-in-out infinite}
+  .skF .scanrow i{height:8px;border-radius:2px;background:var(--surface-2);flex:1}
+  .skF .scanrow i:first-child{flex:0 0 58px;background:var(--surface-3)}
+  .krow{display:flex}
+  .krow .k{flex:1;padding:6px 18px;border-left:1px solid var(--border-subtle)}
+  .krow .k:first-child{border-left:0;padding-left:0}
+  .kpiE .k b{font-family:Georgia,serif;font-weight:500;font-size:26px;display:block}
+  .kpiE .k span{color:var(--text-muted);font-size:12px}
+  .kpiF .k{display:flex;flex-direction:column}
+  .kpiF .k b{font-family:var(--font-mono);font-size:21px}
+  .kpiF .k b i{font-style:normal;color:var(--success);font-size:11px;margin-left:7px}
+  .kpiF .k span{order:-1;text-transform:uppercase;letter-spacing:.08em;font-size:9.5px;color:var(--text-muted);margin-bottom:2px}
+  .tblE .data-table th{border:0;font-size:11px;color:var(--text-muted)}
+  .tblE .data-table td{border:0;border-bottom:1px solid var(--border-subtle);padding:11px 12px;font-size:13px}
+  .tblE .data-table tbody tr:hover td{background:var(--surface-2)}
+  .tblE .data-table tbody tr:hover td:first-child{border-radius:8px 0 0 8px}
+  .tblE .data-table tbody tr:hover td:last-child{border-radius:0 8px 8px 0}
+  .tblF .data-table th{border:0;font-size:9.5px;letter-spacing:.09em}
+  .tblF .data-table td{border:0;border-bottom:1px solid var(--border-subtle);font-family:var(--font-mono);font-size:11.5px;padding:5px 10px}
+  .tblF .data-table tbody tr:hover td{background:var(--surface-2)}
+  .bdgE .badge{background:var(--surface-2);border:0;border-radius:999px}
+  .bdgE .badge::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:6px}
+  .bdgF .badge{background:transparent;border:0;font-family:var(--font-mono);font-size:10.5px;padding:0}
+  .bdgF .badge::before{content:"[ "}
+  .bdgF .badge::after{content:" ]"}
+  .btnE button{border-radius:999px;border:1px solid transparent;background:var(--surface-2)}
+  .btnE button.primary{background:var(--accent);color:var(--text-on-accent);font-weight:600}
+  .btnF button{border-radius:999px;border:1px solid transparent;background:var(--surface-2);font-family:var(--font-mono);font-size:11.5px;padding:4px 13px}
+  .btnF button.primary{background:var(--accent);color:var(--text-on-accent)}
+  .tabsE .tabs{gap:6px}
+  .tabsE .t{padding:6px 15px;border-radius:999px;font-size:13px;color:var(--text-secondary)}
+  .tabsE .t.on{background:var(--surface-raised);color:var(--text-primary);box-shadow:0 1px 4px rgba(0,0,0,.18)}
+  .tabsF .tabs{gap:16px;border-bottom:1px solid var(--border-subtle)}
+  .tabsF .t{padding:5px 1px;font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--text-muted);border-bottom:2px solid transparent}
+  .tabsF .t.on{color:var(--accent);border-bottom-color:var(--accent)}
+  .empE .empty-demo{text-align:center}
+  .empE .serif{font-family:Georgia,serif;font-size:16px;color:var(--text-secondary)}
+  .empE small{color:var(--text-muted);display:block;margin:4px 0 10px}
+  .empE .act{display:inline-block;background:var(--surface-2);border-radius:999px;padding:5px 16px;font-size:12.5px}
+  .empF .empty-demo{min-height:0;place-items:start;font-family:var(--font-mono);font-size:11.5px;color:var(--text-muted);padding:10px 12px;background:var(--surface-0);border-radius:8px}
+  .scrE .wrapx,.scrF .wrapx{position:relative}
+  .scrE .scr{background:
+    linear-gradient(var(--surface-1) 33%,rgba(0,0,0,0)) top/100% 24px no-repeat local,
+    linear-gradient(rgba(0,0,0,0),var(--surface-1) 66%) bottom/100% 24px no-repeat local;
+    background-color:var(--surface-1)}
+  .scrE .dl{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);width:26px;height:26px;border-radius:50%;background:var(--surface-raised);box-shadow:0 2px 8px rgba(0,0,0,.25);display:grid;place-items:center;font-size:13px;color:var(--text-primary)}
+  .scrF .cnt{position:absolute;right:8px;bottom:8px;font-family:var(--font-mono);font-size:10px;color:var(--accent);background:var(--surface-0);border:1px solid var(--border-subtle);border-radius:4px;padding:1px 6px}
+  .navE a{border-radius:10px}
+  .navE a.on{background:var(--surface-raised);color:var(--text-primary);box-shadow:0 1px 4px rgba(0,0,0,.16)}
+  .navF a{padding:4px 8px;font-family:var(--font-mono);font-size:11.5px}
+  .navF a.on{color:var(--accent)}
+
+</style>
+</head>
+<body>
+<div class="lab-head">
+  <h1>Design <em>Picker</em></h1>
+  <p>Elements AND page layouts in one place. The small tag on each option shows where it comes from (base = current design, v1–v4 = a lab variant, new = drafted here). Click to pick one per row. Picks persist in this browser — hit “copy picks” and paste the result back to Claude. <a href="index.html">← back to lab</a></p>
+</div>
+<div id="picks"><b>Picks:</b><span id="picklist">none yet</span><button class="secondary" id="copy">copy picks</button><button class="secondary" id="clear">clear</button></div>
+
+<section class="el" data-el="card"><h2>1 · Card container</h2><div class="opts">
+  <div class="opt" data-opt="A"><span class="tag">1A</span><span class="vtag base">base / v1</span><h3>Stock</h3><p class="why">Hairline border, flat surface — current theme.</p>
+    <div class="demo"><div class="card"><h2 style="font-size:14px;margin:0 0 6px">Sensor feeds</h2><p style="color:var(--text-secondary);font-size:13px;margin:0">29 sensors reporting. Active = recent traffic.</p></div></div></div>
+  <div class="opt" data-opt="B"><span class="tag">1B</span><span class="vtag ">v2 · v4</span><h3>Soft elevated</h3><p class="why">Borderless, larger radius, layered shadow (v2/claude feel).</p>
+    <div class="demo cardB"><div class="card"><h2 style="font-size:14px;margin:0 0 6px">Sensor feeds</h2><p style="color:var(--text-secondary);font-size:13px;margin:0">29 sensors reporting. Active = recent traffic.</p></div></div></div>
+  <div class="opt" data-opt="C"><span class="tag">1C</span><span class="vtag new">new</span><h3>Accent-top</h3><p class="why">2px accent keyline marks every card; tighter radius.</p>
+    <div class="demo cardC"><div class="card"><h2 style="font-size:14px;margin:0 0 6px">Sensor feeds</h2><p style="color:var(--text-secondary);font-size:13px;margin:0">29 sensors reporting. Active = recent traffic.</p></div></div></div>
+  <div class="opt" data-opt="D"><span class="tag">1D</span><span class="vtag new">new</span><h3>Header strip</h3><p class="why">Title in a contrasting header band — stronger card anatomy.</p>
+    <div class="demo cardD"><div class="card"><h2>Sensor feeds</h2><div class="inner"><p style="color:var(--text-secondary);font-size:13px;margin:0">29 sensors reporting. Active = recent traffic.</p></div></div></div></div>
+  <div class="opt" data-opt="E"><span class="tag">1E</span><span class="vtag new">new · claude</span><h3>Claude floating</h3><p class="why">Borderless, big radius, soft layered shadow, serif title — pure claude surface.</p>
+    <div class="demo cardE"><div class="card"><h2 style="font-size:16px;margin:0 0 6px">Sensor feeds</h2><p style="color:var(--text-secondary);font-size:13px;margin:0">29 sensors reporting. Active = recent traffic.</p></div></div></div>
+  <div class="opt" data-opt="F"><span class="tag">1F</span><span class="vtag mix">claude × v3</span><h3>Floating dense</h3><p class="why">Claude’s shadowed borderless slab at v3 density: tight padding, mono micro-caps title.</p>
+    <div class="demo cardF"><div class="card"><h2 style="font-size:10.5px;margin:0 0 6px">sensor feeds</h2><p style="color:var(--text-secondary);font-size:12px;margin:0">29 sensors reporting. Active = recent traffic.</p></div></div></div>
+</div></section>
+
+<section class="el" data-el="skeleton"><h2>2 · Skeleton / loading card</h2><div class="opts">
+  <div class="opt" data-opt="A"><span class="tag">2A</span><span class="vtag base">base</span><h3>Static lines</h3><p class="why">Current: plain gray bars, no motion.</p>
+    <div class="demo"><div class="card"><div class="skeleton-line" style="width:60%"></div><div class="skeleton-line" style="width:85%"></div><div class="skeleton-line" style="width:72%"></div></div></div></div>
+  <div class="opt" data-opt="B"><span class="tag">2B</span><span class="vtag new">new</span><h3>Shimmer</h3><p class="why">Light sweep signals active loading.</p>
+    <div class="demo skB"><div class="card"><div class="skeleton-line" style="width:60%"></div><div class="skeleton-line" style="width:85%"></div><div class="skeleton-line" style="width:72%"></div></div></div></div>
+  <div class="opt" data-opt="C"><span class="tag">2C</span><span class="vtag new">new</span><h3>Pulse</h3><p class="why">Gentle opacity breathing; calmer than shimmer, still alive.</p>
+    <div class="demo skC"><div class="card"><div class="skeleton-line" style="width:60%"></div><div class="skeleton-line" style="width:85%"></div><div class="skeleton-line" style="width:72%"></div></div></div></div>
+  <div class="opt" data-opt="D"><span class="tag">2D</span><span class="vtag new">new</span><h3>Content-shaped ghost</h3><p class="why">Ghost mirrors the final layout (tiles + rows) — zero layout shift.</p>
+    <div class="demo skD"><div class="card"><div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:10px"><div class="ghost-tile"></div><div class="ghost-tile"></div><div class="ghost-tile"></div></div><div class="ghost-row" style="width:90%"></div><div class="ghost-row" style="width:76%"></div><div class="ghost-row" style="width:83%"></div></div></div></div>
+  <div class="opt" data-opt="E"><span class="tag">2E</span><span class="vtag new">new · claude</span><h3>Breathing card ghost</h3><p class="why">The whole placeholder card breathes gently — claude’s thinking rhythm, serif-sized title bar.</p>
+    <div class="demo skE"><div class="ghost-card"><div class="ghost-title"></div><div class="ghost-line" style="width:85%"></div><div class="ghost-line" style="width:70%"></div><div class="ghost-line" style="width:55%"></div></div></div></div>
+  <div class="opt" data-opt="F"><span class="tag">2F</span><span class="vtag mix">claude × v3</span><h3>Mono scanlines</h3><p class="why">Label-column + value bars per row — dense table ghost at v3 rhythm, quick pulse.</p>
+    <div class="demo skF"><div class="card"><div class="scanrow"><i></i><i></i><i></i><i></i></div><div class="scanrow"><i></i><i></i><i></i><i></i></div><div class="scanrow"><i></i><i></i><i></i><i></i></div><div class="scanrow"><i></i><i></i><i></i><i></i></div></div></div></div>
+</div></section>
+
+<section class="el" data-el="kpi"><h2>3 · KPI stat tile</h2><div class="opts">
+  <div class="opt" data-opt="A"><span class="tag">3A</span><span class="vtag base">base</span><h3>Stock</h3><p class="why">Big number, quiet label below.</p>
+    <div class="demo"><div class="kpi"><div class="num">3,076,059</div><div class="lbl">Events in 24h</div></div></div></div>
+  <div class="opt" data-opt="B"><span class="tag">3B</span><span class="vtag new">new</span><h3>Delta + sparkline</h3><p class="why">Trend at a glance: change chip and 24h micro-trend.</p>
+    <div class="demo kpiB"><div class="kpi"><div class="num">3,076,059<span class="delta">+21%</span></div><div class="lbl">Events in 24h</div><div class="spark"><i style="height:30%"></i><i style="height:45%"></i><i style="height:38%"></i><i style="height:62%"></i><i style="height:55%"></i><i style="height:74%"></i><i style="height:100%"></i></div></div></div></div>
+  <div class="opt" data-opt="C"><span class="tag">3C</span><span class="vtag new">new</span><h3>Icon-led</h3><p class="why">Category icon anchors the tile; friendlier scan.</p>
+    <div class="demo kpiC"><div class="kpi"><div class="ic">⚡</div><div><div class="num">3,076,059</div><div class="lbl">Events in 24h</div></div></div></div></div>
+  <div class="opt" data-opt="D"><span class="tag">3D</span><span class="vtag ">v3</span><h3>Dense mono</h3><p class="why">Label-first micro-caps, mono numerals (terminal).</p>
+    <div class="demo kpiD"><div class="kpi"><div class="num">3,076,059</div><div class="lbl">Events · 24h</div></div></div></div>
+  <div class="opt" data-opt="E"><span class="tag">3E</span><span class="vtag new">new · claude</span><h3>Boxless serif strip</h3><p class="why">No tiles at all: serif numerals over quiet labels, hairline dividers — claude stat strip.</p>
+    <div class="demo kpiE"><div class="card"><div class="krow"><div class="k"><b>3,076,059</b><span>Events · 24h</span></div><div class="k"><b>13,334</b><span>Attack sources</span></div><div class="k"><b>1,286</b><span>Payloads</span></div></div></div></div></div>
+  <div class="opt" data-opt="F"><span class="tag">3F</span><span class="vtag mix">claude × v3</span><h3>Boxless mono strip</h3><p class="why">Same open strip, v3 data treatment: micro-caps labels first, mono numerals, inline delta.</p>
+    <div class="demo kpiF"><div class="card"><div class="krow"><div class="k"><span>events 24h</span><b>3,076,059<i>+12%</i></b></div><div class="k"><span>sources</span><b>13,334</b></div><div class="k"><span>payloads</span><b>1,286</b></div></div></div></div></div>
+</div></section>
+
+<section class="el" data-el="table"><h2>4 · Data table rows</h2><div class="opts">
+  <div class="opt" data-opt="A"><span class="tag">4A</span><span class="vtag base">base / v1</span><h3>Stock</h3><p class="why">Hairline row separators.</p>
+    <div class="demo"><table class="data-table"><thead><tr><th>time</th><th>sensor</th><th>source ip</th></tr></thead><tbody><tr><td>00:28:23</td><td><span class="badge badge--info">cowrie</span></td><td>203.0.113.122</td></tr><tr><td>00:27:11</td><td><span class="badge badge--info">dionaea</span></td><td>123.188.73.228</td></tr><tr><td>00:26:40</td><td><span class="badge badge--info">multipot</span></td><td>213.176.26.114</td></tr></tbody></table></div></div>
+  <div class="opt" data-opt="B"><span class="tag">4B</span><span class="vtag new">new</span><h3>Zebra</h3><p class="why">Alternating row wash for long-row tracking.</p>
+    <div class="demo tblB"><table class="data-table"><thead><tr><th>time</th><th>sensor</th><th>source ip</th></tr></thead><tbody><tr><td>00:28:23</td><td><span class="badge badge--info">cowrie</span></td><td>203.0.113.122</td></tr><tr><td>00:27:11</td><td><span class="badge badge--info">dionaea</span></td><td>123.188.73.228</td></tr><tr><td>00:26:40</td><td><span class="badge badge--info">multipot</span></td><td>213.176.26.114</td></tr></tbody></table></div></div>
+  <div class="opt" data-opt="C"><span class="tag">4C</span><span class="vtag new">new</span><h3>Card rows</h3><p class="why">Each row its own rounded slab — modern SaaS lists.</p>
+    <div class="demo tblC"><table class="data-table"><thead><tr><th>time</th><th>sensor</th><th>source ip</th></tr></thead><tbody><tr><td>00:28:23</td><td><span class="badge badge--info">cowrie</span></td><td>203.0.113.122</td></tr><tr><td>00:27:11</td><td><span class="badge badge--info">dionaea</span></td><td>123.188.73.228</td></tr><tr><td>00:26:40</td><td><span class="badge badge--info">multipot</span></td><td>213.176.26.114</td></tr></tbody></table></div></div>
+  <div class="opt" data-opt="D"><span class="tag">4D</span><span class="vtag ">v3</span><h3>Dense mono grid</h3><p class="why">Column rules + mono cells; maximum rows per screen.</p>
+    <div class="demo tblD"><table class="data-table"><thead><tr><th>time</th><th>sensor</th><th>source ip</th></tr></thead><tbody><tr><td>00:28:23</td><td><span class="badge badge--info">cowrie</span></td><td>203.0.113.122</td></tr><tr><td>00:27:11</td><td><span class="badge badge--info">dionaea</span></td><td>123.188.73.228</td></tr><tr><td>00:26:40</td><td><span class="badge badge--info">multipot</span></td><td>213.176.26.114</td></tr></tbody></table></div></div>
+  <div class="opt" data-opt="E"><span class="tag">4E</span><span class="vtag new">new · claude</span><h3>Open rows + hover pill</h3><p class="why">No chrome: airy padding, hairline separators, whole row lifts on hover — claude list feel.</p>
+    <div class="demo tblE"><div class="card"><table class="data-table"><thead><tr><th>time</th><th>sensor</th><th>source ip</th></tr></thead><tbody><tr><td>00:28:23</td><td>mailoney</td><td>203.0.113.122</td></tr><tr><td>00:28:19</td><td>cowrie</td><td>123.188.73.228</td></tr><tr><td>00:28:11</td><td>dionaea</td><td>213.176.26.114</td></tr></tbody></table></div></div></div>
+  <div class="opt" data-opt="F"><span class="tag">4F</span><span class="vtag mix">claude × v3</span><h3>Open dense mono</h3><p class="why">Same chrome-free rows at v3 density: mono cells, 5px padding, micro-caps headers.</p>
+    <div class="demo tblF"><div class="card"><table class="data-table"><thead><tr><th>time</th><th>sensor</th><th>source ip</th></tr></thead><tbody><tr><td>00:28:23</td><td>mailoney</td><td>203.0.113.122</td></tr><tr><td>00:28:19</td><td>cowrie</td><td>123.188.73.228</td></tr><tr><td>00:28:11</td><td>dionaea</td><td>213.176.26.114</td></tr></tbody></table></div></div></div>
+</div></section>
+
+<section class="el" data-el="badge"><h2>5 · Badges & status</h2><div class="opts">
+  <div class="opt" data-opt="A"><span class="tag">5A</span><span class="vtag base">base</span><h3>Stock soft</h3><p class="why">Tinted background chips.</p>
+    <div class="demo"><span class="badge badge--success">ACTIVE</span> <span class="badge badge--info">cowrie</span> <span class="badge badge--warning">stale</span> <span class="badge badge--danger">open</span></div></div>
+  <div class="opt" data-opt="B"><span class="tag">5B</span><span class="vtag new">new</span><h3>Outline</h3><p class="why">Transparent, current-color ring — lighter surface noise.</p>
+    <div class="demo bdgB"><span class="badge badge--success">ACTIVE</span> <span class="badge badge--info">cowrie</span> <span class="badge badge--warning">stale</span> <span class="badge badge--danger">open</span></div></div>
+  <div class="opt" data-opt="C"><span class="tag">5C</span><span class="vtag new">new</span><h3>Dot + label</h3><p class="why">Status dot, no chip at all — quietest option.</p>
+    <div class="demo bdgC"><span class="badge badge--success">ACTIVE</span> <span class="badge badge--info">cowrie</span> <span class="badge badge--warning">stale</span> <span class="badge badge--danger">open</span></div></div>
+  <div class="opt" data-opt="D"><span class="tag">5D</span><span class="vtag new">new</span><h3>Solid</h3><p class="why">Full-strength fills — loudest, best for few statuses.</p>
+    <div class="demo bdgD"><span class="badge badge--success">ACTIVE</span> <span class="badge badge--info">cowrie</span> <span class="badge badge--warning">stale</span> <span class="badge badge--danger">open</span></div></div>
+  <div class="opt" data-opt="E"><span class="tag">5E</span><span class="vtag new">new · claude</span><h3>Neutral chip + dot</h3><p class="why">One quiet surface chip everywhere; only the dot carries the status color — claude’s restraint.</p>
+    <div class="demo bdgE"><div class="card"><span class="badge badge--success">healthy</span> <span class="badge badge--info">tcp/445</span> <span class="badge badge--warning">quiet</span> <span class="badge badge--danger">critical</span></div></div></div>
+  <div class="opt" data-opt="F"><span class="tag">5F</span><span class="vtag mix">claude × v3</span><h3>Bracket mono</h3><p class="why">No chip at all: [ bracketed ] mono words in the status color — terminal-dense.</p>
+    <div class="demo bdgF"><div class="card"><span class="badge badge--success">healthy</span> <span class="badge badge--info">tcp/445</span> <span class="badge badge--warning">quiet</span> <span class="badge badge--danger">critical</span></div></div></div>
+</div></section>
+
+<section class="el" data-el="button"><h2>6 · Buttons</h2><div class="opts">
+  <div class="opt" data-opt="A"><span class="tag">6A</span><span class="vtag base">base</span><h3>Stock</h3><p class="why">Rounded-9 controls.</p>
+    <div class="demo btn-demo"><button class="primary">Generate now</button><button class="secondary">Save definition</button><button>Reset</button></div></div>
+  <div class="opt" data-opt="B"><span class="tag">6B</span><span class="vtag ">v2 · v4</span><h3>Pill</h3><p class="why">Fully rounded (claude.ai feel).</p>
+    <div class="demo btn-demo btnB"><button class="primary">Generate now</button><button class="secondary">Save definition</button><button>Reset</button></div></div>
+  <div class="opt" data-opt="C"><span class="tag">6C</span><span class="vtag ">v3</span><h3>Compact square</h3><p class="why">Tight radius + smaller hit area (dense/terminal).</p>
+    <div class="demo btn-demo btnC"><button class="primary">Generate now</button><button class="secondary">Save definition</button><button>Reset</button></div></div>
+  <div class="opt" data-opt="D"><span class="tag">6D</span><span class="vtag new">new</span><h3>Ghost + outline primary</h3><p class="why">Minimal chrome; only the primary carries color.</p>
+    <div class="demo btn-demo btnD"><button class="primary">Generate now</button><button class="secondary">Save definition</button><button>Reset</button></div></div>
+  <div class="opt" data-opt="E"><span class="tag">6E</span><span class="vtag new">new · claude</span><h3>Claude solid pill</h3><p class="why">claude.ai’s actual buttons: solid accent pill primary, quiet surface pills for the rest, zero borders.</p>
+    <div class="demo btn-demo btnE"><div class="card"><button class="primary">Generate report</button><button>Export CSV</button><button>Reset</button></div></div></div>
+  <div class="opt" data-opt="F"><span class="tag">6F</span><span class="vtag mix">claude × v3</span><h3>Compact mono pill</h3><p class="why">Pill silhouette at v3 scale: shorter, mono labels — dense toolbars stay calm.</p>
+    <div class="demo btn-demo btnF"><div class="card"><button class="primary">generate</button><button>export csv</button><button>reset</button></div></div></div>
+</div></section>
+
+<section class="el" data-el="tabs"><h2>7 · Tabs / section switcher</h2><div class="opts">
+  <div class="opt" data-opt="A"><span class="tag">7A</span><span class="vtag base">base</span><h3>Stock pills</h3><p class="why">Numbered pills in a container (current Overview).</p>
+    <div class="demo tabsA"><div class="tabs"><span class="t on">Live operations</span><span class="t">Threat landscape</span><span class="t">Attacker behavior</span></div></div></div>
+  <div class="opt" data-opt="B"><span class="tag">7B</span><span class="vtag new">new</span><h3>Underline</h3><p class="why">Browser-classic; lightest visual weight.</p>
+    <div class="demo tabsB"><div class="tabs"><span class="t on">Live operations</span><span class="t">Threat landscape</span><span class="t">Attacker behavior</span></div></div></div>
+  <div class="opt" data-opt="C"><span class="tag">7C</span><span class="vtag new">new</span><h3>Segmented</h3><p class="why">One bordered control, macOS-style.</p>
+    <div class="demo tabsC"><div class="tabs"><span class="t on">Live operations</span><span class="t">Threat landscape</span><span class="t">Attacker behavior</span></div></div></div>
+  <div class="opt" data-opt="D"><span class="tag">7D</span><span class="vtag new">new</span><h3>Vertical rail</h3><p class="why">Left rail with accent bar — suits many-tab pages (settings).</p>
+    <div class="demo tabsD"><div class="tabs"><span class="t on">Live operations</span><span class="t">Threat landscape</span><span class="t">Attacker behavior</span></div></div></div>
+  <div class="opt" data-opt="E"><span class="tag">7E</span><span class="vtag new">new · claude</span><h3>Floating pills</h3><p class="why">Free-standing pills, active one raised with a soft shadow — no container box (claude toggle feel).</p>
+    <div class="demo tabsE"><div class="tabs"><span class="t on">Live operations</span><span class="t">Threat landscape</span><span class="t">Attacker behavior</span></div></div></div>
+  <div class="opt" data-opt="F"><span class="tag">7F</span><span class="vtag mix">claude × v3</span><h3>Mono micro underline</h3><p class="why">v3 micro-caps mono labels with an accent underline — smallest possible switcher.</p>
+    <div class="demo tabsF"><div class="tabs"><span class="t on">live ops</span><span class="t">threat landscape</span><span class="t">attacker behavior</span></div></div></div>
+</div></section>
+
+<section class="el" data-el="empty"><h2>8 · Empty state</h2><div class="opts">
+  <div class="opt" data-opt="A"><span class="tag">8A</span><span class="vtag base">base</span><h3>Stock mono</h3><p class="why">Terminal one-liner (current).</p>
+    <div class="demo empA"><div class="card"><div class="empty-demo">No canarytokens created yet — use the Create bait tab.</div></div></div></div>
+  <div class="opt" data-opt="B"><span class="tag">8B</span><span class="vtag new">new</span><h3>Icon + action</h3><p class="why">Explains and offers the next step.</p>
+    <div class="demo empB"><div class="card"><div class="empty-demo"><div><div class="ic">🪤</div><b>No canarytokens yet</b><small>Plant tokens outside the honeypot and track what fires.</small><br><span class="act">Create bait →</span></div></div></div></div></div>
+  <div class="opt" data-opt="C"><span class="tag">8C</span><span class="vtag new">new</span><h3>Dashed invite</h3><p class="why">Dropzone-style: the emptiness itself looks intentional.</p>
+    <div class="demo empC"><div class="card"><div class="empty-demo">No canarytokens yet — create your first from the Create bait tab.</div></div></div></div>
+  <div class="opt" data-opt="D"><span class="tag">8D</span><span class="vtag new">new</span><h3>Inline note</h3><p class="why">Compact info banner; no vertical cost.</p>
+    <div class="demo empD"><div class="card"><div class="empty-demo">ℹ No canarytokens yet — use the Create bait tab.</div></div></div></div>
+  <div class="opt" data-opt="E"><span class="tag">8E</span><span class="vtag new">new · claude</span><h3>Serif sentence</h3><p class="why">A calm serif sentence and one quiet pill — claude’s empty-conversation tone.</p>
+    <div class="demo empE"><div class="card"><div class="empty-demo"><div><div class="serif">Nothing captured yet.</div><small>Canarytokens report here the moment one fires.</small><span class="act">Create bait →</span></div></div></div></div></div>
+  <div class="opt" data-opt="F"><span class="tag">8F</span><span class="vtag mix">claude × v3</span><h3>Prompt line</h3><p class="why">One mono line with a prompt chevron — costs a single row of space.</p>
+    <div class="demo empF"><div class="card"><div class="empty-demo">&gt; no canarytokens — create bait to begin</div></div></div></div>
+</div></section>
+
+<section class="el" data-el="scroll"><h2>9 · Scrollable region affordance</h2><div class="opts">
+  <div class="opt" data-opt="A"><span class="tag">9A</span><span class="vtag base">base</span><h3>Thin scrollbar</h3><p class="why">Current: always-rendered thin bar.</p>
+    <div class="demo"><div class="scr"><div>dionaea — 3,149,755</div><div>suricata — 1,462,592</div><div>cowrie — 768,107</div><div>multipot — 131,279</div><div>conpot-kamstrup — 11,610</div><div>endlessh — 11,501</div><div>conpot — 8,981</div></div></div></div>
+  <div class="opt" data-opt="B"><span class="tag">9B</span><span class="vtag ">v1</span><h3>Edge fades</h3><p class="why">Content visibly dissolves at the cut — universally readable.</p>
+    <div class="demo scrB"><div class="scr" style="background-color:var(--surface-1)"><div>dionaea — 3,149,755</div><div>suricata — 1,462,592</div><div>cowrie — 768,107</div><div>multipot — 131,279</div><div>conpot-kamstrup — 11,610</div><div>endlessh — 11,501</div><div>conpot — 8,981</div></div></div></div>
+  <div class="opt" data-opt="C"><span class="tag">9C</span><span class="vtag new">new</span><h3>“More” pill</h3><p class="why">Explicit count of hidden rows; disappears at the end.</p>
+    <div class="demo scrC"><div class="wrapx"><div class="scr"><div>dionaea — 3,149,755</div><div>suricata — 1,462,592</div><div>cowrie — 768,107</div><div>multipot — 131,279</div><div>conpot-kamstrup — 11,610</div><div>endlessh — 11,501</div><div>conpot — 8,981</div></div><span class="more">22 more ↓</span></div></div></div>
+  <div class="opt" data-opt="D"><span class="tag">9D</span><span class="vtag new">new · claude</span><h3>Fade + jump button</h3><p class="why">Edge fade plus claude’s floating circular ↓ — click scrolls a page.</p>
+    <div class="demo scrE"><div class="wrapx"><div class="scr"><div>dionaea — 3,149,755</div><div>suricata — 1,462,592</div><div>cowrie — 768,107</div><div>multipot — 131,279</div><div>conpot-kamstrup — 11,610</div><div>endlessh — 11,501</div><div>conpot — 8,981</div></div><span class="dl">↓</span></div></div></div>
+  <div class="opt" data-opt="E"><span class="tag">9E</span><span class="vtag mix">claude × v3</span><h3>Corner counter</h3><p class="why">Tiny mono +N counter pinned to the corner — dense, precise, zero overlay on content.</p>
+    <div class="demo scrF"><div class="wrapx"><div class="scr"><div>dionaea — 3,149,755</div><div>suricata — 1,462,592</div><div>cowrie — 768,107</div><div>multipot — 131,279</div><div>conpot-kamstrup — 11,610</div><div>endlessh — 11,501</div><div>conpot — 8,981</div></div><span class="cnt">+22</span></div></div></div>
+</div></section>
+
+<section class="el" data-el="nav"><h2>10 · Sidebar nav item</h2><div class="opts">
+  <div class="opt" data-opt="A"><span class="tag">10A</span><span class="vtag base">base</span><h3>Stock</h3><p class="why">Underlined links, filled active block.</p>
+    <div class="demo navA"><div class="nav-demo"><a class="on"><span class="i">🏠</span>Overview</a><a><span class="i">🧠</span>ML anomalies</a><a><span class="i">💬</span>LLM analysis</a></div></div></div>
+  <div class="opt" data-opt="B"><span class="tag">10B</span><span class="vtag ">v4</span><h3>Pills</h3><p class="why">Rounded hover/active (claude.ai sidebar).</p>
+    <div class="demo navB"><div class="nav-demo"><a class="on"><span class="i">🏠</span>Overview</a><a><span class="i">🧠</span>ML anomalies</a><a><span class="i">💬</span>LLM analysis</a></div></div></div>
+  <div class="opt" data-opt="C"><span class="tag">10C</span><span class="vtag new">new</span><h3>Accent bar</h3><p class="why">Left keyline + soft gradient marks the active page.</p>
+    <div class="demo navC"><div class="nav-demo"><a class="on"><span class="i">🏠</span>Overview</a><a><span class="i">🧠</span>ML anomalies</a><a><span class="i">💬</span>LLM analysis</a></div></div></div>
+  <div class="opt" data-opt="D"><span class="tag">10D</span><span class="vtag ">v3</span><h3>Compact text</h3><p class="why">Smallest footprint; active = accent text only.</p>
+    <div class="demo navD"><div class="nav-demo"><a class="on"><span class="i">🏠</span>Overview</a><a><span class="i">🧠</span>ML anomalies</a><a><span class="i">💬</span>LLM analysis</a></div></div></div>
+  <div class="opt" data-opt="E"><span class="tag">10E</span><span class="vtag new">new · claude</span><h3>Raised pill active</h3><p class="why">Active page floats on a raised pill with a soft shadow — claude sidebar’s current-chat look.</p>
+    <div class="demo navE"><div class="nav-demo"><a class="on"><span class="i">🏠</span>Overview</a><a><span class="i">🧠</span>ML anomalies</a><a><span class="i">💬</span>LLM analysis</a></div></div></div>
+  <div class="opt" data-opt="F"><span class="tag">10F</span><span class="vtag mix">claude × v3</span><h3>Mono chevron</h3><p class="why">v3 compact mono; active = accent text with a ▸ chevron, no fills anywhere.</p>
+    <div class="demo navF"><div class="nav-demo"><a class="on"><span class="i">▸</span>overview</a><a><span class="i">·</span>ml-anomalies</a><a><span class="i">·</span>llm-analysis</a></div></div></div>
+</div></section>
+
+
+<h2 style="font-size:16px;margin:40px 0 4px">Page layouts</h2>
+<p style="color:var(--text-secondary);margin:0 0 16px;font-size:13.5px">Different ordering and structure per page — claude.ai-inspired patterns. Same picking mechanism.</p>
+<section class="el" data-el="overview"><h2>Overview page</h2><div class="opts">
+
+<div class="opt" data-opt="A"><span class="tag">OV-A</span><span class="vtag base">base</span><h3>Current — KPI row, tabs, stacked cards</h3><p class="why">What ships today: 5 tiles, tab pills, then every card full-width below the fold.</p>
+<div class="prev"><div class="mock">
+  <div class="m-title">Honeypot command center</div>
+  <p class="m-sub">Live attack telemetry, captured evidence, correlated campaigns.</p>
+  <div class="m-kpis"><div class="m-kpi"><b>5,613,591</b><span>All events</span></div><div class="m-kpi"><b>3,076,059</b><span>Events 24h</span></div><div class="m-kpi"><b>13,334</b><span>Attack sources</span></div><div class="m-kpi"><b>28,722</b><span>Login attempts</span></div><div class="m-kpi"><b>1,286</b><span>Payloads</span></div></div>
+  <div class="m-tabs"><i class="on">Live operations</i><i>Collection health</i><i>Threat landscape</i><i>Attacker behavior</i><i>Evidence</i></div>
+  <div class="m-card"><h4>Activity — last 24h</h4><div class="m-heat">""" </div></div>
+  <div class="m-card"><h4>Attack origins</h4><div class="m-map" style="height:120px"></div></div>
+</div></div></div>
+
+<div class="opt" data-opt="B"><span class="tag">OV-B</span><span class="vtag new">new · claude</span><h3>Claude focus — greeting + command bar</h3><p class="why">claude.ai home translated: a humane serif status line, one investigate bar as the centerpiece, the rest tucked below as quiet chips and one live feed.</p>
+<div class="prev"><div class="mock" style="text-align:center;padding-top:70px">
+  <div class="m-title m-serif" style="font-size:34px">☀ Quiet night, Xore — nothing needs you.</div>
+  <p class="m-sub">3.1M events in 24h (+21%, normal) · 29/29 sensors active · 0 open incidents</p>
+  <div class="m-card" style="max-width:760px;margin:26px auto 14px;text-align:left;border-radius:16px">
+    <div style="color:var(--text-muted);font-size:14px;margin-bottom:14px">Investigate anything — IP, session, hash, credential, country…</div>
+    <div class="m-row" style="justify-content:space-between"><div><span class="m-chip">recent: 203.0.113.122</span><span class="m-chip">sess 76439b93</span></div><span class="m-btn">Investigate</span></div>
+  </div>
+  <div style="margin:8px 0 22px"><span class="m-ghostbtn">Threat landscape</span> · <span class="m-ghostbtn">Attacker behavior</span> · <span class="m-ghostbtn">Evidence</span> · <span class="m-ghostbtn">Collection health</span></div>
+  <div class="m-card" style="max-width:980px;margin:0 auto;text-align:left"><h4>Happening now</h4>
+    <table class="m-tbl"><tr><td>00:28:23</td><td><span class="m-chip">mailoney</span></td><td>203.0.113.122</td><td>DATA: 6 bytes saved</td></tr><tr><td>00:28:19</td><td><span class="m-chip">cowrie</span></td><td>123.188.73.228</td><td>login.success: root/juantech</td></tr><tr><td>00:28:11</td><td><span class="m-chip">dionaea</span></td><td>213.176.26.114</td><td>smb connect :445</td></tr></table></div>
+</div></div></div>
+
+<div class="opt" data-opt="C"><span class="tag">OV-C</span><span class="vtag new">new</span><h3>Bento grid — everything above the fold</h3><p class="why">Mixed-size tile mosaic: hero stat with trend, map and heatmap as tiles, live stream as a tall cell. One screen, no scrolling, no tabs.</p>
+<div class="prev"><div class="mock">
+  <div class="m-toolrow"><div class="m-title m-serif" style="font-size:26px">Command center</div><span class="m-ghostbtn">last 24h ▾</span></div>
+  <div style="display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:118px;gap:12px">
+    <div class="m-card" style="grid-column:span 2;grid-row:span 2;margin:0"><h4>Events · 24h</h4><b style="font-size:40px">3,076,059</b><div style="color:var(--success-text-on-soft);font-size:13px">+21% vs previous · normal</div><div class="m-spark" style="margin-top:14px"><i style="height:30%"></i><i style="height:52%"></i><i style="height:44%"></i><i style="height:66%"></i><i style="height:58%"></i><i style="height:80%"></i><i style="height:100%"></i><i style="height:72%"></i></div></div>
+    <div class="m-card" style="grid-column:span 2;grid-row:span 2;margin:0"><h4>Attack origins</h4><div class="m-map" style="height:150px"></div></div>
+    <div class="m-card" style="margin:0"><h4>Sources</h4><b style="font-size:24px">13,334</b></div>
+    <div class="m-card" style="margin:0"><h4>Logins</h4><b style="font-size:24px">28,722</b></div>
+    <div class="m-card" style="grid-column:span 2;grid-row:span 2;margin:0"><h4>Live stream</h4><table class="m-tbl"><tr><td>00:28</td><td>mailoney</td><td>203.0.113.122</td></tr><tr><td>00:28</td><td>cowrie</td><td>123.188.73.228</td></tr><tr><td>00:27</td><td>dionaea</td><td>213.176.26.114</td></tr></table></div>
+    <div class="m-card" style="margin:0"><h4>Payloads</h4><b style="font-size:24px">1,286</b></div>
+    <div class="m-card" style="margin:0"><h4>Alerts</h4><b style="font-size:24px;color:var(--warning-text-on-soft)">200 open</b></div>
+  </div>
+</div></div></div>
+
+<div class="opt" data-opt="D"><span class="tag">OV-D</span><span class="vtag new">new</span><h3>Main + live rail</h3><p class="why">Charts own the left 2/3; a sticky right rail carries what changes second-to-second: live stream, open alerts, sensor status. Monitoring-wall feel.</p>
+<div class="prev"><div class="mock">
+  <div style="display:grid;grid-template-columns:2fr 1fr;gap:14px">
+    <div>
+      <div class="m-kpis" style="grid-template-columns:repeat(3,1fr)"><div class="m-kpi"><b>3,076,059</b><span>Events 24h · +21%</span></div><div class="m-kpi"><b>13,334</b><span>Sources</span></div><div class="m-kpi"><b>1,286</b><span>Payloads</span></div></div>
+      <div class="m-card"><h4>Activity — last 24h</h4><div class="m-heat">""" </div></div>
+      <div class="m-card"><h4>Attack origins</h4><div class="m-map" style="height:110px"></div></div>
+    </div>
+    <div>
+      <div class="m-card" style="border-color:var(--border-strong)"><h4>● Live</h4><table class="m-tbl"><tr><td>00:28</td><td>mailoney</td></tr><tr><td>00:28</td><td>cowrie</td></tr><tr><td>00:27</td><td>dionaea</td></tr><tr><td>00:27</td><td>suricata</td></tr></table></div>
+      <div class="m-card"><h4>Open alerts</h4><div class="m-sub" style="margin:0">YARA dionaea <span class="m-chip warn">200</span></div></div>
+      <div class="m-card"><h4>Sensors</h4><span class="m-chip ok">29/29 active</span></div>
+    </div>
+  </div>
+</div></div></div>
+  <div class="opt" data-opt="E"><span class="tag">OV-E</span><span class="vtag new">new · claude</span><h3>Focus column</h3><p class="why">Everything in one centered 900px column: serif greeting, boxless stat strip, then a single feed — claude conversation geometry.</p>
+    <div class="prev"><div class="mock" style="max-width:940px;margin:0 auto"><div class="m-title m-serif" style="font-size:30px;text-align:center;margin-top:10px">Good morning — traffic is at its usual rhythm.</div><p class="m-sub" style="text-align:center">3,076,059 events in 24h · 13,334 sources · 1,286 payloads</p><div class="m-card" style="border:0;box-shadow:0 2px 10px rgba(0,0,0,.16)"><div class="krow"><div class="k"><b style="font-family:Georgia,serif;font-size:24px;display:block">3,076,059</b><span style="color:var(--text-muted);font-size:12px">Events 24h</span></div><div class="k"><b style="font-family:Georgia,serif;font-size:24px;display:block">13,334</b><span style="color:var(--text-muted);font-size:12px">Sources</span></div><div class="k"><b style="font-family:Georgia,serif;font-size:24px;display:block">28,722</b><span style="color:var(--text-muted);font-size:12px">Logins</span></div></div></div><div class="m-card" style="border:0;box-shadow:0 2px 10px rgba(0,0,0,.16)"><h4>Live stream</h4><table class="m-tbl"><tr><td>00:28:23</td><td>mailoney</td><td>203.0.113.122</td><td>DATA: 6 bytes saved</td></tr><tr><td>00:28:19</td><td>cowrie</td><td>123.188.73.228</td><td>login.success</td></tr></table></div></div></div></div>
+  <div class="opt" data-opt="F"><span class="tag">OV-F</span><span class="vtag mix">claude × v3</span><h3>Focus column × dense grid</h3><p class="why">Serif greeting stays, but below it a two-column mono card grid packs heatmap, stream, sensors and map on one screen.</p>
+    <div class="prev"><div class="mock"><div class="m-title m-serif" style="font-size:26px">Good morning.</div><p class="m-sub" style="margin-bottom:12px"><span class="m-mono">3,076,059 ev/24h · 13,334 src · 28,722 logins · 1,286 payloads</span></p><div style="display:grid;grid-template-columns:1fr 1fr;gap:12px"><div class="m-card" style="margin:0;border:0;box-shadow:0 1px 3px rgba(0,0,0,.18)"><h4 class="m-mono" style="text-transform:uppercase;font-size:10px;letter-spacing:.08em;color:var(--text-muted)">activity 24h</h4><div class="m-heat"></div></div><div class="m-card" style="margin:0;border:0;box-shadow:0 1px 3px rgba(0,0,0,.18)"><h4 class="m-mono" style="text-transform:uppercase;font-size:10px;letter-spacing:.08em;color:var(--text-muted)">live stream</h4><table class="m-tbl"><tr><td>00:28:23</td><td>mailoney</td><td>203.0.113.122</td></tr><tr><td>00:28:19</td><td>cowrie</td><td>123.188.73.228</td></tr><tr><td>00:28:11</td><td>dionaea</td><td>213.176.26.114</td></tr></table></div><div class="m-card" style="margin:0;border:0;box-shadow:0 1px 3px rgba(0,0,0,.18)"><h4 class="m-mono" style="text-transform:uppercase;font-size:10px;letter-spacing:.08em;color:var(--text-muted)">attack origins</h4><div class="m-map" style="height:90px"></div></div><div class="m-card" style="margin:0;border:0;box-shadow:0 1px 3px rgba(0,0,0,.18)"><h4 class="m-mono" style="text-transform:uppercase;font-size:10px;letter-spacing:.08em;color:var(--text-muted)">sensors</h4><div class="m-mono" style="font-size:11px;color:var(--text-secondary)">dionaea 3.1M · suricata 1.4M · cowrie 768k · multipot 131k · +25</div></div></div></div></div></div>
+</div></section>
+<section class="el" data-el="events"><h2>Event explorer page</h2><div class="opts">
+
+<div class="opt" data-opt="A"><span class="tag">EV-A</span><span class="vtag base">base</span><h3>Current — inline JSON per row</h3><p class="why">Every row carries its full normalized record inline (#1447). Total evidence, but one event fills the screen.</p>
+<div class="prev"><div class="mock">
+  <div class="m-title">event explorer</div><p class="m-sub">297,122 events · filter · export CSV</p>
+  <div class="m-card"><table class="m-tbl"><tr><th>time</th><th>sensor</th><th>source ip</th><th>detail</th></tr><tr><td>00:28:23</td><td>mailoney</td><td>203.0.113.122</td><td>DATA: 6 bytes saved</td></tr></table>
+  <div class="m-json" style="margin-top:10px">{"Time":"2026-08-17 00:28:23","Sensor":"mailoney","SrcIP":"203.0.113.122",<br>"Country":"DE","Proto":"smtp","Port":"25","Detail":"DATA: 6 bytes saved…",<br>"Kibana":"https://…","EveBox":"https://…","Arkime":"https://…"}</div>
+  <div style="margin-top:8px"><span class="m-chip">persona nexusai-gpu01</span><span class="m-chip">session 76439b93</span><span class="m-chip">AS4837</span></div></div>
+</div></div></div>
+
+<div class="opt" data-opt="B"><span class="tag">EV-B</span><span class="vtag new">new · claude</span><h3>Master–detail — list + sticky record pane</h3><p class="why">Dense table left, full normalized record permanently open on the right (claude's artifact-panel pattern). Keeps #1447's "no click to see evidence" while restoring table density.</p>
+<div class="prev"><div class="mock">
+  <div class="m-toolrow"><div class="m-title m-serif" style="font-size:26px">Events</div><div><span class="m-chip">297,122</span><span class="m-btn sec">Filter</span> <span class="m-btn sec">Export</span></div></div>
+  <div style="display:grid;grid-template-columns:1.1fr 1fr;gap:14px">
+    <div class="m-card" style="margin:0"><table class="m-tbl"><tr><th>time</th><th>sensor</th><th>source ip</th><th>detail</th></tr><tr class="sel"><td>00:28:23</td><td>mailoney</td><td>203.0.113.122</td><td>DATA: 6 bytes…</td></tr><tr><td>00:28:19</td><td>cowrie</td><td>123.188.73.228</td><td>login.success</td></tr><tr><td>00:28:11</td><td>dionaea</td><td>213.176.26.114</td><td>smb :445</td></tr><tr><td>00:27:58</td><td>suricata</td><td>45.156.87.34</td><td>ET SCAN</td></tr><tr><td>00:27:41</td><td>multipot</td><td>172.98.32.65</td><td>vnc probe</td></tr></table></div>
+    <div class="m-card" style="margin:0;border-color:var(--border-strong)"><h4>Normalized event</h4><div class="m-json">{"Time":"2026-08-17 00:28:23",<br>"Sensor":"mailoney","SrcIP":"203.0.113.122",<br>"Country":"DE","Proto":"smtp","Port":"25"}</div><div style="margin-top:10px"><span class="m-chip">attacker profile</span><span class="m-chip">session replay</span><span class="m-chip">Kibana ↗</span></div></div>
+  </div>
+</div></div></div>
+
+<div class="opt" data-opt="C"><span class="tag">EV-C</span><span class="vtag new">new</span><h3>Compact rows + evidence drawer</h3><p class="why">Table stays a table; the selected row opens a structured drawer (meta groups + pivots, JSON behind a toggle). Most rows per screen with evidence one keystroke away.</p>
+<div class="prev"><div class="mock">
+  <div class="m-toolrow"><div class="m-title m-serif" style="font-size:26px">Events</div><span class="m-btn sec">Filter</span></div>
+  <div class="m-card"><table class="m-tbl">
+    <tr><th>time</th><th>sensor</th><th>source ip</th><th>port</th><th>detail</th></tr>
+    <tr><td>00:28:23</td><td>mailoney</td><td>203.0.113.122</td><td>25</td><td>DATA: 6 bytes saved</td></tr>
+    <tr class="sel"><td>00:28:19</td><td>cowrie</td><td>123.188.73.228</td><td>23</td><td>login.success: root/juantech</td></tr>
+  </table>
+  <div style="border-left:2px solid var(--accent);margin:0 0 0 10px;padding:12px 16px;background:var(--surface-2);border-radius:0 10px 10px 0">
+    <div class="m-row" style="gap:26px;font-size:12.5px">
+      <div><b style="font-size:11px;color:var(--text-muted)">DECOY</b><br>nexusai-gpu01 · berlin-ml</div>
+      <div><b style="font-size:11px;color:var(--text-muted)">PIVOT</b><br>session 76439b93 · credentials</div>
+      <div><b style="font-size:11px;color:var(--text-muted)">ORIGIN</b><br>AS4837 China Unicom · CN</div>
+      <div><b style="font-size:11px;color:var(--text-muted)">ACTIONS</b><br>replay · Kibana · Arkime · JSON ▾</div>
+    </div></div>
+  <table class="m-tbl"><tr><td>00:28:11</td><td>dionaea</td><td>213.176.26.114</td><td>445</td><td>smb connect</td></tr><tr><td>00:27:58</td><td>suricata</td><td>45.156.87.34</td><td>22</td><td>ET SCAN</td></tr></table></div>
+</div></div></div>
+
+<div class="opt" data-opt="D"><span class="tag">EV-D</span><span class="vtag new">new · claude</span><h3>Timeline stream — chat-style grouping</h3><p class="why">Events as a time-grouped feed (claude conversation rhythm): minute headers, event cards under each. Reads as a story; best for tailing, not for bulk triage.</p>
+<div class="prev"><div class="mock" style="max-width:900px;margin:0 auto">
+  <div class="m-title m-serif" style="font-size:26px;margin-bottom:16px">Event stream</div>
+  <div style="color:var(--text-muted);font-size:12px;margin:12px 0 6px">— 00:28 —</div>
+  <div class="m-card" style="margin-bottom:8px"><div class="m-row" style="justify-content:space-between"><div><span class="m-chip">mailoney</span> <b>203.0.113.122</b> <span style="color:var(--text-secondary)">DATA: 6 bytes saved → .eml</span></div><span class="m-mono" style="color:var(--text-muted)">:23s</span></div></div>
+  <div class="m-card" style="margin-bottom:8px"><div class="m-row" style="justify-content:space-between"><div><span class="m-chip">cowrie</span> <b>123.188.73.228</b> <span style="color:var(--text-secondary)">login.success root/juantech · session 76439b93</span></div><span class="m-mono" style="color:var(--text-muted)">:19s</span></div></div>
+  <div style="color:var(--text-muted);font-size:12px;margin:12px 0 6px">— 00:27 —</div>
+  <div class="m-card" style="margin-bottom:8px"><div class="m-row" style="justify-content:space-between"><div><span class="m-chip">dionaea</span> <b>213.176.26.114</b> <span style="color:var(--text-secondary)">smb connect :445</span></div><span class="m-mono" style="color:var(--text-muted)">:58s</span></div></div>
+</div></div></div>
+  <div class="opt" data-opt="E"><span class="tag">EV-E</span><span class="vtag new">new · claude</span><h3>Floating inspector overlay</h3><p class="why">Full-width table; the selected record opens as a floating claude-style panel overlapping the right edge — table width never shrinks.</p>
+    <div class="prev"><div class="mock"><div class="m-toolrow"><div class="m-title m-serif" style="font-size:26px">Events</div><span class="m-btn sec">Filter</span></div><div style="position:relative"><div class="m-card"><table class="m-tbl"><tr><th>time</th><th>sensor</th><th>source ip</th><th>port</th><th>detail</th></tr><tr class="sel"><td>00:28:23</td><td>mailoney</td><td>203.0.113.122</td><td>25</td><td>DATA: 6 bytes saved</td></tr><tr><td>00:28:19</td><td>cowrie</td><td>123.188.73.228</td><td>23</td><td>login.success</td></tr><tr><td>00:28:11</td><td>dionaea</td><td>213.176.26.114</td><td>445</td><td>smb connect</td></tr><tr><td>00:27:58</td><td>suricata</td><td>45.156.87.34</td><td>22</td><td>ET SCAN</td></tr></table></div><div style="position:absolute;top:-8px;right:-6px;width:340px;border-radius:16px;background:var(--surface-raised);box-shadow:0 12px 44px rgba(0,0,0,.4);padding:14px"><b style="font-size:13px">Normalized event</b><span style="float:right;opacity:.6">✕</span><div class="m-json" style="margin-top:8px">{"Sensor":"mailoney","SrcIP":"203.0.113.122","Proto":"smtp"}</div></div></div></div></div></div>
+  <div class="opt" data-opt="F"><span class="tag">EV-F</span><span class="vtag mix">claude × v3</span><h3>Dense mono + bottom drawer</h3><p class="why">v3 mono table on top; the selected record expands a pinned bottom drawer with mono field groups — vertical, never side-by-side.</p>
+    <div class="prev"><div class="mock"><div class="m-toolrow"><div class="m-title m-serif" style="font-size:26px">Events</div><span class="m-chip">297,122</span></div><div class="m-card" style="border:0;box-shadow:0 1px 3px rgba(0,0,0,.18)"><table class="m-tbl" style="font-family:var(--font-mono)"><tr><th>time</th><th>sensor</th><th>src</th><th>port</th><th>detail</th></tr><tr><td>00:28:23</td><td>mailoney</td><td>203.0.113.122</td><td>25</td><td>DATA saved</td></tr><tr class="sel"><td>00:28:19</td><td>cowrie</td><td>123.188.73.228</td><td>23</td><td>login.success</td></tr><tr><td>00:28:11</td><td>dionaea</td><td>213.176.26.114</td><td>445</td><td>smb</td></tr></table></div><div class="m-card" style="border:0;box-shadow:0 -2px 12px rgba(0,0,0,.22);border-top:2px solid var(--accent);margin-top:2px"><div class="m-mono" style="font-size:11px;color:var(--text-secondary)"><span style="color:var(--text-muted)">SESSION</span> 76439b93 · <span style="color:var(--text-muted)">CREDS</span> root/juantech · <span style="color:var(--text-muted)">ORIGIN</span> AS4837 CN · <span style="color:var(--accent)">[replay] [profile] [kibana] [json]</span></div></div></div></div></div>
+</div></section>
+<section class="el" data-el="sources"><h2>Attack sources page</h2><div class="opts">
+
+<div class="opt" data-opt="A"><span class="tag">AS-A</span><span class="vtag base">base</span><h3>Current — flat table</h3><p class="why">One sortable table: events, ip, cc, logins, sessions, sensors hit, first/last seen.</p>
+<div class="prev"><div class="mock">
+  <div class="m-title">Source IPs</div><p class="m-sub">1,676 unique IPs · export CSV · filter</p>
+  <div class="m-card"><table class="m-tbl"><tr><th>events</th><th>source ip</th><th>cc</th><th>logins</th><th>sensors hit</th><th>last seen</th></tr>
+  <tr><td>73,829</td><td>123.188.73.228</td><td>CN</td><td>14,319</td><td>beelzebub cisco-asa conpot cowrie dionaea +5</td><td>00:15</td></tr>
+  <tr><td>27,263</td><td>172.110.223.159</td><td>HK</td><td>0</td><td>dionaea</td><td>21:49</td></tr>
+  <tr><td>6,977</td><td>203.0.113.122</td><td>DE</td><td>1,589</td><td>beelzebub conpot cowrie mailoney +4</td><td>00:28</td></tr></table></div>
+</div></div></div>
+
+<div class="opt" data-opt="B"><span class="tag">AS-B</span><span class="vtag new">new · claude</span><h3>Leaderboard cards</h3><p class="why">Ranked slabs with share-bars and chips (claude projects-card feel). Instantly shows the whales; less columnar data per row.</p>
+<div class="prev"><div class="mock" style="max-width:1000px;margin:0 auto">
+  <div class="m-toolrow"><div class="m-title m-serif" style="font-size:26px">Attack sources</div><span class="m-ghostbtn">Sort by events ▾</span></div>
+  <div class="m-card"><div class="m-row" style="justify-content:space-between"><div><b class="m-mono" style="font-size:16px">#1 · 123.188.73.228</b> <span class="m-chip">CN</span> <span class="m-chip warn">14,319 logins</span> <span class="m-chip">12 sensors</span></div><b>73,829</b></div><div class="m-bar" style="width:92%;margin-top:10px"></div></div>
+  <div class="m-card"><div class="m-row" style="justify-content:space-between"><div><b class="m-mono" style="font-size:16px">#2 · 172.110.223.159</b> <span class="m-chip">HK</span> <span class="m-chip">dionaea only</span></div><b>27,263</b></div><div class="m-bar" style="width:34%;margin-top:10px;opacity:.5"></div></div>
+  <div class="m-card"><div class="m-row" style="justify-content:space-between"><div><b class="m-mono" style="font-size:16px">#3 · 203.0.113.122</b> <span class="m-chip">DE</span> <span class="m-chip warn">1,589 logins</span> <span class="m-chip">8 sensors</span></div><b>6,977</b></div><div class="m-bar" style="width:9%;margin-top:10px;opacity:.5"></div></div>
+</div></div></div>
+
+<div class="opt" data-opt="C"><span class="tag">AS-C</span><span class="vtag new">new</span><h3>Map-first split</h3><p class="why">Geography as the hero, table beneath it. Where-then-who ordering; the map finally earns its size.</p>
+<div class="prev"><div class="mock">
+  <div class="m-toolrow"><div class="m-title m-serif" style="font-size:26px">Attack sources</div><span class="m-chip">1,676 IPs</span></div>
+  <div class="m-card"><div class="m-map" style="height:180px"></div></div>
+  <div class="m-card"><table class="m-tbl"><tr><th>events</th><th>source ip</th><th>cc</th><th>last seen</th></tr><tr><td>73,829</td><td>123.188.73.228</td><td>CN</td><td>00:15</td></tr><tr><td>27,263</td><td>172.110.223.159</td><td>HK</td><td>21:49</td></tr></table></div>
+</div></div></div>
+  <div class="opt" data-opt="D"><span class="tag">AS-D</span><span class="vtag new">new · claude</span><h3>Profile card grid</h3><p class="why">Every source is a project-style card in a 3-across grid — claude’s projects page applied to attackers.</p>
+    <div class="prev"><div class="mock"><div class="m-toolrow"><div class="m-title m-serif" style="font-size:26px">Attack sources</div><span class="m-ghostbtn">Sort ▾</span></div><div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px"><div class="m-card" style="margin:0;border:0;box-shadow:0 2px 10px rgba(0,0,0,.16)"><b class="m-mono">123.188.73.228</b><p class="m-sub" style="margin:4px 0 8px;font-size:12px">73,829 events · 12 sensors</p><span class="m-chip">CN</span><span class="m-chip warn">14,319 logins</span></div><div class="m-card" style="margin:0;border:0;box-shadow:0 2px 10px rgba(0,0,0,.16)"><b class="m-mono">172.110.223.159</b><p class="m-sub" style="margin:4px 0 8px;font-size:12px">27,263 events · dionaea only</p><span class="m-chip">HK</span></div><div class="m-card" style="margin:0;border:0;box-shadow:0 2px 10px rgba(0,0,0,.16)"><b class="m-mono">203.0.113.122</b><p class="m-sub" style="margin:4px 0 8px;font-size:12px">6,977 events · 8 sensors</p><span class="m-chip">DE</span><span class="m-chip warn">1,589 logins</span></div></div></div></div></div>
+  <div class="opt" data-opt="E"><span class="tag">AS-E</span><span class="vtag mix">claude × v3</span><h3>Mono leaderboard</h3><p class="why">Ranked mono rows with inline share bars — v3 density with claude’s single calm column.</p>
+    <div class="prev"><div class="mock" style="max-width:1000px;margin:0 auto"><div class="m-title m-serif" style="font-size:26px;margin-bottom:14px">Attack sources</div><div class="m-card" style="border:0;box-shadow:0 1px 3px rgba(0,0,0,.18)"><table class="m-tbl" style="font-family:var(--font-mono)"><tr><th>#</th><th>source</th><th>cc</th><th>events</th><th>share</th></tr><tr><td>1</td><td>123.188.73.228</td><td>CN</td><td>73,829</td><td><div class="m-bar" style="width:92%"></div></td></tr><tr><td>2</td><td>172.110.223.159</td><td>HK</td><td>27,263</td><td><div class="m-bar" style="width:34%;opacity:.5"></div></td></tr><tr><td>3</td><td>203.0.113.122</td><td>DE</td><td>6,977</td><td><div class="m-bar" style="width:9%;opacity:.5"></div></td></tr></table></div></div></div></div>
+</div></section>
+<section class="el" data-el="reports"><h2>Reports studio page</h2><div class="opts">
+
+<div class="opt" data-opt="A"><span class="tag">RP-A</span><span class="vtag base">base</span><h3>Current — numbered tabs + stacked sections</h3><p class="why">Horizontal step tabs, all sections stacked, sticky action bar at the bottom.</p>
+<div class="prev"><div class="mock">
+  <div class="m-title">Reports studio</div><p class="m-sub">Design themed, branded PDF reports from live telemetry.</p>
+  <div class="m-tabs"><i class="on">01 Design</i><i>02 Scope</i><i>03 Schedule</i><i>04 Branding</i><i>05 Library</i></div>
+  <div class="m-card"><h4>Start from a template</h4><div class="m-row"><span class="m-chip">Executive report</span><span class="m-chip">Full security</span><span class="m-chip">Threat landscape</span><span class="m-chip">+6 more</span></div></div>
+  <div class="m-card"><h4>Report basics</h4><div class="m-row"><span class="m-chip">name</span><span class="m-chip">window: 24h</span><span class="m-chip ok">PDF: dark</span></div></div>
+  <div class="m-card" style="border-color:var(--border-strong)"><span class="m-btn">Save definition</span> <span class="m-btn sec">Generate now</span> <span class="m-btn sec">Reset</span></div>
+</div></div></div>
+
+<div class="opt" data-opt="B"><span class="tag">RP-B</span><span class="vtag new">new · claude</span><h3>Settings-rail — vertical steps left</h3><p class="why">claude.ai settings pattern: steps as a left rail, one section at a time on the right, actions pinned top-right. Calmer, more room per section.</p>
+<div class="prev"><div class="mock">
+  <div class="m-toolrow"><div class="m-title m-serif" style="font-size:26px">Reports</div><div><span class="m-btn sec">Save</span> <span class="m-btn">Generate</span></div></div>
+  <div style="display:grid;grid-template-columns:200px 1fr;gap:18px">
+    <div><div class="m-railstep on">Design</div><div class="m-railstep">Scope</div><div class="m-railstep">Schedule</div><div class="m-railstep">Branding</div><div class="m-railstep">Library</div></div>
+    <div class="m-card" style="margin:0"><h4>Start from a template</h4><div style="display:grid;grid-template-columns:repeat(3,1fr);gap:10px"><div class="m-card" style="margin:0"><b style="font-size:13px">Executive report</b><p class="m-sub" style="margin:4px 0 0;font-size:12px">Management-ready summary…</p></div><div class="m-card" style="margin:0"><b style="font-size:13px">Full security</b><p class="m-sub" style="margin:4px 0 0;font-size:12px">Complete defensive picture…</p></div><div class="m-card" style="margin:0"><b style="font-size:13px">Custom</b><p class="m-sub" style="margin:4px 0 0;font-size:12px">Blank canvas…</p></div></div></div>
+  </div>
+</div></div></div>
+
+<div class="opt" data-opt="C"><span class="tag">RP-C</span><span class="vtag new">new</span><h3>Wizard — one decision per screen</h3><p class="why">Centered single step with progress dots and a big next action (claude onboarding feel). Slowest but most guided; good for rarely-used flows.</p>
+<div class="prev"><div class="mock" style="max-width:760px;margin:0 auto;text-align:center;padding-top:40px">
+  <div style="color:var(--text-muted);font-size:12px;letter-spacing:.1em">STEP 1 OF 4 · ● ○ ○ ○</div>
+  <div class="m-title m-serif" style="font-size:30px;margin:14px 0 6px">What kind of report?</div>
+  <p class="m-sub">Pick the closest starting point — everything stays adjustable.</p>
+  <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:12px;text-align:left;margin:20px 0">
+    <div class="m-card" style="margin:0;border-color:var(--accent)"><b>Executive report</b><p class="m-sub" style="margin:4px 0 0;font-size:12.5px">Headline metrics, assessment, findings, recommendations.</p></div>
+    <div class="m-card" style="margin:0"><b>Full security report</b><p class="m-sub" style="margin:4px 0 0;font-size:12.5px">Every metric, ranking, alert and a bounded evidence appendix.</p></div>
+  </div>
+  <span class="m-btn">Continue →</span>
+</div></div></div>
+  <div class="opt" data-opt="D"><span class="tag">RP-D</span><span class="vtag new">new · claude</span><h3>Document editor</h3><p class="why">The report definition reads as a claude-style document: serif section headings in one scrolling column, outline rail left, actions top-right.</p>
+    <div class="prev"><div class="mock"><div class="m-toolrow"><div class="m-title m-serif" style="font-size:26px">Executive report</div><div><span class="m-btn sec">Save</span> <span class="m-btn">Generate</span></div></div><div style="display:grid;grid-template-columns:170px 1fr;gap:18px"><div><div class="m-railstep on">Design</div><div class="m-railstep">Scope</div><div class="m-railstep">Schedule</div><div class="m-railstep">Branding</div></div><div style="max-width:760px"><div class="m-title m-serif" style="font-size:19px">Design</div><p class="m-sub" style="font-size:12.5px">Management-ready summary. Dark PDF theme.</p><div class="m-title m-serif" style="font-size:19px;margin-top:14px">Scope</div><p class="m-sub" style="font-size:12.5px">Last 24h · all sensors · include evidence appendix.</p><div class="m-title m-serif" style="font-size:19px;margin-top:14px">Schedule</div><p class="m-sub" style="font-size:12.5px">Every Monday 06:00 → email to ops@…</p></div></div></div></div></div>
+  <div class="opt" data-opt="E"><span class="tag">RP-E</span><span class="vtag mix">claude × v3</span><h3>Split live preview</h3><p class="why">Mono config summary left, an actual page preview right — every change repaints the thumbnail (v3 precision, claude calm).</p>
+    <div class="prev"><div class="mock"><div class="m-toolrow"><div class="m-title m-serif" style="font-size:26px">Reports</div><span class="m-btn">Generate</span></div><div style="display:grid;grid-template-columns:1fr 320px;gap:16px"><div class="m-card" style="margin:0;border:0;box-shadow:0 1px 3px rgba(0,0,0,.18)"><div class="m-mono" style="font-size:11.5px;line-height:2;color:var(--text-secondary)">template: <span style="color:var(--accent)">executive</span><br>window: 24h · sensors: all<br>theme: dark · logo: apiary.svg<br>schedule: mon 06:00 UTC<br>sections: metrics, findings, recs</div></div><div class="m-card" style="margin:0;border:0;box-shadow:0 2px 12px rgba(0,0,0,.25);background:var(--surface-2)"><div style="background:var(--surface-0);border-radius:8px;height:200px;padding:12px"><div class="m-bar" style="width:55%;margin-bottom:8px"></div><div class="m-spark" style="height:30px"><i style="height:40%"></i><i style="height:70%"></i><i style="height:55%"></i><i style="height:90%"></i><i style="height:35%"></i></div><div style="margin-top:10px" class="m-mono"><div class="m-bar" style="width:90%;opacity:.25;height:5px;margin:5px 0"></div><div class="m-bar" style="width:84%;opacity:.25;height:5px;margin:5px 0"></div><div class="m-bar" style="width:88%;opacity:.25;height:5px;margin:5px 0"></div></div></div></div></div></div></div></div>
+</div></section>
+
+
+<h2 style="font-size:16px;margin:40px 0 4px">Shell components</h2>
+<p style="color:var(--text-secondary);margin:0 0 16px;font-size:13.5px">Top bar, navbar, settings surface and action pop-outs.</p>
+
+<section class="el" data-el="topbar"><h2>11 · Top bar</h2><div class="opts">
+  <div class="opt" data-opt="A"><span class="tag">11A</span><span class="vtag base">base</span><h3>Stock</h3><p class="why">Bordered bar: sidebar toggle, search, centered page title, icon cluster + LIVE right.</p>
+    <div class="demo"><div class="sh-top"><span class="sh-ic">☰</span><span class="sh-ic">🔍</span><span class="grow" style="text-align:center;color:var(--text-primary)">Overview</span><span class="sh-ic">🕐</span><span class="sh-ic">📈</span><span class="sh-ic">🔔</span><span class="sh-ic">🖥</span><span class="sh-live">● LIVE</span></div></div></div>
+  <div class="opt" data-opt="B"><span class="tag">11B</span><span class="vtag new">new · claude</span><h3>Minimal breadcrumb</h3><p class="why">Transparent, blends into the page: breadcrumb left, LIVE + avatar right. Icons move into the sidebar/page.</p>
+    <div class="demo"><div class="sh-top" style="border-color:transparent;background:transparent"><span>Monitor <span style="opacity:.5">/</span> <b style="color:var(--text-primary)">Overview</b></span><span class="grow"></span><span class="sh-live">● LIVE</span><span class="sh-avatar">XO</span></div></div></div>
+  <div class="opt" data-opt="C"><span class="tag">11C</span><span class="vtag new">new · claude</span><h3>Command bar</h3><p class="why">Global search/jump front and center (⌘K energy); title lives in the page, icons right.</p>
+    <div class="demo"><div class="sh-top"><span class="sh-ic">☰</span><span class="grow" style="display:flex;justify-content:center"><span class="sh-search">🔍 Search or jump to… <span style="float:right;opacity:.6">⌘K</span></span></span><span class="sh-ic">🔔</span><span class="sh-live">● LIVE</span><span class="sh-avatar">XO</span></div></div></div>
+  <div class="opt" data-opt="D"><span class="tag">11D</span><span class="vtag new">new · claude</span><h3>No top bar</h3><p class="why">claude.ai-style: no bar at all. LIVE + alerts live in the sidebar; each page carries its own serif title row with actions.</p>
+    <div class="demo"><div style="display:flex;gap:12px"><div class="sh-side" style="width:150px;padding:8px"><a class="on">🏠 Overview</a><a>🔔 Alerts <span class="cnt">200</span></a><div style="margin-top:8px;padding:6px 9px;font-size:11px" class="sh-live">● LIVE · 29 sensors</div></div><div style="flex:1"><div class="m-title m-serif" style="font-size:22px">Overview</div><p class="m-sub" style="margin:2px 0 0">Page owns its title + actions — nothing above it.</p></div></div></div></div>
+  <div class="opt" data-opt="E"><span class="tag">11E</span><span class="vtag new">new · claude</span><h3>Floating pill bar</h3><p class="why">Detached rounded bar floating over the page: breadcrumb, LIVE, avatar — nothing else.</p>
+    <div class="demo"><div class="sh-top" style="border:0;border-radius:999px;box-shadow:0 2px 10px rgba(0,0,0,.22);background:var(--surface-1)"><span>Monitor <span style="opacity:.5">/</span> <b style="color:var(--text-primary)">Overview</b></span><span class="grow"></span><span class="sh-live">● LIVE</span><span class="sh-avatar">XO</span></div></div></div>
+  <div class="opt" data-opt="F"><span class="tag">11F</span><span class="vtag mix">claude × v3</span><h3>Mono status strip</h3><p class="why">One thin terminal strip: path, sensor count, live dot, UTC clock — maximum content height.</p>
+    <div class="demo"><div class="sh-top" style="border:0;background:var(--surface-0);border-radius:6px;padding:4px 12px;font-family:var(--font-mono);font-size:11px"><span style="color:var(--accent)">apiary</span><span style="opacity:.6">/overview</span><span class="grow"></span><span>29 sensors</span><span style="color:var(--success)">● live</span><span>13:37:02Z</span></div></div></div>
+</div></section>
+
+<section class="el" data-el="navbar"><h2>12 · Navbar (sidebar)</h2><div class="opts">
+  <div class="opt" data-opt="A"><span class="tag">12A</span><span class="vtag base">base</span><h3>Stock</h3><p class="why">Brand, MONITOR/INVESTIGATE/… labels, flat links, profile card bottom.</p>
+    <div class="demo"><div class="sh-side"><div style="padding:4px 6px"><b>🐝 APIARY</b></div><div class="lbl">Monitor</div><a class="on">Overview</a><a>ML anomalies</a><div class="lbl">Investigate</div><a>Event explorer</a><a>Attack sources</a><div style="border-top:1px solid var(--border-subtle);margin-top:8px;padding:6px 6px 0;font-size:12px">XO xore · admin</div></div></div></div>
+  <div class="opt" data-opt="B"><span class="tag">12B</span><span class="vtag new">new · claude</span><h3>Claude rail</h3><p class="why">Segmented mode toggle, one primary action ("Investigate…"), quiet pills, recents; profile bottom.</p>
+    <div class="demo"><div class="sh-side"><div class="sh-seg"><i class="on">Monitor</i><i>Hunt</i></div><span class="sh-new">+ Investigate…</span><a class="on">🏠 Overview</a><a>⚡ Events</a><a>🌍 Sources</a><div class="lbl">Recent</div><a style="font-size:12px">203.0.113.122</a><a style="font-size:12px">session 76439b93</a></div></div></div>
+  <div class="opt" data-opt="C"><span class="tag">12C</span><span class="vtag new">new</span><h3>Icon rail + flyout</h3><p class="why">52px icon-only rail; group flyout on hover. Maximum content width all the time.</p>
+    <div class="demo"><div style="display:flex;gap:10px;align-items:flex-start"><div class="sh-rail"><span class="sh-ic on">🏠</span><span class="sh-ic">⚡</span><span class="sh-ic">🌍</span><span class="sh-ic">📄</span><span class="sh-ic">⚙</span></div><div class="sh-fly">Investigate ▸<br><span style="opacity:.7;font-size:11.5px">Events · Sources · Campaigns · Clusters</span></div></div></div></div>
+  <div class="opt" data-opt="D"><span class="tag">12D</span><span class="vtag new">new</span><h3>Accordion groups + counts</h3><p class="why">Collapsible sections with live count chips (alerts, anomalies) — nav doubles as status.</p>
+    <div class="demo"><div class="sh-side"><a><b style="color:var(--text-primary)">▾ Monitor</b></a><a class="on" style="margin-left:10px">Overview</a><a style="margin-left:10px">Alerts <span class="cnt">200</span></a><a><b style="color:var(--text-primary)">▸ Investigate</b></a><a><b style="color:var(--text-primary)">▸ Evidence</b><span class="cnt" style="background:var(--info-soft);color:var(--info-text-on-soft)">1,286</span></a></div></div></div>
+  <div class="opt" data-opt="E"><span class="tag">12E</span><span class="vtag new">new · claude</span><h3>Claude minimal rail</h3><p class="why">Borderless rail: serif brand, raised-pill active, recents — the quietest possible sidebar.</p>
+    <div class="demo"><div class="sh-side" style="border:0;background:transparent"><div style="padding:4px 6px;font-family:Georgia,serif;font-size:15px">Apiary</div><a class="on" style="border-radius:10px;background:var(--surface-raised);box-shadow:0 1px 4px rgba(0,0,0,.16)">🏠 Overview</a><a>⚡ Events</a><a>🌍 Sources</a><div class="lbl">Recents</div><a style="font-size:12px">203.0.113.122</a><a style="font-size:12px">session 76439b93</a></div></div></div>
+  <div class="opt" data-opt="F"><span class="tag">12F</span><span class="vtag mix">claude × v3</span><h3>Mono tree</h3><p class="why">Terminal tree: lowercase mono labels, accent chevron marks the active node, group micro-caps.</p>
+    <div class="demo"><div class="sh-side" style="font-family:var(--font-mono);font-size:11.5px"><div style="padding:2px 6px;color:var(--accent)">apiary//ops</div><div class="lbl">monitor</div><a class="on" style="color:var(--accent);padding:3px 9px">▸ overview</a><a style="padding:3px 9px">ml-anomalies</a><div class="lbl">investigate</div><a style="padding:3px 9px">events</a><a style="padding:3px 9px">sources</a></div></div></div>
+</div></section>
+
+<section class="el" data-el="settings"><h2>13 · Dashboard settings surface</h2><div class="opts">
+  <div class="opt" data-opt="A"><span class="tag">13A</span><span class="vtag base">base</span><h3>Stock modal</h3><p class="why">Centered overlay dialog, left rail (Personal/Administration), content right.</p>
+    <div class="demo"><div class="sh-modal" style="display:flex;max-width:420px"><div style="width:130px;border-right:1px solid var(--border-subtle);padding:10px;font-size:12px"><div class="lbl" style="font-size:9px;letter-spacing:.08em;color:var(--text-muted)">PERSONAL</div><div style="background:var(--surface-2);border-radius:6px;padding:3px 8px;margin:3px 0">Appearance</div><div style="padding:3px 8px">Account</div><div class="lbl" style="font-size:9px;letter-spacing:.08em;color:var(--text-muted);margin-top:6px">ADMIN</div><div style="padding:3px 8px">Users</div></div><div style="flex:1;padding:12px"><b style="font-size:13px">Appearance</b><p class="m-sub" style="font-size:11.5px;margin:4px 0 8px">Theme, density, motion.</p><span class="m-chip">System</span><span class="m-chip ok">Dark</span><span class="m-chip">Light</span></div></div></div></div>
+  <div class="opt" data-opt="B"><span class="tag">13B</span><span class="vtag new">new · claude</span><h3>Full settings page</h3><p class="why">claude.ai pattern: /settings is a normal page in the shell — deep-linkable, no overlay, more room.</p>
+    <div class="demo"><div style="display:flex;gap:12px"><div class="sh-side" style="width:120px;font-size:12px"><a class="on">Appearance</a><a>Navigation</a><a>Time & live</a><a>Users</a><a>Services</a></div><div style="flex:1"><div class="m-title m-serif" style="font-size:20px">Settings</div><div class="m-card" style="margin-top:8px;padding:12px"><b style="font-size:12.5px">Color theme</b><div style="margin-top:6px"><span class="m-chip">System</span><span class="m-chip ok">Dark</span><span class="m-chip">Light</span></div></div></div></div></div></div>
+  <div class="opt" data-opt="C"><span class="tag">13C</span><span class="vtag new">new</span><h3>Right drawer</h3><p class="why">Slide-over from the right; the page stays visible behind — quick tweaks without losing context.</p>
+    <div class="demo"><div style="display:flex;justify-content:flex-end;background:linear-gradient(90deg,var(--surface-0),transparent);border-radius:10px"><div class="sh-drawer" style="width:220px;padding:12px"><b style="font-size:13px">Settings</b><div class="lbl" style="margin-top:8px">Appearance ▾</div><div style="font-size:12px;padding:4px 0">Theme · Density · Motion</div><div class="lbl">Navigation ▸</div><div class="lbl">Live data ▸</div></div></div></div></div>
+  <div class="opt" data-opt="D"><span class="tag">13D</span><span class="vtag new">new · claude</span><h3>Search-first palette</h3><p class="why">Type to jump to any setting (the modal already has search — make it the primary way in).</p>
+    <div class="demo"><div class="sh-modal" style="max-width:380px;padding:12px"><div class="sh-search" style="max-width:none;margin-bottom:10px">🔍 theme…</div><div style="font-size:12.5px;color:var(--text-secondary)"><div style="background:var(--surface-2);border-radius:8px;padding:6px 10px;margin-bottom:4px;color:var(--text-primary)">🎨 Appearance → Color theme</div><div style="padding:6px 10px">📄 Report Studio → PDF theme</div><div style="padding:6px 10px">🗺 Map → Basemap style</div></div></div></div></div>
+  <div class="opt" data-opt="E"><span class="tag">13E</span><span class="vtag new">new · claude</span><h3>Airy settings page</h3><p class="why">Full page, serif title, floating borderless section cards, pill rail — claude.ai/settings verbatim.</p>
+    <div class="demo"><div style="display:flex;gap:12px"><div class="sh-side" style="width:110px;border:0;background:transparent;font-size:12px"><a class="on" style="border-radius:999px">Appearance</a><a>Navigation</a><a>Users</a></div><div style="flex:1"><div class="m-title m-serif" style="font-size:20px">Settings</div><div class="m-card" style="border:0;box-shadow:0 2px 10px rgba(0,0,0,.16);margin-top:8px;padding:12px;border-radius:14px"><b style="font-size:12.5px">Color theme</b><div style="margin-top:6px"><span class="m-chip">System</span><span class="m-chip ok">Dark</span><span class="m-chip">Light</span></div></div></div></div></div></div>
+  <div class="opt" data-opt="F"><span class="tag">13F</span><span class="vtag mix">claude × v3</span><h3>Dense config grid</h3><p class="why">All knobs on one screen as mono key:value tiles — v3’s everything-at-once philosophy.</p>
+    <div class="demo"><div class="sh-modal" style="max-width:430px;padding:10px;font-family:var(--font-mono);font-size:11px"><b style="color:var(--accent)">settings</b><div style="display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px"><div style="background:var(--surface-2);border-radius:6px;padding:6px 8px">theme: dark ▾</div><div style="background:var(--surface-2);border-radius:6px;padding:6px 8px">density: compact ▾</div><div style="background:var(--surface-2);border-radius:6px;padding:6px 8px">tz: UTC ▾</div><div style="background:var(--surface-2);border-radius:6px;padding:6px 8px">live: on ▾</div><div style="background:var(--surface-2);border-radius:6px;padding:6px 8px">clock: 24h ▾</div><div style="background:var(--surface-2);border-radius:6px;padding:6px 8px">motion: off ▾</div></div></div></div></div>
+</div></section>
+
+<section class="el" data-el="actions"><h2>14 · Action buttons (pop-out)</h2><div class="opts">
+  <div class="opt" data-opt="A"><span class="tag">14A</span><span class="vtag base">base</span><h3>Stock ⋮ dropdown</h3><p class="why">Kebab opens a headed list (Analysis / Open in) with icons and external targets.</p>
+    <div class="demo"><div style="display:flex;gap:10px;align-items:flex-start"><span class="sh-ic">⋮</span><div class="sh-dd"><div class="hd">Analysis</div><a>🧬 Static analysis</a><a>🛡 VirusTotal ↗</a><div class="hd">Open in</div><a>📊 Kibana ↗</a><a>📦 Arkime ↗</a></div></div></div></div>
+  <div class="opt" data-opt="B"><span class="tag">14B</span><span class="vtag new">new · claude</span><h3>Hover row actions</h3><p class="why">claude message pattern: icons fade in on row hover — copy, replay, profile, open-in. No menu for the common three.</p>
+    <div class="demo"><table class="m-tbl"><tr><td>00:28:23</td><td>cowrie</td><td>123.188.73.228</td><td><div class="sh-rowact"><span class="sh-ic" title="copy">⧉</span><span class="sh-ic" title="replay">▶</span><span class="sh-ic" title="profile">👤</span><span class="sh-ic" title="more">⋮</span></div></td></tr></table></div></div>
+  <div class="opt" data-opt="C"><span class="tag">14C</span><span class="vtag new">new</span><h3>Icon-grid sheet</h3><p class="why">Click opens a compact labeled grid — faster to scan than a list, still one target per tool.</p>
+    <div class="demo"><div class="sh-grid"><a>🧬<span>Static</span></a><a>🛡<span>VirusTotal</span></a><a>▶<span>Replay</span></a><a>📊<span>Kibana</span></a><a>🛰<span>EveBox</span></a><a>📦<span>Arkime</span></a></div></div></div>
+  <div class="opt" data-opt="D"><span class="tag">14D</span><span class="vtag new">new</span><h3>Split button</h3><p class="why">Most-likely action visible (Investigate), caret for the rest — one click for the 90% case.</p>
+    <div class="demo"><div class="sh-split"><b>Investigate</b><i>▾</i></div>&nbsp;&nbsp;<span style="color:var(--text-muted);font-size:12px">▾ opens: replay · static analysis · Kibana · Arkime</span></div></div>
+  <div class="opt" data-opt="E"><span class="tag">14E</span><span class="vtag new">new · claude</span><h3>Floating toolbar</h3><p class="why">claude’s hover toolbar: a raised pill of icons floats above the hovered row.</p>
+    <div class="demo"><div style="display:inline-flex;gap:2px;background:var(--surface-raised);border-radius:999px;box-shadow:0 4px 16px rgba(0,0,0,.28);padding:4px 6px"><span class="sh-ic" style="background:transparent">⧉</span><span class="sh-ic" style="background:transparent">▶</span><span class="sh-ic" style="background:transparent">👤</span><span class="sh-ic" style="background:transparent">📊</span><span class="sh-ic" style="background:transparent">⋮</span></div><div style="margin-top:6px;color:var(--text-muted);font-size:11.5px">floats above the hovered row</div></div></div>
+  <div class="opt" data-opt="F"><span class="tag">14F</span><span class="vtag mix">claude × v3</span><h3>Inline mono verbs</h3><p class="why">Actions as [ bracketed ] mono verbs in the row itself — zero chrome, zero popups for the common three.</p>
+    <div class="demo"><table class="m-tbl"><tr><td>00:28:23</td><td>cowrie</td><td>123.188.73.228</td><td class="m-mono" style="font-size:11px"><span style="color:var(--accent)">[copy]</span> <span style="color:var(--accent)">[replay]</span> <span style="color:var(--accent)">[profile]</span> <span style="color:var(--accent)">[+4]</span></td></tr></table></div></div>
+</div></section>
+
+<script>
+const KEY='apiary-design-picks';
+const picks=JSON.parse(localStorage.getItem(KEY)||'{}');
+const render=()=>{
+  document.querySelectorAll('section.el').forEach(sec=>{
+    const el=sec.dataset.el;
+    sec.querySelectorAll('.opt').forEach(o=>o.classList.toggle('picked',picks[el]===o.dataset.opt));
+  });
+  const list=Object.entries(picks).map(([k,v])=>`${k}:${v}`).join('  ');
+  document.getElementById('picklist').textContent=list||'none yet';
+};
+document.querySelectorAll('section.el').forEach(sec=>{
+  sec.querySelectorAll('.opt').forEach(o=>o.addEventListener('click',()=>{
+    const el=sec.dataset.el;
+    picks[el]=picks[el]===o.dataset.opt?undefined:o.dataset.opt;
+    if(!picks[el])delete picks[el];
+    localStorage.setItem(KEY,JSON.stringify(picks));render();
+  }));
+});
+document.getElementById('copy').onclick=()=>{navigator.clipboard.writeText('design picks → '+JSON.stringify(picks));};
+document.getElementById('clear').onclick=()=>{localStorage.removeItem(KEY);Object.keys(picks).forEach(k=>delete picks[k]);render();};
+render();
+</script>
+</body>
+</html>
diff --git a/docs/design-lab/playground/index.html b/docs/design-lab/playground/index.html
new file mode 100644
index 000000000..07496a839
--- /dev/null
+++ b/docs/design-lab/playground/index.html
@@ -0,0 +1,86 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>APIARY Design Lab</title>
+<style>
+  :root{--bg:#20201f;--card:#2c2c2a;--card2:#343432;--text:#e9e6df;--muted:#a8a49c;--accent:#d97757;--border:rgba(255,255,255,.09)}
+  *{box-sizing:border-box}
+  body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 "Fira Sans",system-ui,sans-serif;padding:32px}
+  h1{font-size:26px;margin:0 0 4px}
+  h1 span{color:var(--accent)}
+  p.sub{color:var(--muted);margin:0 0 28px}
+  h2{font-size:15px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:34px 0 12px}
+  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
+  .card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px 20px}
+  .card h3{margin:0 0 4px;font-size:17px}
+  .card .tag{display:inline-block;font-size:11px;letter-spacing:.05em;border-radius:999px;padding:2px 10px;margin-left:8px;vertical-align:2px;background:rgba(217,119,87,.16);color:#e38f74}
+  .card p{color:var(--muted);font-size:13.5px;margin:6px 0 12px}
+  .links{display:flex;flex-wrap:wrap;gap:8px}
+  a.btn{color:var(--text);text-decoration:none;font-size:13px;background:var(--card2);border:1px solid var(--border);border-radius:8px;padding:5px 12px}
+  a.btn:hover{border-color:var(--accent);color:#fff}
+  a.btn.primary{background:var(--accent);color:#211a17;font-weight:600;border-color:transparent}
+  .cmp{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
+  small.note{color:var(--muted);display:block;margin-top:26px}
+  code{background:var(--card2);border-radius:5px;padding:1px 6px;font-family:"Fira Code",monospace;font-size:12.5px}
+</style>
+</head>
+<body>
+<h1>APIARY <span>Design Lab</span></h1>
+<p class="sub">Live dashboard variants running against the real homeserver Elasticsearch (read-only). Pick pages, compare split-screen, choose winners.</p>
+
+<h2>Variants</h2>
+<div class="grid" id="variants"></div>
+
+<p style="margin:14px 0 0"><a class="btn primary" href="elements.html">Design Picker — elements + page layouts, click your choices →</a></p>
+<h2>Split compare (drag the divider)</h2>
+<div class="cmp" id="compares"></div>
+
+<h2>Notes</h2>
+<div class="card">
+  <p style="margin:0">
+    Every variant is the <em>real</em> dashboard binary — full navigation works inside each. The only difference is
+    <code>theme.css</code> (Xore/theme). v1 keeps the stock look and only fixes layout (viewport-filling cards,
+    sticky table headers, no mid-value wraps). v2 and v3 are taste directions layered on top of the same fixes.
+    Winners get ported into <code>Xore/theme</code> properly (tokens + structured rules, light theme included) and PR'd.
+  </p>
+</div>
+<small class="note">Ports: base 19201 · v1 19202 · v2 19203 · v3 19204 · v4 19205 · v5 picks 19206 · v6 claude-pure 19207 — ES via SSH tunnel 19200 → supermicro.</small>
+
+<script>
+const VARIANTS = [
+  {port:19201, name:"Base (stock)",     tag:"as deployed", desc:"Current vendored theme.css, untouched. Reference point."},
+  {port:19202, name:"v1 · Full-bleed Ops", tag:"fixes only", desc:"Stock look; pages fill the viewport, sticky table headers, no mid-value wrapping, visible scroll affordances."},
+  {port:19203, name:"v2 · Soft Modern",  tag:"taste", desc:"Softer SaaS feel: shadow-elevated borderless cards, bigger radii, roomier tables, pill chips. Includes v1 fixes."},
+  {port:19204, name:"v3 · Terminal Dense", tag:"taste", desc:"SOC-floor density: darker ground, mono data cells, uppercase micro-labels, sharp corners, max rows per screen. Includes v1 fixes."},
+  {port:19205, name:"v4 · Claude", tag:"taste", desc:"claude.ai look & feel on the Xore palette: airy, nearly borderless, pill nav and controls, soft large radii, quiet chrome. Includes v1 fixes."},
+    {port:19207, name:"v6 · Claude Pure", tag:"chosen · round 2", desc:"Second-round E picks applied: floating borderless cards with serif titles, boxless serif KPI strip, open airy tables, neutral dot badges, pill buttons/tabs, raised-pill nav, floating pill topbar. Element theming only — page-layout work (feed breaks, source cards, doc reports) ships in the repo."},
+  {port:19206, name:"v5 · Your Picks", tag:"chosen", desc:"Xore's selections applied: header-strip cards, card-row tables, solid badges, ghost buttons, rail tabs, accent-bar nav, scroll pills — on the claude schema. Layout picks (OV-B/EV-B/AS-C/RP-C) follow as template work."},
+];
+const PAGES = [["Overview","/"],["Events","/events"],["Campaigns","/campaigns"],["Attack sources","/ips"],["Alerts","/alerts"],["Commands","/commands"],["Reports","/reports"],["Source health","/source-health"]];
+document.getElementById('variants').innerHTML = VARIANTS.map(v=>`
+  <div class="card">
+    <h3>${v.name}<span class="tag">${v.tag}</span></h3>
+    <p>${v.desc}</p>
+    <div class="links">
+      <a class="btn primary" href="http://127.0.0.1:${v.port}/" target="_blank">Open ↗</a>
+      ${PAGES.map(([n,p])=>`<a class="btn" href="http://127.0.0.1:${v.port}${p}" target="_blank">${n}</a>`).join('')}
+    </div>
+  </div>`).join('');
+const CMP = [];
+for (const [n,p] of PAGES) {
+  CMP.push({label:`base vs v1 — ${n}`, l:19201, r:19202, path:p});
+}
+CMP.push({label:"v1 vs v2 — Overview", l:19202, r:19203, path:"/"});
+CMP.push({label:"v1 vs v3 — Events", l:19202, r:19204, path:"/events"});
+CMP.push({label:"v2 vs v3 — Overview", l:19203, r:19204, path:"/"});
+CMP.push({label:"base vs v4 — Overview", l:19201, r:19205, path:"/"});
+CMP.push({label:"v1 vs v4 — Events", l:19202, r:19205, path:"/events"});
+CMP.push({label:"base vs v5 picks — Overview", l:19201, r:19206, path:"/"});
+CMP.push({label:"base vs v5 picks — Events", l:19201, r:19206, path:"/events"});
+document.getElementById('compares').innerHTML = CMP.map(c=>
+  `<a class="btn" href="compare.html?l=${c.l}&r=${c.r}&path=${encodeURIComponent(c.path)}">${c.label}</a>`).join('');
+</script>
+</body>
+</html>
diff --git a/docs/design-lab/playground/layouts.html b/docs/design-lab/playground/layouts.html
new file mode 100644
index 000000000..d03a58dd5
--- /dev/null
+++ b/docs/design-lab/playground/layouts.html
@@ -0,0 +1 @@
+<!doctype html><meta http-equiv="refresh" content="0;url=elements.html"><a href="elements.html">moved into the Design Picker</a>
diff --git a/docs/design-lab/v5-picks-override.css b/docs/design-lab/v5-picks-override.css
new file mode 100644
index 000000000..67e72c0c6
--- /dev/null
+++ b/docs/design-lab/v5-picks-override.css
@@ -0,0 +1,145 @@
+/* ══════════════════════════════════════════════════════════════════════
+   VARIANT v5 — "Your Picks"
+   claude.ai schema on the Xore palette, with the chosen elements:
+   1D header-strip cards · 2D pulse skeletons (ghost shapes need templates)
+   4C card-row tables · 5D solid status badges · 6D ghost buttons w/
+   outline primary · 7D vertical-rail tabs · 9C "more" pill (JS) ·
+   10C accent-bar nav. Layout picks (OV-B/EV-B/AS-C/RP-C) are template
+   work, tracked separately. Includes v1 viewport-filling fixes.
+   ══════════════════════════════════════════════════════════════════════ */
+
+/* ── claude base ── */
+:root {
+  --radius-panel: 16px;
+  --radius-control: 12px;
+  --radius-dialog: 24px;
+  --border-subtle: rgba(255, 255, 255, 0.045);
+  --border-strong: rgba(255, 255, 255, 0.10);
+}
+.app-sidebar { background: transparent; border-right: 1px solid var(--border-subtle); }
+.app-toolbar { background: transparent; border-bottom: 1px solid var(--border-subtle); }
+.app-main { padding: 26px 34px; }
+.app-main > * { max-width: 1680px; margin-inline: auto; }
+h1 { letter-spacing: -0.015em; }
+
+/* ── 10C nav: accent bar + soft gradient ── */
+.sidebar__item { border-left: 2px solid transparent; border-radius: 0 8px 8px 0; transition: background .15s ease-out; }
+.sidebar__item:hover { background: var(--surface-1); }
+.sidebar__item.active,
+.sidebar__item[aria-current],
+.sidebar__item[aria-current="page"] {
+  border-left-color: var(--accent);
+  background: linear-gradient(90deg, var(--accent-soft), transparent 70%);
+}
+
+/* ── 1D card: title as header strip ── */
+.card > h2:first-child,
+.card > h3:first-child {
+  margin: calc(-1 * var(--space-lg)) calc(-1 * var(--space-xl)) 14px;
+  padding: 11px var(--space-xl);
+  background: var(--surface-2);
+  border-bottom: 1px solid var(--border-subtle);
+  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
+  font-size: 13px;
+  font-weight: 600;
+}
+.card { border-color: var(--border-subtle); }
+.card:hover { border-color: var(--border-strong); }
+
+/* ── 4C table: card rows ── */
+.data-table { border-collapse: separate; border-spacing: 0 8px; }
+.data-table thead th {
+  border-bottom: 0;
+  text-transform: none;
+  letter-spacing: 0;
+  font-size: 12.5px;
+  font-weight: 500;
+  color: var(--text-muted);
+  padding: 4px 12px;
+}
+.data-table td { background: var(--surface-2); border-bottom: 0; padding: 10px 12px; }
+.data-table td:first-child { border-radius: 10px 0 0 10px; }
+.data-table td:last-child { border-radius: 0 10px 10px 0; }
+.data-table tbody tr:hover td { background: var(--surface-hover); }
+.data-table tbody tr:last-child td { border-bottom: 0; }
+
+/* ── 5D badges: solid status fills (sensor b-* chips keep theme colors) ── */
+.badge--info    { background: var(--info);    color: #0f1b26; }
+.badge--success { background: var(--success); color: #0d2417; }
+.badge--warning { background: var(--warning); color: #2a2008; }
+.badge--danger  { background: var(--danger);  color: #2b1312; }
+
+/* ── 6D buttons: ghost by default, outline primary ── */
+.btn, button.secondary {
+  background: transparent;
+  border-color: transparent;
+  border-radius: 10px;
+}
+.btn:hover, button.secondary:hover { background: var(--surface-2); }
+.btn-primary, button.primary {
+  background: transparent;
+  color: var(--accent);
+  border: 1px solid var(--accent);
+}
+.btn-primary:hover, button.primary:hover { background: var(--accent-soft); }
+.btn-danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
+.btn-danger:hover { background: var(--danger-soft); }
+
+/* ── 7D tabs: vertical rail (float layout; real grid comes with templates) ── */
+.tabs {
+  flex-direction: column;
+  align-items: stretch;
+  width: 200px;
+  float: left;
+  position: sticky;
+  top: 16px;
+  margin: 0 22px 18px 0;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  gap: 2px;
+}
+.tabs .tab {
+  justify-content: flex-start;
+  text-align: left;
+  border-left: 2px solid transparent;
+  border-radius: 0 8px 8px 0;
+}
+.tabs .tab.active {
+  border-left-color: var(--accent);
+  background: linear-gradient(90deg, var(--accent-soft), transparent 75%);
+  color: var(--text-primary);
+}
+[role="tabpanel"] { overflow: hidden; }
+
+/* ── 2D skeletons: pulse now; content-shaped ghosts need templates ── */
+@keyframes hp5-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
+.skeleton-line { animation: hp5-pulse 1.6s ease-in-out infinite; }
+
+/* ── 9C scroll pill (paired JS in hp-app.js) ── */
+.hp5-more {
+  position: sticky;
+  bottom: 8px;
+  display: block;
+  width: fit-content;
+  margin: -26px auto 4px;
+  background: var(--surface-3);
+  border: 1px solid var(--border-strong);
+  border-radius: 999px;
+  font-size: 11px;
+  padding: 2px 12px;
+  color: var(--text-secondary);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity .2s ease-out;
+  z-index: 3;
+}
+
+/* ── v1 viewport-filling fixes ── */
+.card__scroll { max-height: max(340px, calc(100vh - 320px)); overscroll-behavior: contain; }
+.card__scroll .data-table thead th {
+  position: sticky; top: 0; z-index: 2;
+  background: var(--surface-1);
+}
+td.v, .data-table td[data-label="time"], .data-table td[data-label="port"] { white-space: nowrap; }
+td.v .eventdetail, td.v article { white-space: normal; }

From ff80a24a886470b1b0ec6078b3d089a5f07a9618 Mon Sep 17 00:00:00 2001
From: Xore <Xore@users.noreply.github.com>
Date: Sun, 13 Sep 2026 14:40:21 +0200
Subject: [PATCH 3/5] ci(codeql): ignore preserved design-lab playground
 harness (#1763)

docs/design-lab/ is the 2026-08-17 design-lab record restored byte-identical
from preserve-design-lab-1763. playground/compare.html is a local-only
harness (127.0.0.1 iframe frames), never shipped or served; same exclusion
class as the ghost vendor entry.
---
 .github/codeql/codeql-config.yml | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/.github/codeql/codeql-config.yml b/.github/codeql/codeql-config.yml
index d8571c06d..a7e72df34 100644
--- a/.github/codeql/codeql-config.yml
+++ b/.github/codeql/codeql-config.yml
@@ -34,3 +34,10 @@ paths-ignore:
   - analysis/ghidra/service/server.py
   - sandbox/ghosts/vendor/ghosts-src/Ghosts.Api/wwwroot/lib
   - arcane/home/honeypot-cowrie/honeyfs-implant/main.go
+  # #1763: docs/design-lab/ is the preserved 2026-08-17 design-lab record
+  # (restored from preserve-design-lab-1763 branch, kept byte-identical).
+  # playground/compare.html is a local-only harness (loads 127.0.0.1:<port>
+  # frames into an iframe for side-by-side theme comparison); it is not
+  # shipped, not served by any route, and reachable only by opening the file
+  # directly in a browser. CodeQL js/html DOM-text findings here are
+  # documentation-artifact noise, same class as the ghost vendor exclusion.

From 748e31b0aafa6765ee90ada07dfee69cace8469d Mon Sep 17 00:00:00 2001
From: Xore <Xore@users.noreply.github.com>
Date: Mon, 14 Sep 2026 02:03:40 +0200
Subject: [PATCH 4/5] fix(honeypot-dashboard): use defined theme tokens in
 skip-link; sanitize compare path

---
 .../frontend-next/src/components/AppShell.tsx |  4 ++--
 docs/design-lab/playground/compare.html       | 22 ++++++++++++++-----
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/arcane/home/honeypot-dashboard/frontend-next/src/components/AppShell.tsx b/arcane/home/honeypot-dashboard/frontend-next/src/components/AppShell.tsx
index 58a6f56d3..e76837028 100644
--- a/arcane/home/honeypot-dashboard/frontend-next/src/components/AppShell.tsx
+++ b/arcane/home/honeypot-dashboard/frontend-next/src/components/AppShell.tsx
@@ -121,8 +121,8 @@ export function AppShell({
             clip: 'auto',
             whiteSpace: 'normal',
             zIndex: 9999,
-            background: 'var(--surface, #fff)',
-            color: 'var(--text, #000)',
+            background: 'var(--bg-raised, #fff)',
+            color: 'var(--text-000, #000)',
             padding: '8px 16px',
             borderRadius: '6px',
             boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
diff --git a/docs/design-lab/playground/compare.html b/docs/design-lab/playground/compare.html
index 080f287c8..66fcf8bca 100644
--- a/docs/design-lab/playground/compare.html
+++ b/docs/design-lab/playground/compare.html
@@ -52,7 +52,18 @@
 ];
 const q = new URLSearchParams(location.search);
 let L = +(q.get('l') || 19201), R = +(q.get('r') || 19202);
-let path = q.get('path') || '/';
+// Guard: `path` is user input (query string, the path box, a peer frame's
+// postMessage) and it lands in an iframe src. Resolve it against the target
+// origin and keep only the same-origin path, so `javascript:`/`data:` or an
+// absolute URL cannot escape http://127.0.0.1:<port>/.
+const ORIGIN = 'http://127.0.0.1';
+const safePath = p => {
+  try {
+    const u = new URL(String(p ?? '/'), ORIGIN + '/');
+    return u.origin === ORIGIN ? u.pathname + u.search + u.hash : '/';
+  } catch { return '/'; }
+};
+let path = safePath(q.get('path'));
 
 const selL = document.getElementById('selL'), selR = document.getElementById('selR');
 for (const [port, name] of VARIANTS) {
@@ -83,8 +94,8 @@
 selL.onchange = () => { L = +selL.value; load('L'); };
 selR.onchange = () => { R = +selR.value; load('R'); };
 document.getElementById('swap').onclick = () => { [L, R] = [R, L]; selL.value = L; selR.value = R; load(); };
-document.getElementById('go').onclick = () => { path = pathIn.value || '/'; load(); };
-pathIn.addEventListener('keydown', e => { if (e.key === 'Enter') { path = pathIn.value || '/'; load(); } });
+document.getElementById('go').onclick = () => { path = safePath(pathIn.value); load(); };
+pathIn.addEventListener('keydown', e => { if (e.key === 'Enter') { path = safePath(pathIn.value); load(); } });
 
 /* ── postMessage sync with the hp-app.js lab snippet inside each frame ── */
 const winOf = f => { try { return f.contentWindow; } catch { return null; } };
@@ -98,8 +109,9 @@
   if (d.type === 'scroll') {
     peer.postMessage({hpLab: 1, type: 'setScroll', frac: d.frac}, '*');
   } else if (d.type === 'nav') {
-    if (d.path !== path) {
-      path = d.path; pathIn.value = path; refreshLabels();
+    const next = safePath(d.path);
+    if (next !== path) {
+      path = next; pathIn.value = path; refreshLabels();
       // debounce: the peer's own load will echo a nav message; only forward fresh user navigation
       if (Date.now() - lastGoto > 400) {
         lastGoto = Date.now();

From 90a66eb47b453c899dbdbd364adcd11534596df0 Mon Sep 17 00:00:00 2001
From: Xore <Xore@users.noreply.github.com>
Date: Mon, 14 Sep 2026 02:40:32 +0200
Subject: [PATCH 5/5] ci(codeql): exclude docs/design-lab from scanning

---
 .github/codeql/codeql-config.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/codeql/codeql-config.yml b/.github/codeql/codeql-config.yml
index a7e72df34..ec80902f0 100644
--- a/.github/codeql/codeql-config.yml
+++ b/.github/codeql/codeql-config.yml
@@ -34,6 +34,7 @@ paths-ignore:
   - analysis/ghidra/service/server.py
   - sandbox/ghosts/vendor/ghosts-src/Ghosts.Api/wwwroot/lib
   - arcane/home/honeypot-cowrie/honeyfs-implant/main.go
+  - docs/design-lab
   # #1763: docs/design-lab/ is the preserved 2026-08-17 design-lab record
   # (restored from preserve-design-lab-1763 branch, kept byte-identical).
   # playground/compare.html is a local-only harness (loads 127.0.0.1:<port>