segreant 0.1.0 → 0.2.0

package/dist/dashboard/web/app/views/statement.js

@@ -0,0 +1,189 @@
+/**
+ * Statement — one calendar month, as someone who looks after the money reads it.
+ *
+ * The four claims sit side by side and are never added together: what Segreant
+ * measured, what the provider billed, how it was split across cost centres, and
+ * what the work produced. Each carries its own basis, and a claim the ledger
+ * cannot establish for the month says so and names the page that establishes
+ * it, rather than showing a zero.
+ *
+ * A billed or allocated run is a fact about ITS OWN period. When that period is
+ * not exactly the month, its figures are labelled with its dates, never as the
+ * month's, and never prorated into it.
+ */
+import { h } from '../core/dom.js';
+import { signal, scopedEffect } from '../core/signal.js';
+import { api } from '../core/api.js';
+import { isPrecise, usd, usdFromMicros, count, pct, share, date, relative } from '../core/fmt.js';
+import { quantizationWords } from '../core/reconcileWords.js';
+import { meteredBasisLine } from '../core/claimLayers.js';
+import { errorText } from '../components/workflow.js';
+function monthKey(d) {
+    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;
+}
+function shiftMonth(key, by) {
+    const [y, m] = key.split('-').map(Number);
+    return monthKey(new Date(y, m - 1 + by, 1));
+}
+/** A run's own period, with the last day shown inclusively. */
+function runPeriod(startMs, endMs, timeZone) {
+    return `${date(startMs, timeZone)} – ${date(endMs - 1, timeZone)}${timeZone ? ' UTC' : ''}`;
+}
+/**
+ * How a run's own period relates to the month. In a month still in progress, a
+ * run from the 1st up to when it was recorded is the month so far, which
+ * "part of the month only" would misdescribe.
+ */
+function coverWords(covers, startMs, endMs, period, computedAtMs, timeZone) {
+    const span = runPeriod(startMs, endMs, timeZone);
+    if (covers)
+        return `covers the whole month (${span})`;
+    if (!period.complete && startMs <= period.startMs && endMs >= computedAtMs - 3_600_000)
+        return `covers the month so far (${span})`;
+    return `covers part of the month only (${span})`;
+}
+export function statementView() {
+    const month = signal(monthKey(new Date()));
+    const data = signal(null);
+    const error = signal(null);
+    scopedEffect(() => {
+        const m = month();
+        data.set(null);
+        error.set(null);
+        void api.statement(m).then((p) => data.set(p)).catch((e) => error.set(errorText(e)));
+    });
+    const thisMonth = monthKey(new Date());
+    // While a month loads, the live label says its name, never the raw key: NVDA
+    // read "2026-09" and then "September 2026" (2026-10-15).
+    const monthName = (key) => {
+        const [y, m] = key.split('-').map(Number);
+        return new Date(y, (m ?? 1) - 1, 1).toLocaleString('en-GB', { month: 'long', year: 'numeric' });
+    };
+    return h('div', null, h('div', { class: 'view-head' }, h('h1', { class: 'view-title', text: 'Statement' }), h('p', { class: 'view-plain', text: () => isPrecise()
+            ? 'One calendar month: metered, provider-billed, allocated and realized, each on its own evidence. They answer different questions and are never summed.'
+            : 'One month at a glance: what we measured, what your provider billed, how it was split, and what it produced. Four different questions, so the four figures are never added up.' })), h('div', { class: 'month-bar', role: 'group', 'aria-label': 'Month' }, h('button', { class: 'btn-ghost', type: 'button', 'aria-label': 'Previous month', text: '‹', onclick: () => month.set(shiftMonth(month(), -1)) }), h('span', { class: 'month-label', 'aria-live': 'polite', text: () => data()?.period.label ?? monthName(month()) }), h('button', { class: 'btn-ghost', type: 'button', 'aria-label': 'Next month', text: '›',
+        disabled: () => month() >= thisMonth, onclick: () => month.set(shiftMonth(month(), 1)) }), h('span', { class: 'month-state', text: () => {
+            const d = data();
+            if (!d)
+                return '';
+            return d.period.complete ? 'month complete' : 'month in progress, figures so far';
+        } }), 
+    // A plain link the browser saves: the same four claims, every project and
+    // model, as four sections with no total row.
+    h('a', { class: 'statement-download', href: () => api.statementCsvHref(month()), download: '',
+        text: () => (isPrecise() ? 'Export CSV' : 'Download as CSV') })), () => {
+        const err = error();
+        if (err)
+            return h('div', { class: 'card' }, h('p', { class: 'drawer-error', role: 'alert', text: err }));
+        const d = data();
+        if (!d)
+            return h('div', { class: 'card' }, h('p', { class: 'drawer-muted', role: 'status', 'aria-busy': 'true', text: 'Reading the month…' }));
+        const names = new Map(d.allocated.costCentres.map((c) => [c.costCentreId, c.name]));
+        return h('div', null, d.demo ? h('p', { class: 'section-note', role: 'note', text: 'Sample data: these figures were generated, not measured on your machine.' }) : null, h('div', { class: 'statement-grid' }, meteredCard(d), billedCard(d), allocatedCard(d, (id) => names.get(id) ?? id), realizedCard(d)), h('p', { class: 'basis statement-rule', text: () => (isPrecise()
+                ? 'Not summable: metered is a local estimate, billed is a provider figure compared with it, allocated is a split of the estimate, realized is value. Each card states its own basis.'
+                : 'These four are not parts of one total. Each answers its own question, on its own evidence.') }), breakdown(d), closeLine(d));
+    });
+}
+function card(title, pill, ...body) {
+    return h('div', { class: 'card statement-card' }, h('div', { class: 'card-head' }, h('span', { class: 'card-title', text: title }), pill ? h('span', { class: `pill ${pill.tone}`, text: pill.text }) : null), ...body);
+}
+function goLink(route, text) {
+    return h('a', { class: 'statement-link', href: `#/${route}`, text });
+}
+function meteredCard(d) {
+    const m = d.metered;
+    return card(() => (isPrecise() ? 'Metered' : 'What we measured'), { text: 'estimate', tone: 'pill-estimate' }, h('div', { class: 'stat', text: usd(m.costUsd) }), h('span', { class: 'basis', text: `${count(m.requests)} request${m.requests === 1 ? '' : 's'} · ${meteredBasisLine(m.basis)}` }), m.retention.truncated
+        ? h('p', { class: 'drawer-error', text: `Retention deleted ${count(m.retention.rowsRemoved)} record(s) from this period, so this covers what survived.` })
+        : null, goLink('spend', 'See where it went'));
+}
+/** Whether one recorded comparison carries a problem the reader must see. */
+function runWarnings(r) {
+    const out = [];
+    if (r.snapshotStability === 'changed_across_observations')
+        out.push('The provider reported different figures for the same days. This comparison is conflicted.');
+    else if (r.snapshotStability === null)
+        out.push('Provider snapshot stability was not recorded.');
+    if (r.offPathBound === 'none_local_estimate_exceeds_provider')
+        out.push('The local estimate exceeds the provider total. This remainder cannot bound spend outside Segreant.');
+    else if (r.offPathBound === 'unknown_local_total_truncated_by_retention')
+        out.push('Retention deleted local request rows in this period. This remainder cannot bound spend outside Segreant.');
+    else if (r.offPathBound === null)
+        out.push('The remainder bound was not recorded; what it establishes is unknown.');
+    return out;
+}
+/** The conditions a sound comparison still rests on, said once and quietly. */
+function runConditions(r) {
+    const parts = [];
+    if (r.snapshotStability === 'stable_across_observations')
+        parts.push('Repeated provider observations agreed.');
+    else if (r.snapshotStability === 'single_observation')
+        parts.push('One provider observation, so agreement across observations is not established.');
+    if (r.offPathBound === 'upper_bound_conditional')
+        parts.push('The remainder bounds spend outside Segreant only if our pricing did not overstate the cost of requests through Segreant.');
+    return parts.join(' ');
+}
+function billedRunLine(r, period) {
+    const conditions = runConditions(r);
+    return h('div', { class: 'statement-run', role: 'group', 'aria-label': `Provider comparison for ${r.providerProjectRef ?? 'an unrecorded project'}` }, h('p', { text: `Provider billed ${usdFromMicros(r.providerReportedMicros)}; we measured ${usdFromMicros(r.localCapturedMicros)}; ${usdFromMicros(r.unexplainedVarianceMicros)} not explained${r.providerReportedMicros > 0 ? ` (${pct(r.unexplainedVarianceMicros / r.providerReportedMicros)})` : ''}.` }), ...runWarnings(r).map((w) => h('p', { class: 'drawer-error', text: w })), h('span', { class: 'basis', text: `${coverWords(r.coversWholeMonth, r.periodStartMs, r.periodEndMs, period, r.computedAtMs, 'UTC')} · project ${r.providerProjectRef ?? 'not recorded'} · ${r.providerSourceKind === 'operator_supplied_export' ? 'from an export you supplied' : r.providerSourceKind === 'provider_api_pull' ? 'read from the provider' : 'source not recorded'} · recorded ${relative(r.computedAtMs)}` }), conditions ? h('span', { class: 'basis', text: conditions }) : null, () => { const q = quantizationWords(r.localQuantization, isPrecise()); return q ? h('span', { class: 'basis', text: q }) : null; });
+}
+/**
+ * The card's one-word summary. Calendar coverage alone never earns a green
+ * pill: a conflicted or unbounded comparison says so even when it spans the
+ * whole month.
+ */
+function billedPill(b) {
+    if (b.runs.some((r) => r.snapshotStability === 'changed_across_observations'))
+        return { text: 'conflicted', tone: 'pill-warn' };
+    if (b.runs.some((r) => runWarnings(r).length > 0))
+        return { text: 'compared, limits apply', tone: 'pill-unverified' };
+    return b.monthCoverage === 'whole' ? { text: 'compared', tone: 'pill-ok' } : { text: 'partly compared', tone: 'pill-unverified' };
+}
+function billedCard(d) {
+    const b = d.billed;
+    if (b.monthCoverage === 'not_established') {
+        return card(() => (isPrecise() ? 'Provider-billed' : 'What the provider billed'), { text: 'not established', tone: 'pill-empty' }, h('p', { class: 'statement-none', text: b.scanComplete
+                ? 'No comparison with a provider bill covers this month.'
+                : 'No comparison found among the most recent ones; an older one may exist.' }), goLink('evidence', 'Close this month'));
+    }
+    return card(() => (isPrecise() ? 'Provider-billed' : 'What the provider billed'), billedPill(b), ...b.runs.slice(0, 3).map((r) => billedRunLine(r, d.period)), b.runs.length > 3 ? h('span', { class: 'basis', text: `${b.runs.length - 3} more comparison(s) overlap this month.` }) : null, goLink('evidence', 'Open Close'));
+}
+function allocatedRunLine(r, nameOf, period) {
+    return h('div', { class: 'statement-run' }, h('ul', { class: 'statement-shares' }, ...r.byCostCentre.map((c) => h('li', null, h('span', { text: nameOf(c.costCentreId) }), h('span', { class: 'num', text: `${usdFromMicros(c.allocatedMicros)}${r.totalMicros > 0 ? ` · ${share(c.allocatedMicros / r.totalMicros)}` : ''}` }))), r.unallocatedMicros > 0
+        ? h('li', { class: 'row-unalloc' }, h('span', { text: 'Not allocated' }), h('span', { class: 'num', text: usdFromMicros(r.unallocatedMicros) }))
+        : null), h('span', { class: 'basis', text: `a split of ${usdFromMicros(r.totalMicros)} of our estimate · ${coverWords(r.coversWholeMonth, r.periodStartMs, r.periodEndMs, period, r.computedAtMs)} · recorded ${relative(r.computedAtMs)}` }));
+}
+function allocatedCard(d, nameOf) {
+    const a = d.allocated;
+    if (a.monthCoverage === 'not_established') {
+        return card(() => (isPrecise() ? 'Allocated' : 'How it was split'), { text: 'not established', tone: 'pill-empty' }, h('p', { class: 'statement-none', text: a.scanComplete
+                ? 'No recorded split covers this month.'
+                : 'No split found among the most recent ones; an older one may exist.' }), goLink('allocation', 'Split this month'));
+    }
+    return card(() => (isPrecise() ? 'Allocated' : 'How it was split'), { text: 'showback only', tone: 'pill-estimate' }, ...a.runs.slice(0, 2).map((r) => allocatedRunLine(r, nameOf, d.period)), a.runs.length > 2 ? h('span', { class: 'basis', text: `${a.runs.length - 2} more split(s) overlap this month.` }) : null, goLink('allocation', 'Open Allocate'));
+}
+function realizedCard(d) {
+    const r = d.realized;
+    const title = () => (isPrecise() ? 'Realized' : 'What it produced');
+    if (r.standing === 'none_judged' && r.tooEarly.units === 0) {
+        return card(title, { text: 'nothing judged', tone: 'pill-empty' }, h('p', { class: 'statement-none', text: r.measuredAt === null ? r.reason : 'No work had its check in this month.' }), goLink('value', 'Open Value'));
+    }
+    const pieces = (n) => `${count(n)} ${n === 1 ? 'piece' : 'pieces'} of work`;
+    const line = (label, c, tone) => h('div', { class: 'statement-kept-row' }, h('span', { class: `statement-kept-key ${tone}`, text: label }), h('span', { class: 'statement-kept-val', text: `${pieces(c.units)} · ${usd(c.costUsd)} list cost` }));
+    const due = r.tooEarly.nextCheckMs === null ? '' : `, first check ${new Date(r.tooEarly.nextCheckMs).toLocaleDateString('en-GB', { day: 'numeric', month: 'short' })}`;
+    return card(title, { text: 'counts, not value', tone: 'pill-estimate' }, h('div', { class: 'statement-kept' }, line('Kept', r.kept, 'gate-pass'), line('Not kept', r.notKept, 'gate-fail'), r.contested.units > 0 ? line('Results disagree', r.contested, 'gate-unchecked') : null, r.unknown.units > 0 ? line('No signal', r.unknown, 'gate-unchecked') : null, r.tooEarly.units > 0 ? h('div', { class: 'statement-kept-row' }, h('span', { class: 'statement-kept-key gate-unchecked', text: 'Too early to tell' }), h('span', { class: 'statement-kept-val', text: `${pieces(r.tooEarly.units)}${due}` })) : null), h('span', { class: 'basis', text: r.reason }), goLink('value', 'Open Value'));
+}
+function breakdown(d) {
+    const m = d.metered;
+    if (m.byProject.length === 0 && m.byModel.length === 0)
+        return null;
+    const table = (label, rows) => h('div', { class: 'table-wrap' }, h('table', { 'aria-label': label }, h('thead', null, h('tr', null, h('th', { scope: 'col', text: label }), h('th', { scope: 'col', class: 'num', text: 'Measured' }), h('th', { scope: 'col', class: 'num', text: 'Share' }), h('th', { scope: 'col', class: 'num', text: 'Requests' }))), h('tbody', null, ...rows.map((r) => h('tr', null, h('td', { class: 'name-cell', text: r.label }), h('td', { class: 'num', text: usd(r.costUsd) }), h('td', { class: 'num', text: m.costUsd > 0 ? share(r.costUsd / m.costUsd) : '—' }), h('td', { class: 'num', text: count(r.requests) }))))));
+    return h('section', { class: 'section' }, h('h2', { class: 'section-title', text: () => (isPrecise() ? 'Metered, by project and model' : 'Where the measured spend went') }), h('div', { class: 'grid grid-2' }, table('Project', m.byProject), table('Model', m.byModel)));
+}
+function closeLine(d) {
+    const s = d.close.status;
+    const words = s === 'finalized' ? 'This month is finalized in the economic ledger.'
+        : s === 'reopened' ? 'This month was finalized, then reopened.'
+            : s === 'conflicted' ? 'This month has conflicting finalizations.'
+                : 'This month is not finalized in the economic ledger.';
+    return h('p', { class: 'basis', style: 'margin-top: var(--s6)', text: () => (isPrecise() ? `period close: ${s}` : words) });
+}

