prismatica 0.2.0

package/dist/board/html.js

@@ -0,0 +1,1382 @@
+/**
+ * Server-rendered HTML for the board. Zero frameworks, zero external assets —
+ * everything inline, so the page works offline and adds no dependencies.
+ *
+ * Design language: a modern developer-tool dashboard (in the Linear / Vercel
+ * tradition): an app shell with sidebar navigation, a disciplined neutral
+ * palette driven by CSS variables (light and dark, with a manual override), a
+ * typographic scale, status expressed as dots and chips with AA-contrast text,
+ * and one brand signature — the prism line, white light split into the six
+ * lifecycle-state colours. Amber is reserved for "needs you": the only warm hue.
+ *
+ * Robustness rules baked in: every flex row wraps, every long token truncates or
+ * breaks, record-sourced text is HTML-escaped everywhere, and no record text is
+ * ever interpolated into inline JavaScript (the confirm dialogs read data-*).
+ */
+import { diffList, diffPresentation, diffSteps, diffVariations, } from '../atlas/diff.js';
+import { FLOW_FIELD, FLOW_PRESENTATION_FIELD, FLOW_STATUS_LABEL, FLOW_STEP_FIELD, LAST_VERIFIED_FIELD, MECHANICS_FIELD, PRESENTATION_DIFF_HEADING, UNDERSTAND_CTA, UNDERSTAND_IMPORT_COMMAND, } from '../atlas/labels.js';
+import { groupByJourney, partitionGuardrails, sortFlowViews, } from '../atlas/presentation.js';
+import { STATES, } from '../records/types.js';
+export function escapeHtml(text) {
+    return text
+        .replaceAll('&', '&')
+        .replaceAll('<', '&lt;')
+        .replaceAll('>', '&gt;')
+        .replaceAll('"', '&quot;')
+        .replaceAll("'", '&#39;');
+}
+// ── CSRF token (Requirement 4) ───────────────────────────────────────────────
+// One random token per server process (server.ts mints it at startup and calls
+// setCsrfToken once). Module state, deliberately: every form-building helper
+// below would otherwise need the token threaded through its signature and every
+// call site, for a single-process, single-user local server where that buys
+// nothing. The actual enforcement chokepoint lives in server.ts, not here —
+// this only emits the token into every mutation form so the browser can send
+// it back.
+let csrfToken = '';
+export function setCsrfToken(token) {
+    csrfToken = token;
+}
+function csrfField() {
+    return `<input type="hidden" name="csrfToken" value="${escapeHtml(csrfToken)}">`;
+}
+/** Status colours: dot/fill tone + an AA-contrast text tone for chips. */
+const STATE_TONE = {
+    planned: { dot: '#8B8D98' },
+    building: { dot: '#3E63DD' },
+    checking: { dot: '#12A594' },
+    needs_you: { dot: '#D97706' },
+    shipping: { dot: '#8E4EC6' },
+    live: { dot: '#30A46C' },
+};
+/** Plain word first; the real term lives in the hover. */
+const STATE_WORD = {
+    planned: 'Planned',
+    building: 'Being built',
+    checking: 'Being proven',
+    needs_you: 'Waiting on you',
+    shipping: 'Shipping',
+    live: 'Live',
+};
+const STATE_HINT = {
+    planned: 'state: planned — a contract exists; no agent is building yet',
+    building: 'state: building — an agent is working in the change’s lane',
+    checking: 'state: checking — checks and review are proving the work',
+    needs_you: 'state: needs_you — a decision only the owner can make',
+    shipping: 'state: shipping — the PR is at the merge gate',
+    live: 'state: live — shipped, verified, passport written',
+};
+const TIER_HINT = {
+    light: 'risk tier: light — copy, colours, spacing',
+    normal: 'risk tier: normal — a feature or bug fix',
+    heavy: 'risk tier: heavy — auth, payments, saved data or schema',
+};
+/** Flow status colours — same dot language as lifecycle state. */
+const FLOW_STATUS_TONE = {
+    works: '#30A46C',
+    planned: '#3E63DD',
+    uncertain: '#D97706',
+    idea: '#8B8D98',
+};
+const EVIDENCE_TONE = {
+    manual: '#30A46C',
+    test: '#12A594',
+    inferred: '#8B8D98',
+    stale: '#E5484D',
+    unknown: '#D97706',
+};
+function recordLink(home, kind, id, label, hint) {
+    const href = `/record?home=${encodeURIComponent(home)}&kind=${encodeURIComponent(kind)}&id=${encodeURIComponent(id)}`;
+    return `<a class="rl" href="${href}" title="${escapeHtml(hint)}">${escapeHtml(label)}</a>`;
+}
+function diffLink(home, id) {
+    return `<a class="rl" href="/diff?home=${encodeURIComponent(home)}&id=${encodeURIComponent(id)}" title="the exact code diff, straight from git">diff</a>`;
+}
+function cardLinks(card) {
+    const links = [
+        recordLink(card.home, 'contracts', card.id, 'contract', 'the agreed goal, scope and checks'),
+        diffLink(card.home, card.id),
+        recordLink(card.home, 'evidence', card.id, 'checks', 'what the last check run found'),
+    ];
+    if (card.reviewState) {
+        links.push(recordLink(card.home, 'reviews', card.id, 'review', 'the fresh-eyes review, sealed to one exact diff'));
+    }
+    return links.join('');
+}
+function tierChip(tier) {
+    return `<span class="chip tier-${tier}" title="${escapeHtml(TIER_HINT[tier] ?? tier)}">${escapeHtml(tier)}</span>`;
+}
+function appChip(app) {
+    return `<span class="chip app-chip">${escapeHtml(app)}</span>`;
+}
+function decisionForm(home, id, title, decision, label, cls) {
+    return `<form method="post" action="/accept" class="act" data-confirm="${decision === 'approved' ? 'approve' : 'reject'}" data-title="${escapeHtml(title)}">
+    ${csrfField()}
+    <input type="hidden" name="home" value="${escapeHtml(home)}">
+    <input type="hidden" name="id" value="${escapeHtml(id)}">
+    <input type="hidden" name="decision" value="${decision}">
+    <button type="submit" class="${cls}">${label}</button>
+  </form>`;
+}
+function renderNeedsYou(items) {
+    if (items.length === 0) {
+        return `<div class="empty">
+      <p class="empty-title">Nothing is waiting on you.</p>
+      <p class="empty-sub">When a change needs your decision, it appears here first.</p>
+    </div>`;
+    }
+    return filterEmpty('needs') + items
+        .map((item) => {
+        const { card } = item;
+        const actions = item.acceptable
+            ? `<div class="need-action">
+            ${decisionForm(card.home, card.id, card.title, 'approved', 'Approve and sign', 'btn-primary')}
+            ${decisionForm(card.home, card.id, card.title, 'rejected', 'Request changes', 'btn-ghost')}
+          </div>`
+            : '';
+        return `<article class="need" data-app="${escapeHtml(card.app)}">
+        <div class="need-body">
+          <div class="meta-row">${appChip(card.app)}${tierChip(card.tier)}</div>
+          <p class="ask">${escapeHtml(item.ask)}</p>
+          <nav class="links"><span class="links-label">Look first</span>${cardLinks(card)}</nav>
+        </div>
+        ${actions}
+      </article>`;
+    })
+        .join('\n');
+}
+function renderCard(card) {
+    const flags = [];
+    if (card.changesRequested) {
+        flags.push('<span class="flag" title="the reviewer or the owner requested changes — back to the builder">changes requested</span>');
+    }
+    if (card.stalePack) {
+        flags.push('<span class="flag" title="the contract was amended after the brief was packed — re-pack">stale brief</span>');
+    }
+    if (card.amendments >= 3) {
+        flags.push(`<span class="flag" title="amended ${card.amendments} times — consider splitting">amended ×${card.amendments}</span>`);
+    }
+    if (card.lastCheckPass === false) {
+        flags.push('<span class="flag" title="the last check run failed">checks failing</span>');
+    }
+    return `<article class="card" data-app="${escapeHtml(card.app)}" data-tier="${escapeHtml(card.tier)}" data-intent="${escapeHtml(card.intent ?? '')}">
+    <h4 class="card-title">${escapeHtml(card.title)}</h4>
+    <div class="meta-row">${appChip(card.app)}${tierChip(card.tier)}</div>
+    <p class="sentence">${escapeHtml(card.sentence)}</p>
+    ${flags.length > 0 ? `<div class="flags">${flags.join('')}</div>` : ''}
+    <nav class="links">${cardLinks(card)}</nav>
+    <p class="id" title="contract id: ${escapeHtml(card.id)}">${escapeHtml(card.id)}</p>
+  </article>`;
+}
+/**
+ * The ONE app selector, at the top of <main> and nowhere else.
+ *
+ * It lives here rather than in the sidebar for a mechanical reason: the
+ * auto-refresh replaces <main> only. A selector in the sidebar would survive
+ * that swap and then never learn about a newly registered app, quietly
+ * offering a stale list for as long as the tab stayed open — while everything
+ * it filters underneath it had been rebuilt.
+ *
+ * Its options come from `model.apps` (every registered repo), NOT from the
+ * change cards: an app with no open work is exactly the one an owner is most
+ * likely to be looking for, and building the list from cards would hide it.
+ */
+function renderAppScope(model) {
+    const apps = [...new Set(model.apps.map((app) => app.app))].sort();
+    if (apps.length < 2) {
+        // One app is not a choice, and an empty <select> is worse than none.
+        return '';
+    }
+    return `<div class="filters app-scope" role="group" aria-label="Filter the board by app">
+    <label for="f-app">Showing</label>
+    <select id="f-app" aria-label="Which app to show"><option value="">All apps</option>${apps
+        .map((app) => `<option value="${escapeHtml(app)}">${escapeHtml(app)}</option>`)
+        .join('')}</select>
+    <span class="scope-note">every section below follows this</span>
+  </div>`;
+}
+// ── The board script's three real decisions ──────────────────────────────────
+//
+// Written here as ordinary functions and embedded into the page script by
+// `.toString()`, so there is exactly one implementation and it is unit-
+// testable. Everything around them in the browser is querySelectorAll
+// plumbing; these are the parts that can actually be wrong. They must stay
+// self-contained (no imports, no closure) — the browser gets only their source.
+/**
+ * Which remembered filter value a freshly-swapped <main> can still honour.
+ * Restoring a value the replacement no longer offers leaves the select showing
+ * an app that is gone, every section filtered to nothing, and no obvious way
+ * back — so an absent option resets to "All".
+ */
+export function keepIfStillOffered(optionValues, remembered) {
+    return optionValues.indexOf(remembered) >= 0 ? remembered : '';
+}
+/**
+ * What a nav badge reads. Unfiltered, the server's own total stands: it can
+ * legitimately count things the DOM does not show (Needs you includes pending
+ * Flow/Rule proposals that live in another section entirely). Filtered, only
+ * what is actually visible is honest.
+ */
+export function badgeText(scope, visible, serverTotal) {
+    return scope === '' ? serverTotal : String(visible);
+}
+/**
+ * Whether a section shows "nothing here for this app". Only when a filter
+ * emptied it — a section that was empty to begin with already renders its own
+ * fuller empty state, and two of them at once reads as a bug.
+ */
+export function showFilterEmpty(visible, total) {
+    return visible === 0 && total > 0;
+}
+/**
+ * Whether a Releases group — a subhead, its explanatory sentence and the cards
+ * underneath it — still has anything to head. A heading outliving its own
+ * cards is exactly the dishonesty this section exists to remove: filtered to
+ * an app with none of them, the board would otherwise announce "Awaiting live
+ * verification" directly above "Nothing in this section for the selected app."
+ * The subhead carries no `data-app` of its own and cannot — a group spans
+ * every app — so it is decided from what its cards are actually showing.
+ */
+export function showGroup(cardDisplays) {
+    return cardDisplays.some((display) => display !== 'none');
+}
+/** The "nothing here for the selected app" line, revealed only when a filter empties a section. */
+function filterEmpty(section) {
+    return `<p class="empty-sub filter-empty" id="fe-${section}" hidden>Nothing in this section for the selected app.</p>`;
+}
+function renderWork(cards) {
+    const intents = [...new Set(cards.map((card) => card.intent).filter(Boolean))].sort();
+    const filters = `<div class="filters">
+    <label>Risk <select id="f-tier"><option value="">All</option><option>light</option><option>normal</option><option>heavy</option></select></label>
+    ${intents.length > 0 ? `<label>Intent <select id="f-intent"><option value="">All</option>${intents.map((it) => `<option>${escapeHtml(it)}</option>`).join('')}</select></label>` : ''}
+  </div>`;
+    const columns = STATES.map((state) => {
+        const inState = cards.filter((card) => card.state === state);
+        return `<div class="col">
+      <h3 class="col-head" title="${escapeHtml(STATE_HINT[state])}">
+        <span class="dot" style="background:${STATE_TONE[state].dot}"></span>
+        <span class="col-name">${STATE_WORD[state]}</span>
+        <span class="count">${inState.length}</span>
+      </h3>
+      <div class="col-body">${inState.map(renderCard).join('\n') || '<p class="col-empty">No changes</p>'}</div>
+    </div>`;
+    }).join('\n');
+    return `${filters}<div class="board">${columns}</div>${filterEmpty('work')}`;
+}
+function renderApps(apps) {
+    if (apps.length === 0) {
+        return `<div class="empty">
+      <p class="empty-title">No apps yet.</p>
+      <p class="empty-sub">Run <code>prismatica init</code> inside a repo to put it on the board.</p>
+    </div>`;
+    }
+    const removeForm = (app) => `<form method="post" action="/forget" class="app-remove" data-confirm="forget" data-title="${escapeHtml(app.app)}">
+      ${csrfField()}
+      <input type="hidden" name="path" value="${escapeHtml(app.repo)}">
+      <button type="submit" class="btn-remove" title="remove this repo from the board — the repo and its records are untouched">Remove</button>
+    </form>`;
+    const modeChip = (app) => app.mode === 'map-only'
+        ? '<span class="chip" title="comprehension only — Flows and Rules, no gate">map only</span>'
+        : '';
+    const rows = apps
+        .map((app) => {
+        const appCell = `<td class="cell-app"><div class="app-name">${escapeHtml(app.app)} ${modeChip(app)}</div>${removeForm(app)}</td>`;
+        const row = `<tr data-app="${escapeHtml(app.app)}">`;
+        if (!app.ok) {
+            return `${row}${appCell}<td colspan="5" class="t-bad">${escapeHtml(app.problem ?? 'unreadable')}</td></tr>`;
+        }
+        const gate = app.gateHealth === 'pass'
+            ? '<span class="pill pill-ok" title="the last recorded gate run passed">Passing</span>'
+            : app.gateHealth === 'fail'
+                ? '<span class="pill pill-bad" title="the last recorded gate run failed">Failing</span>'
+                : '<span class="pill" title="no gate run recorded yet">No runs yet</span>';
+        // Unavailable and unknown are shown only when they exist, and never
+        // folded into "missing" — the board must not report an unanswered
+        // question as a shortcoming any more than the CLI does.
+        const unmeasured = [
+            app.checksSummary.unavailable > 0
+                ? `${app.checksSummary.unavailable} unavailable`
+                : undefined,
+            app.checksSummary.indeterminate > 0
+                ? `${app.checksSummary.indeterminate} unknown`
+                : undefined,
+        ].filter((part) => part !== undefined);
+        const checks = `<details><summary title="what init detected: Enforced blocks merges · Checked runs · Missing needs a fix · Unavailable cannot exist here · Unknown was never established"><span class="t-ok">${app.checksSummary.enforced} enforced</span> · ${app.checksSummary.checked} checked · <span class="${app.checksSummary.missing > 0 ? 't-warn' : 't-muted'}">${app.checksSummary.missing} missing</span>${unmeasured.length > 0 ? ` · <span class="t-muted">${unmeasured.join(' · ')}</span>` : ''}</summary>
+          ${app.missingFixes.length > 0 ? `<ul class="fixes">${app.missingFixes.map((fix) => `<li><b>${escapeHtml(fix.label)}</b> — <code>${escapeHtml(fix.fix)}</code></li>`).join('')}</ul>` : '<p class="t-muted fix-note">nothing missing that can be detected locally</p>'}
+        </details>`;
+        const flags = app.redFlags.length === 0
+            ? '<span class="t-muted">None</span>'
+            : app.redFlags.map((flag) => `<span class="flag">${escapeHtml(flag)}</span>`).join(' ');
+        return `${row}
+        ${appCell}
+        <td>${app.liveVersion ? `<span title="most recent passport">${escapeHtml(app.liveVersion.slice(0, 10))}</span>` : '<span class="t-muted">Nothing yet</span>'}</td>
+        <td><span title="in-flight changes vs the WIP limit">${app.openChanges}<span class="t-muted"> / ${app.wipLimit}</span></span></td>
+        <td>${gate}</td>
+        <td class="cell-flags">${flags}</td>
+        <td>${checks}</td>
+      </tr>`;
+    })
+        .join('\n');
+    return `<div class="panel"><table class="apps"><thead><tr><th>App</th><th>Last shipped</th><th title="in-flight changes vs the WIP limit">Open</th><th title="the merge gate — the one choke point">Gate</th><th>Red flags</th><th>Checks</th></tr></thead><tbody>${rows}</tbody></table></div>`;
+}
+function renderReleases(releases, pendingVerification, legacyReleases, intents) {
+    // The empty state claims nothing exists yet — false, and confusing to show
+    // directly above a list of pending or legacy contracts that plainly do.
+    const passports = releases.length === 0
+        ? pendingVerification.length === 0 && legacyReleases.length === 0
+            ? `<div class="empty">
+          <p class="empty-title">Nothing has shipped yet.</p>
+          <p class="empty-sub">A release appears here only after its change merges, deploys, and passes a live check — with a tested way back.</p>
+        </div>`
+            : ''
+        : releases
+            .map((release) => `<article class="release" data-app="${escapeHtml(release.app)}">
+        <div class="release-head">
+          <span class="dot" style="background:${STATE_TONE.live.dot}"></span>
+          <h4 class="card-title">${escapeHtml(release.passport.title)}</h4>
+          ${appChip(release.app)}
+        </div>
+        <p class="sentence">Shipped ${escapeHtml(release.passport.shippedAt.slice(0, 10))} · deploy: ${escapeHtml(release.passport.deploy.result)} · rollback tested: ${escapeHtml(release.passport.rollback.route)}</p>
+        <nav class="links"><a class="rl" href="${escapeHtml(release.passport.pr)}" title="the pull request it merged through">PR</a>${recordLink(release.repo, 'passports', release.passport.id, 'passport', 'what shipped, its proof, and the tested rollback route')}</nav>
+      </article>`)
+            .join('\n');
+    // A merged contract with no passport yet — eligible for `ship --verify`,
+    // distinct from a verified release (has a passport) and from a legacy one
+    // (never eligible at all). Never claims GitHub confirmed a merge; that is
+    // `ship --verify`'s own job.
+    const pendingBlock = pendingVerification.length === 0
+        ? ''
+        : `<div class="rel-group"><h3 class="subhead">Awaiting live verification</h3>
+        <p class="sentence t-muted">Merged, with no passport yet. Run <code>prismatica ship &lt;id&gt; --verify</code> once it has actually deployed — never shown as shipped until it does.</p>` +
+            pendingVerification
+                .map((item) => `<article class="release" data-app="${escapeHtml(item.app)}">
+        <div class="release-head">
+          <span class="dot" style="background:${STATE_TONE.shipping.dot}"></span>
+          <h4 class="card-title">${escapeHtml(item.title)}</h4>
+          ${appChip(item.app)}
+          <span class="chip st-open" title="no passport yet — not described as shipped or verified">pending verification</span>
+        </div>
+        <p class="id">${escapeHtml(item.contractId)}</p>
+        <nav class="links">${recordLink(item.repo, 'contracts', item.contractId, 'contract', 'the agreed goal, scope and checks')}</nav>
+      </article>`)
+                .join('\n') +
+            '</div>';
+    // Created before this app started tracking release verification
+    // (`releaseTrackingSince`), and carrying no passport — its release proof was
+    // never tracked, so it is never queued for `ship --verify` and never
+    // described as shipped or verified. A pre-boundary contract that DOES have a
+    // passport is a verified release above, not one of these: the boundary
+    // decides what a missing passport means, never what a present one does.
+    const legacyBlock = legacyReleases.length === 0
+        ? ''
+        : `<div class="rel-group"><h3 class="subhead">Legacy — release proof not tracked</h3>
+        <p class="sentence t-muted">Created before this app adopted release tracking. Not queued for verification, and never described as shipped or verified.</p>` +
+            legacyReleases
+                .map((item) => `<article class="release" data-app="${escapeHtml(item.app)}">
+        <div class="release-head">
+          <span class="dot" style="background:${STATE_TONE.planned.dot}"></span>
+          <h4 class="card-title">${escapeHtml(item.title)}</h4>
+          ${appChip(item.app)}
+          <span class="chip" title="this contract predates releaseTrackingSince — its release proof was never tracked">legacy — untracked</span>
+        </div>
+        <p class="id">${escapeHtml(item.contractId)}</p>
+        <nav class="links">${recordLink(item.repo, 'contracts', item.contractId, 'contract', 'the agreed goal, scope and checks')}</nav>
+      </article>`)
+                .join('\n') +
+            '</div>';
+    // An Intent is the PLAN the owner approved when `prismatica start` created
+    // the change — not a progress tracker. Nothing ever advances its state or
+    // its per-check status, so the old chip and "N of N proven" counter were
+    // reporting a number that could only ever be zero. What is honest to say is
+    // what the plan intended, and — from a passport, the one record that means
+    // work shipped — whether it got there.
+    const intentBlock = intents.length === 0
+        ? ''
+        : `<div class="rel-group"><h3 class="subhead">Approved plans</h3>
+        <p class="sentence">Each one is the plan your agent wrote and you confirmed when <code>prismatica start</code> created the change, recorded verbatim. The outcomes below are what it set out to achieve; whether the code does them is settled by the checks and the gate, never here.</p>` +
+            intents
+                .map((item) => `<article class="intent" data-app="${escapeHtml(item.app)}">
+          <div class="release-head"><h4 class="card-title">${escapeHtml(item.intent.title)}</h4>
+          ${item.shipped
+                ? '<span class="chip st-proven" title="a passport exists for this change — it merged, deployed and passed a live check">shipped</span>'
+                : '<span class="chip st-open" title="no passport for this change yet — it has not shipped">not shipped yet</span>'}</div>
+          <p class="sentence">Intended outcomes · ${escapeHtml(item.app)}</p>
+          <ul class="intent-checks">${item.intent.checks
+                .map((check) => `<li>${escapeHtml(check.description)}</li>`)
+                .join('')}</ul></article>`)
+                .join('\n') +
+            '</div>';
+    return passports + pendingBlock + legacyBlock + intentBlock + filterEmpty('releases');
+}
+// ── Understand (Flows + Rules) ───────────────────────────────────────────────
+function flowActionForm(repo, id, action, confirmKind, title, label, cls) {
+    return `<form method="post" action="/${action}" class="act" data-confirm="${confirmKind}" data-title="${escapeHtml(title)}">
+    ${csrfField()}
+    <input type="hidden" name="repo" value="${escapeHtml(repo)}">
+    <input type="hidden" name="id" value="${escapeHtml(id)}">
+    <button type="submit" class="${cls}">${label}</button>
+  </form>`;
+}
+function statusChip(status) {
+    return `<span class="chip" style="color:${FLOW_STATUS_TONE[status]};border-color:${FLOW_STATUS_TONE[status]}"><span class="dot" style="background:${FLOW_STATUS_TONE[status]}"></span> ${escapeHtml(FLOW_STATUS_LABEL[status])}</span>`;
+}
+function pendingBadge(kind, href) {
+    const isFlow = href !== undefined;
+    const title = kind === 'draft'
+        ? `a new ${isFlow ? 'flow' : 'rule'} proposed by an agent, awaiting your review`
+        : `a proposed change, awaiting your review${isFlow ? ' — click to see the diff' : ''}`;
+    const label = kind === 'draft' ? 'new — pending review' : href ? 'update pending — review' : 'update pending';
+    const tag = href ? `a href="${href}"` : 'span';
+    const closeTag = href ? 'a' : 'span';
+    return `<${tag} class="chip st-partly" title="${title}">${label}</${closeTag}>`;
+}
+/** Groups a list-result's entries by id — canonical and any pending proposal share one id. */
+function groupById(entries) {
+    const map = new Map();
+    for (const entry of entries) {
+        const list = map.get(entry.id) ?? [];
+        list.push(entry);
+        map.set(entry.id, list);
+    }
+    return map;
+}
+function flowHref(repo, id, kind) {
+    return `/flow?repo=${encodeURIComponent(repo)}&id=${encodeURIComponent(id)}${kind ? `&kind=${kind}` : ''}`;
+}
+/**
+ * One Flow on the Map. Answers, in about a second: what outcome does this give
+ * me, is it real, and can I trust the evidence — with signals only when there
+ * is something to say. Repetitive "Works now" is deliberately omitted: the
+ * status chip appears only when the status is NOT the ordinary "works", so its
+ * presence always carries information.
+ */
+function flowCard(repo, group) {
+    const canonical = group.find((view) => view.kind === 'flow');
+    const pending = group.find((view) => view.kind !== 'flow');
+    const primary = canonical ?? pending;
+    // The title always opens the canonical Storyboard when one exists — a
+    // pending update gets its OWN link (the badge below), since it needs the
+    // diff view, not the plain Storyboard.
+    const titleHref = flowHref(repo, primary.id, canonical ? undefined : pending?.kind);
+    const signals = primary.signals
+        .map((signal) => `<li class="flag${signal.tone === 'warn' ? ' flag-warn' : ''}">${signal.tone === 'bad' ? '✗' : '!'} ${escapeHtml(signal.text)}</li>`)
+        .join('\n      ');
+    return `<article class="card flow-card" data-status="${escapeHtml(primary.status)}">
+    <h4 class="card-title"><a href="${titleHref}" title="open the storyboard">${escapeHtml(primary.title)}</a></h4>
+    <p class="sentence outcome">${escapeHtml(primary.outcome)}</p>
+    <div class="meta-row">
+      ${canonical && canonical.status !== 'works' ? statusChip(canonical.status) : ''}
+      ${primary.evidence.freshness === 'verified' ? '' : `<span class="chip" title="${escapeHtml(primary.evidence.detail)}">${escapeHtml(primary.evidence.label)}</span>`}
+      ${pending ? pendingBadge(pending.kind, flowHref(repo, pending.id, pending.kind)) : ''}
+    </div>
+    ${signals ? `<ul class="flags flag-list">\n      ${signals}\n    </ul>` : ''}
+    <p class="id" title="flow id: ${escapeHtml(primary.id)}">${escapeHtml(primary.id)}</p>
+  </article>`;
+}
+/**
+ * Rules rendered as their complete, unmodified text inline — never clipped to a
+ * derived label or hidden behind a click.
+ */
+function renderRulesCard(repo, rules, problems) {
+    const groups = [...groupById(rules).values()];
+    if (groups.length === 0 && problems === 0) {
+        return `<div class="empty">
+      <p class="empty-title">No app rules yet.</p>
+      <p class="empty-sub">Rules are things that must stay true across the whole app — Prismatica Understand proposes candidates alongside the Flows.</p>
+    </div>`;
+    }
+    const rows = groups
+        .map((group) => {
+        const canonical = group.find((view) => view.kind === 'rule');
+        const pending = group.find((view) => view.kind !== 'rule');
+        const actions = pending
+            ? `<div class="need-action">
+            ${flowActionForm(repo, pending.id, 'rules/approve', 'rules-approve', pending.text, canonical ? 'Approve update' : 'Approve', 'btn-primary')}
+            ${flowActionForm(repo, pending.id, 'rules/dismiss', 'rules-dismiss', pending.text, 'Dismiss', 'btn-ghost')}
+          </div>`
+            : '';
+        // An update proposal shows current text vs proposed text, never just the
+        // proposed text alone.
+        const textBlock = pending && canonical && pending.text !== canonical.text
+            ? `<div class="sentence" style="flex:1 1 auto">
+              <div class="t-bad">− ${escapeHtml(canonical.text)}</div>
+              <div class="t-ok">+ ${escapeHtml(pending.text)}</div>
+            </div>`
+            : `<p class="sentence" style="flex:1 1 auto">${escapeHtml((pending ?? canonical).text)}</p>`;
+        const primary = (canonical ?? pending);
+        const facts = [
+            primary.id,
+            canonical ? canonical.evidenceLabel : 'Proposed',
+            canonical && canonical.citedByFlowIds.length > 0
+                ? `used by ${canonical.citedByFlowIds.length} flow${canonical.citedByFlowIds.length === 1 ? '' : 's'}`
+                : '',
+        ].filter(Boolean);
+        return `<article class="release">
+        <div class="release-head">
+          ${pending ? pendingBadge(pending.kind) : ''}
+          ${textBlock}
+        </div>
+        <p class="id">${escapeHtml(facts.join(' · '))}</p>
+        ${actions}
+      </article>`;
+    })
+        .join('\n');
+    return rows;
+}
+function renderFlowMap(repo, entry) {
+    const byId = groupById(entry.flows);
+    // One card per flow id (canonical plus any pending proposal), ordered and
+    // grouped by the SAME shared model the terminal uses.
+    const canonicalOrder = sortFlowViews(entry.flows.filter((view, index, all) => all.findIndex((other) => other.id === view.id) === index));
+    const journeys = groupByJourney(canonicalOrder);
+    const flowsHtml = entry.flows.length === 0
+        ? `<div class="empty">
+          <p class="empty-title">No Flows yet.</p>
+          <p class="empty-sub">${escapeHtml(UNDERSTAND_CTA)} It reads this repo and hands you one command to run:</p>
+          <pre class="cmd"><code>${escapeHtml(UNDERSTAND_IMPORT_COMMAND)}</code></pre>
+          <p class="empty-sub">Whatever it drafts arrives here for you to review.</p>
+        </div>`
+        : `<div class="filters">
+          <label>Status <select id="f-status"><option value="">All</option>${Object.keys(FLOW_STATUS_LABEL).map((status) => `<option value="${status}">${escapeHtml(FLOW_STATUS_LABEL[status])}</option>`).join('')}</select></label>
+        </div>
+        ${journeys
+            .map((journey) => `<h3 class="subhead">${escapeHtml(journey.title)}</h3>
+        <div class="flow-grid">${journey.flows.map((view) => flowCard(repo, byId.get(view.id) ?? [view])).join('\n')}</div>`)
+            .join('\n')}`;
+    const problemsHtml = entry.flowProblems + entry.ruleProblems > 0
+        ? `<div class="flags" style="margin-top:10px"><span class="flag">${entry.flowProblems + entry.ruleProblems} file(s) could not be read — run <code>prismatica flow list</code> or <code>prismatica rules list</code> in the repo for details</span></div>`
+        : '';
+    const appWide = partitionGuardrails(entry.rules.filter((rule) => rule.kind === 'rule'));
+    return `
+<p style="margin-bottom:18px"><a class="back" href="/understand">← All apps</a></p>
+<section id="flow-map">
+  <div class="sec-head"><h2>${escapeHtml(entry.app)}</h2><span class="sec-sub">Flow Map — what this app does, in plain language</span></div>
+  ${flowsHtml}
+  ${problemsHtml}
+</section>
+<section id="rules">
+  <div class="sec-head"><h2>Must stay true</h2><span class="sec-sub">${appWide.flowSpecific.length > 0 ? 'guardrails across the app, and the ones specific flows name' : 'guardrails that apply across every flow'}</span></div>
+  ${renderRulesCard(repo, entry.rules, entry.ruleProblems)}
+</section>`;
+}
+function renderUnderstandPicker(model) {
+    if (model.understand.length === 0) {
+        return `<section><div class="sec-head"><h2>Understand</h2></div>
+      <div class="empty">
+        <p class="empty-title">No apps yet.</p>
+        <p class="empty-sub">Run <code>prismatica init</code> in a repo, then ${escapeHtml(UNDERSTAND_CTA.replace(/^Open/, 'open'))} It will draft its Flows for you to review.</p>
+      </div>
+    </section>`;
+    }
+    const cards = model.understand
+        .map((entry) => {
+        const canonicalFlows = entry.flows.filter((flow) => flow.kind === 'flow').length;
+        const pendingFlows = entry.flows.filter((flow) => flow.kind !== 'flow').length;
+        const canonicalRules = entry.rules.filter((rule) => rule.kind === 'rule').length;
+        const pendingRules = entry.rules.filter((rule) => rule.kind !== 'rule').length;
+        const pending = pendingFlows + pendingRules;
+        return `<article class="release">
+        <div class="release-head">
+          <h4 class="card-title"><a href="/understand?repo=${encodeURIComponent(entry.repo)}">${escapeHtml(entry.app)}</a></h4>
+          ${entry.mode === 'map-only' ? '<span class="chip">map only</span>' : ''}
+          ${pending > 0 ? `<span class="chip st-partly">${pending} to review</span>` : ''}
+        </div>
+        <p class="sentence">${canonicalFlows} flow${canonicalFlows === 1 ? '' : 's'} · ${canonicalRules} rule${canonicalRules === 1 ? '' : 's'}</p>
+      </article>`;
+    })
+        .join('\n');
+    return `<section><div class="sec-head"><h2>Understand</h2><span class="sec-sub">pick an app to see its Flow Map</span></div>${cards}</section>`;
+}
+function diffRow(label, current, proposed) {
+    const changed = current !== proposed;
+    return `<tr class="${changed ? 't-warn' : ''}"><th>${escapeHtml(label)}</th><td>${escapeHtml(current) || '<span class="t-muted">—</span>'}</td><td>${escapeHtml(proposed) || '<span class="t-muted">—</span>'}</td></tr>`;
+}
+/** A list-valued truth field (needs/rules/involves): added/removed, never a blind blob diff. */
+function listDiffRow(label, current, proposed) {
+    const { added, removed, unchanged } = diffList(current, proposed);
+    if (added.length === 0 && removed.length === 0) {
+        return diffRow(label, current.join('; '), proposed.join('; '));
+    }
+    const parts = [
+        ...unchanged.map((item) => escapeHtml(item)),
+        ...added.map((item) => `<span class="t-ok">+ ${escapeHtml(item)}</span>`),
+        ...removed.map((item) => `<span class="t-bad">− ${escapeHtml(item)}</span>`),
+    ];
+    return `<tr class="t-warn"><th>${escapeHtml(label)}</th><td colspan="2">${parts.join(' · ')}</td></tr>`;
+}
+const STEP_DIFF_TAG = {
+    added: { tone: 't-ok', tag: '+ added' },
+    removed: { tone: 't-bad', tag: '− removed' },
+    unchanged: { tone: 't-muted', tag: 'unchanged' },
+};
+function stepDiffItem(entry) {
+    const { step } = entry;
+    const { tone, tag } = STEP_DIFF_TAG[entry.kind];
+    const fields = [
+        step.shows ? `${FLOW_STEP_FIELD.shows.label}: ${step.shows}` : null,
+        step.changes ? `${FLOW_STEP_FIELD.changes.label}: ${step.changes}` : null,
+        step.assumes.length > 0 ? `${FLOW_STEP_FIELD.assumes.label}: ${step.assumes.join('; ')}` : null,
+    ].filter((line) => line !== null);
+    return `<li class="${tone}"><span class="chip">${tag}</span> <b>${escapeHtml(step.actor)}</b> ${escapeHtml(step.action)}${fields.length > 0
+        ? `<div class="sentence t-muted">${fields.map((f) => escapeHtml(f)).join(' · ')}</div>`
+        : ''}</li>`;
+}
+/** The real per-step diff — added/removed/edited(-as-remove+add), never "N steps → M steps". */
+function stepDiffList(current, proposed) {
+    const entries = diffSteps(current, proposed);
+    if (entries.every((entry) => entry.kind === 'unchanged')) {
+        return '<p class="sentence t-muted">No step changes.</p>';
+    }
+    return `<ul class="fixes">${entries.map((entry) => stepDiffItem(entry)).join('\n')}</ul>`;
+}
+function variationDiffItem(entry) {
+    if (entry.kind === 'edited') {
+        return `<li class="t-warn"><span class="chip">edited</span> <b>${escapeHtml(entry.after.name)}</b> — was: ${escapeHtml(entry.before.differs)} → now: ${escapeHtml(entry.after.differs)}</li>`;
+    }
+    const { tone, tag } = STEP_DIFF_TAG[entry.kind];
+    return `<li class="${tone}"><span class="chip">${tag}</span> <b>${escapeHtml(entry.variation.name)}</b> — ${escapeHtml(entry.variation.differs)}</li>`;
+}
+/** Variations are keyed by name (their natural stable identity), so edits show as edits, not remove+add. */
+function variationDiffList(current, proposed) {
+    const entries = diffVariations(current, proposed);
+    if (entries.length === 0) {
+        return '<p class="sentence t-muted">No variations.</p>';
+    }
+    if (entries.every((entry) => entry.kind === 'unchanged')) {
+        return '<p class="sentence t-muted">No variation changes.</p>';
+    }
+    return `<ul class="fixes">${entries.map((entry) => variationDiffItem(entry)).join('\n')}</ul>`;
+}
+/**
+ * Display metadata lives outside the truth hash, so a rename/regroup/reorder
+ * produces an entirely empty truth diff. Showing it here — clearly marked as
+ * display, not truth — is what keeps a presentation-only update from being
+ * approved unseen.
+ */
+function presentationDiff(current, proposed) {
+    const entries = diffPresentation(current, proposed);
+    if (entries.length === 0) {
+        return '';
+    }
+    return `<div class="panel" style="margin-bottom:18px">
+    <p class="sentence" style="margin-bottom:8px"><b>${escapeHtml(PRESENTATION_DIFF_HEADING)}</b></p>
+    <table class="apps">
+    <thead><tr><th></th><th>Current (approved)</th><th>Proposed</th></tr></thead>
+    <tbody>
+      ${entries
+        .map((entry) => diffRow(FLOW_PRESENTATION_FIELD[entry.field].label, entry.before ?? '', entry.after ?? ''))
+        .join('\n')}
+    </tbody>
+  </table></div>`;
+}
+function truthDiff(current, proposed, currentPresentation, proposedPresentation) {
+    return `${presentationDiff(currentPresentation, proposedPresentation)}
+  <div class="panel" style="margin-bottom:18px"><table class="apps">
+    <thead><tr><th></th><th>Current (approved)</th><th>Proposed</th></tr></thead>
+    <tbody>
+      ${diffRow(FLOW_FIELD.goal.label, current.goal, proposed.goal)}
+      ${diffRow(FLOW_FIELD.startsWhen.label, current.startsWhen, proposed.startsWhen)}
+      ${listDiffRow(FLOW_FIELD.needs.label, current.needs, proposed.needs)}
+      ${diffRow(FLOW_FIELD.endsWith.label, current.endsWith, proposed.endsWith)}
+      ${listDiffRow(FLOW_FIELD.rules.label, current.rules, proposed.rules)}
+      ${listDiffRow(FLOW_FIELD.involves.label, current.involves, proposed.involves)}
+    </tbody>
+  </table></div>
+  <div class="panel" style="margin-bottom:18px">
+    <p class="sentence" style="margin-bottom:8px"><b>${escapeHtml(FLOW_FIELD.steps.label)}</b></p>
+    ${stepDiffList(current.steps, proposed.steps)}
+  </div>
+  <div class="panel" style="margin-bottom:18px">
+    <p class="sentence" style="margin-bottom:8px"><b>${escapeHtml(FLOW_FIELD.variations.label)}</b></p>
+    ${variationDiffList(current.variations, proposed.variations)}
+  </div>`;
+}
+/**
+ * One collapsed step shows exactly six things: its number, a concise action
+ * title, who acts, what becomes visible (or "Background step" — never
+ * "Shows: Nothing"), what changes, and how it was verified. Assumptions and
+ * anything longer live inside a native <details>, so keyboard and screen-reader
+ * behaviour is the browser's, not ours.
+ */
+function storyboardSteps(view) {
+    return view.steps
+        .map((step) => {
+        const tone = EVIDENCE_TONE[step.evidenceState];
+        return `<li class="storystep">
+        <div class="storystep-n" aria-hidden="true">${step.number}</div>
+        <div class="storystep-body">
+          <p class="step-title"><b>${escapeHtml(step.actor)}</b> ${escapeHtml(step.title)}</p>
+          <p class="sentence${step.hasVisibleResult ? '' : ' t-muted'}">${step.hasVisibleResult ? `${escapeHtml(FLOW_STEP_FIELD.shows.label)}: ${escapeHtml(step.result)}` : escapeHtml(step.result)}</p>
+          ${step.changes ? `<p class="sentence"><span class="t-muted">${escapeHtml(FLOW_STEP_FIELD.changes.label)}:</span> ${escapeHtml(step.changes)}</p>` : ''}
+          <span class="chip" style="color:${tone};border-color:${tone}" title="${escapeHtml(LAST_VERIFIED_FIELD.hint)}">${escapeHtml(step.evidenceLabel)}</span>
+          ${step.assumes.length > 0 || step.resultNote
+            ? `<details class="step-detail"><summary>${step.assumes.length > 0 ? 'Assumptions' : 'Details'}</summary>
+                  <ul class="fixes">${[
+                ...(step.resultNote
+                    ? [
+                        `<li><b>${escapeHtml(FLOW_STEP_FIELD.shows.label)}</b> — ${escapeHtml(step.resultNote)}</li>`,
+                    ]
+                    : []),
+                ...step.assumes.map((assumption) => `<li>${escapeHtml(assumption)}</li>`),
+            ].join('')}</ul>
+                </details>`
+            : ''}
+        </div>
+      </li>`;
+    })
+        .join('\n');
+}
+function storyboardSignals(view) {
+    if (view.signals.length === 0) {
+        return '';
+    }
+    return `<ul class="flags flag-list" style="margin-bottom:14px">${view.signals
+        .map((signal) => `<li class="flag${signal.tone === 'warn' ? ' flag-warn' : ''}">${signal.tone === 'bad' ? '✗' : '!'} ${escapeHtml(signal.text)}</li>`)
+        .join('\n')}</ul>`;
+}
+function renderStoryboard(repo, detail) {
+    const { view } = detail;
+    const kindNote = view.kind === 'flow'
+        ? ''
+        : view.kind === 'draft'
+            ? ' — new, proposed by an agent'
+            : ' — proposed update';
+    const actions = view.kind !== 'flow'
+        ? `<div class="need-action" style="margin:14px 0">
+          ${flowActionForm(repo, view.id, 'flow/approve', 'flow-approve', view.title, view.kind === 'update' ? 'Approve update' : 'Approve', 'btn-primary')}
+          ${flowActionForm(repo, view.id, 'flow/dismiss', 'flow-dismiss', view.title, 'Keep current / dismiss', 'btn-ghost')}
+        </div>`
+        : '';
+    const nav = [
+        detail.neighbours.previous
+            ? `<a class="rl" href="${flowHref(repo, detail.neighbours.previous.id)}" rel="prev">← ${escapeHtml(detail.neighbours.previous.title)}</a>`
+            : '<span></span>',
+        detail.neighbours.next
+            ? `<a class="rl" href="${flowHref(repo, detail.neighbours.next.id)}" rel="next">${escapeHtml(detail.neighbours.next.title)} →</a>`
+            : '<span></span>',
+    ].join('');
+    return `
+<nav class="crumbs" aria-label="Breadcrumb"><a class="back" href="/understand">Understand</a> <span aria-hidden="true">/</span> <a class="back" href="/understand?repo=${encodeURIComponent(repo)}">Flow Map</a> <span aria-hidden="true">/</span> <span aria-current="page">${escapeHtml(view.title)}</span></nav>
+<section>
+  <div class="sec-head"><h2>${escapeHtml(view.title)}</h2><span class="sec-sub">${escapeHtml(view.id)}${kindNote}</span></div>
+  <p class="ask" style="margin-bottom:10px">${escapeHtml(view.outcome)}</p>
+  <p class="sentence" style="margin-bottom:12px">${escapeHtml([view.statusLabel, view.evidence.label, view.evidence.detail].join(' · '))}</p>
+  ${storyboardSignals(view)}
+  ${view.reason ? `<p class="sentence" style="margin-bottom:12px"><span class="t-muted">Why proposed:</span> ${escapeHtml(view.reason)}</p>` : ''}
+  ${view.kind === 'update' && detail.current ? `<details class="diff-detail" open><summary>What this update would change</summary>${truthDiff(detail.current.truth, detail.truth, detail.current.presentation, detail.presentation)}</details>` : ''}
+  ${actions}
+
+  <h3 class="subhead">Overview</h3>
+  <dl class="overview">
+    <dt>Starts</dt><dd>${escapeHtml(view.startsWhen)}</dd>
+    ${view.needs.length > 0 ? `<dt>Needs</dt><dd>${escapeHtml(view.needs.join('; '))}</dd>` : ''}
+    <dt>Ends</dt><dd>${escapeHtml(view.endsWith)}</dd>
+  </dl>
+
+  <h3 class="subhead">What happens</h3>
+  <ol class="storyboard">${storyboardSteps(view)}</ol>
+
+  ${view.otherPaths.length > 0
+        ? `<h3 class="subhead">Other paths</h3>
+  <p class="sentence t-muted" style="margin-bottom:8px">Alternatives through the whole flow. The record does not say which step each one branches from, so none is claimed.</p>
+  <ul class="fixes">${view.otherPaths
+            .map((path) => `<li><b>${escapeHtml(path.name)}</b> — ${escapeHtml(path.differs)}${path.statusLabel ? ` <span class="chip">${escapeHtml(path.statusLabel)}</span>` : ''}</li>`)
+            .join('\n')}</ul>
+  ${detail.variationsSuggestion ? `<p class="sentence t-warn" style="margin-top:8px">${escapeHtml(detail.variationsSuggestion)}</p>` : ''}`
+        : ''}
+
+  ${view.guardrails.length > 0
+        ? `<h3 class="subhead">Must stay true</h3>
+  <ul class="fixes">${view.guardrails
+            .map((guardrail) => `<li>${escapeHtml(guardrail.text)}${guardrail.id && !guardrail.dangling ? ` <span class="t-muted">(${escapeHtml(guardrail.id)})</span>` : ''}${guardrail.dangling ? ' <span class="flag">no such rule</span>' : ''}</li>`)
+            .join('\n')}</ul>`
+        : ''}
+
+  ${view.implementation.isEmpty
+        ? ''
+        : `<details style="margin-top:18px"><summary>${escapeHtml(MECHANICS_FIELD.label)}</summary>
+    <p class="sentence t-muted">${escapeHtml(MECHANICS_FIELD.hint)}</p>
+    <ul class="fixes">
+      ${view.implementation.touchpoints.length > 0 ? `<li><b>touchpoints</b> — ${escapeHtml(view.implementation.touchpoints.join(', '))}</li>` : ''}
+      ${view.implementation.routes.length > 0 ? `<li><b>routes</b> — ${escapeHtml(view.implementation.routes.join(', '))}</li>` : ''}
+      ${view.implementation.components.length > 0 ? `<li><b>components</b> — ${escapeHtml(view.implementation.components.join(', '))}</li>` : ''}
+      ${view.implementation.entities.length > 0 ? `<li><b>entities</b> — ${escapeHtml(view.implementation.entities.join(', '))}</li>` : ''}
+      ${view.implementation.tests.length > 0 ? `<li><b>tests</b> — ${escapeHtml(view.implementation.tests.join(', '))}</li>` : ''}
+    </ul>
+  </details>`}
+
+  ${detail.neighbours.previous || detail.neighbours.next ? `<nav class="flow-nav" aria-label="Flows in this journey">${nav}</nav>` : ''}
+</section>`;
+}
+const DARK_VARS = `
+  --bg:#101012; --panel:#1A1A1E; --panel-2:#151518; --border:#2A2A30; --border-soft:#232329;
+  --text:#EDEDEF; --text-2:#A0A0AB; --text-3:#6F6F7A;
+  --accent:#9E8CFC; --amber:#F59E0B; --amber-hover:#FBBF24; --amber-soft:#2A2013;
+  --ok:#3DD68C; --bad:#F2645A; --bad-soft:#2A1715;
+  --tier-normal-fg:#849DFF; --btn-text:#1A1205;
+  --shadow:none; --shadow-hover:0 0 0 1px var(--border);
+`;
+const CSS = `
+:root{
+  --fs-xs:12.5px; --fs-sm:14px; --fs-base:16px; --fs-md:16.5px; --fs-lg:19px; --fs-xl:22px;
+  --bg:#FAFAFA; --panel:#FFFFFF; --panel-2:#F4F4F5; --border:#E4E4E7; --border-soft:#EEEEF0;
+  --text:#18181B; --text-2:#52525B; --text-3:#8A8A93;
+  --accent:#6E56CF; --amber:#B45309; --amber-hover:#92400E; --amber-soft:#FFF7ED;
+  --ok:#1D7A4F; --bad:#B4423A; --bad-soft:#FEF2F2;
+  --tier-normal-fg:#3A5CCC; --btn-text:#FFFFFF;
+  --shadow:0 1px 2px rgba(0,0,0,.04); --shadow-hover:0 2px 8px rgba(0,0,0,.07);
+  --mono:ui-monospace,'SF Mono','Cascadia Mono',Menlo,Consolas,monospace;
+  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',system-ui,sans-serif;
+}
+:root[data-theme="dark"]{${DARK_VARS}}
+@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){${DARK_VARS}}}
+*{box-sizing:border-box;margin:0;padding:0}
+html{color-scheme:light dark;scroll-behavior:smooth;scroll-padding-top:24px}
+@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
+body{background:var(--bg);color:var(--text);font:var(--fs-base)/1.6 var(--sans);
+  -webkit-font-smoothing:antialiased;overflow-x:hidden}
+/* Wide content (the board, tables, records) scrolls INSIDE its own box; the
+   page itself never scrolls sideways, at 390px or at 200% zoom. */
+html{max-width:100%}
+a{color:inherit}
+code{font-family:var(--mono);font-size:.92em;background:var(--panel-2);border:1px solid var(--border-soft);border-radius:4px;padding:0 4px}
+
+/* ── App shell ─────────────────────────────────────────────────────────── */
+.shell{display:flex;min-height:100vh}
+.side{width:230px;flex-shrink:0;border-right:1px solid var(--border);background:var(--panel-2);
+  padding:20px 12px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh}
+.brand{display:flex;align-items:center;gap:8px;padding:2px 10px 12px;font-weight:600;
+  font-size:var(--fs-md);letter-spacing:-.01em}
+.brand .gem{color:var(--accent);font-size:13px}
+.prismline{height:2px;border-radius:1px;margin:0 10px 14px;background:linear-gradient(90deg,
+  #8B8D98,#3E63DD,#12A594,#D97706,#8E4EC6,#30A46C)}
+.nav a{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:6px;
+  font-size:var(--fs-sm);font-weight:500;color:var(--text-2);text-decoration:none}
+.nav a:hover{background:var(--panel);color:var(--text)}
+.nav a.active{background:var(--panel);color:var(--text);box-shadow:var(--shadow)}
+.nav .n-dot{width:7px;height:7px;border-radius:50%;background:var(--text-3)}
+.nav a[href='#needs'] .n-dot{background:#D97706}
+.nav a[href='#work'] .n-dot{background:#3E63DD}
+.nav a[href='#apps'] .n-dot{background:#12A594}
+.nav a[href='#releases'] .n-dot{background:#30A46C}
+.nav a[href='/understand'] .n-dot{background:var(--accent)}
+.nav .badge{margin-left:auto;font-size:var(--fs-xs);font-weight:600;color:var(--text-2);
+  background:var(--panel);border:1px solid var(--border);border-radius:10px;
+  min-width:20px;text-align:center;padding:0 6px;line-height:18px}
+.nav .badge.hot{background:var(--amber-soft);border-color:var(--amber);color:var(--amber)}
+.side-controls{margin-top:14px;padding:12px 10px 0;border-top:1px solid var(--border);
+  display:flex;flex-direction:column;gap:8px}
+.ctl-btn{font:500 var(--fs-sm) var(--sans);color:var(--text-2);background:var(--panel);
+  border:1px solid var(--border);border-radius:6px;padding:6px 10px;cursor:pointer;text-align:left}
+.ctl-btn:hover{color:var(--text)}
+.ctl-toggle{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--text-2);cursor:pointer;padding:0 2px}
+.ctl-toggle input{accent-color:var(--accent)}
+.side-foot{margin-top:auto;padding:12px 10px 0;font-size:var(--fs-xs);color:var(--text-3);line-height:1.7}
+.side-foot a{color:var(--text-2)}
+
+/* ── Main column ───────────────────────────────────────────────────────── */
+main{flex:1;min-width:0;padding:28px 32px 96px;max-width:1320px}
+section{margin-bottom:44px;scroll-margin-top:24px}
+.sec-head{display:flex;align-items:baseline;gap:10px;margin-bottom:14px;flex-wrap:wrap}
+.sec-head h2{font-size:var(--fs-lg);font-weight:600;letter-spacing:-.01em}
+.sec-head .sec-sub{font-size:var(--fs-sm);color:var(--text-3)}
+.subhead{font-size:var(--fs-sm);font-weight:600;color:var(--text-2);margin:22px 0 10px}
+
+/* ── Shared atoms ──────────────────────────────────────────────────────── */
+.meta-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
+.chip{font-size:var(--fs-xs);font-weight:500;line-height:19px;border-radius:5px;padding:0 7px;
+  border:1px solid var(--border);color:var(--text-2);background:var(--panel);white-space:nowrap}
+a.chip:hover{text-decoration:underline}
+.app-chip{background:var(--panel-2)}
+.tier-heavy{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent);background:var(--bad-soft);font-weight:600}
+.tier-normal{color:var(--tier-normal-fg);border-color:color-mix(in srgb,var(--tier-normal-fg) 40%,transparent)}
+.st-open{color:var(--text-2)} .st-partly{color:var(--amber);border-color:var(--amber)}
+.st-proven{color:var(--ok);border-color:var(--ok)}
+.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}
+.pill{font-size:var(--fs-xs);font-weight:500;border:1px solid var(--border);border-radius:12px;
+  padding:2px 10px;color:var(--text-2);white-space:nowrap}
+.pill-ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
+.pill-bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent);background:var(--bad-soft)}
+.flag{font-size:var(--fs-xs);font-weight:500;color:var(--bad);background:var(--bad-soft);
+  border:1px solid color-mix(in srgb,var(--bad) 30%,transparent);border-radius:5px;
+  padding:1px 6px;line-height:1.5;display:inline-block;margin:1px 4px 1px 0;overflow-wrap:anywhere}
+.links{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px;row-gap:3px;
+  font-size:var(--fs-sm);min-width:0}
+.links-label{color:var(--text-3)}
+.rl{color:var(--text-2);text-decoration:underline;text-decoration-color:var(--border);
+  text-underline-offset:3px;white-space:nowrap}
+.rl:hover{color:var(--accent);text-decoration-color:var(--accent)}
+.sentence{font-size:var(--fs-sm);color:var(--text-2);overflow-wrap:anywhere}
+.t-ok{color:var(--ok)} .t-bad{color:var(--bad)} .t-warn{color:var(--amber)} .t-muted{color:var(--text-3)}
+.empty{border:1px dashed var(--border);border-radius:10px;padding:22px 24px}
+.empty-title{font-weight:500;font-size:var(--fs-md)}
+.empty-sub{font-size:var(--fs-sm);color:var(--text-3);margin-top:3px}
+.btn-primary{font:600 var(--fs-sm) var(--sans);color:var(--btn-text);background:var(--amber);border:none;
+  border-radius:7px;padding:8px 16px;cursor:pointer;white-space:nowrap;box-shadow:var(--shadow)}
+.btn-primary:hover{background:var(--amber-hover)}
+.btn-ghost{font:600 var(--fs-sm) var(--sans);color:var(--text-2);background:transparent;
+  border:1px solid var(--border);border-radius:7px;padding:7px 14px;cursor:pointer;white-space:nowrap}
+.btn-ghost:hover{color:var(--text);border-color:var(--text-3)}
+
+/* ── Needs you ─────────────────────────────────────────────────────────── */
+.need{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
+  background:var(--panel);border:1px solid var(--border);border-radius:10px;
+  padding:16px 20px;margin-bottom:10px;box-shadow:var(--shadow);border-left:3px solid #D97706}
+.need-body{min-width:0;flex:1 1 380px;display:flex;flex-direction:column;gap:7px}
+.ask{font-size:var(--fs-md);max-width:72ch;overflow-wrap:anywhere}
+.need-action{flex-shrink:0;display:flex;gap:8px;flex-wrap:wrap}
+
+/* ── Work board ────────────────────────────────────────────────────────── */
+.filters{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:14px;font-size:var(--fs-sm);color:var(--text-2)}
+.app-scope{align-items:center;gap:10px;margin-bottom:20px;padding:10px 14px;border:1px solid var(--line);
+  border-radius:10px;background:var(--panel)}
+.app-scope label{font-weight:600;color:var(--text)}
+.scope-note{color:var(--text-2)}
+.filter-empty{margin-top:10px}
+.filters label{display:flex;align-items:center;gap:6px}
+.filters select{font:var(--fs-sm) var(--sans);color:var(--text);background:var(--panel);
+  border:1px solid var(--border);border-radius:6px;padding:4px 6px}
+.board{display:grid;grid-template-columns:repeat(6,minmax(176px,1fr));gap:10px;
+  overflow-x:auto;padding-bottom:8px}
+.col{background:var(--panel-2);border:1px solid var(--border-soft);border-radius:10px;padding:8px;min-width:0}
+.col-head{display:flex;align-items:center;gap:7px;font-size:var(--fs-sm);font-weight:600;
+  color:var(--text-2);padding:4px 6px 8px;cursor:default}
+.col-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.count{margin-left:auto;font-size:var(--fs-xs);font-weight:600;color:var(--text-3);
+  background:var(--panel);border:1px solid var(--border);border-radius:9px;
+  min-width:18px;text-align:center;line-height:17px;padding:0 5px}
+.col-body{display:flex;flex-direction:column;gap:8px}
+.col-empty{font-size:var(--fs-sm);color:var(--text-3);padding:6px}
+.card{background:var(--panel);border:1px solid var(--border);border-radius:8px;
+  padding:11px 12px;box-shadow:var(--shadow);min-width:0;display:flex;flex-direction:column;gap:7px}
+.card:hover{box-shadow:var(--shadow-hover)}
+.card-title{font-size:var(--fs-md);font-weight:600;line-height:1.4;overflow-wrap:anywhere}
+.card-title a{color:inherit;text-decoration:none}
+.card-title a:hover{color:var(--accent);text-decoration:underline}
+.flags{min-width:0}
+.id{font-family:var(--mono);font-size:var(--fs-xs);color:var(--text-3);
+  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+
+/* ── Apps table ────────────────────────────────────────────────────────── */
+.panel{background:var(--panel);border:1px solid var(--border);border-radius:10px;
+  box-shadow:var(--shadow);overflow-x:auto}
+table.apps{width:100%;border-collapse:collapse}
+table.apps th{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;font-weight:600;
+  color:var(--text-3);text-align:left;padding:11px 16px;border-bottom:1px solid var(--border)}
+table.apps td{padding:14px 16px;border-bottom:1px solid var(--border-soft);vertical-align:top;font-size:var(--fs-sm)}
+table.apps tr:last-child td{border-bottom:none}
+.cell-app .app-name{font-weight:600;font-size:var(--fs-md)}
+.app-remove{margin-top:4px}
+.btn-remove{font:500 var(--fs-xs) var(--sans);color:var(--text-3);background:transparent;
+  border:none;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
+.btn-remove:hover{color:var(--bad)}
+.cell-flags{max-width:320px}
+details summary{cursor:pointer;font-size:var(--fs-sm);color:var(--text-2)}
+details summary:hover{color:var(--text)}
+.fixes{margin:8px 0 0 18px;font-size:var(--fs-sm);color:var(--text-2)}
+.fixes li{margin-bottom:3px}
+.fix-note{font-size:var(--fs-sm);margin-top:6px}
+
+/* ── Understand: Flow Map + Storyboard ────────────────────────────────────── */
+.flow-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
+.flow-grid .flow-card{padding:14px 16px;min-width:0}
+.storyboard{display:flex;flex-direction:column;gap:0;margin:14px 0}
+.storystep{display:flex;gap:14px;padding:10px 0;border-left:2px solid var(--border);margin-left:10px;padding-left:16px}
+.storystep-n{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--panel-2);margin-left:-27px;
+  border:1px solid var(--border);font-size:var(--fs-xs);font-weight:600;color:var(--text-2);
+  display:flex;align-items:center;justify-content:center}
+.storystep-body{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
+.storystep-body p{overflow-wrap:anywhere}
+
+/* ── Releases ──────────────────────────────────────────────────────────── */
+.release,.intent{background:var(--panel);border:1px solid var(--border);border-radius:10px;
+  padding:14px 18px;margin-bottom:10px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:7px}
+.release-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0}
+.intent-checks{margin:0;padding-left:20px;color:var(--text-2);font-size:var(--fs-sm);
+  display:flex;flex-direction:column;gap:4px}
+
+/* ── Record page ───────────────────────────────────────────────────────── */
+pre.cmd{background:var(--panel);border:1px solid var(--border);border-radius:10px;
+  padding:14px 16px;overflow-x:auto;font:var(--fs-sm)/1.6 var(--mono);
+  white-space:pre-wrap;word-break:break-word;user-select:all;margin:10px 0}
+pre.record{background:var(--panel);border:1px solid var(--border);border-radius:10px;
+  padding:20px;overflow-x:auto;font:var(--fs-sm)/1.65 var(--mono);white-space:pre-wrap;
+  overflow-wrap:anywhere;box-shadow:var(--shadow)}
+a.back{font-size:var(--fs-sm);color:var(--text-2)}
+.msg{font-size:var(--fs-md);max-width:72ch}
+
+:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
+/* Meaning never rides on colour alone: every flag carries ✗ or !, every chip
+   carries its own words, and evidence tone always accompanies a text label. */
+
+/* ── Understand: signals, overview, journey navigation ─────────────────── */
+.flag-list{list-style:none;display:flex;flex-direction:column;gap:4px;margin:2px 0}
+.flag-warn{color:var(--amber);background:var(--amber-soft);
+  border-color:color-mix(in srgb,var(--amber) 30%,transparent)}
+.outcome{color:var(--text);font-size:var(--fs-sm)}
+.crumbs{font-size:var(--fs-sm);color:var(--text-3);margin-bottom:18px;
+  display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
+.overview{display:grid;grid-template-columns:minmax(5.5rem,auto) 1fr;gap:6px 16px;
+  font-size:var(--fs-sm);margin-bottom:6px}
+.overview dt{color:var(--text-3);font-weight:600}
+.overview dd{overflow-wrap:anywhere}
+.step-title{overflow-wrap:anywhere}
+/* A chip sizes to its text; a flex column would otherwise stretch it edge to edge. */
+.storystep-body .chip,.storystep-body details{align-self:flex-start}
+.step-detail,.diff-detail{min-width:0}
+.step-detail summary,.diff-detail summary{
+  min-height:44px;display:flex;align-items:center;min-width:0;overflow-wrap:anywhere}
+.flow-nav{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
+  margin-top:28px;padding-top:14px;border-top:1px solid var(--border)}
+.flow-nav a{min-height:44px;display:flex;align-items:center;white-space:normal}
+.nav a,.ctl-btn,.btn-primary,.btn-ghost,.filters select{min-height:44px}
+.nav a,.ctl-btn{align-items:center}
+@media (max-width:520px){
+  .btn-primary,.btn-ghost{flex:1 1 auto}
+  .overview{grid-template-columns:1fr;gap:2px 0}
+  .overview dd{margin-bottom:8px}
+}
+
+/* ── Responsive ────────────────────────────────────────────────────────── */
+@media (max-width:860px){
+  .shell{flex-direction:column}
+  .side{position:static;width:100%;height:auto;flex-direction:row;align-items:center;gap:2px;
+    padding:10px 12px;border-right:none;border-bottom:1px solid var(--border);overflow-x:auto}
+  .brand{padding:0 8px 0 0;white-space:nowrap}
+  .prismline,.side-controls,.side-foot{display:none}
+  .nav{display:flex;gap:2px}
+  .nav a{white-space:nowrap;padding:6px 9px}
+  main{padding:20px 14px 72px;max-width:100%}
+  .board{grid-template-columns:repeat(6,236px)}
+  .flow-grid{grid-template-columns:1fr}
+  .need{align-items:flex-start}
+}
+`;
+const PAGE_JS = `
+(function(){
+  // The decisions above, verbatim — one implementation, unit-tested in
+  // board.test.ts rather than only exercised through a browser.
+  ${keepIfStillOffered.toString()}
+  ${badgeText.toString()}
+  ${showFilterEmpty.toString()}
+  ${showGroup.toString()}
+  var root=document.documentElement;
+  var THEMES=['auto','light','dark'];
+  var THEME_LABEL={auto:'\\u25D0 Theme: Auto',light:'\\u2600 Theme: Light',dark:'\\u263E Theme: Dark'};
+  function getTheme(){try{return localStorage.getItem('prismatica-theme')||'auto';}catch(e){return 'auto';}}
+  function applyTheme(mode){
+    if(mode==='auto') root.removeAttribute('data-theme'); else root.setAttribute('data-theme',mode);
+    var b=document.getElementById('theme-toggle'); if(b) b.textContent=THEME_LABEL[mode];
+  }
+  var tb=document.getElementById('theme-toggle');
+  if(tb) tb.addEventListener('click',function(){
+    var next=THEMES[(THEMES.indexOf(getTheme())+1)%THEMES.length];
+    try{localStorage.setItem('prismatica-theme',next);}catch(e){}
+    applyTheme(next);
+  });
+  applyTheme(getTheme());
+
+  // Filters + confirm dialogs — rebound after each partial refresh.
+  //
+  // ONE filter, extended: the app selector governs every section that carries
+  // a data-app, and the work board's own tier/intent selectors narrow further
+  // within it. A second, section-specific filter would eventually disagree
+  // with this one about what "showing app X" means.
+  var SECTIONS=[
+    {id:'needs',sel:'#needs .need'},
+    {id:'work',sel:'#work .card'},
+    {id:'apps',sel:'#apps tr[data-app]'},
+    {id:'releases',sel:'#releases .release, #releases .intent'}
+  ];
+  function applyFilters(){
+    var app=document.getElementById('f-app'),tier=document.getElementById('f-tier'),intent=document.getElementById('f-intent');
+    var scope=app&&app.value?app.value:'';
+    document.querySelectorAll('[data-app]').forEach(function(el){
+      var show=!scope||el.dataset.app===scope;
+      // Work cards additionally answer to risk and intent.
+      if(show&&el.classList.contains('card')){
+        show=(!tier||!tier.value||el.dataset.tier===tier.value)
+          &&(!intent||!intent.value||el.dataset.intent===intent.value);
+      }
+      el.style.display=show?'':'none';
+    });
+    // A subhead must never outlive its own cards. It carries no data-app of
+    // its own (a group spans every app), so the loop above cannot reach it.
+    document.querySelectorAll('.rel-group').forEach(function(group){
+      var displays=[];
+      group.querySelectorAll('.release,.intent').forEach(function(el){ displays.push(el.style.display); });
+      group.style.display=showGroup(displays)?'':'none';
+    });
+    // Recount what is actually visible NOW, from the live DOM — never from a
+    // number the server rendered before any of this was hidden.
+    document.querySelectorAll('#work .col').forEach(function(col){
+      var visible=0;
+      col.querySelectorAll('.card').forEach(function(card){ if(card.style.display!=='none') visible++; });
+      var count=col.querySelector('.count'); if(count) count.textContent=String(visible);
+    });
+    SECTIONS.forEach(function(section){
+      var all=document.querySelectorAll(section.sel), visible=0;
+      all.forEach(function(el){ if(el.style.display!=='none') visible++; });
+      var badge=document.getElementById('badge-'+section.id);
+      if(badge){
+        if(badge.dataset.total===undefined) badge.dataset.total=badge.textContent;
+        badge.textContent=badgeText(scope,visible,badge.dataset.total);
+      }
+      var empty=document.getElementById('fe-'+section.id);
+      if(empty) empty.hidden=!showFilterEmpty(visible,all.length);
+    });
+    var status=document.getElementById('f-status');
+    document.querySelectorAll('.flow-card').forEach(function(card){
+      var show=!status||!status.value||card.dataset.status===status.value;
+      card.style.display=show?'':'none';
+    });
+  }
+  var CONFIRM_MSG={
+    reject:'Request changes on {q}?\\n\\nThis records a signed rejection and sends the change back to the builder.',
+    forget:'Remove {q} from the board?\\n\\nThis only forgets the pointer. The repo and its records are untouched.',
+    'flow-approve':'Approve the flow "{q}"?\\n\\nThis writes it as the app\\'s current truth (signed, if this app is governed).',
+    'flow-dismiss':'Dismiss this proposal for "{q}"?\\n\\nNothing changes — the current flow (if any) stays exactly as it is.',
+    'rules-approve':'Approve this rule?\\n\\n"{q}"\\n\\nThis writes it as one of the app\\'s current rules (signed, if this app is governed).',
+    'rules-dismiss':'Dismiss this rule proposal?\\n\\n"{q}"\\n\\nNothing changes.',
+    approve:'Approve {q}?\\n\\nThis signs a decision over its exact diff and writes it into the repo.'
+  };
+  function initMain(){
+    ['f-app','f-tier','f-intent','f-status'].forEach(function(id){
+      var el=document.getElementById(id); if(el) el.addEventListener('change',applyFilters);
+    });
+    document.querySelectorAll('form[data-confirm]').forEach(function(form){
+      form.addEventListener('submit',function(event){
+        var kind=form.getAttribute('data-confirm'), title=form.getAttribute('data-title')||'this change';
+        var q='\\u201C'+title+'\\u201D';
+        var msg=(CONFIRM_MSG[kind]||CONFIRM_MSG.approve).split('{q}').join(q);
+        if(!window.confirm(msg)) event.preventDefault();
+      });
+    });
+    onScroll();
+  }
+
+  // Sidebar highlight. A clicked tab is PINNED (stays lit) until you actually
+  // scroll — so it works even when the page is too short to scroll. Free
+  // scrolling then picks the section nearest the top; the bottom-snap for the
+  // last section only applies when the page is genuinely scrollable (otherwise a
+  // short/empty board, which always "sits at the bottom", would force Releases).
+  var navLinks=[].slice.call(document.querySelectorAll('.nav a[href^="#"]'));
+  var pinned=null;
+  function setActive(id){
+    navLinks.forEach(function(l){ l.classList.toggle('active', l.getAttribute('href')==='#'+id); });
+  }
+  function fromScroll(){
+    var sections=[].slice.call(document.querySelectorAll('main section[id]'));
+    if(!sections.length||!navLinks.length) return;
+    var y=window.scrollY+88, current=sections[0].id;
+    sections.forEach(function(s){ if(s.offsetTop<=y) current=s.id; });
+    var doc=document.documentElement;
+    var scrollable=doc.scrollHeight>window.innerHeight+8;
+    if(scrollable && window.innerHeight+window.scrollY>=doc.scrollHeight-4) current=sections[sections.length-1].id;
+    setActive(current);
+  }
+  function onScroll(){ if(pinned){ setActive(pinned); } else { fromScroll(); } }
+  window.addEventListener('scroll',onScroll,{passive:true});
+  window.addEventListener('resize',onScroll);
+  ['wheel','touchmove'].forEach(function(ev){ window.addEventListener(ev,function(){ pinned=null; },{passive:true}); });
+  window.addEventListener('keydown',function(e){
+    if(['ArrowUp','ArrowDown','PageUp','PageDown','Home','End',' '].indexOf(e.key)>-1) pinned=null;
+  });
+  navLinks.forEach(function(l){
+    l.addEventListener('click',function(){ pinned=l.getAttribute('href').slice(1); setActive(pinned); });
+  });
+
+  // Auto-refresh — swap only <main>, keeping the sidebar, scroll, and filters.
+  var timer=null;
+  function autoOn(){try{return localStorage.getItem('prismatica-autorefresh')==='1';}catch(e){return false;}}
+  async function refresh(){
+    try{
+      var keep={};['f-app','f-tier','f-intent'].forEach(function(id){var el=document.getElementById(id);if(el)keep[id]=el.value;});
+      var res=await fetch(location.pathname); var text=await res.text();
+      var doc=new DOMParser().parseFromString(text,'text/html'); var fresh=doc.querySelector('main');
+      if(fresh){
+        document.querySelector('main').replaceWith(fresh);
+        initMain();
+        Object.keys(keep).forEach(function(id){
+          var el=document.getElementById(id); if(!el) return;
+          // Restore the selection ONLY if the replacement still offers it: an
+          // app the owner removed (or a filter value no longer present) would
+          // otherwise leave the select showing a value it does not have, and
+          // every section filtered to nothing with no way back.
+          var offered=Array.prototype.map.call(el.options,function(o){return o.value;});
+          el.value=keepIfStillOffered(offered,keep[id]);
+        });
+        // Recount against the REPLACEMENT DOM, not the one that was measured
+        // before the swap.
+        applyFilters();
+      }
+      var f=document.getElementById('updated-at'); if(f) f.textContent='updated '+new Date().toTimeString().slice(0,8);
+    }catch(e){}
+  }
+  function setAuto(on){
+    try{localStorage.setItem('prismatica-autorefresh',on?'1':'0');}catch(e){}
+    var cb=document.getElementById('autorefresh'); if(cb) cb.checked=on;
+    if(timer){clearInterval(timer);timer=null;}
+    if(on) timer=setInterval(refresh,10000);
+  }
+  var cb=document.getElementById('autorefresh');
+  if(cb){ cb.addEventListener('change',function(){setAuto(cb.checked);}); setAuto(autoOn()); }
+
+  initMain();
+})();
+`;
+const THEME_BOOT = `(function(){try{var t=localStorage.getItem('prismatica-theme');if(t&&t!=='auto')document.documentElement.setAttribute('data-theme',t);}catch(e){}})();`;
+function sideNav(model, active) {
+    // `section` gives the filter a stable handle: the sidebar is NOT replaced by
+    // the auto-refresh, so these are updated in place rather than re-rendered.
+    const badge = (count, hot = false, section) => `<span class="badge${hot && count > 0 ? ' hot' : ''}"${section ? ` id="badge-${section}"` : ''}>${count}</span>`;
+    if (!model) {
+        return `<aside class="side">
+      <div class="brand"><span class="gem">◆</span> Prismatica</div>
+      <div class="prismline"></div>
+      <nav class="nav" aria-label="Sections"><a href="/">← Back to the board</a></nav>
+      <div class="side-controls"><button id="theme-toggle" class="ctl-btn" type="button">◐ Theme: Auto</button></div>
+      <div class="side-foot">local only (127.0.0.1)</div>
+    </aside>`;
+    }
+    const needsYouTotal = model.needsYou.length + model.understandPending;
+    const needsYouTitle = model.understandPending > 0
+        ? `${model.needsYou.length} decision(s) here, plus ${model.understandPending} Flow/Rule proposal(s) to review in Understand`
+        : '';
+    return `<aside class="side">
+    <div class="brand"><span class="gem">◆</span> Prismatica</div>
+    <div class="prismline" title="white light in, six states out: planned · being built · being proven · waiting on you · shipping · live"></div>
+    <nav class="nav" aria-label="Sections">
+      <!--
+        No "Start" link. Starting a change begins in the owner's coding agent,
+        not on this page, and the guidance for it is an empty state that only
+        appears when nothing is in flight — so a permanent nav entry would
+        point at a section that is usually not there. The sidebar is also NOT
+        replaced by the auto-refresh, so a conditional link would go stale the
+        moment the first change appeared. Every entry below is a real
+        destination that is always present.
+      -->
+      <a href="${active === 'understand' ? '/#needs' : '#needs'}" title="${escapeHtml(needsYouTitle)}"><span class="n-dot"></span>Needs you ${badge(needsYouTotal, true, 'needs')}</a>
+      <a href="${active === 'understand' ? '/#work' : '#work'}"><span class="n-dot"></span>Work ${badge(model.cards.length, false, 'work')}</a>
+      <a href="${active === 'understand' ? '/#apps' : '#apps'}"><span class="n-dot"></span>Apps ${badge(model.apps.length, false, 'apps')}</a>
+      <a href="${active === 'understand' ? '/#releases' : '#releases'}"><span class="n-dot"></span>Releases ${badge(model.releases.length + model.pendingVerification.length + model.legacyReleases.length, false, 'releases')}</a>
+      <a href="/understand" class="${active === 'understand' ? 'active' : ''}" title="what each app does, in plain language — Flows and Rules"><span class="n-dot"></span>Understand ${badge(model.understandPending, true)}</a>
+    </nav>
+    <div class="side-controls">
+      <button id="theme-toggle" class="ctl-btn" type="button" title="Switch theme (Auto follows your system)">◐ Theme: Auto</button>
+      <label class="ctl-toggle"><input type="checkbox" id="autorefresh"> Auto-refresh (10s)</label>
+    </div>
+    <div class="side-foot">${model.repos} repo${model.repos === 1 ? '' : 's'} · read at ${escapeHtml(model.generatedAt.slice(11, 19))} UTC<br><span id="updated-at"></span><br><a href="/">Refresh</a> · local only (127.0.0.1)</div>
+  </aside>`;
+}
+export function pageShell(title, main, model, active) {
+    return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<meta name="color-scheme" content="light dark">
+<title>${escapeHtml(title)}</title>
+<script>${THEME_BOOT}</script>
+<style>${CSS}</style>
+</head>
+<body>
+<div class="shell">
+${sideNav(model, active)}
+<main>
+${main}
+</main>
+</div>
+<script>${PAGE_JS}</script>
+</body>
+</html>`;
+}
+/**
+ * "Start a change" — an EMPTY STATE, not a permanent section.
+ *
+ * It renders only when nothing is in flight, and that condition is the whole
+ * design. Guidance that never changes, sitting above "Needs you" on every
+ * visit, is chrome: it costs the owner vertical space ahead of the one section
+ * that actually wants a decision from them, and after the first change they
+ * already know how to start another. When there IS no work, the same block is
+ * the most useful thing on the page. So it appears exactly when it helps and
+ * gets out of the way otherwise, and the sidebar carries no "Start" link at all
+ * — every remaining nav entry is a real, badge-bearing destination.
+ *
+ * It describes ONE step the owner takes, and it is not a command. Starting a
+ * change begins in the coding agent: the owner activates Prismatica Start,
+ * settles the plan in conversation, and the skill hands back one
+ * `prismatica start --import …` line. `prismatica context start` is the
+ * machine-facing half the skill runs for itself, so showing it here would be
+ * teaching an owner to do by hand what a skill already does — and it takes no
+ * argument, so a copyable form of it says nothing anyway.
+ *
+ * The board stays read-mostly: no route, no POST target, no form, so the
+ * existing same-origin/CSRF guards still cover the entire write surface.
+ */
+function renderStartAction(model) {
+    if (model.cards.length > 0) {
+        return '';
+    }
+    const importCommand = 'prismatica start --import &lt;proposal.json&gt;';
+    return `<section id="start">
+  <div class="sec-head"><h2>Start a change</h2><span class="sec-sub" title="your agent proposes; you see the whole plan and the issue text before anything exists">nothing is in flight — here is how one begins</span></div>
+  <div class="empty">
+    <p class="empty-title">Open your coding agent and use Prismatica Start.</p>
+    <p class="empty-sub">Describe what you need and settle the plan with it. When you are both ready it hands you one command to run in your own terminal:</p>
+    <pre class="cmd"><code>${importCommand}</code></pre>
+    <p class="empty-sub">Nothing is created until you have reviewed the complete plan and the exact GitHub issue, and said yes.</p>
+  </div>
+</section>`;
+}
+export function renderBoardPage(model) {
+    const main = `
+${renderAppScope(model)}
+${renderStartAction(model)}
+<section id="needs">
+  <div class="sec-head"><h2>Needs you</h2><span class="sec-sub" title="everything waiting on the owner, across every app">decisions only you can make</span></div>
+  ${renderNeedsYou(model.needsYou)}
+</section>
+<section id="work">
+  <div class="sec-head"><h2>Work</h2><span class="sec-sub" title="cards move only when records change — never by hand">every in-flight change, straight from the records</span></div>
+  ${renderWork(model.cards)}
+</section>
+<section id="apps">
+  <div class="sec-head"><h2>Apps</h2><span class="sec-sub">one row per adopted repo</span></div>
+  ${renderApps(model.apps)}
+  ${filterEmpty('apps')}
+</section>
+<section id="releases">
+  <div class="sec-head"><h2>Releases</h2><span class="sec-sub" title="verified, pending and legacy release records">verified releases, pending verification and legacy records</span></div>
+  ${renderReleases(model.releases, model.pendingVerification, model.legacyReleases, model.intents)}
+</section>`;
+    return pageShell('Prismatica — board', main, model);
+}
+export function renderRecordPage(title, content) {
+    const main = `
+<section>
+  <div class="sec-head"><h2>${escapeHtml(title)}</h2></div>
+  <p style="margin-bottom:12px"><a class="back" href="/">← Back to the board</a></p>
+  <pre class="record">${escapeHtml(content)}</pre>
+</section>`;
+    return pageShell(`Prismatica — ${title}`, main, null);
+}
+export function renderMessagePage(heading, message, back) {
+    const main = `
+<section>
+  <div class="sec-head"><h2>${escapeHtml(heading)}</h2></div>
+  <p class="msg">${escapeHtml(message)}</p>
+  <p style="margin-top:14px"><a class="back" href="${escapeHtml(back?.href ?? '/')}">${escapeHtml(back?.label ?? '← Back to the board')}</a></p>
+</section>`;
+    return pageShell(`Prismatica — ${heading}`, main, null);
+}
+export function renderUnderstandPage(model) {
+    return pageShell('Prismatica — Understand', renderUnderstandPicker(model), model, 'understand');
+}
+export function renderFlowMapPage(model, entry) {
+    return pageShell(`Prismatica — ${entry.app} — Understand`, renderFlowMap(entry.repo, entry), model, 'understand');
+}
+export function renderStoryboardPage(model, repo, detail) {
+    return pageShell(`Prismatica — ${detail.truth.goal}`, renderStoryboard(repo, detail), model, 'understand');
+}
+//# sourceMappingURL=html.js.map