@arcforgelabs/flow 2026.10.29 → 2026.10.32-beta.1

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

package/server/ui/invoicing.js

@@ -5,6 +5,7 @@
 // are a preview with the same rule (GST 10% per line, rounded half away from
 // zero, server/core/money.js). Data comes from /api/invoicing
 // (server/api/invoicing.js). app.js passes in its shared pieces as `ui`.
+import { alertStrip } from '/assets/ui/alerts.js';
 
 const STATUS_LABEL = { draft: 'Draft', issued: 'Issued', void: 'Void' };
 const STATUS_TONE = { draft: 'info', issued: 'success', void: 'mute' };
@@ -12,7 +13,8 @@ const STATUS_TONE = { draft: 'info', issued: 'success', void: 'mute' };
 // every draft is in one of them. A person marks a checked draft ready; any
 // later change sends it back. An issued invoice that failed to send is a
 // problem.
-const TABS = [['to_check', 'Drafts'], ['problem', 'Problem'], ['ready', 'Ready'], ['issued', 'Issued'], ['void', 'Void']];
+// Ready first: it opens by default, as the drafts most often wait there to send.
+const TABS = [['ready', 'Ready'], ['to_check', 'Drafts'], ['problem', 'Problem'], ['issued', 'Issued'], ['void', 'Void']];
 const VIEW_LABEL = { problem: 'Problem', ready: 'Ready', sending: 'Sending', to_check: 'Draft' };
 const VIEW_TONE = { problem: 'danger', ready: 'success', sending: 'info', to_check: 'info' };
 const EMPTY = {
@@ -26,6 +28,31 @@ const TICKS = { to_check: true, ready: true };
 const money = new Intl.NumberFormat('en-AU', { style: 'currency', currency: 'AUD' });
 export const formatCents = (cents) => money.format((cents ?? 0) / 100);
 
+// Xero's status of an issued invoice, from Flow's copy of Xero (issue #132).
+// A finding (a difference, or a void on one side only) shows as Out of sync.
+const XERO_TONE = {
+  not_sent: 'mute', sending: 'info', not_copied: 'info', draft: 'info',
+  approved: 'success', part_paid: 'success', paid: 'success', voided: 'mute', deleted: 'mute',
+};
+const FIELD_LABEL = { contact: 'Client', subtotal: 'Subtotal', tax: 'GST', total: 'Total', 'line count': 'Lines', items: 'Items', date: 'Date' };
+
+export function xeroTag(ui, status) {
+  const { h } = ui;
+  if (!status) return null;
+  return status.finding
+    ? h('span', { class: 'fx-status', 'data-tone': 'danger', title: status.message }, 'Out of sync with Xero')
+    : h('span', { class: 'fx-status', 'data-tone': XERO_TONE[status.state] ?? 'mute' }, status.label);
+}
+
+const showField = (field, value) => (['subtotal', 'tax', 'total'].includes(field) && Number.isFinite(value) ? formatCents(value) : String(value ?? '—'));
+
+// Xero's status for some invoices, or an empty map while Xero is off.
+async function xeroStatuses(ui, organisationId, invoiceIds) {
+  if (!organisationId || !invoiceIds.length) return new Map();
+  const res = await ui.flow('/api/xero/invoices/status', { method: 'POST', body: JSON.stringify({ organisationId, invoiceIds }) }).catch(() => null);
+  return new Map((res?.invoices ?? []).map((s) => [s.invoiceId, s]));
+}
+
 function gstCents(lineAmountCents) {
   const sign = Math.sign(lineAmountCents);
   const abs = Math.abs(lineAmountCents) * 1000;
@@ -48,22 +75,40 @@ function localDate(date = new Date()) {
 
 const showDate = (iso) => (iso ? new Date(`${iso}T00:00:00`).toLocaleDateString('en-AU', { day: 'numeric', month: 'short', year: 'numeric' }) : '—');
 
+// What happens to a ready invoice in the accounting system, one fact per
+// sentence. It follows the integration's settings: its connection, whether it
+// takes writes, and the send mode on its page.
+export function sendModeNote(to, sendMode) {
+  if (!to) return 'No accounting system is on. Flow keeps each invoice here only.';
+  if (sendMode && !sendMode.connected) return `${to} is not connected. Connect it in Integrations before you send.`;
+  if (sendMode && !sendMode.writesAllowed) return `${to} does not take invoices from Flow yet. Turn this on in Integrations, ${to}.`;
+  const text = sendMode?.mode === 'approve_and_email'
+    ? [`Flow sends each invoice to ${to} as approved.`, `${to} emails it to the customer at once.`]
+    : [`Flow sends each invoice to ${to} as a draft.`, `You approve and send it in ${to}.`];
+  const others = sendMode?.otherCustomers ?? 0;
+  if (others) text.push(`${others} ${others === 1 ? 'customer has' : 'customers have'} a different setting.`);
+  return text.join(' ');
+}
+
 // ── The list ───────────────────────────────────────────────────────────────
 
 export async function renderInvoiceList(main, ui) {
   const { h, flow, pageHeader, notice, go, toast } = ui;
   const saved = sessionStorage.getItem('flow_invoice_tab');
-  const state = { status: TABS.some(([id]) => id === saved) ? saved : 'to_check', q: '', ticked: new Set() };
+  const state = { status: TABS.some(([id]) => id === saved) ? saved : 'ready', q: '', ticked: new Set() };
   const tabs = h('div', { class: 'fx-tabs', role: 'tablist' });
   const search = h('input', { class: 'fx-input fx-search', type: 'search', placeholder: 'Find a number, client or reference', 'aria-label': 'Find an invoice' });
   const bar = h('div', { class: 'fx-sendbar', hidden: true });
   const host = h('div', { class: 'fx-panel' }, h('div', { class: 'fx-skeleton' }));
   const context = await flow('/api/invoicing/context').catch(() => ({ canIssue: false }));
   let body = null;
+  const openTab = (id) => { state.status = id; state.ticked.clear(); sessionStorage.setItem('flow_invoice_tab', id); load(); };
+  const alerts = alertStrip(ui, 'invoices', { onTab: openTab });
   main.append(
     pageHeader('Invoices', {
       actions: [h('a', { class: 'fx-btn fx-btn--primary', href: '/invoices/new', onclick: go }, 'New invoice')],
     }),
+    alerts.element,
     h('div', { class: 'fx-toolbar' }, tabs, search),
     bar,
     host);
@@ -85,6 +130,7 @@ export async function renderInvoiceList(main, ui) {
           toast(...done(res));
           state.ticked.clear();
           await load();
+          alerts.refresh();
         } catch (error) {
           toast(error.message, 'danger');
           el.disabled = false;
@@ -107,7 +153,7 @@ export async function renderInvoiceList(main, ui) {
           : [`${plural(res.marked, 'draft', 'drafts')} ready.`, 'success'])));
       }
     } else if (state.status === 'ready') {
-      parts.push(h('p', { class: 'fx-dim' }, to ? `Each invoice is issued, then goes to ${to}.` : 'Each invoice is issued. No accounting system is on.'));
+      parts.push(h('p', { class: 'fx-dim' }, sendModeNote(to, body.sendMode)));
       const buttons = [];
       if (ticked.length) {
         buttons.push(action(`Back to drafts (${ticked.length})`, 'mark-not-ready', () => ({ invoiceIds: ticked }),
@@ -144,7 +190,7 @@ export async function renderInvoiceList(main, ui) {
       role: 'tab',
       'aria-selected': String(state.status === id),
       ...(id === 'problem' && body.counts?.problem ? { 'data-tone': 'danger' } : {}),
-      onclick: () => { state.status = id; state.ticked.clear(); sessionStorage.setItem('flow_invoice_tab', id); load(); },
+      onclick: () => openTab(id),
     }, label, h('span', { class: 'fx-tabs__count' }, String(body.counts?.[id] ?? 0)))));
     drawBar();
     if (!body.invoices.length) {
@@ -175,6 +221,7 @@ export async function renderInvoiceList(main, ui) {
         drawBar();
       },
     });
+    const statusCells = new Map();
     host.replaceChildren(h('table', { class: 'fx-table fx-table--rows' },
       h('thead', {}, h('tr', {},
         ticks ? h('th', { class: 'fx-tick-cell' }, all) : null,
@@ -193,10 +240,23 @@ export async function renderInvoiceList(main, ui) {
             : h('td', { class: 'fx-dim' }, invoice.job?.caseRef ?? invoice.reference ?? '—'),
           h('td', { class: 'fx-dim' }, showDate(invoice.issueDate ?? invoice.createdAt?.slice(0, 10))),
           h('td', { class: 'fx-num fx-strong' }, formatCents(invoice.totalCents)),
-          h('td', {}, view
-            ? h('span', { class: 'fx-status', 'data-tone': VIEW_TONE[view] }, VIEW_LABEL[view])
-            : h('span', { class: 'fx-status', 'data-tone': STATUS_TONE[invoice.status] }, STATUS_LABEL[invoice.status])));
+          (() => {
+            const cell = h('td', { class: 'fx-status-cell' }, view
+              ? h('span', { class: 'fx-status', 'data-tone': VIEW_TONE[view] }, VIEW_LABEL[view])
+              : h('span', { class: 'fx-status', 'data-tone': STATUS_TONE[invoice.status] }, STATUS_LABEL[invoice.status]));
+            statusCells.set(invoice.id, cell);
+            return cell;
+          })());
       }))));
