@variance-authority/tribunal 0.1.0

package/dist/ui/handed.d.ts

@@ -0,0 +1,60 @@
+/**
+ * The bands a component did not move in on its own, and who moved them.
+ *
+ * A revision that restyles a button and also adds a label to one of the places
+ * that mounts it produces one reading per render, and the change page unions
+ * them: *Button moved in what it announces, its layout and its style values*.
+ * Two of those three are the button's file. The first is a prop, written in a
+ * card, and the button is where it arrived. A reviewer told the button announces
+ * something new goes to `button.tsx` and finds nothing that could have done it.
+ *
+ * Nothing new is measured here. The three records that separate the two already
+ * land: which bands moved per render, which subjects each component is drawn in,
+ * and which components the diff reaches.
+ *
+ * ## The control group is the whole claim
+ *
+ * A band belongs to a parent when the renders it moved in are *exactly* the
+ * renders that parent draws — every one of them, and no other. `a11y` moving in
+ * the six renders `ProductCard` draws and holding still in the ten it does not
+ * is a partition, and a partition is evidence. Overlap is not: `geometry` also
+ * moved in the button's own small-size stories, which no card draws, so the
+ * cards cannot be what moved it.
+ *
+ * Which makes the other half load-bearing. **Without renders where the band held
+ * still there is no claim to make.** `token` moved everywhere the button is
+ * drawn, and every ancestor of the button trivially covers *everywhere* — so a
+ * rule that skipped the control group would hand the button's own restyle to
+ * whichever card sorted first. `CardFooter` is the honest version of the same
+ * shape: it is drawn in six renders, moved in all six, and is very probably
+ * carrying somebody else's props — and this says nothing about it, because the
+ * suite contains no render that would have distinguished the two.
+ *
+ * ## Why the holder has to be in the diff
+ *
+ * A parent the commit never touched hands nothing new down: whatever it passes,
+ * it passed in the baseline too. Requiring the reach walk to arrive at the
+ * holder is what keeps a coincidence — a container that happens to be drawn in
+ * exactly those six renders — from being read as a cause.
+ *
+ * ## What it will not say
+ *
+ * That the holder is *why* the pixels differ. It owns the band: the thing that
+ * moved in this sense is written in its file, and the decision belongs there.
+ * The run's own sentence, on the movement rows, is the answer to *why*.
+ */
+import type { BuildDetail } from '../review-types.js';
+/** One band a component moved in that a parent, not its own file, owns. */
+export interface Handed {
+    readonly band: string;
+    /** Every parent the partition fits, sorted. Never empty, and rarely not one. */
+    readonly holders: readonly string[];
+    /** Renders the band moved in — all of them, and all of them drawn by the holders. */
+    readonly moved: number;
+    /** Renders this component was drawn and read in where the band held still. */
+    readonly held: number;
+}
+/** One build's separation of a component's own movement from what it was given. */
+export type Handing = (component: string) => readonly Handed[];
+export declare function handedTo(build: BuildDetail): Handing;
+//# sourceMappingURL=handed.d.ts.map

package/dist/ui/handed.js

@@ -0,0 +1,122 @@
+/**
+ * The bands a component did not move in on its own, and who moved them.
+ *
+ * A revision that restyles a button and also adds a label to one of the places
+ * that mounts it produces one reading per render, and the change page unions
+ * them: *Button moved in what it announces, its layout and its style values*.
+ * Two of those three are the button's file. The first is a prop, written in a
+ * card, and the button is where it arrived. A reviewer told the button announces
+ * something new goes to `button.tsx` and finds nothing that could have done it.
+ *
+ * Nothing new is measured here. The three records that separate the two already
+ * land: which bands moved per render, which subjects each component is drawn in,
+ * and which components the diff reaches.
+ *
+ * ## The control group is the whole claim
+ *
+ * A band belongs to a parent when the renders it moved in are *exactly* the
+ * renders that parent draws — every one of them, and no other. `a11y` moving in
+ * the six renders `ProductCard` draws and holding still in the ten it does not
+ * is a partition, and a partition is evidence. Overlap is not: `geometry` also
+ * moved in the button's own small-size stories, which no card draws, so the
+ * cards cannot be what moved it.
+ *
+ * Which makes the other half load-bearing. **Without renders where the band held
+ * still there is no claim to make.** `token` moved everywhere the button is
+ * drawn, and every ancestor of the button trivially covers *everywhere* — so a
+ * rule that skipped the control group would hand the button's own restyle to
+ * whichever card sorted first. `CardFooter` is the honest version of the same
+ * shape: it is drawn in six renders, moved in all six, and is very probably
+ * carrying somebody else's props — and this says nothing about it, because the
+ * suite contains no render that would have distinguished the two.
+ *
+ * ## Why the holder has to be in the diff
+ *
+ * A parent the commit never touched hands nothing new down: whatever it passes,
+ * it passed in the baseline too. Requiring the reach walk to arrive at the
+ * holder is what keeps a coincidence — a container that happens to be drawn in
+ * exactly those six renders — from being read as a cause.
+ *
+ * ## What it will not say
+ *
+ * That the holder is *why* the pixels differ. It owns the band: the thing that
+ * moved in this sense is written in its file, and the decision belongs there.
+ * The run's own sentence, on the movement rows, is the answer to *why*.
+ */
+import { loudestFirst } from './sense.js';
+const NONE = [];
+export function handedTo(build) {
+    const census = build.composition;
+    // `whole` is the run refusing to attribute the diff at all, which is a missing
+    // input and not an empty reach. Either way there is no walk, and with no walk
+    // every parent is unreached and nothing here can be said.
+    const graph = build.reach !== null && build.reach.whole === undefined ? build.reach : null;
+    if (census === null || graph === null)
+        return () => NONE;
+    const places = new Map(census.map((each) => [each.component, each]));
+    const reached = new Set(graph.components.map((each) => each.component));
+    // Only the renders that compared hashes. A subject whose baseline carried none
+    // is not a render where a band held still — it is a render nobody read, and
+    // counting it as a control would let any parent partition anything.
+    const read = build.subjects.filter((subject) => subject.moved !== undefined);
+    return (component) => {
+        const place = places.get(component);
+        if (place === undefined)
+            return NONE;
+        const drawn = new Set(place.subjects);
+        const bands = new Map();
+        for (const subject of read) {
+            if (!drawn.has(subject.subject))
+                continue;
+            const entry = (subject.moved ?? []).find((each) => each.component === component);
+            bands.set(subject.subject, new Set(entry?.bands ?? []));
+        }
+        if (bands.size === 0)
+            return NONE;
+        const above = enclosing(component, places).filter((name) => reached.has(name));
+        if (above.length === 0)
+            return NONE;
+        const found = [];
+        for (const band of loudestFirst(new Set([...bands.values()].flatMap((each) => [...each])))) {
+            const moved = [];
+            const held = [];
+            for (const [subject, sensed] of bands)
+                (sensed.has(band) ? moved : held).push(subject);
+            if (held.length === 0)
+                continue;
+            const holders = above.filter((name) => {
+                const subjects = new Set(places.get(name)?.subjects ?? []);
+                if (held.some((each) => subjects.has(each)))
+                    return false;
+                return moved.every((each) => subjects.has(each));
+            });
+            if (holders.length === 0)
+                continue;
+            found.push({ band, holders: [...holders].sort(), moved: moved.length, held: held.length });
+        }
+        return found;
+    };
+}
+/**
+ * Every component that encloses this one anywhere in the suite.
+ *
+ * All depths, not the nearest: a prop written two rungs up arrives just the
+ * same, and the partition is what decides whether the rung is the right one.
+ * `seen` starts holding the component itself, so a render tree folded over a
+ * suite — a menu inside its own submenu — terminates instead of closing a loop.
+ */
+function enclosing(component, places) {
+    const found = new Set();
+    const queue = [...(places.get(component)?.within ?? [])];
+    const seen = new Set([component]);
+    while (queue.length > 0) {
+        const name = queue.pop();
+        if (name === undefined || seen.has(name))
+            continue;
+        seen.add(name);
+        found.add(name);
+        queue.push(...(places.get(name)?.within ?? []));
+    }
+    return [...found].sort();
+}
+//# sourceMappingURL=handed.js.map

