visualproof 0.1.0 → 0.3.0

package/dist/web/src/overview.js

@@ -0,0 +1,393 @@
+// The overview's edges, chosen (CanvasSpec.md, "Edges"): with nothing selected, which edges between
+// the units on screen are drawn, and how. What is drawn is chosen at zoom points a quarter of a zoom
+// step apart (a step: a half octave), each point from the aggregations of the two steps it lies
+// between, for the camera's centre when it was asked for; the page blends two points (or, while one
+// is late, what it has) and writes the instances.
+//
+// The choosing runs off the page's thread (the owner's request, 2026-10-10: no slow frames while
+// zooming), in a worker (web/src/edgeworker.ts) asked by web/src/edgequeue.ts, which holds a copy of
+// the graph's edges and of the scene's tree and is sent the positions with each question. Where there
+// is no worker, the page runs the same OverviewModel on its own thread, as it used to.
+//
+// Position ids, as in web/src/bundles.ts: cluster c → c, node i → nc + i.
+import { SITE_BODY, SITE_GRAMMAR, SITE_PROOF, SITE_STMT } from "../../shared/graph.js";
+import { aggregate, pathOf, topK, units } from "./bundles.js";
+/** How far apart the overview's zoom points are, in zoom steps (a step: a half octave): about 9%
+ *  of zoom, the distance at which what is drawn used to be chosen again. */
+export const ZOOM_POINT = 0.25;
+/** The zoom-point coordinate of a camera zoom `k`: point i is at zoom 2^(i · ZOOM_POINT / 2). */
+export const zoomPoint = (k) => (2 * Math.log2(k)) / ZOOM_POINT;
+/** Two sets of edges blended, the second at `t` (0 to 1) and the first at what is left: an edge both
+ *  hold given once, between its two looks; one only one holds at that one's share. */
+export function blendLooks(a, b, t, put) {
+    const A = t >= 1 ? null : a;
+    const B = t <= 0 ? null : b;
+    const give = (e, beta, width, alpha, key) => {
+        if (alpha > 0.002)
+            put(e, beta, width, alpha, key);
+    };
+    if (A)
+        for (const [key, x] of A) {
+            const y = B?.get(key);
+            if (y)
+                give(y, x.beta + (y.beta - x.beta) * t, x.width + (y.width - x.width) * t, x.alpha + (y.alpha - x.alpha) * t, key);
+            else
+                give(x, x.beta, x.width, x.alpha * (1 - t), key);
+        }
+    if (B)
+        for (const [key, y] of B)
+            if (!A?.has(key))
+                give(y, y.beta, y.width, y.alpha * t, key);
+}
+/** 0 below `a`, 1 above `b`, smoothly between. */
+export function smoothstep(a, b, x) {
+    const t = Math.min(1, Math.max(0, (x - a) / (b - a)));
+    return t * t * (3 - 2 * t);
+}
+/** The buffers a point's looks travel in, transferred rather than copied. */
+export const looksBuffers = (L) => [L.a, L.b, L.path, L.len, L.beta, L.width, L.alpha].map((x) => x.buffer);
+/** An edge's key among a point's looks: its two units. */
+export const edgeKey = (a, b) => a * 4194304 + b;
+/** A point's looks indexed by edge key. */
+export function indexLooks(L) {
+    const m = new Map();
+    for (let j = 0; j < L.n; j++)
+        m.set(edgeKey(L.a[j], L.b[j]), j);
+    return m;
+}
+function pack(looks) {
+    const n = looks.size;
+    const L = {
+        n,
+        a: new Int32Array(n),
+        b: new Int32Array(n),
+        path: new Int32Array(8 * n),
+        len: new Uint8Array(n),
+        beta: new Float64Array(n),
+        width: new Float64Array(n),
+        alpha: new Float64Array(n),
+    };
+    let j = 0;
+    for (const e of looks.values()) {
+        // a path runs from one end to the other (pathOf)
+        L.a[j] = e.path[0];
+        L.b[j] = e.path[e.path.length - 1];
+        L.path.set(e.path, 8 * j);
+        L.len[j] = e.path.length;
+        L.beta[j] = e.beta;
+        L.width[j] = e.width;
+        L.alpha[j] = e.alpha;
+        j++;
+    }
+    return L;
+}
+/** How many zoom steps' aggregations are kept: the camera's two and one on either side, and two more
+ *  for where it heads or lands. */
+export const LEVELS_KEPT = 6;
+/** The choosing, wherever it runs: the graph's edges and the scene's tree as last given, and the
+ *  aggregations of the zoom steps last used (LEVELS_KEPT of them), kept until the tree or the
+ *  toggles change. */
+export class OverviewModel {
+    g = null;
+    tree = null;
+    toggles = { externals: true };
+    levels = new Map();
+    setGraph(g) {
+        this.g = g;
+        this.levels.clear();
+    }
+    setTree(tree, toggles) {
+        this.tree = tree;
+        this.toggles = { ...toggles };
+        this.levels.clear();
+    }
+    /** How many zoom steps' aggregations are held (for the tests). */
+    get levelCount() {
+        return this.levels.size;
+    }
+    /** What the overview draws at zoom point `ask.point` (zoom 2^(point · ZOOM_POINT / 2)), for the
+     *  camera centred at (x, y), with everything where `places` has it: chosen from the aggregations of
+     *  the two steps the point lies between, blended as it lies between them — none of the finer over
+     *  the first fifth of the way, all of it over the last fifth, smoothly between. */
+    choose(ask, places) {
+        if (!this.g || !this.tree)
+            throw new Error("the overview has no graph or no tree yet");
+        const zs = ask.point * ZOOM_POINT;
+        const cam = { x: ask.x, y: ask.y, k: Math.pow(2, zs / 2) };
+        const lo = Math.floor(zs);
+        const up = smoothstep(0.2, 0.8, zs - lo);
+        const at = (level) => {
+            let v = this.levels.get(level);
+            if (v)
+                this.levels.delete(level);
+            else
+                v = this.aggregateLevel(level, places);
+            // the last used last: the one used longest ago goes first
+            this.levels.set(level, v);
+            while (this.levels.size > LEVELS_KEPT)
+                this.levels.delete(this.levels.keys().next().value);
+            return this.looksOf(v, this.chooseLevel(v, cam, ask, places), ask, places);
+        };
+        const coarse = up < 1 ? at(lo) : null;
+        const fine = up > 0 ? at(lo + 1) : null;
+        const looks = new Map();
+        blendLooks(coarse, fine, up, (e, beta, width, alpha, key) => looks.set(key, { path: e.path, beta, width, alpha }));
+        return pack(looks);
+    }
+    /** The aggregation of zoom step `level`: each node's unit as the camera at 2^(level/2) sees it,
+     *  and the edges between units, counted. */
+    aggregateLevel(level, places) {
+        const g = this.g;
+        const unit = units({ ...this.tree, curR: places.curR }, Math.pow(2, level / 2), 45);
+        // statements and bodies: never proofs or grammar, which no TCB follows (proof edges are no more,
+        // the owner's decision of 2026-10-15)
+        const sites = SITE_STMT | SITE_BODY;
+        const ext = this.toggles.externals;
+        const pairs = aggregate(g, unit, sites, (i) => i < g.projectCount || ext);
+        return { pairs, units: Int32Array.from(new Set(unit)) };
+    }
+    /** Choose what step `v` draws for a camera `cam`. About 0.6 per unit on screen (between 250 and
+     *  1,500), so that zoomed in each stays an edge one can follow: those with both ends in view
+     *  first (heaviest first; among equals the short ones, then those nearest the middle of the
+     *  screen), then, in up to a fifth of the budget, those leaving the view (heaviest first): what
+     *  the part in view uses, or is used by, elsewhere. The limit is soft: the next fifth past it is
+     *  drawn fainter the further past it. */
+    chooseLevel(v, cam, ask, S) {
+        const P = v.pairs;
+        const hw = ask.w / 2 / cam.k, hh = ask.h / 2 / cam.k;
+        // a margin of a quarter of the view: what is about to scroll in is already there
+        const x0 = cam.x - hw * 1.25, x1 = cam.x + hw * 1.25, y0 = cam.y - hh * 1.25, y1 = cam.y + hh * 1.25;
+        const diag = Math.hypot(hw, hh);
+        const nc = this.tree.nc;
+        const X = (id) => (id < nc ? S.cwx[id] : S.nwx[id - nc]);
+        const Y = (id) => (id < nc ? S.cwy[id] : S.nwy[id - nc]);
+        const U = v.units;
+        let onScreen = 0;
+        for (let k = 0; k < U.length; k++) {
+            const x = X(U[k]), y = Y(U[k]);
+            if (Math.abs(x - cam.x) <= hw && Math.abs(y - cam.y) <= hh)
+                onScreen++;
+        }
+        const budget = Math.max(250, Math.min(1500, Math.round(0.6 * onScreen)));
+        const score = new Float64Array(P.n);
+        const both = [];
+        const one = [];
+        for (let k = 0; k < P.n; k++) {
+            const ax = X(P.a[k]), ay = Y(P.a[k]), bx = X(P.b[k]), by = Y(P.b[k]);
+            const ia = ax >= x0 && ax <= x1 && ay >= y0 && ay <= y1;
+            const ib = bx >= x0 && bx <= x1 && by >= y0 && by <= y1;
+            if (!ia && !ib)
+                continue;
+            if (ia && ib) {
+                // the weight decides; among equals, the short one, then the one nearer the middle
+                const len = Math.hypot(bx - ax, by - ay) / diag;
+                const d = Math.hypot((ax + bx) / 2 - cam.x, (ay + by) / 2 - cam.y) / diag;
+                score[k] = P.w[k] + 0.55 * (1 - Math.min(1, len)) + 0.4 * (1 - Math.min(1, d));
+                both.push(k);
+            }
+            else {
+                score[k] = P.w[k];
+                one.push(k);
+            }
+        }
+        // each kind's share, and the soft fifth past it, ranked by score: rank r past the share draws
+        // the fainter the further past
+        const soft = (n) => Math.ceil(n * 1.2);
+        const ranked = (idx, cap) => {
+            const top = Array.from(topK(Int32Array.from(idx), score, soft(cap))).sort((a, b) => score[b] - score[a]);
+            const strength = new Float32Array(top.length);
+            const span = Math.max(1, soft(cap) - cap);
+            for (let r = 0; r < top.length; r++)
+                strength[r] = r < cap ? 1 : Math.max(0, 1 - (r - cap + 1) / (span + 1));
+            return { idx: Int32Array.from(top), strength };
+        };
+        const innerCap = budget - Math.min(Math.round(budget / 5), one.length);
+        const inner = ranked(both, innerCap);
+        const outer = ranked(one, budget - Math.min(inner.idx.length, innerCap));
+        const n = inner.idx.length + outer.idx.length;
+        const sel = new Int32Array(n), inside = new Uint8Array(n), strength = new Float32Array(n);
+        sel.set(inner.idx);
+        sel.set(outer.idx, inner.idx.length);
+        inside.fill(1, 0, inner.idx.length);
+        strength.set(inner.strength);
+        strength.set(outer.strength, inner.idx.length);
+        return { sel, inside, strength };
+    }
+    /** How step `v` draws what was chosen of it, each edge by its units' ids (`a:b`): width and alpha
+     *  grow with the weight relative to the heaviest chosen of their kind (in view, or leaving it), so
+     *  zoomed in a single dependency between two declarations reads as clearly as a heavy bundle does
+     *  zoomed out; an edge past the soft limit fainter by its rank. */
+    looksOf(v, chosen, ask, S) {
+        const P = v.pairs;
+        const T = this.tree;
+        const { sel, inside, strength } = chosen;
+        let maxIn = 1, maxOut = 1, nIn = 0, n = 0;
+        for (let j = 0; j < sel.length; j++) {
+            const w = P.w[sel[j]];
+            n += strength[j];
+            if (inside[j]) {
+                maxIn = Math.max(maxIn, w);
+                nIn += strength[j];
+            }
+            else
+                maxOut = Math.max(maxOut, w);
+        }
+        const nc = T.nc;
+        const X = (id) => (id < nc ? S.cwx[id] : S.nwx[id - nc]);
+        const Y = (id) => (id < nc ? S.cwy[id] : S.nwy[id - nc]);
+        // many bundles share the screen: the more there are, the fainter each; with a selection the
+        // overview steps back so the selection's own edges read
+        const crowd = Math.min(1, Math.sqrt(400 / Math.max(1, n)));
+        const fade = (ask.dim ? DIM : 1) * crowd;
+        // few edges in view (zoomed in): even a single one clearly visible
+        const floor = 0.05 + 0.3 * Math.min(1, Math.max(0, (1200 - nIn) / 900));
+        const looks = new Map();
+        for (let j = 0; j < sel.length; j++) {
+            const k = sel[j];
+            const a = P.a[k], b = P.b[k], w = P.w[k];
+            const max = inside[j] ? maxIn : maxOut;
+            const t = Math.log1p(w) / Math.log1p(max);
+            // widths are absolute enough that a bundle of one stays a thin line
+            const width = 0.7 + 2.0 * t * Math.min(1, Math.log1p(max) / Math.log1p(50));
+            const alpha = (floor + (0.45 - floor) * t * t) * fade * strength[j];
+            // bundling strength: an edge short beside the cluster it would bend through (neighbours in
+            // a cluster seen up close) is drawn nearly straight, so it reads as an edge between those
+            // two; one that spans its cluster bends along the tree
+            const path = pathOf(T, a, b);
+            let R = 0;
+            for (let q = 1; q < path.length - 1; q++)
+                if (path[q] < nc)
+                    R = Math.max(R, S.drawnR[path[q]]);
+            const d = Math.hypot(X(b) - X(a), Y(b) - Y(a));
+            const beta = R > 0 ? 0.85 * Math.min(1, (2 * d) / R) : 0.85;
+            looks.set(`${a}:${b}`, { path, beta, width, alpha });
+        }
+        return looks;
+    }
+}
+/** How much a selection dims the overview, so that its own edges read, the rest still seen faintly:
+ *  on the board and in an artwork alike (the owner's decision of 2026-10-15; 0.12 before). */
+export const DIM = 0.3;
+/** Blend sets of looks, in order of their zoom points, their weights summing to 1, and give what is
+ *  drawn: `put(looks, j, beta, width, alpha)` for edge j of `looks`. Two sets are blended exactly as
+ *  blendLooks blends them (the second at its weight); with more (a late point being caught up), an
+ *  edge's alpha is the sum of its sets' alphas at their weights, and its beta and width are the
+ *  weighted mean over the sets that hold it. An edge is given once, in the order of the first set that
+ *  holds it; one too faint to see is left out. */
+export function blendPoints(sets, put) {
+    const give = (L, j, beta, width, alpha) => {
+        if (alpha > 0.002)
+            put(L, j, beta, width, alpha);
+    };
+    if (sets.length <= 2) {
+        const t = sets.length === 2 ? sets[1].w : 0;
+        const A = t >= 1 ? null : sets[0] ?? null;
+        const B = t <= 0 ? null : sets[1] ?? null;
+        if (A) {
+            const X = A.looks;
+            for (let j = 0; j < X.n; j++) {
+                const xa = X.alpha[j] * A.scale;
+                const k = B ? B.index.get(edgeKey(X.a[j], X.b[j])) : undefined;
+                if (k !== undefined) {
+                    const Y = B.looks;
+                    const ya = Y.alpha[k] * B.scale;
+                    give(Y, k, X.beta[j] + (Y.beta[k] - X.beta[j]) * t, X.width[j] + (Y.width[k] - X.width[j]) * t, xa + (ya - xa) * t);
+                }
+                else
+                    give(X, j, X.beta[j], X.width[j], xa * (1 - t));
+            }
+        }
+        if (B) {
+            const Y = B.looks;
+            for (let k = 0; k < Y.n; k++) {
+                if (A && A.index.has(edgeKey(Y.a[k], Y.b[k])))
+                    continue;
+                give(Y, k, Y.beta[k], Y.width[k], Y.alpha[k] * B.scale * t);
+            }
+        }
+        return;
+    }
+    const seen = new Set();
+    for (let s = 0; s < sets.length; s++) {
+        const X = sets[s].looks;
+        for (let j = 0; j < X.n; j++) {
+            const key = edgeKey(X.a[j], X.b[j]);
+            if (seen.has(key))
+                continue;
+            seen.add(key);
+            let alpha = 0, beta = 0, width = 0, held = 0;
+            for (let r = s; r < sets.length; r++) {
+                const S = sets[r];
+                const k = r === s ? j : S.index.get(key);
+                if (k === undefined)
+                    continue;
+                alpha += S.w * S.looks.alpha[k] * S.scale;
+                beta += S.w * S.looks.beta[k];
+                width += S.w * S.looks.width[k];
+                held += S.w;
+            }
+            if (held > 0)
+                give(X, j, beta / held, width / held, alpha);
+        }
+    }
+}
+/** Two points ready further apart than this are not blended across: the gap is too wide for what
+ *  lies between them to be read from them. */
+export const BRACKET = 4;
+/** What the camera at zoom-point coordinate `z` would draw with the points `ready` (any order): the
+ *  two points it lies between, blended by where it lies; where one of them is not ready, the nearest
+ *  ready ones on either side, blended by where it lies between them (when they are at most BRACKET
+ *  apart), or the nearest one ready at full weight. Only the points ready within `near` are looked at
+ *  while there are any. Null when nothing is ready. */
+export function aim(z, ready, near = [-Infinity, Infinity]) {
+    const all = [...ready];
+    const inside = all.filter((r) => r >= near[0] && r <= near[1]);
+    const R = new Set(inside.length ? inside : all);
+    const i0 = Math.floor(z);
+    const t = z - i0;
+    if (R.has(i0) && R.has(i0 + 1))
+        return [{ point: i0, w: 1 - t }, { point: i0 + 1, w: t }];
+    let p = -Infinity, q = Infinity;
+    for (const r of R) {
+        if (r <= z && r > p)
+            p = r;
+        if (r >= z && r < q)
+            q = r;
+    }
+    if (p === q)
+        return [{ point: p, w: 1 }];
+    if (q - p <= BRACKET) {
+        const u = (z - p) / (q - p);
+        return [{ point: p, w: 1 - u }, { point: q, w: u }];
+    }
+    if (z - p <= q - z)
+        return isFinite(p) ? [{ point: p, w: 1 }] : null;
+    return [{ point: q, w: 1 }];
+}
+/** How much weight separates two blends: what has to move from one point to another. */
+export function weightGap(a, b) {
+    const m = new Map();
+    for (const x of a)
+        m.set(x.point, (m.get(x.point) ?? 0) + x.w);
+    for (const x of b)
+        m.set(x.point, (m.get(x.point) ?? 0) - x.w);
+    let d = 0;
+    for (const v of m.values())
+        d += Math.abs(v);
+    return d / 2;
+}
+/** `from` moved towards `to` by at most `step` of weight: all the way when it is that near
+ *  (`to` itself, so that a camera followed exactly draws exactly what it would), else that far along
+ *  the straight way between them. */
+export function ease(from, to, step) {
+    const d = weightGap(from, to);
+    if (d <= step + 1e-12)
+        return to;
+    const f = step / d;
+    const m = new Map();
+    for (const x of from)
+        m.set(x.point, (m.get(x.point) ?? 0) + x.w * (1 - f));
+    for (const x of to)
+        m.set(x.point, (m.get(x.point) ?? 0) + x.w * f);
+    return [...m].filter(([, w]) => w > 1e-9).sort((a, b) => a[0] - b[0]).map(([point, w]) => ({ point, w }));
+}

