@arcforgelabs/flow 2026.10.53-4 → 2026.11.1

package/server/db/migrations/meta/_journal.json

@@ -183,6 +183,13 @@
       "when": 1793972387349,
       "tag": "0025_powerful_leopardon",
       "breakpoints": true
+    },
+    {
+      "idx": 26,
+      "version": "7",
+      "when": 1794019099844,
+      "tag": "0026_bitter_sersi",
+      "breakpoints": true
     }
   ]
 }

package/server/db/schema.js

@@ -911,3 +911,37 @@ export const captures = pgTable('captures', {
   check('captures_sha256_valid', sql`${t.fileSha256} ~ '^[0-9a-f]{64}$'`),
   check('captures_problem_valid', sql`${t.problem} is null or length(${t.problem}) between 1 and 200`),
 ]);
+
+// A read grant binds one person and client to one installation and organisation.
+export const agentGrants = pgTable('agent_grants', {
+  id: id(),
+  personId: uuid('person_id').notNull().references(() => people.id, { onDelete: 'cascade' }),
+  clientId: text('client_id').notNull(),
+  appName: text('app_name').notNull(),
+  resource: text('resource').notNull(),
+  organisationId: organisationId().references(() => organisations.id),
+  accessLevel: text('access_level').notNull().default('read'),
+  createdAt: createdAt(),
+  lastUsedAt: timestamp('last_used_at', { withTimezone: true }),
+  revokedAt: timestamp('revoked_at', { withTimezone: true }),
+  failureDay: date('failure_day'),
+  failureCount: integer('failure_count').notNull().default(0),
+  pausedAt: timestamp('paused_at', { withTimezone: true }),
+}, (t) => [
+  unique('agent_grants_person_client_resource').on(t.personId, t.clientId, t.resource),
+  check('agent_grants_read_only', sql`access_level = 'read'`),
+]);
+
+// No arguments, token, source evidence, error text or patient data belongs here.
+// Historical UUID snapshots deliberately have no foreign keys: removing a
+// person or grant must not erase or rewrite the retained read history.
+export const agentAudit = pgTable('agent_audit', {
+  id: id(),
+  createdAt: createdAt(),
+  grantId: uuid('grant_id').notNull(),
+  personId: uuid('person_id').notNull(),
+  tool: text('tool').notNull(),
+  status: integer('status').notNull(),
+  rowCount: integer('row_count').notNull().default(0),
+  durationMs: integer('duration_ms').notNull(),
+}, (t) => [index('agent_audit_created').on(t.createdAt)]);

package/server/index.js

@@ -1,5 +1,7 @@
 #!/usr/bin/env node
 import { createApp } from './app.js';
+import { createMcpVerifier } from './agents/auth.js';
+import { resolveMcpSettings } from './agents/settings.js';
 import { createClerkProxy, ensureClerkAccount, loadClerkAdapter, resolveClerkProxyPath } from './auth/clerk.js';
 import { seedFirstOwner } from './auth/people.js';
 import { createPersonAuth } from './auth/session.js';
@@ -31,8 +33,14 @@ const port = Number(process.env.FLOW_PORT || process.env.PORT || 19300);
 
 // Settings first: a malformed setting stops boot before anything runs.
 let settings;