package/dist/ui/handed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"handed.js","sourceRoot":"","sources":["../../src/ui/handed.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * The bands a component did not move in on its own, and who moved them.\n *\n * A revision that restyles a button and also adds a label to one of the places\n * that mounts it produces one reading per render, and the change page unions\n * them: *Button moved in what it announces, its layout and its style values*.\n * Two of those three are the button's file. The first is a prop, written in a\n * card, and the button is where it arrived. A reviewer told the button announces\n * something new goes to `button.tsx` and finds nothing that could have done it.\n *\n * Nothing new is measured here. The three records that separate the two already\n * land: which bands moved per render, which subjects each component is drawn in,\n * and which components the diff reaches.\n *\n * ## The control group is the whole claim\n *\n * A band belongs to a parent when the renders it moved in are *exactly* the\n * renders that parent draws — every one of them, and no other. `a11y` moving in\n * the six renders `ProductCard` draws and holding still in the ten it does not\n * is a partition, and a partition is evidence. Overlap is not: `geometry` also\n * moved in the button's own small-size stories, which no card draws, so the\n * cards cannot be what moved it.\n *\n * Which makes the other half load-bearing. **Without renders where the band held\n * still there is no claim to make.** `token` moved everywhere the button is\n * drawn, and every ancestor of the button trivially covers *everywhere* — so a\n * rule that skipped the control group would hand the button's own restyle to\n * whichever card sorted first. `CardFooter` is the honest version of the same\n * shape: it is drawn in six renders, moved in all six, and is very probably\n * carrying somebody else's props — and this says nothing about it, because the\n * suite contains no render that would have distinguished the two.\n *\n * ## Why the holder has to be in the diff\n *\n * A parent the commit never touched hands nothing new down: whatever it passes,\n * it passed in the baseline too. Requiring the reach walk to arrive at the\n * holder is what keeps a coincidence — a container that happens to be drawn in\n * exactly those six renders — from being read as a cause.\n *\n * ## What it will not say\n *\n * That the holder is *why* the pixels differ. It owns the band: the thing that\n * moved in this sense is written in its file, and the decision belongs there.\n * The run's own sentence, on the movement rows, is the answer to *why*.\n */\n\nimport type { BuildDetail, Placement } from '../review-types.js';\nimport { loudestFirst } from './sense.js';\n\n/** One band a component moved in that a parent, not its own file, owns. */\nexport interface Handed {\n  readonly band: string;\n  /** Every parent the partition fits, sorted. Never empty, and rarely not one. */\n  readonly holders: readonly string[];\n  /** Renders the band moved in — all of them, and all of them drawn by the holders. */\n  readonly moved: number;\n  /** Renders this component was drawn and read in where the band held still. */\n  readonly held: number;\n}\n\n/** One build's separation of a component's own movement from what it was given. */\nexport type Handing = (component: string) => readonly Handed[];\n\nconst NONE: readonly Handed[] = [];\n\nexport function handedTo(build: BuildDetail): Handing {\n  const census = build.composition;\n  // `whole` is the run refusing to attribute the diff at all, which is a missing\n  // input and not an empty reach. Either way there is no walk, and with no walk\n  // every parent is unreached and nothing here can be said.\n  const graph = build.reach !== null && build.reach.whole === undefined ? build.reach : null;\n  if (census === null || graph === null) return () => NONE;\n\n  const places = new Map(census.map((each) => [each.component, each]));\n  const reached = new Set(graph.components.map((each) => each.component));\n\n  // Only the renders that compared hashes. A subject whose baseline carried none\n  // is not a render where a band held still — it is a render nobody read, and\n  // counting it as a control would let any parent partition anything.\n  const read = build.subjects.filter((subject) => subject.moved !== undefined);\n\n  return (component) => {\n    const place = places.get(component);\n    if (place === undefined) return NONE;\n\n    const drawn = new Set(place.subjects);\n    const bands = new Map<string, ReadonlySet<string>>();\n    for (const subject of read) {\n      if (!drawn.has(subject.subject)) continue;\n      const entry = (subject.moved ?? []).find((each) => each.component === component);\n      bands.set(subject.subject, new Set<string>(entry?.bands ?? []));\n    }\n    if (bands.size === 0) return NONE;\n\n    const above = enclosing(component, places).filter((name) => reached.has(name));\n    if (above.length === 0) return NONE;\n\n    const found: Handed[] = [];\n    for (const band of loudestFirst(new Set([...bands.values()].flatMap((each) => [...each])))) {\n      const moved: string[] = [];\n      const held: string[] = [];\n      for (const [subject, sensed] of bands) (sensed.has(band) ? moved : held).push(subject);\n      if (held.length === 0) continue;\n\n      const holders = above.filter((name) => {\n        const subjects = new Set(places.get(name)?.subjects ?? []);\n        if (held.some((each) => subjects.has(each))) return false;\n        return moved.every((each) => subjects.has(each));\n      });\n      if (holders.length === 0) continue;\n\n      found.push({ band, holders: [...holders].sort(), moved: moved.length, held: held.length });\n    }\n    return found;\n  };\n}\n\n/**\n * Every component that encloses this one anywhere in the suite.\n *\n * All depths, not the nearest: a prop written two rungs up arrives just the\n * same, and the partition is what decides whether the rung is the right one.\n * `seen` starts holding the component itself, so a render tree folded over a\n * suite — a menu inside its own submenu — terminates instead of closing a loop.\n */\nfunction enclosing(component: string, places: ReadonlyMap<string, Placement>): readonly string[] {\n  const found = new Set<string>();\n  const queue = [...(places.get(component)?.within ?? [])];\n  const seen = new Set([component]);\n  while (queue.length > 0) {\n    const name = queue.pop();\n    if (name === undefined || seen.has(name)) continue;\n    seen.add(name);\n    found.add(name);\n    queue.push(...(places.get(name)?.within ?? []));\n  }\n  return [...found].sort();\n}\n"]}

