@arcforgelabs/flow 2026.10.53 → 2026.11.1

package/server/ui/invoicing.js

@@ -1154,20 +1154,31 @@ function draftView(invoice, ui, context, redraw) {
   const sendButton = context.canIssue && to && ready ? h('button', {
     class: 'fx-btn fx-btn--primary', type: 'button',
     onclick: async () => {
-      if (changed() && !(await save())) return;
-      const ok = await ui.dialog({
-        title: `Send this invoice to ${to}?`,
-        body: h('p', {}, `It gets the next number (${nextNumber}). ${sendModeNote(to, invoice.sendMode, 'it')}`),
-        confirm: emails ? 'Send and email' : 'Send',
-      });
-      if (!ok) return;
+      if (sendButton.disabled) return;
+      sendButton.disabled = true;
+      const label = sendButton.textContent;
+      let cancelled = false;
       try {
+        if (changed() && !(await save())) return;
+        const ok = await ui.dialog({
+          title: `Send this invoice to ${to}?`,
+          body: h('p', {}, `It gets the next number (${nextNumber}). ${sendModeNote(to, invoice.sendMode, 'it')}`),
+          confirm: emails ? 'Send and email' : 'Send',
+        });
+        if (!ok) { cancelled = true; return; }
+        sendButton.setAttribute('aria-busy', 'true');
+        sendButton.replaceChildren(h('span', { class: 'fx-spinner fx-spinner--sm', 'aria-hidden': 'true' }), 'Sending…');
         await flow('/api/invoicing/invoices/send-ready', { method: 'POST', body: JSON.stringify({ issueDate: localDate(), invoiceIds: [invoice.id] }) });
         const { invoice: fresh } = await flow(`/api/invoicing/invoices/${invoice.id}`);
         toast(`${fresh.number} is on the way to ${to}.`, 'success');
         openNext(ui, invoice.id);
       } catch (error) {
         toast(error.message, 'danger', { stay: true });
+      } finally {
+        sendButton.disabled = false;
+        sendButton.removeAttribute('aria-busy');
+        sendButton.textContent = label;
+        if (cancelled && sendButton.isConnected && document.activeElement === document.body) sendButton.focus();
       }
     },
   }, emails ? `Send to ${to} and email` : `Send to ${to}`) : null;
@@ -1423,6 +1434,21 @@ function issuedView(invoice, ui, context, redraw) {
     ? h('button', { class: 'fx-btn', type: 'button', onclick: () => act('revise', `${invoice.number} is a draft again.`) }, 'Revise') : null;
   const preview = previewButton(ui, invoice.id);
   actionBar = h('div', { class: 'fx-ph__actions' }, [voidButton, reviseButton, preview, send].filter(Boolean));
+  // The same problem notice as a draft. A matched Xero invoice gets the
+  // same Open in Xero link as the Xero card (go.xero.com, reconcile.js).
+  const found = invoice.problems ?? [];
+  const shorts = found.length && found.every((p) => p.short) ? [...new Set(found.map((p) => p.short))].join(', ') : null;
+  const problemNotice = found.length
+    ? ui.notice([...new Set(found.map((p) => brief(p.message)))].join(' '), 'danger', 'Problem.', { short: shorts })
+    : null;
+  const matched = found.find((p) => /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(p.xero?.invoiceId ?? ''));
+  const openXero = matched ? h('a', {
+    class: 'fx-btn fx-btn--sm fx-btn--ghost',
+    href: `https://go.xero.com/AccountsReceivable/View.aspx?InvoiceID=${encodeURIComponent(matched.xero.invoiceId)}`,
+    target: '_blank',
+    rel: 'noopener',
+  }, 'Open in Xero') : null;
+  const problemRow = problemNotice ? (openXero ? h('div', { class: 'fx-offer' }, problemNotice, openXero) : problemNotice) : null;
   const header = h('header', { class: 'fx-ph' },
     h('div', { class: 'fx-ph__text' },
       h('h1', { class: 'fx-title' }, invoice.number),
@@ -1449,6 +1475,7 @@ function issuedView(invoice, ui, context, redraw) {
     chrome.record,
     chrome.pager,
     header,
+    problemRow,
     h('div', { class: 'fx-invoice__grid' },
       h('div', { class: 'fx-invoice__main' },
         h('section', { class: 'fx-card fx-doc' },

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) };
+}