@arcforgelabs/flow 2026.10.53 → 2026.11.2

package/server/ui/flow.css

@@ -230,6 +230,9 @@ body:is([data-state="off"], [data-state="error"], [data-state="no-access"]) .fx-
   background: var(--t-danger-bg); color: var(--t-text); font-size: 14px;
 }
 .fx-change p { margin: 0; }
+.fx-change__steps { display: grid; gap: 10px; min-width: 0; overflow-wrap: anywhere; }
+.fx-change__steps ol { display: grid; gap: 8px; margin: 0; padding-left: 20px; }
+.fx-change__steps summary { cursor: pointer; }
 .fx-change strong { color: var(--t-danger); }
 .fx-change__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
 .fx-change__acts { display: flex; flex-wrap: wrap; gap: 8px; }
@@ -639,9 +642,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 +661,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"). */
@@ -833,7 +841,7 @@ th:hover > .fx-th-grip::after { background: var(--t-brd-hi); }
    each lane scrolls inside itself (jobs.js sets fx-main--board while the
    board shows). */
 .fx-board { --fx-lane: min(85vw, 272px); display: grid; grid-auto-flow: column; grid-auto-columns: var(--fx-lane); justify-content: start; gap: 12px; align-items: start; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: 4px; }
-.fx-board__col { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; padding: 10px 6px 6px 8px; border-radius: var(--t-radius-lg); background: var(--t-s1); }
+.fx-board__col { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; padding: 10px 6px 6px 8px; border-radius: var(--t-radius-lg); background: transparent; }
 .fx-board__head { display: flex; flex: none; align-items: center; gap: 8px; min-width: 0; padding: 2px 4px 4px 2px; }
 .fx-board__sum { flex: none; margin-left: auto; color: var(--t-dim); font-size: 12px; font-variant-numeric: tabular-nums; }
 .fx-board__cards { display: grid; gap: 8px; align-content: start; min-height: 0; max-height: 70vh; padding-right: 2px; overflow-y: auto; scrollbar-width: thin; }
@@ -855,7 +863,7 @@ th:hover > .fx-th-grip::after { background: var(--t-brd-hi); }
 .fx-fade[data-edge="right"] { inset: 0 0 0 auto; width: 24px; background: linear-gradient(to left, var(--fx-fade), transparent); }
 .fx-fades[data-fade~="top"] > .fx-fade[data-edge="top"], .fx-fades[data-fade~="bottom"] > .fx-fade[data-edge="bottom"],
 .fx-fades[data-fade~="left"] > .fx-fade[data-edge="left"], .fx-fades[data-fade~="right"] > .fx-fade[data-edge="right"] { opacity: 1; }