package/dist/ui/history.d.ts

@@ -0,0 +1,88 @@
+import { type ReactElement } from 'react';
+import type { Churn, Flakiness, Reach } from '@variance-authority/history';
+import type { SubjectView, TribunalChangelog } from '../review.js';
+import type { ReviewClient } from './client.js';
+/**
+ * The two surfaces that read the record rather than the run.
+ *
+ * A build page answers *what changed here*. Everything in this file answers the
+ * question a reviewer actually has to settle before approving: **is this
+ * normal?** A 2px shift in a component that has moved in nineteen of the last
+ * twenty runs is a different decision from the same 2px in a component nobody has
+ * touched since March, and the two are indistinguishable in a before-and-after.
+ *
+ * ## The changelog is grouped by shape, not listed by approval
+ *
+ * One token change lands in three hundred subjects, and a list of three hundred
+ * approvals is a list nobody reads to the end. So rows are clustered by the
+ * fingerprints frozen into them: one entry, the component that owns it, and the
+ * subjects it reached. What could not be grouped is *counted and shown* rather
+ * than dropped — a changelog covering eleven of forty approvals that looks like a
+ * changelog of eleven approvals is worse than no changelog.
+ *
+ * ## Absent numbers stay absent
+ *
+ * `Flakiness.rate` is missing when no run has read every subject twice, and it is
+ * rendered as missing. Drawing `0%` there answers *how often does this flake*
+ * with a confident number derived from a denominator nobody asked for, which is
+ * the failure this project is arranged around.
+ */
+export declare function ChangelogPage({ client, onBack, }: {
+    readonly client: ReviewClient;
+    readonly onBack: () => void;
+}): ReactElement;
+/**
+ * The grouped changes, and the approvals no shape could group.
+ *
+ * The second list is not a footnote. The ephemeral and raster-only paths attribute
+ * nothing and still approve something, and a reader who cannot see that a third of
+ * the entries are unattributed will read the attributed two thirds as the whole.
+ */
+export declare function ChangelogEntries({ log, filter, }: {
+    readonly log: TribunalChangelog;
+    /** The component filter in force, so an empty answer can say which one emptied it. */
+    readonly filter?: string;
+}): ReactElement;
+/**
+ * What the record already knows about the subject in front of the reviewer.
+ *
+ * Fetched when the panel is opened rather than with the build, and per subject
+ * rather than for all of them: a build with three hundred changed subjects would
+ * otherwise make nine hundred history requests to draw a page on which a reviewer
+ * reads one. The cost of the deferral is a click; the cost of not deferring is the
+ * page.
+ *
+ * The component asked about is the subject's *cause* — the one the semantic tier
+ * named — because churn and reach are questions about a component and the region
+ * ranked first by area is the container that reflowed.
+ */
+export declare function SubjectHistory({ client, subject, }: {
+    readonly client: ReviewClient;
+    readonly subject: SubjectView;
+}): ReactElement;
+/**
+ * How often this subject has failed to read the same way twice.
+ *
+ * Two numbers and never one. "Unstable in 6 of 20" and "6 times, none in the last
+ * 9 sweeps" are opposite instructions to the person reading them, and only the
+ * pair distinguishes a live flake from one somebody already fixed.
+ */
+export declare function StabilityLine({ flakiness }: {
+    readonly flakiness: Flakiness;
+}): ReactElement;
+/**
+ * How often the cause has changed, and how far it reaches.
+ *
+ * `changedRuns` counts runs in which this component caused an **approved** change,
+ * which is why the approvals route exists: without it every component in the
+ * project reads as having never changed. Collateral is reported beside it and never
+ * added to it — a component displaced by somebody else's edit is not a component
+ * that keeps changing, and summing the two makes the widest container in the
+ * application the most volatile thing in it, forever.
+ */
+export declare function ChurnLine({ component, churn, reach, }: {
+    readonly component: string;
+    readonly churn: Churn;
+    readonly reach?: Reach;
+}): ReactElement;
+//# sourceMappingURL=history.d.ts.map

package/dist/ui/history.js

