@shield-agent/kya 0.7.0 → 0.8.0

package/dist/receipt/render-receipt.js

@@ -7,6 +7,7 @@ import { productLabel, readTrail, readTrailSince } from "../trail.js";
 import { loadCertifyCard, loadIdentity, loadOrrCard, loadSandboxes, loadShowbackCard, loadWiredHosts, } from "./enrich.js";
 import { SHOWBACK_DISCLAIMER, } from "../showback/cost-per-task.js";
 import { computeDashboard } from "./dashboard.js";
+import { receiptCss } from "./receipt-css.js";
 function esc(s) {
     return stripEscapes(s)
         .replace(/&/g, "&")
@@ -264,8 +265,8 @@ function projectMeta(project) {
 function renderFeed(events, nowMs, live) {
     if (events.length === 0) {
         const hint = live
-            ? "No events yet. Wrap a tool call and this page will refresh."
-            : "No events yet. Run a wrap, then regenerate this receipt.";
+            ? "No events yet — evaluate a tool call with <code>kya wrap</code> and this page will refresh."
+            : "No events yet — evaluate a tool call with <code>kya wrap</code>, then regenerate this receipt.";
         return `<p class="empty">${hint}</p>`;
     }
     const sorted = [...events].sort((a, b) => b.ts.localeCompare(a.ts));
@@ -541,39 +542,111 @@ function orrPanel(orr, nowMs) {
   <p class="mute small">scorecards: ${orr.scorecards.pass} pass · ${orr.scorecards.fail} fail · ${orr.scorecards.partial} partial · ${orr.scorecards.notEvaluated} n/e${when}</p>
 </section>`;
 }
-function certifyPanel(certify) {
-    if (!certify)
-        return "";
-    const chips = [
-        ["Pass", certify.pass],
-        ["Gap", certify.gap],
-        ["Insufficient", certify.insufficientEvidence],
-        ["Attested", certify.attested],
-    ]
-        .map(([label, n]) => `<span class="stat">${label}<b>${n}</b></span>`)
-        .join("");
+function usdText(usd) {
+    return usd === null ? "USD n/a" : `~$${usd.toFixed(2)}`;
+}
+/** KPI tile: big tabular number over a small caps label. The tone class is
+ * only applied above zero — a zero count never reads as a signal. */
+function kpiTile(label, value, cls = "") {
+    const v = typeof value === "number" ? value : esc(value);
+    const toned = typeof value === "number" && value > 0 && cls ? ` ${cls}` : "";
+    return `<div class="kpi"><span class="kpi-num${toned}">${v}</span><span class="kpi-lab">${label}</span></div>`;
+}
+/**
+ * Hero Certify panel: purpose-built rich card for the live Agent Trust
+ * Baseline. The section carries the result state (`hero-certify pass|gap|
+ * none`) for the accent border; an absent card is a fail-closed neutral
+ * state that must never read as a pass.
+ */
+function heroCertifyPanel(certify) {
+    if (!certify) {
+        return `<section class="panel hero-certify none" aria-label="Certify">
+  <h2>Certify — Agent Trust Baseline</h2>
+  <div class="orrline">
+    <span class="pill">not evaluated</span>
+  </div>
+  <p class="mute small">No live evaluation available — wrap tool calls and run kya certify to build the baseline.</p>
+</section>`;
+    }
+    const state = certify.result === "pass" ? "pass" : "gap";
+    // topGaps arrives severity-ordered from the loader; cap defensively at 5.
     const gaps = certify.topGaps.length === 0
         ? ""
         : `<ul class="rows">
 ${certify.topGaps
-            .map((g) => `    <li><code>${esc(g.id)}</code> — ${esc(g.severity)}</li>`)
+            .slice(0, 5)
+            .map((g) => `    <li><code>${esc(g.id)}</code> <span class="sev ${esc(g.severity)}">${esc(g.severity)}</span></li>`)
             .join("\n")}
   </ul>`;
-    // Pill tones reuse the ORR panel's classes: pass is green, gap is amber.
-    return `<section class="panel" aria-label="Certify">
+    // Pill tones reuse the ORR palette: pass is green, gap is amber.
+    return `<section class="panel hero-certify ${state}" aria-label="Certify">
   <h2>Certify — Agent Trust Baseline</h2>
   <div class="orrline">
-    <span class="pill orr-${certify.result === "pass" ? "green" : "amber"}">${esc(certify.result)}</span>
+    <span class="pill orr-${state === "pass" ? "green" : "amber"}">${esc(certify.result)}</span>
+  </div>
+  <div class="kpi-row">
+    ${kpiTile("Pass", certify.pass, "ok")}
+    ${kpiTile("Gap", certify.gap, "warn")}
+    ${kpiTile("Insufficient", certify.insufficientEvidence, "mute")}
+    ${kpiTile("Attested", certify.attested, "ok")}
   </div>
-  <div class="stats">${chips}</div>
   ${gaps}
   <p class="mute small">live evaluation — window ${certify.windowDays}d, ${certify.trailEvents} trail events · kya certify for the full gap report + signed bundle</p>
 </section>`;
 }
-function usdText(usd) {
-    return usd === null ? "USD n/a" : `~$${usd.toFixed(2)}`;
+/** Hero KPI cards: compact, non-interactive rollups (filters live in the
+ * Activity zone's chip bar). Numbers keep tabular-nums via .mix-num/.kpi-num. */
+function verdictsHeroCard(c, total) {
+    // Base 100% = total events, matching dashboard.ts's verdictMix contract:
+    // verdict is a free-form string from untrusted JSONL, so an event may land
+    // in no bucket (bogus verdict) while still counting in `never` — only the
+    // raw event count keeps every bar inside the base the Overview card uses.
+    const pct = (n) => (total > 0 ? Math.round((n / total) * 100) : 0);
+    const mixRow = (label, n, fill) => `<div class="mix-row"><span class="mix-lab">${label}</span><span class="mix-bar"><span class="mix-fill ${fill}" style="width:${pct(n)}%"></span></span><span class="mix-num">${n}</span></div>`;
+    return `<section class="panel" aria-label="Verdicts">
+  <h2>Verdicts</h2>
+  <div class="mix">
+    ${mixRow("Allow", c.allow, "ok")}
+    ${mixRow("Deny", c.deny, "bad")}
+    ${mixRow("Review", c.require, "warn")}
+    ${mixRow("Never", c.never, "bad")}
+  </div>
+</section>`;
+}
+const SPARK_BARS = 7;
+const SPARK_H = 24;
+/**
+ * Inline 7-bar sparkline (no JS): the last 7 activity buckets, left-padded
+ * with zeros, heights normalized so the max bucket is full height. Empty
+ * input renders a flat baseline — heights are guarded, never NaN/Infinity.
+ */
+function activitySparkline(activity) {
+    const counts = activity.buckets.slice(-SPARK_BARS).map((b) => b.count);
+    while (counts.length < SPARK_BARS)
+        counts.unshift(0);
+    const max = Math.max(0, ...counts);
+    const rects = counts
+        .map((n, i) => {
+        const h = max > 0 ? Math.round((n / max) * SPARK_H) : 0;
+        return `<rect x="${i * 10}" y="${SPARK_H - h}" width="8" height="${h}" rx="1"></rect>`;
+    })
+        .join("");
+    const unit = activity.granularity === "hour" ? "hours" : "days";
+    return `<svg class="spark" viewBox="0 0 68 ${SPARK_H}" role="img" aria-label="Activity, last ${SPARK_BARS} ${unit}">${rects}<line class="base" x1="0" y1="${SPARK_H - 0.5}" x2="68" y2="${SPARK_H - 0.5}"></line></svg>`;
 }
-function showbackPanel(report) {
+function activityHeroCard(agg, db, total) {
+    return `<section class="panel" aria-label="Activity">
+  <h2>Activity</h2>
+  <div class="kpi-row">
+    ${kpiTile("Events", total)}
+  </div>
+  ${activitySparkline(db.activity)}
+  <p class="mute small">observe ${agg.modes.observe} · hold ${agg.modes.hold} · offline ${agg.modes.offline} · IDE ${agg.planes.ide} · runtime ${agg.planes.runtime}</p>
+</section>`;
+}
+/** Hero-styled showback: same fields as the old panel (tokens in/out, est.
+ * USD, top runs, disclaimer), omitted entirely when no report exists. */
+function showbackHeroCard(report) {
     if (!report)
         return "";
     const topRuns = [...report.perRun]
@@ -588,7 +661,11 @@ ${topRuns
   </ul>`;
     return `<section class="panel" aria-label="Showback">
   <h2>Showback (observe only)</h2>
-  <p class="line">${report.totalTokensIn} tokens in · ${report.totalTokensOut} tokens out · ${esc(usdText(report.estimatedUsd))}</p>
+  <div class="kpi-row">
+    ${kpiTile("Tokens in", report.totalTokensIn)}
+    ${kpiTile("Tokens out", report.totalTokensOut)}
+    ${kpiTile("Est. USD", usdText(report.estimatedUsd))}
+  </div>
   ${runs}
   <p class="mute small">${esc(SHOWBACK_DISCLAIMER)}</p>
 </section>`;
@@ -644,6 +721,12 @@ export function renderReceiptHtml(model) {
     // must never resolve via Object.prototype. The id lets tests extract just
     // this script. KNOWN is space-delimited so `indexOf(' '+g+' ')` doubles as a
     // prototype-safe whitelist ('constructor' etc. never match).
+    // Filter state persists in the ?f= QUERY param, not the hash: the hash is
+    // owned by the pure-CSS :target tabs (#overview/#activity/#system), so a
+    // hash-based filter would hide the Activity zone on every chip toggle and
+    // every tab click would wipe the filter. Legacy #f= hashes are still parsed
+    // on load (read-only); the next save writes the ?f= form and drops the
+    // legacy fragment.
     const filterScript = `<script id="kya-filters">
 (function(){
   var feed = document.getElementById('feed');
@@ -654,9 +737,20 @@ export function renderReceiptHtml(model) {
   var chips = document.querySelectorAll('[data-fgroup]');
   function parse(){
     state = Object.create(null);
-    var h = location.hash;
-    if (h.indexOf('#f=') !== 0) return;
-    h.slice(3).split(',').forEach(function(seg){
+    var raw = null;
+    var s = location.search;
+    if (s.indexOf('?') === 0) {
+      var params = s.slice(1).split('&');
+      for (var i = 0; i < params.length; i++) {
+        if (params[i].indexOf('f=') === 0) { raw = params[i].slice(2); break; }
+      }
+    }
+    if (raw === null) {
+      var legacy = location.hash;
+      if (legacy.indexOf('#f=') === 0) raw = legacy.slice(3);
+    }
+    if (raw === null) return;
+    raw.split(',').forEach(function(seg){
       var i = seg.indexOf(':');
       if (i < 1) return;
       var g = seg.slice(0, i);
@@ -672,8 +766,22 @@ export function renderReceiptHtml(model) {
     Object.keys(state).forEach(function(g){
       Object.keys(state[g]).forEach(function(v){ parts.push(g + ':' + encodeURIComponent(v)); });
     });
-    var h = parts.length ? '#f=' + parts.join(',') : '';
-    history.replaceState(null, '', location.pathname + location.search + h);
+    // Rebuild the query rather than overwrite it: the live page carries its
+    // loopback token as ?t= and must not lose it on a chip toggle.
+    var kept = [];
+    var s = location.search;
+    if (s.indexOf('?') === 0) {
+      var params = s.slice(1).split('&');
+      for (var i = 0; i < params.length; i++) {
+        if (params[i] && params[i].indexOf('f=') !== 0) kept.push(params[i]);
+      }
+    }
+    if (parts.length) kept.push('f=' + parts.join(','));
+    var q = kept.length ? '?' + kept.join('&') : '';
+    // The tab hash rides along untouched; a legacy #f= fragment is not a tab
+    // hash and is dropped now that the state lives in the query.
+    var h = location.hash.indexOf('#f=') === 0 ? '' : location.hash;
+    history.replaceState(null, '', location.pathname + q + h);
   }
   function active(){
     return Object.keys(state).some(function(g){ return Object.keys(state[g]).length > 0; });
@@ -721,406 +829,71 @@ export function renderReceiptHtml(model) {
 })();
 </script>`;
     const livePill = model.live ? `<span class="live" title="Watching trail.jsonl">Live</span>` : "";
+    // Zones never render as bare whitespace: with no panels they get a hint.
+    const zoneBody = (parts, empty) => parts.some((p) => p.length > 0)
+        ? parts.filter(Boolean).join("\n    ")
+        : `<p class="mute small zone-empty">${empty}</p>`;
+    const overviewBody = zoneBody([dashboardPanel(dashboard), sessionsPanel(agg, nowMs), reasonsPanel(agg)], "No activity in this window yet — analytics appear once events land.");
+    const systemBody = zoneBody([
+        wiredHostsPanel(model.wiredHosts),
+        sandboxesPanel(model.sandboxes, nowMs),
+        orrPanel(model.orr, nowMs),
+        toolsHtml,
+    ], "No system state yet — wire a host, configure a sandbox, or run an ORR.");
     const html = `<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="utf-8"/>
 <meta name="viewport" content="width=device-width, initial-scale=1"/>
 <title>${esc(model.title)} - ${esc(model.rangeLabel)}</title>
-<style>
-  :root {
-    color-scheme: dark;
-    --bg: #0a0c10;
-    --fg: #eef2f7;
-    --mute: #8b95a8;
-    --line: #1c2330;
-    --card: #10141c;
-    --ok: #3ecf8e;
-    --bad: #ff5d5d;
-    --warn: #f0b429;
-    --rail: #2a3344;
-    --day: #6b7280;
-  }
-  @media (prefers-color-scheme: light) {
-    :root {
-      color-scheme: light;
-      --bg: #f3f5f8;
-      --fg: #0f172a;
-      --mute: #64748b;
-      --line: #e2e8f0;
-      --card: #ffffff;
-      --ok: #059669;
-      --bad: #dc2626;
-      --warn: #d97706;
-      --rail: #cbd5e1;
-      --day: #64748b;
-    }
-  }
-  * { box-sizing: border-box; }
-  body {
-    margin: 0;
-    font-family: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
-    background: var(--bg);
-    color: var(--fg);
-    line-height: 1.4;
-  }
-  main { max-width: 42rem; margin: 0 auto; padding: 1.35rem 1rem 3rem; }
-  header.bar {
-    position: sticky; top: 0; z-index: 3;
-    background: color-mix(in srgb, var(--bg) 88%, transparent);
-    backdrop-filter: blur(10px);
-    padding: 0.85rem 0 0.75rem;
-    border-bottom: 1px solid var(--line);
-    margin-bottom: 1rem;
-  }
-  .title-row {
-    display: flex; align-items: baseline; justify-content: space-between;
-    gap: 0.75rem; flex-wrap: wrap;
-  }
-  h1 {
-    margin: 0; font-size: 1.2rem; font-weight: 600;
-    letter-spacing: -0.025em;
-  }
-  .range { color: var(--mute); font-size: 0.85rem; display: inline-flex; align-items: center; gap: 0.5rem; }
-  .live {
-    display: inline-flex; align-items: center; gap: 0.35rem;
-    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
-    color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent);
-    border-radius: 999px; padding: 0.12rem 0.5rem;
-  }
-  .live::before {
-    content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%;
-    background: var(--ok);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent);
-    animation: pulse 1.6s ease-in-out infinite;
-  }
-  .live.off { color: var(--mute); border-color: var(--line); }
-  .live.off::before { background: var(--mute); box-shadow: none; animation: none; }
-  @keyframes pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.45; }
-  }
-  @media (prefers-reduced-motion: reduce) {
-    .live::before { animation: none; }
-  }
-  .stats {
-    display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.7rem;
-  }
-  .stat {
-    font-size: 0.75rem; font-variant-numeric: tabular-nums;
-    color: var(--mute); background: var(--card);
-    border: 1px solid var(--line); border-radius: 999px;
-    padding: 0.2rem 0.6rem;
-  }
-  .stat b { color: var(--fg); font-weight: 650; margin-left: 0.25rem; }
-  .stat.bad b { color: var(--bad); }
-  .stat.warn b { color: var(--warn); }
-  .stat.ok b { color: var(--ok); }
-  button.stat {
-    font-family: inherit; cursor: pointer;
-    appearance: none; -webkit-appearance: none;
-  }
-  button.stat:hover { border-color: var(--mute); }
-  .stat[aria-pressed="true"] {
-    color: var(--fg);
-    border-color: color-mix(in srgb, var(--ok) 55%, var(--line));
-    background: color-mix(in srgb, var(--ok) 12%, var(--card));
-  }
-  .stat[hidden] { display: none; }
-  .clear-filters { color: var(--mute); font-size: 0.72rem; }
-  /* Analytics dashboard: 2×2 card grid, collapses to one column on narrow. */
-  .db-grid {
-    display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1.1rem;
-  }
-  @media (max-width: 700px) {
-    .db-grid { grid-template-columns: 1fr; }
-  }
-  .db-card { min-width: 0; }
-  .db-card h3 {
-    margin: 0 0 0.4rem; font-size: 0.68rem; font-weight: 700;
-    letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute);
-  }
-  .db-card h3 .mute { text-transform: none; letter-spacing: 0.02em; font-weight: 600; }
-  .db-card .sub {
-    margin: 0.35rem 0 0.15rem; font-size: 0.66rem; font-weight: 700;
-    letter-spacing: 0.05em; text-transform: uppercase; color: var(--day);
-  }
-  /* Filter-linked bar row: block variant of .stat's hover/active contract. */
-  .db-item {
-    display: grid; grid-template-columns: 6.5rem 1fr 2.4rem;
-    gap: 0.5rem; align-items: center; width: 100%;
-    font-family: inherit; font-size: 0.76rem; font-variant-numeric: tabular-nums;
-    color: var(--mute); text-align: left;
-    background: transparent; border: 1px solid transparent; border-radius: 8px;
-    padding: 0.14rem 0.3rem; cursor: pointer;
-    appearance: none; -webkit-appearance: none;
-  }
-  .db-item:hover { border-color: var(--line); background: color-mix(in srgb, var(--bg) 55%, var(--card)); }
-  .db-item[aria-pressed="true"] {
-    color: var(--fg);
-    border-color: color-mix(in srgb, var(--ok) 55%, var(--line));
-    background: color-mix(in srgb, var(--ok) 12%, var(--card));
-  }
-  .db-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .db-bar {
-    height: 0.55rem; border-radius: 4px; overflow: hidden;
-    background: color-mix(in srgb, var(--bg) 55%, var(--card));
-  }
-  .db-fill { display: block; height: 100%; border-radius: 4px; }
-  .db-fill.ok { background: var(--ok); }
-  .db-fill.warn { background: var(--warn); }
-  .db-fill.bad { background: var(--bad); }
-  .db-num { text-align: right; color: var(--fg); }
-  /* Vertical mini-bar timeline (not clickable — no time filter exists). */
-  .db-tl { display: flex; align-items: stretch; gap: 2px; height: 4.6rem; }
-  .db-tl .col {
-    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
-    align-items: center; justify-content: flex-end; gap: 0.15rem;
-  }
-  .db-vbar {
-    width: 100%; min-height: 2px; border-radius: 2px 2px 0 0;
-    background: color-mix(in srgb, var(--ok) 75%, var(--mute));
-  }
-  .db-tl .lab {
-    font-size: 0.52rem; color: var(--mute); white-space: nowrap;
-    overflow: hidden; max-width: 100%; font-variant-numeric: tabular-nums;
-  }
-  /* utility: must beat .ev's display:grid (same specificity, later rule would win) */
-  .filtered-out { display: none !important; }
-  .identity {
-    margin-top: 0.45rem; color: var(--mute); font-size: 0.78rem;
-    word-break: break-word;
-  }
-  .modeb {
-    display: inline-block; font-size: 0.6rem; font-weight: 700;
-    color: var(--mute); border: 1px solid var(--line); border-radius: 4px;
-    padding: 0 0.28rem; line-height: 1.1rem; vertical-align: baseline;
-  }
-  .panel {
-    background: var(--card); border: 1px solid var(--line);
-    border-radius: 12px; padding: 0.7rem 0.9rem 0.8rem; margin-bottom: 1rem;
-  }
-  .panel h2 {
-    margin: 0 0 0.5rem; font-size: 0.72rem; font-weight: 700;
-    letter-spacing: 0.07em; text-transform: uppercase; color: var(--day);
-  }
-  .panel .sub { margin: 0 0 0.45rem; color: var(--mute); font-size: 0.8rem; }
-  .panel .line { margin: 0.25rem 0; font-size: 0.84rem; word-break: break-word; }
-  .panel .mute { color: var(--mute); }
-  .panel .small { font-size: 0.74rem; }
-  .rows {
-    list-style: none; margin: 0; padding: 0;
-    display: flex; flex-direction: column; gap: 0.3rem;
-    font-size: 0.82rem;
-  }
-  .rows li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.45rem; min-width: 0; }
-  .rows li.mute { color: var(--mute); }
-  .rows .sid, .rows code {
-    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
-    font-size: 0.78rem; word-break: break-all;
-  }
-  .rows .cnt { color: var(--mute); font-size: 0.76rem; }
-  .rows .rel { margin-left: auto; color: var(--mute); font-size: 0.74rem; white-space: nowrap; }
-  .rows .hint {
-    font-size: 0.72rem; border-bottom: 1px dotted var(--mute); cursor: help;
-  }
-  .wdot {
-    width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: none;
-    align-self: center; background: var(--mute);
-  }
-  .wdot.allow { background: var(--ok); }
-  .wdot.hold { background: var(--warn); }
-  .wdot.deny, .wdot.never { background: var(--bad); }
-  .chiprow { display: flex; flex-wrap: wrap; gap: 0.35rem; }
-  .chip {
-    font-size: 0.76rem; color: var(--mute);
-    background: color-mix(in srgb, var(--bg) 55%, var(--card));
-    border: 1px solid var(--line); border-radius: 999px; padding: 0.15rem 0.55rem;
-  }
-  .chip code {
-    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
-    color: var(--fg); font-size: 0.74rem;
-  }
-  .tbl { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
-  .tbl th {
-    text-align: left; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em;
-    text-transform: uppercase; color: var(--mute); padding: 0.15rem 0.5rem 0.3rem 0;
-  }
-  .tbl td { padding: 0.2rem 0.5rem 0.2rem 0; border-top: 1px solid var(--line); }
-  .tbl code {
-    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 0.76rem;
-  }
-  .pill {
-    display: inline-block; font-size: 0.7rem; font-weight: 700;
-    letter-spacing: 0.04em; text-transform: uppercase;
-    border-radius: 999px; padding: 0.1rem 0.55rem;
-    border: 1px solid var(--line); color: var(--mute);
-  }
-  .pill.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
-  .pill.orr-green { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
-  .pill.orr-amber { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
-  .pill.orr-red { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
-  .orrline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.55rem; }
-  .orrline .disp { font-size: 0.84rem; font-weight: 600; }
-  .alert {
-    display: flex; flex-wrap: wrap; gap: 0.45rem 0.75rem; align-items: baseline;
-    background: color-mix(in srgb, var(--bad) 12%, var(--card));
-    border: 1px solid color-mix(in srgb, var(--bad) 35%, var(--line));
-    border-radius: 10px; padding: 0.65rem 0.85rem; margin-bottom: 1rem;
-    font-size: 0.85rem;
-  }
-  .alert strong { color: var(--bad); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
-  .alert code {
-    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
-    font-size: 0.78rem;
-  }
-  .feed {
-    background: var(--card);
-    border: 1px solid var(--line);
-    border-radius: 12px;
-    overflow: hidden;
-  }
-  .day {
-    padding: 0.55rem 0.9rem 0.35rem;
-    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em;
-    text-transform: uppercase; color: var(--day);
-    background: color-mix(in srgb, var(--bg) 55%, var(--card));
-    border-bottom: 1px solid var(--line);
-  }
-  .ev {
-    display: grid; grid-template-columns: 1.1rem 1fr; gap: 0;
-    border-bottom: 1px solid var(--line);
-  }
-  .ev:last-child { border-bottom: none; }
-  .rail {
-    position: relative;
-    display: flex; justify-content: center;
-    padding-top: 1.05rem;
-  }
-  .rail::before {
-    content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
-    width: 1px; background: var(--rail); transform: translateX(-50%);
-  }
-  .tick {
-    width: 0.55rem; height: 0.55rem; border-radius: 50%;
-    background: var(--mute); position: relative; z-index: 1;
-    box-shadow: 0 0 0 3px var(--card);
-  }
-  .ev.ok .tick { background: var(--ok); }
-  .ev.bad .tick { background: var(--bad); }
-  .ev.warn .tick { background: var(--warn); }
-  .ev.never { background: color-mix(in srgb, var(--bad) 7%, transparent); }
-  .main { padding: 0.7rem 0.85rem 0.7rem 0.35rem; min-width: 0; }
-  .top {
-    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.55rem;
-  }
-  @media (max-width: 480px) {
-    .when { flex-basis: 100%; margin-left: 0; margin-top: 0.1rem; }
-  }
-  .verdict {
-    font-size: 0.68rem; font-weight: 750; letter-spacing: 0.05em;
-    min-width: 2.6rem;
-  }
-  .ev.ok .verdict { color: var(--ok); }
-  .ev.bad .verdict { color: var(--bad); }
-  .ev.warn .verdict { color: var(--warn); }
-  .tool {
-    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
-    font-size: 0.84rem; word-break: break-word; flex: 1 1 auto;
-  }
-  .when {
-    margin-left: auto; color: var(--mute); font-size: 0.72rem;
-    font-variant-numeric: tabular-nums; white-space: nowrap;
-  }
-  .when .rel { opacity: 0.85; margin-left: 0.35rem; }
-  .summary {
-    margin-top: 0.2rem;
-    font-size: 0.84rem;
-    color: var(--fg);
-    word-break: break-word;
-  }
-  details.diff {
-    margin-top: 0.35rem;
-    border: 1px solid var(--line);
-    border-radius: 8px;
-    background: color-mix(in srgb, var(--bg) 55%, var(--card));
-    overflow: hidden;
-  }
-  details.diff > summary {
-    cursor: pointer;
-    list-style: none;
-    padding: 0.35rem 0.55rem;
-    font-size: 0.72rem;
-    font-weight: 650;
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
-    color: var(--mute);
-  }
-  details.diff > summary::-webkit-details-marker { display: none; }
-  details.diff pre {
-    margin: 0;
-    padding: 0.45rem 0.55rem 0.6rem;
-    border-top: 1px solid var(--line);
-    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
-    font-size: 0.72rem;
-    line-height: 1.35;
-    white-space: pre-wrap;
-    word-break: break-word;
-    color: var(--fg);
-  }
-  .meta {
-    margin-top: 0.18rem; color: var(--mute); font-size: 0.76rem;
-    display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: baseline;
-  }
-  .dot { opacity: 0.55; }
-  .empty { margin: 0; padding: 1.25rem 1rem; color: var(--mute); font-size: 0.9rem; }
-  .tools {
-    margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center;
-  }
-  .tools .label {
-    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em;
-    text-transform: uppercase; color: var(--mute); margin-right: 0.25rem;
-  }
-  .tools code {
-    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
-    font-size: 0.72rem; color: var(--mute);
-    background: var(--card); border: 1px solid var(--line);
-    border-radius: 6px; padding: 0.18rem 0.4rem;
-  }
-</style>
+<style>${receiptCss()}</style>
 </head>
 <body>
 <main>
-  <header class="bar">
-    <div class="title-row">
-      <h1>${esc(model.title)}</h1>
-      <div class="range">${esc(model.rangeLabel)}${livePill}</div>
-    </div>
-    ${identityLine(model.identity)}
-    <div class="stats" aria-label="Counts">
-      <button type="button" class="stat ok" data-fgroup="verdict" data-fvalue="ALLOW" aria-pressed="false" title="Filter: Allow">Allow<b>${c.allow}</b></button>
-      <button type="button" class="stat bad" data-fgroup="verdict" data-fvalue="DENY" aria-pressed="false" title="Filter: Deny">Deny<b>${c.deny}</b></button>
-      <button type="button" class="stat warn" data-fgroup="verdict" data-fvalue="REQUIRE_APPROVE" aria-pressed="false" title="Filter: Review">Review<b>${c.require}</b></button>
-      <button type="button" class="stat" data-fgroup="never" data-fvalue="1" aria-pressed="false" title="Filter: Never">Never<b>${c.never}</b></button>
-      ${chips.modes}${chips.planes}
-      <button type="button" class="stat clear-filters" id="clear-filters" hidden>Clear filters ×</button>
-    </div>
-    ${chips.products}
-    ${chips.projects}
-  </header>
+  <div class="topstick">
+    <header class="bar">
+      <div class="title-row">
+        <h1>${esc(model.title)}</h1>
+        <div class="range">${esc(model.rangeLabel)}${livePill}</div>
+      </div>
+      ${identityLine(model.identity)}
+    </header>
+    <nav class="tabs" aria-label="Report sections">
+      <a class="tab" id="tab-overview" href="#overview">Overview</a>
+      <a class="tab" id="tab-activity" href="#activity">Activity</a>
+      <a class="tab" id="tab-system" href="#system">System</a>
+    </nav>
+  </div>
   ${blockedBanner}
-  ${dashboardPanel(dashboard)}
-  <section class="feed" id="feed" aria-label="Activity feed">
+  <div class="hero">
+    ${heroCertifyPanel(model.certify)}
+    ${verdictsHeroCard(c, events.length)}
+    ${activityHeroCard(agg, dashboard, events.length)}
+    ${showbackHeroCard(model.showback)}
+  </div>
+  <section class="zone" id="overview" aria-labelledby="tab-overview">
+    ${overviewBody}
+  </section>
+  <section class="zone" id="activity" aria-labelledby="tab-activity">
+    <div class="feed-head">
+      <div class="stats" aria-label="Counts">
+        <button type="button" class="stat ok" data-fgroup="verdict" data-fvalue="ALLOW" aria-pressed="false" title="Filter: Allow">Allow<b>${c.allow}</b></button>
+        <button type="button" class="stat bad" data-fgroup="verdict" data-fvalue="DENY" aria-pressed="false" title="Filter: Deny">Deny<b>${c.deny}</b></button>
+        <button type="button" class="stat warn" data-fgroup="verdict" data-fvalue="REQUIRE_APPROVE" aria-pressed="false" title="Filter: Review">Review<b>${c.require}</b></button>
+        <button type="button" class="stat" data-fgroup="never" data-fvalue="1" aria-pressed="false" title="Filter: Never">Never<b>${c.never}</b></button>
+        ${chips.modes}${chips.planes}
+        <button type="button" class="stat clear-filters" id="clear-filters" hidden>Clear filters ×</button>
+      </div>
+      ${chips.products}
+      ${chips.projects}
+    </div>
+    <section class="feed" id="feed" aria-label="Activity feed">
 ${renderFeed(events, nowMs, model.live)}
+    </section>
+  </section>
+  <section class="zone" id="system" aria-labelledby="tab-system">
+    ${systemBody}
   </section>
-  ${sessionsPanel(agg, nowMs)}
-  ${reasonsPanel(agg)}
-  ${wiredHostsPanel(model.wiredHosts)}
-  ${sandboxesPanel(model.sandboxes, nowMs)}
-  ${orrPanel(model.orr, nowMs)}
-  ${certifyPanel(model.certify)}
-  ${showbackPanel(model.showback)}
-  ${toolsHtml}
 </main>
 ${filterScript}
 ${liveScript}
@@ -1170,6 +943,17 @@ export function renderReceiptMarkdown(model) {
     if (agg.projects.length >= 2) {
         lines.push("## Projects", ...agg.projects.map((p) => `- ${mdText(p.label)} × ${p.count}`), "");
     }
+    if (model.certify) {
+        const c = model.certify;
+        lines.push("## Certify", `result: ${c.result} · counts: ${c.pass} pass · ${c.gap} gap · ${c.insufficientEvidence} insufficient · ${c.attested} attested`);
+        if (c.topGaps.length > 0) {
+            lines.push("Top gaps:");
+            for (const g of c.topGaps) {
+                lines.push(`- \`${mdInline(g.id)}\` — ${mdText(g.severity)}`);
+            }
+        }
+        lines.push(`live evaluation — window ${c.windowDays}d, ${c.trailEvents} trail events · kya certify for the full gap report + signed bundle`, "");
+    }
     const db = computeDashboard(model.events);
     if (db.verdictMix.total > 0) {
         const pct = (n) => Math.round((n / db.verdictMix.total) * 100);
@@ -1259,17 +1043,6 @@ export function renderReceiptMarkdown(model) {
             lines.push(`Most urgent fix: ${mdText(orr.mostUrgentFix)}`);
         lines.push(`scorecards: ${orr.scorecards.pass} pass · ${orr.scorecards.fail} fail · ${orr.scorecards.partial} partial · ${orr.scorecards.notEvaluated} n/e${orr.generatedAt ? ` · ${relativeTime(orr.generatedAt, nowMs)}` : ""}`, "");
     }
-    if (model.certify) {
-        const c = model.certify;
-        lines.push("## Certify", `result: ${c.result} · counts: ${c.pass} pass · ${c.gap} gap · ${c.insufficientEvidence} insufficient · ${c.attested} attested`);
-        if (c.topGaps.length > 0) {
-            lines.push("Top gaps:");
-            for (const g of c.topGaps) {
-                lines.push(`- \`${mdInline(g.id)}\` — ${mdText(g.severity)}`);
-            }
-        }
-        lines.push(`live evaluation — window ${c.windowDays}d, ${c.trailEvents} trail events · kya certify for the full gap report + signed bundle`, "");
-    }
     if (model.showback) {
         const sb = model.showback;
         lines.push("## Showback (observe only)", `${sb.totalTokensIn} tokens in · ${sb.totalTokensOut} tokens out · ${usdText(sb.estimatedUsd)}`);