-.fx-main--board .fx-frame__view { --fx-fade: var(--t-bg); }
+.fx-main--board .fx-frame__view { --fx-fade: var(--t-s1); }
 .fx-board__col.fx-fades { --fx-fade: var(--t-s1); }
 .fx-board__col > .fx-fade[data-edge="bottom"] { border-radius: 0 0 var(--t-radius-lg) var(--t-radius-lg); }
 .fx-frame__body .fx-panel { border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
@@ -864,7 +872,8 @@ th:hover > .fx-th-grip::after { background: var(--t-brd-hi); }
 .fx-frame thead th { position: sticky; top: 0; z-index: 2; }
 .fx-frame__foot { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 6px 12px; border-top: 1px solid var(--fx-line); color: var(--t-dim); font-size: 13px; font-variant-numeric: tabular-nums; }
 .fx-frame__tools { display: flex; align-items: center; gap: 8px; }
-.fx-main--board .fx-frame__body { padding: 12px; background: var(--t-bg); }
+/* One work surface runs through the lanes, gaps and unused board space. */
+.fx-main--board .fx-frame__body { padding: 12px; background: var(--t-s1); }
 @media (min-width: 821px) and (min-height: 560px) {
   .fx-main--frame { height: 100vh; height: 100dvh; padding-bottom: 16px; display: flex; flex-direction: column; }
   .fx-main--frame > * { flex: none; }
@@ -1287,9 +1296,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 +1571,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/invoice-rules.js

@@ -47,6 +47,9 @@ export function ruleSummary(rule, meta) {
 export function rulesSection(ui, title = 'Rules') {
   const { h, flow, toast, notice, dialog, me, settingRow, iconPicker } = ui;
   const disabled = !['owner', 'admin'].includes(me?.person.role);
+  // A Pending invoice opens the exact rule responsible, using this same
+  // conditions/editor UI. Read-only users see the rule, never write controls.
+  const targetRule = new URLSearchParams(location.search).get('rule');
   const section = h('section', { class: 'fx-set' }, h('h2', { class: 'fx-set__title' }, title), h('div', { class: 'fx-skeleton' }));
   let meta;
   let rules = [];
@@ -177,13 +180,25 @@ export function rulesSection(ui, title = 'Rules') {
         if (editors.length === 1) return toast('A rule needs at least one condition.', 'danger');
         editors = editors.filter((e) => e.element !== element);
         element.remove();
+        validateAction();
         return null;
       });
       editors.push(editor);
       list.append(editor.element);
+      validateAction();
       return null;
     };
+    // Draft-only fields cannot hold work before a draft exists. Native form
+    // validation keeps this editor and its choices open instead of a refused PUT.
+    const validateAction = () => {
+      const field = editors.map((e) => meta.fields.find((f) => f.key === e.read().field)).find((f) => f?.draftOnly);
+      action.setCustomValidity(action.value !== 'pending' && field
+        ? `${field.label} checks require Pending, with a note. Choose Pending or remove that condition.` : '');
+    };
+    list.addEventListener('change', validateAction);
+    action.addEventListener('change', validateAction);
     for (const c of draft?.conditions ?? [null]) addCondition(c);
+    validateAction();
     const more = h('button', { class: 'fx-btn fx-btn--ghost fx-btn--sm', type: 'button' }, 'Add condition');
     more.addEventListener('click', () => addCondition());
 
@@ -242,16 +257,22 @@ export function rulesSection(ui, title = 'Rules') {
       open.addEventListener('click', () => edit(rule));
       controls.unshift(open);
     }
-    return row(rule.name, ruleSummary(rule, meta), controls);
+    const element = row(rule.name, ruleSummary(rule, meta), controls);
+    element.setAttribute('role', 'region');
+    element.setAttribute('aria-label', `Rule ${rule.name}`);
+    return element;
   };
 
   function draw() {
-    const add = disabled ? null : h('button', { class: 'fx-btn fx-btn--ghost fx-btn--sm', type: 'button' }, 'Add rule');
+    const shown = targetRule ? rules.filter((rule) => rule.id === targetRule) : rules;
+    const add = disabled || targetRule ? null : h('button', { class: 'fx-btn fx-btn--ghost fx-btn--sm', type: 'button' }, 'Add rule');
     add?.addEventListener('click', () => edit(null));
     section.replaceChildren(
       h('h2', { class: 'fx-set__title' }, title),
       h('p', { class: 'fx-set__hint', style: { margin: '0 0 4px' } }, 'When a rule matches, a ready job waits, is never drafted, or its draft is Pending with the rule\'s note.'),
-      ...(rules.length ? rules.map(rowOf) : [h('p', { class: 'fx-dim' }, 'No rules. Every ready job is drafted.')]),
+      ...(shown.length ? shown.map(rowOf) : [targetRule
+        ? notice('This rule is no longer available. Reopen the invoice to check its remaining problems.', 'danger')
+        : h('p', { class: 'fx-dim' }, 'No rules. Every ready job is drafted.')]),
       h('div', { class: 'fx-rule__footer' }, add,
         h('a', { class: 'fx-dim', href: DOCS, target: '_blank', rel: 'noopener' }, 'How rules work')));
   }

package/server/ui/invoicing.js

@@ -8,7 +8,7 @@
 import { alertStrip } from '/assets/ui/alerts.js';
 import { bulkBar } from '/assets/ui/bulk-bar.js';
 import { draftNote, sendModeNote } from '/assets/ui/invoice-notes.js';
-import { caseNumber } from '/assets/ui/job-board.js';
+import { caseNumber, fixes } from '/assets/ui/job-board.js';
 import { jobChangeReview } from '/assets/ui/job-change.js';
 import { cardRows, rowMenu } from '/assets/ui/kit.js';
 import { isPhone, WIDTHS } from '/assets/ui/mobile.js';
@@ -981,6 +981,20 @@ function draftView(invoice, ui, context, redraw) {
   // item. A check on something this page cannot change (the job's
   // practitioner) marks nothing; the banner says it.
   const problemList = invoice?.problems ?? [];
+  // Dispatch intents to the real editor or shared job comparison, not a
+  // parallel warning-code list. Missing data/unknown intents stay blocked.
+  // Adapter warnings retain their existing owner-specific actions.
+  const hasRuleReview = (p) => p.resolution?.kind === 'rule_review' && Boolean(p.rule);
+  const hasJobHold = (p) => p.resolution?.kind === 'job_hold' && Boolean(invoice?.job?.id)
+    && typeof p.resolution.reason === 'string' && Boolean(p.resolution.reason.trim());
+  const hasJobReview = (p) => p.resolution?.kind === 'job_review' && invoice?.jobChange
+    && Boolean(p.sourceBilling) === Boolean(invoice.jobChange.sourceReview);
+  // The source check runs first. Its Recheck reveals the ordinary job
+  // comparison once the source problem clears; that view is not missing.
+  const deferredJobReview = (p) => p.resolution?.kind === 'job_review'
+    && !p.sourceBilling && Boolean(invoice?.jobChange?.sourceReview);
+  const unavailable = problemList.filter((p) => p.resolution
+    && p.resolution.kind !== 'invoice_edit' && !hasJobReview(p) && !deferredJobReview(p) && !hasRuleReview(p) && !hasJobHold(p));
   const failed = new Set(problemList.flatMap((p) => p.fields ?? []));
   const badLines = new Set(problemList.filter((p) => p.fields?.includes('line_item')).map((p) => p.line));
   const boxes = { reference };
@@ -1146,7 +1160,7 @@ function draftView(invoice, ui, context, redraw) {
   // it and queues it, the same as Send all ready. With none, Flow issues it
   // and keeps it. A Pending draft has no send: fix its problem first.
   const to = invoice?.sendsTo ?? context.sendsTo ?? null;
-  const ready = invoice?.view === 'ready';
+  const ready = invoice?.view === 'ready' && !problemList.length;
   // A lab's rule keeps a non-chargeable draft in Flow: nothing sends or approves it.
   const nonChargeable = invoice?.view === 'non_chargeable';
   const nextNumber = `${context.organisations[0]?.invoicePrefix ?? ''}${String(context.organisations[0]?.nextInvoiceNumber ?? '').padStart(4, '0')}`;
@@ -1154,20 +1168,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;
@@ -1199,8 +1224,8 @@ function draftView(invoice, ui, context, redraw) {
   const syncIssue = () => {
     if (!issueButton) return;
     const missing = [contact ? null : 'a client', dueDate.value ? null : 'a due date'].filter(Boolean);
-    issueButton.disabled = missing.length > 0 || Boolean(invoice?.jobChange);
-    issueButton.title = invoice?.jobChange ? 'Fix the problem first.' : missing.length ? `Choose ${missing.join(' and ')} first.` : 'Gives it the next number and locks it. Nothing is sent.';
+    issueButton.disabled = missing.length > 0 || Boolean(invoice?.jobChange) || problemList.length > 0;
+    issueButton.title = invoice?.jobChange || problemList.length ? 'Fix the problem first.' : missing.length ? `Choose ${missing.join(' and ')} first.` : 'Gives it the next number and locks it. Nothing is sent.';
   };
   onContact = syncIssue;
   clientInput.addEventListener('input', syncIssue);
@@ -1225,7 +1250,7 @@ function draftView(invoice, ui, context, redraw) {
   const jobChange = invoice?.jobChange ?? null;
   // The job changed after the invoice was made: its own banner shows what
   // changed. Other problems stay one line.
-  const otherProblems = (invoice?.problems ?? []).filter((p) => !(jobChange && p.code === 'job_review'));
+  const otherProblems = problemList.filter((p) => !hasJobReview(p));
   const offer = otherProblems.find((p) => ['xero_contact_missing', 'xero_contact_ambiguous'].includes(p.code) && (p.offerLink || p.offerCreate));
   // A phone shows each problem's short name ("Client not in Xero") on one line.
   const shorts = otherProblems.every((p) => p.short) ? [...new Set(otherProblems.map((p) => p.short))].join(', ') : null;
@@ -1240,10 +1265,32 @@ function draftView(invoice, ui, context, redraw) {
       done: async () => redraw((await flow(`/api/invoicing/invoices/${invoice.id}`)).invoice),
     })
     : [];
+  // Every matching rule links to its own conditions and existing controls,
+  // including custom rules. The target enforces read-only roles itself.
+  const ruleActions = [...new Map(problemList.filter(hasRuleReview).map((p) => [p.rule, p])).values()]
+    .map((p) => h('a', { class: 'fx-btn fx-btn--sm',
+      href: `/invoicing-settings/invoices?rule=${encodeURIComponent(p.rule)}`,
+      onclick: (event) => go(event),
+    }, `Review ${p.short ?? 'rule'}`));
+  // Non-change holds use the Jobs workflow's existing instructions, not a
+  // comparison that does not exist. Reading them never releases the hold.
+  const holdSteps = fixes({ view: 'review_required', holdState: 'review',
+    reasons: [...new Set(problemList.filter(hasJobHold).map((p) => p.resolution.reason))] });
+  const holdReview = holdSteps.length ? h('section', { 'aria-label': 'Job hold review' },
+    ...holdSteps.map((step) => h('p', {}, step.todo)),
+    invoice.job.link?.url ? h('a', { class: 'fx-btn fx-btn--sm', href: invoice.job.link.url, target: '_blank', rel: 'noopener' },
+      `Open in ${invoice.job.systemName ?? 'work system'}`)
+      : h('p', {}, `The source link is unavailable. Check job ${invoice.job.sourceJobRef ?? ''} in the work system, or ask an administrator to restore its link.`),
+    h('p', {}, deleteButton
+      ? 'If this unissued draft is no longer needed, use Delete. It remains Pending while the job is in review.'
+      : 'Ask an owner or administrator to review this draft. It remains Pending while the job is in review.')) : null;
   const problems = [
+    holdReview,
     // Accepting changes the draft for the business: owners and admins only.
     jobChange ? jobChangeReview(ui, jobChange, { money: formatCents, canAccept: context.canIssue, unsaved: changed, done: redraw }) : null,
-    problemNotice ? (clientActions.length ? h('div', { class: 'fx-offer' }, problemNotice, ...clientActions) : problemNotice) : null,
+    problemList.some(deferredJobReview) ? notice('The job also changed after this invoice was made. Resolve the source amount problem first. Select Recheck, then review the remaining job changes.', 'danger') : null,
+    unavailable.length ? notice('The resolution view is unavailable. Ask an administrator to restore it, then reopen this invoice. It remains Pending.', 'danger', 'Cannot resolve.') : null,
+    problemNotice ? (clientActions.length || ruleActions.length ? h('div', { class: 'fx-offer' }, problemNotice, ...clientActions, ...ruleActions) : problemNotice) : null,
   ];
   // A red field names the banner as its reason (for a screen reader).
   const banner = problemNotice;
@@ -1423,6 +1470,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 +1511,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/job-board.js

@@ -126,7 +126,16 @@ function reasonFix(reason) {
 // system's) as a job fix. Flow's own invoice problems keep their words. A
 // problem an accounting system found stays on the invoice page; the job only
 // says that its invoice needs a fix.
+function ruleFix(problem) {
+  const supported = problem.resolution?.kind === 'rule_review' && Boolean(problem.rule);
+  return { label: problem.short ?? 'Stopped by a rule', text: sentence(problem.message),
+    todo: supported ? 'Review this rule and the job facts, then reopen the job to check again.' : 'The rule resolution is unavailable. Reopen this job after an administrator restores it.',
+    go: supported ? 'rule' : null, rule: problem.rule ?? null,
+  };
+}
+
 function draftFix(problem) {
+  if (problem.resolution?.kind === 'rule_review') return ruleFix(problem);
   const code = problem.code ?? '';
   const fix = (label, todo) => ({ label, text: sentence(problem.message ?? label), todo, go: 'invoice' });
   if (code === 'no_lines') return fix('No lines', 'Open the invoice and add the lines.');
@@ -141,7 +150,7 @@ function draftFix(problem) {
 // Where a fix's link goes: Flow's invoice, the job in the work system, a
 // Flow settings page, `review`: the job's Review sidecar, or `choose`: Make
 // invoice and Link invoice buttons (jobs.js draws them).
-export const GO = ['invoice', 'work', 'price-list', 'invoicing-settings', 'integrations', 'review', 'choose'];
+export const GO = ['invoice', 'work', 'price-list', 'rule', 'integrations', 'review', 'choose'];
 
 // What a person must fix on a job, in order: [{ label, text, todo, go }];
 // `todo` is null when the buttons are the instruction.
@@ -152,11 +161,7 @@ export function fixes(o) {
   if (invoiceStage(o) !== 'problem') return [];
   const found = [];
   if (PROBLEM_VIEWS.includes(o.view)) found.push(...(o.reasons ?? []).map((r) => reasonFix(r)));
-  if (o.view === 'ready') {
-    found.push(...(o.waitingFor ?? []).filter(isRule).map((r) => ({
-      label: 'Stopped by a rule', text: sentence(r), todo: 'Draft the invoice here, or change the rule under Settings, Rules.', go: 'invoicing-settings',
-    })));
-  }
+  found.push(...(o.waitingRules ?? []).map(ruleFix));
   if (o.invoiceStatus === 'void') {
     found.push({ label: 'Invoice void', text: 'The invoice for this job is void.', todo: 'Make a new invoice, or close the job.', go: 'invoice' });
   }
@@ -164,7 +169,7 @@ export function fixes(o) {
   found.push(...(o.invoiceProblems ?? []).filter((p) => !(held && p.code === 'job_review')).map((p) => draftFix(p)));
   const seen = new Set();
   return found.filter((f) => {
-    const key = `${f.label}\u0000${f.text}`;
+    const key = `${f.rule ?? ''}\u0000${f.label}\u0000${f.text}`;
     if (seen.has(key)) return false;
     seen.add(key);
     return true;

package/server/ui/job-change.js

@@ -16,6 +16,16 @@ const lineFull = (line, money) => `${lineText(line)} · ${line.quantity} × ${li
 // [{ field, was, now }] in plain words. `money` formats cents.
 export function changeRows(change, money) {
   const rows = [];
+  if (change.sourceReview) {
+    const { sourceTotals, reconstructed } = change.sourceReview;
+    return [['Subtotal', 'subtotalCents'], ['GST', 'taxCents'], ['Total', 'totalCents']].map(([field, key]) => {
+      const source = sourceTotals?.[key];
+      const flow = reconstructed[key];
+      const delta = source == null || flow == null ? null : flow - source;
+      return { field, was: source == null ? 'Not supplied' : money(source), now: flow == null ? 'Unknown' : money(flow),
+        difference: delta == null ? 'Unknown' : delta === 0 ? 'Same' : `${delta > 0 ? '+' : '−'}${money(Math.abs(delta))}`, num: true };
+    });
+  }
   if (change.contact) rows.push({ field: 'Client', was: change.contact.was ?? '—', now: change.contact.now ?? '—' });
   for (const line of change.lines ?? []) {
     const at = `Line ${line.position}`;
@@ -36,6 +46,7 @@ export function changeRows(change, money) {
 // The sentence after "Problem." One fact per sentence.
 export function changeSummary(change, rowCount) {
   const system = change.systemName ?? 'the work system';
+  if (change.sourceReview) return 'Check the source invoice amounts.';
   const count = `${rowCount} ${rowCount === 1 ? 'change' : 'changes'}.`;
   if (change.canAdopt) return `Changed in ${system}. ${count}`;
   if (change.sent) return `Changed in ${system} after sending. ${count}`;
@@ -48,44 +59,73 @@ export function jobChangeBanner(ui, change, { money, onAccept = null, onRecheck
   const { h } = ui;
   const system = change.systemName ?? 'the work system';
   const rows = changeRows(change, money);
-  const order = change.sourceInvoiceRef ? `Order #${change.sourceInvoiceRef}` : null;
+  const source = change.sourceReview;
+  const order = change.sourceInvoiceRef ? `${source ? 'Invoice' : 'Order'} #${change.sourceInvoiceRef}` : null;
   const link = change.link
     ? h('a', {
       class: 'fx-btn fx-btn--sm', href: change.link.url, target: '_blank', rel: 'noopener noreferrer',
       title: change.link.exact ? `Opens this job in ${system}.` : `Opens ${system}. Find ${order ?? 'the job'} there.`,
-    }, `Open in ${system} ↗`)
+    }, source ? (change.link.exact ? `Open job in ${system} ↗` : `Open ${system} ↗`) : `Open in ${system} ↗`)
     : null;
   const accept = change.canAccept && onAccept
     ? h('button', { class: 'fx-btn fx-btn--sm fx-btn--primary', type: 'button', 'data-action': 'accept', title: `This invoice takes the Now in ${system} column.`, onclick: onAccept }, 'Accept change')
     : null;
-  const recheck = onRecheck
+  const recheck = onRecheck && change.canRecheck !== false
     ? h('button', {
-      class: 'fx-btn fx-btn--sm fx-btn--icon fx-change__recheck', type: 'button', title: `Check ${system} again`, 'aria-label': `Check ${system} again`,
+      class: `fx-btn fx-btn--sm${source ? '' : ' fx-btn--icon fx-change__recheck'}`, type: 'button', title: `Read this job from ${system} again. Nothing is sent.`, 'aria-label': source ? 'Recheck' : `Check ${system} again`,
       onclick: async (event) => {
         const button = event.currentTarget;
         button.disabled = true;
         button.classList.add('is-busy');
-        try { await onRecheck(); } finally { button.disabled = false; button.classList.remove('is-busy'); }
+        button.setAttribute('aria-busy', 'true');
+        try { await onRecheck(); } finally { button.disabled = false; button.classList.remove('is-busy'); button.removeAttribute('aria-busy'); }
       },
-    }, h('span', { class: 'fx-lucide', style: '--icon: url(/assets/icons/refresh-cw.svg)', 'aria-hidden': 'true' }))
+    }, source ? 'Recheck' : h('span', { class: 'fx-lucide', style: '--icon: url(/assets/icons/refresh-cw.svg)', 'aria-hidden': 'true' }))
     : null;
   const body = h('tbody', {});
+  const cell = (area, label, value, num) => h('td', {
+    class: num ? 'fx-num' : '', ...(source ? { 'data-area': area, 'data-label': label } : {}),
+  }, value);
   const draw = (all) => body.replaceChildren(...(all ? rows : rows.slice(0, FIRST_ROWS)).map((row) => h('tr', {},
-    h('th', { scope: 'row' }, row.field),
-    h('td', { class: `fx-change__was${row.num ? ' fx-num' : ''}` }, row.was),
-    h('td', { class: `fx-change__now${row.num ? ' fx-num' : ''}` }, row.now))));
+    source ? cell('field', 'Amount', row.field) : h('th', { scope: 'row' }, row.field),
+    source ? cell('source', 'Source invoice', row.was, true) : h('td', { class: `fx-change__was${row.num ? ' fx-num' : ''}` }, row.was),
+    source ? cell('flow', 'Flow job lines', row.now, true) : h('td', { class: `fx-change__now${row.num ? ' fx-num' : ''}` }, row.now),
+    source ? cell('difference', 'Difference', row.difference, true) : null)));
   draw(false);
+  const table = h('table', { class: 'fx-change__table' },
+    h('thead', {}, h('tr', {}, h('th', { scope: 'col' }, source ? 'Amount' : 'Field'),
+      h('th', { scope: 'col' }, source ? 'Source invoice' : 'Was'),
+      h('th', { scope: 'col' }, source ? 'Flow job lines' : `Now in ${system}`),
+      source ? h('th', { scope: 'col' }, 'Difference') : null)), body);
+  if (source) ui.cardRows(table, { areas: ['field field', 'source flow', 'difference difference'], columns: 'repeat(2, minmax(0, 1fr))' });
+  const inFlow = (href, label) => h('a', { class: 'fx-btn fx-btn--sm', href, onclick: (event) => ui.go(event) }, label);
+  const sourceSteps = source ? h('div', { class: 'fx-change__steps' },
+    h('p', { class: 'fx-change__note' }, `Source invoice: ${change.sourceInvoiceRef ?? 'Not supplied'}.${change.caseRef ? ` Case: ${change.caseRef}.` : ''}`),
+    h('p', {}, 'Flow cannot tell which amount is wrong.'),
+    h('p', { class: 'fx-change__note' }, 'Difference = Flow job lines minus source invoice. Do not divide a source invoice total between jobs.'),
+    source.unknownTaxLines.length ? h('p', {}, `Tax is unknown on ${source.unknownTaxLines.map((line) => `line ${line.position}${line.description ? ` (${line.description})` : ''}`).join(', ')}. Flow cannot calculate GST or the total.`) : null,
+    h('ol', {},
+      h('li', {}, change.link?.exact ? `Open the job in ${system}, then check its linked invoice.` : `Open ${system}${change.link ? ' with its link' : ' separately'}. Find ${change.caseRef ? `case ${change.caseRef}` : order ?? 'the linked job'}, then check the source invoice.`),
+      h('li', {}, 'Check each price, quantity, discount and tax value against the source facts.'),
+      h('li', {}, 'Correct only facts you can verify. Do not choose tax only to remove this difference.'),
+      h('li', {}, 'If a Flow mapping is wrong, correct it in Price codes or Price list.'),
+      h('li', {}, change.canRecheck === false ? 'Ask an administrator to restore the source connection, then return here.' : 'Return here and select Recheck. Flow reads the source again. It does not send this invoice.')),
+    h('div', { class: 'fx-change__acts' }, inFlow('/invoicing-settings/price-codes', 'Price codes'), inFlow('/price-list', 'Price list')),
+    change.canRecheck === false ? h('p', {}, `Flow cannot read this job from ${system}.`) : null,
+    h('details', {}, h('summary', {}, 'Saved invoice'),
+      h('p', {}, 'These saved Flow amounts do not change when you recheck.'),
+      h('dl', { class: 'fx-facts' }, [['Subtotal', 'subtotalCents'], ['GST', 'taxCents'], ['Total', 'totalCents']].flatMap(([label, key]) => [h('dt', {}, label), h('dd', {}, money(source.savedInvoice[key]))])),
+      change.seenAt ? h('p', { class: 'fx-change__note' }, `Last source report: ${new Date(change.seenAt).toLocaleString('en-AU')}.`) : null)) : null;
   const more = rows.length > FIRST_ROWS
     ? h('button', { class: 'fx-btn fx-btn--ghost fx-btn--sm', type: 'button', onclick: (event) => { draw(true); event.currentTarget.remove(); } }, `Show all ${rows.length}`)
     : null;
-  return applyPhoneRule(h('section', { class: 'fx-change', role: 'alert' },
+  return applyPhoneRule(h('section', { class: 'fx-change', role: 'alert', 'aria-label': source ? 'Source invoice comparison' : 'Job comparison' },
     h('div', { class: 'fx-change__head' },
       h('p', {}, h('strong', {}, 'Problem.'), ' ', changeSummary(change, rows.filter((row) => row.field !== 'Total').length)),
       h('div', { class: 'fx-change__acts' }, link, accept, recheck)),
-    !change.link && order ? h('p', { class: 'fx-change__note' }, `Find ${order} in ${system} to fix it there.`) : null,
-    rows.length ? h('div', { class: 'fx-change__scroll' }, h('table', { class: 'fx-change__table' },
-      h('thead', {}, h('tr', {}, h('th', { scope: 'col' }, 'Field'), h('th', { scope: 'col' }, 'Was'), h('th', { scope: 'col' }, `Now in ${system}`))),
-      body)) : null,
+    !source && !change.link && order ? h('p', { class: 'fx-change__note' }, `Find ${order} in ${system} to fix it there.`) : null,
+    rows.length ? h('div', { class: 'fx-change__scroll' }, table) : null,
+    sourceSteps,
     more), 'jobChangeBanner');
 }
 
@@ -114,9 +154,17 @@ export function jobChangeReview(ui, change, { money, canAccept = false, unsaved
     },
     // Reads this one job from the work system again, then every check runs.
     onRecheck: async () => {
+      if (unsaved()) {
+        toast('Save or discard your changes before Recheck.', 'danger');
+        return;
+      }
       try {
         const res = await flow(`/api/invoicing/jobs/${change.jobId}/recheck`, { method: 'POST', body: '{}' });
-        toast(res.invoice?.jobChange ? `Still changed in ${system}.` : 'Fixed. It matches now.', res.invoice?.jobChange ? 'danger' : 'success');
+        const pending = Boolean(res.invoice?.jobChange || res.invoice?.problems?.length);
+        const cached = res.outcome === 'fresh';
+        toast(cached ? `No new source read. Try again in ${res.retryAfterSeconds ?? 10} seconds.`
+          : pending ? 'Still pending. Check the comparison and the remaining problems.'
+            : 'Source check complete. No invoice problem remains.', cached ? 'info' : pending ? 'danger' : 'success');
         if (res.invoice) await done(res.invoice);
       } catch (error) {
         toast(error.message, 'danger');

package/server/ui/jobs.js

@@ -1136,7 +1136,7 @@ export async function renderJobs(main, ui) {
       ? link({ href: `/invoices/${o.invoiceId}`, onclick: (event) => { close(); ui.go(event); } },
         `${o.invoiceStatus === 'draft' ? 'Draft' : 'Invoice'} ${o.invoiceNumber ?? ''}`.trim() + (stage ? ` · ${INVOICE_STAGES[stage]}` : ''))
       : choose ? h('span', { class: 'fx-task__none' }, svg(WARN_ICON), 'Needs invoice')
-        : stage ? INVOICE_STAGES[stage] : o ? 'Not ready to invoice' : 'No invoice yet';
+        : stage === 'drafted' ? 'Not drafted' : stage ? INVOICE_STAGES[stage] : o ? 'Not ready to invoice' : 'No invoice yet';
     const rest = found.filter((f) => f.go !== 'choose');
     // What to fix: one chip a problem, beside the stage, so the panel keeps
     // one layout with or without a fix. A chip is a toggle: a click opens
@@ -1181,7 +1181,7 @@ export async function renderJobs(main, ui) {
     }
     // Each fix's link: Flow's own invoice, the job in the work system, or
     // the Flow page where the fix is made (job-board.js GO).
-    function fixLink(go, tip = null) {
+    function fixLink(go, tip = null, rule = null) {
       const button = (icon, text, attrs) => h(attrs.href ? 'a' : 'button', {
         class: 'fx-btn fx-btn--sm fx-btn--primary fx-task__fixgo', title: tip, ...(attrs.href ? {} : { type: 'button' }), ...attrs,
       }, lucide(h, icon), text);
@@ -1189,7 +1189,7 @@ export async function renderJobs(main, ui) {
       if ((go === 'review' || go === 'invoice') && o?.invoiceId) return inFlow('file-text', `/invoices/${o.invoiceId}`, 'Invoice');
       if (go === 'work' && job.link?.url) return button('external-link', system, { href: job.link.url, target: '_blank', rel: 'noopener' });
       if (go === 'price-list') return inFlow('tag', '/price-list', 'Price list');
-      if (go === 'invoicing-settings') return inFlow('list-checks', '/invoicing-settings', 'Rules');
+      if (go === 'rule' && rule) return inFlow('list-checks', `/invoicing-settings/invoices?rule=${encodeURIComponent(rule)}`, 'Review rule');
       if (go === 'integrations' && ui.me?.person?.role === 'owner') return inFlow('plug', '/integrations', 'Integrations');
       return null;
     }
@@ -1230,7 +1230,7 @@ export async function renderJobs(main, ui) {
         return h('section', { class: 'fx-task__fixitem', 'aria-label': f.label }, reviewBody);
       }
       return h('section', { class: 'fx-task__fixitem', 'aria-label': f.label },
-        h('strong', {}, f.label), h('p', {}, f.text), f.todo ? h('p', { class: 'fx-dim' }, f.todo) : null, fixLink(f.go));
+        h('strong', {}, f.label), h('p', {}, f.text), f.todo ? h('p', { class: 'fx-dim' }, f.todo) : null, fixLink(f.go, null, f.rule));
     }
     const sideButton = h('button', {
       class: 'fx-btn fx-btn--ghost fx-btn--icon', type: 'button', 'aria-label': 'Side panel', title: 'Side panel', 'aria-pressed': 'false',

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';