+    // Issued and void invoices also show Xero's status, from Flow's copy.
+    if (['issued', 'void'].includes(state.status)) {
+      const shownBody = body;
+      const statuses = await xeroStatuses(ui, context.organisations?.[0]?.id, body.invoices.map((i) => i.id));
+      if (shownBody !== body) return;
+      for (const [invoiceId, status] of statuses) {
+        if (status.state !== 'not_sent' || status.finding) statusCells.get(invoiceId)?.append(' ', xeroTag(ui, status));
+      }
+    }
   }
   await load();
 }
@@ -516,10 +576,26 @@ function issuedView(invoice, ui, context, redraw) {
       toast(error.message, 'danger');
     }
   };
+  const organisationId = context.organisations?.[0]?.id;
+  const xeroHost = h('div');
+  let xeroStatus = null;
+  const loadXero = async () => {
+    if (!context.xero) return;
+    xeroStatus = (await xeroStatuses(ui, organisationId, [invoice.id])).get(invoice.id) ?? null;
+    xeroHost.replaceChildren(xeroCard(invoice, ui, context, xeroStatus, loadXero) ?? '');
+  };
+  loadXero();
+  // Voiding in Flow never changes Xero: say so while Xero still holds it live.
+  const voidBody = () => {
+    const live = xeroStatus?.xero && !['VOIDED', 'DELETED'].includes(xeroStatus.xero.status);
+    return h('div', {},
+      h('p', {}, 'The number stays used. A void invoice cannot be issued again.'),
+      live ? h('p', { class: 'fx-problem' }, `Xero still holds it as ${xeroStatus.label.replace(/ in Xero$/, '').toLowerCase()}${xeroStatus.xero.number ? ` (${xeroStatus.xero.number})` : ''}. Flow does not change Xero: void it in Xero too.`) : null);
+  };
   const actions = invoice.status === 'issued' && context.canIssue ? [
     h('button', {
       class: 'fx-btn fx-btn--ghost fx-btn--danger', type: 'button',
-      onclick: () => act('void', `${invoice.number} is void.`, { title: `Void ${invoice.number}?`, body: h('p', {}, 'The number stays used. A void invoice cannot be issued again.'), confirm: 'Void', tone: 'danger' }),
+      onclick: () => act('void', `${invoice.number} is void.`, { title: `Void ${invoice.number}?`, body: voidBody(), confirm: 'Void', tone: 'danger' }),
     }, 'Void'),
     h('button', { class: 'fx-btn', type: 'button', onclick: () => act('revise', `${invoice.number} is a draft again.`) }, 'Revise'),
     sendToXero(invoice, ui, context),
@@ -551,6 +627,7 @@ function issuedView(invoice, ui, context, redraw) {
               h('td', { class: 'fx-num fx-strong' }, formatCents(line.lineAmountCents)))))),
           h('div', { class: 'fx-lines__foot' }, h('span'), totalsBox(ui, invoice)))),
       h('aside', { class: 'fx-invoice__aside' },
+        xeroHost,
         jobCard(ui, invoice.job),
         invoice.versions?.length ? h('section', { class: 'fx-card fx-side-card' },
           h('h3', { class: 'fx-label' }, 'History'),
@@ -560,6 +637,42 @@ function issuedView(invoice, ui, context, redraw) {
   ];
 }
 
+// Xero's copy of this invoice: its status, any difference from what Flow
+// sent, and Mark resolved, which reads Xero's changes and checks again. It
+// never writes to Xero: a person fixes the difference where they choose.
+function xeroCard(invoice, ui, context, status, reload) {
+  const { h, flow, toast } = ui;
+  if (!status || (status.state === 'not_sent' && !status.finding)) return null;
+  const rows = status.differences.map((d) => h('tr', {},
+    h('td', {}, FIELD_LABEL[d.field] ?? d.field),
+    h('td', { class: 'fx-num' }, showField(d.field, d.flow)),
+    h('td', { class: 'fx-num' }, showField(d.field, d.xero))));
+  const resolve = status.finding && context.canIssue ? h('button', {
+    class: 'fx-btn fx-btn--sm', type: 'button',
+    onclick: async () => {
+      resolve.disabled = true;
+      try {
+        const res = await flow(`/api/xero/invoices/${invoice.id}/recheck`, { method: 'POST', body: JSON.stringify({ organisationId: context.organisations[0].id }) });
+        toast(res.resolved ? 'Flow and Xero agree now.' : 'Still different. Fix it in Xero or in Flow, then try again.', res.resolved ? 'success' : 'danger');
+        await reload();
+      } catch (error) {
+        toast(error.message, 'danger');
+        resolve.disabled = false;
+      }
+    },
+  }, 'Mark resolved') : null;
+  return h('section', { class: 'fx-card fx-side-card' },
+    h('h3', { class: 'fx-label' }, 'Xero'),
+    h('div', { class: 'fx-row' }, xeroTag(ui, status), status.xero?.number ? h('span', { class: 'fx-dim' }, status.xero.number) : null),
+    status.finding ? h('p', { class: 'fx-problem' }, status.message) : null,
+    rows.length ? h('table', { class: 'fx-table' },
+      h('thead', {}, h('tr', {}, h('th', {}, ''), h('th', { class: 'fx-num' }, 'Flow sent'), h('th', { class: 'fx-num' }, 'Xero now'))),
+      h('tbody', {}, rows)) : null,
+    h('div', { class: 'fx-row' },
+      status.xero?.url ? h('a', { class: 'fx-btn fx-btn--sm fx-btn--ghost', href: status.xero.url, target: '_blank', rel: 'noopener' }, 'Open in Xero') : null,
+      resolve));
+}
+
 // Send to Xero (POST /api/xero/invoices/push). The customer's send mode
 // (Settings, Invoicing) decides what Xero gets: a draft that a person approves
 // there, or an approved invoice that Xero emails to the customer.

package/server/ui/line-mappings.js

@@ -28,8 +28,9 @@ export function lineMappingSection(ui) {
       return;
     }
     const waiting = labels.filter((l) => l.unmapped > 0);
+    const listLink = row('Price list', 'Your codes and prices, and their links.', h('a', { class: 'fx-btn fx-btn--ghost fx-btn--sm', href: '/price-list', onclick: (event) => ui.go(event) }, 'Open'));
     if (!waiting.length) {
-      body.replaceChildren(row('Every line has a price code', 'Lines from Seazona find their price item by themselves.', h('span', { class: 'fx-dim' }, '')));
+      body.replaceChildren(row('Every line has a price code', 'Lines from Seazona find their price item by themselves.', h('span', { class: 'fx-dim' }, '')), listLink);
       return;
     }
     const options = [h('option', { value: '' }, 'Choose a price item…'),
@@ -53,7 +54,7 @@ export function lineMappingSection(ui) {
       });
       const lines = label.unmapped === 1 ? '1 line waits' : `${label.unmapped} lines wait`;
       return row(label.sample, `${money(label.unitAmountCents)} · ${lines}`, select);
-    }));
+    }), listLink);
   }
   load();
   return section;