@@ -0,0 +1,170 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+import { causeOf } from './lead.js';
+import { count, when } from './text.js';
+/**
+ * The two surfaces that read the record rather than the run.
+ *
+ * A build page answers *what changed here*. Everything in this file answers the
+ * question a reviewer actually has to settle before approving: **is this
+ * normal?** A 2px shift in a component that has moved in nineteen of the last
+ * twenty runs is a different decision from the same 2px in a component nobody has
+ * touched since March, and the two are indistinguishable in a before-and-after.
+ *
+ * ## The changelog is grouped by shape, not listed by approval
+ *
+ * One token change lands in three hundred subjects, and a list of three hundred
+ * approvals is a list nobody reads to the end. So rows are clustered by the
+ * fingerprints frozen into them: one entry, the component that owns it, and the
+ * subjects it reached. What could not be grouped is *counted and shown* rather
+ * than dropped — a changelog covering eleven of forty approvals that looks like a
+ * changelog of eleven approvals is worse than no changelog.
+ *
+ * ## Absent numbers stay absent
+ *
+ * `Flakiness.rate` is missing when no run has read every subject twice, and it is
+ * rendered as missing. Drawing `0%` there answers *how often does this flake*
+ * with a confident number derived from a denominator nobody asked for, which is
+ * the failure this project is arranged around.
+ */
+export function ChangelogPage({ client, onBack, }) {
+    const [component, setComponent] = useState('');
+    const [applied, setApplied] = useState('');
+    const [log, setLog] = useState({ state: 'loading' });
+    const load = useCallback(async () => {
+        setLog({ state: 'loading' });
+        try {
+            setLog({
+                state: 'ready',
+                value: await client.changelog(applied === '' ? {} : { component: applied }),
+            });
+        }
+        catch (error) {
+            setLog({ state: 'failed', why: messageOf(error) });
+        }
+    }, [client, applied]);
+    useEffect(() => {
+        void load();
+    }, [load]);
+    return (_jsxs(_Fragment, { children: [_jsxs("header", { className: "va-topbar", children: [_jsx("button", { type: "button", className: "va-back", onClick: onBack, children: "\u2190" }), _jsxs("span", { className: "va-topbar-title", children: [_jsx("strong", { children: "Changelog" }), _jsx("span", { className: "va-topbar-sub", children: "every approval on record" })] })] }), _jsx("div", { className: "va-body va-scroll", children: _jsxs("article", { className: "va-page va-changelog", children: [_jsx("p", { className: "va-subtitle", children: "Why the baselines are what they are: every approval, grouped by the shape that was approved." }), _jsxs("form", { className: "va-filter", onSubmit: (event) => {
+                                event.preventDefault();
+                                setApplied(component.trim());
+                            }, children: [_jsx("label", { htmlFor: "va-changelog-component", children: "component" }), _jsx("input", { id: "va-changelog-component", value: component, placeholder: "any component", onChange: (event) => setComponent(event.target.value) }), _jsx("button", { type: "submit", children: "Filter" }), applied === '' ? null : (_jsx("button", { type: "button", onClick: () => {
+                                        setComponent('');
+                                        setApplied('');
+                                    }, children: "Clear" }))] }), log.state === 'loading' ? _jsx("p", { className: "va-note", children: "Loading the changelog\u2026" }) : null, log.state === 'failed' ? _jsx(Failure, { why: log.why, retry: load }) : null, log.state === 'ready' ? (_jsx(ChangelogEntries, { log: log.value, ...(applied === '' ? {} : { filter: applied }) })) : null] }) })] }));
+}
+/**
+ * The grouped changes, and the approvals no shape could group.
+ *
+ * The second list is not a footnote. The ephemeral and raster-only paths attribute
+ * nothing and still approve something, and a reader who cannot see that a third of
+ * the entries are unattributed will read the attributed two thirds as the whole.
+ */
+export function ChangelogEntries({ log, filter, }) {
+    if (log.changes.length === 0 && log.ungrouped.length === 0) {
+        // Two sentences, because a filtered empty answer and an empty project are
+        // different facts and only one of them is about the project. Told the first
+        // as the second, a reviewer concludes nothing has ever been approved here.
+        return (_jsx("p", { className: "va-note", children: filter === undefined
+                ? 'Nothing has been approved in this project yet.'
+                : `No approval matched “${filter}”. The project may still have approvals under other components.` }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("ol", { className: "va-changes", children: log.changes.map((change) => (_jsx(ChangeEntry, { change: change }, change.fingerprint))) }), log.ungrouped.length === 0 ? null : (_jsxs("section", { className: "va-ungrouped", children: [_jsxs("h2", { children: [log.ungrouped.length, " approved without an attributed shape"] }), _jsx("p", { className: "va-note", children: "These runs kept no region attribution \u2014 an ephemeral or raster-only path \u2014 so nothing names what changed in them. Listed rather than dropped: they are approvals, and a total that omits them is not a total." }), _jsx("ul", { children: log.ungrouped.map((row) => (_jsxs("li", { children: [_jsx("strong", { children: row.subject }), " \u2014 ", row.by, " \u00B7 ", _jsx("code", { children: row.commit.slice(0, 8) }), " \u00B7", ' ', when(row.at)] }, `${row.build}/${row.subject}`))) })] }))] }));
+}
+function ChangeEntry({ change }) {
+    return (_jsxs("li", { className: "va-change", children: [_jsxs("h3", { children: [change.component ?? 'an unnamed component', change.file === undefined ? null : (_jsxs(_Fragment, { children: [' ', _jsx("code", { children: change.file })] }))] }), _jsxs("p", { className: "va-change-meta", children: [change.subjects.length, " subject", change.subjects.length === 1 ? '' : 's', " \u00B7", ' ', change.builds.length, " build", change.builds.length === 1 ? '' : 's', " \u00B7 approved by", ' ', change.by.join(', '), " \u00B7 ", when(change.at)] }), change.intent === undefined ? null : (_jsxs("p", { className: "va-intent", children: ["Declared intent: ", _jsx("em", { children: change.intent })] })), change.note === undefined ? null : _jsx("p", { className: "va-change-note", children: change.note }), _jsxs("details", { children: [_jsx("summary", { children: "subjects" }), _jsx("ul", { className: "va-change-subjects", children: change.subjects.map((subject) => (_jsx("li", { children: subject }, subject))) })] }), _jsxs("p", { className: "va-fingerprint", children: ["shape ", _jsx("code", { children: change.fingerprint.slice(0, 12) }), " \u2014 the identity the grouping is computed from, so a shape approved across three sessions reads as one change."] })] }));
+}
+/**
+ * What the record already knows about the subject in front of the reviewer.
+ *
+ * Fetched when the panel is opened rather than with the build, and per subject
+ * rather than for all of them: a build with three hundred changed subjects would
+ * otherwise make nine hundred history requests to draw a page on which a reviewer
+ * reads one. The cost of the deferral is a click; the cost of not deferring is the
+ * page.
+ *
+ * The component asked about is the subject's *cause* — the one the semantic tier
+ * named — because churn and reach are questions about a component and the region
+ * ranked first by area is the container that reflowed.
+ */
+export function SubjectHistory({ client, subject, }) {
+    const component = causeOf(subject);
+    const [asked, setAsked] = useState(false);
+    const [answer, setAnswer] = useState({ state: 'loading' });
+    const load = useCallback(async () => {
+        setAnswer({ state: 'loading' });
+        try {
+            const [flakiness, churn, reach] = await Promise.all([
+                client.flakiness(subject.subject),
+                component === undefined ? undefined : client.churn(component),
+                component === undefined ? undefined : client.reach(component),
+            ]);
+            setAnswer({
+                state: 'ready',
+                flakiness,
+                ...(churn === undefined ? {} : { churn }),
+                ...(reach === undefined ? {} : { reach }),
+            });
+        }
+        catch (error) {
+            setAnswer({ state: 'failed', why: messageOf(error) });
+        }
+    }, [client, subject.subject, component]);
+    useEffect(() => {
+        if (asked)
+            void load();
+    }, [asked, load]);
+    if (!asked) {
+        return (_jsx("p", { className: "va-history", children: _jsx("button", { type: "button", className: "va-ask", onClick: () => setAsked(true), children: "Has this changed before?" }) }));
+    }
+    if (answer.state === 'loading')
+        return _jsx("p", { className: "va-note", children: "Reading the record\u2026" });
+    if (answer.state === 'failed')
+        return _jsx(Failure, { why: answer.why, retry: load });
+    return (_jsxs("section", { className: "va-history", children: [_jsx(StabilityLine, { flakiness: answer.flakiness }), answer.churn === undefined || component === undefined ? (_jsx("p", { className: "va-note", children: "No component was named as the cause of this difference, so there is nothing to ask the record about. The regions came from a run that attributed nothing." })) : (_jsx(ChurnLine, { component: component, churn: answer.churn, ...(answer.reach === undefined ? {} : { reach: answer.reach }) }))] }));
+}
+/**
+ * How often this subject has failed to read the same way twice.
+ *
+ * Two numbers and never one. "Unstable in 6 of 20" and "6 times, none in the last
+ * 9 sweeps" are opposite instructions to the person reading them, and only the
+ * pair distinguishes a live flake from one somebody already fixed.
+ */
+export function StabilityLine({ flakiness }) {
+    if (flakiness.sweeps === 0) {
+        return (_jsx("p", { className: "va-stability va-unknown", children: "Nothing has read this subject twice in the recorded window, so how stable it is is unknown \u2014 not stable. A rate needs a run that swept." }));
+    }
+    if (flakiness.occurrences === 0) {
+        return (_jsxs("p", { className: "va-stability", children: ["Read twice in ", flakiness.sweeps, " run", flakiness.sweeps === 1 ? '' : 's', " and never disagreed with itself."] }));
+    }
+    return (_jsxs("p", { className: "va-stability va-flaky", children: ["Read differently in ", flakiness.occurrences, " of ", flakiness.sweeps, " sweeps", flakiness.rate === undefined ? null : _jsxs(_Fragment, { children: [" (", Math.round(flakiness.rate * 100), "%)"] }), flakiness.sweepsSince === 0
+                ? ', most recently in the latest sweep'
+                : `, none in the last ${flakiness.sweepsSince} sweep${flakiness.sweepsSince === 1 ? '' : 's'}`, ".", flakiness.causes.length === 0 ? null : (_jsxs(_Fragment, { children: [' ', "Loudest cause: ", _jsx("strong", { children: flakiness.causes[0]?.component ?? 'unnamed' }), flakiness.causes[0]?.band === undefined ? null : _jsxs(_Fragment, { children: [" (", flakiness.causes[0].band, ")"] }), "."] })), flakiness.absorbedRuns === 0 ? null : (_jsxs(_Fragment, { children: [' ', count(flakiness.absorbedRuns, 'further run'), " moved only in bands this subject declared it does not assert on."] }))] }));
+}
+/**
+ * How often the cause has changed, and how far it reaches.
+ *
+ * `changedRuns` counts runs in which this component caused an **approved** change,
+ * which is why the approvals route exists: without it every component in the
+ * project reads as having never changed. Collateral is reported beside it and never
+ * added to it — a component displaced by somebody else's edit is not a component
+ * that keeps changing, and summing the two makes the widest container in the
+ * application the most volatile thing in it, forever.
+ */
+export function ChurnLine({ component, churn, reach, }) {
+    if (churn.runs === 0) {
+        // `0 of 0` reads as a component that has never moved, which is the opposite
+        // of what an empty window says. The same distinction `StabilityLine` draws:
+        // a rate nobody has a run for is unknown, not zero.
+        return (_jsxs("p", { className: "va-churn va-unknown", children: ["No recorded run carries ", _jsx("strong", { children: component }), ", so how often it changes is unknown \u2014 not none."] }));
+    }
+    return (_jsxs("p", { className: "va-churn", children: [_jsx("strong", { children: component }), " caused an approved change in ", churn.changedRuns, " of ", churn.runs, ' ', "recorded run", churn.runs === 1 ? '' : 's', churn.lastAt === undefined ? null : _jsxs(_Fragment, { children: [", most recently ", churn.lastAt] }), ".", churn.collateralRuns === 0 ? null : (_jsxs(_Fragment, { children: [" It was displaced without changing in ", churn.collateralRuns, " more."] })), churn.rejectedRuns === 0 ? null : _jsxs(_Fragment, { children: [" ", churn.rejectedRuns, " change to it was rejected."] }), reach === undefined ? null : (_jsxs(_Fragment, { children: [' ', "It is observed in ", reach.subjects.length, " subject", reach.subjects.length === 1 ? '' : 's', reach.arrived.length === 0 ? null : _jsxs(_Fragment, { children: [", having arrived in ", reach.arrived.length, " of them in this window"] }), "."] }))] }));
+}
+function Failure({ why, retry }) {
+    return (_jsxs("p", { className: "va-failure", children: [why, ' ', _jsx("button", { type: "button", onClick: retry, children: "retry" })] }));
+}
+function messageOf(error) {
+    return error instanceof Error ? error.message : String(error);
+}
+//# sourceMappingURL=history.js.map

