Rebuild UI as bench instrument; migrate diff renderer to @pierre/diffs

.gitignore

@@ -153,3 +153,4 @@ final-light*.png
 
 # Self-hosted server runtime database (local default ./data/agent-render.db; see selfhosted/db.ts)
 /data/*.db*
+.impeccable/hook.cache.json

.impeccable.md

@@ -71,4 +71,4 @@ All buttons use `active:scale-95` for press feedback. Hover transitions are slow
 - Tailwind CSS v4 with CSS custom properties (no tailwind.config)
 - `next-themes` for class-based light/dark switching
 - Fraunces + IBM Plex Sans + IBM Plex Mono (Google Fonts via next/font)
-- CodeMirror 6 for code rendering, git-diff-view for diffs
+- CodeMirror 6 for code rendering, @pierre/diffs for diffs

.impeccable/config.json

@@ -0,0 +1,10 @@
+{
+  "detector": {
+    "ignoreRules": [],
+    "ignoreFiles": [
+      ".impeccable/drafts/",
+      ".impeccable/drafts"
+    ],
+    "ignoreValues": []
+  }
+}

.impeccable/design-contract.md

@@ -0,0 +1,23 @@
+# DESIGN CONTRACT — "Bench Instrument × Carbon Transfer" (fused world)
+
+Authoritative grammar for the agent-render full rebuild. ONE token spine lives in `src/app/globals.css` `:root`/`.dark` (canonical colors + shared `--bench-*` aliases + shared keycap/recess depth recipe). `src/app/bench.css` holds only NEW grammar pieces and defines NO colors. Use only these tokens/classes; do not invent new colors or a second system.
+
+## WORLD
+Bone chrome in LIGHT theme; dark placard chrome in DARK theme (QRH grammar: charcoal panels, hairline etched rules, ivory ink); dark-charcoal content chassis (`--surface-code*`) in BOTH themes (code/diff/csv/json bodies stay dark). One orange COMMIT action. Functional keycap/recess depth only. No glow halos, no rounded cream cards, no radial-gradient washes, NO eyebrow/kicker above page headings, NO self-describing chrome text ("Decoded", "read-only codemirror", artifact-kind kicker duplicating filename/kind). Real footer (identity + license + links), never a stub.
+
+## CLASS VOCABULARY (what to use)
+- **Keycap button:** `.artifact-action` (+ `.is-primary` for the orange COMMIT). `.mono-pill` = shallower bone keycap tag. Do NOT use `.bench-key` (does not exist).
+- **Recessed inputs:** `.creator-input`, `.creator-textarea`, `.creator-link-output` (already recessed). Do NOT use `.bench-slot`.
+- **Density board (C4):** `.bench-board` (2px rule-strong border, bone bg) + `.bench-board-head` (dark engraved strip, `.bench-caps` label inside) + `.bench-cell` (hairline-separated cells). Do NOT invent board classes.
+- **Field/segment chips:** `.bench-chip` + `.is-on` (selected orange) inside `.bench-chiprow`.
+- **VFD readout (amber mono on dark slot):** `.bench-readout` — for budget chars / codec numbers.
+- **D7 LED lamp:** `.bench-lamp` (+ `.is-amber` / `.is-red`) — tiny physical LED; only glow allowed.
+- **D1 carbon-transfer (generated-link output ONLY):** `.bench-carbon-bar` (dashed strip, "the URL fragment is the carbon copy" with `<b>`), `.bench-stamp` (rotated red outline), `.bench-perf` (dashed tear line). Never tint the artifact body.
+- **Engraved caps (mono uppercase labels):** `.bench-caps`.
+- **Existing structural/layout classes already in use:** `.bench-hero`, `.bench-rig`, `.bench-col-creator`, `.bench-col-side`, `.bench-section` (+ `.bench-section-head`/`.bench-section-title`), `.bench-links` (+ `.bench-links-row`/`-kicker`/`-title`/`-desc`), `.site-footer`/`-wordmark`/`-nav`/`-link`, `.nav-bar`/`.nav-wordmark`/`.nav-text-link`, `.empty-state-layout`, `.stat-row`/`.stat-item`/`.stat-value`, `.metric-label`/`.metric-value`, `.artifact-disclosure*` , `.artifact-switcher*`, `.sample-link`, `.panel`, `.budget-track`/`.budget-fill`.
+
+## PRESERVE (hard)
+Every data-testid, data-active-kind, data-renderer-ready, data-diff-state, aria-*, element IDs, dynamic imports, lazy mounts, print-markdown attrs, print-hide-on-markdown, and ALL copy/product claims. Do not change behavior. Content bodies (CodeMirror, mermaid, csv table, json tree, markdown article) are NOT restyled.
+
+## BANS (owner + craft-floor)
+Eyebrow/kicker above a page heading. Self-describing chrome narration. Floating chrome / cream cards / radial washes / decorative glow. Section-number kickers unless the sequence IS the info. Footer stub. Monospace as costume (mono is for data/labels only).

.impeccable/drafts/_index.html

@@ -0,0 +1,59 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>agent-render — direction drafts</title>
+<style>
+  :root { --bg:#0e0e10; --surface:#16161a; --ink:#e8e6e3; --muted:#8b8894; --border:#26262c; --accent:#7fd4c1; }
+  * { box-sizing: border-box; }
+  body { margin:0; background:var(--bg); color:var(--ink); font:400 15px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+  main { max-width:982px; margin: 0 auto; padding: 56px 32px 120px; }
+  h1 { font-size: 2.2rem; font-weight: 700; letter-spacing:-0.02em; margin:0 0 10px; }
+  .sub { color: var(--muted); font-size: .9rem; max-width: 64ch; margin-bottom: 44px; }
+  .group-label { color: var(--accent); font-size: .72rem; letter-spacing:.18em; text-transform:uppercase; margin:36px 0 14px; }
+  ol { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
+  a {
+    display:grid; grid-template-columns: 54px 1fr auto; gap:16px; align-items:baseline;
+    background:var(--surface); border:1px solid var(--border); border-radius:8px;
+    padding: 15px 18px; text-decoration:none; color:var(--ink);
+    transition: border-color .15s ease, transform .15s ease;
+  }
+  a:hover { border-color: var(--accent); transform: translateX(4px); }
+  .num { color:var(--muted); font-size:.78rem; font-variant-numeric: tabular-nums; }
+  .name { font-weight:600; font-size: 1.02rem; color:var(--ink); }
+  .name .seed { font-size:.68rem; color: var(--accent); border:1px solid #2c3a37; padding:2px 6px; border-radius:4px; margin-left:10px; vertical-align:middle; letter-spacing:.04em}
+  .desc { grid-column: 2; color: var(--muted); font-size: .82rem; margin-top:2px; }
+  .open { color: var(--accent); font-size:.8rem; white-space:nowrap; }
+  .footer { margin-top: 48px; color: var(--muted); font-size: .78rem; border-top:1px solid var(--border); padding-top: 20px; line-height:1.7 }
+</style>
+</head>
+<body>
+<main>
+  <h1>agent-render — direction drafts</h1>
+  <p class="sub">12 drafts. Same homepage content each time ("Zero-retention artifact viewer for AI outputs." + the create-a-link form). Type, spacing, and component language are what you're picking between, not the copy. Open a few, note the spread, then tell me which one (or which fusion) earns the real build.</p>
+
+  <p class="group-label">Grounded: my seven candidates</p>
+  <ol>
+    <li><a href="d1-ncr-form.html"><span class="num">D1</span><span class="name">CR-39 carbonless lab slip</span><span class="open">open →</span><span class="desc">Single-part transfer document; red carbon as accent; the URL is the carbon copy. Cream paper, two-web feel.</span></a></li>
+    <li><a href="d2-terminal-log.html"><span class="num">D2</span><span class="name">Terminal session paper log</span><span class="open">open →</span><span class="desc">tmux capture-pane grammar. Green live dot, box-drawing hair stretches, generate = one more command. Dark terminal print.</span></a></li>
+    <li><a href="d3-broadcast-chyron.html"><span class="num">D3</span><span class="name">NTSC broadcast underline</span><span class="open">open →</span><span class="desc">Condensed program title, safe-blue lower-third, red ON AIR bug, yellow crawl along the bottom.</span></a></li>
+    <li><a href="d4-nautical-chart.html"><span class="num">D4</span><span class="name">Nautical chart marginalia</span><span class="seed">seed-assigned</span><span class="open">open →</span><span class="desc">Surveyed chart: marginalia italics, mono soundings band, watery grid ground, one deep-sea blue as working color.</span></a></li>
+    <li><a href="d5-blueprint.html"><span class="num">D5</span><span class="name">Blueprint / linen sheet</span><span class="open">open →</span><span class="desc">Cyanotype grid field, monoline annotation, dimension rules, revision strip at the foot. Amber marks for corrections.</span></a></li>
+    <li><a href="d6-cd-catalog.html"><span class="num">D6</span><span class="name">CD catalog sheet</span><span class="open">open →</span><span class="desc">Booklet page: tracklist table with catalog numbers, baskerville titles, price-blue focus accent, barcode colophon.</span></a></li>
+    <li><a href="d7-cockpit-placard.html"><span class="num">D7</span><span class="name">Cockpit QRH card</span><span class="open">open →</span><span class="desc">Placarded quick-reference: engraved caps, amber = commit, green = confirmed state. Matte panels, VFD mono.</span></a></li>
+  </ol>
+
+  <p class="group-label">Challenged: the catalog's five (one dropped)</p>
+  <ol>
+    <li><a href="c1-crt-arcade.html"><span class="num">C1</span><span class="name">CRT arcade decoding stage</span><span class="open">open →</span><span class="desc">Pixel caps, phosphor green on tube black, scanlines + bloom; generate link = insert coin. Kept literal.</span></a></li>
+    <li><a href="c2-night-sixpack.html"><span class="num">C2</span><span class="name">Night-flight six-pack</span><span class="open">open →</span><span class="desc">The fragment inspector IS the instrument cluster. Radium dials, trend arrows, amber = caution only.</span></a></li>
+    <li><a href="c3-hardware-bench.html"><span class="num">C3</span><span class="name">Creator-hardware bench</span><span class="open">open →</span><span class="desc">Bone keycaps on gunmetal chassis, amber VFD readout, one orange COMMIT key. Physical kbd world.</span></a></li>
+    <li><a href="c4-high-density.html"><span class="num">C4</span><span class="name">Japanese high-density board</span><span class="open">open →</span><span class="desc">Tight modular notice board, utility red tabs, dense stats line. Whole product above the fold.</span></a></li>
+    <li><a href="c6-rain-garden.html"><span class="num">C6</span><span class="name">Gravity-rain garden</span><span class="open">open →</span><span class="desc">Dusk garden, blue rain rising from host to client. Surreal but transport-true. Kept literal-light.</span></a></li>
+  </ol>
+
+  <p class="footer">Not built: Challenger 5 (sneaker-box wall) — consumer-fashion grammar can't carry a dev tool without faking the trash talk. Same content in every draft: headline + lede + create-a-link form, because that's the real first viewport the project ships.<br><br>Tell me the dossier(s) worth shipping and I'll rebuild the real shell around it.</p>
+</main>
+</body>
+</html>

.impeccable/drafts/c1-crt-arcade.html

@@ -0,0 +1,179 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>agent-render · decoding stage</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap" rel="stylesheet">
+<style>
+  :root{
+    --crt:#08090c; --phos:#33ff88; --phos-dim:#1a2540; --gold:#ffd94d; --hazard:#ff4d6d;
+    --ink:#c8ffd9; --ink-dim:#5a8a70;
+  }
+  *{box-sizing:border-box}
+  body{
+    margin:0; background:#040507; color:var(--ink);
+    font:400 22px/1.45 "VT323", "Courier New", monospace;
+    -webkit-font-smoothing:antialiased;
+    cursor:crosshair;
+  }
+  .cab{
+    max-width:1080px; margin:24px auto 96px; position:relative;
+    background:var(--crt); border:3px solid #14171d; border-radius:18px;
+    box-shadow: inset 0 0 90px rgba(51,255,136,.05), 0 30px 60px -30px rgba(0,0,0,.9);
+    padding:52px 56px 44px; overflow:hidden;
+  }
+  .cab::before{ /* scanlines */
+    content:""; position:absolute; inset:0; pointer-events:none; z-index:5;
+    background:repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.32) 3px 4px);
+    mix-blend-mode:multiply;
+  }
+  .cab::after{ /* phosphor vignette */
+    content:""; position:absolute; inset:0; pointer-events:none; z-index:6;
+    background:radial-gradient(ellipse at center, transparent 62%, rgba(0,0,0,.55) 100%);
+  }
+  .score-row{
+    display:flex; justify-content:space-between; align-items:baseline;
+    font:400 11px/1 "Press Start 2P", monospace; color:var(--ink-dim); letter-spacing:.12em;
+    margin-bottom:44px; text-transform:uppercase;
+  }
+  .score-row .hi{color:var(--phos); text-shadow:0 0 8px rgba(51,255,136,.7)}
+  .credits{color:var(--gold)}
+  .marquee{
+    text-align:center; margin:20px 0 8px;
+    font:400 clamp(1.5rem,4.2vw,2.6rem)/1.5 "Press Start 2P",monospace;
+    color:var(--phos); text-shadow:0 0 10px rgba(51,255,136,.75), 0 0 40px rgba(51,255,136,.3);
+    text-transform:uppercase; letter-spacing:.02em;
+  }
+  .marquee .red{color:var(--hazard); text-shadow:0 0 10px rgba(255,77,109,.7)}
+  .sub-marquee{
+    text-align:center; font:400 26px/1.4 "VT323",monospace; color:var(--ink);
+    max-width:44ch; margin:26px auto 0;
+  }
+  .sub-marquee .glow{color:var(--phos)}
+  .insert{
+    text-align:center; font:400 12px/1 "Press Start 2P",monospace; color:var(--gold);
+    margin-top:34px; animation:blinkc 1.3s steps(1) infinite; letter-spacing:.2em; text-transform:uppercase;
+  }
+  @keyframes blinkc{50%{opacity:0}}
+  .stage{
+    margin-top:50px; border:2px solid var(--phos-dim); padding:4px;
+    background:rgba(26,37,64,.18);
+  }
+  .stage-inner{border:1px dashed rgba(90,138,112,.4); padding:26px 30px;}
+  .stage-title{font:400 11px/1 "Press Start 2P",monospace; color:var(--phos); letter-spacing:.14em; text-transform:uppercase; margin-bottom:22px; text-shadow:0 0 6px rgba(51,255,136,.6)}
+  .inv{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin:6px 0 4px;}
+  .inv div{
+    border:2px solid var(--phos-dim); padding:16px 8px 14px; text-align:center;
+    font:400 9px/1.7 "Press Start 2P",monospace; color:var(--ink-dim); letter-spacing:.08em; text-transform:uppercase;
+  }
+  .inv div.on{border-color:var(--phos); color:var(--phos); box-shadow:0 0 14px rgba(51,255,136,.28), inset 0 0 14px rgba(51,255,136,.08)}
+  .pixel-row{display:flex; gap:5px; justify-content:center; margin-top:18px}
+  .pixel-row i{width:9px;height:9px;background:var(--phos-dim);display:block}
+  .pixel-row i.lit{background:var(--phos); box-shadow:0 0 6px rgba(51,255,136,.8)}
+
+  .playfield{
+    position:relative; margin-top:46px; border:2px solid var(--phos-dim); padding:24px 26px 20px; background:rgba(26,37,64,.14);
+  }
+  .playfield .pf-head{display:flex; justify-content:space-between; font:400 10px/1 "Press Start 2P",monospace; color:var(--gold); text-transform:uppercase; letter-spacing:.12em; margin-bottom:20px}
+  .pf-row{margin:16px 0; display:grid; grid-template-columns:150px 1fr; gap:18px; align-items:baseline}
+  .pf-row label{font:400 9px/1.6 "Press Start 2P",monospace; color:var(--ink-dim); letter-spacing:.1em; text-transform:uppercase}
+  .pf-input{
+    font:400 24px/1.3 "VT323",monospace; color:var(--phos); background:transparent;
+    border:none; border-bottom:2px dashed var(--phos-dim); outline:none; width:100%; text-shadow:0 0 6px rgba(51,255,136,.5);
+  }
+  .pf-input:focus{border-bottom-color:var(--phos)}
+  .pf-box{
+    border:2px solid var(--phos-dim); background:rgba(8,9,12,.7); padding:16px 18px; min-height:110px;
+    font:400 22px/1.5 "VT323",monospace; color:var(--ink); white-space:pre-wrap;
+  }
+  .pf-kinds{display:flex; flex-wrap:wrap; gap:8px}
+  .pf-kinds span{
+    padding:9px 13px; font:400 9px/1 "Press Start 2P",monospace; letter-spacing:.08em; color:var(--ink-dim);
+    border:2px solid var(--phos-dim); cursor:pointer; text-transform:uppercase;
+  }
+  .pf-kinds span.on{border-color:var(--gold); color:var(--gold); box-shadow:0 0 10px rgba(255,217,77,.3)}
+  .start-row{display:flex; align-items:center; gap:26px; margin-top:28px; flex-wrap:wrap}
+  .start-btn{
+    background:var(--hazard); color:#1a0208; border:none; cursor:pointer;
+    font:400 12px/1 "Press Start 2P",monospace; letter-spacing:.1em; padding:18px 28px; text-transform:uppercase;
+    box-shadow:0 0 16px rgba(255,77,109,.5), inset 0 -4px 0 rgba(0,0,0,.25);
+  }
+  .start-btn:active{transform:translateY(2px); box-shadow:0 0 8px rgba(255,77,109,.4), inset 0 -2px 0 rgba(0,0,0,.25)}
+  .hp{font:400 9px/1.7 "Press Start 2P",monospace; color:var(--ink-dim); letter-spacing:.1em; line-height:2}
+  .hp b{color:var(--phos); font-weight:400}
+  .cab-foot{
+    margin-top:40px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
+    font:400 9px/1.7 "Press Start 2P",monospace; color:var(--ink-dim); letter-spacing:.1em; text-transform:uppercase;
+  }
+  @media (prefers-reduced-motion: reduce){.insert{animation:none}}
+  @media (max-width:760px){.cab{padding:34px 22px 30px}.inv{grid-template-columns:repeat(3,1fr)}.pf-row{grid-template-columns:1fr}}
+</style>
+</head>
+<body>
+  <!--
+    DIRECTION CONTRACT C1 — CRT arcade decoding stage (fused challenger)
+    THESIS: decoding the fragment is the attract mode; generating a link is inserting the coin.
+    OWN-WORLD: phosphor green on tube black, scanlines and vignette as real layers, gold reserved for credits/money, red only to commit.
+    STORY: the player powers the cabinet, sees the renderers as lit sprites, feeds the playfield, and presses start.
+    FIRST VIEWPORT: score row, pixel marquee, sub-marquee, INSERT COIN cue, the renderer inventory cabinet.
+    FORM: challenger 1 of 6 dealt (pixel-arch cabinet), fused with agent-render; seed key 5b5b8c00.
+    FINISH: unreviewed and undocumented is unfinished; this build ends with the finish review, the verdict, and DESIGN.md
+  -->
+  <div class="cab">
+    <div class="score-row">
+      <span>RETENTION <span class="hi">0</span></span>
+      <span>HI-FRAGMENT <span class="hi">8192</span></span>
+      <span class="credits">CREDIT ∞</span>
+    </div>
+
+    <marquee class="marquee" style="display:block">ZERO-RETENTION<br>ARTIFACT <span class="red">VIEWER</span></marquee>
+    <p class="sub-marquee">Payload lives in the URL fragment. <span class="glow">The host never receives it.</span> Five renderers loaded: markdown · code · diff · csv · json.</p>
+    <p class="insert">Insert artifact to continue</p>
+
+    <div class="stage">
+      <div class="stage-inner">
+        <div class="stage-title">Select your renderer</div>
+        <div class="inv">
+          <div class="on">MARK<br>DOWN</div>
+          <div>CODE</div>
+          <div>DIFF<br>U/S</div>
+          <div>CSV<br>GRID</div>
+          <div>JSON<br>TREE</div>
+        </div>
+        <div class="pixel-row" aria-hidden="true">
+          <i></i><i></i><i class="lit"></i><i></i><i class="lit"></i><i class="lit"></i><i></i><i></i><i class="lit"></i><i></i><i></i><i class="lit"></i><i class="lit"></i><i class="lit"></i><i></i><i></i><i class="lit"></i><i></i><i class="lit"></i><i class="lit"></i><i></i><i></i><i class="lit"></i><i></i><i></i>
+        </div>
+      </div>
+    </div>
+
+    <div class="playfield">
+      <div class="pf-head"><span>1UP — CREATE LINK</span><span>BONUS AT 2000 DISCORD</span></div>
+      <div class="pf-row"><label>Player name</label><input class="pf-input" value="Product brief"></div>
+      <div class="pf-row"><label>File tag</label><input class="pf-input" value="brief.md"></div>
+      <div class="pf-row" style="grid-template-columns:1fr; margin-top:22px">
+        <label>Payload insert</label>
+        <div class="pf-box"># Launch note
+Share one artifact at a time without uploading it anywhere.
+- Markdown stays readable
+- Code keeps its language hint
+- Link works from a static export</div>
+      </div>
+      <div class="pf-row" style="grid-template-columns:1fr"><label>Vehicle select</label>
+        <div class="pf-kinds"><span class="on">Markdown</span><span>Code</span><span>Diff</span><span>CSV</span><span>JSON</span></div>
+      </div>
+      <div class="start-row">
+        <button class="start-btn">» Start · generate link</button>
+        <div class="hp">HI-SCORE LIMIT <b>8,192 CH</b><br>LOADED <b>1,204 CH</b> · CODEC <b>ARX4</b></div>
+      </div>
+    </div>
+
+    <div class="cab-foot">
+      <span>© AGENT-RENDER AMUSEMENTS</span>
+      <span>ZERO RETENTION — HOST SEES NOTHING</span>
+      <span>MULTIPLAYER VIA PASTE</span>
+    </div>
+  </div>
+</body>
+</html>