+let mcp;
 try {
   settings = resolveSignInSettings();
+  const mcpSettings = resolveMcpSettings();
+  if (mcpSettings) {
+    if (settings.mode !== 'clerk') throw new Error('MCP requires FLOW_AUTH=clerk');
+    mcp = { ...mcpSettings, publishableKey: settings.keys.publishableKey, verify: createMcpVerifier({ keys: settings.keys, ...mcpSettings }) };
+  }
 } catch (error) {
   console.error(`[auth] ${error.message}`);
   process.exit(1);
@@ -201,7 +209,7 @@ const trustProxy = process.env.REPL_ID || process.env.REPLIT_DEPLOYMENT ? 1 : fa
 const updates = createUpdateChecker();
 
 createApp({
-  database, schemaJournals: expectedSchema({ adapters: shippedAdapters }).journals, auth, trustProxy, updates, integrations, secrets, defaultFamily, log, tracing, storage,
+  database, mcp, schemaJournals: expectedSchema({ adapters: shippedAdapters }).journals, auth, trustProxy, updates, integrations, secrets, defaultFamily, log, tracing, storage,
   publicOrigin: process.env.FLOW_PUBLIC_ORIGIN,
   reader: reader ? { on: true, schedule: reader.schedule } : null,
 }).listen(port, () => {

package/server/integrations/seazona/history/backfill.js

@@ -78,7 +78,7 @@ export async function stopBackfill(db, { now = Date.now } = {}) {
   const [state] = await db.select().from(seazonaLaneState).where(eq(seazonaLaneState.lane, LANE));
   const cursor = state?.cursor;
   if (!cursor?.batchId || cursor.done) throw Object.assign(new FlowError('conflict', 'No history backfill is running'), { status: 409 });
-  const stopped = { ...cursor, done: true, stopped: true };
+  const stopped = { ...cursor, done: true, stopped: true, endedAt: at.toISOString() };
   await db.update(seazonaLaneState).set({ cursor: stopped, updatedAt: at }).where(eq(seazonaLaneState.lane, LANE));
   await finishApiBatch(db, cursor.batchId, { at });
   return describeBackfill(stopped);
@@ -91,6 +91,7 @@ export function describeBackfill(cursor) {
     from: cursor.from,
     through: cursor.through,
     startedAt: cursor.startedAt ?? null,
+    endedAt: cursor.endedAt ?? null,
     nextDay: cursor.done ? null : cursor.nextDay,
     // The day whose orders it reads now: the last day listed while orders
     // from it wait, else the next day to list.
@@ -160,6 +161,7 @@ export async function runHistoryBackfill(ctx, { isLaneLevel, describeReadFailure
       if (!cursor.pending.length) {
         if (cursor.nextDay > cursor.through) {
           cursor.done = true;
+          cursor.endedAt = new Date(at).toISOString();
           break;
         }
         calls += 1;

package/server/integrations/seazona/ledger.js

@@ -53,8 +53,9 @@ export function toLedgerJob(item) {
     // The Seazona order id is the case number. Never patient data.
     caseRef: item.sourceId,
     practitioner: item.doctorName ?? null,
-    // The Seazona API gives a shipped status but no shipped date.
-    shippedOn: null,
+    // The Seazona API gives a shipped status but no shipped date: the
+    // ledger keeps the day it first sees the job shipped.
+    shipped: item.shipped === true,
     // The day of the work, for matching it to its accounting invoice.
     jobDate: item.invoice?.invoiceDate ?? item.dueOn ?? item.orderedOn ?? null,
     // The draft rules bill only the statuses the lab chose (for example Shipped).

package/server/rate-limit.js

@@ -4,12 +4,13 @@ import expressRateLimit from 'express-rate-limit';
 // Express's `trust proxy`). In memory: one Flow process serves one lab. Each
 // call makes its own counter. Built on express-rate-limit, which CodeQL
 // recognises as rate limiting (js/missing-rate-limiting).
-export function rateLimit({ limit, windowMs }) {
+export function rateLimit({ limit, windowMs, ...options }) {
   return expressRateLimit({
     limit,
     windowMs,
     standardHeaders: 'draft-8', // RateLimit-Policy, RateLimit and Retry-After
     legacyHeaders: false,
     handler: (_req, res) => res.status(429).json({ ok: false, code: 'rate_limited', error: 'Too many requests. Wait and try again.' }),
+    ...options,
   });
 }

package/server/ui/app.js

@@ -20,6 +20,7 @@ import { renderCustomFields } from '/assets/ui/custom-fields.js';
 import { renderJobs } from '/assets/ui/jobs.js';
 import { renderReconcile } from '/assets/ui/reconcile.js';
 import { renderXeroImport } from '/assets/ui/xero-import.js';
+import { syncStatus } from '/assets/ui/sync-status.js';
 import { xeroUsage } from '/assets/ui/xero-usage.js';
 import { startMonitoring } from '/assets/ui/monitoring.js';
 import { isSearchKey, openSearch } from '/assets/ui/search.js';
@@ -998,74 +999,79 @@ function seazonaHistorySection() {
   const canAct = ['owner', 'admin'].includes(me?.person?.role);
   const yearAgo = new Date(Date.now() - 365 * 86_400_000).toISOString().slice(0, 10);
   const from = h('input', { class: 'fx-input fx-history__day', type: 'date', 'aria-label': 'Read from', value: yearAgo, disabled: !canAct });
-  const status = h('span', { class: 'fx-history__status' }, 'Checking…');
-  const control = h('span', { class: 'fx-row' });
-  const bar = h('progress', { class: 'fx-history__bar', max: 1, value: 0, 'aria-label': 'Read so far' });
-  const barRow = settingRow({ label: 'Progress', hint: h('span', {}), control: bar, wide: true });
-  barRow.hidden = true;
-  const day = (value) => new Date(`${value}T00:00:00Z`).toLocaleDateString('en-AU', { dateStyle: 'medium', timeZone: 'UTC' });
-  const section = h('section', { class: 'fx-set fx-int-section fx-card', style: { padding: '8px 20px 16px' } },
-    h('h2', { class: 'fx-set__title' }, 'History'),
-    settingRow({ label: 'Read from', hint: status, help: 'Reads past Seazona orders into Flow, 10 every 2 minutes. Orders Flow read before are skipped. Each job waits on hold and never drafts by itself.', control }),
-    barRow);
-  let timer = null;
-  let tick = null;
-  const press = async (button, path, body) => {
+  const sync = syncStatus();
+  const fromRow = settingRow({ label: 'Read from', help: 'Reads past Seazona orders into Flow. Orders Flow read before are skipped. Each job waits on hold and never drafts by itself.', control: from });
+  const section = h('section', { class: 'fx-set fx-int-section fx-card fx-history' },
+    h('h2', { class: 'fx-set__title' }, 'History'), fromRow, sync.element);
+  let timer;
+  let pending = false;
+  let run = null;
+  let mounted = false;
+  let disposed = false;
+  let loaded = false;
+  const active = () => ['running', 'waiting'].includes(run?.phase);
+  const schedule = () => {
+    clearTimeout(timer);
+    if (!disposed && !document.hidden && active()) timer = setTimeout(load, 5000);
+  };
+  const press = async (button, label) => {
     button.disabled = true;
+    clearTimeout(timer);
     try {
-      await flow(path, { method: 'POST', ...(body ? { body: JSON.stringify(body) } : {}) });
-      toast(body ? 'History read started.' : 'History read stopped.', 'success');
-    } catch (error) {
-      toast(error.message, 'danger');
-      if (error.retryAfterMs) holdButton(button, error.retryAfterMs);
-    }
-    load();
+      let resume = run?.resumeFrom;
+      if (label === 'Stop' || label === 'Retry') {
+        const stopped = await flow('/api/seazona/history/backfill/stop', { method: 'POST' });
+        resume = stopped.backfill?.resumeFrom;
+      }
+      if (label !== 'Stop') await flow('/api/seazona/history/backfill', {
+        method: 'POST', body: JSON.stringify(label === 'Resume' || label === 'Retry'
+          ? { from: resume ?? run.from, through: run.through } : { from: from.value }),
+      });
+      toast(label === 'Stop' ? 'History read stopped.' : 'History read started.', 'success');
+    } catch (error) { toast(error.message, 'danger'); }
+    loaded = false;
+    await load();
   };
-  const start = (label, body, primary = true) => h('button', {
-    class: `fx-btn fx-btn--sm${primary ? ' fx-btn--primary' : ''}`, type: 'button', disabled: !canAct,
-    onclick: (event) => press(event.currentTarget, '/api/seazona/history/backfill', body()),
-  }, label);
+  let actionLabel;
+  const actionButton = h('button', { class: 'fx-btn fx-btn--sm', type: 'button', onclick: event => press(event.currentTarget, actionLabel) });
   const load = async () => {
     clearTimeout(timer);
-    clearInterval(tick);
-    if (!section.isConnected && timer !== null) return;
-    let body;
+    if (disposed || pending || document.hidden) return;
+    pending = true;
     try {
-      body = await flow('/api/seazona/history');
+      const body = await flow('/api/seazona/history');
+      if (disposed) return;
+      loaded = true;
+      run = body.backfill;
+      fromRow.hidden = Boolean(run && run.phase !== 'done');
+      const label = !run ? 'Start' : ({ running: 'Stop', waiting: 'Stop', stopped: run.resumeFrom ? 'Resume' : 'Again', failed: 'Retry', done: 'Again' }[run.phase]);
+      actionLabel = label;
+      actionButton.textContent = label;
+      actionButton.disabled = !canAct;
+      sync.draw({
+        phase: run?.phase ?? 'not-started', startedAt: run?.startedAt, endedAt: run?.endedAt,
+        count: body.history.jobs, unit: 'jobs', from: run?.from, through: run?.through,
+        at: run?.readingDay ?? run?.resumeFrom ?? run?.through,
+        cause: run?.cause, nextRunAt: run?.nextRunAt,
+      }, actionButton);
     } catch (error) {
-      status.replaceChildren(error.message);
-      return;
-    }
-    const run = body.backfill;
-    barRow.hidden = !run;
-    if (run) {
-      const span = Date.parse(run.through) - Date.parse(run.from) + 86_400_000;
-      const at = run.running ? run.readingDay ?? run.through : run.resumeFrom ?? run.through;
-      bar.value = run.running || run.resumeFrom ? Math.min(1, Math.max(0, (Date.parse(at) - Date.parse(run.from)) / span)) : 1;
-      barRow.querySelector('.fx-setting__hint').replaceChildren(`${day(run.from)} to ${day(run.through)}`);
-    }
-    if (run?.running) {
-      const what = { waiting: 'Waiting', failed: 'Failed' }[run.phase] ?? `Reading ${day(run.readingDay ?? run.through)}`;
-      const reading = `${what} · ${run.ordersRead} read${run.waitingToRead ? ` · ${run.waitingToRead} to read` : ''}`;
-      const next = h('span', { class: 'fx-dim' });
-      const count = () => {
-        const left = Math.round((Date.parse(run.nextRunAt) - Date.now()) / 1000);
-        next.replaceChildren(left > 0 ? `· ${run.phase === 'running' ? 'next' : 'retry'} in ${Math.floor(left / 60)}:${String(left % 60).padStart(2, '0')}` : '· reading now');
-      };
-      if (run.nextRunAt && run.phase !== 'failed') { count(); tick = setInterval(count, 1000); }
-      status.replaceChildren(
-        run.phase === 'running' ? h('span', { class: 'fx-spinner fx-spinner--sm', 'aria-hidden': 'true' }) : '',
-        reading, next, run.cause ? h('span', { class: 'fx-dim' }, `· ${run.cause}`) : '');
-      control.replaceChildren(h('button', { class: 'fx-btn fx-btn--sm', type: 'button', disabled: !canAct, onclick: (event) => press(event.currentTarget, '/api/seazona/history/backfill/stop') }, 'Stop'));
-    } else if (run?.resumeFrom) {
-      status.replaceChildren(`Stopped at ${day(run.resumeFrom)} · ${run.ordersRead} read`);
-      control.replaceChildren(from, start('Start', () => ({ from: from.value }), false), start('Resume', () => ({ from: run.resumeFrom, through: run.through })));
-    } else {
-      status.replaceChildren(run ? `Done · ${run.ordersRead} read` : 'Not started');
-      control.replaceChildren(from, start('Start', () => ({ from: from.value })));
-    }
-    timer = setTimeout(() => { if (section.isConnected && run?.running) load(); }, 5_000);
+      sync.draw({ phase: 'failed', cause: 'Could not check progress. Try again.' }, h('button', { class: 'fx-btn fx-btn--sm', type: 'button', onclick: load }, 'Retry'));
+    } finally { pending = false; schedule(); }
   };
+  const visible = () => { clearTimeout(timer); if (!document.hidden && (!loaded || active())) load(); };
+  document.addEventListener('visibilitychange', visible);
+  const observer = new MutationObserver(() => {
+    if (section.isConnected) mounted = true;
+    else if (mounted) {
+      disposed = true;
+      clearTimeout(timer);
+      sync.dispose();
+      document.removeEventListener('visibilitychange', visible);
+      observer.disconnect();
+    }
+  });
+  observer.observe(document.body, { childList: true, subtree: true });
+  sync.draw({ phase: 'loading' });
   load();
   return section;
 }
@@ -1331,11 +1337,17 @@ drawModeToggles();
 // ── Start ──────────────────────────────────────────────────────────────────
 
 // Clerk's words where they name the app: the installation is Flow, whatever
-// the Clerk instance is called.
+// the Clerk instance is called. With sign-up on, Clerk shows the combined
+// sign-in-or-up form, which reads the *Combined keys.
 const LOCALIZATION = {
   signIn: {
     // titleCombined is the sign-in-or-sign-up screen (public sign-up on).
-    start: { title: 'Sign in', titleCombined: 'Sign in', subtitle: '' },
+    start: {
+      title: 'Sign in to Flow',
+      subtitle: 'Choose how to sign in.',
+      titleCombined: 'Sign in to Flow',
+      subtitleCombined: 'Choose how to sign in.',
+    },
     password: { subtitle: 'Enter the password for your account.' },
   },
   signUp: { start: { title: 'Ask for access to Flow', subtitle: 'Use your work email. An owner approves new people.' } },

package/server/ui/flow.css

@@ -639,9 +639,13 @@ a.fx-strong:hover { text-decoration: underline; }
 .fx-pop__tick { display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; color: var(--t-accent); }
 .fx-pop__sep { height: 1px; margin: 6px 4px; background: var(--fx-line-soft); }
 /* A row with a trailing control (the sidebar pin). The control does not
-   close the menu. An unpinned pin shows when the pointer is on the row. */
-.fx-pop__row { display: flex; align-items: center; gap: 2px; }
+   close the menu. An unpinned pin shows when the pointer is on the row.
+   The whole row lights on hover; the pin under the pointer goes back to the
+   menu's own colour, so both read. */
+.fx-pop__row { display: flex; align-items: center; gap: 2px; padding-right: 4px; border-radius: var(--t-radius); }
+.fx-pop__row:hover, .fx-pop__row:has(:focus-visible) { background: var(--fx-hover); }
 .fx-pop__row > .fx-pop__item { flex: 1; min-width: 0; }
+.fx-pop__row > .fx-pop__item:is(:hover, :focus-visible) { background: none; }
 .fx-pop__row > .fx-pop__item > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .fx-pop__pin, .fx-pop__pin--fixed {
   display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px;
@@ -654,13 +658,14 @@ a.fx-strong:hover { text-decoration: underline; }
 .fx-pop__row:focus-within .fx-pop__pin[aria-pressed="false"],
 .fx-pop__pin:focus-visible { opacity: 1; }
 .fx-pop__pin[aria-pressed="true"], .fx-pop__pin--fixed { color: var(--t-strong); opacity: 1; }
-.fx-pop__pin:hover, .fx-pop__pin:focus-visible { background: var(--fx-hover); color: var(--t-strong); outline: none; }
+.fx-pop__pin:hover, .fx-pop__pin:focus-visible { background: var(--t-paper); color: var(--t-strong); outline: none; }
 .fx-pop.fx-pop--side { min-width: 240px; }
 .fx-pop--side .fx-pop__tick { color: inherit; }
 @media (hover: none) { .fx-pop__pin[aria-pressed="false"] { opacity: 1; } }
 @media (max-width: 820px) {
   .fx-pop--side .fx-pop__item { min-height: 44px; }
   .fx-pop--side .fx-pop__pin, .fx-pop--side .fx-pop__pin--fixed { width: 44px; height: 44px; }
+  .fx-pop--side .fx-pop__row { padding-right: 0; }
 }
 .fx-pop__foot { display: flex; justify-content: flex-end; padding: 6px 4px 2px; border-top: 1px solid var(--fx-line-soft); margin-top: 6px; }
 /* A chip with an × that clears it (as ClickUp's "Clear all filters"). */
@@ -1287,9 +1292,32 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-setting__head { display: flex; align-items: center; gap: 2px; min-width: 0; }
 .fx-setting__head .fx-help { margin: -4px 0; border: 0; background: none; cursor: pointer; }
 .fx-setting__hint { margin: 0; color: var(--t-dim); font-size: 13px; line-height: 1.45; }
-.fx-history__status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
 .fx-history__day { width: 160px; flex: none; }
-.fx-history__bar { width: 100%; height: 8px; accent-color: var(--t-brand); }
+/* SyncStatus: Layers, shared by integration history readers. */
+.fx-history { padding: 8px 20px 16px; }
+.fx-sync { min-width: 0; padding-block: 8px; }
+.fx-sync__line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
+.fx-sync__status { min-width: 0; overflow-wrap: anywhere; color: var(--t-text); font-size: 13px; }
+.fx-sync__word { position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; }
+.fx-sync[data-phase="running"] .fx-sync__word::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--t-paper), transparent); opacity: .5; transform: translateX(-100%); animation: fx-sync-sweep 2.6s linear infinite; }
+.fx-sync[data-phase="failed"] .fx-sync__word { color: var(--t-danger); }
+.fx-sync[data-phase="done"] .fx-sync__word { color: var(--t-success); }
+.fx-sync__clock { font: 12px var(--t-data); color: var(--t-dim); }
+.fx-sync__action { margin-left: auto; }
+.fx-sync__action .fx-btn { min-width: 44px; min-height: 44px; }
+.fx-sync__dots { display: inline-flex; gap: 3px; margin-right: 8px; vertical-align: middle; }
+.fx-sync__dots[hidden], .fx-sync__track[hidden] { display: none; }
+.fx-sync__dots i { width: 4px; height: 4px; border-radius: var(--t-radius); background: var(--t-accent); animation: fx-sync-breathe 1.8s ease-in-out infinite; }
+.fx-sync__dots i:nth-child(2) { animation-delay: .2s; }
+.fx-sync__dots i:nth-child(3) { animation-delay: .4s; }
+.fx-sync__track { display: grid; gap: 4px; margin-top: 8px; }
+.fx-sync__rail { width: 100%; height: 4px; accent-color: var(--t-brand); }
+.fx-sync__range { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; color: var(--t-dim); font-size: 12px; }
+@media (max-width: 639px) {
+  .fx-sync__line { gap: 4px 8px; }
+  .fx-sync__status { flex: 1 1 60%; }
+  .fx-sync__clock { order: 1; flex-basis: 100%; }
+}
 .fx-setting[data-tone="danger"] .fx-setting__hint { color: var(--t-danger); }
 .fx-setting__control { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }
 .fx-setting__control > .fx-input, .fx-setting__control > .fx-select, .fx-setting__stack { width: 320px; max-width: 100%; }
@@ -1539,9 +1567,12 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 }
 
 @keyframes fx-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
+@keyframes fx-sync-breathe { 50% { opacity: .35; transform: scale(.75); } }
+@keyframes fx-sync-sweep { to { transform: translateX(100%); } }
 @keyframes fx-spin { to { transform: rotate(360deg); } }
 @keyframes fx-shimmer { to { background-position: -200% 0; } }
 @media (prefers-reduced-motion: reduce) {
+  .fx-sync__word::after { display: none; }
   *, *::before, *::after { animation: none !important; transition: none !important; }
 }
 

package/server/ui/mobile.js

@@ -618,6 +618,23 @@ export const RULES = {
     ],
     "card": "Sidecar"
   },
+  "syncStatus": {
+    "component": "syncStatus",
+    "direction": "Layers",
+    "phone": {
+      "layout": "wrap"
+    },
+    "tablet": {
+      "layout": "row"
+    },
+    "desk": {
+      "layout": "row"
+    },
+    "touch": 44,
+    "pageOverflow": "none",
+    "screens": [],
+    "card": "SyncStatus"
+  },
   "fx-tabs": {
     "component": "fx-tabs",
     "direction": "scrolling tabs",

package/server/ui/routes.js

@@ -22,7 +22,7 @@ const themeDir = join(here, '..', 'theme');
 const logoDir = join(here, 'logos');
 const LOGO_FILES = new Set(['xero.svg', 'seazona.svg', 'sentry.svg']);
 const THEME_FILES = new Set(['themes.js', 'color-contrast.js', 'openclaw-palettes.js', 'font-families.js']);
-export const UI_FILES = new Set(['flow.css', 'appearance.js', 'clerk-appearance.js', 'app.js', 'invoicing.js', 'invoice-notes.js', 'job-change.js', 'sidecar.js', 'invoicing-settings.js', 'automations.js', 'invoice-rules.js', 'line-mappings.js', 'price-list.js', 'price-match.js', 'price-reconcile.js', 'custom-fields.js', 'contacts.js', 'xero-contact.js', 'jobs.js', 'job-board.js', 'reconcile.js', 'xero-import.js', 'xero-usage.js', 'xero-usage-model.js', 'job-view.js', 'list-views.js', 'saved-views.js', 'monitoring.js', 'search.js', 'alerts.js', 'bulk-bar.js', 'view-bar.js', 'tip.js', 'kit.js', 'columns.js', 'mobile.js', 'person.js', 'captures.js', 'capture-fields.js', 'pager.js', 'nav-pins.js', 'flow-mark.svg']);
+export const UI_FILES = new Set(['sync-status.js', 'flow.css', 'appearance.js', 'clerk-appearance.js', 'app.js', 'invoicing.js', 'invoice-notes.js', 'job-change.js', 'sidecar.js', 'invoicing-settings.js', 'automations.js', 'invoice-rules.js', 'line-mappings.js', 'price-list.js', 'price-match.js', 'price-reconcile.js', 'custom-fields.js', 'contacts.js', 'xero-contact.js', 'jobs.js', 'job-board.js', 'reconcile.js', 'xero-import.js', 'xero-usage.js', 'xero-usage-model.js', 'job-view.js', 'list-views.js', 'saved-views.js', 'monitoring.js', 'search.js', 'alerts.js', 'bulk-bar.js', 'view-bar.js', 'tip.js', 'kit.js', 'columns.js', 'mobile.js', 'person.js', 'captures.js', 'capture-fields.js', 'pager.js', 'nav-pins.js', 'flow-mark.svg']);
 const iconDir = join(dirname(require.resolve('lucide-static/package.json')), 'icons');
 const ICON_FILE = /^[a-z0-9]+(?:-[a-z0-9]+)*\.svg$/;
 const MAX_AGE = '1h';

package/server/ui/sync-status.js

@@ -0,0 +1,67 @@
+import { h } from './kit.js';
+import { applyPhoneRule } from './mobile.js';
+
+const DAY = 86_400_000;
+const words = ['Polishing', 'Glazing', 'Milling', 'Sintering'];
+const date = value => value ? new Date(`${value}T00:00:00Z`).toLocaleDateString('en-AU', { day: 'numeric', month: 'short', timeZone: 'UTC' }) : '';
+const duration = ms => { const seconds = Math.max(0, Math.floor(ms / 1000)); return `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, '0')}`; };
+
+// Neutral, read-only view of server state. No inferred event history. The caller
+// owns actions and polling; dispose stops the display clock when unmounted.
+export function syncStatus() {
+  const word = h('span', { class: 'fx-sync__word' });
+  const dots = h('span', { class: 'fx-sync__dots', 'aria-hidden': 'true' }, ...[0, 1, 2].map(() => h('i')));
+  const result = h('span');
+  const status = h('span', { class: 'fx-sync__status', role: 'status', 'aria-live': 'polite' }, dots, word, result);
+  const clock = h('span', { class: 'fx-sync__clock', 'aria-label': 'Elapsed', 'aria-live': 'off' });
+  const action = h('span', { class: 'fx-sync__action' });
+  const rail = h('progress', { class: 'fx-sync__rail', max: 1, value: 0, 'aria-label': 'Days read' });
+  const range = h('span');
+  const eta = h('span');
+  const track = h('div', { class: 'fx-sync__track' }, rail, h('span', { class: 'fx-sync__range' }, range, eta));
+  const element = applyPhoneRule(h('div', { class: 'fx-sync' }, h('div', { class: 'fx-sync__line' }, status, clock, action), track), 'syncStatus');
+  let current = {};
+  let timer;
+  const reduced = matchMedia('(prefers-reduced-motion: reduce)');
+  const updateClock = () => {
+    const { phase, startedAt, endedAt, nextRunAt, count, from, through, at } = current;
+    const active = ['running', 'waiting'].includes(phase);
+    const elapsed = (active ? Date.now() : Date.parse(endedAt)) - Date.parse(startedAt);
+    clock.textContent = Number.isFinite(elapsed) ? duration(elapsed) : '';
+    // Rotating words and ticking clocks are decorative, not live announcements.
+    if (phase === 'running' && !count) word.textContent = reduced.matches ? 'Reading' : words[Math.floor(Math.max(0, elapsed) / 2600) % words.length] ?? 'Reading';
+    eta.textContent = '';
+    if (phase === 'waiting' && nextRunAt) {
+      const seconds = Math.max(0, Math.ceil((Date.parse(nextRunAt) - Date.now()) / 1000));
+      clock.textContent = `${clock.textContent}${clock.textContent ? ' · ' : ''}${seconds}s until retry`;
+    }
+    const completed = Date.parse(at) - Date.parse(from);
+    const total = Date.parse(through) - Date.parse(from) + DAY;
+    if (phase === 'running' && count > 0 && completed > 0 && total > completed && elapsed > 0) {
+      eta.textContent = `about ${Math.max(1, Math.ceil(elapsed * (total - completed) / completed / 60000))} min left`;
+    }
+  };
+  const draw = (state, button = null) => {
+    current = state;
+    const { phase = 'not-started', count, unit = 'jobs', from, through, at, cause } = state;
+    element.dataset.phase = phase;
+    const running = phase === 'running';
+    dots.hidden = !running || count > 0;
+    word.setAttribute('aria-hidden', String(running && !count));
+    status.setAttribute('aria-label', running && !count ? 'Reading' : '');
+    word.textContent = running ? (count > 0 ? `Reading${at ? ` ${date(at)}` : ''}` : 'Reading') : ({ waiting: 'Waiting', stopped: 'Stopped', failed: 'Failed', done: 'Done', loading: 'Checking…' }[phase] ?? 'Not started');
+    result.textContent = `${count != null && (count > 0 || !running) ? ` · ${count.toLocaleString('en-AU')} ${unit}` : ''}${cause ? ` · ${cause}` : ''}${phase === 'stopped' && at ? ` · ${date(at)}` : ''}`;
+    if (action.firstChild !== button) action.replaceChildren(...(button ? [button] : []));
+    const total = Date.parse(through) - Date.parse(from) + DAY;
+    track.hidden = !(count > 0 && total > 0);
+    rail.value = phase === 'done' ? 1 : Math.min(1, Math.max(0, (Date.parse(at) - Date.parse(from)) / total || 0));
+    range.textContent = track.hidden ? '' : `${date(from)} – ${date(through)}`;
+    clearInterval(timer);
+    updateClock();
+    if (['running', 'waiting'].includes(phase)) timer = setInterval(() => {
+      if (!element.isConnected) { clearInterval(timer); return; }
+      if (!document.hidden) updateClock();
+    }, 1000);
+  };
+  return { element, draw, dispose: () => clearInterval(timer) };
+}