package/dist/ui/history.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"history.js","sourceRoot":"","sources":["../../src/ui/history.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useEffect, useState, type ReactElement } from 'react';\nimport type { Churn, Flakiness, Reach } from '@variance-authority/history';\nimport type { ChangelogChange, ChangelogRow, SubjectView, TribunalChangelog } from '../review.js';\nimport type { ReviewClient } from './client.js';\nimport { causeOf } from './lead.js';\nimport { count, when } from './text.js';\n\n/**\n * The two surfaces that read the record rather than the run.\n *\n * A build page answers *what changed here*. Everything in this file answers the\n * question a reviewer actually has to settle before approving: **is this\n * normal?** A 2px shift in a component that has moved in nineteen of the last\n * twenty runs is a different decision from the same 2px in a component nobody has\n * touched since March, and the two are indistinguishable in a before-and-after.\n *\n * ## The changelog is grouped by shape, not listed by approval\n *\n * One token change lands in three hundred subjects, and a list of three hundred\n * approvals is a list nobody reads to the end. So rows are clustered by the\n * fingerprints frozen into them: one entry, the component that owns it, and the\n * subjects it reached. What could not be grouped is *counted and shown* rather\n * than dropped — a changelog covering eleven of forty approvals that looks like a\n * changelog of eleven approvals is worse than no changelog.\n *\n * ## Absent numbers stay absent\n *\n * `Flakiness.rate` is missing when no run has read every subject twice, and it is\n * rendered as missing. Drawing `0%` there answers *how often does this flake*\n * with a confident number derived from a denominator nobody asked for, which is\n * the failure this project is arranged around.\n */\n\nexport function ChangelogPage({\n  client,\n  onBack,\n}: {\n  readonly client: ReviewClient;\n  readonly onBack: () => void;\n}): ReactElement {\n  const [component, setComponent] = useState('');\n  const [applied, setApplied] = useState('');\n  const [log, setLog] = useState<\n    { readonly state: 'loading' } | { readonly state: 'failed'; readonly why: string } | {\n      readonly state: 'ready';\n      readonly value: TribunalChangelog;\n    }\n  >({ state: 'loading' });\n\n  const load = useCallback(async (): Promise<void> => {\n    setLog({ state: 'loading' });\n    try {\n      setLog({\n        state: 'ready',\n        value: await client.changelog(applied === '' ? {} : { component: applied }),\n      });\n    } catch (error) {\n      setLog({ state: 'failed', why: messageOf(error) });\n    }\n  }, [client, applied]);\n\n  useEffect(() => {\n    void load();\n  }, [load]);\n\n  return (\n    <>\n      <header className=\"va-topbar\">\n        <button type=\"button\" className=\"va-back\" onClick={onBack}>\n          ←\n        </button>\n        <span className=\"va-topbar-title\">\n          <strong>Changelog</strong>\n          <span className=\"va-topbar-sub\">every approval on record</span>\n        </span>\n      </header>\n\n      <div className=\"va-body va-scroll\">\n        <article className=\"va-page va-changelog\">\n      <p className=\"va-subtitle\">\n        Why the baselines are what they are: every approval, grouped by the shape that was approved.\n      </p>\n\n      <form\n        className=\"va-filter\"\n        onSubmit={(event) => {\n          event.preventDefault();\n          setApplied(component.trim());\n        }}\n      >\n        <label htmlFor=\"va-changelog-component\">component</label>\n        <input\n          id=\"va-changelog-component\"\n          value={component}\n          placeholder=\"any component\"\n          onChange={(event) => setComponent(event.target.value)}\n        />\n        <button type=\"submit\">Filter</button>\n        {applied === '' ? null : (\n          <button\n            type=\"button\"\n            onClick={() => {\n              setComponent('');\n              setApplied('');\n            }}\n          >\n            Clear\n          </button>\n        )}\n      </form>\n\n      {log.state === 'loading' ? <p className=\"va-note\">Loading the changelog…</p> : null}\n      {log.state === 'failed' ? <Failure why={log.why} retry={load} /> : null}\n      {log.state === 'ready' ? (\n        <ChangelogEntries log={log.value} {...(applied === '' ? {} : { filter: applied })} />\n      ) : null}\n        </article>\n      </div>\n    </>\n  );\n}\n\n/**\n * The grouped changes, and the approvals no shape could group.\n *\n * The second list is not a footnote. The ephemeral and raster-only paths attribute\n * nothing and still approve something, and a reader who cannot see that a third of\n * the entries are unattributed will read the attributed two thirds as the whole.\n */\nexport function ChangelogEntries({\n  log,\n  filter,\n}: {\n  readonly log: TribunalChangelog;\n  /** The component filter in force, so an empty answer can say which one emptied it. */\n  readonly filter?: string;\n}): ReactElement {\n  if (log.changes.length === 0 && log.ungrouped.length === 0) {\n    // Two sentences, because a filtered empty answer and an empty project are\n    // different facts and only one of them is about the project. Told the first\n    // as the second, a reviewer concludes nothing has ever been approved here.\n    return (\n      <p className=\"va-note\">\n        {filter === undefined\n          ? 'Nothing has been approved in this project yet.'\n          : `No approval matched “${filter}”. The project may still have approvals under other components.`}\n      </p>\n    );\n  }\n\n  return (\n    <>\n      <ol className=\"va-changes\">\n        {log.changes.map((change) => (\n          <ChangeEntry key={change.fingerprint} change={change} />\n        ))}\n      </ol>\n\n      {log.ungrouped.length === 0 ? null : (\n        <section className=\"va-ungrouped\">\n          <h2>{log.ungrouped.length} approved without an attributed shape</h2>\n          <p className=\"va-note\">\n            These runs kept no region attribution — an ephemeral or raster-only path — so nothing\n            names what changed in them. Listed rather than dropped: they are approvals, and a total\n            that omits them is not a total.\n          </p>\n          <ul>\n            {log.ungrouped.map((row: ChangelogRow) => (\n              <li key={`${row.build}/${row.subject}`}>\n                <strong>{row.subject}</strong> — {row.by} · <code>{row.commit.slice(0, 8)}</code> ·{' '}\n                {when(row.at)}\n              </li>\n            ))}\n          </ul>\n        </section>\n      )}\n    </>\n  );\n}\n\nfunction ChangeEntry({ change }: { readonly change: ChangelogChange }): ReactElement {\n  return (\n    <li className=\"va-change\">\n      <h3>\n        {change.component ?? 'an unnamed component'}\n        {change.file === undefined ? null : (\n          <>\n            {' '}\n            <code>{change.file}</code>\n          </>\n        )}\n      </h3>\n      <p className=\"va-change-meta\">\n        {change.subjects.length} subject{change.subjects.length === 1 ? '' : 's'} ·{' '}\n        {change.builds.length} build{change.builds.length === 1 ? '' : 's'} · approved by{' '}\n        {change.by.join(', ')} · {when(change.at)}\n      </p>\n      {change.intent === undefined ? null : (\n        <p className=\"va-intent\">\n          Declared intent: <em>{change.intent}</em>\n        </p>\n      )}\n      {change.note === undefined ? null : <p className=\"va-change-note\">{change.note}</p>}\n      <details>\n        <summary>subjects</summary>\n        <ul className=\"va-change-subjects\">\n          {change.subjects.map((subject) => (\n            <li key={subject}>{subject}</li>\n          ))}\n        </ul>\n      </details>\n      <p className=\"va-fingerprint\">\n        shape <code>{change.fingerprint.slice(0, 12)}</code> — the identity the grouping is computed\n        from, so a shape approved across three sessions reads as one change.\n      </p>\n    </li>\n  );\n}\n\n/**\n * What the record already knows about the subject in front of the reviewer.\n *\n * Fetched when the panel is opened rather than with the build, and per subject\n * rather than for all of them: a build with three hundred changed subjects would\n * otherwise make nine hundred history requests to draw a page on which a reviewer\n * reads one. The cost of the deferral is a click; the cost of not deferring is the\n * page.\n *\n * The component asked about is the subject's *cause* — the one the semantic tier\n * named — because churn and reach are questions about a component and the region\n * ranked first by area is the container that reflowed.\n */\nexport function SubjectHistory({\n  client,\n  subject,\n}: {\n  readonly client: ReviewClient;\n  readonly subject: SubjectView;\n}): ReactElement {\n  const component = causeOf(subject);\n  const [asked, setAsked] = useState(false);\n  const [answer, setAnswer] = useState<\n    | { readonly state: 'loading' }\n    | { readonly state: 'failed'; readonly why: string }\n    | {\n        readonly state: 'ready';\n        readonly flakiness: Flakiness;\n        readonly churn?: Churn;\n        readonly reach?: Reach;\n      }\n  >({ state: 'loading' });\n\n  const load = useCallback(async (): Promise<void> => {\n    setAnswer({ state: 'loading' });\n    try {\n      const [flakiness, churn, reach] = await Promise.all([\n        client.flakiness(subject.subject),\n        component === undefined ? undefined : client.churn(component),\n        component === undefined ? undefined : client.reach(component),\n      ]);\n      setAnswer({\n        state: 'ready',\n        flakiness,\n        ...(churn === undefined ? {} : { churn }),\n        ...(reach === undefined ? {} : { reach }),\n      });\n    } catch (error) {\n      setAnswer({ state: 'failed', why: messageOf(error) });\n    }\n  }, [client, subject.subject, component]);\n\n  useEffect(() => {\n    if (asked) void load();\n  }, [asked, load]);\n\n  if (!asked) {\n    return (\n      <p className=\"va-history\">\n        <button type=\"button\" className=\"va-ask\" onClick={() => setAsked(true)}>\n          Has this changed before?\n        </button>\n      </p>\n    );\n  }\n\n  if (answer.state === 'loading') return <p className=\"va-note\">Reading the record…</p>;\n  if (answer.state === 'failed') return <Failure why={answer.why} retry={load} />;\n\n  return (\n    <section className=\"va-history\">\n      <StabilityLine flakiness={answer.flakiness} />\n      {answer.churn === undefined || component === undefined ? (\n        <p className=\"va-note\">\n          No component was named as the cause of this difference, so there is nothing to ask the\n          record about. The regions came from a run that attributed nothing.\n        </p>\n      ) : (\n        <ChurnLine\n          component={component}\n          churn={answer.churn}\n          {...(answer.reach === undefined ? {} : { reach: answer.reach })}\n        />\n      )}\n    </section>\n  );\n}\n\n/**\n * How often this subject has failed to read the same way twice.\n *\n * Two numbers and never one. \"Unstable in 6 of 20\" and \"6 times, none in the last\n * 9 sweeps\" are opposite instructions to the person reading them, and only the\n * pair distinguishes a live flake from one somebody already fixed.\n */\nexport function StabilityLine({ flakiness }: { readonly flakiness: Flakiness }): ReactElement {\n  if (flakiness.sweeps === 0) {\n    return (\n      <p className=\"va-stability va-unknown\">\n        Nothing has read this subject twice in the recorded window, so how stable it is is unknown —\n        not stable. A rate needs a run that swept.\n      </p>\n    );\n  }\n\n  if (flakiness.occurrences === 0) {\n    return (\n      <p className=\"va-stability\">\n        Read twice in {flakiness.sweeps} run{flakiness.sweeps === 1 ? '' : 's'} and never disagreed\n        with itself.\n      </p>\n    );\n  }\n\n  return (\n    <p className=\"va-stability va-flaky\">\n      Read differently in {flakiness.occurrences} of {flakiness.sweeps} sweeps\n      {flakiness.rate === undefined ? null : <> ({Math.round(flakiness.rate * 100)}%)</>}\n      {flakiness.sweepsSince === 0\n        ? ', most recently in the latest sweep'\n        : `, none in the last ${flakiness.sweepsSince} sweep${flakiness.sweepsSince === 1 ? '' : 's'}`}\n      .\n      {flakiness.causes.length === 0 ? null : (\n        <>\n          {' '}\n          Loudest cause: <strong>{flakiness.causes[0]?.component ?? 'unnamed'}</strong>\n          {flakiness.causes[0]?.band === undefined ? null : <> ({flakiness.causes[0].band})</>}.\n        </>\n      )}\n      {flakiness.absorbedRuns === 0 ? null : (\n        <>\n          {' '}\n          {count(flakiness.absorbedRuns, 'further run')} moved only in bands this subject declared it\n          does not assert on.\n        </>\n      )}\n    </p>\n  );\n}\n\n/**\n * How often the cause has changed, and how far it reaches.\n *\n * `changedRuns` counts runs in which this component caused an **approved** change,\n * which is why the approvals route exists: without it every component in the\n * project reads as having never changed. Collateral is reported beside it and never\n * added to it — a component displaced by somebody else's edit is not a component\n * that keeps changing, and summing the two makes the widest container in the\n * application the most volatile thing in it, forever.\n */\nexport function ChurnLine({\n  component,\n  churn,\n  reach,\n}: {\n  readonly component: string;\n  readonly churn: Churn;\n  readonly reach?: Reach;\n}): ReactElement {\n  if (churn.runs === 0) {\n    // `0 of 0` reads as a component that has never moved, which is the opposite\n    // of what an empty window says. The same distinction `StabilityLine` draws:\n    // a rate nobody has a run for is unknown, not zero.\n    return (\n      <p className=\"va-churn va-unknown\">\n        No recorded run carries <strong>{component}</strong>, so how often it changes is unknown —\n        not none.\n      </p>\n    );\n  }\n\n  return (\n    <p className=\"va-churn\">\n      <strong>{component}</strong> caused an approved change in {churn.changedRuns} of {churn.runs}{' '}\n      recorded run{churn.runs === 1 ? '' : 's'}\n      {churn.lastAt === undefined ? null : <>, most recently {churn.lastAt}</>}.\n      {churn.collateralRuns === 0 ? null : (\n        <> It was displaced without changing in {churn.collateralRuns} more.</>\n      )}\n      {churn.rejectedRuns === 0 ? null : <> {churn.rejectedRuns} change to it was rejected.</>}\n      {reach === undefined ? null : (\n        <>\n          {' '}\n          It is observed in {reach.subjects.length} subject\n          {reach.subjects.length === 1 ? '' : 's'}\n          {reach.arrived.length === 0 ? null : <>, having arrived in {reach.arrived.length} of them in this window</>}\n          .\n        </>\n      )}\n    </p>\n  );\n}\n\n\nfunction Failure({ why, retry }: { readonly why: string; readonly retry: () => void }): ReactElement {\n  return (\n    <p className=\"va-failure\">\n      {why}{' '}\n      <button type=\"button\" onClick={retry}>\n        retry\n      </button>\n    </p>\n  );\n}\n\nfunction messageOf(error: unknown): string {\n  return error instanceof Error ? error.message : String(error);\n}\n"]}

