@shield-agent/kya 0.14.0 → 0.16.0

package/dist/receipt/render-receipt.js

@@ -10,7 +10,7 @@ import { loadCertifyCard, loadIdentity, loadOrrCard, loadSandboxes, loadShowback
 import { SHOWBACK_DISCLAIMER, } from "../showback/cost-per-task.js";
 import { computeDashboard } from "./dashboard.js";
 import { buildChangesModel } from "./changes.js";
-import { loadGateCard } from "./gate-card.js";
+import { GATE_NOT_SETUP_QUICKSTART, loadGatePage, LOOPBACK_RULE, toolNameFromToolId, toolServerPrefix, } from "./gate-page.js";
 import { receiptCss } from "./receipt-css.js";
 function esc(s) {
     return stripEscapes(s)
@@ -249,7 +249,7 @@ export function loadReceiptModel(input) {
         identity: loadIdentity(input.cwd),
         sandboxes: loadSandboxes(input.cwd),
         wiredHosts: loadWiredHosts(input.cwd),
-        gate: loadGateCard(events),
+        gate: loadGatePage(events),
         orr: loadOrrCard(input.cwd),
         certify: loadCertifyCard(input.cwd),
         showback,
@@ -265,6 +265,25 @@ export function loadReceiptModel(input) {
     }
     return buildWindowReceiptModel(events, days, extras);
 }
+/**
+ * Build the data-* filter facet attribute string shared by feed articles and
+ * change entries. `sessionId` is passed explicitly because change entries roll
+ * up under their session heading.
+ */
+function filterDataAttrs(e, sessionId) {
+    const never = e.neverEvent || e.reasonCode === "NEVER_EVENT";
+    const project = e.project?.trim();
+    const server = parseMcpToolId(e.toolId);
+    return (`data-verdict="${esc(e.verdict.toUpperCase())}"` +
+        (never ? ` data-never="1"` : "") +
+        ` data-mode="${esc(e.mode)}"` +
+        ` data-plane="${esc(e.host?.trim() || "unknown")}"` +
+        ` data-product="${esc(e.product ?? "other")}"` +
+        ` data-tool="${esc(clip(e.toolId, 60))}"` +
+        ` data-session="${esc(sessionId)}"` +
+        (server ? ` data-server="${esc(mcpServerLabel(server.server))}"` : "") +
+        (project ? ` data-project="${esc(project)}"` : ""));
+}
 function modeBadge(mode) {
     const letter = mode === "observe" ? "O" : mode === "hold" ? "H" : mode === "offline" ? "X" : "";
     if (!letter)
@@ -309,17 +328,7 @@ function renderFeed(events, nowMs, live) {
         // omitted when there is none. data-tool is clipped to 60 chars and must
         // match the tool filter values stamped on dashboard rows. data-server is
         // the recognized MCP server label, omitted for non-MCP or unknown servers.
-        const project = e.project?.trim();
-        const server = parseMcpToolId(e.toolId);
-        const dataAttrs = `data-verdict="${esc(e.verdict.toUpperCase())}"` +
-            (never ? ` data-never="1"` : "") +
-            ` data-mode="${esc(e.mode)}"` +
-            ` data-plane="${esc(e.host?.trim() || "unknown")}"` +
-            ` data-product="${esc(e.product ?? "other")}"` +
-            ` data-tool="${esc(clip(e.toolId, 60))}"` +
-            ` data-session="${esc(e.sessionId || "unknown")}"` +
-            (server ? ` data-server="${esc(mcpServerLabel(server.server))}"` : "") +
-            (project ? ` data-project="${esc(project)}"` : "");
+        const dataAttrs = filterDataAttrs(e, e.sessionId || "unknown");
         parts.push(`<article class="ev ${t}${never ? " never" : ""}" ${dataAttrs}>
   <div class="rail" aria-hidden="true"><span class="tick"></span></div>
   <div class="main">
@@ -363,17 +372,7 @@ function changesPanel(changes, nowMs) {
             const entries = f.entries
                 .map((e) => {
                 const t = tone(e.verdict);
-                const project = e.project?.trim();
-                const server = parseMcpToolId(e.toolId);
-                const dataAttrs = `data-verdict="${esc(e.verdict.toUpperCase())}"` +
-                    (e.never ? ` data-never="1"` : "") +
-                    ` data-mode="${esc(e.mode)}"` +
-                    ` data-plane="${esc(e.host?.trim() || "unknown")}"` +
-                    ` data-product="${esc(e.product ?? "other")}"` +
-                    ` data-tool="${esc(clip(e.toolId, 60))}"` +
-                    ` data-session="${esc(s.sessionId)}"` +
-                    (server ? ` data-server="${esc(mcpServerLabel(server.server))}"` : "") +
-                    (project ? ` data-project="${esc(project)}"` : "");
+                const dataAttrs = filterDataAttrs(e, s.sessionId);
                 return `      <div class="chg-entry ${t}${e.never ? " never" : ""}" ${dataAttrs}>
         <div class="top">
           <span class="verdict">${esc(verdictWord(e.verdict))}</span>${modeBadge(e.mode)}
@@ -417,6 +416,14 @@ function identityLine(identity) {
     // baseUrl is inert text here — never an anchor.
     return `<div class="identity">${esc(clip(bits.join(" · "), 160))}</div>`;
 }
+function navItem(href, label, count, runningDot) {
+    const countSpan = count !== undefined ? `<span class="nav-count">${count}</span>` : "";
+    const dot = runningDot ? '<span class="status-dot" aria-hidden="true"></span>' : "";
+    return `<a class="nav-link" id="tab-${href.slice(1)}" href="${href}">
+  <span class="nav-label">${dot}${esc(label)}</span>
+  ${countSpan}
+</a>`;
+}
 function statChips(agg) {
     // Chips are filter toggles: native buttons keep identical styling via .stat.
     const chip = (label, n, group, value, cls = "") => n > 0
@@ -607,11 +614,11 @@ function gatePanel(card, nowMs) {
   <div class="orrline">
     <span class="pill">not set up</span>
   </div>
-  <p class="line">Gateway not set up — <code>kya gate init</code> to put a governed gateway in front of any MCP server: every tool call proxied, evaluated, and on this trail.</p>
+  <p class="line">Gateway not set up — <code>kya start</code> puts a governed gateway in front of any MCP server automatically: every tool call proxied, evaluated, and on this trail.</p>
   <ol class="steps">
-    <li><code>kya gate init</code> — scaffold .kya/gateways.json with ready-to-move recipes</li>
-    <li><code>kya gate setup</code> — install the pinned gateway binary</li>
-    <li><code>kya gate run</code> — start the listener, then <code>kya connect &lt;host&gt; --gate</code></li>
+    <li>Add any MCP server to a host config (or <code>kya gate init</code> to pick from recipes)</li>
+    <li><code>kya start</code> — imports it, installs the gateway, and routes the host through it (originals backed up under .kya/backups)</li>
+    <li><code>kya gate doctor</code> — binary, config, listener health, loopback-only posture</li>
   </ol>
 </section>`;
     }
@@ -662,6 +669,207 @@ ${rows}
   <p class="mute small">${card.events} gateway event${card.events === 1 ? "" : "s"} in this window · <code>kya gate stop</code> stops everything</p>
 </section>`;
 }
+/**
+ * Full Gateway dashboard for the #gateway zone. Extends the compact System-tab
+ * panel with stat cards, listener details, targets table, policy cards, a dry-run
+ * playground, quick actions, and a gateway-native events table. All user-controlled
+ * values (server ids, commands, urls, tool names) are escaped.
+ */
+function gatePagePanel(page, nowMs) {
+    if (!page) {
+        return `<section class="zone" id="gateway" aria-labelledby="tab-gateway">
+    <p class="mute small zone-empty">Gateway details will appear here after setup.</p>
+  </section>`;
+    }
+    if (page.state === "not-set-up") {
+        return `<section class="zone gate-zone" id="gateway" aria-labelledby="tab-gateway">
+  <h2>Gateway</h2>
+  <p class="sub">Local MCP gate — every proxied tool call is evaluated and audited.</p>
+  <div class="card">
+    <span class="pill">not set up</span>
+    <p class="line">${esc(GATE_NOT_SETUP_QUICKSTART)}</p>
+    <div class="quick-actions">
+      <button type="button" class="stat" data-action="doctor" id="gate-action-doctor">Doctor</button>
+    </div>
+    <div id="gate-doctor-result"></div>
+  </div>
+</section>`;
+    }
+    const denyCount = page.gateEvents.filter((e) => e.verdict.toUpperCase() === "DENY" || e.neverEvent || e.reasonCode === "NEVER_EVENT").length;
+    const listenerStatus = page.state === "running"
+        ? `<span class="pill ok">running</span>`
+        : `<span class="pill">stopped</span>`;
+    const bindBadge = page.bindScope.loopbackOnly
+        ? `<span class="pill ok" title="${esc(page.bindScope.detail)}">loopback-only</span>`
+        : `<span class="pill warn" title="${esc(page.bindScope.detail)}">not loopback-only</span>`;
+    const statCards = `<div class="stat-cards">
+  <div class="stat-card">
+    <span class="lab">Listener</span>
+    <span class="val">${listenerStatus} ${bindBadge}</span>
+  </div>
+  <div class="stat-card">
+    <span class="lab">Targets</span>
+    <span class="num">${page.servers.length}</span>
+  </div>
+  <div class="stat-card">
+    <span class="lab">Events</span>
+    <span class="num">${page.gateEvents.length}</span>
+  </div>
+  <div class="stat-card">
+    <span class="lab">Denies</span>
+    <span class="num${denyCount > 0 ? " bad" : ""}">${denyCount}</span>
+  </div>
+</div>`;
+    const uptime = page.startedAt
+        ? `<p class="line">Up since <time datetime="${esc(page.startedAt)}">${esc(relativeTime(page.startedAt, nowMs))}</time></p>`
+        : "";
+    const binaryLine = page.binaryPresent
+        ? `<p class="line">Binary <code>${page.binaryVersion ? esc(clip(page.binaryVersion, 40)) : "installed"}</code> · <code>${esc(page.binaryPath)}</code></p>`
+        : `<p class="line">Binary missing — <code>kya gate setup</code></p>`;
+    const listenerUrl = page.url
+        ? `<p class="line">Listener <code>${esc(clip(page.url, 80))}</code> · port ${page.port ?? page.otlpPort}</p>`
+        : `<p class="line">Listener port ${page.port ?? 3930} (stopped)</p>`;
+    const listenerCard = `<div class="card">
+  <h3>Listener</h3>
+  ${listenerUrl}
+  ${uptime}
+  ${binaryLine}
+  <p class="line">OTLP receiver port ${page.otlpPort} · failure mode ${esc(page.failureMode)}</p>
+</div>`;
+    const targetsTable = (() => {
+        if (page.servers.length === 0) {
+            return `<div class="card">
+  <h3>Targets</h3>
+  <p class="empty small">No servers configured — add one to .kya/gateways.json or run <code>kya gate init</code>.</p>
+</div>`;
+        }
+        const rows = page.servers
+            .map((s) => {
+            const transport = s.transport === "stdio"
+                ? `<code title="${esc(s.cmd?.join(" ") ?? "")}">${esc(clip(s.cmd?.join(" ") ?? s.transport, 50))}</code>`
+                : `<code title="${esc(s.url ?? "")}">${esc(clip(s.url ?? s.transport, 50))}</code>`;
+            const provenance = s.importedFrom
+                .map((h) => `<span class="chip">${esc(h)}</span>`)
+                .join("");
+            const policy = `<span class="pill">${esc(s.policy.defaultTier ?? "unknown")}</span> · ${s.policy.denyPatterns.length} pattern${s.policy.denyPatterns.length === 1 ? "" : "s"}`;
+            const dot = s.worst === "none"
+                ? ""
+                : `<span class="wdot ${s.worst}" title="worst verdict: ${s.worst}"></span>`;
+            const denied = s.deniedTools.length === 0
+                ? '<span class="mute">—</span>'
+                : s.deniedTools.map((t) => `<span class="chip bad">${esc(t)}</span>`).join("");
+            return `      <tr data-server="${esc(s.serverFacet)}">
+        <td><span class="wdot ${s.worst === "none" ? "mute" : s.worst}"></span> <code>${esc(s.id)}</code></td>
+        <td>${transport}</td>
+        <td>${provenance}</td>
+        <td>${policy}</td>
+        <td>${dot} ${s.events}</td>
+        <td>${denied}</td>
+      </tr>`;
+        })
+            .join("\n");
+        return `<div class="card">
+  <h3>Targets</h3>
+  <table class="tbl targets-table">
+    <thead><tr><th>Server</th><th>Transport</th><th>Provenance</th><th>Policy</th><th>Events</th><th>Denied tools</th></tr></thead>
+    <tbody>
+${rows}
+    </tbody>
+  </table>
+</div>`;
+    })();
+    const policiesCard = `<div class="card">
+  <h3>Policies</h3>
+  <p class="sub">Network rule</p>
+  <pre><code>${esc(LOOPBACK_RULE)}</code></pre>
+  <p class="sub">Per-server deny patterns</p>
+  ${page.servers.length === 0 ? '<p class="mute small">No servers configured.</p>' : page.servers
+        .map((s) => `<details><summary><code>${esc(s.id)}</code> · ${s.policy.denyPatterns.length} pattern${s.policy.denyPatterns.length === 1 ? "" : "s"}</summary><pre><code>${esc(s.policy.denyPatterns.join("\n"))}</code></pre></details>`)
+        .join("\n")}
+  <p class="mute small">READ and WRITE tools are allowed; WRITE calls are observed/audited. Only destructive/admin patterns are denied.</p>
+</div>`;
+    const serverOptions = page.servers
+        .map((s) => `<option value="${esc(s.id)}">${esc(s.id)}</option>`)
+        .join("");
+    const playgroundCard = `<div class="card">
+  <h3>Playground</h3>
+  <p class="mute small">Dry-run — no tool is executed.</p>
+  <form class="playground-form" id="gate-play-form">
+    <label class="sr-only" for="gate-play-server">Server</label>
+    <select id="gate-play-server" name="server" required>
+      <option value="" disabled selected>Server</option>
+      ${serverOptions}
+    </select>
+    <label class="sr-only" for="gate-play-tool">Tool</label>
+    <input id="gate-play-tool" name="tool" type="text" placeholder="tool_name" required />
+    <button type="submit" class="stat">Evaluate</button>
+  </form>
+  <div id="gate-play-result"></div>
+</div>`;
+    const quickActions = (() => {
+        if (page.state === "configured-stopped") {
+            return `<button type="button" class="stat ok" data-action="start" id="gate-action-start">Start</button>
+  <button type="button" class="stat" data-action="doctor" id="gate-action-doctor">Doctor</button>`;
+        }
+        return `<button type="button" class="stat bad" data-action="stop" id="gate-action-stop">Stop</button>
+  <button type="button" class="stat warn" data-action="restart" id="gate-action-restart">Restart</button>
+  <button type="button" class="stat" data-action="doctor" id="gate-action-doctor">Doctor</button>`;
+    })();
+    const eventsTable = (() => {
+        if (page.gateEvents.length === 0) {
+            return `<div class="card">
+  <h3>Gateway events</h3>
+  <p class="empty small">No gateway events in this window.</p>
+</div>`;
+        }
+        const rows = [...page.gateEvents]
+            .sort((a, b) => b.ts.localeCompare(a.ts))
+            .slice(0, 25)
+            .map((e) => {
+            const server = toolServerPrefix(e.toolId) ?? "";
+            const tool = toolNameFromToolId(e.toolId) ?? e.toolId;
+            const t = tone(e.verdict);
+            const never = e.neverEvent || e.reasonCode === "NEVER_EVENT";
+            return `      <tr>
+        <td><time datetime="${esc(e.ts)}" title="${esc(e.ts)}">${esc(clock(e.ts))} <span class="rel">${esc(relativeTime(e.ts, nowMs))}</span></time></td>
+        <td><a href="?f=server:${esc(mcpServerLabel(server))}#activity">${esc(server)}</a></td>
+        <td><code>${esc(tool)}</code></td>
+        <td><span class="pill ${t}${never ? " orr-red" : ""}">${esc(verdictWord(e.verdict))}${never ? " · never" : ""}</span></td>
+      </tr>`;
+        })
+            .join("\n");
+        return `<div class="card">
+  <h3>Gateway events <span class="mute">latest 25</span></h3>
+  <table class="tbl">
+    <thead><tr><th>Time</th><th>Server</th><th>Tool</th><th>Verdict</th></tr></thead>
+    <tbody>
+${rows}
+    </tbody>
+  </table>
+</div>`;
+    })();
+    return `<section class="zone gate-zone" id="gateway" aria-labelledby="tab-gateway">
+  <h2>Gateway</h2>
+  <p class="sub">Local MCP gate — every proxied tool call is evaluated and audited.</p>
+  ${statCards}
+  <div class="card-grid">
+    ${listenerCard}
+    ${policiesCard}
+  </div>
+  ${targetsTable}
+  <div class="card-grid">
+    ${playgroundCard}
+    <div class="card">
+      <h3>Quick actions</h3>
+      <div class="quick-actions">
+        ${quickActions}
+      </div>
+      <div id="gate-doctor-result"></div>
+    </div>
+  </div>
+  ${eventsTable}
+</section>`;
+}
 function sandboxesPanel(card, nowMs) {
     if (!card)
         return "";
@@ -936,7 +1144,7 @@ function gateHeroCard(card) {
         ? `${card.url ? `<code>${esc(clip(card.url, 48))}</code> · ` : ""}${card.servers.length} server${card.servers.length === 1 ? "" : "s"} · ${card.events} event${card.events === 1 ? "" : "s"}`
         : card.state === "configured-stopped"
             ? `${card.servers.length} server${card.servers.length === 1 ? "" : "s"} configured — <code>kya gate run</code>`
-            : `<code>kya gate init</code> to govern any MCP server`;
+            : `add an MCP server to a host config — <code>kya start</code> governs it`;
     const pill = card.state === "running"
         ? `<span class="pill ok">running</span>`
         : `<span class="pill">${card.state === "configured-stopped" ? "stopped" : "not set up"}</span>`;
@@ -990,7 +1198,7 @@ export function renderReceiptHtml(model) {
 </footer>`;
     // liveToken is minted base64url by the live server — safe in a JS string
     // literal; static renders omit it. No post-hoc html.replace (spoofable).
-    const eventsUrl = model.liveToken ? `/events?t=${model.liveToken}` : "/events";
+    const eventsUrl = model.liveToken ? `/events?t=${encodeURIComponent(model.liveToken)}` : "/events";
     const liveScript = model.live
         ? `<script>
 (function(){
@@ -1131,6 +1339,148 @@ export function renderReceiptHtml(model) {
 })();
 </script>`;
     const livePill = model.live ? `<span class="live" title="Watching trail.jsonl">Live</span>` : "";
+    const themeScript = `<script>
+(function(){
+  var root = document.documentElement;
+  var btn = document.getElementById('theme-toggle');
+  function apply(theme){ root.setAttribute('data-theme', theme); }
+  var explicit = root.getAttribute('data-theme');
+  var stored = null;
+  try { stored = localStorage.getItem('kya-theme'); } catch(e){}
+  if (explicit) {
+    // honor an explicit theme set on the static artifact (e.g. screenshots)
+  } else if (stored) apply(stored);
+  else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) apply('light');
+  else apply('dark');
+  if (btn) btn.addEventListener('click', function(){
+    apply(root.getAttribute('data-theme') === 'dark' ? 'light' : 'dark');
+    try { localStorage.setItem('kya-theme', root.getAttribute('data-theme')); } catch(e){}
+  });
+})();
+</script>`;
+    // Gateway interactive controls: playground evaluator, quick actions, and the
+    // sidebar stop-report link. Only wired when the page is served by the live
+    // loopback server (token present). Token is read from the query string so it
+    // matches the same origin as the SSE endpoint; all user-controlled output is
+    // escaped before DOM insertion.
+    const gateScript = model.liveToken
+        ? `<script>
+(function(){
+  var T = '';
+  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('t=') === 0) {
+        try { T = decodeURIComponent(params[i].slice(2)); } catch(e){ T = params[i].slice(2); }
+        break;
+      }
+    }
+  }
+  if (!T) return;
+  function esc(str){
+    return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+  }
+  function setResult(el, html, isError){
+    if (!el) return;
+    el.innerHTML = '<div class="gate-result' + (isError ? ' error' : '') + '">' + html + '</div>';
+  }
+  function post(path, body){
+    return fetch(path + '?t=' + encodeURIComponent(T), {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body)
+    });
+  }
+  function parseJson(res){ return res.json(); }
+
+  var form = document.getElementById('gate-play-form');
+  if (form) {
+    form.addEventListener('submit', function(e){
+      e.preventDefault();
+      var server = form.elements.server.value.trim();
+      var tool = form.elements.tool.value.trim();
+      var resultEl = document.getElementById('gate-play-result');
+      var btn = form.querySelector('button[type="submit"]');
+      if (btn) btn.disabled = true;
+      setResult(resultEl, 'Evaluating...', false);
+      post('/gate/playground', { server: server, tool: tool })
+        .then(parseJson)
+        .then(function(data){
+          if (data && data.ok) {
+            var pill = '<span class="pill ' + (data.verdict === 'allow' ? 'ok' : 'bad') + '">' + esc(data.verdict.toUpperCase()) + '</span>';
+            setResult(resultEl, pill + '<p>' + esc(data.reason) + '</p>', false);
+          } else {
+            setResult(resultEl, '<p>Error: ' + esc(data && data.error ? data.error : 'unknown') + '</p>', true);
+          }
+        })
+        .catch(function(err){
+          setResult(resultEl, '<p>Error: ' + esc(err.message) + '</p>', true);
+        })
+        .finally(function(){
+          if (btn) btn.disabled = false;
+        });
+    });
+  }
+
+  var gateway = document.getElementById('gateway');
+  if (gateway) {
+    gateway.querySelectorAll('[data-action]').forEach(function(btn){
+      btn.addEventListener('click', function(){
+        var action = btn.getAttribute('data-action');
+        var resultEl = document.getElementById('gate-doctor-result');
+        btn.disabled = true;
+        if (action === 'doctor') setResult(resultEl, 'Running doctor...', false);
+        post('/gate/action', { action: action })
+          .then(parseJson)
+          .then(function(data){
+            if (data && data.ok) {
+              if (action === 'doctor') {
+                setResult(resultEl, '<pre>' + esc(JSON.stringify(data.report, null, 2)) + '</pre>', false);
+                btn.disabled = false;
+              } else {
+                setTimeout(function(){ location.reload(); }, 800);
+              }
+            } else {
+              setResult(resultEl, '<p>Error: ' + esc(data && data.error ? data.error : 'unknown') + '</p>', true);
+              btn.disabled = false;
+            }
+          })
+          .catch(function(err){
+            setResult(resultEl, '<p>Error: ' + esc(err.message) + '</p>', true);
+            btn.disabled = false;
+          });
+      });
+    });
+  }
+
+  var stopLink = document.getElementById('stop-report');
+  if (stopLink) {
+    stopLink.addEventListener('click', function(e){
+      e.preventDefault();
+      stopLink.textContent = 'Stopping...';
+      post('/stop', {})
+        .then(parseJson)
+        .then(function(data){
+          if (data && data.ok) {
+            stopLink.textContent = 'Report stopped';
+            stopLink.setAttribute('aria-disabled', 'true');
+            stopLink.style.pointerEvents = 'none';
+            stopLink.style.opacity = '0.6';
+          } else {
+            stopLink.textContent = 'Stop failed';
+            window.alert('Failed to stop report: ' + esc(data && data.error ? data.error : 'unknown'));
+          }
+        })
+        .catch(function(err){
+          stopLink.textContent = 'Stop failed';
+          window.alert('Failed to stop report: ' + esc(err.message));
+        });
+    });
+  }
+})();
+</script>`
+        : "";
     // 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    ")
@@ -1153,23 +1503,35 @@ export function renderReceiptHtml(model) {
 <style>${receiptCss()}</style>
 </head>
 <body>
+<aside class="sidebar">
+  <header class="sidebar-header">
+    <div class="brand">
+      <span class="mark" aria-hidden="true">k</span>
+      <span class="wordmark">kya</span>
+    </div>
+  </header>
+  <nav class="sidebar-nav" aria-label="Report sections">
+    ${navItem("#overview", "Overview", events.length)}
+    ${navItem("#activity", "Activity", events.length)}
+    ${navItem("#changes", "Changes", changes.fileCount)}
+    ${navItem("#certify", "Certify", model.certify?.gap ?? 0)}
+    ${navItem("#gateway", "Gateway", model.gate?.servers.length ?? 0, model.gate?.state === "running")}
+    ${navItem("#system", "System", undefined)}
+  </nav>
+  <footer class="sidebar-footer">
+    <button type="button" class="theme-toggle" id="theme-toggle" aria-label="Toggle theme">Theme</button>
+    <!-- Stop-report action is wired by the live-server POST handler. -->
+    <a href="#" id="stop-report">Stop report</a>
+  </footer>
+</aside>
 <main>
-  <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-changes" href="#changes">Changes</a>
-      <a class="tab" id="tab-certify" href="#certify">Certify</a>
-      <a class="tab" id="tab-activity" href="#activity">Activity</a>
-      <a class="tab" id="tab-system" href="#system">System</a>
-    </nav>
-  </div>
+  <header class="page-header">
+    <div class="title-row">
+      <h1>${esc(model.title)}</h1>
+      <div class="range">${esc(model.rangeLabel)}${livePill}</div>
+    </div>
+    ${identityLine(model.identity)}
+  </header>
   ${blockedBanner}
   <div class="hero">
     ${heroCertifyPanel(model.certify)}
@@ -1181,14 +1543,6 @@ export function renderReceiptHtml(model) {
   <section class="zone" id="overview" aria-labelledby="tab-overview">
     ${overviewBody}
   </section>
-  <section class="zone" id="changes" aria-labelledby="tab-changes">
-    <section class="feed chg" id="changes-list" aria-label="Changes by session and file">
-${changesPanel(changes, nowMs)}
-    </section>
-  </section>
-  <section class="zone" id="certify" aria-labelledby="tab-certify">
-    ${certifyBody}
-  </section>
   <section class="zone" id="activity" aria-labelledby="tab-activity">
     <div class="feed-head">
       <div class="stats" aria-label="Counts">
@@ -1207,11 +1561,22 @@ ${changesPanel(changes, nowMs)}
 ${renderFeed(events, nowMs, model.live)}
     </section>
   </section>
+  <section class="zone" id="changes" aria-labelledby="tab-changes">
+    <section class="feed chg" id="changes-list" aria-label="Changes by session and file">
+${changesPanel(changes, nowMs)}
+    </section>
+  </section>
+  <section class="zone" id="certify" aria-labelledby="tab-certify">
+    ${certifyBody}
+  </section>
+  ${gatePagePanel(model.gate, nowMs)}
   <section class="zone" id="system" aria-labelledby="tab-system">
     ${systemBody}
   </section>
 </main>
 ${filterScript}
+${themeScript}
+${gateScript}
 ${liveScript}
 </body>
 </html>`;
@@ -1346,7 +1711,7 @@ export function renderReceiptMarkdown(model) {
         const g = model.gate;
         lines.push("## Gateway");
         if (g.state === "not-set-up") {
-            lines.push("not set up — `kya gate init` to put a governed gateway in front of any MCP server, then `kya gate setup` + `kya gate run`");
+            lines.push(`not set up — ${GATE_NOT_SETUP_QUICKSTART}`);
         }
         else {
             const binary = g.binaryPresent