@arcforgelabs/flow 2026.10.30 → 2026.10.32-beta.1

package/server/integrations/xero/routes.js

@@ -8,6 +8,7 @@ import { describePush, listPushes, MAX_BATCH, previewDrafts, pushDrafts } from '
 import { recordXeroEvidence, recordXeroPayments } from './ledger.js';
 import { queueHistoryImport, resetImport } from './import.js';
 import { MIRROR_RESOURCES, mirrorStatus, mirrorXero } from './mirror.js';
+import { accountingStatus, checkSentInvoices } from './reconcile.js';
 import { decryptToken, deleteConnection, describeConnection, readConnection, saveConnection } from './connections.js';
 import { authorizeUrl, exchangeCode, fetchConnections, revokeToken, selectConnection } from './oauth.js';
 import { writesAllowed } from './settings.js';
@@ -27,6 +28,10 @@ import { messagePage as themedMessagePage } from '../../ui/page.js';
 //                                  would make, and what stops them (no Xero calls)
 //   POST /invoices/push            owner or admin: issued invoices to Xero drafts
 //   GET  /invoices/:invoiceId/pushes?organisationId=   any signed-in person
+//   POST /invoices/status          any signed-in person: each invoice's Xero
+//                                  status and any difference, from the copy
+//   POST /invoices/:invoiceId/recheck   owner or admin: reads Xero's changes,
+//                                  then checks that one invoice again (Mark resolved)
 //   POST /obligations/:obligationId/check   owner or admin: Xero's invoice for
 //                                  a billable job, recorded on the ledger
 //   POST /payments/sync            owner or admin: Xero payments to the ledger
@@ -76,6 +81,14 @@ export const handle = (log, fn) => async (req, res) => {
 
 // `messagePage` draws the callback's answer in the installation's design
 // system (server/ui/page.js); the server's app passes it.
+// What the Xero page says about calls for one connection: stopped until a
+// person connects again (a refused connection or resource), and since when.
+export function callsState(status) {
+  const resources = status.stoppedResources.map((r) => r.resource);
+  const since = status.haltedAt ?? status.stoppedResources.map((r) => r.at).filter(Boolean).sort()[0] ?? null;
+  return { stopped: Boolean(status.haltedReason) || resources.length > 0, all: Boolean(status.haltedReason), resources, since };
+}
+
 export function createXeroRouter({ db, personAuth, runtime, log = console, messagePage = (options) => themedMessagePage({ ...options, defaultFamily: DEFAULT_FAMILY }) }) {
   const page = (title, text, tone) => messagePage({ title, text, tone });
   const { settings } = runtime;
@@ -101,6 +114,7 @@ export function createXeroRouter({ db, personAuth, runtime, log = console, messa
       connected: Boolean(connection && connection.mode === settings.mode),
       connection: describeConnection(connection),
       rateLimit: connection ? runtime.governor.status(connection.tenantId) : null,
+      calls: connection ? callsState(await runtime.guardFor(db).status(connection.tenantId)) : null,
       lastSync: await lastSync(db, organisationId),
     });
   }));
@@ -155,6 +169,8 @@ export function createXeroRouter({ db, personAuth, runtime, log = console, messa
         key: settings.tokenKey,
       });
       runtime.remember(entry.organisationId, tokens);
+      // A new connection is a person acting: calls stopped before resume.
+      await runtime.guardFor(db).resume();
       // Another Xero organisation starts its history from the beginning.
       if (previous && previous.tenantId !== connection.tenantId) await resetImport(db, entry.organisationId);
       await queueHistoryImport(db, entry.organisationId, { reason: 'connected' });
@@ -205,6 +221,25 @@ export function createXeroRouter({ db, personAuth, runtime, log = console, messa
     res.json({ ok: true, mode: settings.mode, writesAllowed: writesAllowed(settings), ...preview });
   }));
 
