@arcforgelabs/flow 2026.10.45 → 2026.10.47

package/server/ui/sidecar.js

@@ -1,9 +1,12 @@
 // The sidecar, as in ClickUp: a panel at the right of a page or a dialog.
 // The Custom fields manager opens it over its table (`overlay`); a job's
-// panel keeps it as its right column, with tabs (Activity, Review). Closed,
-// it takes no room, so the main area gets the full width.
+// panel keeps it as its right column, with tabs (Activity, Fix). Closed,
+// it takes no room, so the main area gets the full width. `phone: 'page'`
+// opens that panel as a full page on a phone: the tabs sit at the top of
+// the record and the record bar (`recordBar`) carries back, the title and
+// the next record. The main action stays in the caller's foot.
 //
-// sidecar(h, { label, overlay, escape, tabs, onChange }) answers
+// sidecar(h, { label, overlay, escape, tabs, onChange, phone }) answers
 // { element, isOpen, open, show, close, tab, setTabs }:
 //   open(id)     selects tab `id` (or the first) and draws its `render()`
 //   show(node)   draws one node with no tabs (the overlay's own form)
@@ -13,14 +16,34 @@
 // `onChange(id)` hears each open (the tab id) and close (null).
 
 import { lucide } from '/assets/ui/custom-fields.js';
+import { applyPhoneRule, isPhone, WIDTHS } from './mobile.js';
 
