segreant 0.1.0 → 0.2.0

package/dist/dashboard/web/app/main.js

@@ -13,17 +13,25 @@
 import { h, render, captureFocus, restoreFocus, trapFocus } from './core/dom.js';
 import { signal, effect, computed, onCleanup } from './core/signal.js';
 import { register, setRegister } from './core/fmt.js';
-import { loadChain } from './core/chain.js';
+import { GRIFFIN_PATH, GRIFFIN_TRANSFORM, GRIFFIN_VIEWBOX } from './core/griffin.js';
+import { api, ApiError } from './core/api.js';
+import { buildClaimLayers, chainIsSampleData } from './core/claimLayers.js';
+import { period } from './core/period.js';
 import { spine } from './components/spine.js';
 import { mountDrawer } from './components/drawer.js';
 import { mountClaimInspector, openClaimInspector } from './components/claimInspector.js';
 import { spendView } from './views/spend.js';
 import { evidenceView } from './views/evidence.js';
 import { systemView } from './views/system.js';
+import { privacyView } from './views/privacy.js';
 import { allocationView } from './views/allocation.js';
 import { valueView } from './views/value.js';
 import { controlView } from './views/control.js';
 import { dataView } from './views/data.js';
+import { statementView } from './views/statement.js';
+import { initTheme } from './core/theme.js';
+import { initView, viewPrefs, jobShown } from './core/view.js';
+import { JOBS as SHARED_JOBS } from './core/jobs.js';
 /** The four spine bands map onto the territories that answer their question. */
 const LAYER_ROUTE = {
     metered: 'spend',
@@ -37,15 +45,64 @@ const ROUTE_LAYER = {
     allocation: 'allocated',
     value: 'realized',
 };
-/** Everything that is not a money claim: how you feed and configure the tool. */
-const OPERATIONS = [
-    { id: 'data', label: 'Data', plain: 'Getting your usage in, from tools and providers.' },
-    { id: 'control', label: 'Control', plain: 'Budgets and alerts, so nothing surprises you.' },
-    { id: 'system', label: 'System', plain: 'Pricing, settings, maintenance, and what this GUI covers.' },
+/**
+ * The navigation names the jobs people come to do, in the order they meet them.
+ * It used to list only Data, Control and System: the four money views were
+ * reachable through the spine alone, and Billed, Allocated and Realized had no
+ * name a finance reader would look for (critique 2026-10-12).
+ */
+const JOBS = SHARED_JOBS;
+/** How you feed and configure the tool: needed, but not why anyone opens it. */
+const UTILITIES = [
+    { id: 'data', label: 'Data', plain: 'Bring usage in from your tools and providers.' },
+    { id: 'system', label: 'Settings', plain: 'Pricing, settings, maintenance, and what this GUI covers.' },
 ];
-const ALL_ROUTES = ['spend', 'evidence', 'allocation', 'value', 'data', 'control', 'system'];
+const ALL_ROUTES = ['statement', 'spend', 'evidence', 'allocation', 'value', 'data', 'control', 'system', 'privacy'];
 const current = signal(readRoute());
-const chain = signal(null);
+// The four payloads behind the claims. `undefined` = still on its way; `null` =
+// the read failed, which the derivation already treats as missing evidence.
+const overviewIn = signal(undefined);
+const billingIn = signal(undefined);
+const allocationIn = signal(undefined);
+const valueIn = signal(undefined);
+const chainInputs = computed(() => ({
+    overview: overviewIn() ?? null,
+    billing: billingIn() ?? null,
+    allocation: allocationIn() ?? null,
+    value: valueIn() ?? null,
+}));
+const chain = computed(() => buildClaimLayers(chainInputs(), period()));
+const pendingClaims = computed(() => new Set([
+    ...(overviewIn() === undefined ? ['metered'] : []),
+    ...(billingIn() === undefined ? ['billed'] : []),
+    ...(allocationIn() === undefined ? ['allocated'] : []),
+    ...(valueIn() === undefined ? ['realized'] : []),
+]));
+const sampleData = computed(() => chainIsSampleData(chainInputs()));
+/**
+ * The figures on screen were read from a server that has since stopped answering.
+ * Set by a failed read or by the timed re-check; cleared only by a fresh page load,
+ * because nothing re-reads the payloads in place.
+ */
+const figuresStale = signal(false);
+/** When the last successful read landed, so the age of the figures can be stated. */
+const lastReadAt = signal(null);
+/** Advances on each re-check, so the stated age keeps moving while the page sits. */
+const clock = signal(Date.now());
+const STALE_RECHECK_MS = 15_000;
+const unreachable = (e) => e instanceof ApiError && e.status === 0;
+function ageText(readAt, now) {
+    if (readAt === null)
+        return 'at an unknown time';
+    const minutes = Math.floor((now - readAt) / 60_000);
+    if (minutes < 1)
+        return 'less than a minute ago';
+    return minutes === 1 ? '1 minute ago' : `${minutes} minutes ago`;
+}
+/** Stated on the page, above the figures, so a stale number is never read as current. */
+function staleBanner() {
+    return h('div', { class: 'banner banner-stale', role: 'status', 'aria-live': 'polite' }, h('p', null, h('strong', { text: 'Segreant stopped responding. ' }), h('span', { text: () => `The figures below were read ${ageText(lastReadAt(), clock())} and are not current.` })), h('button', { type: 'button', class: 'btn-ghost banner-retry', onclick: () => window.location.reload(), text: 'Retry' }));
+}
 /**
  * Whether the operator has chosen a register at all — NOT which one they chose.
  *
@@ -63,12 +120,42 @@ function go(route) {
     location.hash = `/${route}`;
     current.set(route);
 }
+/**
+ * Focus the current page's h1 once the view has rendered; give up quietly after
+ * a second, or as soon as the user has put focus somewhere themselves. The
+ * retries used to land late and pull focus out of wherever the user had just
+ * moved it: the skip link's target, a field, a button (caught by the browser
+ * suite's skip-link diagnostics on CI, 2026-10-17).
+ */
+function focusPageHeading(tries = 20, from = document.activeElement) {
+    const now = document.activeElement;
+    if (now !== from && now !== null && now !== document.body)
+        return;
+    const heading = document.querySelector('main h1');
+    if (!heading) {
+        if (tries > 0)
+            setTimeout(() => focusPageHeading(tries - 1, from), 50);
+        return;
+    }
+    if (!heading.hasAttribute('tabindex'))
+        heading.setAttribute('tabindex', '-1');
+    heading.focus();
+}
 function brandMark() {
-    return h('svg', { class: 'brand-mark', viewBox: '0 0 30 34', 'aria-hidden': 'true' }, h('path', { d: 'M15 1 28 6v11c0 8-5.6 13.4-13 16C7.6 30.4 2 25 2 17V6z', fill: 'none', stroke: 'var(--gold)', 'stroke-width': '1.6' }), h('path', { d: 'M11 11h8M11 16h6M11 21h4', stroke: 'var(--gold)', 'stroke-width': '1.6', 'stroke-linecap': 'round' }));
+    return h('svg', { class: 'brand-mark', viewBox: GRIFFIN_VIEWBOX, 'aria-hidden': 'true' }, h('path', { d: GRIFFIN_PATH, transform: GRIFFIN_TRANSFORM, fill: 'var(--brand)', 'fill-rule': 'evenodd' }));
 }
 function firstRun() {
     const previousFocus = captureFocus(document.activeElement);
-    const body = h('div', { class: 'firstrun', role: 'dialog', 'aria-modal': 'true', 'aria-labelledby': 'fr-title', tabindex: '-1' }, h('div', { class: 'firstrun-card' }, h('div', { class: 'firstrun-mark' }, brandMark()), h('h1', { id: 'fr-title', text: 'How should Segreant talk to you?' }), h('p', { class: 'lede', text: 'The numbers are identical either way. This only changes how precisely they are worded and how much detail shows by default — and you can switch whenever you like.' }), h('div', { class: 'choice-grid' }, h('button', { class: 'choice', onclick: () => setRegister('plain') }, h('strong', { text: 'Plain language' }), h('span', { text: 'Rounded figures, concepts explained where they appear, no command line assumed.' }), h('code', { class: 'choice-eg', text: '$59.16 · measured from metered requests' })), h('button', { class: 'choice', onclick: () => setRegister('precise') }, h('strong', { text: 'Precise' }), h('span', { text: 'Exact microdollar figures, provenance labels shown, equivalent commands surfaced.' }), h('code', { class: 'choice-eg', text: '$59.163468 · local_list_price' }))), h('p', { class: 'fine', text: 'Runs entirely on this machine. This page loads nothing from the internet — no fonts, no analytics, no third parties.' })));
+    const body = h('div', { class: 'firstrun', role: 'dialog', 'aria-modal': 'true', 'aria-labelledby': 'fr-title', tabindex: '-1' }, h('div', { class: 'firstrun-card' }, h('div', { class: 'firstrun-mark' }, brandMark()), 
+    // The product has two audiences on one set of screens, and the first run
+    // is where it learns which one is here. It used to ask only how figures
+    // should be worded, so a finance reader and a developer landed on the
+    // same screen with different decimals. The answer now also picks where
+    // each starts: the money, or getting usage in.
+    h('h1', { id: 'fr-title', text: 'What brings you to Segreant?' }), h('p', { class: 'lede', text: 'Pick the closer one. It decides where you start and how figures are worded. The numbers are the same either way, and you can switch at any time with Plain and Precise at the top right.' }), h('div', { class: 'choice-grid' }, h('button', { class: 'choice', onclick: () => { setRegister('plain'); go('statement'); } }, h('strong', { text: 'I look after the money' }), h('span', { text: 'See what AI cost, set limits, check it against the bill and assign it to budgets. Plain wording; no terminal needed.' }), 
+    // A wording sample, not a figure from any ledger: it is the same on a
+    // fresh install with no data, so it says so (release gate, 2026-10-18).
+    h('code', { class: 'choice-eg', text: 'e.g. $59.16 list cost (estimate)' })), h('button', { class: 'choice', onclick: () => { setRegister('precise'); go('data'); } }, h('strong', { text: 'I build with AI tools' }), h('span', { text: 'Bring in usage from Claude Code, Codex and others, then see it by project and model. Exact figures and the matching commands.' }), h('code', { class: 'choice-eg', text: 'e.g. $59.163468 list cost (estimate)' }))), h('p', { class: 'fine', text: 'Runs entirely on this machine. This page loads nothing from the internet: no fonts, no analytics, no third parties.' })));
     const release = trapFocus(body);
     const onKey = (event) => {
         if (event.key === 'Escape') {
@@ -82,14 +169,35 @@ function firstRun() {
     onCleanup(() => {
         release();
         body.removeEventListener('keydown', onKey);
-        restoreFocus(previousFocus);
+        // On a fresh page the opener is <body>, and "restoring" to it left a screen
+        // reader at the top of the document (NVDA run, 2026-10-15). Land on the
+        // chosen page's heading instead.
+        if (previousFocus && previousFocus !== document.body)
+            restoreFocus(previousFocus);
+        else
+            focusPageHeading();
     });
     queueMicrotask(() => body.querySelector('.choice')?.focus());
     return body;
 }
 function topbar() {
-    return h('header', { class: 'topbar' }, h('a', { class: 'brand', href: '#/spend', onclick: () => go('spend') }, brandMark(), h('span', { class: 'brand-text' }, h('span', { class: 'brand-name', text: 'Segreant' }), h('span', { class: 'brand-tag', text: 'AI Financial Ops' }))), h('nav', { class: 'ops', 'aria-label': 'Operations' }, ...OPERATIONS.map((op) => h('button', {
+    return h('header', { class: 'topbar' }, h('a', { class: 'brand', href: '#/spend', onclick: () => go('spend') }, brandMark(), h('span', { class: 'brand-text' }, h('span', { class: 'brand-name', text: 'Segreant' }), h('span', { class: 'brand-tag', text: 'AI Financial Ops' }))), () => (sampleData()
+        ? h('span', {
+            class: 'pill pill-demo topbar-demo',
+            role: 'status',
+            title: 'Sample data. None of this was measured from your machine.',
+            text: 'sample data',
+        })
+        : null), h('nav', { class: 'ops', 'aria-label': 'Jobs' }, ...JOBS.map((op) => h('button', {
         class: 'op',
+        // A job the reader hid stays out of the bar unless it is the one open.
+        hidden: () => !jobShown(op.id) && current() !== op.id,
+        'aria-current': () => (current() === op.id ? 'page' : false),
+        title: op.plain,
+        onclick: () => go(op.id),
+        text: op.label,
+    }))), h('nav', { class: 'ops ops-util', 'aria-label': 'Setup' }, ...UTILITIES.map((op) => h('button', {
+        class: 'op op-util',
         'aria-current': () => (current() === op.id ? 'page' : false),
         title: op.plain,
         onclick: () => go(op.id),
@@ -102,6 +210,7 @@ function topbar() {
 }
 function viewFor(route) {
     switch (route) {
+        case 'statement': return statementView();
         case 'spend': return spendView();
         case 'evidence': return evidenceView();
         case 'allocation': return allocationView();
@@ -109,9 +218,12 @@ function viewFor(route) {
         case 'control': return controlView();
         case 'data': return dataView();
         case 'system': return systemView();
+        case 'privacy': return privacyView();
     }
 }
 function boot() {
+    initTheme();
+    initView();
     const root = document.getElementById('app');
     if (!root)
         throw new Error('missing #app');
@@ -130,7 +242,65 @@ function boot() {
     // wording register, and re-reading them on a plain/precise click re-issued
     // every endpoint behind the spine — including `/api/value`, which correlates
     // against the repository and is the slowest read this product has.
-    void loadChain('30d').then((layers) => chain.set(layers)).catch(() => chain.set(null));
+    //
+    // Each claim draws as soon as its own payload lands. They used to wait for all
+    // four, and `/api/value` (which reads git history) took 17-21 s on a real
+    // ledger, so the whole header said "Reading the ledger…" for that long.
+    // Billing, allocation and value do not depend on the period, so they are read
+    // once; the overview is re-read whenever the period changes.
+    //
+    // Order matters as much as independence: fired together, the value read
+    // pushed the overview from 0.5 s alone to 10 s. (Other reads are not queued
+    // behind it in general: settings answered in 6-16 ms during a 25 s value
+    // read; the overview shares the work the value read is doing.) So the cheap reads go first and the
+    // value read starts only once the overview has answered.
+    let restStarted = false;
+    const readTheRest = () => {
+        if (restStarted)
+            return;
+        restStarted = true;
+        void Promise.allSettled([
+            api.billing().then((b) => { billingIn.set(b); lastReadAt.set(Date.now()); }, (e) => { billingIn.set(null); if (unreachable(e))
+                figuresStale.set(true); }),
+            api.allocation().then((a) => { allocationIn.set(a); lastReadAt.set(Date.now()); }, (e) => { allocationIn.set(null); if (unreachable(e))
+                figuresStale.set(true); }),
+        ]).then(() => api.value().then((v) => { valueIn.set(v); lastReadAt.set(Date.now()); }, (e) => { valueIn.set(null); if (unreachable(e))
+            figuresStale.set(true); }));
+    };
+    effect(() => {
+        const r = period();
+        const controller = new AbortController();
+        overviewIn.set(undefined);
+        void api.overview(r, controller.signal).then((o) => { if (!controller.signal.aborted) {
+            overviewIn.set(o);
+            lastReadAt.set(Date.now());
+        } }, (e) => { if (!controller.signal.aborted) {
+            overviewIn.set(null);
+            if (unreachable(e))
+                figuresStale.set(true);
+        } }).finally(readTheRest);
+        onCleanup(() => controller.abort());
+    });
+    // A screen that changed the ledger says so, and the claim it touched is
+    // re-read, so the spine never contradicts the page beneath it.
+    window.addEventListener('segreant:ledger-changed', (event) => {
+        const claim = event.detail?.claim;
+        if (claim === 'allocation') {
+            void api.allocation().then((a) => { allocationIn.set(a); lastReadAt.set(Date.now()); }, () => undefined);
+        }
+        if (claim === 'billing') {
+            void api.billing().then((b) => { billingIn.set(b); lastReadAt.set(Date.now()); }, () => undefined);
+        }
+    });
+    // A stopped server is noticed without a click. While any figure is on screen the
+    // shell re-checks the server; a dead one marks what is shown as not current.
+    setInterval(() => {
+        clock.set(Date.now());
+        if (lastReadAt() === null || figuresStale())
+            return;
+        void api.health().then(() => undefined, (e) => { if (unreachable(e))
+            figuresStale.set(true); });
+    }, STALE_RECHECK_MS);
     effect(() => {
         // `registerChosen()`, never `register()`. Reading the register itself made
         // this effect — which renders the ENTIRE application — a subscriber to the
@@ -164,17 +334,29 @@ function boot() {
                 event.preventDefault();
                 document.getElementById('main')?.focus();
             },
-        }), topbar(), h('div', { class: 'sheet' }, () => {
+        }), topbar(), () => (figuresStale() && lastReadAt() !== null ? staleBanner() : null), 
+        // The banner alone was easy to miss: the figures under it looked exactly
+        // as current as before. While stale, the sheet is dimmed as well.
+        h('div', { class: () => (figuresStale() && lastReadAt() !== null ? 'sheet is-stale' : 'sheet') }, () => {
+            // The four claims head the four money views only. On Protect, Data
+            // and Settings they pushed the screen's own content below the fold
+            // and asserted nothing about it.
+            if (!ROUTE_LAYER[current()])
+                return null;
+            // The reader can fold the strip away in Settings; every figure is still on its own page.
+            if (!viewPrefs().strip)
+                return null;
             const layers = chain();
             if (!layers)
                 return h('div', { class: 'spine spine-loading' }, h('p', { class: 'spine-read', text: 'Reading the ledger…' }));
             return spine({
                 layers,
+                pending: pendingClaims(),
                 active: ROUTE_LAYER[current()] ?? null,
                 onSelect: (id) => go(LAYER_ROUTE[id]),
                 onInspect: openClaimInspector,
             });
-        }, h('main', { class: 'main', id: 'main', tabindex: '-1' }, () => viewFor(current()))), h('footer', { class: 'shellfoot' }, h('span', { text: 'Dashboard runs locally; provider traffic follows your configured egress boundary.' }), h('a', { href: '/classic', text: 'Classic dashboard' })));
+        }, h('main', { class: 'main', id: 'main', tabindex: '-1' }, () => viewFor(current()))), h('footer', { class: 'shellfoot' }, h('span', { text: 'Runs on this machine. Outbound traffic goes only to the configured provider and the other routes you set up.' }), h('span', { class: 'shellfoot-links' }, h('a', { href: '#/privacy', text: 'Privacy' }), h('a', { href: '/classic', text: 'Classic dashboard' }))));
     });
 }
 boot();