package/dist/web/src/reviewqueue.js

@@ -0,0 +1,250 @@
+// The review wherever it has a focus (ReviewSpec, "What the page shows"; ViewSpec decisions 5 and
+// 28): the order in which to read the declarations a target rests on, how far its review has come
+// and why a declaration is in the TCB at all. What a target's review holds is its review set, the
+// non-standard axioms it rests on included, whatever the board holds, and the strip, the panel and
+// the Targets list count exactly that (decided 2026-10-08). The queue and the chain are pure
+// functions of the graph (shared/reviewqueue.ts); the class below keeps them for the review on show
+// and the last few graphs shown — the Time Machine goes back and forth between builds' graphs, and
+// working them out again holds each step a tenth of a second — and draws them in the view's review
+// strip and the panel.
+//
+// The strip is one line of progress, with nothing to press but the target's name (the owner's
+// decision of 2026-10-12): people review by following names in the source window, so the page has
+// no "Next to review" to walk them. What agents comment on is where people start (AgentSpec decision
+// 6): the strip says how many declarations of the TCB an agent comments on, and the review list marks
+// them. Their advice is never counted here: the progress and what the reader reviewed are people's.
+//
+// Key declarations come first in reading (ExportSpec decision 4): progress has two levels, key
+// (approved of the key declarations, the target among them) and all (approved of the review). They
+// are marked ◆ in the review list, which can show them alone; what each supports is shared/keys.ts.
+import { SITE_STMT } from "../../shared/graph.js";
+import { advice, adviceOf, fresh, statusOf } from "../../shared/review.js";
+import { keyGraph, statusCounts } from "../../shared/keys.js";
+import { keyMarks } from "../../shared/review.js";
+import { inTargets, nonStandardAxiom, offBoard, queueProgress, reviewQueue, settled, whyChain } from "../../shared/reviewqueue.js";
+import { BOT } from "./agentmark.js";
+import { escapeHtml } from "./highlight.js";
+/** How a declaration reads in a chain: with its namespace's last part, which tells `Module.env`
+ *  from `ModExpr.env`. */
+function chainName(g, i) {
+    return g.nodes[i].name.split(".").slice(-2).join(".");
+}
+/** how many graphs' review queues are kept: the graph of now and a few builds' */
+const KEEP_FLOWS = 4;
+export class ReviewFlow {
+    hooks;
+    /** per graph, the most recently used last */
+    states = [];
+    constructor(hooks) {
+        this.hooks = hooks;
+    }
+    isTarget(i) {
+        return Object.hasOwn(this.hooks.review().targets, this.hooks.graph().nodes[i].name);
+    }
+    /** `root`'s review (shared/reviewqueue.ts): its review set, in review order, and the axioms it
+     *  rests on. It depends on the graph, the targets (what is shared) and the trusted
+     *  prefixes (what needs review), not on the opinions: it is worked out again only when one of
+     *  those changed. */
+    queue(root) {
+        const st = this.state();
+        let q = st.orders.get(root);
+        if (!q) {
+            const { g } = st;
+            const d = this.hooks.review();
+            const targets = Object.keys(d.targets).map((n) => g.byName.get(n)).filter((i) => i !== undefined);
+            st.shared ??= inTargets(g, targets);
+            q = reviewQueue(g, d, root, st.shared);
+            st.orders.set(root, q);
+        }
+        return q;
+    }
+    /** What is worked out for the graph on show, under the targets and trusted modules of now. */
+    state() {
+        const g = this.hooks.graph();
+        const d = this.hooks.review();
+        const review = Object.keys(d.targets).sort().join("\n") + "\n\n" + d.trusted.join("\n");
+        const k = this.states.findIndex((s) => s.g === g);
+        let st = k >= 0 ? this.states.splice(k, 1)[0] : null;
+        if (!st || st.review !== review)
+            st = { g, review, orders: new Map(), shared: null, keyGraphs: new Map() };
+        this.states.push(st);
+        if (this.states.length > KEEP_FLOWS)
+            this.states.shift();
+        return st;
+    }
+    /** `root`'s review set in review order. */
+    order(root) {
+        return this.queue(root).order;
+    }
+    /** `root`'s key declarations, what each supports and the key graph (shared/keys.ts): worked out
+     *  again when its queue is, or its marks change. */
+    keys(root) {
+        const q = this.queue(root);
+        const st = this.state();
+        const marks = keyMarks(this.hooks.review(), this.hooks.graph().nodes[root].name).join("\n");
+        const was = st.keyGraphs.get(root);
+        if (was && was.marks === marks)
+            return was.kg;
+        const kg = keyGraph(this.hooks.graph(), this.hooks.review(), root, q.order);
+        st.keyGraphs.set(root, { marks, kg });
+        return kg;
+    }
+    /** Whether `i` is a key declaration of `root` (the target itself is one). */
+    isKey(root, i) {
+        return i === root || this.keys(root).keys.includes(i);
+    }
+    /** Whether `i` is in what `root`'s review holds: what can be marked key for it. */
+    inReview(root, i) {
+        return this.queue(root).order.includes(i);
+    }
+    /** How far the review of `root`'s key declarations has come: approved of K, the target among
+     *  them. */
+    keyProgress(root) {
+        return statusCounts(this.hooks.graph(), this.hooks.review(), this.keys(root).keys);
+    }
+    /** How far `root`'s review has come: its review set, and the axioms beside it. */
+    progress(root) {
+        return queueProgress(this.hooks.graph(), this.hooks.review(), this.queue(root));
+    }
+    /** Whether the reader is done with `i`: they gave an opinion on its present version, and a
+     *  non-standard axiom is approved besides (shared/reviewqueue.ts, settled). */
+    done(i) {
+        const g = this.hooks.graph();
+        const v = g.nodes[i];
+        return settled(this.hooks.review(), this.hooks.reader(), v.name, v.hash, nonStandardAxiom(g, i));
+    }
+    /** The same for an axiom the graph has no declaration for on the board. */
+    axiomDone(a) {
+        return settled(this.hooks.review(), this.hooks.reader(), a.name, undefined, true);
+    }
+    /** What is left of `root`'s review for this reader. */
+    left(root) {
+        const q = this.queue(root);
+        return q.order.filter((i) => !this.done(i)).length + offBoard(q).filter((a) => !this.axiomDone(a)).length;
+    }
+    /** What is left of `root`'s key declarations for this reader. */
+    keysLeft(root) {
+        return this.keys(root).keys.filter((i) => !this.done(i)).length;
+    }
+    /** The declarations of `root`'s TCB that an agent comments on (advice on the present version), in
+     *  review order. */
+    agentComments(root) {
+        const g = this.hooks.graph();
+        const d = this.hooks.review();
+        return this.order(root).filter((i) => adviceOf(d, g.nodes[i].name, g.nodes[i].hash) === "comment");
+    }
+    /** The review strip, wherever the review's focus is `root` (ViewSpec decision 28): one line of
+     *  progress, "Reviewing ★root · ◆ 2 / 9 · 3 / 160 approved · 1 commented", the target's name the
+     *  way back to it, and nothing else to press (the owner's decision of 2026-10-12). What it counts
+     *  is the focus's review set, whatever the board holds. */
+    renderStrip(root) {
+        const g = this.hooks.graph();
+        const d = this.hooks.review();
+        const p = this.progress(root);
+        const left = this.left(root);
+        const title = document.querySelector("#lens-title");
+        title.innerHTML =
+            `<span class="lens-rv">Reviewing</span><button class="lens-target" data-go="${root}" title="${escapeHtml(g.nodes[root].name)}: back to the target, its progress and its TCB in review order">` +
+                `<span class="star">★</span>${escapeHtml(g.short(root))}</button>`;
+        title.title = "";
+        const meta = document.querySelector("#lens-meta");
+        const q = this.queue(root);
+        const ext = q.order.filter((i) => g.isExt(i)).length;
+        const off = offBoard(q).length;
+        // two levels: the key declarations, then everything
+        const k = this.keyProgress(root);
+        const keysLeft = this.keysLeft(root);
+        // what agents comment on, where people start: how many, as advice beside the counts, never in them
+        const commented = this.agentComments(root);
+        const who = [...new Set(commented.flatMap((i) => advice(d, g.nodes[i].name).filter((o) => o.verdict === "comment" && fresh(o, g.nodes[i].hash)).map((o) => o.by)))].sort();
+        const adv = commented.length
+            ? ` · <span class="lens-adv" title="${escapeHtml(`${who.join(", ")} (agent${who.length === 1 ? "" : "s"}) ${who.length === 1 ? "comments" : "comment"} on ${commented.length} declaration${commented.length === 1 ? "" : "s"} here — advice, not counted; the target's review list marks them`)}">${BOT}${escapeHtml(who.length === 1 ? `${who[0]} comments on` : "Agents comment on")} ${commented.length}</span>`
+            : "";
+        meta.innerHTML =
+            `· <span class="lens-key" title="${escapeHtml(`Key declarations: ${k.approved} of ${k.total} approved (the target among them) · ${keysLeft} not yet reviewed by you`)}"><span class="key-mark">◆</span>${k.approved} / ${k.total}</span>` +
+                ` · ${p.approved} / ${p.total} approved` + (p.commented ? ` · ${p.commented} commented` : "") + (p.stale ? ` · ${p.stale} stale` : "") + adv +
+                // the reader's own part done: an opinion on every one, every non-standard axiom approved
+                (left ? "" : ` · <span class="lens-done">All reviewed ✓</span>`);
+        meta.title =
+            `To review · ${(q.order.length - ext).toLocaleString()} declarations` + (ext ? ` + ${ext.toLocaleString()} external` : "") +
+                (off ? ` + ${off} axiom${off === 1 ? "" : "s"} outside the graph` : "") +
+                (left ? ` · ${left} not yet reviewed by you` : " · you have given an opinion on every one, and every non-standard axiom in it is approved");
+    }
+    /** The panel's list of a target's review in review order: numbered, the review status of each,
+     *  the ones the reader reviewed faded. A non-standard axiom says so, and
+     *  where it is used; one the graph has no declaration for on the board is listed first, and goes
+     *  to the target, whose panel approves it. */
+    listHtml(root, keyOnly = false) {
+        const g = this.hooks.graph();
+        const d = this.hooks.review();
+        const q = this.queue(root);
+        const keys = new Set(this.keys(root).keys);
+        const off = keyOnly ? [] : offBoard(q);
+        // the positions are the review order's, also where only the key declarations are listed
+        const order = keyOnly ? q.order.filter((i) => keys.has(i)) : q.order;
+        const position = new Map(q.order.map((i, k) => [i, k]));
+        const offN = offBoard(q).length;
+        const where = (a) => (a.via.length ? ` · used in ${a.via.map((j) => chainName(g, j)).join(", ")}` : "");
+        const axiomOf = new Map(q.axioms.filter((a) => a.node !== null).map((a) => [a.node, a]));
+        const offRows = off.map((a, k) => `<button class="row q-row rv-${statusOf(d, a.name, undefined)}${this.axiomDone(a) ? " q-mine" : ""}" data-walk="${root}" title="${escapeHtml(`${a.name}: a non-standard axiom the target rests on, which the graph has no declaration for${where(a)} — approve it or comment on it in the target's panel`)}">` +
+            `<span class="q-n">${k + 1}</span>axiom ${escapeHtml(a.name)}<span class="muted">${escapeHtml(where(a))}</span></button>`);
+        const kp = this.keyProgress(root);
+        const note = keyOnly
+            ? `The key declarations, ◆, in review order: ${kp.approved} of ${kp.total} approved, ${this.keysLeft(root)} not yet reviewed by you.`
+            : `Non-standard axioms first, then bottom-up: what a declaration uses comes before it; ` +
+                `${this.left(root)} of ${q.order.length + offN} not yet reviewed by you.`;
+        return (`<div class="q-note muted">${note}</div>` +
+            `<div class="q-list">` +
+            offRows.join("") +
+            order
+                .map((i, k) => {
+                const v = g.nodes[i];
+                const mine = this.done(i);
+                const cls = `row q-row rv-${statusOf(d, v.name, v.hash)}${mine ? " q-mine" : ""}`;
+                const what = mine ? " — you reviewed it" : "";
+                // an agent's advice, beside the row's status: a mark, never the status
+                const adv = adviceOf(d, v.name, v.hash);
+                const mark = adv ? `<span class="q-adv q-adv-${adv}" title="${adv === "approve" ? "An agent suggests approving it" : "An agent comments on it"}">${BOT}</span>` : "";
+                const ax = axiomOf.get(i);
+                const key = i !== root && keys.has(i);
+                return (`<button class="${cls}${key ? " q-key" : ""}" data-walk="${i}" title="Go to ${escapeHtml(v.name)}${what}${key ? " — a key declaration" : ""}${ax ? escapeHtml(` — a non-standard axiom${where(ax)}`) : ""}">` +
+                    `<span class="q-n">${offN + position.get(i) + 1}</span>${i === root ? `<span class="star">★</span>` : key ? `<span class="key-mark">◆</span>` : ""}${ax ? "axiom " : ""}${escapeHtml(v.name)}${ax ? `<span class="muted">${escapeHtml(where(ax))}</span>` : ""}${mark}</button>`);
+            })
+                .join("") +
+            `</div>`);
+    }
+    /** Why `i` is in `root`'s review, for the panel: the shortest chain of references from the
+     *  target to it, each step a link — or, for a non-standard axiom reached through a proof, where
+     *  it is used; and where it comes in the review order. "" when it is not in it. */
+    whyHtml(root, i) {
+        const g = this.hooks.graph();
+        const path = i === root ? null : whyChain(g, root, i);
+        const q = this.queue(root);
+        const at = q.order.indexOf(i);
+        const ax = q.axioms.find((a) => a.node === i);
+        // the target as everywhere else, the others with enough of their namespace to tell them apart
+        const label = (j) => (j === root ? g.short(j) : chainName(g, j));
+        const step = (j) => `<button class="why-step${j === i ? " here" : ""}" data-go="${j}" title="${escapeHtml(g.nodes[j].name)}">` +
+            (j === root ? `<span class="star">★</span>` : "") + `${escapeHtml(label(j))}</button>`;
+        const pos = at >= 0 ? `<span class="muted"> · ${at + 1} of ${q.order.length} in review order</span>` : "";
+        if (!path) {
+            if (!ax)
+                return "";
+            return (`<div class="why"><div class="why-h">Why in the review of ${step(root)}${pos}</div>` +
+                `<div class="why-chain"><span class="muted">A non-standard axiom it rests on (through a proof): it needs review whatever is trusted${ax.via.length ? "; used in " : "."}</span>` +
+                ax.via.map((j) => step(j)).join(" ") +
+                `</div></div>`);
+        }
+        // where the reference sits in the declaration that makes it
+        const how = (u, v) => {
+            let s = 0;
+            for (let e = g.outStart[u]; e < g.outStart[u + 1]; e++)
+                if (g.outDst[e] === v)
+                    s |= g.outSite[e];
+            return s & SITE_STMT ? "in the statement of" : "in the body of";
+        };
+        const arrow = (u, v) => `<span class="why-arrow" title="${escapeHtml(`${label(v)} is used ${how(u, v)} ${label(u)}`)}">→</span>`;
+        return (`<div class="why"><div class="why-h">Why in the TCB of ${step(root)}${pos}</div>` +
+            `<div class="why-chain">${path.map((j, k) => (k ? arrow(path[k - 1], j) : "") + step(j)).join("")}</div></div>`);
+    }
+}

package/dist/web/src/scene.js

@@ -224,6 +224,23 @@ export class Scene {
         this.moving = true;
         return true;
     }
+    /** Pin one body at a place in its parent's coordinates, as a drop there would (the linear form's
+     *  drop, web/src/linear.ts): brought inside the parent, the latest drop, the rest making way. */
+    pinAt(kind, k, lx, ly) {
+        if (kind === "cluster") {
+            this.pinC.set(k, this.inside(this.parent[k], this.homeSize(k), lx, ly));
+            this.dropSeq.set(k, this.dropNext++);
+            this.touch(this.parent[k]);
+        }
+        else {
+            this.pinN.set(k, this.inside(this.nodeCluster[k], LEAF_R, lx, ly));
+            this.dropSeq.set(this.nc + k, this.dropNext++);
+            this.touch(this.nodeCluster[k]);
+        }
+        this.computeAnchors();
+        this.motion?.wakeDisplaced();
+        this.moving = true;
+    }
     pins(names) {
         const out = { nodes: {}, clusters: {} };
         const r = (v) => Math.round(v * 10) / 10;