package/dist/dashboard/web/app/views/system.js

@@ -7,10 +7,15 @@
  * routes through. A capability with no screen says so here, inside the product,
  * rather than in a README nobody opens.
  */
+import { themeChoice, setTheme } from '../core/theme.js';
+import { viewPrefs, setView, setJobShown, jobShown } from '../core/view.js';
+import { JOBS } from '../core/jobs.js';
 import { h } from '../core/dom.js';
 import { CAPABILITY_SPECS, TERRITORIES, paritySummary } from '../core/registry.js';
 import { isPrecise } from '../core/fmt.js';
 import { actionCard } from './spend.js';
+import { actionSpec, hasRunner } from '../core/actions.js';
+import { openAction } from '../components/drawer.js';
 const COVERAGE_WORDS = {
     full: 'in the GUI',
     partial: 'partly in the GUI',
@@ -19,22 +24,57 @@ const COVERAGE_WORDS = {
     // screen has not been built, and here one cannot be.
     not_applicable: 'cannot have a screen',
 };
+const THEME_WORDS = [['system', 'Match this computer'], ['light', 'Light'], ['dark', 'Dark']];
+/** Appearance is kept in this browser only; nothing about it reaches the ledger or the config file. */
+function appearance() {
+    return h('div', { class: 'card appearance' }, h('div', { class: 'card-head' }, h('span', { class: 'card-title', id: 'appearance-title', text: 'Appearance' })), h('div', { class: 'register-switch theme-switch', role: 'group', 'aria-labelledby': 'appearance-title' }, ...THEME_WORDS.map(([choice, label]) => h('button', {
+        type: 'button',
+        'aria-pressed': () => (themeChoice() === choice ? 'true' : 'false'),
+        onclick: () => setTheme(choice),
+        text: label,
+    }))), h('p', { class: 'basis', text: 'Saved in this browser only.' }));
+}
+const DENSITY_WORDS = [['comfortable', 'Comfortable'], ['compact', 'Compact']];
+function check(label, on, change) {
+    return h('label', { class: 'pref' }, h('input', { type: 'checkbox', checked: on, onchange: (e) => change(e.target.checked) }), h('span', { text: label }));
+}
+/** What you see. Display only: hiding a part never changes a figure. */
+function viewChoices() {
+    const p = viewPrefs();
+    return h('div', { class: 'card view-prefs' }, h('div', { class: 'card-head' }, h('span', { class: 'card-title', id: 'view-title', text: 'What you see' })), h('div', { class: 'register-switch theme-switch', role: 'group', 'aria-label': 'Density' }, ...DENSITY_WORDS.map(([d, label]) => h('button', {
+        type: 'button',
+        'aria-pressed': () => (viewPrefs().density === d ? 'true' : 'false'),
+        onclick: () => setView({ density: d }),
+        text: label,
+    }))), h('fieldset', { class: 'pref-group' }, h('legend', { text: 'On every page' }), check('The four figures above the money pages', p.strip, (on) => setView({ strip: on })), check('A short explanation under each page title', p.intros, (on) => setView({ intros: on }))), h('fieldset', { class: 'pref-group' }, h('legend', { text: 'Jobs in the top bar' }), ...JOBS.map((j) => check(j.label, jobShown(j.id), (on) => setJobShown(j.id, on))), h('p', { class: 'form-hint', text: 'A hidden job still opens from here, and the job you are in always shows.' }), () => h('div', { class: 'pref-links' }, ...JOBS.filter((j) => !jobShown(j.id)).map((j) => h('a', { href: `#/${j.id}`, text: `Open ${j.label}` })))), h('p', { class: 'basis', text: 'Saved in this browser only. Hiding something never changes a figure.' }));
+}
 export function systemView() {
     const parity = paritySummary();
-    return h('div', null, h('div', { class: 'view-head' }, h('h1', { class: 'view-title', text: 'System' }), h('p', { class: 'view-plain', text: () => isPrecise()
+    return h('div', null, h('div', { class: 'view-head' }, h('h1', { class: 'view-title', text: 'Settings' }), h('p', { class: 'view-plain', text: () => isPrecise()
             ? 'Local configuration, rate cards, maintenance, and the CLI/GUI parity map rendered from the same registry the GUI routes through.'
-            : 'Settings for this machine, plus an honest list of everything Segreant can do and whether this web interface can do it yet.' })), h('div', { class: 'grid' }, h('div', { class: 'card' }, h('div', { class: 'card-head' }, h('span', { class: 'card-title', text: 'In the GUI' })), h('div', { class: 'stat', text: String(parity.full) }), h('span', { class: 'basis', text: `of ${parity.total} capabilities` })), h('div', { class: 'card' }, h('div', { class: 'card-head' }, h('span', { class: 'card-title', text: 'Partly' })), h('div', { class: 'stat', text: String(parity.partial) }), h('span', { class: 'basis', text: 'usable, with options only on the CLI' })), h('div', { class: 'card' }, h('div', { class: 'card-head' }, h('span', { class: 'card-title', text: 'Command line only' })), h('div', { class: 'stat', text: String(parity.planned) }), h('span', { class: 'basis', text: 'no screen yet — the command is listed' })), 
+            : 'Settings for this machine, plus a list of everything Segreant can do and whether it is done here or from the command line.' })), 
+    // The settings come first: this is the page someone opens to change one.
+    // The parity map used to lead, a 60-row table that made this the longest page
+    // in the product (10,140 px) with the settings at the very bottom.
+    appearance(), viewChoices(), h('div', { class: 'actions', style: 'margin-top: var(--s5)' }, actionCard('settings'), actionCard('features'), actionCard('doctor'), actionCard('clear-proposals'), actionCard('prune')), 
+    // Kept, and kept complete: the map is a claim the product makes about itself.
+    // Closed by default, with its counts in the summary so the answer to "how
+    // much can the GUI do" is readable without opening it.
+    h('details', { class: 'section parity-details' }, h('summary', { class: 'parity-summary' }, h('span', { class: 'section-title', text: () => (isPrecise() ? 'CLI/GUI parity' : 'What this dashboard can and cannot do') }), h('span', { class: 'parity-counts', text: `${parity.full} in the GUI · ${parity.partial} partly · ${parity.planned} command line only · ${parity.notApplicable} cannot have a screen · of ${parity.total}` })), h('div', { class: 'grid' }, h('div', { class: 'card' }, h('div', { class: 'card-head' }, h('span', { class: 'card-title', text: 'In the GUI' })), h('div', { class: 'stat', text: String(parity.full) }), h('span', { class: 'basis', text: `of ${parity.total} capabilities` })), h('div', { class: 'card' }, h('div', { class: 'card-head' }, h('span', { class: 'card-title', text: 'Partly' })), h('div', { class: 'stat', text: String(parity.partial) }), h('span', { class: 'basis', text: 'usable, with options only on the CLI' })), h('div', { class: 'card' }, h('div', { class: 'card-head' }, h('span', { class: 'card-title', text: 'Command line only' })), h('div', { class: 'stat', text: String(parity.planned) }), h('span', { class: 'basis', text: 'no screen yet — the command is listed' })), 
     // The fourth state gets its own card rather than being folded into
     // "command line only". A capability the GUI cannot offer is not a gap in
     // the GUI, and counting it as one would make the parity fraction read
     // worse than the truth -- while leaving it out of `total` altogether was
     // the error this card exists to correct.
-    h('div', { class: 'card' }, h('div', { class: 'card-head' }, h('span', { class: 'card-title', text: 'Cannot have a screen' })), h('div', { class: 'stat', text: String(parity.notApplicable) }), h('span', { class: 'basis', text: 'structurally unavailable here — each row says why' }))), h('div', { class: 'card', style: 'margin-top: var(--s4)' }, h('div', { class: 'card-head' }, h('span', { class: 'card-title', text: 'Parity map' })), h('p', { class: 'view-plain', style: 'margin-bottom: var(--s4)', text: 'Every capability Segreant has, where it lives, what it costs you to run it, and whether this interface covers it. Generated from the same registry the navigation uses, and checked against the command line\u2019s own dispatch, so it cannot drift from what the GUI does or quietly leave a command out.' }), h('div', { class: 'table-wrap' }, h('table', { 'aria-label': 'CLI/GUI parity map' }, h('thead', null, h('tr', null, h('th', { scope: 'col', text: 'Capability' }), h('th', { scope: 'col', text: 'Section' }), h('th', { scope: 'col', text: 'Consequence' }), h('th', { scope: 'col', text: 'Here' }), h('th', { scope: 'col', text: 'Command' }))), h('tbody', null, ...CAPABILITY_SPECS.map((c) => h('tr', null, h('td', null, h('strong', { text: c.label }), h('br'), h('span', { class: 'action-plain', text: c.plain })), h('td', { text: TERRITORIES.find((t) => t.id === c.territory)?.label ?? c.territory }), h('td', null, h('span', { class: `tag tag-${c.consequence}`, text: c.consequence === 'read' ? 'reads only' : c.consequence })), h('td', null, h('span', {
+    h('div', { class: 'card' }, h('div', { class: 'card-head' }, h('span', { class: 'card-title', text: 'Cannot have a screen' })), h('div', { class: 'stat', text: String(parity.notApplicable) }), h('span', { class: 'basis', text: 'structurally unavailable here — each row says why' }))), h('div', { class: 'card', style: 'margin-top: var(--s4)' }, h('div', { class: 'card-head' }, h('span', { class: 'card-title', text: 'Parity map' })), h('p', { class: 'view-plain', style: 'margin-bottom: var(--s4)', text: 'Every capability Segreant has, where it lives, what it costs you to run it, and whether this interface covers it. Generated from the same registry the navigation uses, and checked against the command line\u2019s own dispatch, so it cannot drift from what the GUI does or quietly leave a command out.' }), h('div', { class: 'table-wrap' }, h('table', { class: 'parity-table', 'aria-label': 'CLI/GUI parity map' }, h('thead', null, h('tr', null, h('th', { scope: 'col', text: 'Capability' }), h('th', { scope: 'col', text: 'Section' }), h('th', { scope: 'col', text: 'Consequence' }), h('th', { scope: 'col', text: 'Here' }), h('th', { scope: 'col', text: 'Command' }))), h('tbody', null, ...CAPABILITY_SPECS.map((c) => h('tr', null, h('td', null, h('strong', { text: c.label }), h('br'), h('span', { class: 'action-plain', text: c.plain })), h('td', { text: TERRITORIES.find((t) => t.id === c.territory)?.label ?? c.territory }), h('td', null, h('span', { class: `tag tag-${c.consequence}`, text: c.consequence === 'read' ? 'reads only' : c.consequence })), h('td', null, h('span', {
         class: c.coverage === 'planned' || c.coverage === 'not_applicable' ? 'tag tag-planned' : 'tag',
         text: COVERAGE_WORDS[c.coverage] ?? c.coverage,
     }), 
     // The reason travels with the state, in the same cell. A row that
     // says the GUI cannot do something and does not say why is the
     // assertion without its basis.
-    ...(c.coverageNote ? [h('br'), h('span', { class: 'action-plain', text: c.coverageNote })] : [])), h('td', null, h('code', { class: 'cmd', style: 'white-space: nowrap', text: c.command })))))))), h('div', { style: 'margin-top: var(--s6)' }, h('h2', { class: 'card-title', style: 'margin-bottom: var(--s3)', text: 'Maintenance' }), h('div', { class: 'actions' }, actionCard('settings'), actionCard('features'), actionCard('doctor'), actionCard('clear-proposals'), actionCard('prune'))));
+    ...(c.coverageNote ? [h('br'), h('span', { class: 'action-plain', text: c.coverageNote })] : []), 
+    // The map is where a reader learns a capability exists, so a row
+    // the GUI can run opens its drawer right here, preview first.
+    ...(hasRunner(c) ? [h('br'), h('button', { class: 'link-btn parity-open', type: 'button', 'aria-label': `Open ${c.label}`, text: 'Open', onclick: () => openAction(actionSpec(c)) })] : [])), h('td', null, h('code', { class: 'cmd', style: 'white-space: nowrap', text: c.command }))))))))));
 }