-export function sidecar(h, { label, overlay = false, escape = false, tabs = [], onChange = null } = {}) {
-  const element = h('aside', { class: `fx-sidecar${overlay ? ' fx-sidecar--over' : ''}`, 'aria-label': label, hidden: true });
+const CHEVRON_LEFT = 'M14.5 6l-6 6 6 6';
+const CHEVRON_RIGHT = 'M9.5 6l6 6-6 6';
+
+function glyph(button, path) {
+  button.innerHTML = `<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><path d="${path}" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+  return button;
+}
+
+export function sidecar(h, { label, overlay = false, escape = false, tabs = [], onChange = null, phone = null } = {}) {
+  const element = applyPhoneRule(h('aside', { class: `fx-sidecar${overlay ? ' fx-sidecar--over' : ''}`, 'aria-label': label, hidden: true }), 'sidecar');
   let list = tabs;
   let current = null;
+  let drawn = false;
+  if (phone === 'page') element.dataset.phone = 'page';
 
   const closeButton = () => h('button', { class: 'fx-sidecar__close', type: 'button', 'aria-label': 'Close', title: 'Close', onclick: () => api.close() }, lucide(h, 'x'));
 
+  // On a phone page the tab strip is the record's top tabs, so it lives on
+  // the record (the parent) and stays put while the record scrolls. The
+  // body stays in the sidecar, which is what the phone suite measures.
+  function parkHead(head) {
+    const grid = element.parentElement;
+    if (element.classList.contains('fx-sidecar--page') && grid) grid.prepend(head);
+    else element.prepend(head);
+  }
+
   function drawTabs() {
     const head = h('header', { class: 'fx-sidecar__head' },
       h('div', { class: 'fx-sidecar__tabs', role: 'tablist', 'aria-label': label },
@@ -30,7 +53,10 @@ export function sidecar(h, { label, overlay = false, escape = false, tabs = [],
         }, lucide(h, t.icon), h('span', {}, t.label), t.mark ? h('span', { class: 'fx-sidecar__mark', 'aria-hidden': 'true' }) : null))),
       closeButton());
     const tab = list.find((t) => t.id === current);
-    element.replaceChildren(head, h('div', { class: 'fx-sidecar__body', role: 'tabpanel' }, tab?.render?.() ?? null));
+    const body = h('div', { class: 'fx-sidecar__body', role: 'tabpanel' }, tab?.render?.() ?? null);
+    element.parentElement?.querySelector(':scope > .fx-sidecar__head')?.remove();
+    element.replaceChildren(body);
+    parkHead(head);
   }
 
   const api = {
@@ -41,18 +67,27 @@ export function sidecar(h, { label, overlay = false, escape = false, tabs = [],
       current = list.find((t) => t.id === id)?.id ?? list[0]?.id ?? null;
       drawTabs();
       element.hidden = false;
+      // The first open leaves the record where it is. A later tab brings
+      // its panel up under the sticky tabs.
+      if (drawn && element.classList.contains('fx-sidecar--page')) {
+        element.querySelector('.fx-sidecar__body')?.scrollIntoView({ block: 'start' });
+      }
+      drawn = true;
       onChange?.(current);
     },
     show(node) {
       current = null;
+      element.parentElement?.querySelector(':scope > .fx-sidecar__head')?.remove();
       element.replaceChildren(node);
       element.hidden = false;
     },
     close() {
       if (element.hidden) return;
       element.hidden = true;
+      element.parentElement?.querySelector(':scope > .fx-sidecar__head')?.remove();
       element.replaceChildren();
       current = null;
+      drawn = false;
       onChange?.(null);
     },
     // New tabs (a tab's data came in): an open tab draws again.
@@ -63,6 +98,15 @@ export function sidecar(h, { label, overlay = false, escape = false, tabs = [],
     closeButton,
   };
 
+  if (phone === 'page') {
+    const sync = () => {
+      element.classList.toggle('fx-sidecar--page', isPhone());
+      if (!element.hidden && current) drawTabs();
+    };
+    sync();
+    if (typeof matchMedia === 'function') matchMedia(WIDTHS.phone).addEventListener('change', sync);
+  }
+
   if (escape) {
     document.addEventListener('keydown', (event) => {
       if (event.key === 'Escape' && element.isConnected && !element.hidden && !document.querySelector('dialog[open], .fx-pop:popover-open')) api.close();
@@ -70,3 +114,59 @@ export function sidecar(h, { label, overlay = false, escape = false, tabs = [],
   }
   return api;
 }
+
+// The bar at the top of a record on a phone: ← back, the title, ‹ › for the
+// previous and next record, and an optional ⋯ menu. Hidden above phone
+// width (flow.css), so a desk record keeps its own bar. `prev` and `next`
+// are { label, disabled, onclick }. `setSteps` and `setMenu` update them
+// after the list arrives.
+export function recordBar(h, { title = '', onBack, prev = null, next = null, menu = null, label = 'Record' } = {}) {
+  const back = glyph(h('button', { class: 'fx-record__back', type: 'button', 'aria-label': 'Back', title: 'Back', onclick: onBack }), CHEVRON_LEFT);
+  const titleNode = h('h2', { class: 'fx-record__title', title }, title);
+  const step = (path) => glyph(h('button', { class: 'fx-record__step', type: 'button' }), path);
+  const prevBtn = step(CHEVRON_LEFT);
+  const nextBtn = step(CHEVRON_RIGHT);
+  const end = h('div', { class: 'fx-record__end' }, prevBtn, nextBtn);
+  const apply = (button, spec, fallback) => {
+    const name = spec?.label ?? fallback;
+    button.setAttribute('aria-label', name);
+    button.title = name;
+    button.disabled = !spec || Boolean(spec.disabled);
+    button.onclick = spec?.onclick ?? null;
+  };
+  apply(prevBtn, prev, 'Previous');
+  apply(nextBtn, next, 'Next');
+  const element = h('header', { class: 'fx-record', 'aria-label': label }, back, titleNode, end);
+  element.setSteps = (nextPrev, nextNext) => {
+    apply(prevBtn, nextPrev, 'Previous');
+    apply(nextBtn, nextNext, 'Next');
+  };
+  element.setMenu = (node) => {
+    end.querySelector('.fx-record__menu')?.remove();
+    if (node) end.append(node);
+  };
+  if (menu) element.setMenu(menu);
+  return element;
+}
+
+// Keeps `pick()` in `foot` while the window is a phone, and back in `home`
+// (the header's actions) otherwise. Returns the function to call again when
+// the primary action changes (Save appears, a send arrives).
+export function watchPhonePrimary(home, foot, pick) {
+  let parked = null;
+  const apply = () => {
+    const next = isPhone() ? (pick() ?? null) : null;
+    if (parked && parked !== next && home) home.append(parked);
+    parked = next;
+    if (parked) {
+      foot.hidden = false;
+      if (parked.parentElement !== foot) foot.replaceChildren(parked);
+    } else {
+      foot.replaceChildren();
+      foot.hidden = true;
+    }
+  };
+  apply();
+  if (typeof matchMedia === 'function') matchMedia(WIDTHS.phone).addEventListener('change', apply);
+  return apply;
+}

package/server/ui/view-bar.js

@@ -22,6 +22,7 @@
 //       first             the field a new row starts on
 //       empty             the words when no filter is on
 import { lucide } from '/assets/ui/custom-fields.js';
+import { applyPhoneRule } from './mobile.js';
 import { DATE_VALUES, dateValueIsOn, filterCount, KIND_ICONS, OPERATORS } from '/assets/ui/job-view.js';
 
 const DAY_BETWEEN = /^between:(\d{4}-\d{2}-\d{2})\.\.(\d{4}-\d{2}-\d{2})$/;
@@ -59,17 +60,22 @@ export function viewBar(h) {
     const panel = h('div', { class: `fx-pop${rows ? ' fx-pop--rows' : ''}`, id, popover: 'auto', role: rows ? 'dialog' : 'menu' });
     const button = h('button', { type: 'button', class: 'fx-chip', popovertarget: id, 'aria-haspopup': rows ? 'dialog' : 'menu', 'aria-expanded': 'false' });
     const clear = h('button', { type: 'button', class: 'fx-chip__clear', 'aria-label': clearLabel, title: clearLabel, hidden: true }, lucide(h, 'x'));
-    const wrap = h('span', { class: 'fx-chipset' }, button, clear);
+    const wrap = applyPhoneRule(h('span', { class: 'fx-chipset' }, button, clear), 'viewBar');
     let onClear = null;
     clear.addEventListener('click', () => onClear?.());
-    const fill = () => panel.replaceChildren(...build(fill, () => panel.hidePopover()).filter(Boolean));
+    // Place again after the rows draw. A filter row is wider than the empty
+    // panel, and the panel is measured once it is open; without this a button
+    // at the right (Invoices) leaves the value and the bin off the screen.
+    const placeMenu = () => { if (panel.matches(':popover-open')) place(button, panel, 6); };
+    const fill = () => {
+      panel.replaceChildren(...build(fill, () => panel.hidePopover()).filter(Boolean));
+      placeMenu();
+      requestAnimationFrame(placeMenu);
+    };
     panel.addEventListener('toggle', (event) => {
       button.setAttribute('aria-expanded', String(event.newState === 'open'));
       if (event.newState !== 'open') return;
       fill();
-      const at = button.getBoundingClientRect();
-      panel.style.top = `${Math.round(at.bottom + 6)}px`;
-      panel.style.left = `${Math.round(Math.max(8, Math.min(at.left, innerWidth - panel.offsetWidth - 8)))}px`;
     });
     return {
       node: [wrap, panel],
@@ -144,11 +150,16 @@ export function viewBar(h) {
     });
     return [button, pop];
   }
-  const place = (button, pop) => {
-    const at = button.getBoundingClientRect();
-    pop.style.top = `${Math.round(at.bottom + 4)}px`;
-    pop.style.left = `${Math.round(Math.max(8, Math.min(at.left, innerWidth - pop.offsetWidth - 8)))}px`;
-  };
+  // Keep a popover on the screen: at the control's left edge, shifted left
+  // when it would run off the right. Called again after a filter row draws,
+  // because that row is wider than the empty panel.
+  function place(anchor, pop, gap = 4) {
+    const at = anchor.getBoundingClientRect();
+    const width = pop.offsetWidth;
+    const left = Math.max(8, Math.min(at.left, innerWidth - width - 8));
+    pop.style.top = `${Math.round(at.bottom + gap)}px`;
+    pop.style.left = `${Math.round(left)}px`;
+  }
 
   // ── Filters ──
   // As ClickUp's: groups of rows of field, operator and value, with a bin on
@@ -328,7 +339,7 @@ export function viewBar(h) {
 export function findBox(h, { label, value = '', oninput }) {
   const input = h('input', { class: 'fx-input fx-input--sm fx-find__input', type: 'search', placeholder: label, 'aria-label': label, value });
   const button = h('button', { type: 'button', class: 'fx-chip fx-find__button', 'aria-label': label, title: label }, lucide(h, 'search'));
-  const element = h('span', { class: `fx-find${value ? ' fx-find--open' : ''}` }, button, input);
+  const element = applyPhoneRule(h('span', { class: `fx-find${value ? ' fx-find--open' : ''}` }, button, input), 'findBox');
   button.addEventListener('click', () => { element.classList.add('fx-find--open'); input.focus(); });
   input.addEventListener('input', () => oninput(input.value));
   input.addEventListener('blur', () => { if (!input.value) element.classList.remove('fx-find--open'); });

package/server/ui/xero-import.js

@@ -10,6 +10,16 @@
 import { bulkBar } from '/assets/ui/bulk-bar.js';
 import { lucide } from '/assets/ui/custom-fields.js';
 import { formatCents } from '/assets/ui/invoicing.js';
+import { applyPhoneRule, assignPhoneSlots, phoneSlot } from './mobile.js';
+
+// The list rows use the same phone slots as a column list.
+const phoneAt = (defs) => {
+  const columns = assignPhoneSlots(defs);
+  return (index) => {
+    const slot = phoneSlot(columns[index]);
+    return slot ? { 'data-phone-slot': slot } : {};
+  };
+};
 
 const XERO_STATUS = { DRAFT: 'Draft', SUBMITTED: 'Awaiting approval', AUTHORISED: 'Approved', PAID: 'Paid' };
 const XERO_TONE = { DRAFT: 'neutral', SUBMITTED: 'warn', AUTHORISED: 'info', PAID: 'success' };
@@ -212,13 +222,23 @@ export async function renderXeroImport(main, ui) {
       drawBar();
     } });
     const sure = rows.filter((r) => r.sure);
+    const at = phoneAt([
+      { kind: 'text', label: 'Number' },
+      { kind: 'client', label: 'Client', phone: 'title' },
+      { kind: 'date', label: 'Date', phone: 'meta' },
+      { kind: 'total', num: true, label: 'Total' },
+      { kind: 'status', label: 'Match', phone: 'meta' },
+      { kind: 'text', label: 'Flow', phone: 'meta' },
+      { kind: 'date', label: 'Flow date', phone: 'hide' },
+      { kind: 'total', label: 'Flow total', phone: 'hide' },
+    ]);
     host.replaceChildren(
       h('div', { class: 'fx-xi__bulk' }, icon('list-checks'), h('span', { class: 'fx-xi__bulk-text' }, 'Tick rows, then use the bar below.'),
         canAct && sure.length ? h('button', { class: 'fx-btn fx-btn--sm', type: 'button', onclick: () => {
           for (const r of sure) { ticked.add(r.xeroInvoiceId); boxes.get(r.xeroInvoiceId).checked = true; }
           drawBar();
         } }, icon('check-check'), `Tick ${sure.length} sure`) : null),
-      h('div', { class: 'fx-xi__scroll' }, h('table', { class: 'fx-table fx-table--rows fx-xi-list' },
+      applyPhoneRule(h('div', { class: 'fx-xi__scroll' }, h('table', { class: 'fx-table fx-table--rows fx-xi-list' },
         h('thead', {}, h('tr', {},
           canAct ? h('th', { class: 'fx-tick-cell' }, all) : null,
           h('th', { colspan: '4' }, xeroMark()), h('th', { class: 'fx-xi-list__mid' }), h('th', { colspan: '3' }, flowMark()))),
@@ -231,15 +251,15 @@ export async function renderXeroImport(main, ui) {
           boxes.set(row.xeroInvoiceId, box);
           return h('tr', {},
             canAct ? h('td', { class: 'fx-tick-cell' }, box) : null,
-            h('td', { class: 'fx-num' }, row.number ?? '—'),
-            h('td', {}, row.clientName ?? '—'),
-            h('td', { class: 'fx-dim' }, shortDate(row.issuedOn)),
-            h('td', { class: 'fx-num fx-strong' }, money(row.totalCents)),
-            h('td', { class: 'fx-xi-list__mid' }, row.sure ? icon('check-check', 'Sure') : fitIcon(fit), fit.count > 1 ? h('span', { class: 'fx-dim' }, `${fit.count}`) : null),
-            h('td', { class: 'fx-num' }, fit.name),
-            h('td', { class: 'fx-dim' }, shortDate(fit.date)),
-            h('td', { class: 'fx-num fx-strong' }, money(fit.totalCents)));
-        })))));
+            h('td', { class: 'fx-num', ...at(0) }, row.number ?? '—'),
+            h('td', { ...at(1) }, row.clientName ?? '—'),
+            h('td', { class: 'fx-dim', ...at(2) }, shortDate(row.issuedOn)),
+            h('td', { class: 'fx-num fx-strong', ...at(3) }, money(row.totalCents)),
+            h('td', { class: 'fx-xi-list__mid', ...at(4) }, row.sure ? icon('check-check', 'Sure') : fitIcon(fit), fit.count > 1 ? h('span', { class: 'fx-dim' }, `${fit.count}`) : null),
+            h('td', { class: 'fx-num', ...at(5) }, fit.name),
+            h('td', { class: 'fx-dim', ...at(6) }, shortDate(fit.date)),
+            h('td', { class: 'fx-num fx-strong', ...at(7) }, money(fit.totalCents)));
+        })))), 'columnTable'));
     drawBar();
   }
 
@@ -259,13 +279,22 @@ export async function renderXeroImport(main, ui) {
     } });
     const more = h('div', {});
     const STATE = { linked: ['check', 'In Flow'], invoice_fits: ['receipt', 'A Flow invoice fits'], job_fits: ['briefcase', 'A job fits'], none: ['circle-dashed', 'Not in Flow'] };
+    const at = phoneAt([
+      { kind: 'status', label: 'State', phone: 'meta' },
+      { kind: 'text', label: 'Number' },
+      { kind: 'client', label: 'Client', phone: 'title' },
+      { kind: 'date', label: 'Date', phone: 'meta' },
+      { kind: 'total', num: true, label: 'Total' },
+      { kind: 'status', label: 'Xero', phone: 'meta' },
+      { kind: 'text', label: 'Flow', phone: 'hide' },
+    ]);
     host.replaceChildren(
       h('div', { class: 'fx-xi__bulk' }, icon('search'), search),
-      h('div', { class: 'fx-xi__scroll' }, h('table', { class: 'fx-table fx-table--rows fx-xi-list' },
+      applyPhoneRule(h('div', { class: 'fx-xi__scroll' }, h('table', { class: 'fx-table fx-table--rows fx-xi-list' },
         h('thead', {}, h('tr', {},
           canAct ? h('th', { class: 'fx-tick-cell' }, all) : null,
           h('th', {}, ''), h('th', {}, 'Number'), h('th', {}, 'Client'), h('th', {}, 'Date'), h('th', { class: 'fx-num' }, 'Total'), h('th', {}, xeroMark()), h('th', {}, flowMark()))),
-        body)),
+        body)), 'columnTable'),
       more);
     let timer = null;
     search.addEventListener('input', () => {
@@ -295,13 +324,13 @@ export async function renderXeroImport(main, ui) {
       } });
       return h('tr', { 'data-state': row.state },
         canAct ? h('td', { class: 'fx-tick-cell' }, box) : null,
-        h('td', { class: 'fx-xi-list__mid' }, row.state === 'linked' || row.state === 'none' ? icon(glyph, label) : h('a', { href: '/xero-import', onclick: (event) => ui.go(event), 'aria-label': label, title: label }, icon(glyph))),
-        h('td', { class: 'fx-num' }, row.number ?? '—'),
-        h('td', {}, row.clientName ?? '—'),
-        h('td', { class: 'fx-dim' }, shortDate(row.issuedOn)),
-        h('td', { class: 'fx-num fx-strong' }, money(row.totalCents)),
-        h('td', {}, pill(row)),
-        h('td', { class: 'fx-num' }, row.state === 'linked' ? go(`/invoices/${row.link.invoiceId}`, row.link.number ?? 'Draft') : ''));
+        h('td', { class: 'fx-xi-list__mid', ...at(0) }, row.state === 'linked' || row.state === 'none' ? icon(glyph, label) : h('a', { href: '/xero-import', onclick: (event) => ui.go(event), 'aria-label': label, title: label }, icon(glyph))),
+        h('td', { class: 'fx-num', ...at(1) }, row.number ?? '—'),
+        h('td', { ...at(2) }, row.clientName ?? '—'),
+        h('td', { class: 'fx-dim', ...at(3) }, shortDate(row.issuedOn)),
+        h('td', { class: 'fx-num fx-strong', ...at(4) }, money(row.totalCents)),
+        h('td', { ...at(5) }, pill(row)),
+        h('td', { class: 'fx-num', ...at(6) }, row.state === 'linked' ? go(`/invoices/${row.link.invoiceId}`, row.link.number ?? 'Draft') : ''));
     };
     async function load() {
       let page;

package/server/ui/xero-usage-model.js

@@ -0,0 +1,106 @@
+// Pure numbers for the Xero usage card. No DOM and no database: the server
+// fills it from counters Flow already keeps, and the card draws it.
+
+export const USAGE_LANES = Object.freeze(['writes', 'sync', 'reads', 'other']);
+const DAY_MS = 24 * 60 * 60 * 1000;
+
+export function startOfUtcDay(ms) {
+  const date = new Date(ms);
+  return Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate());
+}
+
+// 1,000 a day is Xero's Starter plan; 5,000 is Core and above (docs/XERO.md).
+export function appTier(dayLimit) {
+  if (!Number.isFinite(dayLimit) || dayLimit <= 0) return null;
+  return dayLimit >= 5000 ? 'Core' : 'Starter';
+}
+
+// How old a time is, as a short chip: "2 min", "3 h", "4 d".
+export function formatAge(at, now) {
+  if (!at) return null;
+  const ms = Math.max(0, now - new Date(at).getTime());
+  const minutes = Math.round(ms / 60_000);
+  if (minutes < 1) return 'now';
+  if (minutes < 60) return `${minutes} min`;
+  const hours = Math.round(ms / 3_600_000);
+  if (hours < 24) return `${hours} h`;
+  return `${Math.round(ms / DAY_MS)} d`;
+}
+
+export function formatWhen(at) {
+  if (!at) return null;
+  return new Date(at).toLocaleString('en-AU', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' });
+}
+
+function emptyLanes() {
+  return { writes: 0, sync: 0, reads: 0, other: 0 };
+}
+
+function addLane(target, lane, n) {
+  if (USAGE_LANES.includes(lane)) target[lane] += n;
+}
+
+// `hourRows` are { hour, lane, n } for today. `dayRows` are { day, n } over
+// the last 7 UTC days. `limitRows` are 429s { at, problem, lane, task }.
+export function assembleUsage({
+  hourRows = [],
+  dayRows = [],
+  taskRows = [],
+  limitRows = [],
+  governor,
+  warningFraction,
+  now = Date.now(),
+}) {
+  const dayStart = startOfUtcDay(now);
+  const hours = Array.from({ length: 24 }, (_, index) => ({
+    hour: new Date(dayStart + index * 3_600_000).toISOString(),
+    ...emptyLanes(),
+  }));
+  const lanes = emptyLanes();
+  for (const row of hourRows) {
+    const index = Math.round((Date.parse(row.hour) - dayStart) / 3_600_000);
+    const n = Number(row.n) || 0;
+    if (index >= 0 && index < 24) addLane(hours[index], row.lane, n);
+    addLane(lanes, row.lane, n);
+  }
+  const logged = USAGE_LANES.reduce((sum, lane) => sum + lanes[lane], 0);
+  const dayLimit = Number(governor?.dayLimit) || 0;
+  const used = Math.max(Number(governor?.dayCount) || 0, logged);
+  const observed = governor?.observedDayRemaining;
+  const left = Number.isFinite(observed) ? observed : Math.max(0, dayLimit - used);
+  const fraction = Number.isFinite(warningFraction) ? warningFraction : 0.7;
+  const line = dayLimit * fraction;
+
+  const byDay = new Map(dayRows.map((row) => [String(row.day).slice(0, 10), Number(row.n) || 0]));
+  const weekStart = dayStart - 6 * DAY_MS;
+  let warnedDays = 0;
+  const days = Array.from({ length: 7 }, (_, index) => {
+    const day = new Date(weekStart + index * DAY_MS).toISOString().slice(0, 10);
+    const total = byDay.get(day) ?? 0;
+    const warning = dayLimit > 0 && total >= line;
+    if (warning) warnedDays += 1;
+    return { day, total, warning, over: dayLimit > 0 && total >= dayLimit };
+  });
+
+  return {
+    used,
+    dayLimit,
+    left,
+    dayLimitSource: governor?.dayLimitSource ?? 'setting',
+    warningFraction: fraction,
+    warning: dayLimit > 0 && used >= line,
+    tier: appTier(dayLimit),
+    lanes,
+    hours,
+    days,
+    warnedDays,
+    suggestTier: warnedDays >= 2,
+    tasks: taskRows.map((row) => ({ task: row.task, calls: Number(row.n) || 0 })),
+    limited: limitRows.map((row) => ({
+      at: row.at ? new Date(row.at).toISOString() : null,
+      problem: row.problem || null,
+      lane: USAGE_LANES.includes(row.lane) ? row.lane : null,
+      task: row.task || null,
+    })),
+  };
+}

package/server/ui/xero-usage.js

@@ -0,0 +1,133 @@
+// The Xero card's usage picture (Integrations › Xero). Three levels: the ring
+// and chips always, today open, the week closed. Numbers come from
+// GET /api/xero/status. No sentence is needed to read the first level.
+import { h, notice } from '/assets/ui/kit.js';
+import { svg } from '/assets/ui/view-bar.js';
+import { USAGE_LANES, formatAge, formatWhen } from '/assets/ui/xero-usage-model.js';
+
+const LANE_LABEL = { writes: 'Writes', sync: 'Sync', reads: 'Reads', other: 'Other' };
+const num = new Intl.NumberFormat('en-AU');
+const HOUR = 60 * 60 * 1000;
+
+function lanePart(count, whole) {
+  if (!whole) return '0%';
+  return `${(count / whole) * 100}%`;
+}
+
+function ring(usage) {
+  const pct = usage.dayLimit > 0 ? Math.min(100, Math.round((usage.used / usage.dayLimit) * 1000) / 10) : 0;
+  const label = `${num.format(usage.used)} of ${num.format(usage.dayLimit)}`;
+  return h('div', { class: 'fx-xu-ring', role: 'img', 'aria-label': label },
+    svg(`<svg viewBox="0 0 36 36" aria-hidden="true"><circle class="fx-xu-ring__track" cx="18" cy="18" r="15.5" pathLength="100"/><circle class="fx-xu-ring__used" cx="18" cy="18" r="15.5" pathLength="100" stroke-dasharray="${pct} 100"/></svg>`),
+    h('div', { class: 'fx-xu-ring__label' },
+      h('span', { class: 'fx-xu-ring__num' }, num.format(usage.used)),
+      h('span', { class: 'fx-xu-ring__of' }, num.format(usage.dayLimit))));
+}
+
+function chips(status, now) {
+  const stopped = status.calls?.stopped;
+  const connection = !status.connected
+    ? ['mute', 'Off']
+    : stopped && status.calls.all
+      ? ['danger', 'Stopped']
+      : stopped
+        ? ['warn', 'Limited']
+        : ['success', 'Connected'];
+  const age = formatAge(status.freshness?.copyAt, now);
+  return h('div', { class: 'fx-xu__chips' },
+    h('span', { class: 'fx-status', 'data-tone': connection[0] }, connection[1]),
+    status.usage.tier ? h('span', { class: 'fx-chip fx-chip--static' }, status.usage.tier) : null,
+    h('span', { class: 'fx-chip fx-chip--static', title: 'Copy', 'aria-label': age ? `Copy ${age}` : 'Copy' }, age ?? '—'));
+}
+
+function legend() {
+  return h('div', { class: 'fx-xu-legend' }, USAGE_LANES.map((lane) => h('span', {},
+    h('i', { class: 'fx-xu-lane', 'data-lane': lane, 'aria-hidden': 'true' }),
+    LANE_LABEL[lane])));
+}
+
+function hourChart(usage) {
+  const peak = Math.max(1, ...usage.hours.map((hour) => USAGE_LANES.reduce((sum, lane) => sum + hour[lane], 0)));
+  return h('div', { class: 'fx-xu-hours', role: 'img', 'aria-label': 'Calls by hour' }, usage.hours.map((hour) => {
+    const total = USAGE_LANES.reduce((sum, lane) => sum + hour[lane], 0);
+    const stack = h('span', { class: 'fx-xu-hour__stack', style: { '--h': `${(total / peak) * 100}%` } },
+      USAGE_LANES.map((lane) => (hour[lane]
+        ? h('i', { class: 'fx-xu-lane', 'data-lane': lane, style: { '--part': lanePart(hour[lane], total) } })
+        : null)));
+    const when = new Date(hour.hour);
+    stack.title = `${when.getUTCHours()}:00 · ${total}`;
+    return h('span', { class: 'fx-xu-hour' }, stack);
+  }));
+}
+
+function budgetBar(usage) {
+  return h('div', { class: 'fx-xu-budget', role: 'img', 'aria-label': 'Budget by lane' },
+    USAGE_LANES.map((lane) => h('i', {
+      class: 'fx-xu-lane',
+      'data-lane': lane,
+      style: { '--part': lanePart(usage.lanes[lane], usage.dayLimit) },
+      title: `${LANE_LABEL[lane]} ${num.format(usage.lanes[lane])}`,
+    })));
+}
+
+function dot(label, tone, title) {
+  return h('span', { class: 'fx-xu-dot', 'data-tone': tone, title: title || label }, label);
+}
+
+function freshnessDots(freshness, limited, now) {
+  const tone = (at, freshFor) => {
+    if (!at) return 'mute';
+    return now - new Date(at).getTime() <= freshFor ? 'success' : 'warn';
+  };
+  const recentLimit = limited.some((row) => row.at && now - new Date(row.at).getTime() <= 24 * HOUR);
+  return h('div', { class: 'fx-xu-dots' },
+    dot('Webhook', tone(freshness?.webhookAt, 24 * HOUR), formatWhen(freshness?.webhookAt) ?? 'Webhook'),
+    dot('Poll', tone(freshness?.pollAt, 2 * HOUR), formatWhen(freshness?.pollAt) ?? 'Poll'),
+    dot('Nightly', tone(freshness?.nightlyAt, 26 * HOUR), formatWhen(freshness?.nightlyAt) ?? 'Nightly'),
+    dot('429', recentLimit ? 'danger' : 'success', recentLimit ? `${limited.length}` : '429'));
+}
+
+function dayChart(usage) {
+  return h('div', { class: 'fx-xu-days', style: { '--warn': String(usage.warningFraction) }, role: 'img', 'aria-label': 'Calls over 7 days' },
+    h('span', { class: 'fx-xu-days__line', title: 'Warning' }),
+    usage.days.map((day) => {
+      const height = usage.dayLimit > 0 ? Math.min(100, (day.total / usage.dayLimit) * 100) : 0;
+      return h('span', { class: 'fx-xu-day', 'data-warning': String(day.warning), 'data-over': String(day.over), title: `${day.day} · ${num.format(day.total)}` },
+        h('span', { class: 'fx-xu-day__bar' }, h('b', { style: { '--h': `${height}%` } })),
+        h('span', {}, day.day.slice(8)));
+    }));
+}
+
+function rows(items, empty) {
+  if (!items.length) return h('p', { class: 'fx-dim' }, empty);
+  return h('div', { class: 'fx-xu-rows' }, items.map((item) => h('div', { class: 'fx-xu-row' },
+    h('span', {}, item.label),
+    h('b', {}, item.value))));
+}
+
+// The picture for one connected organisation. `status` is GET /api/xero/status.
+export function xeroUsage(status, now = Date.now()) {
+  const usage = status?.usage;
+  if (!usage) return null;
+  const tone = usage.used >= usage.dayLimit && usage.dayLimit > 0 ? 'danger' : usage.warning ? 'warn' : 'ok';
+  return h('section', { class: 'fx-xu', 'data-tone': tone, 'aria-label': 'Usage' },
+    h('div', { class: 'fx-xu__top' }, ring(usage), chips(status, now)),
+    h('details', { class: 'fx-xu__fold', open: true },
+      h('summary', {}, 'Today'),
+      legend(),
+      hourChart(usage),
+      budgetBar(usage),
+      freshnessDots(status.freshness, usage.limited, now)),
+    h('details', { class: 'fx-xu__fold' },
+      h('summary', {}, 'Detail'),
+      dayChart(usage),
+      rows(usage.tasks.map((task) => ({ label: task.task, value: num.format(task.calls) })), '—'),
+      rows(usage.limited.map((row) => ({
+        label: row.problem || '429',
+        value: formatWhen(row.at) ?? '—',
+      })), '—'),
+      h('div', { class: 'fx-xu-row' },
+        h('span', {}, 'Token'),
+        h('b', {}, formatWhen(status.freshness?.tokenRefreshedAt) ?? '—')),
+      usage.suggestTier ? notice(`Calls passed the warning on ${usage.warnedDays} days. A higher Xero tier raises the day's limit.`, 'warn', 'Tier') : null));
+}