diff --git a/docs/adr/0028-dashboard-client-local-state-simplification.md b/docs/adr/0028-dashboard-client-local-state-simplification.md new file mode 100644 index 0000000..35e9c4f --- /dev/null +++ b/docs/adr/0028-dashboard-client-local-state-simplification.md @@ -0,0 +1,84 @@ +# 0028. Dashboard client: local state by default — plain useState, no store, zero runtime deps + +- Status: Accepted +- Date: 2026-07-12 +- Extends: [0025](0025-dashboard-v4-preact-client-render.md) and + [0027](0027-dashboard-root-only-shell-client-strip.md) — both stand in full. This ADR refines only + the client's INTERNAL state architecture; nothing about the Preact reconciler, the + view_model/props serde JSON contract, the built-from-source bundle, zero-egress, or the + server-derived honesty tokens changes. +- Reaffirms: [0016](0016-severity-vs-urgency.md) — presentation is a view, never a gate; and the + honesty axes of [0019](0019-dashboard-v3-presentation-architecture.md)/0025/0027 (blind ≠ green). + +## Context + +The v4 client (ADR-0025/0027) shipped with a hand-rolled observable **store** (`store.js`) holding +the whole client state — active tab, last-good snapshot, connection status, AND every expanded +finding row / open disclosure, the last two mirrored to `sessionStorage` so they survived a soft +reload. Two mechanisms grew on top of it: a keyed-reconcile **tombstone** (`reconcile.js`) that held +a gone-while-open finding on screen for one render as a calm farewell row, and a `purge` step to trim +the persisted id sets after a tombstone cleared. + +That is more machinery than the job needs. Preact already keys rows on `finding.id` and diffs them; +a native `
` already owns its own open state; a component's own expansion is exactly what +`useState` is for. The store centralised state that wants to be **local**, the sessionStorage +persistence imposed a constraint (open rows survive a reload) the product never actually required, +and the tombstone re-implemented, by hand, a lifecycle the framework's keyed diff performs for free. +Meanwhile the client carried two npm `dependencies` (`preact`, `esbuild-wasm`) as if they were +runtime deps, when the running engine `include_str!`s a compiled bundle and installs nothing. + +## Decision + +Simplify the client to **local state by default**, plain `useState`/`useEffect` only — no reducer, +no Context, no signals, no new dependency. + +- **`App` owns the only shared state**, each field a plain `useState`: `activeTab`, `data` (the + last-good snapshot), `strip` (global posture — its OWN state, decoupled from `data`), `status` + (`first-load` | `live` | `stale`), and `lastGoodAt`. The store (`store.js`) is deleted. The status + transitions are small updaters: a snapshot goes live + resets the freshness clock + persists the + strip (keeping the last if a snapshot omits it — JEF-410); stale never fires before the first + snapshot; a tab swap nulls `data` but never touches `strip`. +- **The poll is decoupled to callbacks** (`poll.js` takes `{ tab, onSnapshot, onStale, liveRegion, + … }`), so it feeds `App`'s `useState` updaters directly with no store dependency. **The JEF-408 + fix is retained verbatim**: the default interval is `(ms, fn) => setInterval(fn, ms)` (a + function-first handler, never a number coerced to a string and eval'd), the synchronous first + `tick()`, the stale-on-failure paths, and the mid-selection defer guard all stand. The `App` poll + effect keys on `[activeTab]` so a swap restarts it — an immediate refetch. +- **Expansion / disclosure is LOCAL and ephemeral.** A finding row's expansion is a `useState` in + the row; every "show model prompt" / node-breakdown / judgement disclosure is a **native, + uncontrolled `
`**; the Admission signing-row expander is a `useState` per row. None is + persisted. Preact's keyed diff keeps an open row open across a poll for free; the sessionStorage + persistence (open rows survive a reload) is **dropped** — an unnecessary constraint. +- **Keyed removal replaces the tombstone.** A finding that vanishes from a snapshot is removed by + Preact's keyed diff (`key={f.id}`). `reconcile.js` and the client tombstone are deleted, with **no + client replacement** — a future "recently cleared" cue must be **server-shipped** (the honest + cleared-count already carries the signal). +- **Zero runtime npm deps.** `preact` and `esbuild-wasm` move to `devDependencies` (both are + build/test-only — the bundle is compiled and `include_str!`'d, the running engine installs + nothing). The unused `@vitest/mocker` (transitive) and top-level `vite` pin are dropped; + `jsdom` + `@testing-library/preact` + `vitest` stay. The lockfile is regenerated so `npm ci` and + the supply-chain guard match. + +## Consequences + +Easier: + +- One obvious place for shared state (`App`) and the framework's own defaults everywhere else — less + bespoke machinery to read, test, or get wrong. `store.js` + `reconcile.js` (and their tests) are + gone; the views are pure `view`-only renders. +- The honesty contract is untouched and re-pinned: `StatusStrip`/`FindingsEmpty` still render SERVER + tokens (green iff `strip["all-clear"]`), the strip is server-derived, and `strip.test.jsx` + + `honesty.test.jsx` pass unchanged. The client still derives no honesty. +- The dependency surface is honest: the running engine has zero runtime npm deps; the build/test + deps are clearly marked as such. + +Harder / accepted: + +- **Open rows don't survive a reload.** With the sessionStorage persistence dropped, a soft reload + collapses expanded rows and disclosures. Accepted: expansion is an ephemeral read-affordance, not + state worth persisting, and a reload is a deliberate act; the honesty-critical strip is unaffected. +- **A cleared finding disappears without a farewell.** Removing the tombstone means a gone finding + simply drops from the table with no on-screen "this cleared" cue. Accepted as HONEST — the row is + no longer a live proven path, and the strip's cleared-count carries the fact. A gentler + "recently cleared" affordance, if wanted, is a server-shipped concern (the client derives nothing), + not a client-held tombstone. diff --git a/docs/adr/README.md b/docs/adr/README.md index 2397930..26b1a5c 100644 --- a/docs/adr/README.md +++ b/docs/adr/README.md @@ -35,5 +35,6 @@ Copy [`0000-template.md`](0000-template.md) to start one. | [0025](0025-dashboard-v4-preact-client-render.md) | Dashboard v4: a bundled Preact client reconciling from same-origin read-only JSON — supersedes 0019's maud server-render *mechanism* (its IA + honesty axes survive); view_model/props retained as the serde JSON contract, bundle built-from-source + gitignored, honesty stays server-derived | Accepted (its server-rendered strip/nav superseded in part by 0027 — the body is now root-only) | | [0026](0026-adjudication-judge-qwen3-1.7b.md) | Promote qwen3:1.7b as the adjudication judge (bakeoff: 12/12, the only clean sweep of all three evidence types + every refute; deployed qwen2.5:3b-instruct is 11/12, misses exposed-secret-in-field) — pending Pi latency/RAM validation, strict-JSON on-Pi, the delta-aware prompt path, and in-cluster zero-egress availability | Proposed | | [0027](0027-dashboard-root-only-shell-client-strip.md) | Dashboard: the server emits a ROOT-ONLY shell (`` + `#dash-root`); the status strip + tab nav move to the Preact client — supersedes 0025's server-rendered strip/nav. Honesty preserved (blank ≠ green; the all-clear/watching/`judging-state` tokens stay server-derived). Also fixes the reversed-args `setInterval` bug (dead poll + blank tab-swaps + CSP eval violation) with the CSP kept strict; SSR/hydration deferred | Accepted | +| [0028](0028-dashboard-client-local-state-simplification.md) | Dashboard client: local state by default — `App` holds the 5 shared fields (+ the callback-decoupled poll) as plain `useState`, the hand-rolled store + reconcile tombstone are deleted, expansion/disclosure is local & ephemeral (native `
`; sessionStorage persistence dropped), keyed removal replaces the tombstone (a future cleared-cue is server-shipped), and the npm deps prune to build+test only (zero runtime). Extends 0025/0027 (both stand); the JEF-408 poll/CSP fix + JEF-410 strip persistence + server-derived honesty are retained | Accepted | See also [`../VISION.md`](../VISION.md) for the longer-form narrative this ADR realizes. diff --git a/engine/web/package-lock.json b/engine/web/package-lock.json index 923eacf..ee9e462 100644 --- a/engine/web/package-lock.json +++ b/engine/web/package-lock.json @@ -8,15 +8,11 @@ "name": "protector-dashboard", "version": "0.0.0", "license": "UNLICENSED", - "dependencies": { - "esbuild-wasm": "0.25.10", - "preact": "10.29.7" - }, "devDependencies": { "@testing-library/preact": "^3.2.4", - "@vitest/mocker": "^3.2.6", + "esbuild-wasm": "0.25.10", "jsdom": "^25.0.1", - "vite": "^6.4.3", + "preact": "10.29.7", "vitest": "^3.2.6" } }, @@ -1771,6 +1767,7 @@ "version": "0.25.10", "resolved": "https://registry.npmjs.org/esbuild-wasm/-/esbuild-wasm-0.25.10.tgz", "integrity": "sha512-IyyfrTA2iiOh/uhlaJj0aUDgW42lFhr29ZeKouVNOz/8mLyuqWbEuVst+B4RBH18pb3AcOHnaOgyskAbsVOe3A==", + "dev": true, "license": "MIT", "bin": { "esbuild": "bin/esbuild" @@ -2641,6 +2638,7 @@ "version": "10.29.7", "resolved": "https://registry.npmjs.org/preact/-/preact-10.29.7.tgz", "integrity": "sha512-DCHYrK/B10yUD3ZjLfhZ3WIE/9Vf9VFUODcRE2dRomTYDpJk6z6L9wecSfhfE6M9ZTHUdyQkoC46arIDhEV84Q==", + "dev": true, "license": "MIT", "funding": { "type": "opencollective", diff --git a/engine/web/package.json b/engine/web/package.json index 718e0a9..b0989e1 100644 --- a/engine/web/package.json +++ b/engine/web/package.json @@ -9,15 +9,11 @@ "build": "node build.mjs", "test": "vitest run" }, - "dependencies": { - "esbuild-wasm": "0.25.10", - "preact": "10.29.7" - }, "devDependencies": { "@testing-library/preact": "^3.2.4", - "@vitest/mocker": "^3.2.6", + "esbuild-wasm": "0.25.10", "jsdom": "^25.0.1", - "vite": "^6.4.3", + "preact": "10.29.7", "vitest": "^3.2.6" } } diff --git a/engine/web/src/action/judgement.jsx b/engine/web/src/action/judgement.jsx index 2376717..81edce7 100644 --- a/engine/web/src/action/judgement.jsx +++ b/engine/web/src/action/judgement.jsx @@ -1,31 +1,22 @@ -// One judgement in the Action tab's judgement-audit section (ADR-0025 / JEF-400) — a 1:1 Preact -// port of maud `judgement_entry`: a native `
` disclosure whose summary is the entry + -// objectives, opening to the verbatim prompt and reply. Honest when the prompt (the pre-filter +// One judgement in the Action tab's judgement-audit section (ADR-0025 / JEF-400 / JEF-411) — a 1:1 +// Preact port of maud `judgement_entry`: a native `
` disclosure whose summary is the entry +// + objectives, opening to the verbatim prompt and reply. Honest when the prompt (the pre-filter // decided) or reply (the model timed out) is absent. // -// The disclosure's open state is KEYED COMPONENT STATE (persisted in the store under -// `action:judgement-`) so an operator reading a long prompt keeps it open across a poll — the -// same survives-reconcile guarantee the Findings "show model prompt" disclosure has. The prompt / -// reply / verdict are UNTRUSTED third-party text, rendered as JSX text (Preact auto-escapes). +// The disclosure is NATIVE and UNCONTROLLED (JEF-411): the DOM owns its open state, so an operator +// reading a long prompt keeps it open across a poll (Preact's keyed diff never disturbs it) with no +// client bookkeeping. The prompt / reply / verdict are UNTRUSTED third-party text, rendered as JSX +// text (Preact auto-escapes). /** * @param {object} props - * @param {number} props.i the judgement's index (the disclosure's stable key seed, matching the - * maud `judgement-{i}`). * @param {any} props.j the judgement props (serde kebab-case). - * @param {import("../store.js").Store} props.store the client store (disclosure open state). */ -export function JudgementEntry({ i, j, store }) { - const key = `action:judgement-${i}`; - const open = store.isDisclosureOpen(key); +export function JudgementEntry({ j }) { return (
  • -
    store.setDisclosureOpen(key, e.currentTarget.open)} - > - +
    + {j.entry} {" \u{00B7} reaches "} diff --git a/engine/web/src/action/view.jsx b/engine/web/src/action/view.jsx index db9b81c..699d0a6 100644 --- a/engine/web/src/action/view.jsx +++ b/engine/web/src/action/view.jsx @@ -7,24 +7,23 @@ // Reconcile keying (the only per-view variation): each row keys on its stable anchor — a would-act // / left-alone entry on its `entry` key, a reversion on `(cut, age)`, a judgement on its `entry` // (paired with index for stability). Preact patches each row in place across a poll, and the -// judgement `
    ` open state is KEYED COMPONENT STATE (persisted in the store) so an operator -// reading a prompt keeps it open. Every untrusted string (entry / verdict / cut / reason / prompt / -// reply) renders via JSX text interpolation (Preact auto-escapes). +// judgement `
    ` is a NATIVE, UNCONTROLLED disclosure (JEF-411) so an operator reading a +// prompt keeps it open (the DOM owns the state). Every untrusted string (entry / verdict / cut / +// reason / prompt / reply) renders via JSX text interpolation (Preact auto-escapes). import { JudgementEntry } from "./judgement.jsx"; /** * @param {object} props * @param {any} props.view the Action view props (serde kebab-case). - * @param {import("../store.js").Store} props.store the client store (disclosure state). */ -export function ActionView({ view, store }) { +export function ActionView({ view }) { return (
    - +
    ); } @@ -250,7 +249,7 @@ function LeftAloneEntry({ l }) { /** Section 3 — Judgement audit (model debug): the verbatim prompt/reply per model call, as * collapsed disclosures. Honest about an absent prompt/reply. */ -function JudgementAudit({ v, store }) { +function JudgementAudit({ v }) { const judgements = Array.isArray(v.judgements) ? v.judgements : []; return (
    @@ -267,7 +266,7 @@ function JudgementAudit({ v, store }) { ) : (
      {judgements.map((j, i) => ( - + ))}
    )} diff --git a/engine/web/src/admission/signing.jsx b/engine/web/src/admission/signing.jsx index 7fa3e5f..1c72326 100644 --- a/engine/web/src/admission/signing.jsx +++ b/engine/web/src/admission/signing.jsx @@ -6,12 +6,14 @@ // cell is always a definite continuity verdict (would-admit / would-block / uncertain). // // Reconcile keying: image + regression/exception/provenance-change rows key on their server-supplied -// `dom-id`, and each row's expand-in-place detail is a store-persisted disclosure keyed on -// `admission:` (survives a poll, like the Findings row expansion). Every untrusted string -// (image ref / signer identity / issuer / builder / source) renders via JSX text (Preact -// auto-escapes; the raw-HTML escape hatch is banned by the guard). The `data-*` tokens are fixed -// `[a-z0-9-]`, never derived from untrusted text. +// `dom-id`, and each row's expand-in-place detail is a button-driven expander backed by LOCAL +// component state (a plain `useState` per row — JEF-411), ephemeral by design. Preact's keyed diff +// keeps the open row open across a poll (the boring default). Every untrusted string (image ref / +// signer identity / issuer / builder / source) renders via JSX text (Preact auto-escapes; the +// raw-HTML escape hatch is banned by the guard). The `data-*` tokens are fixed `[a-z0-9-]`, never +// derived from untrusted text. +import { useState } from "preact/hooks"; import { posture, provenance, @@ -32,9 +34,8 @@ const COLSPAN = 7; /** * @param {object} props * @param {any[]} props.signing the per-repo signing inventory (serde kebab-case). - * @param {import("../store.js").Store} props.store the client store (row expansion state). */ -export function SigningInventory({ signing, store }) { +export function SigningInventory({ signing }) { const repos = Array.isArray(signing) ? signing : []; return (
    @@ -75,7 +76,7 @@ export function SigningInventory({ signing, store }) { {repos.map((g) => ( - + ))} @@ -86,7 +87,7 @@ export function SigningInventory({ signing, store }) { /** One repo group: a spanning group-header row, then (when present) the loud regression / calm * exception / loud provenance-change rows, then the repo's image rows. */ -function SigningGroup({ g, store }) { +function SigningGroup({ g }) { const images = Array.isArray(g.images) ? g.images : []; return ( <> @@ -95,25 +96,21 @@ function SigningGroup({ g, store }) { {g.repo} - {g.regression ? : null} - {g.exception ? : null} - {g["provenance-change"] ? ( - - ) : null} + {g.regression ? : null} + {g.exception ? : null} + {g["provenance-change"] ? : null} {images.map((img) => ( - + ))} ); } -/** A row expander button + the paired detail row's open state, wired to the store disclosure keyed - * on `admission:`. Returns `{ domId, detailId, open, setOpen, expander }`. */ -function useRowDisclosure(domId, store, label) { - const key = `admission:${domId}`; +/** A row expander button + the paired detail row's open state, backed by LOCAL component state (a + * plain `useState` — JEF-411, ephemeral by design). Returns `{ detailId, open, expander }`. */ +function useRowDisclosure(domId, label) { const detailId = `detail-${domId}`; - const open = store.isDisclosureOpen(key); - const setOpen = () => store.setDisclosureOpen(key, !open); + const [open, setOpen] = useState(false); const expander = (
    @@ -51,7 +50,7 @@ export function ReadinessView({ view, store }) { /** One coverage row. An absent/degraded WEAKENING input gets the amber keyline (`cov-row-gap`) and * reads its enablement instruction as an action ("enable with …"). */ -function CoverageRow({ r, store }) { +function CoverageRow({ r }) { const present = r.state === "present"; const weakGap = r["weakens-decisions"] === true; const isGap = weakGap && !present; @@ -76,7 +75,7 @@ function CoverageRow({ r, store }) {

    {r.detail}

    {r.why}

    - {nodes.length > 0 ? : null} + {nodes.length > 0 ? : null} {hasEnable ? (

    {isGap ? "enable with" : "configured via"}{" "} diff --git a/engine/web/src/reconcile.js b/engine/web/src/reconcile.js deleted file mode 100644 index 082d9d7..0000000 --- a/engine/web/src/reconcile.js +++ /dev/null @@ -1,78 +0,0 @@ -// The Findings keyed-reconcile engine (ADR-0025 / JEF-397). The heart of the rewrite: instead of -// the v3 innerHTML swap that destroyed focus, `

    ` state, and scroll every poll, we key -// each row on its STABLE `finding.id` and let Preact patch only what changed — so a present-in- -// both row keeps its exact DOM (focus, open disclosures, selection) untouched. -// -// This module owns only the part Preact's keyed diff does NOT do for us: the GONE-WHILE-OPEN -// TOMBSTONE. When a finding the operator had expanded (or was focused inside) disappears from the -// new snapshot, snapping it out from under them is dishonest and jarring — so we hold a single -// calm tombstone render ("this finding cleared — the model no longer sees this path") keyed on the -// same id, then drop it. A gone finding that was NOT expanded/focused is hard-removed silently. -// -// `computeRows` is a PURE function (snapshot + prior render + interaction state → next render list) -// so it is trivially unit-testable offline — the reconcile logic is where a bug would silently wipe -// operator state, so it is tested without a browser. - -/** - * @typedef {{ id: string }} Finding a finding row (only `id` matters to the reconciler). - * @typedef {{ finding: Finding, tombstone: boolean }} Row a row to render: either a live finding - * or a one-shot tombstone standing in for a just-gone finding. - */ - -/** - * Compute the next Findings render list from the incoming snapshot, the previously-rendered ids, - * and the ids the operator currently cares about (expanded and/or focused). Pure — no DOM, no - * store — so it is unit-tested directly. - * - * Rules (ADR-0025 / JEF-397): - * - Present in the new snapshot → rendered as a live row (Preact keys on `finding.id`, so its DOM - * — focus, open `
    `, selection — is preserved in place; a NEW id is simply inserted at - * its already-sorted position and must not steal focus, which the keyed diff guarantees). - * - Gone from the snapshot AND it was expanded/focused → emit a single tombstone row (keyed on the - * same id) exactly ONCE, then never again. The caller purges the id after this render. - * - Gone and NOT expanded/focused → dropped silently (no tombstone). - * - * The snapshot's order is authoritative (the server already sorts by urgency); tombstones are - * appended at the end so a clearing row doesn't shove the live list around. - * - * @param {Finding[]} incoming the new snapshot's findings, in server (urgency) order. - * @param {Set} priorIds the finding ids present in the PREVIOUS render (to detect gone ones). - * @param {Set} keptOpenIds ids the operator is invested in (expanded ∪ focused) — the set - * that earns a gone finding a tombstone instead of a silent drop. - * @param {Set} priorTombstoneIds ids already shown as a tombstone last render — so a - * tombstone lasts exactly one render and never loops. - * @returns {{ rows: Row[], tombstonedNow: Set }} the render list and the ids newly - * tombstoned THIS render (the caller drops+purges them next tick). - */ -export function computeRows(incoming, priorIds, keptOpenIds, priorTombstoneIds) { - /** @type {Row[]} */ - const rows = []; - const presentIds = new Set(); - - for (const finding of incoming) { - presentIds.add(finding.id); - rows.push({ finding, tombstone: false }); - } - - /** @type {Set} */ - const tombstonedNow = new Set(); - for (const id of priorIds) { - if (presentIds.has(id)) continue; // still present — Preact keeps it in place. - if (priorTombstoneIds.has(id)) continue; // already had its one tombstone render — drop it now. - if (!keptOpenIds.has(id)) continue; // gone but unopened — silent hard-remove. - // Gone while the operator was invested in it: one calm tombstone render, keyed on the same id. - rows.push({ finding: { id }, tombstone: true }); - tombstonedNow.add(id); - } - - return { rows, tombstonedNow }; -} - -/** - * The set of finding ids currently present in a snapshot — the `priorIds` for the NEXT reconcile. - * @param {Finding[]} findings - * @returns {Set} - */ -export function idsOf(findings) { - return new Set(findings.map((f) => f.id)); -} diff --git a/engine/web/src/store.js b/engine/web/src/store.js deleted file mode 100644 index 643073d..0000000 --- a/engine/web/src/store.js +++ /dev/null @@ -1,230 +0,0 @@ -// The dashboard v4 client store (ADR-0025 / JEF-397): one small, framework-agnostic state -// container keyed by STABLE domain id. It holds the client's whole view state — the active tab -// (mirrors `?tab=`), which finding rows and which "show model prompt" disclosures are open, the -// last-good snapshot, and the connection status/freshness — and notifies subscribers on change. -// -// The client performs ZERO honesty derivation (ADR-0025): the store carries the server's snapshot -// verbatim and never recomputes "is this green?". Honesty tokens (`all-clear`, per-row `posture`) -// come decided in the JSON and are only DISPLAYED. -// -// Expansion/disclosure sets are seeded from — and written back to — the SAME sessionStorage keys -// the v3 client used (`protector.expanded` / `protector.prompts`), so an operator's open rows -// survive a soft reload and the migration from maud is invisible to them. - -/** @typedef {"first-load" | "live" | "stale"} Status */ - -/** The sessionStorage key for the set of expanded finding-row ids (kept from v3). */ -export const EXPANDED_KEY = "protector.expanded"; -/** The sessionStorage key for the set of open "show model prompt" disclosure ids (kept from v3). */ -export const PROMPT_KEY = "protector.prompts"; -/** - * The sessionStorage key for the set of open *secondary-view* disclosure keys (JEF-400): the - * Readiness per-node `
    `, the Action judgement-audit `
    `, and the Admission - * signing-inventory row expansions. A single flat set keyed by each disclosure's stable, - * view-scoped key (`readiness:runtime-corroboration`, `admission:`, …) so an operator's - * open disclosures survive a poll AND a soft reload, exactly like the Findings rows do. - */ -export const DISCLOSURE_KEY = "protector.disclosures"; - -/** - * A sessionStorage-backed Set of ids: survives a soft reload (not a new session). Tolerates a - * disabled/failing sessionStorage by degrading to an in-memory Set — the store never throws. - * @param {string} key - * @returns {Set} - */ -export function loadSet(key) { - try { - const raw = sessionStorage.getItem(key); - return new Set(raw ? JSON.parse(raw) : []); - } catch { - return new Set(); - } -} - -/** - * @param {string} key - * @param {Set} set - */ -function saveSet(key, set) { - try { - sessionStorage.setItem(key, JSON.stringify([...set])); - } catch { - /* sessionStorage unavailable — the in-memory Set is still authoritative this session. */ - } -} - -/** - * The client store. A minimal observable: `getState()` reads a plain snapshot, `subscribe()` - * registers a listener, and the mutators below are the ONLY way to change state (each notifies). - * There is no reducer ceremony — the surface is small on purpose (ADR-0025 file-size discipline). - */ -export class Store { - /** - * @param {{ activeTab?: string }} [seed] the server-known active tab (from `data-tab`), so the - * first paint's tab matches the document without waiting for a fetch. - */ - constructor(seed = {}) { - /** @type {Set<() => void>} */ - this.listeners = new Set(); - /** @type {{ activeTab: string, expandedRows: Set, openPrompts: Set, - * data: unknown, strip: unknown, status: Status, lastGoodAt: number | null }} */ - this.state = { - activeTab: seed.activeTab || "findings", - expandedRows: loadSet(EXPANDED_KEY), - openPrompts: loadSet(PROMPT_KEY), - disclosures: loadSet(DISCLOSURE_KEY), - data: null, - // The persistent status strip (global cluster posture), decoupled from the per-tab `data` - // so a tab-swap (which nulls `data`) never tears the header down. Updated on every snapshot; - // held across swaps. Null before the first snapshot (blank is honest — absent is never green). - strip: null, - status: "first-load", - lastGoodAt: null, - }; - } - - /** A read-only snapshot of the current state. */ - getState() { - return this.state; - } - - /** - * Register a listener; returns an unsubscribe fn. - * @param {() => void} fn - */ - subscribe(fn) { - this.listeners.add(fn); - return () => this.listeners.delete(fn); - } - - /** @private */ - emit() { - for (const fn of this.listeners) fn(); - } - - /** - * Record a successful snapshot: the view goes LIVE and the freshness clock resets. This never - * touches expansion/disclosure state — a poll must not collapse what the operator opened. - * @param {unknown} data - */ - applySnapshot(data) { - // Refresh the persistent strip from this snapshot's global posture (present in every tab's - // payload). Keep the last strip if a snapshot somehow omits it, so the header never blanks. - const strip = data && data.strip ? data.strip : this.state.strip; - this.state = { ...this.state, data, strip, status: "live", lastGoodAt: Date.now() }; - this.emit(); - } - - /** - * Mark the connection stale: keep showing the last-good snapshot (never blank, never a false - * all-clear) but tell the operator we are not updating. No-op before the first snapshot lands — - * "first-load" (connecting…) is the honest state then, not "stale". - */ - markStale() { - if (this.state.status === "first-load") return; - if (this.state.status === "stale") return; - this.state = { ...this.state, status: "stale" }; - this.emit(); - } - - /** Whether a finding row is currently expanded. @param {string} id */ - isExpanded(id) { - return this.state.expandedRows.has(id); - } - - /** - * Toggle a finding row's expansion, persisting to sessionStorage (v3-compatible key). - * @param {string} id - */ - toggleRow(id) { - const next = new Set(this.state.expandedRows); - if (next.has(id)) next.delete(id); - else next.add(id); - saveSet(EXPANDED_KEY, next); - this.state = { ...this.state, expandedRows: next }; - this.emit(); - } - - /** Whether a "show model prompt" disclosure is open. @param {string} id */ - isPromptOpen(id) { - return this.state.openPrompts.has(id); - } - - /** - * Set a disclosure's open state, persisting to sessionStorage (v3-compatible key). Called from - * the native `
    ` toggle event so the store mirrors the DOM, not the other way around. - * @param {string} id - * @param {boolean} open - */ - setPromptOpen(id, open) { - const has = this.state.openPrompts.has(id); - if (open === has) return; - const next = new Set(this.state.openPrompts); - if (open) next.add(id); - else next.delete(id); - saveSet(PROMPT_KEY, next); - this.state = { ...this.state, openPrompts: next }; - this.emit(); - } - - /** - * Purge ids that no longer exist from the persisted expansion/disclosure sets (called after a - * gone-finding's tombstone clears) so stale ids don't accumulate in sessionStorage forever. - * @param {Iterable} ids - */ - purge(ids) { - let touched = false; - const rows = new Set(this.state.expandedRows); - const prompts = new Set(this.state.openPrompts); - for (const id of ids) { - if (rows.delete(id)) touched = true; - if (prompts.delete(id)) touched = true; - } - if (!touched) return; - saveSet(EXPANDED_KEY, rows); - saveSet(PROMPT_KEY, prompts); - this.state = { ...this.state, expandedRows: rows, openPrompts: prompts }; - this.emit(); - } - - /** - * Whether a secondary-view disclosure (Readiness node table, Action judgement, Admission signing - * row) is open. Keyed by its stable, view-scoped key. @param {string} key - */ - isDisclosureOpen(key) { - return this.state.disclosures.has(key); - } - - /** - * Set a secondary-view disclosure's open state, persisting to sessionStorage (JEF-400). Called - * from the native `
    ` toggle (or a signing-row expander) so the store mirrors the DOM. - * @param {string} key - * @param {boolean} open - */ - setDisclosureOpen(key, open) { - const has = this.state.disclosures.has(key); - if (open === has) return; - const next = new Set(this.state.disclosures); - if (open) next.add(key); - else next.delete(key); - saveSet(DISCLOSURE_KEY, next); - this.state = { ...this.state, disclosures: next }; - this.emit(); - } - - /** - * Switch the active tab (client-side view swap). The caller owns the `history.pushState`; this - * only moves the state so the render follows. - * @param {string} tab - */ - setActiveTab(tab) { - if (this.state.activeTab === tab) return; - // Drop the previous tab's snapshot: each tab has its own JSON shape, so rendering the old - // snapshot under the new view would be wrong. The next poll (repointed to the new tab) lands its - // snapshot; until then the view shows its quiet first-paint body, and the status remains LIVE - // (this is a local view change, not a connection problem). `strip` is deliberately NOT cleared — - // it is global posture that must persist across the swap so the header never tears down. - this.state = { ...this.state, activeTab: tab, data: null }; - this.emit(); - } -} diff --git a/engine/web/test/action.test.jsx b/engine/web/test/action.test.jsx index d71f448..632fa1a 100644 --- a/engine/web/test/action.test.jsx +++ b/engine/web/test/action.test.jsx @@ -1,11 +1,10 @@ -// Action view tests (ADR-0025 / JEF-400): a judgement-audit `
    ` (KEYED component state) -// stays open across a poll, entry rows key on their stable entry (patched in place), the honest -// journal-empty state renders, and an XSS verdict/prompt renders inert. +// Action view tests (ADR-0025 / JEF-400 / JEF-411): a judgement-audit `
    ` (NATIVE, +// UNCONTROLLED) stays open across a poll, entry rows key on their stable entry (patched in place), +// the honest journal-empty state renders, and an XSS verdict/prompt renders inert. The view is +// `view`-only now (no store — JEF-411); a poll is modelled by re-rendering with a new `view` prop. import { describe, it, expect, beforeEach } from "vitest"; -import { render, fireEvent, cleanup, act } from "@testing-library/preact"; -import { useState, useEffect } from "preact/hooks"; -import { Store } from "../src/store.js"; +import { render, fireEvent, cleanup } from "@testing-library/preact"; import { ActionView } from "../src/action/view.jsx"; import { actionView, wouldAct, judgement } from "./fixtures.js"; @@ -14,13 +13,6 @@ beforeEach(() => { cleanup(); }); -function Harness({ store }) { - const [, force] = useState(0); - useEffect(() => store.subscribe(() => force((n) => n + 1)), [store]); - const data = store.getState().data; - return data ? : null; -} - function openDetails(details) { details.open = true; fireEvent(details, new Event("toggle")); @@ -28,33 +20,33 @@ function openDetails(details) { describe("Action state preservation + keying", () => { it("keeps an opened judgement disclosure open across a poll", () => { - const store = new Store(); - store.applySnapshot(actionView({ judgements: [judgement("web")] })); - const { container } = render(); + const { container, rerender } = render( + , + ); const details = container.querySelector(".judgement-entry details.model-prompt"); expect(details).toBeTruthy(); openDetails(details); - expect(store.isDisclosureOpen("action:judgement-0")).toBe(true); + expect(details.open).toBe(true); - // A poll re-delivers the ring (same entry order); the disclosure must stay open. - act(() => store.applySnapshot(actionView({ judgements: [judgement("web", { verdict: "Cleared" })] }))); + // A poll re-delivers the ring (same entry order); the native disclosure must stay open. + rerender(); const after = container.querySelector(".judgement-entry details.model-prompt"); expect(after.open).toBe(true); }); it("keys a would-act entry on its stable entry and patches in place", () => { - const store = new Store(); - store.applySnapshot(actionView({ "would-act": [wouldAct("web"), wouldAct("api")] })); - const { container } = render(); + const { container, rerender } = render( + , + ); const rows = container.querySelectorAll(".trust-list .trust-entry"); expect(rows.length).toBe(2); rows[0].dataset.probe = "kept"; - act(() => - store.applySnapshot( - actionView({ "would-act": [wouldAct("web", { "last-verdict": "still exploitable" }), wouldAct("api")] }), - ), + rerender( + , ); const after = container.querySelectorAll(".trust-list .trust-entry")[0]; expect(after.dataset.probe).toBe("kept"); @@ -64,13 +56,13 @@ describe("Action state preservation + keying", () => { describe("Action honesty", () => { it("renders the honest journal-empty state (distinct from none-in-window)", () => { - const { container } = render(); + const { container } = render(); expect(container.textContent).toContain("no decisions journaled yet"); expect(container.textContent).toContain("not an all-clear"); }); it("renders honest 'none in window' when the journal has history but nothing this window", () => { - const { container } = render(); + const { container } = render(); expect(container.textContent).toContain("none in the last"); }); }); @@ -79,14 +71,14 @@ describe("Action escaping", () => { it("renders an XSS verdict/prompt/entry as inert text", () => { window.__pwned = undefined; const XSS = ''; - const store = new Store(); - store.applySnapshot( - actionView({ - "would-act": [wouldAct(XSS, { "last-verdict": XSS })], - judgements: [judgement(XSS, { verdict: XSS, prompt: XSS, reply: XSS })], - }), + const { container } = render( + , ); - const { container } = render(); openDetails(container.querySelector(".judgement-entry details.model-prompt")); expect(container.querySelector("img")).toBeNull(); expect(window.__pwned).toBeUndefined(); diff --git a/engine/web/test/admission.test.jsx b/engine/web/test/admission.test.jsx index 4752ae9..a8a2338 100644 --- a/engine/web/test/admission.test.jsx +++ b/engine/web/test/admission.test.jsx @@ -1,12 +1,11 @@ -// Admission view tests (ADR-0025 / JEF-400): decision rows key on the `(subject, image, decision)` -// TUPLE so the dedup `count` updates IN PLACE across a poll (no tear), a signing-inventory row's -// expand-in-place detail (KEYED store state) stays open across a poll, the honest empty states -// render, and an XSS subject/image/signer renders inert. +// Admission view tests (ADR-0025 / JEF-400 / JEF-411): decision rows key on the +// `(subject, image, decision)` TUPLE so the dedup `count` updates IN PLACE across a poll (no tear), +// a signing-inventory row's expand-in-place detail (LOCAL useState) stays open across a poll, the +// honest empty states render, and an XSS subject/image/signer renders inert. The view is `view`-only +// now (no store — JEF-411); a poll is modelled by re-rendering with a new `view` prop. import { describe, it, expect, beforeEach } from "vitest"; -import { render, fireEvent, cleanup, act } from "@testing-library/preact"; -import { useState, useEffect } from "preact/hooks"; -import { Store } from "../src/store.js"; +import { render, fireEvent, cleanup } from "@testing-library/preact"; import { AdmissionView } from "../src/admission/view.jsx"; import { decisionKey } from "../src/keys.js"; import { admissionView, decisionRow, signingRow, signingRepo } from "./fixtures.js"; @@ -16,19 +15,12 @@ beforeEach(() => { cleanup(); }); -function Harness({ store }) { - const [, force] = useState(0); - useEffect(() => store.subscribe(() => force((n) => n + 1)), [store]); - const data = store.getState().data; - return data ? : null; -} - describe("Admission tuple keying — count updates in place", () => { it("keeps the same row node and updates the ×count across a poll", () => { - const store = new Store(); const row = decisionRow({ subject: "Deployment/web", image: "registry/web:1", decision: "audit", count: 2 }); - store.applySnapshot(admissionView({ rows: [row], total: 2, audited: 2 })); - const { container } = render(); + const { container, rerender } = render( + , + ); const rowNode = container.querySelector(".decision-row"); expect(rowNode).toBeTruthy(); @@ -36,11 +28,7 @@ describe("Admission tuple keying — count updates in place", () => { expect(container.querySelector(".decision-count").textContent).toContain("2"); // A new pass: the SAME tuple, count now 5 → same node reconciled in place, count bumped. - act(() => - store.applySnapshot( - admissionView({ rows: [{ ...row, count: 5 }], total: 5, audited: 5 }), - ), - ); + rerender(); const after = container.querySelector(".decision-row"); expect(after.dataset.probe).toBe("kept"); // reconciled in place expect(container.querySelector(".decision-count").textContent).toContain("5"); @@ -56,21 +44,20 @@ describe("Admission tuple keying — count updates in place", () => { describe("Admission signing-row expansion survives a poll", () => { it("keeps an expanded signing row open across a poll", () => { - const store = new Store(); const repo = signingRepo("registry/app", [signingRow("img-a"), signingRow("img-b")]); - store.applySnapshot(admissionView({ signing: [repo] })); - const { container } = render(); + const { container, rerender } = render(); const expander = container.querySelector('tr[data-signing="img-a"] .expander'); fireEvent.click(expander); - expect(store.isDisclosureOpen("admission:img-a")).toBe(true); + expect(expander.getAttribute("aria-expanded")).toBe("true"); expect(container.querySelector("#detail-img-a .detail")).toBeTruthy(); - // A poll re-delivers the inventory; the expanded detail must remain mounted (keyed store state). - act(() => - store.applySnapshot( - admissionView({ signing: [signingRepo("registry/app", [signingRow("img-a", { count: 3 }), signingRow("img-b")])] }), - ), + // A poll re-delivers the inventory; the expanded detail must remain mounted (local useState kept + // by the keyed diff on the row's dom-id). + rerender( + , ); expect(container.querySelector("#detail-img-a .detail")).toBeTruthy(); expect(container.querySelector('tr[data-signing="img-a"] .expander').getAttribute("aria-expanded")).toBe("true"); @@ -79,20 +66,20 @@ describe("Admission signing-row expansion survives a poll", () => { describe("Admission honesty", () => { it("renders the honest empty decisions state (never all-clear)", () => { - const { container } = render(); + const { container } = render(); expect(container.textContent).toContain("no admission decisions recorded yet"); expect(container.textContent).toContain("not an all-clear"); }); it("renders the honest empty signing inventory (never all-clear)", () => { - const { container } = render(); + const { container } = render(); expect(container.textContent).toContain("no images observed yet"); }); it("keyline-flags a would-deny decision row", () => { - const store = new Store(); - store.applySnapshot(admissionView({ rows: [decisionRow({ decision: "audit", "would-admit": false })], total: 1, audited: 1 })); - const { container } = render(); + const { container } = render( + , + ); expect(container.querySelector(".decision-row-attention")).toBeTruthy(); expect(container.textContent).toContain("would deny"); }); @@ -102,15 +89,15 @@ describe("Admission escaping", () => { it("renders an XSS subject/image/signer identity as inert text", () => { window.__pwned = undefined; const XSS = ''; - const store = new Store(); - store.applySnapshot( - admissionView({ - rows: [decisionRow({ subject: XSS, image: XSS, reason: XSS })], - total: 1, - signing: [signingRepo("registry/app", [signingRow("img-a", { image: XSS, label: XSS, signer: { "identity-short": XSS, "identity-full": XSS, "issuer-badge": XSS, "issuer-full": XSS } })])], - }), + const { container } = render( + , ); - const { container } = render(); fireEvent.click(container.querySelector('tr[data-signing="img-a"] .expander')); expect(container.querySelector("img")).toBeNull(); expect(window.__pwned).toBeUndefined(); diff --git a/engine/web/test/alerts.test.jsx b/engine/web/test/alerts.test.jsx index 93c3980..7c4a1ff 100644 --- a/engine/web/test/alerts.test.jsx +++ b/engine/web/test/alerts.test.jsx @@ -1,12 +1,11 @@ -// Alerts view tests (ADR-0025 / JEF-400): the content-hash reconcile key (an identical alarm -// persisting across passes does NOT flicker; a genuinely new alarm appears as a new node), the +// Alerts view tests (ADR-0025 / JEF-400 / JEF-411): the content-hash reconcile key (an identical +// alarm persisting across passes does NOT flicker; a genuinely new alarm appears as a new node), the // honesty states (LOUD blind caveat vs calm empty — SERVER-DERIVED, the client selects only), and -// escaping (an XSS payload in a signal/workload renders inert). +// escaping (an XSS payload in a signal/workload renders inert). The view was already `view`-only; a +// poll is modelled by re-rendering with a new `view` prop. import { describe, it, expect, beforeEach } from "vitest"; -import { render, cleanup, act } from "@testing-library/preact"; -import { useState, useEffect } from "preact/hooks"; -import { Store } from "../src/store.js"; +import { render, cleanup } from "@testing-library/preact"; import { AlertsView } from "../src/alerts/view.jsx"; import { alertKey } from "../src/keys.js"; import { alert, alertsView } from "./fixtures.js"; @@ -16,20 +15,10 @@ beforeEach(() => { cleanup(); }); -/** A harness re-rendering the Alerts view whenever the store applies a new snapshot (a poll tick). */ -function Harness({ store }) { - const [, force] = useState(0); - useEffect(() => store.subscribe(() => force((n) => n + 1)), [store]); - const data = store.getState().data; - return data ? : null; -} - describe("Alerts content-hash reconcile keying", () => { it("keeps an identical persisting alarm as the SAME node (no flicker) across a poll", () => { - const store = new Store(); const a = alert({ signal: "notable exec: bash", workload: "web" }); - store.applySnapshot(alertsView([a])); - const { container } = render(); + const { container, rerender } = render(); const cardBefore = container.querySelector(".alert-card"); expect(cardBefore).toBeTruthy(); @@ -37,23 +26,21 @@ describe("Alerts content-hash reconcile keying", () => { cardBefore.dataset.probe = "kept"; // A new pass returns the SAME alarm (same kind/signal/workload/on-chain) → same content key. - act(() => store.applySnapshot(alertsView([alert({ signal: "notable exec: bash", workload: "web" })]))); + rerender(); const cardAfter = container.querySelector(".alert-card"); expect(cardAfter.dataset.probe).toBe("kept"); // reconciled in place, not torn down }); it("renders a genuinely new alarm as a NEW node", () => { - const store = new Store(); - store.applySnapshot(alertsView([alert({ signal: "notable exec: bash" })])); - const { container } = render(); + const { container, rerender } = render(); expect(container.querySelectorAll(".alert-card").length).toBe(1); // A different signal → a different content hash → a second, distinct node. - act(() => - store.applySnapshot( - alertsView([alert({ signal: "notable exec: bash" }), alert({ signal: "contacted cloud-metadata" })]), - ), + rerender( + , ); expect(container.querySelectorAll(".alert-card").length).toBe(2); }); diff --git a/engine/web/test/app-refetch.test.jsx b/engine/web/test/app-refetch.test.jsx index 94b3989..ea061ad 100644 --- a/engine/web/test/app-refetch.test.jsx +++ b/engine/web/test/app-refetch.test.jsx @@ -1,20 +1,22 @@ -// App-shell tab-swap refetch test (JEF-408): a client tab-swap must trigger an IMMEDIATE refetch of -// the new tab, not wait up to POLL_MS for the next interval (which left the swapped-to view blank). -// The App restarts the poll when `activeTab` changes; startPolling fetches once synchronously on -// start, so a restart == an immediate refetch. This would FAIL under the old effect that depended -// only on [store, liveRegion] (the poll never restarted, so the swap waited for the stale interval). +// App-shell tab-swap refetch test (JEF-408 / JEF-411): a client tab-swap must trigger an IMMEDIATE +// refetch of the new tab, not wait up to POLL_MS for the next interval (which left the swapped-to +// view blank). The App restarts the poll when `activeTab` changes; startPolling fetches once +// synchronously on start, so a restart == an immediate refetch. This would FAIL if the effect did +// not key on `activeTab` (the poll would never restart, so the swap would wait for the stale +// interval). import { describe, it, expect, beforeEach, vi } from "vitest"; -import { render, fireEvent, cleanup } from "@testing-library/preact"; -import { Store } from "../src/store.js"; -import { findingsView } from "./fixtures.js"; +import { render, fireEvent, cleanup, act } from "@testing-library/preact"; -// Spy the real startPolling so we can count restarts AND assert the tab it repoints to, without -// firing real intervals. Each call records the tab getter; the returned stop is a no-op. +// Spy the real startPolling so we can count restarts, assert the tab it repoints to, AND capture the +// onSnapshot callback (to drive a same-tab snapshot), without firing real intervals. Each call +// records the tab getter + opts; the returned stop is a no-op. const startCalls = []; +let lastOpts = null; vi.mock("../src/poll.js", () => ({ startPolling: (opts) => { startCalls.push(opts.tab()); + lastOpts = opts; return () => {}; }, })); @@ -24,13 +26,12 @@ beforeEach(() => { sessionStorage.clear(); cleanup(); startCalls.length = 0; + lastOpts = null; }); describe("tab-swap immediate refetch (JEF-408)", () => { it("restarts the poll (repointed to the new tab) on a client swap", () => { - const store = new Store({ activeTab: "findings" }); - store.applySnapshot(findingsView([])); - const { container } = render( null} />); + const { container } = render( null} />); // Mounted once, polling findings. expect(startCalls).toEqual(["findings"]); @@ -39,20 +40,21 @@ describe("tab-swap immediate refetch (JEF-408)", () => { // (an immediate refetch), rather than leaving the alerts view blank until the next interval. const link = container.querySelector('a.tab[href="/?tab=alerts"]'); fireEvent.click(link); - expect(store.getState().activeTab).toBe("alerts"); + expect(container.querySelector('a.tab[href="/?tab=alerts"]').getAttribute("aria-current")).toBe( + "page", + ); expect(startCalls).toContain("alerts"); expect(startCalls.length).toBeGreaterThan(1); }); it("does not restart the poll when a fresh snapshot lands on the SAME tab", () => { - const store = new Store({ activeTab: "findings" }); - store.applySnapshot(findingsView([])); - render( null} />); + render( null} />); expect(startCalls).toEqual(["findings"]); // A new snapshot on the SAME tab must NOT restart the poll — that would refetch on every tick. - // The effect keys on activeTab, which is unchanged, so no restart. - store.applySnapshot(findingsView([])); + // The effect keys on activeTab (unchanged) + memoized callbacks, so applying a snapshot (which + // only moves data/strip/status/lastGoodAt) does not re-run the poll effect. + act(() => lastOpts.onSnapshot({ strip: { "all-clear": false }, findings: [] })); expect(startCalls).toEqual(["findings"]); }); }); diff --git a/engine/web/test/app-status.test.jsx b/engine/web/test/app-status.test.jsx new file mode 100644 index 0000000..90978d7 --- /dev/null +++ b/engine/web/test/app-status.test.jsx @@ -0,0 +1,108 @@ +// App status + strip tests (ADR-0025 / ADR-0027 / ADR-0028 / JEF-411). These port the invariants the +// deleted store.test.js pinned, now that `App` owns the shared state as plain useState: +// +// - the three connection-status transitions, incl. "never stale before the first snapshot" +// (first-load → connecting…, live → no chrome, stale → the load-bearing "not an all-clear"); +// - the JEF-410 strip contract: the strip persists across a tab swap, and a snapshot that omits a +// strip keeps the last one (the header never regresses to blank). +// +// The poll is stubbed so we drive `onSnapshot` / `onStale` directly (the same callbacks the real +// poll would fire) and assert via the DOM — no store, no internal state peeking. + +import { describe, it, expect, beforeEach, vi } from "vitest"; +import { render, fireEvent, cleanup, act } from "@testing-library/preact"; + +// Capture the poll callbacks so a test can land a snapshot / mark stale exactly like the poll does. +let lastOpts = null; +vi.mock("../src/poll.js", () => ({ + startPolling: (opts) => { + lastOpts = opts; + return () => {}; + }, +})); +const { App } = await import("../src/app.jsx"); + +beforeEach(() => { + sessionStorage.clear(); + cleanup(); + lastOpts = null; +}); + +/** A minimal strip-props shape with an all-clear/judging-state token (the client only displays it). */ +const stripProps = (over = {}) => ({ "all-clear": false, "judging-state": "watching", ...over }); +/** A findings snapshot carrying a strip (the shape every tab's payload has). */ +const snapshot = (strip, over = {}) => ({ strip, findings: [], ...over }); + +function mount() { + const { container } = render( null} />); + return container; +} + +describe("connection status transitions (ported from store.test.js)", () => { + it("starts first-load (connecting…) and NEVER goes stale before a snapshot lands", () => { + const container = mount(); + // First-load: the honest "connecting…" banner. + expect(container.querySelector(".dash-conn-connecting")).toBeTruthy(); + + // A failed poll before any snapshot must NOT flip to the stale register — connecting is honest. + act(() => lastOpts.onStale()); + expect(container.querySelector(".dash-conn-connecting")).toBeTruthy(); + expect(container.querySelector(".dash-conn-stale")).toBeNull(); + }); + + it("goes live on a snapshot (no connection chrome — no false reassurance)", () => { + const container = mount(); + act(() => lastOpts.onSnapshot(snapshot(stripProps()))); + expect(container.querySelector(".dash-conn-msg")).toBeNull(); + }); + + it("goes stale AFTER a snapshot, keeping the last-good body on screen", () => { + const container = mount(); + act(() => lastOpts.onSnapshot(snapshot(stripProps()))); + act(() => lastOpts.onStale()); + const stale = container.querySelector(".dash-conn-stale"); + expect(stale).toBeTruthy(); + expect(stale.textContent).toContain("Not updating"); + expect(stale.textContent).toContain("not an all-clear"); + // The strip (last-good posture) is still on screen — never blanked. + expect(container.querySelector(".strip")).toBeTruthy(); + }); +}); + +describe("persistent status strip (JEF-410)", () => { + it("renders the strip from a snapshot and holds it across a tab swap", () => { + const container = mount(); + // No snapshot yet — the strip is blank (absent is honest, never green). + expect(container.querySelector(".strip")).toBeNull(); + + act(() => lastOpts.onSnapshot(snapshot(stripProps({ "judging-state": "watching" })))); + expect(container.querySelector(".strip")).toBeTruthy(); + expect(container.querySelector(".axis.judging").textContent).toContain("watching"); + // The findings body rendered too (empty state). + expect(container.querySelector(".view-findings")).toBeTruthy(); + + // Swap tabs. The poll is stubbed, so no refetch clobbers state — the body clears for the new tab + // (a quiet placeholder), but the global strip MUST persist (the header never tears down). + fireEvent.click(container.querySelector('a.tab[href="/?tab=alerts"]')); + expect(container.querySelector('a.tab[href="/?tab=alerts"]').getAttribute("aria-current")).toBe( + "page", + ); + expect(container.querySelector(".strip")).toBeTruthy(); // header persists — no blank/redraw + expect(container.querySelector(".axis.judging").textContent).toContain("watching"); + // The alerts body is the quiet placeholder (data cleared for the new tab), not the alerts view. + expect(container.querySelector(".view-alerts")).toBeTruthy(); + expect(container.querySelector(".alerts-note")).toBeNull(); // no snapshot for the new tab yet + }); + + it("keeps the last strip if a later snapshot omits it (never regress the header to blank)", () => { + const container = mount(); + act(() => lastOpts.onSnapshot(snapshot(stripProps({ "judging-state": "all-clear", "all-clear": true })))); + expect(container.querySelector(".axis.judging.ok")).toBeTruthy(); // green all-clear + + // A snapshot that omits the top-level strip must not blank the header — the last strip stays. + // (A finding keeps the body off the strip-reading empty state; the point here is the header.) + act(() => lastOpts.onSnapshot({ findings: [{ id: "x", posture: "breach", delta: { kind: "new" }, disposition: "propose", "evidence-summary": {}, entry: "e", objective: "o", path: [], paths: [] }] })); + expect(container.querySelector(".strip")).toBeTruthy(); + expect(container.querySelector(".axis.judging.ok")).toBeTruthy(); + }); +}); diff --git a/engine/web/test/app.test.jsx b/engine/web/test/app.test.jsx index f761f4a..8d3e49f 100644 --- a/engine/web/test/app.test.jsx +++ b/engine/web/test/app.test.jsx @@ -1,12 +1,10 @@ -// App-shell tab-navigation tests (ADR-0025 / JEF-398): the engine is Preact-only, so EVERY tab-swap -// — including to a secondary view — is a local client view swap (history.pushState + store update), -// never a full server navigation. This would FAIL under the old per-tab-flag special-case, which let -// a swap to a "still-maud" tab fall through to a real navigation. +// App-shell tab-navigation tests (ADR-0025 / JEF-398 / JEF-411): the engine is Preact-only, so EVERY +// tab-swap — including to a secondary view — is a local client view swap (history.pushState + local +// state update), never a full server navigation. `App` owns the active tab as a plain useState now +// (no store — JEF-411); these tests drive it and assert via the DOM. import { describe, it, expect, beforeEach, vi } from "vitest"; import { render, fireEvent, cleanup } from "@testing-library/preact"; -import { Store } from "../src/store.js"; -import { findingsView } from "./fixtures.js"; // Stub the poll so a nav test never fires a real fetch/interval — we assert navigation, not polling. vi.mock("../src/poll.js", () => ({ startPolling: () => () => {} })); @@ -17,17 +15,15 @@ beforeEach(() => { cleanup(); }); -/** Render the app shell with a seeded store on a given active tab. */ -function mount(activeTab = "findings") { - const store = new Store({ activeTab }); - store.applySnapshot(findingsView([])); - const { container } = render( null} />); - return { store, container }; +/** Render the app shell on a given active tab. */ +function mount(initialTab = "findings") { + const { container } = render( null} />); + return { container }; } describe("Preact-only tab navigation", () => { - it("intercepts a swap to EVERY tab — no full navigation, store repoints locally", () => { - const { store, container } = mount("findings"); + it("intercepts a swap to EVERY tab — no full navigation, active tab repoints locally", () => { + const { container } = mount("findings"); const pushState = vi.spyOn(history, "pushState"); for (const id of ["alerts", "action", "readiness", "admission", "findings"]) { @@ -36,22 +32,26 @@ describe("Preact-only tab navigation", () => { const clicked = fireEvent.click(link); // The default (real navigation) is prevented for every tab now. expect(clicked, `${id} swap is intercepted (default prevented)`).toBe(false); - expect(store.getState().activeTab).toBe(id); + // The active tab is now this one — its nav link carries aria-current="page". + expect(container.querySelector(`a.tab[href="${hrefFor(id)}"]`).getAttribute("aria-current")).toBe( + "page", + ); } expect(pushState).toHaveBeenCalledTimes(5); pushState.mockRestore(); }); it("does NOT intercept a modified click (open-in-new-tab still works)", () => { - const { store, container } = mount("findings"); + const { container } = mount("findings"); const pushState = vi.spyOn(history, "pushState"); const link = container.querySelector('a.tab[href="/?tab=alerts"]'); // A ⌘/ctrl click must fall through to the browser: the handler bails, so no client swap happens - // (store unchanged, pushState never called). jsdom then logs an un-implemented navigation — the - // proof the default was NOT prevented. + // (active tab unchanged, pushState never called). jsdom then logs an un-implemented navigation — + // the proof the default was NOT prevented. fireEvent.click(link, { metaKey: true }); expect(pushState).not.toHaveBeenCalled(); - expect(store.getState().activeTab).toBe("findings"); + // Findings is still the active tab. + expect(container.querySelector('a.tab[href="/"]').getAttribute("aria-current")).toBe("page"); pushState.mockRestore(); }); }); diff --git a/engine/web/test/escaping.test.jsx b/engine/web/test/escaping.test.jsx index 149bb65..9dffffd 100644 --- a/engine/web/test/escaping.test.jsx +++ b/engine/web/test/escaping.test.jsx @@ -1,11 +1,11 @@ -// Client escaping test (ADR-0025 / JEF-397): untrusted strings from the JSON (verdict prose, CVE -// titles, node keys, model prompts) render as TEXT, never as live HTML. Preact auto-escapes all -// interpolated text; `dangerouslySetInnerHTML` is banned in src/ (the JEF-396 guard). This asserts -// the guarantee holds end-to-end: an XSS-laden snapshot produces escaped DOM, no injected element. +// Client escaping test (ADR-0025 / JEF-397 / JEF-411): untrusted strings from the JSON (verdict +// prose, CVE titles, node keys, model prompts) render as TEXT, never as live HTML. Preact +// auto-escapes all interpolated text; `dangerouslySetInnerHTML` is banned in src/ (the JEF-396 +// guard). This asserts the guarantee holds end-to-end: an XSS-laden snapshot produces escaped DOM, +// no injected element. import { describe, it, expect, beforeEach } from "vitest"; import { render, fireEvent, cleanup } from "@testing-library/preact"; -import { Store } from "../src/store.js"; import { FindingsView } from "../src/findings/table.jsx"; import { finding, findingsView } from "./fixtures.js"; @@ -19,7 +19,6 @@ const XSS = ''; describe("untrusted text is escaped, never executed", () => { it("escapes an XSS-laden verdict, CVE title, node key, and model prompt", () => { window.__pwned = undefined; - const store = new Store(); const f = finding("evil", { entry: XSS, objective: XSS, @@ -37,8 +36,7 @@ describe("untrusted text is escaped, never executed", () => { paths: [[{ from: XSS, "from-glyph": "x", relation: XSS, to: XSS, "to-glyph": "x", structural: false, "is-cut": false, shared: false }]], cut: null, }); - store.applySnapshot(findingsView([f])); - const { container } = render(); + const { container } = render(); // Expand so the detail (verdict, CVE table, prompt) renders too. fireEvent.click(container.querySelector('tr.row[data-finding="evil"]')); @@ -50,19 +48,4 @@ describe("untrusted text is escaped, never executed", () => { // The payload IS present as literal text (escaped), proving it rendered as data, not markup. expect(container.textContent).toContain(XSS); }); - - it("escapes an XSS-laden tombstone id without injecting an element", async () => { - const store = new Store(); - const evilId = ''; - const f = finding(evilId); - store.applySnapshot(findingsView([f])); - const { container, rerender } = render(); - store.toggleRow(evilId); // mark it open so it earns a tombstone when it clears - rerender(); - - store.applySnapshot(findingsView([])); - rerender(); - expect(container.querySelector("svg")).toBeNull(); - expect(window.__pwned).toBeUndefined(); - }); }); diff --git a/engine/web/test/poll.test.js b/engine/web/test/poll.test.js index 7739129..a6489a2 100644 --- a/engine/web/test/poll.test.js +++ b/engine/web/test/poll.test.js @@ -1,11 +1,10 @@ -// Unit tests for the poll engine (ADR-0025 / JEF-397): same-origin URL construction, the -// defer-apply-while-text-selection rule (ported from v3), and stale-not-blank on a failed poll. +// Unit tests for the poll engine (ADR-0025 / JEF-397 / JEF-411): same-origin URL construction, the +// defer-apply-while-text-selection rule (ported from v3), and stale-not-blank on a failed poll. The +// poll takes plain `onSnapshot` / `onStale` callbacks now (no store dependency — JEF-411); tests +// spy those directly. import { describe, it, expect, beforeEach, afterEach, vi } from "vitest"; import { snapshotUrl, startPolling, hasLiveSelection, POLL_MS } from "../src/poll.js"; -import { Store } from "../src/store.js"; - -beforeEach(() => sessionStorage.clear()); describe("snapshotUrl", () => { it("is always a relative, same-origin path per tab", () => { @@ -26,45 +25,50 @@ function startOnce(opts) { } describe("startPolling", () => { - it("applies a fetched snapshot to the store (goes live)", async () => { - const store = new Store(); + it("hands a fetched snapshot to onSnapshot (goes live), never onStale", async () => { + const onSnapshot = vi.fn(); + const onStale = vi.fn(); startOnce({ - store, tab: () => "findings", + onSnapshot, + onStale, liveRegion: () => null, fetchImpl: okFetch({ findings: [{ id: "a" }] }), }); - await vi.waitFor(() => expect(store.getState().status).toBe("live")); - expect(store.getState().data).toEqual({ findings: [{ id: "a" }] }); + await vi.waitFor(() => expect(onSnapshot).toHaveBeenCalledTimes(1)); + expect(onSnapshot).toHaveBeenCalledWith({ findings: [{ id: "a" }] }); + expect(onStale).not.toHaveBeenCalled(); }); - it("marks the store STALE (not blank) on a non-ok response", async () => { - const store = new Store(); - store.applySnapshot({ findings: [{ id: "keep" }] }); // a prior good render + it("calls onStale (not onSnapshot) on a non-ok response", async () => { + const onSnapshot = vi.fn(); + const onStale = vi.fn(); startOnce({ - store, tab: () => "findings", + onSnapshot, + onStale, liveRegion: () => null, fetchImpl: vi.fn().mockResolvedValue({ ok: false, status: 503 }), }); - await vi.waitFor(() => expect(store.getState().status).toBe("stale")); - expect(store.getState().data).toEqual({ findings: [{ id: "keep" }] }); // last-good kept + await vi.waitFor(() => expect(onStale).toHaveBeenCalledTimes(1)); + expect(onSnapshot).not.toHaveBeenCalled(); }); - it("marks stale on a thrown transport error", async () => { - const store = new Store(); - store.applySnapshot({ findings: [] }); + it("calls onStale on a thrown transport error", async () => { + const onStale = vi.fn(); startOnce({ - store, tab: () => "findings", + onSnapshot: vi.fn(), + onStale, liveRegion: () => null, fetchImpl: vi.fn().mockRejectedValue(new Error("offline")), }); - await vi.waitFor(() => expect(store.getState().status).toBe("stale")); + await vi.waitFor(() => expect(onStale).toHaveBeenCalledTimes(1)); }); it("DEFERS applying a snapshot while a selection is anchored in the live region", async () => { - const store = new Store(); + const onSnapshot = vi.fn(); + const onStale = vi.fn(); const region = document.createElement("div"); region.textContent = "some selectable model verdict"; document.body.appendChild(region); @@ -78,15 +82,16 @@ describe("startPolling", () => { expect(hasLiveSelection(region)).toBe(true); startOnce({ - store, tab: () => "findings", + onSnapshot, + onStale, liveRegion: () => region, fetchImpl: okFetch({ findings: [{ id: "x" }] }), }); - // The fetch resolves but the apply is deferred — the store stays first-load, NOT stale. + // The fetch resolves but the apply is deferred — neither callback fires (not live, not stale). await new Promise((r) => setTimeout(r, 5)); - expect(store.getState().status).toBe("first-load"); - expect(store.getState().data).toBeNull(); + expect(onSnapshot).not.toHaveBeenCalled(); + expect(onStale).not.toHaveBeenCalled(); sel.removeAllRanges(); document.body.removeChild(region); @@ -108,8 +113,9 @@ describe("startPolling default interval (JEF-408 regression)", () => { // exactly once (only the initial tick()); the recurring interval was dead. const fetchImpl = okFetch({ findings: [] }); const stop = startPolling({ - store: new Store(), tab: () => "findings", + onSnapshot: () => {}, + onStale: () => {}, liveRegion: () => null, fetchImpl, }); @@ -128,8 +134,9 @@ describe("startPolling default interval (JEF-408 regression)", () => { // operator reported. Assert the FIRST arg to native setInterval is a function, not a number/string. const setIntervalSpy = vi.spyOn(globalThis, "setInterval"); const stop = startPolling({ - store: new Store(), tab: () => "findings", + onSnapshot: () => {}, + onStale: () => {}, liveRegion: () => null, fetchImpl: okFetch({ findings: [] }), // No setIntervalImpl override — the default adapter must call native setInterval as (fn, ms). diff --git a/engine/web/test/readiness.test.jsx b/engine/web/test/readiness.test.jsx index 92095f7..54fb129 100644 --- a/engine/web/test/readiness.test.jsx +++ b/engine/web/test/readiness.test.jsx @@ -1,11 +1,10 @@ -// Readiness view tests (ADR-0025 / JEF-400): the per-node `
    ` disclosure (KEYED component -// state) stays open across a poll, rows key on `id` (patched in place), a blind node is surfaced -// loudly (server-derived state token), and an XSS node name renders inert. +// Readiness view tests (ADR-0025 / JEF-400 / JEF-411): the per-node `
    ` disclosure (NATIVE, +// UNCONTROLLED) stays open across a poll, rows key on `id` (patched in place), a blind node is +// surfaced loudly (server-derived state token), and an XSS node name renders inert. The view is +// `view`-only now (no store — JEF-411); a poll is modelled by re-rendering with a new `view` prop. import { describe, it, expect, beforeEach } from "vitest"; -import { render, fireEvent, cleanup, act } from "@testing-library/preact"; -import { useState, useEffect } from "preact/hooks"; -import { Store } from "../src/store.js"; +import { render, fireEvent, cleanup } from "@testing-library/preact"; import { ReadinessView } from "../src/readiness/view.jsx"; import { readinessRow, nodeRow, readinessView } from "./fixtures.js"; @@ -14,13 +13,6 @@ beforeEach(() => { cleanup(); }); -function Harness({ store }) { - const [, force] = useState(0); - useEffect(() => store.subscribe(() => force((n) => n + 1)), [store]); - const data = store.getState().data; - return data ? : null; -} - /** Open a native
    the way a user would. */ function openDetails(details) { details.open = true; @@ -31,34 +23,34 @@ const rowWithNodes = (id, nodes, over = {}) => readinessRow(id, { nodes, ...over describe("Readiness state preservation + keying", () => { it("keeps an opened per-node breakdown open across a poll", () => { - const store = new Store(); const row = rowWithNodes("runtime-corroboration", [nodeRow("node-1"), nodeRow("node-2")]); - store.applySnapshot(readinessView([row])); - const { container } = render(); + const { container, rerender } = render(); const details = container.querySelector('li[data-input="runtime-corroboration"] details.cov-nodes'); expect(details).toBeTruthy(); openDetails(details); - expect(store.isDisclosureOpen("readiness:runtime-corroboration")).toBe(true); + expect(details.open).toBe(true); - // A poll updates the row's detail; the disclosure must stay open (keyed state survives). - act(() => - store.applySnapshot( - readinessView([rowWithNodes("runtime-corroboration", [nodeRow("node-1"), nodeRow("node-2")], { detail: "2 signals" })]), - ), + // A poll updates the row's detail; the native disclosure must stay open (keyed diff keeps it). + rerender( + , ); const after = container.querySelector('li[data-input="runtime-corroboration"] details.cov-nodes'); expect(after.open).toBe(true); }); it("keys rows on id and patches an updated row in place", () => { - const store = new Store(); - store.applySnapshot(readinessView([readinessRow("model"), readinessRow("kev")])); - const { container } = render(); + const { container, rerender } = render( + , + ); const modelRow = container.querySelector('li[data-input="model"]'); modelRow.dataset.probe = "kept"; - act(() => store.applySnapshot(readinessView([readinessRow("model", { detail: "last call ok" }), readinessRow("kev")]))); + rerender( + , + ); const after = container.querySelector('li[data-input="model"]'); expect(after.dataset.probe).toBe("kept"); expect(after.textContent).toContain("last call ok"); @@ -67,13 +59,11 @@ describe("Readiness state preservation + keying", () => { describe("Readiness honesty (blind nodes)", () => { it("surfaces a blind node loudly (server-derived state token, not a client derivation)", () => { - const store = new Store(); const row = rowWithNodes("runtime-corroboration", [ nodeRow("node-1", { state: "healthy" }), nodeRow("node-2", { state: "blind", detail: "no live sensor" }), ]); - store.applySnapshot(readinessView([row])); - const { container } = render(); + const { container } = render(); const summary = container.querySelector(".cov-nodes-summary"); expect(summary.textContent).toContain("1 blind"); const blindRow = container.querySelector('tr[data-state="blind"]'); @@ -81,10 +71,8 @@ describe("Readiness honesty (blind nodes)", () => { }); it("flags a weakening absent input with the amber-keyline gap class + enable action", () => { - const store = new Store(); const gap = readinessRow("model", { state: "absent", "weakens-decisions": true, enable: "PROTECTOR_MODEL_URL" }); - store.applySnapshot(readinessView([gap])); - const { container } = render(); + const { container } = render(); const row = container.querySelector('li[data-input="model"]'); expect(row.classList.contains("cov-row-gap")).toBe(true); expect(container.querySelector(".cov-enable-action")).toBeTruthy(); @@ -97,9 +85,7 @@ describe("Readiness escaping", () => { window.__pwned = undefined; const XSS = '
    '; const row = rowWithNodes("runtime-corroboration", [nodeRow(XSS, { detail: XSS })]); - const store = new Store(); - store.applySnapshot(readinessView([row])); - const { container } = render(); + const { container } = render(); openDetails(container.querySelector("details.cov-nodes")); expect(container.querySelector("img")).toBeNull(); expect(window.__pwned).toBeUndefined(); diff --git a/engine/web/test/reconcile.test.js b/engine/web/test/reconcile.test.js deleted file mode 100644 index e7ad493..0000000 --- a/engine/web/test/reconcile.test.js +++ /dev/null @@ -1,88 +0,0 @@ -// Unit tests for the pure keyed-reconcile engine (ADR-0025 / JEF-397). These pin the tombstone -// lifecycle — the one thing Preact's keyed diff does NOT do for us — without a browser: a -// gone-while-open finding gets exactly ONE tombstone render, a gone-unopened finding is dropped -// silently, and present findings always render live (Preact keeps their DOM in place). - -import { describe, it, expect } from "vitest"; -import { computeRows, idsOf } from "../src/reconcile.js"; - -const F = (id) => ({ id }); - -describe("computeRows", () => { - it("renders every present finding as a live row, in server order", () => { - const { rows, tombstonedNow } = computeRows( - [F("a"), F("b"), F("c")], - new Set(), - new Set(), - new Set(), - ); - expect(rows.map((r) => r.finding.id)).toEqual(["a", "b", "c"]); - expect(rows.every((r) => !r.tombstone)).toBe(true); - expect(tombstonedNow.size).toBe(0); - }); - - it("drops a gone finding SILENTLY when it was not expanded or focused", () => { - // 'b' vanished but nobody had it open — no tombstone, just gone. - const { rows, tombstonedNow } = computeRows( - [F("a"), F("c")], - new Set(["a", "b", "c"]), - new Set(), // nothing kept open - new Set(), - ); - expect(rows.map((r) => r.finding.id)).toEqual(["a", "c"]); - expect(tombstonedNow.size).toBe(0); - }); - - it("emits ONE tombstone for a gone finding that was expanded/focused", () => { - const { rows, tombstonedNow } = computeRows( - [F("a")], - new Set(["a", "b"]), - new Set(["b"]), // 'b' was open when it vanished - new Set(), - ); - const b = rows.find((r) => r.finding.id === "b"); - expect(b).toBeTruthy(); - expect(b.tombstone).toBe(true); - expect(tombstonedNow.has("b")).toBe(true); - }); - - it("drops the tombstone on the NEXT render (one tombstone, then gone)", () => { - // Simulate the follow-up render: 'b' is still gone, still kept-open, but already tombstoned. - const { rows, tombstonedNow } = computeRows( - [F("a")], - new Set(["a", "b"]), - new Set(["b"]), - new Set(["b"]), // already had its one tombstone last render - ); - expect(rows.map((r) => r.finding.id)).toEqual(["a"]); - expect(tombstonedNow.size).toBe(0); - }); - - it("appends tombstones after the live rows so the list doesn't shift", () => { - const { rows } = computeRows( - [F("a"), F("c")], - new Set(["a", "b", "c"]), - new Set(["b"]), - new Set(), - ); - expect(rows.map((r) => r.finding.id)).toEqual(["a", "c", "b"]); - expect(rows[2].tombstone).toBe(true); - }); - - it("keeps a present finding live even if it is in the kept-open set", () => { - const { rows, tombstonedNow } = computeRows( - [F("a")], - new Set(["a"]), - new Set(["a"]), - new Set(), - ); - expect(rows).toEqual([{ finding: { id: "a" }, tombstone: false }]); - expect(tombstonedNow.size).toBe(0); - }); -}); - -describe("idsOf", () => { - it("collects the id set of a findings list", () => { - expect([...idsOf([F("x"), F("y")])].sort()).toEqual(["x", "y"]); - }); -}); diff --git a/engine/web/test/state-preservation.test.jsx b/engine/web/test/state-preservation.test.jsx index 0283e76..10b6563 100644 --- a/engine/web/test/state-preservation.test.jsx +++ b/engine/web/test/state-preservation.test.jsx @@ -1,15 +1,16 @@ -// The ACCEPTANCE HEART of JEF-397 / JEF-351 (ADR-0025): across a data refresh, an expanded row, an -// open native `
    ` disclosure, AND keyboard focus PERSIST. This is exactly what the v3 -// innerHTML swap destroyed and the keyed reconcile fixes — so it is tested end-to-end in jsdom. +// The ACCEPTANCE HEART of JEF-351 / JEF-411 (ADR-0025 / ADR-0028): across a data refresh, an +// expanded row, an open native `
    ` disclosure, AND keyboard focus PERSIST. This is exactly +// what the v3 innerHTML swap destroyed and the keyed reconcile fixes — so it is tested end-to-end in +// jsdom. // -// The harness renders the real Findings view keyed on `finding.id`, mutates the DOM the way an -// operator would (expand a row, open the disclosure, focus the expander), then feeds a NEW snapshot -// through the SAME store (a poll tick) and asserts nothing the operator touched was disturbed. +// Post-JEF-411 the expansion is LOCAL component state (a plain `useState` in FindingRow) and the +// "show model prompt" disclosure is a NATIVE, UNCONTROLLED `
    `. Neither is persisted; both +// survive a poll purely because Preact's keyed diff (`key={f.id}`) keeps the row's DOM in place. The +// harness re-renders the Findings view with a NEW `view` prop keyed by id (a poll tick), then +// asserts nothing the operator touched was disturbed. import { describe, it, expect, beforeEach } from "vitest"; -import { render, fireEvent, cleanup, act } from "@testing-library/preact"; -import { useState, useEffect } from "preact/hooks"; -import { Store } from "../src/store.js"; +import { render, fireEvent, cleanup } from "@testing-library/preact"; import { FindingsView } from "../src/findings/table.jsx"; import { finding, findingsView } from "./fixtures.js"; @@ -18,38 +19,28 @@ beforeEach(() => { cleanup(); }); -/** A harness that re-renders the Findings view whenever the store applies a new snapshot — i.e. it - * models the live poll driving the reconcile. */ -function Harness({ store }) { - const [, force] = useState(0); - useEffect(() => store.subscribe(() => force((n) => n + 1)), [store]); - const data = store.getState().data; - return data ? : null; -} - -/** Open a native
    the way a user would: set `open`, then fire the `toggle` event that the - * component listens for. Wrapped in act via fireEvent's flush. */ +/** Open a native
    the way a user would: set `open`, then fire the `toggle` event. */ function openDetails(details) { details.open = true; fireEvent(details, new Event("toggle")); } describe("state preservation across a refresh (the JEF-351 acceptance heart)", () => { - it("keeps an expanded row, an open disclosure, and focus after a poll", async () => { - const store = new Store(); - store.applySnapshot(findingsView([finding("a"), finding("b")])); - const { container } = render(); + it("keeps an expanded row, an open disclosure, and focus after a poll", () => { + const { container, rerender } = render( + , + ); // Expand row 'a' by clicking its row (the whole row is the toggle, like the maud path). const rowA = container.querySelector('tr.row[data-finding="a"]'); fireEvent.click(rowA); - expect(store.isExpanded("a")).toBe(true); + expect(rowA.classList.contains("open")).toBe(true); // The detail panel is now rendered; open its native
    "show model prompt". const details = container.querySelector("#detail-a details.model-prompt"); expect(details).toBeTruthy(); openDetails(details); - expect(store.isPromptOpen("a")).toBe(true); + expect(details.open).toBe(true); // Focus the expander button inside row 'a'. const expander = container.querySelector('tr.row[data-finding="a"] .expander'); @@ -57,22 +48,22 @@ describe("state preservation across a refresh (the JEF-351 acceptance heart)", ( expect(document.activeElement).toBe(expander); // A poll lands a NEW snapshot: 'a' unchanged, 'b' changed disposition, a new 'c' inserted. - act(() => - store.applySnapshot( - findingsView([ + rerender( + , ); - // Expansion survived — row 'a' still open, its detail panel still mounted. + // Expansion survived — row 'a' still open (local useState kept by the keyed diff), detail mounted. const rowAafter = container.querySelector('tr.row[data-finding="a"]'); expect(rowAafter.classList.contains("open")).toBe(true); expect(container.querySelector("#detail-a .detail")).toBeTruthy(); - // The open disclosure survived — same DOM node, still open. + // The open native disclosure survived — same DOM node, still open. const detailsAfter = container.querySelector("#detail-a details.model-prompt"); expect(detailsAfter.open).toBe(true); @@ -87,37 +78,20 @@ describe("state preservation across a refresh (the JEF-351 acceptance heart)", ( expect(rowC.classList.contains("open")).toBe(false); }); - it("shows a one-shot tombstone when an expanded finding clears, then drops it", async () => { - const store = new Store(); - store.applySnapshot(findingsView([finding("a"), finding("b")])); - const { container } = render(); - + it("removes a gone finding via the keyed diff (no client tombstone — JEF-411)", () => { + const { container, rerender } = render( + , + ); + // Expand 'a' so we prove even an OPEN row is simply removed when it clears (no farewell row). fireEvent.click(container.querySelector('tr.row[data-finding="a"]')); - expect(store.isExpanded("a")).toBe(true); - - // 'a' clears (the model no longer sees this path) while it was expanded. - act(() => store.applySnapshot(findingsView([finding("b")]))); - - // A calm tombstone stands in for 'a' this render. - const tomb = container.querySelector('tr[data-finding="a"][data-tombstone="true"]'); - expect(tomb).toBeTruthy(); - expect(tomb.textContent).toContain("this finding cleared"); + expect(container.querySelector('tr.row[data-finding="a"]').classList.contains("open")).toBe( + true, + ); - // The purge fires on the next tick; a following poll (no 'a') drops the tombstone entirely. - await act(() => new Promise((r) => setTimeout(r, 0))); - act(() => store.applySnapshot(findingsView([finding("b")]))); + // 'a' clears from the snapshot — Preact's keyed diff drops it; 'b' stays in place. + rerender(); expect(container.querySelector('[data-finding="a"]')).toBeNull(); - expect(store.isExpanded("a")).toBe(false); // its id was purged from the persisted set - }); - - it("hard-removes a cleared finding SILENTLY when it was never opened", () => { - const store = new Store(); - store.applySnapshot(findingsView([finding("a"), finding("b")])); - const { container } = render(); - - // 'b' clears without ever being expanded — no tombstone, just gone. - act(() => store.applySnapshot(findingsView([finding("a")]))); - expect(container.querySelector('[data-finding="b"]')).toBeNull(); expect(container.querySelector('[data-tombstone="true"]')).toBeNull(); + expect(container.querySelector('tr.row[data-finding="b"]')).toBeTruthy(); }); }); diff --git a/engine/web/test/store.test.js b/engine/web/test/store.test.js deleted file mode 100644 index 89a0b18..0000000 --- a/engine/web/test/store.test.js +++ /dev/null @@ -1,124 +0,0 @@ -// Unit tests for the client store (ADR-0025 / JEF-397): sessionStorage seeding on the v3-compatible -// keys, snapshot-vs-staleness status transitions (never "stale" before the first snapshot), and -// the expansion/disclosure mutators + purge. The store is where a bug would silently drop operator -// state, so its contract is pinned directly. - -import { describe, it, expect, beforeEach } from "vitest"; -import { Store, EXPANDED_KEY, PROMPT_KEY } from "../src/store.js"; - -beforeEach(() => sessionStorage.clear()); - -describe("Store seeding", () => { - it("seeds expanded rows and open prompts from the v3 sessionStorage keys", () => { - sessionStorage.setItem(EXPANDED_KEY, JSON.stringify(["row-1", "row-2"])); - sessionStorage.setItem(PROMPT_KEY, JSON.stringify(["row-1"])); - const store = new Store(); - expect(store.isExpanded("row-1")).toBe(true); - expect(store.isExpanded("row-2")).toBe(true); - expect(store.isPromptOpen("row-1")).toBe(true); - expect(store.isPromptOpen("row-2")).toBe(false); - }); - - it("tolerates corrupt sessionStorage by starting empty", () => { - sessionStorage.setItem(EXPANDED_KEY, "{not json"); - const store = new Store(); - expect(store.getState().expandedRows.size).toBe(0); - }); - - it("defaults the active tab to findings, or the seeded tab", () => { - expect(new Store().getState().activeTab).toBe("findings"); - expect(new Store({ activeTab: "alerts" }).getState().activeTab).toBe("alerts"); - }); -}); - -describe("status transitions", () => { - it("starts first-load and never goes stale before a snapshot lands", () => { - const store = new Store(); - expect(store.getState().status).toBe("first-load"); - store.markStale(); - expect(store.getState().status).toBe("first-load"); // still first-load — honest "connecting…" - }); - - it("goes live on a snapshot and stamps lastGoodAt", () => { - const store = new Store(); - store.applySnapshot({ findings: [] }); - expect(store.getState().status).toBe("live"); - expect(store.getState().lastGoodAt).toBeTypeOf("number"); - }); - - it("goes stale after a snapshot, keeping the last-good data", () => { - const store = new Store(); - store.applySnapshot({ findings: [{ id: "a" }] }); - store.markStale(); - expect(store.getState().status).toBe("stale"); - expect(store.getState().data).toEqual({ findings: [{ id: "a" }] }); // last-good kept, not blanked - }); -}); - -describe("expansion + disclosure mutators", () => { - it("toggles a row and persists to sessionStorage", () => { - const store = new Store(); - store.toggleRow("r1"); - expect(store.isExpanded("r1")).toBe(true); - expect(JSON.parse(sessionStorage.getItem(EXPANDED_KEY))).toContain("r1"); - store.toggleRow("r1"); - expect(store.isExpanded("r1")).toBe(false); - }); - - it("sets a prompt open state idempotently", () => { - const store = new Store(); - let notifications = 0; - store.subscribe(() => notifications++); - store.setPromptOpen("p1", true); - store.setPromptOpen("p1", true); // no-op — same state - expect(notifications).toBe(1); - expect(store.isPromptOpen("p1")).toBe(true); - }); - - it("purges cleared ids from both persisted sets", () => { - const store = new Store(); - store.toggleRow("gone"); - store.setPromptOpen("gone", true); - store.purge(["gone"]); - expect(store.isExpanded("gone")).toBe(false); - expect(store.isPromptOpen("gone")).toBe(false); - expect(JSON.parse(sessionStorage.getItem(EXPANDED_KEY))).not.toContain("gone"); - }); -}); - -describe("subscribe", () => { - it("notifies listeners on change and stops after unsubscribe", () => { - const store = new Store(); - let n = 0; - const off = store.subscribe(() => n++); - store.toggleRow("a"); - off(); - store.toggleRow("b"); - expect(n).toBe(1); - }); -}); - -describe("persistent status strip (JEF-410)", () => { - it("updates the strip from each snapshot and holds it across a tab swap", () => { - const store = new Store(); - expect(store.getState().strip).toBe(null); // no snapshot yet — blank is honest - - const strip = { "all-clear": false, "judging-state": "watching" }; - store.applySnapshot({ strip, rows: [] }); - expect(store.getState().strip).toBe(strip); - expect(store.getState().data).toEqual({ strip, rows: [] }); - - // A tab swap drops the per-tab body but MUST NOT tear down the global strip. - store.setActiveTab("alerts"); - expect(store.getState().data).toBe(null); // body cleared for the new tab - expect(store.getState().strip).toBe(strip); // header persists — no blank/redraw - }); - - it("keeps the last strip if a later snapshot omits it", () => { - const store = new Store(); - const strip = { "all-clear": true, "judging-state": "all-clear" }; - store.applySnapshot({ strip, rows: [] }); - store.applySnapshot({ rows: [] }); // malformed / strip-less snapshot - expect(store.getState().strip).toBe(strip); // never regress the header to blank - }); -}); diff --git a/engine/web/test/transitional-states.test.jsx b/engine/web/test/transitional-states.test.jsx index 0d39da4..9e61a95 100644 --- a/engine/web/test/transitional-states.test.jsx +++ b/engine/web/test/transitional-states.test.jsx @@ -1,37 +1,47 @@ -// Visual-fidelity guard for the v4 transitional states (ADR-0025 / JEF-401). The Preact client -// introduced states the maud server-render never had — a first-load "connecting…", the load-bearing -// "not updating" stale banner, and the one-shot cleared-row tombstone. These lost their token colour -// + padding after the JEF-398 cutover (they carried classes with no CSS). These tests pin the -// class/token contract so the honesty register (a stale banner must be a distinct, non-calm -// register, NEVER a false all-clear — ADR-0016) can't silently drift again. +// Visual-fidelity guard for the v4 transitional states (ADR-0025 / JEF-401 / JEF-411). The Preact +// client introduced states the maud server-render never had — a first-load "connecting…" and the +// load-bearing "not updating" stale banner. These lost their token colour + padding after the +// JEF-398 cutover (they carried classes with no CSS). These tests pin the class/token contract so +// the honesty register (a stale banner must be a distinct, non-calm register, NEVER a false +// all-clear — ADR-0016) can't silently drift again. +// +// (The one-shot cleared-row tombstone this file also guarded was removed in JEF-411 — a gone finding +// is now dropped by Preact's keyed diff, no client farewell row. That block is deleted.) import { describe, it, expect, beforeEach, vi } from "vitest"; import { render, cleanup, act } from "@testing-library/preact"; -import { Store } from "../src/store.js"; -import { findingsView, finding } from "./fixtures.js"; -import { TombstoneRow } from "../src/findings/row.jsx"; -// Stub the poll so mounting the app never fires a real fetch/interval — we assert render, not polling. -vi.mock("../src/poll.js", () => ({ startPolling: () => () => {} })); +// Capture the poll callbacks so we can drive the connection state exactly like the real poll does, +// without firing a real fetch/interval — we assert render, not polling. +let lastOpts = null; +vi.mock("../src/poll.js", () => ({ + startPolling: (opts) => { + lastOpts = opts; + return () => {}; + }, +})); const { App } = await import("../src/app.jsx"); beforeEach(() => { sessionStorage.clear(); cleanup(); + lastOpts = null; }); -/** Mount the app shell on a store in a given connection state, with the poll stubbed out. */ -function mount(seed) { - const store = new Store({ activeTab: "findings" }); - seed(store); - const { container } = render( null} />); - return { store, container }; +/** A minimal strip snapshot the app can land to go live. */ +const snapshot = () => ({ strip: { "all-clear": false, "judging-state": "watching" }, findings: [] }); + +/** Mount the app shell, then drive it into a given connection state via the poll callbacks. */ +function mount(drive = () => {}) { + const { container } = render( null} />); + act(() => drive()); + return { container }; } describe("connection banner honesty register (JEF-401)", () => { it("first-load shows the calm 'connecting…' message with the connecting class", () => { - // Fresh store: status is "first-load" until the first snapshot lands. - const { container } = mount(() => {}); + // Fresh app: status is "first-load" until the first snapshot lands. + const { container } = mount(); const msg = container.querySelector(".dash-conn .dash-conn-msg"); expect(msg, "connecting message is rendered").toBeTruthy(); expect(msg.classList.contains("dash-conn-connecting")).toBe(true); @@ -41,9 +51,9 @@ describe("connection banner honesty register (JEF-401)", () => { }); it("stale carries the LOUD non-green register (never a calm all-clear)", () => { - const { container } = mount((store) => { - store.applySnapshot(findingsView([finding("a")])); // go live first - store.markStale(); // then lose the connection + const { container } = mount(() => { + lastOpts.onSnapshot(snapshot()); // go live first + lastOpts.onStale(); // then lose the connection }); const msg = container.querySelector(".dash-conn .dash-conn-msg"); expect(msg, "stale banner is rendered").toBeTruthy(); @@ -58,27 +68,7 @@ describe("connection banner honesty register (JEF-401)", () => { }); it("live shows NO connection chrome (no false reassurance)", () => { - const { container } = mount((store) => store.applySnapshot(findingsView([finding("a")]))); + const { container } = mount(() => lastOpts.onSnapshot(snapshot())); expect(container.querySelector(".dash-conn .dash-conn-msg")).toBeNull(); }); }); - -describe("cleared-row tombstone fidelity (JEF-401)", () => { - it("carries the tombstone classes the CSS styles (calm, padded, not an alarm)", () => { - const { container } = render( - - - - -
    , - ); - const row = container.querySelector("tr.row-tombstone"); - expect(row, "tombstone row uses .row-tombstone").toBeTruthy(); - const label = row.querySelector(".tombstone"); - expect(label, "tombstone label uses .tombstone").toBeTruthy(); - expect(label.textContent).toContain("this finding cleared"); - // Calm register: it stays muted (never a breach red / alarm class). - expect(label.className).not.toContain("posture-breach"); - expect(label.className).not.toContain("alert"); - }); -});