segreant 0.1.0 → 0.2.0

package/dist/dashboard/web/app/components/drawer.js

@@ -65,10 +65,59 @@ function panel(spec) {
     const committing = signal(false);
     const result = signal(null);
     const typed = signal('');
-    void spec.preview()
-        .then((p) => preview.set(p))
-        .catch((e) => error.set(e instanceof Error ? e.message : String(e)))
-        .finally(() => busy.set(false));
+    // The preview is re-run whenever a field changes (H004). Before, it ran once
+    // at open: a budget of -1 failed at commit, the failure disabled Apply, and
+    // correcting the field to 25 changed nothing on screen; on Optional features
+    // the preview kept describing the first switch while Apply wrote the one now
+    // selected. `refreshing` keeps the last preview on screen, marked stale, and
+    // holds Apply until the preview matches the fields again. Only the newest
+    // run may land.
+    const refreshing = signal(false);
+    let run = 0;
+    const runPreview = () => {
+        const mine = ++run;
+        if (preview.peek() !== null || error.peek() !== null)
+            refreshing.set(true);
+        void spec.preview()
+            .then((p) => { if (mine === run) {
+            preview.set(p);
+            error.set(null);
+        } })
+            .catch((e) => { if (mine === run)
+            error.set(e instanceof Error ? e.message : String(e)); })
+            .finally(() => { if (mine === run) {
+            busy.set(false);
+            refreshing.set(false);
+        } });
+    };
+    runPreview();
+    let pending = null;
+    // What the fields last said. A text field fires `change` again when it loses
+    // focus, and pressing Apply is what makes it lose focus: re-previewing on that
+    // echo disabled Apply between mousedown and click, so typing a value and
+    // clicking Apply did nothing the first time. Only a real difference counts.
+    let lastFields = null;
+    const fieldsChanged = (event) => {
+        const scope = event?.currentTarget instanceof Element ? event.currentTarget : null;
+        if (scope) {
+            const now = Array.from(scope.querySelectorAll('input, select, textarea'))
+                .map((el) => (el instanceof HTMLInputElement && (el.type === 'checkbox' || el.type === 'radio') ? String(el.checked) : el.value))
+                .join('\u0000');
+            if (now === lastFields)
+                return;
+            lastFields = now;
+        }
+        // An outcome described the input as it was; once the input changes it is
+        // history, and keeping it would also keep Apply disabled.
+        if (!committing.peek())
+            result.set(null);
+        refreshing.set(true);
+        if (pending !== null)
+            clearTimeout(pending);
+        pending = setTimeout(() => { pending = null; runPreview(); }, 250);
+    };
+    onCleanup(() => { if (pending !== null)
+        clearTimeout(pending); });
     const confirmPhrase = cap.id;
     const confirmed = () => cap.consequence !== 'destructive' || typed().trim() === confirmPhrase;
     const scrim = h('div', {
@@ -80,7 +129,7 @@ function panel(spec) {
         role: 'dialog',
         'aria-modal': 'true',
         'aria-labelledby': 'drawer-title',
-    }, h('header', { class: 'drawer-head' }, h('div', { class: 'drawer-badge', text: consequence.badge }), h('h2', { id: 'drawer-title', class: 'drawer-title', text: cap.label }), h('p', { class: 'drawer-plain', text: cap.plain }), h('button', { class: 'drawer-close', 'aria-label': 'Close', onclick: () => closeAction() }, '×')), h('p', { class: 'drawer-consequence', text: consequence.plain }), cap.warning ? h('div', { class: 'drawer-warning', role: 'note' }, h('strong', { text: 'Before you do this' }), h('p', { text: cap.warning })) : null, spec.fields ? h('div', { class: 'drawer-fields' }, spec.fields()) : null, h('section', { class: 'drawer-preview' }, h('h3', { class: 'drawer-h3', text: 'Preview' }), () => {
+    }, h('header', { class: 'drawer-head' }, h('div', { class: 'drawer-badge', text: consequence.badge }), h('h2', { id: 'drawer-title', class: 'drawer-title', text: cap.label }), h('p', { class: 'drawer-plain', text: cap.plain }), h('button', { class: 'drawer-close', 'aria-label': 'Close', onclick: () => closeAction() }, '×')), h('p', { class: 'drawer-consequence', text: consequence.plain }), cap.warning ? h('div', { class: 'drawer-warning', role: 'note' }, h('strong', { text: 'Before you do this' }), h('p', { text: cap.warning })) : null, spec.fields ? h('div', { class: 'drawer-fields', oninput: fieldsChanged, onchange: fieldsChanged }, spec.fields()) : null, h('section', { class: () => `drawer-preview${refreshing() ? ' is-refreshing' : ''}`, 'aria-busy': () => (refreshing() ? 'true' : 'false') }, h('h3', { class: 'drawer-h3', text: 'Preview' }), () => {
         if (busy())
             return h('p', { class: 'drawer-muted', text: 'Working it out…' });
         const err = error();
@@ -101,11 +150,11 @@ function panel(spec) {
     // The command is always shown. For the developer it is the faster path; for
     // everyone it is the audit trail — what this button is about to do, in a form
     // that can be pasted into an issue, a runbook, or a code review.
-    h('section', { class: 'drawer-command' }, h('h3', { class: 'drawer-h3', text: isPrecise() ? 'Equivalent command' : 'The same thing, as a command' }), h('div', { class: 'cmd-row' }, h('code', { class: 'cmd', text: cap.command }), h('button', {
+    h('section', { class: 'drawer-command' }, h('h3', { class: 'drawer-h3', text: isPrecise() ? 'Equivalent command' : 'The same thing, as a command' }), h('div', { class: 'cmd-row' }, h('code', { class: 'cmd', text: () => spec.command?.() ?? cap.command }), h('button', {
         class: 'cmd-copy',
         text: 'Copy',
         onclick: (event) => {
-            void navigator.clipboard?.writeText(cap.command);
+            void navigator.clipboard?.writeText(spec.command?.() ?? cap.command);
             const button = event.currentTarget;
             button.textContent = 'Copied';
             setTimeout(() => { button.textContent = 'Copy'; }, 1400);
@@ -151,42 +200,63 @@ function panel(spec) {
             });
         }
         return null;
-    }), h('div', { class: 'drawer-actions' }, h('button', { class: 'btn-ghost', text: 'Close', onclick: () => closeAction() }), spec.download
-        ? h('a', { class: 'btn-commit', href: spec.download, download: '', text: 'Download' })
-        : null, () => {
-        if (!spec.commit)
-            return null;
+    }), 
+    // Why Apply is unavailable gets its own line. Squeezed between the two
+    // buttons it wrapped mid-word ("--" / "demo") on a phone-width drawer.
+    () => {
         const p = preview();
-        const ready = !busy() && p !== null && p.applicable && confirmed() && !committing() && result() === null;
-        // `title` is not exposed to keyboard or screen-reader users on a
-        // `disabled` control — browsers do not run hover/focus tooltip
-        // logic for it, and a disabled element cannot receive focus at
-        // all — so it was the ONLY carrier of why the button could not be
-        // pressed. The reason is now a visible sibling, reached from the
-        // button with `aria-describedby`, the same pattern the daily-cap
-        // field uses for its own consequence text (`actions.ts`).
-        const blocked = p && !p.applicable ? (p.blockedReason ?? 'Nothing to apply') : null;
-        return [
-            blocked
-                ? h('p', { id: 'drawer-blocked-reason', class: 'drawer-note', text: blocked })
-                : null,
-            h('button', {
+        if (!spec.commit || !p || p.applicable)
+            return null;
+        return h('p', { id: 'drawer-blocked-reason', class: 'drawer-note drawer-blocked', text: p.blockedReason ?? 'Nothing to apply' });
+    }, h('div', { class: 'drawer-actions' }, h('button', { class: 'btn-ghost', text: 'Close', onclick: () => closeAction() }), spec.download
+        ? h('a', { class: 'btn-commit', href: spec.download, download: '', text: 'Download' })
+        : null, 
+    // One persistent button whose state is reactive. It used to be rebuilt
+    // whenever the preview, the busy flag or the result changed: a preview
+    // landing between mousedown and mouseup swallowed the click (no click
+    // event fires across two elements), and a commit moved keyboard focus
+    // from Apply to the page body.
+    spec.commit
+        ? (() => {
+            // A failed outcome does not block a retry; a successful one does,
+            // until a field changes and the preview is recomputed.
+            const ready = () => {
+                const p = preview();
+                return !busy() && !refreshing() && p !== null && p.applicable && confirmed() && !committing() && result()?.ok !== true;
+            };
+            // `title` is not exposed to keyboard or screen-reader users on a
+            // `disabled` control, so the reason Apply is unavailable is a
+            // visible sibling reached with `aria-describedby`, the pattern the
+            // daily-cap field uses for its own consequence text (`actions.ts`).
+            const blocked = () => { const p = preview(); return p !== null && !p.applicable; };
+            return h('button', {
                 class: `btn-commit tone-${consequence.tone}`,
-                disabled: !ready,
-                'aria-describedby': blocked ? 'drawer-blocked-reason' : undefined,
-                text: () => (committing() ? 'Working…' : commitLabel(cap.consequence)),
-                onclick: () => {
-                    if (!ready || !spec.commit)
+                disabled: () => !ready(),
+                'aria-describedby': () => (blocked() ? 'drawer-blocked-reason' : null),
+                text: () => (committing() ? 'Working…' : spec.commitLabel ?? commitLabel(cap.consequence)),
+                onclick: (event) => {
+                    if (!ready() || !spec.commit)
                         return;
+                    const button = event.currentTarget;
                     committing.set(true);
                     void spec.commit()
                         .then((r) => result.set(r))
                         .catch((e) => result.set({ ok: false, message: e instanceof Error ? e.message : String(e) }))
-                        .finally(() => committing.set(false));
+                        .finally(() => {
+                        committing.set(false);
+                        // A disabled Apply can hold no useful focus: Chrome either
+                        // blurs it to the page body or leaves it on the dead
+                        // button. The result is announced by the status line;
+                        // focus goes to Close, the next thing to do.
+                        const at = document.activeElement;
+                        if (button.disabled && (at === null || at === document.body || at === button)) {
+                            button.parentElement?.querySelector('.btn-ghost')?.focus();
+                        }
+                    });
                 },
-            }),
-        ];
-    })));
+            });
+        })()
+        : null)));
     const release = trapFocus(body);
     const onKey = (event) => {
         if (event.key === 'Escape')

package/dist/dashboard/web/app/components/ruleFields.js

@@ -0,0 +1,144 @@
+/**
+ * The allocation rule form's fields, and the rule they describe.
+ *
+ * One copy, used by the Allocate page's form and by the rule drawer, so a rule
+ * written in either place is the same rule `segreant alloc rule` writes, field
+ * by field. The fields only build a request body; saving it is the caller's job,
+ * which is what lets the drawer preview before it commits.
+ */
+import { h } from '../core/dom.js';
+import { signal } from '../core/signal.js';
+import { isPrecise } from '../core/fmt.js';
+import { slug } from '../core/slug.js';
+import { localMidnightIso } from '../core/periods.js';
+import { field } from './workflow.js';
+export const METHOD_WORDS = {
+    direct: { plain: 'all of it to one centre', precise: 'direct' },
+    fixed_split: { plain: 'split by fixed shares', precise: 'fixed_split' },
+    proportional_to_direct: { plain: 'shared, split like the direct spend', precise: 'proportional_to_direct' },
+};
+/** The match fields beyond project, in the engine's own vocabulary (MATCH_FIELDS). */
+export const EXTRA_MATCH = [
+    { key: 'model', label: 'Model', placeholder: 'for example gpt-5' },
+    { key: 'provider', label: 'Provider', placeholder: 'for example openai' },
+    { key: 'source', label: 'Tool', placeholder: 'for example claude-code' },
+    { key: 'user', label: 'User', placeholder: 'as recorded on the request' },
+];
+/** A rule in a sentence: what spend it takes and where that spend goes. */
+export function describeRule(r, nameOf) {
+    const match = Object.entries(r.match ?? {}).filter(([, v]) => v != null).map(([k, v]) => `${k} ${v}`).join(', ');
+    const what = match ? `Spend where ${match}` : 'All spend';
+    if (r.method === 'proportional_to_direct')
+        return `${what}: shared across centres in proportion to their direct spend`;
+    if (r.method === 'fixed_split')
+        return `${what}: ${r.targets.map((t) => `${Math.round(t.ratio * 1000) / 10}% to ${nameOf(t.costCentreId)}`).join(', ')}`;
+    return `${what} goes to ${r.targets[0] ? nameOf(r.targets[0].costCentreId) : '—'}`;
+}
+/**
+ * The fields, as children to place inside a form or a drawer, and `build()`,
+ * which returns the rule they describe or the reason they describe none.
+ * `prefix` keeps element ids unique when two copies could share a page.
+ */
+export function ruleFields(centres, projects, models, prefix = 'rule') {
+    const method = signal('direct');
+    const project = signal('');
+    const extra = signal({});
+    const priority = signal('');
+    const from = signal('');
+    const until = signal('');
+    const owner = signal('');
+    const note = signal('');
+    const target = signal(centres[0]?.costCentreId ?? '');
+    const shares = signal({});
+    const shareTotal = () => Object.values(shares()).reduce((s, v) => s + (Number(v) || 0), 0);
+    const id = (key) => `${prefix}-${key}`;
+    const build = () => {
+        if (centres.length === 0)
+            return 'Add a cost centre first: a rule needs somewhere to send the spend.';
+        const p = project().trim();
+        const match = p ? { project: p } : {};
+        for (const { key } of EXTRA_MATCH) {
+            const v = (extra()[key] ?? '').trim();
+            if (v)
+                match[key] = v;
+        }
+        const pr = priority().trim();
+        if (pr !== '' && !/^-?\d+$/.test(pr))
+            return 'Priority must be a whole number.';
+        if (from() && until() && until() <= from())
+            return 'The stop date must be after the start date.';
+        const targets = method() === 'fixed_split'
+            ? Object.entries(shares()).filter(([, v]) => Number(v) > 0).map(([costCentreId, v]) => ({ costCentreId, ratio: Math.round(Number(v) * 10_000) / 1_000_000 }))
+            : [{ costCentreId: target(), ratio: method() === 'direct' ? 1 : 0 }];
+        if (method() === 'fixed_split' && Math.abs(shareTotal() - 100) > 1e-9)
+            return `The shares add up to ${shareTotal()}%. They need to add up to 100%.`;
+        // Every condition is part of the id: with only project and centre in it, a
+        // rule for one model would have replaced an existing rule for all spend.
+        const ruleId = slug([...Object.values(match), method() === 'direct' ? target() : method()].join('-') || 'all');
+        return {
+            id: ruleId,
+            rule: { match, method: method(), targets },
+            priority: pr === '' ? null : Number(pr),
+            from: from(),
+            until: until(),
+            owner: owner().trim(),
+            note: note().trim(),
+            body: {
+                op: 'rule', id: ruleId, method: method(), targets, match,
+                ...(pr === '' ? {} : { priority: Number(pr) }),
+                ...(from() ? { from: localMidnightIso(from()) } : {}),
+                ...(until() ? { until: localMidnightIso(until()) } : {}),
+                ...(owner().trim() ? { owner: owner().trim() } : {}),
+                ...(note().trim() ? { note: note().trim() } : {}),
+            },
+        };
+    };
+    const children = [
+        h('div', { class: 'form-row' }, field(id('project'), 'Which spend', h('input', {
+            id: id('project'), class: 'drawer-input', list: id('projects'), autocomplete: 'off',
+            placeholder: 'a project name, or empty for all spend',
+            oninput: (e) => project.set(e.target.value),
+        })), h('datalist', { id: id('projects') }, () => projects().map((p) => h('option', { value: p }))), h('datalist', { id: id('models') }, () => models().map((m) => h('option', { value: m }))), field(id('method'), 'How', h('select', {
+            id: id('method'), class: 'drawer-input',
+            onchange: (e) => method.set(e.target.value),
+        }, ...Object.keys(METHOD_WORDS).map((m) => h('option', { value: m, text: isPrecise() ? METHOD_WORDS[m].precise : METHOD_WORDS[m].plain })))), () => method() === 'direct'
+            ? field(id('target'), 'To', h('select', {
+                id: id('target'), class: 'drawer-input',
+                onchange: (e) => target.set(e.target.value),
+                // `peek`, not a read: the select keeps the centre already chosen when
+                // the method changes away and back, without rebuilding on each choice.
+            }, ...centres.map((c) => h('option', { value: c.costCentreId, text: c.name, selected: c.costCentreId === target.peek() }))))
+            : null),
+        () => method() === 'fixed_split'
+            ? h('fieldset', { class: 'shares' }, h('legend', { text: () => `Shares, in percent (now ${shareTotal()}% of 100%)` }), ...centres.map((c) => h('label', { class: 'share' }, h('span', { text: c.name }), h('input', {
+                class: 'drawer-input', type: 'number', min: '0', max: '100', step: '0.01', inputmode: 'decimal',
+                'aria-label': `Share for ${c.name}, percent`,
+                oninput: (e) => shares.set({ ...shares(), [c.costCentreId]: e.target.value }),
+            }))))
+            : method() === 'proportional_to_direct'
+                ? h('p', { class: 'form-hint', text: 'This spend is shared out in the same proportions as the spend each centre gets directly in the period. If nothing was allocated directly, it stays unallocated rather than being split evenly.' })
+                : null,
+        h('details', { class: 'rule-more' }, h('summary', { text: 'More conditions and dates' }), h('p', { class: 'form-hint', text: 'Every condition must hold for a request to match. Leave a field empty to match anything.' }), h('div', { class: 'form-row rule-more-row' }, ...EXTRA_MATCH.map(({ key, label, placeholder }) => field(id(key), label, h('input', {
+            id: id(key), class: 'drawer-input', autocomplete: 'off', spellcheck: 'false', placeholder,
+            ...(key === 'model' ? { list: id('models') } : {}),
+            oninput: (e) => extra.set({ ...extra(), [key]: e.target.value }),
+        })))), h('div', { class: 'form-row rule-more-row' }, field(id('priority'), 'Priority', h('input', {
+            id: id('priority'), class: 'drawer-input', type: 'number', step: '1', inputmode: 'numeric', placeholder: '100',
+            'aria-describedby': id('priority-hint'),
+            oninput: (e) => priority.set(e.target.value),
+        })), field(id('from'), 'Applies from', h('input', {
+            id: id('from'), class: 'drawer-input', type: 'date',
+            oninput: (e) => from.set(e.target.value),
+        })), field(id('until'), 'Stops on', h('input', {
+            id: id('until'), class: 'drawer-input', type: 'date',
+            oninput: (e) => until.set(e.target.value),
+        }))), h('div', { class: 'form-row rule-more-row' }, field(id('owner'), 'Owner (optional)', h('input', {
+            id: id('owner'), class: 'drawer-input', maxlength: '120', autocomplete: 'off', placeholder: 'who answers for this rule',
+            oninput: (e) => owner.set(e.target.value),
+        })), field(id('note'), 'Note (optional)', h('input', {
+            id: id('note'), class: 'drawer-input', maxlength: '500', autocomplete: 'off', placeholder: 'why the spend goes here',
+            oninput: (e) => note.set(e.target.value),
+        }))), h('p', { id: id('priority-hint'), class: 'form-hint', text: 'Rules are checked lowest number first, and the first rule that matches a request takes it. Dates are matched against when the spend happened; empty means from the start of your history and with no end.' })),
+    ];
+    return { children, build };
+}

package/dist/dashboard/web/app/components/spine.js

@@ -55,33 +55,56 @@ function bandValue(layer) {
         case 'withheld_uncosted':
             return isPrecise() ? 'supported; not priced' : 'happened, but not priced';
         case 'not_a_money_claim':
-            return isPrecise() ? 'not a money claim' : 'not a dollar figure';
+            return isPrecise() ? 'no dollar figure, by design' : 'no dollar figure here';
         case 'withheld_unsupported':
-            return 'not established';
+            return isPrecise() ? 'not established' : 'nothing to show yet';
     }
 }
+/** A shown figure whose money is an estimate rather than metered, billed or allocated. */
+function estimated(layer) {
+    return layer.support.figure === 'shown' && layer.support.profile.monetaryBasis === 'estimated';
+}
 function band(layer, state) {
     const active = state.active === layer.id;
+    if (state.pending?.has(layer.id)) {
+        // Not a value and not an absence: the answer is on its way. Drawn as an
+        // open socket with no figure, so nothing here can be read as a zero.
+        return h('div', { class: `band band-open band-pending${active ? ' band-active' : ''}`, 'aria-busy': 'true' }, h('button', {
+            class: 'band-hit',
+            'aria-current': active ? 'page' : false,
+            onclick: () => state.onSelect(layer.id),
+        }, h('span', { class: 'band-label' }, layer.label, h('span', { class: 'band-period', text: ` · ${layer.period}` })), h('span', { class: 'band-value band-unset', text: 'reading…' }), h('span', { class: 'band-basis', text: layer.id === 'realized'
+                ? "measuring what the work produced; the other figures don't wait for it"
+                : 'reading the ledger' })));
+    }
     const supported = claimIsSupported(layer);
     return h('div', { class: `band${active ? ' band-active' : ''}${supported ? '' : ' band-open'}` }, h('button', {
         class: 'band-hit',
         'aria-current': active ? 'page' : false,
         onclick: () => state.onSelect(layer.id),
-    }, h('span', { class: 'band-label', text: layer.label }), 
+    }, h('span', { class: 'band-label' }, layer.label, h('span', { class: 'band-period', text: ` · ${layer.period}` })), 
     // Three distinct situations, three different words. `established` said
     // "not established" for all of them, including a Billed band that had
     // been reconciled (no dollar by design, so `usd(null)` rendered a bare
     // em dash) and a Realized band whose units shipped but were never priced.
-    h('span', { class: `band-value${claimShowsFigure(layer) ? '' : ' band-unset'}`,
-        text: bandValue(layer) }), h('span', { class: 'band-basis', text: layer.basis }), layer.nextStep
+    // An estimated figure must not look like a measured one. Realized carried
+    // the largest number on the page at the same size as Metered, so the
+    // least-evidenced claim read as the headline (critique 2026-10-12). It
+    // keeps its figure, smaller, with the word "estimate" on the band itself.
+    estimated(layer)
+        ? h('span', { class: 'band-value band-estimate' }, h('span', { class: 'band-chip', text: () => (isPrecise() ? 'estimate' : 'estimate, not a measurement') }), h('span', { text: bandValue(layer) }))
+        : h('span', { class: `band-value${claimShowsFigure(layer) ? '' : ' band-unset'}`,
+            text: bandValue(layer) }), h('span', { class: 'band-basis', text: layer.basis }), layer.nextStep
         ? h('span', { class: 'band-next', text: layer.nextStep })
         : null), h('button', {
         class: 'band-inspect',
-        'aria-label': `Inspect the evidence for the ${layer.label.toLowerCase()} claim`,
+        'aria-label': `How the ${layer.label.toLowerCase()} figure was worked out`,
         onclick: () => state.onInspect(layer),
-        text: () => (isPrecise() ? 'inspect claim' : 'why this number?'),
+        text: () => (isPrecise() ? 'show the working' : 'why this number?'),
     }));
 }
+/** A sentence that opens with a lowercased label still starts with a capital. */
+const sentence = (s) => s.charAt(0).toUpperCase() + s.slice(1);
 export function spine(state) {
     const children = [];
     state.layers.forEach((layer, i) => {
@@ -99,35 +122,42 @@ export function spine(state) {
     // claims that really are unevidenced, and the other two states say their own
     // thing. This became reachable when the axes moved to the wire: the browser's
     // count-based inference had no branch that could produce either one.
-    const missing = state.layers.filter(claimIsUnevidenced).map((l) => l.label.toLowerCase());
-    const conflicted = state.layers.filter(claimIsConflicted).map((l) => l.label.toLowerCase());
-    const refuted = state.layers.filter(claimIsRefuted).map((l) => l.label.toLowerCase());
-    const settled = state.layers.every(claimIsSupported);
-    const uncosted = state.layers.filter(claimIsSupportedButUncosted).map((l) => l.label.toLowerCase());
+    // A claim still on its way is neither missing nor answered. Counting it as
+    // "cannot answer yet" told the reader Realized had no evidence while it was
+    // being measured.
+    const arrived = state.layers.filter((l) => !state.pending?.has(l.id));
+    const waiting = state.layers.filter((l) => state.pending?.has(l.id)).map((l) => l.label.toLowerCase());
+    const missing = arrived.filter(claimIsUnevidenced).map((l) => l.label.toLowerCase());
+    const conflicted = arrived.filter(claimIsConflicted).map((l) => l.label.toLowerCase());
+    const refuted = arrived.filter(claimIsRefuted).map((l) => l.label.toLowerCase());
+    const settled = waiting.length === 0 && arrived.every(claimIsSupported);
+    const uncosted = arrived.filter(claimIsSupportedButUncosted).map((l) => l.label.toLowerCase());
     const uncostedLine = uncosted.length === 0
         ? null
         : h('p', { class: 'spine-read spine-uncosted' }, isPrecise()
-            ? `${uncosted.join(' and ')} ${uncosted.length === 1 ? 'is' : 'are'} substantiated but unpriced: the evidence holds and an input needed to state a dollar figure is absent. That is a withheld figure, not an absent claim.`
-            : `We can see that ${uncosted.join(' and ')} happened — we just cannot put a number on ${uncosted.length === 1 ? 'it' : 'them'} yet.`);
+            ? `${sentence(uncosted.join(' and '))} ${uncosted.length === 1 ? 'is' : 'are'} backed by evidence but not priced: an input needed for a dollar figure is missing, so the figure is held back. The evidence itself stands.`
+            : `${sentence(uncosted.join(' and '))} happened, but there isn't enough yet to put a dollar figure on ${uncosted.length === 1 ? 'it' : 'them'}.`);
     const conflictedLine = conflicted.length === 0
         ? null
         : h('p', { class: 'spine-read spine-conflicted' }, isPrecise()
-            ? `${conflicted.join(' and ')} ${conflicted.length === 1 ? 'is' : 'are'} contradicted: two observations of the same thing disagree. That is unadjudicated evidence, not missing evidence, and resolving it is a different task from collecting more.`
-            : `Something about ${conflicted.join(' and ')} does not add up — two sources say different things. That is a disagreement to settle, not a gap to fill.`);
+            ? `${sentence(conflicted.join(' and '))} ${conflicted.length === 1 ? 'has' : 'have'} conflicting evidence: two records of the same thing disagree. Nothing is missing, so collecting more won't settle it; the conflict has to be resolved.`
+            : `Two sources disagree about ${conflicted.join(' and ')}. That needs sorting out; it isn't missing data.`);
     const refutedLine = refuted.length === 0
         ? null
         : h('p', { class: 'spine-read spine-refuted' }, isPrecise()
-            ? `${refuted.join(' and ')} ${refuted.length === 1 ? 'is' : 'are'} refuted: the evidence says no. That is a measured answer, and the only one of these states that is.`
-            : `The evidence actually says no for ${refuted.join(' and ')}. That is an answer, not a gap.`);
-    return h('section', { class: 'spine', 'aria-label': 'The four claims' }, h('div', { class: 'spine-rail' }, ...children), h('p', { class: 'spine-read' }, settled
+            ? `${sentence(refuted.join(' and '))}: the evidence says no. That is a measured answer, the only one of these states that is.`
+            : `For ${refuted.join(' and ')}, the evidence says no. That is an answer, not a gap.`);
+    return h('section', { class: 'spine', 'aria-label': 'The four figures' }, h('div', { class: 'spine-rail' }, ...children), h('p', { class: 'spine-read' }, settled
         ? (isPrecise()
-            ? 'All four claims are substantiated on this machine, each on its own evidence.'
+            ? 'All four figures are backed by evidence on this machine, each by its own.'
             : 'All four of these are backed by evidence on this machine.')
         : missing.length === 0
             ? (isPrecise()
-                ? 'Four separate claims with four evidence standards. None is simply unevidenced here; see below for the ones whose evidence is unsettled.'
-                : 'These are four different questions, not four versions of one number. None is simply missing — see below.')
+                ? 'Four separate figures, each needing its own kind of evidence. None is simply missing; the notes below cover the ones still unsettled.'
+                : 'These are four different questions, not four versions of one number. None is simply missing; see below.')
             : (isPrecise()
-                ? `Four separate claims with four evidence standards; ${missing.join(' and ')} ${missing.length === 1 ? 'is' : 'are'} unsubstantiated here. An unsubstantiated layer is an absence of evidence, never a measured zero.`
-                : `These are four different questions, not four versions of one number — and we cannot answer ${missing.join(' or ')} yet. That is missing evidence, not an answer of nothing.`)), conflictedLine, refutedLine, uncostedLine);
+                ? `Four separate figures, each needing its own kind of evidence. ${sentence(missing.join(' and '))} ${missing.length === 1 ? 'has' : 'have'} no evidence here yet, which is not the same as a measured zero.`
+                : `These are four different questions, not four versions of one number. ${sentence(missing.join(' and '))}: nothing to show yet, which isn't the same as zero.`)), conflictedLine, refutedLine, uncostedLine, waiting.length === 0
+        ? null
+        : h('p', { class: 'spine-read', 'aria-live': 'polite', text: `Still reading: ${waiting.join(' and ')}.` }));
 }

package/dist/dashboard/web/app/components/workflow.js

@@ -0,0 +1,82 @@
+/**
+ * The pieces a job page is built from: numbered steps, labelled fields, and one
+ * page-level notice for what the server said.
+ *
+ * Allocate and Close are both jobs done in an order the engine needs, and both
+ * preview before they record. They share these so the two pages behave alike:
+ * the same step heading (an h2 under the page h1), the same field labelling,
+ * and the same notice that survives the reload a save triggers.
+ */
+import { h } from '../core/dom.js';
+import { signal } from '../core/signal.js';
+/**
+ * A notice that lives outside a page's data region. A save reloads the payload,
+ * which rebuilds every form, and a message held by the form would vanish with it.
+ * A confirmation clears itself; a refusal stays until the next action replaces it.
+ */
+export function pageNotice() {
+    const notice = signal(null);
+    const say = (ok, text) => {
+        const shown = { ok, text };
+        notice.set(shown);
+        if (ok)
+            setTimeout(() => { if (notice() === shown)
+                notice.set(null); }, 6000);
+    };
+    const node = h('p', {
+        class: () => `form-msg page-notice${notice()?.ok === false ? ' drawer-error' : ''}`,
+        // Always in the accessibility tree, empty when idle. A live region that is
+        // unhidden with its message already inside is usually not announced, so
+        // "saved" was shown but never spoken (NVDA run, 2026-10-15).
+        role: 'status', 'aria-live': 'polite',
+        text: () => notice()?.text ?? '',
+    });
+    return { node, say };
+}
+/**
+ * A numbered step. Pass `{ n, done: true }` for a step the ledger already
+ * satisfies: its number becomes a check, and screen readers hear "done".
+ */
+export function step(at, title, lede, ...body) {
+    const n = typeof at === 'number' ? at : at.n;
+    const done = typeof at === 'number' ? false : at.done;
+    return h('section', { class: `section step${done ? ' step-done' : ''}` }, h('h2', { class: 'step-title' }, h('span', { class: 'step-n', 'aria-hidden': 'true', text: done ? '✓' : String(n) }), h('span', { text: title }), done ? h('span', { class: 'sr-only', text: ' (done)' }) : null), h('p', { class: 'step-lede', text: lede }), ...body);
+}
+const FOCUSABLE = 'button, input, select, textarea, a[href], [tabindex]:not([tabindex="-1"])';
+function focusKey(el) {
+    return JSON.stringify([el.id, el.tagName, el.getAttribute('aria-label') ?? el.textContent?.trim() ?? '']);
+}
+function usable(el) {
+    return el instanceof HTMLElement && !el.disabled && el.getClientRects().length > 0;
+}
+/**
+ * Call just before a job page swaps in reloaded data; call the result after.
+ *
+ * The swap rebuilds the forms, and the control that started the save goes with
+ * them, dropping keyboard focus to the top of the document. The returned
+ * function puts focus back on the rebuilt equivalent of that control, or, when
+ * the save made it disappear, on the first control of the first step still to
+ * do. Focus the operator moved elsewhere while the request ran is left alone.
+ */
+export function holdFocus(root) {
+    const active = document.activeElement;
+    if (!root || !active || !root.contains(active))
+        return () => { };
+    const key = focusKey(active);
+    return () => {
+        if (active.isConnected || (document.activeElement && document.activeElement !== document.body))
+            return;
+        const candidates = [...root.querySelectorAll(FOCUSABLE)].filter(usable);
+        const same = candidates.find((el) => focusKey(el) === key);
+        const next = same ?? [...root.querySelectorAll('.step:not(.step-done)')]
+            .map((s) => [...s.querySelectorAll(FOCUSABLE)].find(usable))
+            .find((el) => el !== undefined);
+        (next ?? candidates[0])?.focus();
+    };
+}
+export function field(id, label, control) {
+    return h('div', { class: 'form-field' }, h('label', { for: id, text: label }), control);
+}
+export function errorText(e) {
+    return e instanceof Error ? e.message : String(e);
+}