prae-cli 0.1.1 → 0.2.0

package/lib/views-BU0sOciR.js

@@ -0,0 +1,929 @@
+//#region src/console/logo.ts
+/**
+* The mark, inlined.
+*
+* A P drawn as a door: the product is the moment permission is granted,
+* and the glyph is the gate it comes through. Inlined as a data URI rather
+* than linked because these pages are read offline and mailed around as
+* evidence — a page that fetches an image renders wrong on the machine that
+* matters.
+*/
+const LOGO = "data:image/png;base64,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";
+
+//#endregion
+//#region ../tokens/src/palette.ts
+/**
+* The two grounds, as declaration blocks.
+*
+* The console renders twice from one design: `prae console --out` inlines its
+* stylesheet into standalone documents, and the web app links a real one. Both
+* need these values, so they are defined here once and the test in this
+* package asserts the stylesheet agrees — the same guard the rest of the
+* tokens already have, for the same reason.
+*
+* Names are unprefixed because these are consumed as a surface's own palette
+* rather than alongside another product's. `tokens.css` carries the prefixed
+* `--prae-*` set for anyone embedding PRAE inside their own page.
+*/
+/** §06 — Surface B, the ledger, on paper. Printable and high-contrast. */
+const PAPER = `  --signal: oklch(0.45 0.16 140);
+  --signal-bright: oklch(0.5 0.16 140);
+  --signal-edge: oklch(0.5 0.13 140);
+  --signal-text: oklch(0.42 0.14 140);
+  --signal-on: oklch(0.985 0.003 100);
+  --hold: oklch(0.55 0.15 55);
+  --veto: oklch(0.52 0.19 25);
+  --veto-text: oklch(0.5 0.19 25);
+  --veto-edge: oklch(0.62 0.17 25);
+
+  --ground: oklch(0.975 0.003 100);
+  --raised: oklch(0.99 0.002 100);
+  --sunk: oklch(0.955 0.004 100);
+  --active: oklch(0.955 0.006 130);
+  --line: oklch(0.88 0.004 100);
+  --line-soft: oklch(0.92 0.004 100);
+  --line-faint: oklch(0.93 0.004 100);
+  --line-card: oklch(0.86 0.005 100);
+  --line-strong: oklch(0.8 0.006 100);
+  --edge: oklch(0.32 0.01 255);
+  --ink: oklch(0.22 0.01 255);
+  --ink-row: oklch(0.24 0.01 255);
+  --secondary: oklch(0.4 0.01 255);
+  --muted: oklch(0.5 0.01 255);
+  --muted-soft: oklch(0.55 0.01 255);
+  --dim: oklch(0.45 0.01 255);
+  --seal: oklch(0.6 0.01 255);
+
+  --mark: none;`;
+/** §02 — the graphite ramp and the neon signal it is drawn for. */
+const FENCE = `  --signal: oklch(0.86 0.21 133);
+  --signal-bright: oklch(0.95 0.15 133);
+  --signal-edge: oklch(0.4 0.06 133);
+  --signal-text: oklch(0.86 0.21 133);
+  --signal-on: oklch(0.155 0.008 255);
+  --hold: oklch(0.83 0.16 78);
+  --veto: oklch(0.66 0.2 25);
+  --veto-text: oklch(0.75 0.16 25);
+  --veto-edge: oklch(0.45 0.12 25);
+
+  --ground: oklch(0.155 0.008 255);
+  --raised: oklch(0.185 0.009 255);
+  --sunk: oklch(0.135 0.008 255);
+  --active: oklch(0.215 0.022 133);
+  --line: oklch(0.28 0.01 255);
+  --line-soft: oklch(0.26 0.01 255);
+  --line-faint: oklch(0.235 0.01 255);
+  --line-card: oklch(0.3 0.01 255);
+  --line-strong: oklch(0.32 0.01 255);
+  --edge: oklch(0.72 0.01 255);
+  --ink: oklch(0.96 0.004 255);
+  --ink-row: oklch(0.9 0.006 255);
+  --secondary: oklch(0.72 0.01 255);
+  --muted: oklch(0.6 0.012 255);
+  /* Lands where paper's does, at AA on its own ground: 0.55 measures 4.03
+     against graphite, and this token labels pending and absent states that
+     still have to be read. */
+  --muted-soft: oklch(0.575 0.012 255);
+  --dim: oklch(0.62 0.012 255);
+  --seal: oklch(0.58 0.012 255);
+
+  /* The mark is a solid black glyph, so it disappears on the graphite ground.
+     Inverting it yields the white it would have been drawn as. */
+  --mark: invert(1);`;
+
+//#endregion
+//#region ../tokens/src/views.ts
+/**
+* The console's view styles, as one definition.
+*
+* Header, stat band, ledger grid, rule and mapping tables, the awaiting-human
+* panel, and the limits block — everything that makes a PRAE view look like a
+* PRAE view rather than a generic table.
+*
+* Both renderers need these. `prae console --out` inlines them into standalone
+* documents; the web app injects them into a global style tag. Exported as a
+* string rather than a stylesheet so there is exactly one copy: a `.css` file
+* plus a mirrored constant would be two, and two copies of a stylesheet drift
+* the same way two copies of a palette do.
+*
+* What is *not* here is layout — the rail, the scroll containment, the routing.
+* The app has a persistent frame and the exporter produces separate documents,
+* and that is the one thing the two are genuinely allowed to disagree about.
+*/
+const VIEWS_CSS = `/* ── header ───────────────────────────────────────────────────────────── */
+.head {
+  display: flex; align-items: flex-end; justify-content: space-between;
+  gap: 24px; padding: 26px 30px 22px; border-bottom: 1px solid var(--line);
+}
+.head h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; margin: 0; }
+.head .meta {
+  font-family: var(--proof); font-size: 11.5px; color: var(--muted); margin-top: 6px;
+}
+.actions { display: flex; align-items: center; gap: 10px; }
+.chain {
+  display: flex; align-items: center; gap: 8px; padding: 7px 12px;
+  border: 1px solid var(--signal-edge); border-radius: 999px;
+  font-family: var(--proof); font-size: 10.5px; letter-spacing: 0.12em;
+  color: var(--signal-text); white-space: nowrap;
+}
+.chain i { width: 6px; height: 6px; background: var(--signal-bright); border-radius: 999px; }
+.chain.broken { border-color: var(--veto-edge); color: var(--veto-text); }
+.chain.broken i { background: var(--veto); }
+.btn {
+  padding: 9px 16px; border: 1px solid var(--line-strong); font-size: 13.5px;
+  border-radius: 2px; background: none; color: inherit; font-family: inherit;
+  white-space: nowrap;
+}
+
+/* ── stat band ────────────────────────────────────────────────────────── */
+.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
+.stat { padding: 20px 24px; border-right: 1px solid var(--line-soft); }
+.stat:first-child { padding-left: 30px; }
+.stat:last-child { border-right: none; }
+.stat .v {
+  font-size: 28px; font-weight: 700; letter-spacing: -0.03em;
+  font-variant-numeric: tabular-nums;
+}
+.stat .v.veto { color: var(--veto); }
+.stat .v.hold { color: var(--hold); }
+.stat .k {
+  font-family: var(--proof); font-size: 10px; letter-spacing: 0.14em;
+  color: var(--muted); margin-top: 4px;
+}
+
+/* ── ledger table ─────────────────────────────────────────────────────── */
+.grid {
+  display: grid;
+  grid-template-columns: 96px 1fr 150px 130px 104px 120px;
+  gap: 16px;
+}
+.thead {
+  padding: 12px 30px; font-family: var(--proof); font-size: 10px;
+  letter-spacing: 0.14em; color: var(--muted); border-bottom: 1px solid var(--line);
+}
+.row {
+  padding: 14px 30px; font-family: var(--proof); font-size: 12px;
+  border-bottom: 1px solid var(--line-faint); align-items: center;
+}
+.row .seq { color: var(--muted-soft); font-variant-numeric: tabular-nums; }
+.row .call { color: var(--ink-row); overflow-wrap: anywhere; }
+.row .actor, .row .clause { color: var(--dim); }
+.row .seal { color: var(--seal); }
+.row .verdict { letter-spacing: 0.1em; }
+.v-allow { color: var(--signal-text); }
+.v-deny { color: var(--veto-text); }
+.v-ask { color: var(--hold); }
+.v-correct { color: var(--muted); }
+.empty { padding: 30px; font-family: var(--proof); font-size: 12px; color: var(--muted); }
+
+/* ── awaiting-human panel ─────────────────────────────────────────────── */
+.await { padding: 26px 30px 30px; background: var(--sunk); border-top: 1px solid var(--line); }
+.await .k {
+  font-family: var(--proof); font-size: 10px; letter-spacing: 0.16em;
+  color: var(--muted); margin-bottom: 16px;
+}
+.card {
+  display: flex; gap: 24px; align-items: flex-start; background: var(--raised);
+  border: 1px solid var(--line-card); padding: 22px 24px;
+}
+.card h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 8px; }
+.card .detail { font-family: var(--proof); font-size: 12px; color: var(--muted); line-height: 1.8; }
+.decide { display: flex; flex-direction: column; gap: 8px; width: 200px; flex: none; }
+.approve {
+  padding: 11px 18px; background: var(--signal); color: var(--signal-on);
+  font-weight: 600; font-size: 13.5px; text-align: center; border-radius: 2px;
+  border: none; font-family: inherit;
+}
+.deny {
+  padding: 11px 18px; border: 1px solid var(--veto-edge); color: var(--veto-text);
+  font-weight: 600; font-size: 13.5px; text-align: center; border-radius: 2px;
+  background: none; font-family: inherit;
+}
+/*
+ * A control that cannot act must not look like one that can. These render so
+ * the reader knows where the decision lives, and read as inert so they never
+ * reach for it — the harness settles approvals, and a button that looks live
+ * here would be an invitation to a second audit trail.
+ *
+ * The fill is dropped rather than faded. Fading a filled button works against
+ * paper and fails against graphite, where a dimmed green block still reads as
+ * a live primary action; an outline reads the same on either ground.
+ */
+.approve[disabled], .deny[disabled] {
+  background: none; border: 1px solid var(--line-strong);
+  color: var(--muted-soft); font-weight: 500; cursor: not-allowed;
+}
+.recorded {
+  font-family: var(--proof); font-size: 10px; color: var(--muted-soft);
+  text-align: center; letter-spacing: 0.08em;
+}
+
+/* ── limits ───────────────────────────────────────────────────────────── */
+.limits { padding: 22px 30px 28px; border-top: 1px solid var(--line); }
+.limits .k {
+  font-family: var(--proof); font-size: 10px; letter-spacing: 0.16em;
+  color: var(--muted); margin-bottom: 10px;
+}
+.limits ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.7; color: var(--secondary); }
+.limits code { font-family: var(--proof); font-size: 12px; }
+
+/* ── rule / mapping tables, shared by the packs and compliance views ──── */
+.rules { display: grid; grid-template-columns: 110px 1fr 96px; gap: 16px; }
+.map { display: grid; grid-template-columns: 210px 1fr 96px; gap: 16px; }
+.sect { padding: 22px 30px 8px; }
+.sect h2 {
+  font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 4px;
+}
+.sect p {
+  margin: 0 0 4px; font-size: 14px; line-height: 1.6; color: var(--secondary);
+  max-width: 76ch;
+}
+.caps { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 30px 22px; }
+.cap {
+  font-family: var(--proof); font-size: 12px; padding: 6px 10px;
+  border: 1px solid var(--signal-edge); color: var(--signal-text);
+  border-radius: 2px;
+}
+.cap.off {
+  border-color: var(--line-strong); color: var(--muted-soft);
+  text-decoration: line-through;
+}
+.effect { letter-spacing: 0.1em; font-size: 11px; }
+.e-deny { color: var(--veto-text); }
+.e-ask { color: var(--hold); }
+.e-warn { color: var(--muted); }
+.e-correct { color: var(--signal-text); }
+.covered { color: var(--signal-text); }
+.partial { color: var(--hold); }
+.absent { color: var(--muted-soft); }
+
+button { cursor: pointer; }
+a:focus-visible, button:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
+`;
+
+//#endregion
+//#region ../tokens/src/index.ts
+/** The Google Fonts stylesheet both surfaces link. */
+const FONT_HREF = "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap";
+/**
+* Verdict chip labels. Uppercase, mono, and never rendered without a clause
+* reference within 8px — §04 is explicit that a chip alone is not allowed.
+*/
+const VERDICT_LABEL = {
+	allow: "ALLOWED",
+	ask: "HELD",
+	deny: "DENIED",
+	correct: "CORRECTED"
+};
+
+//#endregion
+//#region src/console/shell.ts
+function esc(value) {
+	return String(value).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+/** The stylesheet both console views share. Tokens first, then the surface. */
+/** The stylesheet both console views share. Tokens first, then the surface. */
+const SHEET = `
+:root {
+${PAPER}
+  --claim: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
+  --proof: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
+  --ease: cubic-bezier(0.2, 0, 0, 1);
+  --surface-motion: 180ms;
+}
+
+/* An explicit choice, remembered. */
+:root[data-theme='dark'] {
+${FENCE}
+}
+
+/* No choice made: follow the machine, unless the reader has said light. */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) {
+${FENCE}
+  }
+}
+
+/*
+ * The ground moves at the surface budget, and only while it is moving.
+ *
+ * Arming this permanently would put a 180ms fade on every hover and every
+ * verdict that renders, so the class goes on for one toggle and comes off.
+ * §01's 0ms rule is about a decision animating in; nothing is deciding here,
+ * the page is repainting, and a verdict that snapped while the page behind it
+ * faded would read as a glitch.
+ */
+html.theming, html.theming * {
+  transition:
+    background-color var(--surface-motion) var(--ease),
+    border-color var(--surface-motion) var(--ease),
+    color var(--surface-motion) var(--ease),
+    fill var(--surface-motion) var(--ease) !important;
+}
+
+* { box-sizing: border-box; }
+
+/*
+ * An application, not a document: the shell fills the viewport and only the
+ * content column scrolls, so the rail and the header stay where a reader left
+ * them. Print undoes all of it further down — the same page still has to
+ * flatten into evidence.
+ */
+html, body { height: 100%; }
+body {
+  margin: 0;
+  background: var(--ground);
+  color: var(--ink);
+  font-family: var(--claim);
+  -webkit-font-smoothing: antialiased;
+  overflow: hidden;
+}
+
+.wrap { height: 100%; }
+.scroll { height: 100%; }
+
+.console {
+  background: var(--ground);
+  display: grid;
+  grid-template-columns: 232px 1fr;
+  height: 100%;
+  min-height: 0;
+}
+
+/* The one column that moves. */
+.console > main {
+  overflow-y: auto;
+  overflow-x: auto;
+  min-height: 0;
+  scroll-behavior: smooth;
+}
+
+/* ── rail ─────────────────────────────────────────────────────────────── */
+.rail {
+  border-right: 1px solid var(--line); padding: 22px 0;
+  overflow-y: auto; min-height: 0;
+  display: flex; flex-direction: column;
+}
+.rail .compliance { margin-top: auto; }
+
+/*
+ * Two positions, named, rather than a switch with a state you have to infer.
+ * Hidden until the head script has run: without scripting it would be a
+ * control that does nothing.
+ */
+.ground { display: none; margin: auto 20px 14px; }
+html.js .ground { display: grid; grid-template-columns: 1fr 1fr; }
+html.js .rail .compliance { margin-top: 0; }
+.ground button {
+  font-family: var(--proof); font-size: 10px; letter-spacing: 0.14em;
+  padding: 6px 0; background: none; color: var(--muted);
+  border: 1px solid var(--line); border-radius: 0;
+  transition: color 120ms var(--ease), border-color 120ms var(--ease);
+}
+.ground button:first-child { border-radius: 2px 0 0 2px; border-right: none; }
+.ground button:last-child { border-radius: 0 2px 2px 0; }
+.ground button:hover { color: var(--secondary); }
+:root:not([data-theme='dark']) .ground [data-ground='paper'],
+:root[data-theme='dark'] .ground [data-ground='fence'] {
+  color: var(--ink); border-color: var(--line-strong); background: var(--active);
+}
+.brand { display: flex; align-items: center; gap: 10px; padding: 0 20px 22px; }
+/* The canvas sizes the mark at 26px; the glyph is square and needs no frame. */
+.mark { width: 26px; height: 26px; display: block; filter: var(--mark); }
+.brand b {
+  font-weight: 700; font-size: 16px; letter-spacing: 0.04em;
+}
+.eyebrow {
+  font-family: var(--proof); font-size: 10px; letter-spacing: 0.16em;
+  color: var(--muted-soft); padding: 0 20px 10px;
+}
+.nav { display: grid; }
+.nav a, .nav span {
+  padding: 10px 20px; font-size: 14.5px; color: var(--secondary);
+  text-decoration: none; display: flex; justify-content: space-between;
+  align-items: center;
+}
+.nav a { transition: background var(--t-state, 120ms) var(--ease, cubic-bezier(.2,0,0,1)),
+                     color var(--t-state, 120ms) var(--ease, cubic-bezier(.2,0,0,1)); }
+.nav a:hover { background: var(--sunk); }
+
+/*
+ * The surface transition, spent where the language says to spend it. Verdicts
+ * are deliberately excluded: a decision appears, it never animates in.
+ */
+main > * { animation: surface 180ms cubic-bezier(0.2, 0, 0, 1) both; }
+@keyframes surface {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: none; }
+}
+main.leaving { opacity: 0; transition: opacity 120ms cubic-bezier(0.2, 0, 0, 1); }
+@media (prefers-reduced-motion: reduce) {
+  main > *, main.leaving { animation: none; transition: none; }
+  .console > main { scroll-behavior: auto; }
+  :root { --surface-motion: 0ms; }
+}
+.nav .pending { color: var(--muted-soft); }
+.nav .badge.soon {
+  font-size: 9px; letter-spacing: 0.14em; color: var(--muted-soft);
+  border: 1px solid var(--line); border-radius: 999px; padding: 1px 6px;
+}
+.nav a.on {
+  font-weight: 600; color: var(--ink);
+  border-left: 2px solid var(--signal-bright);
+  background: var(--active); margin-left: -1px;
+}
+.nav .badge { font-family: var(--proof); font-size: 11px; color: var(--hold); }
+.compliance {
+  margin: 22px 20px 0; padding-top: 18px; border-top: 1px solid var(--line-soft);
+  font-family: var(--proof); font-size: 10.5px; line-height: 1.9; color: var(--muted);
+}
+
+${VIEWS_CSS}
+
+/* Print is a first-class state, not an afterthought. */
+@media print {
+  @page { margin: 12mm; }
+  /* Evidence prints on paper. The fence has no printed form. */
+  :root, :root[data-theme='dark'] {
+${PAPER}
+  }
+  html.theming, html.theming * { transition: none !important; }
+  html, body { height: auto; overflow: visible; }
+  body { padding: 0; background: #fff; }
+  .wrap, .scroll { height: auto; }
+  .console > main { overflow: visible; height: auto; }
+  main > * { animation: none; }
+  .console {
+    border: none; grid-template-columns: 1fr; min-width: 0;
+    height: auto; display: block;
+  }
+  .rail, .actions, .decide, .ground { display: none; }
+  .thead { display: grid; }
+  thead { display: table-header-group; }
+  .row { break-inside: avoid; }
+  /* A chip is colour; a printed page may not be. Keep the word. */
+  .chain { border-color: currentColor !important; }
+  .stats { break-inside: avoid; }
+}
+`;
+/**
+* Resolve the ground before the first paint.
+*
+* This runs in `<head>`, synchronously, on purpose: read the choice after the
+* body has painted and the reader watches the page flash the wrong palette on
+* every navigation. It also marks the document as scripted, which is what
+* reveals the toggle — a control that cannot work should not be offered.
+*/
+const GROUND_SCRIPT = `
+(() => {
+  const root = document.documentElement;
+  root.classList.add('js');
+  let choice = null;
+  try { choice = localStorage.getItem('prae-ground'); } catch (e) {}
+  if (choice !== 'dark' && choice !== 'light') {
+    choice = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+  root.dataset.theme = choice;
+})();
+`;
+/**
+* Client-side navigation, as progressive enhancement.
+*
+* Every view is still a complete document that opens, prints and mails on its
+* own — that requirement has not moved. This only intercepts a click when the
+* page is being served, swaps the main column, and leaves the rail alone, so
+* the frame stays put and the surface transition the language budgets actually
+* has somewhere to happen. With scripting off, the links are ordinary links.
+*/
+const NAV_SCRIPT = `
+(() => {
+  const main = () => document.querySelector('main');
+  const rail = () => document.querySelector('.rail');
+  if (!main() || !window.fetch) return;
+
+  const swap = async (href, push) => {
+    const target = main();
+    target.classList.add('leaving');
+    try {
+      const res = await fetch(href, { headers: { accept: 'text/html' } });
+      if (!res.ok) throw new Error(String(res.status));
+      const doc = new DOMParser().parseFromString(await res.text(), 'text/html');
+      const next = doc.querySelector('main');
+      const nextRail = doc.querySelector('.rail');
+      if (!next) throw new Error('no main');
+
+      // Collect the view's scripts BEFORE moving it: replaceWith detaches the
+      // element from the parsed document, so querying that document afterwards
+      // finds nothing and the view arrives inert. A parser-created script never
+      // executes on insertion either, which is why each is re-created below.
+      const scripts = [...next.querySelectorAll('script')].map((s) => s.textContent);
+      for (const s of next.querySelectorAll('script')) s.remove();
+
+      target.replaceWith(next);
+      // Only the rail's active marker changes; the element itself stays, so
+      // nothing in it flickers or loses scroll position.
+      if (nextRail) rail().innerHTML = nextRail.innerHTML;
+      if (doc.title) document.title = doc.title;
+      if (push) history.pushState({}, '', href);
+      next.scrollTop = 0;
+      wire();
+      for (const code of scripts) {
+        const el = document.createElement('script');
+        el.textContent = code;
+        document.body.appendChild(el);
+      }
+    } catch {
+      // A failed swap falls back to a real navigation rather than stranding
+      // the reader on a half-updated page.
+      location.href = href;
+    }
+  };
+
+  const wire = () => {
+    for (const a of document.querySelectorAll('.nav a[href$=".html"]')) {
+      a.addEventListener('click', (e) => {
+        if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) return;
+        e.preventDefault();
+        swap(a.getAttribute('href'), true);
+      });
+    }
+  };
+
+  // Delegated, because a client-side swap replaces the rail's markup and a
+  // handler bound to the old buttons would go with it.
+  let settle;
+  document.addEventListener('click', (e) => {
+    const button = e.target.closest('[data-ground]');
+    if (!button) return;
+    const next = button.dataset.ground === 'fence' ? 'dark' : 'light';
+    const root = document.documentElement;
+    if (root.dataset.theme === next) return;
+
+    // Arm the transition, let the current palette paint once, then move. Doing
+    // both in one frame gives the browser no 'from' state and it jumps.
+    root.classList.add('theming');
+    void root.offsetHeight;
+    root.dataset.theme = next;
+    try { localStorage.setItem('prae-ground', next); } catch (err) {}
+    clearTimeout(settle);
+    settle = setTimeout(() => root.classList.remove('theming'), 240);
+  });
+
+  addEventListener('popstate', () => swap(location.pathname, false));
+  wire();
+})();
+`;
+/** Wrap a view in the console shell: rail, then the view's own header and body. */
+function renderShell(page) {
+	return `<!doctype html>
+<html lang="en" data-prae="ledger"><head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${esc(page.title)}</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="${FONT_HREF}" rel="stylesheet">
+<script>${GROUND_SCRIPT}<\/script>
+<style>${SHEET}</style>
+</head><body>
+<div class="wrap"><div class="scroll">
+<div class="console">
+  <nav class="rail">
+    <div class="brand"><img class="mark" src="${LOGO}" alt=""><b>PRAE</b></div>
+    <div class="eyebrow">CONTROL PLANE</div>
+    ${page.nav}
+    <div class="ground" role="group" aria-label="Ground">
+      <button type="button" data-ground="paper">PAPER</button>
+      <button type="button" data-ground="fence">FENCE</button>
+    </div>
+    <div class="compliance">EU AI ACT art. 12<br>NIST AI 600-1<br>SOC 2 CC7.2</div>
+  </nav>
+  <main>
+${page.head}
+${page.body}
+  </main>
+</div>
+</div></div>
+<script>${NAV_SCRIPT}<\/script>
+</body></html>
+`;
+}
+function renderNav(items, active) {
+	return `<div class="nav">\n${items.map((item) => {
+		const classes = [item.label === active ? "on" : "", item.pending === true ? "pending" : ""].filter(Boolean).join(" ");
+		const attr = classes === "" ? "" : ` class="${classes}"`;
+		const badge = item.pending === true ? "<span class=\"badge soon\">SOON</span>" : item.badge === void 0 || item.badge === 0 ? "" : `<span class="badge">${item.badge}</span>`;
+		const href = item.pending === true ? "" : ` href="${esc(item.href ?? "#")}"`;
+		const tag = item.pending === true ? "span" : "a";
+		return `    <${tag}${href}${attr}>${esc(item.label)}${badge}</${tag}>`;
+	}).join("\n")}\n    </div>`;
+}
+
+//#endregion
+//#region ../controls/src/index.ts
+/**
+* What each control asks for, and what this profile actually produces.
+*
+* Framed as evidence toward a control, never as compliance with it. Nothing
+* here certifies anything: an auditor decides whether the evidence satisfies
+* the obligation, and a tool that told them the answer would be selling the
+* one thing it cannot supply.
+*/
+const CONTROLS = [
+	{
+		id: "EU AI Act art. 12",
+		asks: "Automatic recording of events over the lifetime of the system, to a degree that enables tracing.",
+		evidence: (data) => ({
+			state: data.entries.length > 0 ? "covered" : "partial",
+			note: data.entries.length > 0 ? `${data.entries.length} decisions recorded, each with the clause that produced it and a hash linking it to the one before.` : "Recording is configured but nothing has been logged yet."
+		})
+	},
+	{
+		id: "NIST AI 600-1 · GV-1.2",
+		asks: "Characteristics of trustworthy AI are integrated into organisational policies.",
+		evidence: (data) => ({
+			state: data.pack === void 0 ? "absent" : "covered",
+			note: data.pack === void 0 ? "No pack supplied to this view." : `${data.pack.rules.length} rules are declared as data and applied to every tool call, rather than living in a runbook.`
+		})
+	},
+	{
+		id: "NIST AI 600-1 · MS-2.6",
+		asks: "AI system is evaluated regularly for safety risks, with results documented.",
+		evidence: () => ({
+			state: "partial",
+			note: "Decisions are documented per call. Periodic evaluation of the policy itself is an operator process this tool does not perform."
+		})
+	},
+	{
+		id: "SOC 2 · CC7.2",
+		asks: "The entity monitors system components for anomalies indicative of malicious acts.",
+		evidence: (data) => ({
+			state: data.entries.some((e) => e.verdict === "deny") ? "covered" : "partial",
+			note: `Refusals and held calls are recorded with their clause. ${data.entries.some((e) => e.verdict === "deny") ? "This record contains refusals." : "This record contains none yet, so the monitoring is unproven in practice."}`
+		})
+	},
+	{
+		id: "SOC 2 · CC6.1",
+		asks: "Logical access to protected information assets is restricted to authorised users.",
+		evidence: () => ({
+			state: "partial",
+			note: "Capabilities are restricted per agent. Authorisation of the human is not: approvals record what was decided, never who decided it."
+		})
+	}
+];
+
+//#endregion
+//#region src/console/views.ts
+/** One rail for every view, so the shape of the product stays consistent. */
+function navFor(data) {
+	return [
+		{
+			label: "Overview",
+			href: "overview.html"
+		},
+		{
+			label: "Policy packs",
+			href: "packs.html"
+		},
+		{
+			label: "Instructions",
+			href: "instructions.html"
+		},
+		{
+			label: "Playground",
+			href: "playground.html"
+		},
+		{
+			label: "Approvals",
+			href: "approvals.html",
+			badge: data.entries.filter((e) => e.verdict === "ask").length
+		},
+		{
+			label: "Audit ledger",
+			href: "ledger.html"
+		},
+		{
+			label: "Fleet",
+			pending: true
+		},
+		{
+			label: "Compliance map",
+			href: "compliance.html"
+		}
+	];
+}
+function chainPill(ok) {
+	return `<div class="chain${ok ? "" : " broken"}"><i></i>${ok ? "CHAIN INTACT" : "CHAIN BROKEN"}</div>`;
+}
+function header(title, meta, ok) {
+	return `    <header class="head">
+      <div><h1>${esc(title)}</h1><div class="meta">${esc(meta)}</div></div>
+      <div class="actions">${chainPill(ok)}
+        <button type="button" class="btn" onclick="window.print()">Export evidence</button>
+      </div>
+    </header>`;
+}
+function renderOverview(data) {
+	const counts = {};
+	for (const entry of data.entries) counts[entry.verdict] = (counts[entry.verdict] ?? 0) + 1;
+	const held = counts.ask ?? 0;
+	const pack = data.pack;
+	const enforcing = pack?.rules.some((r) => r.effect.kind === "deny") ?? false;
+	const body = `${`    <section class="stats">
+      <div class="stat"><div class="v">${data.entries.length}</div><div class="k">DECISIONS</div></div>
+      <div class="stat"><div class="v veto">${counts.deny ?? 0}</div><div class="k">VETOED</div></div>
+      <div class="stat"><div class="v hold">${held}</div><div class="k">AWAITING HUMAN</div></div>
+      <div class="stat"><div class="v">${pack === void 0 ? "—" : esc(pack.rules.length)}</div><div class="k">RULES IN FORCE</div></div>
+    </section>`}
+    <section class="sect">
+      <h2>Posture</h2>
+      <p>${pack === void 0 ? "No pack was supplied to this view, so nothing here describes a policy in force." : enforcing ? `<strong>${esc(pack.pack)} ${esc(pack.version)}</strong> is enforcing: some calls are refused outright.` : `<strong>${esc(pack.pack)} ${esc(pack.version)}</strong> is observing: it records what an enforcing pack would refuse, and denies nothing.`}</p>
+      <p>${data.verification.ok ? "The decision chain verifies: no row has been removed, edited, or reordered since it was written." : "The decision chain does <strong>not</strong> verify. This record is not continuous, and the Audit ledger names where it breaks."}</p>
+    </section>
+    <section class="sect" style="padding-bottom:26px">
+      <h2>What is not covered</h2>
+      <p>This gate decides tool calls. It does not sandbox plugin code — a
+      plugin's <code>apply()</code> runs with full privileges before any tool
+      call exists — and it does not secure the harness itself. Approvals record
+      what was decided, never who decided it.</p>
+    </section>`;
+	return renderShell({
+		title: `Overview — ${pack?.pack ?? "PRAE"}`,
+		nav: renderNav(navFor(data), "Overview"),
+		head: header("Overview", `${data.entries.length} decisions · ${pack === void 0 ? "no pack" : `${pack.pack} ${pack.version}`}`, data.verification.ok),
+		body
+	});
+}
+function matcherOf(rule) {
+	const when = rule.when;
+	const parts = [];
+	const list = (v) => v === void 0 ? void 0 : Array.isArray(v) ? v.join(", ") : String(v);
+	const cap = list(when.capability);
+	if (cap !== void 0) parts.push(`capability ${cap}`);
+	const tool = list(when.tool);
+	if (tool !== void 0) parts.push(`tool ${tool}`);
+	const plugin = list(when.plugin);
+	if (plugin !== void 0) parts.push(`plugin ${plugin}`);
+	if (when.path?.outside !== void 0) parts.push(`path outside ${when.path.outside.join(", ")}`);
+	if (when.path?.inside !== void 0) parts.push(`path inside ${when.path.inside.join(", ")}`);
+	if (when.host?.notIn !== void 0) parts.push(`host not in ${when.host.notIn.join(", ")}`);
+	if (when.host?.in !== void 0) parts.push(`host in ${when.host.in.join(", ")}`);
+	if (when.count !== void 0) parts.push(`more than ${when.count.above}`);
+	for (const arg of when.arg ?? []) {
+		const bits = [
+			arg.above === void 0 ? "" : `above ${arg.above}`,
+			arg.below === void 0 ? "" : `below ${arg.below}`,
+			arg.equals === void 0 ? "" : `= ${String(arg.equals)}`
+		].filter(Boolean);
+		parts.push(`${arg.name} ${bits.join(" ")}`.trim());
+	}
+	return parts.length === 0 ? "every call" : parts.join(" · ");
+}
+function renderPacks(data) {
+	const pack = data.pack;
+	if (pack === void 0) return renderShell({
+		title: "Policy packs",
+		nav: renderNav(navFor(data), "Policy packs"),
+		head: header("Policy packs", "no pack supplied", data.verification.ok),
+		body: "    <div class=\"empty\">Pass --pack to render the policy in force.</div>"
+	});
+	const baseline = pack.baseline?.capabilities;
+	const caps = baseline === void 0 ? `<p style="padding:0 30px 22px;font-size:14px;color:var(--secondary);max-width:76ch">This pack sets no capability ceiling. It governs through its rules alone, and withholds nothing an author declares.</p>` : `<div class="caps">${baseline.map((c) => `<span class="cap">${esc(c)}</span>`).join("")}</div>`;
+	const rows = pack.rules.map((rule) => `      <div class="grid rules row">
+        <div class="seq">${esc(rule.id)}</div>
+        <div class="call">${esc(rule.title ?? rule.effect.because)}<br><span style="color:var(--muted)">${esc(matcherOf(rule))}</span></div>
+        <div class="effect e-${esc(rule.effect.kind)}">${esc(rule.effect.kind.toUpperCase())}</div>
+      </div>`).join("\n");
+	const body = `    <section class="sect">
+      <h2>${esc(pack.pack)} <span style="font-family:var(--proof);font-size:14px;color:var(--muted)">${esc(pack.version)}</span></h2>
+      <p>The operator baseline is intersected with whatever a plugin's own
+      manifest declares, and the operator can only ever narrow. A pack cannot
+      grant a capability an author never asked for.</p>
+    </section>
+    ${caps}
+    <div class="grid rules thead">
+      <div>CLAUSE</div><div>RULE</div><div>EFFECT</div>
+    </div>
+${rows}
+    <section class="sect" style="padding-bottom:26px">
+      <h2>Ordering</h2>
+      <p>When several rules match one call the strongest effect wins —
+      deny over ask over correct over warn — and every match stays in the
+      trace. That is what makes a pack safe to extend: appending a rule can
+      raise a decision's strength and never lower it.</p>
+    </section>`;
+	return renderShell({
+		title: `Policy packs — ${pack.pack}`,
+		nav: renderNav(navFor(data), "Policy packs"),
+		head: header("Policy packs", `${pack.pack} ${pack.version} · ${pack.rules.length} rules`, data.verification.ok),
+		body
+	});
+}
+function renderCompliance(data) {
+	const body = `    <section class="sect">
+      <h2>Evidence, not compliance</h2>
+      <p>Each row states what a control asks for and what this profile actually
+      produces. Nothing here certifies anything — whether the evidence satisfies
+      the obligation is an auditor's judgement, and a tool that answered it for
+      them would be selling the one thing it cannot supply.</p>
+    </section>
+    <div class="grid map thead">
+      <div>CONTROL</div><div>ASKS FOR · WHAT THIS PROFILE PRODUCES</div><div>STATE</div>
+    </div>
+${CONTROLS.map((control) => {
+		const found = control.evidence(data);
+		const label = found.state === "covered" ? "EVIDENCE" : found.state === "partial" ? "PARTIAL" : "NONE";
+		return `      <div class="grid map row">
+        <div class="call">${esc(control.id)}</div>
+        <div class="actor">${esc(control.asks)}<br><span style="color:var(--ink-row)">${esc(found.note)}</span></div>
+        <div class="effect ${esc(found.state)}">${label}</div>
+      </div>`;
+	}).join("\n")}
+    <section class="sect" style="padding-bottom:26px">
+      <h2>The gap that recurs</h2>
+      <p>Three of these rows stop at <em>partial</em> for the same reason: the
+      harness records what was decided and never who decided it. Attributable
+      approval needs an identity anchor outside this machine, which is a
+      control-plane concern this build does not claim.</p>
+    </section>`;
+	return renderShell({
+		title: "Compliance map",
+		nav: renderNav(navFor(data), "Compliance map"),
+		head: header("Compliance map", `${CONTROLS.length} controls · evidence from this profile`, data.verification.ok),
+		body
+	});
+}
+/**
+* Every call the policy held, and what became of it.
+*
+* This is a queue you read, not one you act on. The gate returns `ask` into the
+* harness's own approval seam and the harness settles it there; a second set of
+* buttons here would mean two places to approve from and two audit trails to
+* reconcile. So the view shows what is waiting and what was decided, and says
+* plainly where the decision happens.
+*/
+function renderApprovals(data) {
+	const held = data.entries.filter((e) => e.verdict === "ask");
+	const settled = data.entries.filter((e) => e.rule === "approval");
+	const now = Date.parse(data.generatedAt);
+	const waited = (iso) => {
+		const s = Math.max(0, Math.round((now - Date.parse(iso)) / 1e3));
+		if (!Number.isFinite(s)) return "";
+		const h = Math.floor(s / 3600);
+		const m = Math.floor(s % 3600 / 60);
+		return h > 0 ? `${h}h ${m}m` : `${m}m`;
+	};
+	const queue = held.length === 0 ? "    <div class=\"empty\">Nothing is waiting on a human.</div>" : held.map((e) => `    <section class="await" style="border-top:none">
+      <div class="card">
+        <div style="flex:1">
+          <h2>${esc(e.tool)}${e.subject === void 0 ? "" : ` on ${esc(e.subject)}`}</h2>
+          <div class="detail">
+            ${esc(e.rule ?? "held")} · ${esc(e.session ?? "local session")} · waiting ${esc(waited(e.at))}<br>
+            ${esc(e.reason ?? "")}
+          </div>
+        </div>
+        <div class="decide">
+          <button type="button" class="approve" disabled title="The harness settles approvals; a second prompt would mean two audit trails">Approve</button>
+          <button type="button" class="deny" disabled title="The harness settles approvals; a second prompt would mean two audit trails">Deny</button>
+          <div class="recorded">SETTLED IN THE HARNESS</div>
+        </div>
+      </div>
+    </section>`).join("\n");
+	const history = settled.length === 0 ? "" : `    <div class="grid map thead">
+      <div>WHEN</div><div>CALL · WHY</div><div>OUTCOME</div>
+    </div>
+${settled.map((e) => `      <div class="grid map row">
+        <div class="seq">${esc(e.at.replace("T", " ").replace(/\.\d+Z$/, "Z"))}</div>
+        <div class="call">${esc(e.tool)}${e.subject === void 0 ? "" : ` ${esc(e.subject)}`}<br><span style="color:var(--muted)">${esc(e.reason ?? "")}${e.actor === void 0 ? "" : ` · ${esc(e.actor)}`}</span></div>
+        <div class="effect ${e.verdict === "allow" ? "covered" : "absent"}">${e.verdict === "allow" ? "APPROVED" : "REFUSED"}</div>
+      </div>`).join("\n")}`;
+	const body = `    <section class="stats">
+      <div class="stat"><div class="v hold">${held.length}</div><div class="k">AWAITING HUMAN</div></div>
+      <div class="stat"><div class="v">${settled.length}</div><div class="k">SETTLED</div></div>
+      <div class="stat"><div class="v">${settled.filter((e) => e.actor !== void 0).length}</div><div class="k">WITH AN ACTOR</div></div>
+      <div class="stat"><div class="v">${data.entries.length}</div><div class="k">DECISIONS</div></div>
+    </section>
+    <section class="sect">
+      <h2>Waiting</h2>
+      <p>A held call is one a clause would not decide alone. The harness owns
+      the prompt and settles it; this is the queue, not a second place to
+      approve from.</p>
+    </section>
+${queue}
+    <section class="sect">
+      <h2>Settled</h2>
+      <p>Where an entry names an actor, that name is asserted by configuration.
+      The harness records what was decided and never who decided it, so an
+      attributable approval needs an identity anchor this build does not have.</p>
+    </section>
+${history}`;
+	return renderShell({
+		title: "Approvals",
+		nav: renderNav(navFor(data), "Approvals"),
+		head: header("Approvals", `${held.length} waiting · ${settled.length} settled`, data.verification.ok),
+		body
+	});
+}
+
+//#endregion
+export { renderPacks as a, renderShell as c, renderOverview as i, VERDICT_LABEL as l, renderApprovals as n, esc as o, renderCompliance as r, renderNav as s, navFor as t };