package/server/ui/monitoring.js

@@ -16,6 +16,16 @@ function loadScript({ src, integrity }) {
   });
 }
 
+// "Notify me": the form's email field (Sentry's own words) starts empty and
+// is optional. A person who types an address there asks to hear back; Flow
+// tags the report notify=yes, so the support desk sees it on the task.
+// Sentry's form has no tick box of its own; this keeps to its stock options.
+export function tagNotify(event) {
+  if (event?.type !== 'feedback') return;
+  const email = String(event.contexts?.feedback?.contact_email ?? '').trim();
+  event.tags = { ...event.tags, notify: email ? 'yes' : 'no' };
+}
+
 /** Resolves to a function that opens the "Report a problem" form, or null. */
 export async function startMonitoring({ flow, person }) {
   const config = await flow('/api/monitoring');
@@ -30,6 +40,9 @@ export async function startMonitoring({ flow, person }) {
     showBranding: false,
     // Flow already knows who is signed in (setUser below).
     showName: false,
+    // The email field is the opt-in (tagNotify), so it is not filled from
+    // the signed-in person: a key setUser never sets.
+    useSentryUser: { name: 'username', email: 'notify_email' },
     enableScreenshot: true,
     triggerLabel: 'Report a problem',
     formTitle: 'Report a problem',
@@ -45,6 +58,7 @@ export async function startMonitoring({ flow, person }) {
     sendDefaultPii: false,
     integrations,
   });
+  Sentry.getClient()?.on('beforeSendFeedback', tagNotify);
   // Who reported or met the error, so the lab can follow up.
   Sentry.setUser({ id: person.id, email: person.email });
   const feedback = config.feedback ? Sentry.getFeedback() : null;