+  // Xero's status of each invoice, from Flow's copy: no Xero calls.
+  router.post('/invoices/status', ...signedIn, handle(log, async (req, res) => {
+    const organisationId = await requireOrganisation(db, req.body?.organisationId);
+    const statuses = await accountingStatus(db, runtime, organisationId, requireInvoiceIds(req.body?.invoiceIds));
+    res.json({ ok: true, invoices: [...statuses.values()] });
+  }));
+
+  // Mark resolved: read Xero's changes (a few calls, through the call guard),
+  // then check this one invoice again. The item closes only when the
+  // difference is gone; otherwise it stays open with the new evidence.
+  router.post('/invoices/:invoiceId/recheck', ...manager, handle(log, async (req, res) => {
+    const organisationId = await requireOrganisation(db, req.body?.organisationId);
+    const [invoiceId] = requireInvoiceIds([req.params.invoiceId], 'invoiceId');
+    await mirrorXero(db, runtime, organisationId, { resources: ['invoices'] });
+    const result = await checkSentInvoices(db, runtime, organisationId, { invoiceIds: [invoiceId] });
+    const status = (await accountingStatus(db, runtime, organisationId, [invoiceId])).get(invoiceId) ?? null;
+    res.json({ ok: true, resolved: !status?.finding, closed: result.closed, status });
+  }));
+
   router.post('/invoices/push', ...manager, handle(log, async (req, res) => {
     const organisationId = await requireOrganisation(db, req.body?.organisationId);
     const invoiceIds = requireInvoiceIds(req.body?.invoiceIds);

package/server/integrations/xero/runtime.js

@@ -1,3 +1,4 @@
+import { createCallGuard } from '../call-guard.js';
 import { createXeroClient, xeroError } from './client.js';
 import { decryptToken, readConnection, storeRotatedToken } from './connections.js';
 import { createGovernor } from './governor.js';
@@ -6,9 +7,21 @@ import { createReplayFetch, DEFAULT_REPLAY_FIXTURES, loadReplayFixtures } from '
 import { resolveXeroSettings, writesAllowed } from './settings.js';
 
 // The Xero adapter's state for one Flow process: settings, the rate-limit
-// governor, the transport (real fetch, or replay), OAuth states, and the
-// access tokens in memory. Access tokens live 30 minutes and are never
-// stored; the refresh token is stored sealed (connections.js).
+// governor, the call guard (its state is in PostgreSQL), the transport (real
+// fetch, or replay), OAuth states, and the access tokens in memory. Access
+// tokens live 30 minutes and are never stored; the refresh token is stored
+// sealed (connections.js).
+
+// The call guard's tables and policy (../call-guard.js, docs/XERO.md). A 401
+// or 403 that a fresh token does not clear stops only the resource it came
+// from: a connection can lack one scope (payments) and still serve the rest.
+// A refused token refresh halts every call.
+export const XERO_CALL_GUARD = Object.freeze({
+  integration: 'xero',
+  name: 'Xero',
+  tables: Object.freeze({ state: 'xero_call_guard', calls: 'xero_calls' }),
+  policy: Object.freeze({ authStops: 'resource' }),
+});
 
 export function requireXeroSettings(env = process.env) {
   const settings = resolveXeroSettings(env);
@@ -31,6 +44,14 @@ export function createXeroRuntime({ settings, fetch, now = Date.now, log = conso
   const accessTokens = new Map(); // organisation id -> { token, expiresAt }
   const refreshing = new Map(); // organisation id -> promise
   const queues = new Map(); // organisation id -> tail of its work queue
+  const guards = new WeakMap(); // database handle -> call guard
+
+  // The call guard for one database. Keyed by the Xero tenant id: Xero's
+  // limits are per organisation.
+  function guardFor(db) {
+    if (!guards.has(db)) guards.set(db, createCallGuard({ db, ...XERO_CALL_GUARD, now, log }));
+    return guards.get(db);
+  }
 
   // Runs heavy Xero work for one organisation one at a time, in order: a
   // sync and a batch of drafts draw on the same call budget, and running them
@@ -67,11 +88,29 @@ export function createXeroRuntime({ settings, fetch, now = Date.now, log = conso
 
   // Refresh under a row lock, and store the rotated refresh token in the same
   // transaction, so two refreshes never race and the newest token is kept.
+  // A refresh Xero refuses for good halts every call until an owner connects
+  // again or saves the settings; another failed refresh counts as a failed
+  // call.
   async function refresh(db, organisationId) {
+    const guard = guardFor(db);
     return db.transaction(async (tx) => {
       const connection = usable(await readConnection(tx, organisationId, { lock: true }));
+      await guard.check(connection.tenantId, { resource: 'token' });
       const refreshToken = decryptToken(connection.refreshTokenEnc, settings.tokenKey, organisationId);
-      const tokens = await refreshTokens(settings, transport, refreshToken);
+      let tokens;
+      try {
+        tokens = await refreshTokens(settings, transport, refreshToken);
+      } catch (error) {
+        // invalid_grant: the connection is gone. invalid_client: the app's
+        // client id or secret is wrong. Neither clears without a person.
+        if (error?.code === 'xero_reconnect_needed' || ['invalid_client', 'unauthorized_client'].includes(error?.oauthError)) {
+          await guard.halt(connection.tenantId, 'auth', { detail: `Xero refused the token refresh${error.oauthError ? ` (${error.oauthError})` : ''}` });
+        } else if (error?.code !== 'xero_replay_no_match') {
+          await guard.record(connection.tenantId, { resource: 'token', failureKind: error?.code === 'xero_unreachable' ? 'network' : 'token_refresh' });
+        }
+        throw error;
+      }
+      await guard.record(connection.tenantId, { resource: 'token', statusCode: 200 });
       await storeRotatedToken(tx, organisationId, { refreshToken: tokens.refresh_token, scope: tokens.scope, key: settings.tokenKey });
       remember(organisationId, tokens);
       return tokens.access_token;
@@ -96,6 +135,7 @@ export function createXeroRuntime({ settings, fetch, now = Date.now, log = conso
       invalidateAccessToken: () => accessTokens.delete(organisationId),
       fetch: transport,
       governor,
+      guard: guardFor(db),
       apiBase: settings.endpoints.api,
       log,
     });
@@ -122,6 +162,7 @@ export function createXeroRuntime({ settings, fetch, now = Date.now, log = conso
     settings,
     transport,
     governor,
+    guardFor,
     states,
     remember,
     forget: (organisationId) => accessTokens.delete(organisationId),

package/server/release-channel.js

@@ -2,8 +2,8 @@
 // GitHub Releases (with npm's dist-tags as the fallback). Used by the Replit
 // deploy (scripts/deploy-release.js, FLOW_DEPLOY_REF=stable|beta).
 //
-// Release names follow docs/RELEASING.md: vYYYY.M.D is stable, and
-// vYYYY.M.D-beta.N is a beta of the upcoming YYYY.M.D.
+// Release names follow docs/RELEASING.md: vYYYY.M.N is stable, and
+// vYYYY.M.N-beta.B is a beta of the upcoming YYYY.M.N.
 //
 //   stable  GitHub's latest release (what Flow Release Promote points at, so
 //           a rollback is followed), else npm `latest`
@@ -13,7 +13,7 @@
 // Nothing here sends anything about the installation: each request is an
 // anonymous GET of public data.
 
-const TAG = /^v(20\d{2})\.([1-9]|1[0-2])\.([1-9]|[12]\d|3[01])(?:-beta\.([1-9]\d*))?$/;
+const TAG = /^v(20\d{2})\.([1-9]|1[0-2])\.([1-9]\d*)(?:-beta\.([1-9]\d*))?$/;
 export const CHANNELS = ["stable", "beta"];
 export const DEFAULT_GITHUB_API = "https://api.github.com";
 export const DEFAULT_GITHUB_DOWNLOADS = "https://github.com";

package/server/ui/alerts.js

@@ -0,0 +1,77 @@
+// The quiet alert strip (issue 117, docs/ALERTS.md): one slim line under a
+// page's header when something on that page needs this person. It is hidden
+// when nothing does. It shows the worst alert first, with "+N more" when there
+// are others; × hides that alert for this person until something new joins
+// it, and the next one shows. Data comes from /api/alerts
+// (server/api/alerts.js). The caller passes in app.js's shared pieces as `ui`.
+
+const money = new Intl.NumberFormat('en-AU', { style: 'currency', currency: 'AUD' });
+const CLOSE = '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>';
+
+// `onTab(tab)` opens a tab on the page, for an alert whose action names one.
+// `scope` narrows the page to one part (an integration's own page), and
+// `onLoad({ alerts, danger })` hears each answer (`danger`: a danger alert is
+// open, even one this person hid), so the page can show the same state
+// elsewhere. An action that links to the page already open is left out.
+// Answers { element, refresh }: put `element` on the page, and call
+// `refresh()` after a change that can fix or make an alert.
+export function alertStrip(ui, page, { onTab = () => {}, scope = null, onLoad = () => {} } = {}) {
+  const { h, flow, go, toast } = ui;
+  const element = h('div', { class: 'fx-alerts', hidden: true, role: 'status', 'aria-live': 'polite' });
+  let alerts = [];
+
+  function draw() {
+    const [first] = alerts;
+    element.hidden = !first;
+    if (!first) {
+      element.replaceChildren();
+      return;
+    }
+    element.dataset.tone = first.tone;
+    const close = h('button', { class: 'fx-alerts__close', type: 'button', 'aria-label': 'Dismiss', title: 'Dismiss', onclick: () => dismiss(first.key) });
+    close.innerHTML = CLOSE;
+    let action = null;
+    if (first.action?.href && first.action.href !== location.pathname) action = h('a', { class: 'fx-alerts__action', href: first.action.href, onclick: go }, first.action.label);
+    else if (first.action?.tab) action = h('button', { class: 'fx-alerts__action', type: 'button', onclick: () => onTab(first.action.tab) }, first.action.label);
+    element.replaceChildren(...[
+      h('p', { class: 'fx-alerts__text' },
+        first.title,
+        first.moneyAtRiskCents > 0 ? h('span', { class: 'fx-alerts__money' }, ` ${money.format(first.moneyAtRiskCents / 100)} at risk.`) : null),
+      action,
+      alerts.length > 1 ? h('span', { class: 'fx-alerts__more' }, `+${alerts.length - 1} more`) : null,
+      close,
+    ].filter(Boolean));
+  }
+
+  async function dismiss(key) {
+    alerts = alerts.filter((a) => a.key !== key);
+    draw();
+    try {
+      await flow('/api/alerts/dismiss', { method: 'POST', body: JSON.stringify({ key }) });
+    } catch (error) {
+      toast(error.message, 'danger');
+    }
+  }
+
+  // An alert that cannot load shows nothing: the page works without it.
+  async function refresh() {
+    let danger = false;
+    try {
+      const query = new URLSearchParams({ page, ...(scope ? { scope } : {}) });
+      ({ alerts, danger = false } = await flow(`/api/alerts?${query}`));
+    } catch {
+      alerts = [];
+    }
+    onLoad({ alerts, danger });
+    draw();
+  }
+
+  // Coming back to the tab checks again, while this page is open.
+  const onVisible = () => {
+    if (!element.isConnected) document.removeEventListener('visibilitychange', onVisible);
+    else if (document.visibilityState === 'visible') refresh();
+  };
+  document.addEventListener('visibilitychange', onVisible);
+  refresh();
+  return { element, refresh };
+}

package/server/ui/app-page.js

@@ -51,7 +51,7 @@ const BODY = `<div class="fx-app">
   <div id="toasts" class="fx-toasts" aria-live="polite"></div>
 </div>`;
 
-export const APP_PATHS = ['/sign-in', '/jobs', '/invoices', '/invoices/:id', '/people', '/integrations', '/integrations/:id', '/account', '/appearance', '/invoicing-settings'];
+export const APP_PATHS = ['/sign-in', '/jobs', '/invoices', '/invoices/:id', '/people', '/integrations', '/integrations/:id', '/account', '/appearance', '/invoicing-settings', '/price-list'];
 
 export function appPage({ defaultFamily }) {
   return renderPage({

package/server/ui/app.js

@@ -12,9 +12,11 @@ import { ACCENT_PRESETS, normalizeAccent, THEME_FAMILIES, tokensFor } from '/ass
 import { renderInvoice, renderInvoiceList } from '/assets/ui/invoicing.js';
 import { automationSection } from '/assets/ui/automations.js';
 import { renderInvoicingSettings, sendModeSection } from '/assets/ui/invoicing-settings.js';
+import { renderPriceList } from '/assets/ui/price-list.js';
 import { renderJobs } from '/assets/ui/jobs.js';
 import { startMonitoring } from '/assets/ui/monitoring.js';
 import { openSearch } from '/assets/ui/search.js';
+import { alertStrip } from '/assets/ui/alerts.js';
 
 const $ = (id) => document.getElementById(id);
 
@@ -194,10 +196,13 @@ let me = null;
 const VIEWS = {
   jobs: { label: 'Jobs', icon: 'jobs', group: 'Work', render: (main) => renderJobs(main, ui()) },
   invoices: { label: 'Invoices', icon: 'invoices', group: 'Work', render: (main, id) => (id ? renderInvoice(main, ui(), id) : renderInvoiceList(main, ui())) },
-  'invoicing-settings': { label: 'Invoicing', icon: 'invoices', group: 'Settings', render: (main) => renderInvoicingSettings(main, ui()) },
+  'invoicing-settings': { label: 'Invoice rules', icon: 'invoices', group: 'Settings', render: (main) => renderInvoicingSettings(main, ui()) },
+  'price-list': { label: 'Price list', icon: 'tag', group: 'Settings', render: (main) => renderPriceList(main, ui()) },
   people: { label: 'People', icon: 'people', group: 'Settings', ownerOnly: true, render: renderPeople },
   integrations: { label: 'Integrations', icon: 'plug', group: 'Settings', ownerOnly: true, render: (main, id) => (id ? renderIntegration(main, id) : renderIntegrations(main)) },
-  account: { label: 'Account', icon: 'person', group: 'Settings', render: renderAccount },
+  // Not in the sidebar: "Manage account" in the account menu opens the same
+  // Clerk profile. The page stays for links and Search.
+  account: { label: 'Account', icon: 'person', group: 'Settings', sidebar: false, render: renderAccount },
   appearance: { label: 'Appearance', icon: 'palette', group: 'Settings', render: renderAppearance },
 };
 
@@ -206,6 +211,7 @@ const ICON_PATHS = {
   jobs: '<rect x="3" y="4" width="5" height="16" rx="1"/><rect x="10" y="4" width="5" height="11" rx="1"/><rect x="17" y="4" width="4" height="14" rx="1"/>',
   invoices: '<path d="M6 3h9l4 4v14H6z"/><path d="M14 3v5h5M9 13h7M9 17h5"/>',
   people: '<circle cx="9" cy="8" r="3"/><path d="M3 20c0-3.5 2.7-6 6-6s6 2.5 6 6"/><path d="M16 5a3 3 0 010 6M21 20c0-3-1.6-5-4-5.7"/>',
+  tag: '<path d="M3 12V4h8l10 10-8 8z"/><circle cx="7.5" cy="8.5" r="1.5"/>',
   plug: '<path d="M9 3v5M15 3v5M6 8h12v3a6 6 0 01-12 0zM12 17v4"/>',
   person: '<circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 3.6-7 8-7s8 3 8 7"/>',
   flag: '<path d="M5 21V4M5 4h11l-2 4 2 4H5"/>',
@@ -368,6 +374,7 @@ function renderShell() {
   let group = null;
   for (const [name, view] of Object.entries(VIEWS)) {
     if (view.ownerOnly && me?.person.role !== 'owner') continue;
+    if (view.sidebar === false) continue;
     if (view.group && view.group !== group) items.push(h('span', { class: 'fx-nav__group' }, view.group));
     group = view.group;
     items.push(h('a', { href: `/${name}`, 'data-nav': name, 'data-label': view.label, onclick: navigate }, icon(view.icon), h('span', { class: 'fx-nav__label' }, view.label)));
@@ -539,6 +546,7 @@ async function renderIntegrations(main) {
   const content = h('div', { class: 'fx-int-sections' }, h('div', { class: 'fx-skeleton' }));
   main.append(
     h('header', { class: 'fx-ph' }, h('div', { class: 'fx-ph__text' }, h('h1', { class: 'fx-title' }, 'Integrations'))),
+    alertStrip(ui(), 'integrations').element,
     h('div', { class: 'fx-int-bar' }, tabs, search),
     notices, content);
   let body;
@@ -623,8 +631,24 @@ async function renderIntegration(main, id) {
     return;
   }
   const canChange = Boolean(me.ownerActions?.allowed);
+  // The quiet alert line for this integration only (server/ui/alerts.js).
+  // While a danger alert is open, even one this person hid, the status says
+  // calls are stopped instead of the integration's state.
+  let stopped = false;
+  const statusPill = (current) => (stopped && current.state === 'ready'
+    ? h('span', { class: 'fx-status', 'data-tone': 'danger', 'data-int-status': '' }, 'Calls stopped')
+    : h('span', { class: 'fx-status', 'data-tone': STATE_TONE[current.state] ?? 'mute', 'data-int-status': '' }, STATE_LABEL[current.state] ?? current.state));
+  let shown = found;
+  const alerts = alertStrip(ui(), 'integrations', {
+    scope: id,
+    onLoad: ({ danger }) => {
+      stopped = danger;
+      for (const pill of host.querySelectorAll('[data-int-status]')) pill.replaceWith(statusPill(shown));
+    },
+  });
 
   const draw = (current, progress = null) => {
+    shown = current;
     const inputs = new Map();
     const rows = [];
     for (const field of current.fields) {
@@ -732,10 +756,11 @@ async function renderIntegration(main, id) {
           h('p', { class: 'fx-int-hero__blurb' }, entry?.blurb ?? ''),
           h('div', { class: 'fx-int-hero__actions' },
             primary,
-            on ? h('span', { class: 'fx-status', 'data-tone': STATE_TONE[current.state] ?? 'mute' }, STATE_LABEL[current.state] ?? current.state) : null,
+            on ? statusPill(current) : null,
             progress ? connectProgress(progress) : null))),
       h('div', { class: 'fx-int-page__grid' },
         h('div', { class: 'fx-int-page__main' }, ...[
+          alerts.element,
           !canChange ? notice('Changing integrations needs a verified owner sign-in: Google Workspace on the owner domain with no password, or a second factor.', 'warn', 'Read only.') : null,
           !body.secretsKey ? notice('Flow has no secrets key, so it cannot store a client secret. Ask whoever hosts Flow to set FLOW_SECRETS_KEY (64 hex characters), then restart Flow.', 'warn', 'No secrets key.') : null,
           current.state === 'failed' && current.error ? notice(current.error, 'danger', 'It could not start.') : null,
@@ -753,7 +778,7 @@ async function renderIntegration(main, id) {
         ].filter(Boolean)),
         h('aside', { class: 'fx-int-page__meta' },
           h('dl', { class: 'fx-meta' }, ...[
-            ['Status', h('span', { class: 'fx-status', 'data-tone': STATE_TONE[current.state] ?? 'mute' }, STATE_LABEL[current.state] ?? current.state)],
+            ['Status', statusPill(current)],
             ['Category', h('span', { class: 'fx-chip fx-chip--static' }, CATEGORY_LABEL[entry?.category] ?? 'Integration')],
             modeLabel ? ['Mode', modeLabel] : null,
             ['Turned on by', current.enabledBy === 'host' ? 'The host' : current.enabledBy === 'flow' ? 'An owner, here' : '—'],
@@ -768,11 +793,11 @@ async function renderIntegration(main, id) {
 // One setting, laid out the same on every settings screen: a short name, one
 // line of smaller text under it, and the control on the right. Longer help
 // lives behind a link, not here. A wide control (a grid of choices) sits on
-// its own line under the name.
-function settingRow({ label, hint, control, wide = false }) {
+// its own line under the name. `tone: 'danger'` marks a row that needs a person.
+function settingRow({ label, hint, control, wide = false, tone = null }) {
   const target = control?.matches?.('input, select, textarea') ? control : control?.querySelector?.('input:not([type=color]), select, textarea');
   const id = target ? (target.id ||= `fx-set-${++settingRow.next}`) : null;
-  return h('div', { class: `fx-setting${wide ? ' fx-setting--wide' : ''}` },
+  return h('div', { class: `fx-setting${wide ? ' fx-setting--wide' : ''}`, 'data-tone': tone },
     h('div', { class: 'fx-setting__text' },
       id ? h('label', { class: 'fx-setting__name', for: id }, label) : h('span', { class: 'fx-setting__name' }, label),
       hint ? h('p', { class: 'fx-setting__hint' }, hint) : null),
@@ -800,16 +825,25 @@ function xeroConnection(organisations, canChange) {
     (async () => {
       let hint;
       let control = null;
+      let stopped = false;
       try {
         const status = await flow(`/api/xero/status?organisationId=${organisation.id}`);
-        if (status.connected) {
+        if (status.connected && status.calls?.stopped) {
+          // A refused connection stopped calls (the call guard): say so, and
+          // make Connect again the main button, which starts them again.
+          const at = status.calls.since ? ` at ${new Date(status.calls.since).toLocaleString('en-AU', { dateStyle: 'medium', timeStyle: 'short' })}` : '';
+          hint = status.calls.all
+            ? `Xero refused Flow${at}. Flow stopped all calls.`
+            : `Xero refused Flow for ${status.calls.resources.join(', ')}${at}. Flow stopped those calls.`;
+          stopped = true;
+        } else if (status.connected) {
           const mirror = await flow(`/api/xero/mirror?organisationId=${organisation.id}`).catch(() => null);
           hint = `Connected to ${status.connection?.tenantName ?? 'Xero'}.${mirror ? ` ${mirror.counts.invoices} invoices copied.` : ''}`;
         } else {
           hint = 'Not connected.';
         }
         if (canChange) {
-          control = h('button', { class: `fx-btn fx-btn--sm${status.connected ? '' : ' fx-btn--primary'}`, type: 'button', onclick: async () => {
+          control = h('button', { class: `fx-btn fx-btn--sm${status.connected && !stopped ? '' : ' fx-btn--primary'}`, type: 'button', onclick: async () => {
             try {
               const { authorizeUrl } = await flow('/api/xero/connect', { method: 'POST', body: JSON.stringify({ organisationId: organisation.id }) });
               location.assign(authorizeUrl);
@@ -821,7 +855,7 @@ function xeroConnection(organisations, canChange) {
       } catch (error) {
         hint = error.message;
       }
-      row.replaceWith(settingRow({ label: organisation.name, hint, control }));
+      row.replaceWith(settingRow({ label: organisation.name, hint, control, tone: stopped ? 'danger' : null }));
     })();
   }
   return h('div', {}, h('h2', { class: 'fx-int-section__title' }, 'Xero organisation'), host);
@@ -854,9 +888,9 @@ async function invitePerson() {
 // security), with the person's Flow role above it.
 function renderAccount(main) {
   const host = h('div', { class: 'fx-clerk-profile' });
-  main.append(
-    pageHeader('Account', { subtitle: `${me.person.email} · ${ROLE_LABEL[me.person.role]}. ${ROLE_HINT[me.person.role]}` }),
-    host);
+  // Clerk's card has its own "Account" heading; Flow's page heading is for
+  // screen readers only, so the title shows once.
+  main.append(h('h1', { class: 'fx-sr' }, 'Account'), host);
   // Clerk keeps its own pages (profile, security) in memory, so the URL
   // stays Flow's.
   mountClerk('profile', host, { routing: 'virtual' });
@@ -1011,7 +1045,7 @@ drawModeToggles();
 // the Clerk instance is called.
 const LOCALIZATION = {
   signIn: {
-    start: { title: 'Sign in to Flow', subtitle: 'Welcome back. Choose how to sign in.' },
+    start: { title: 'Sign in to Flow', subtitle: '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/clerk-appearance.js

@@ -11,6 +11,9 @@ const gearIcon = {
   '&& > *': { visibility: 'hidden' },
 };
 
+// A small down chevron after the name, as in other apps' account buttons.
+const CHEVRON = `url("data:image/svg+xml,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5L6 7.5L9 4.5"/></svg>')}")`;
+
 // Matches the narrow-screen rule in flow.css, where the sidebar becomes a bar.
 const NARROW = '@media (max-width: 820px)';
 
@@ -88,24 +91,54 @@ export function flowClerkAppearance({ embedded = false, publicSignUp = false } =
       badge: { '&&': { color: dim, background: `color-mix(in srgb, ${text} 5%, transparent)`, borderColor: line } },
       formButtonPrimary: { boxShadow: 'none', textTransform: 'none', fontWeight: 650 },
       socialButtonsBlockButton: controlEdge,
-      // The account button in the sidebar foot is a chip: photo or initial,
-      // then the name (Clerk shows the email when there is no name), clipped
-      // with an ellipsis to fit. The top bar on narrow screens has no room for
-      // the name, so there it is the photo or initial alone.
+      // The account button in the sidebar foot: photo or initial, then the
+      // name (Clerk shows the email when there is no name), clipped with an
+      // ellipsis to fit, then a small chevron. At rest it is plain; on hover,
+      // keyboard focus or while its menu is open it is an outlined pill. The
+      // top bar on narrow screens has no room for the name, so there it is the
+      // photo or initial alone.
       userButtonTrigger: {
         '&&': {
-          width: '100%', minWidth: 0, justifyContent: 'flex-start', padding: '4px 10px 4px 4px', borderRadius: token('--t-radius-lg', '10px'), background: paper, boxShadow: `inset 0 0 0 1px ${line}`,
-          '&:hover': { background: `color-mix(in srgb, ${text} 6%, ${paper})` },
-          [NARROW]: { width: 'auto', padding: 0, borderRadius: '50%', background: 'transparent', boxShadow: 'none', '&:hover': { background: 'transparent' } },
+          width: 'auto', maxWidth: '100%', minWidth: 0, justifyContent: 'flex-start', padding: '4px 8px 4px 4px',
+          borderRadius: token('--t-radius-lg', '10px'), background: 'transparent', boxShadow: 'none',
+          '&:hover, &:focus-visible, &[aria-expanded="true"]': { background: `color-mix(in srgb, ${text} 5%, transparent)`, boxShadow: `inset 0 0 0 1px ${line}` },
+          '&:focus-visible': { boxShadow: `inset 0 0 0 1px ${line}, ${focus}` },
+          [NARROW]: { padding: 0, borderRadius: '50%', '&:hover, &[aria-expanded="true"]': { background: 'transparent', boxShadow: 'none' } },
+        },
+      },
+      userButtonBox: {
+        flexDirection: 'row-reverse', justifyContent: 'flex-end', minWidth: 0, gap: '6px',
+        // The box lays out right to left, so ::before lands after the name.
+        '&::before': {
+          content: '""', flex: 'none', width: '10px', height: '10px', background: dim,
+          mask: `${CHEVRON} center / contain no-repeat`, WebkitMask: `${CHEVRON} center / contain no-repeat`,
         },
+        [NARROW]: { '&::before': { display: 'none' } },
       },
-      userButtonBox: { flexDirection: 'row-reverse', justifyContent: 'flex-end', minWidth: 0, gap: '8px' },
       userButtonOuterIdentifier: {
         minWidth: 0, paddingInlineStart: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
         color: token('--t-strong', text), fontSize: '14px', fontWeight: 600,
         [NARROW]: { display: 'none' },
       },
-      userButtonPopoverCard: { border: `1px solid ${line}`, boxShadow: shadow },
+      // The account menu is as wide as its rows, between 220px and 280px, with
+      // compact rows. A long name or email ends with an ellipsis and does not
+      // make the menu wider.
+      userButtonPopoverCard: {
+        '&&': { width: 'max-content', minWidth: '220px', maxWidth: 'min(280px, calc(100vw - 16px))', border: `1px solid ${line}`, boxShadow: shadow },
+      },
+      userPreview__userButton: { '&&': { padding: '10px 12px', gap: '10px' } },
+      userPreviewAvatarContainer__userButton: { '&&, && .cl-userPreviewAvatarBox': { width: '28px', height: '28px' } },
+      userPreviewTextContainer__userButton: { '&&': { minWidth: 0, overflow: 'hidden' } },
+      userPreviewMainIdentifier__userButton: { '&&': { minWidth: 0, fontSize: '13px' } },
+      userPreviewMainIdentifierText__userButton: { '&&': { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } },
+      userPreviewSecondaryIdentifier__userButton: {
+        '&&': { display: 'block', minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontSize: '12px', color: dim },
+      },
+      userButtonPopoverActionButton: { '&&': { padding: '8px 12px', gap: '10px', fontSize: '13px', color: text } },
+      userButtonPopoverActionButtonIconBox: { '&&': { flex: '0 0 28px', width: '28px' } },
+      userButtonPopoverCustomItemButton: { '&&': { padding: '8px 12px', gap: '10px', fontSize: '13px', color: text } },
+      userButtonPopoverCustomItemButtonIconBox: { '&&': { flex: '0 0 28px', width: '28px' } },
+      userButtonPopoverFooter: { '&&': { minWidth: 0 } },
       userButtonPopoverActionButtonIcon__manageAccount: gearIcon,
       footer: embedded ? { display: 'none' } : undefined,
     },

package/server/ui/flow.css

@@ -132,7 +132,7 @@ body:is([data-state="off"], [data-state="error"], [data-state="no-access"]) .fx-
 .fx-nav__count { margin-left: auto; color: var(--t-dim); font-size: 12px; font-weight: 700; }
 .fx-ico { display: inline-flex; flex: none; }
 .fx-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
-.fx-side__end { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 6px 0; border-top: 1px solid var(--fx-line); }
+.fx-side__end { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 12px 0 0; border-top: 1px solid var(--fx-line); }
 .fx-side__user { display: flex; min-width: 32px; min-height: 32px; align-items: center; }
 /* Clerk replaces the mount's classes with its root box's, so this uses the id. */
 #user-button { flex: 1 1 auto; min-width: 0; }
@@ -148,7 +148,7 @@ body:is([data-state="off"], [data-state="error"], [data-state="no-access"]) .fx-
   .fx-shell[data-folded] .fx-side__end { flex-direction: column; padding: 12px 0 0; }
   .fx-shell[data-folded] #user-button { flex: none; }
   .fx-shell[data-folded] #user-button .cl-userButtonTrigger { width: auto; padding: 0; border-radius: 50%; background: transparent; box-shadow: none; }
-  .fx-shell[data-folded] #user-button .cl-userButtonOuterIdentifier { display: none; }
+  .fx-shell[data-folded] #user-button .cl-userButtonOuterIdentifier, .fx-shell[data-folded] #user-button .cl-userButtonBox::before { display: none; }
 }
 .fx-main { flex: 1; min-width: 0; max-width: 1180px; margin: 0 auto; padding: 32px clamp(16px, 4vw, 48px) 64px; display: grid; gap: 20px; align-content: start; }
 .fx-main:focus { outline: none; box-shadow: none; }
@@ -269,6 +269,7 @@ body:is([data-state="off"], [data-state="error"], [data-state="no-access"]) .fx-
 .fx-int-hero__actions { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
 .fx-int-page__grid { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 32px; align-items: start; }
 .fx-int-page__main { display: grid; gap: 28px; }
+.fx-int-page__main > .fx-alerts { margin: 0; }
 .fx-int-section { display: grid; gap: 14px; padding-top: 20px; border-top: 1px solid var(--fx-line); }
 .fx-int-section__title { color: var(--t-strong); font: 650 17px/1.3 var(--t-body); }
 .fx-int-section .fx-btn { justify-self: start; }
@@ -328,6 +329,25 @@ a.fx-strong:hover { text-decoration: underline; }
 /* Invoices: the Send all ready bar above the Ready list. */
 .fx-sendbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; padding: 12px 16px; border: 1px solid var(--fx-line); border-radius: 8px; background: var(--t-paper); margin-top: 12px; }
 .fx-sendbar[hidden] { display: none; }
+
+/* Quiet alerts (server/ui/alerts.js): one slim line under the page header,
+   only while something on the page needs this person. */
+.fx-alerts { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 6px 6px 6px 14px; border: 1px solid var(--fx-line); border-left: 3px solid var(--t-warn); border-radius: var(--t-radius); background: var(--t-paper); font-size: 14px; }
+.fx-alerts[hidden] { display: none; }
+.fx-alerts[data-tone="danger"] { border-left-color: var(--t-danger); }
+.fx-alerts__text { flex: 1; min-width: 0; margin: 0; color: var(--t-strong); }
+.fx-alerts__money { color: var(--t-dim); }
+.fx-alerts__action { flex: none; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--t-strong); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
+.fx-alerts__more { flex: none; font-size: 12.5px; color: var(--t-dim); white-space: nowrap; }
+.fx-alerts__close { flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--t-radius); background: none; color: var(--t-dim); cursor: pointer; }
+.fx-alerts__close:hover { background: var(--fx-hover); color: var(--t-strong); }
+.fx-alerts__close svg { width: 14px; height: 14px; }
+.fx-alerts__action:focus-visible, .fx-alerts__close:focus-visible { outline: 2px solid var(--t-ring); outline-offset: 2px; }
+@media (max-width: 560px) {
+  .fx-alerts { flex-wrap: wrap; }
+  .fx-alerts__text { flex-basis: calc(100% - 52px); }
+  .fx-alerts__action, .fx-alerts__more { order: 2; }
+}
 .fx-sendbar p { margin: 0; }
 .fx-problem { color: var(--t-danger); }
 .fx-sendbar__actions { display: flex; flex-wrap: wrap; gap: 8px; }
@@ -587,6 +607,7 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-setting__text { display: grid; gap: 3px; min-width: 0; }
 .fx-setting__name { color: var(--t-strong); font: 500 14.5px/1.35 var(--t-body); }
 .fx-setting__hint { margin: 0; color: var(--t-dim); font-size: 13px; line-height: 1.45; }
+.fx-setting[data-tone="danger"] .fx-setting__hint { color: var(--t-danger); }
 .fx-setting__control { display: flex; justify-content: flex-end; min-width: 0; }
 .fx-setting__control > .fx-input, .fx-setting__control > .fx-select, .fx-setting__stack { width: 320px; max-width: 100%; }
 .fx-setting__control .fx-swatches { flex-wrap: nowrap; }
@@ -688,6 +709,14 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-set__control .fx-input[type="number"] { width: 96px; }
 .fx-set__control .fx-select { min-width: 220px; }
 .fx-set + .fx-set { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--fx-line); }
+/* Price list (price-list.js): a code's price and its systems' chips. */
+.fx-price__hint { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
+.fx-price__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
+.fx-price__head .fx-search { margin: 0; }
+@media (max-width: 560px) { .fx-price__head .fx-search { width: 100%; } }
+.fx-price__systems { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
+.fx-set__control .fx-price__link { width: 260px; min-width: 0; }
+@media (max-width: 560px) { .fx-set__control .fx-price__link { width: 150px; } }
 /* Invoice rules (invoice-rules.js): a row's Edit button and switch, and the
    rule dialog's condition lines. */
 .fx-rule__controls { align-items: center; gap: 10px; }

package/server/ui/invoicing-settings.js

@@ -23,7 +23,7 @@ const SEND_MODES = [
 export async function renderInvoicingSettings(main, ui) {
   const { h, flow, toast, notice, pageHeader, me } = ui;
   const host = h('div', { class: 'fx-card', style: { padding: '8px 20px 16px' } }, h('div', { class: 'fx-skeleton' }));
-  main.append(pageHeader('Invoicing', { subtitle: 'How Flow drafts invoices. No integration needed.' }), host);
+  main.append(pageHeader('Invoice rules', { subtitle: 'The rules Flow uses to draft each invoice.' }), host);
   let body;
   try {
     body = await flow('/api/invoicing/settings');