package/dist/ui/holding.d.ts

@@ -0,0 +1,84 @@
+/**
+ * What draws a component, when nothing the commit touched declares it.
+ *
+ * The build page could count these and not explain them. *Two components moved
+ * that no file in this commit declares* is arithmetic over the reach walk, and
+ * the reach walk goes one way: from a file the diff named, up through the files
+ * that import it, to the components those files declare. Everything a changed
+ * file *draws* is off that graph by construction — `ProductCard` renders `Card`,
+ * `Card` renders `CardFooter`, and no number of importers arrives at
+ * `CardFooter`. So the page had a true sentence with a shrug where its reason
+ * should be.
+ *
+ * The run already wrote the other direction down. Every component in the census
+ * carries the components that enclose it, folded over the whole suite, and a
+ * walk up that from `CardFooter` reaches `ProductCard` in two steps — which is
+ * the file the commit changed.
+ *
+ * ## Two constraints, and both of them are what makes the answer true
+ *
+ * **The census is suite-wide.** `Card.within` is every component that encloses a
+ * `Card` anywhere, so an unconstrained walk out of `CardFooter` arrives at
+ * `CartCard` as readily as at `ProductCard` — and `CartCard` is the cart, which
+ * has no `CardFooter` in it. Every step is therefore held to the subjects the
+ * component actually moved in.
+ *
+ * **The walk stops at the first rung the commit reaches.** Not the first
+ * enclosure: `Card` encloses `CardFooter` and explains nothing, because nothing
+ * in the diff arrives at `Card` either. The answer a reviewer can act on is the
+ * nearest enclosure that is *also* a component the commit reaches, and the
+ * components in between are the path they will read.
+ *
+ * ## What it will not say
+ *
+ * That the enclosure is the cause. It is an enclosure — the commit reaches a
+ * component that draws this one, in a subject where this one moved — and that is
+ * the strongest statement the two records support together. A component can be
+ * drawn by an edited parent and have moved for an unrelated reason.
+ */
+import type { BuildDetail } from '../review-types.js';
+/** A component the commit reaches, and the chain from it down to the one asked about. */
+export interface Enclosure {
+    readonly holder: string;
+    /** Components between the two, outermost first. Empty when the holder draws it. */
+    readonly through: readonly string[];
+}
+export type Holding = 
+/** The run kept no census, so nothing here was measured. */
+{
+    readonly kind: 'unrecorded';
+}
+/** The census has no row for this name — it was never a boundary anywhere. */
+ | {
+    readonly kind: 'unlisted';
+}
+/** Nothing in the suite encloses it: wherever it appears, it is the outermost thing. */
+ | {
+    readonly kind: 'outermost';
+}
+/** Enclosed, and the commit reaches nothing that encloses it at any depth. */
+ | {
+    readonly kind: 'enclosed';
+    readonly within: readonly string[];
+}
+/**
+ * Enclosed, and this build read no diff — so *reaches* has no value here.
+ *
+ * Apart from `enclosed`, which is a finding. With no graph to walk, every
+ * component in the suite would return one, and a page saying *the commit
+ * reaches none of them* on all of them would have turned a missing input into
+ * a screen of alarms.
+ */
+ | {
+    readonly kind: 'unmeasured';
+    readonly within: readonly string[];
+}
+/** Every nearest enclosure the commit reaches, sorted by holder. Never empty. */
+ | {
+    readonly kind: 'through';
+    readonly by: readonly Enclosure[];
+};
+/** Who draws one component, over one build's census. */
+export type Enclosing = (component: string, subjects: readonly string[]) => Holding;
+export declare function heldBy(build: BuildDetail): Enclosing;
+//# sourceMappingURL=holding.d.ts.map