@arcforgelabs/flow 2026.10.32 → 2026.10.34

package/server/ui/invoicing.js

@@ -119,6 +119,7 @@ export async function renderInvoiceList(main, ui) {
           const res = await flow(`/api/invoicing/invoices/${path}`, { method: 'POST', body: JSON.stringify(payload()) });
           toast(...done(res));
           state.ticked.clear();
+          seen.clear();
           await load();
           alerts.refresh();
         } catch (error) {
@@ -165,23 +166,56 @@ export async function renderInvoiceList(main, ui) {
     bar.hidden = !parts.length;
   }
 
+  // A tab switch shows at once: the tab is selected, the last list seen for
+  // it (if any) is drawn and dimmed, and the fresh list replaces it. Only the
+  // newest request draws, so quick clicks never show an older tab's list.
+  const seen = new Map();
+  let asked = 0;
   async function load() {
+    const query = new URLSearchParams({ status: state.status, ...(state.q ? { q: state.q } : {}) });
+    const key = String(query);
+    const mine = ++asked;
+    if (seen.has(key)) {
+      delete host.dataset.stale;
+      draw(seen.get(key));
+    } else if (body) {
+      drawTabs(body.counts);
+      bar.hidden = true;
+      host.dataset.stale = '';
+    }
+    host.setAttribute('aria-busy', 'true');
+    let answer;
     try {
-      const query = new URLSearchParams({ status: state.status, ...(state.q ? { q: state.q } : {}) });
-      body = await flow(`/api/invoicing/invoices?${query}`);
+      answer = await flow(`/api/invoicing/invoices?${query}`);
     } catch (error) {
+      if (mine !== asked) return;
+      host.removeAttribute('aria-busy');
+      delete host.dataset.stale;
       host.replaceChildren(notice(error.message, 'danger'));
       return;
     }
-    const shown = new Set(body.invoices.map((i) => i.id));
-    for (const id of state.ticked) if (!shown.has(id)) state.ticked.delete(id);
+    if (mine !== asked) return;
+    seen.set(key, answer);
+    host.removeAttribute('aria-busy');
+    delete host.dataset.stale;
+    draw(answer);
+  }
+
+  function drawTabs(counts) {
     tabs.replaceChildren(...TABS.map(([id, label]) => h('button', {
       type: 'button',
       role: 'tab',
       'aria-selected': String(state.status === id),
-      ...(id === 'problem' && body.counts?.problem ? { 'data-tone': 'danger' } : {}),
-      onclick: () => openTab(id),
-    }, label, h('span', { class: 'fx-tabs__count' }, String(body.counts?.[id] ?? 0)))));
+      ...(id === 'problem' && counts?.problem ? { 'data-tone': 'danger' } : {}),
+      onclick: () => { if (state.status !== id) openTab(id); },
+    }, label, h('span', { class: 'fx-tabs__count' }, String(counts?.[id] ?? 0)))));
+  }
+
+  async function draw(answer) {
+    body = answer;
+    const shown = new Set(body.invoices.map((i) => i.id));
+    for (const id of state.ticked) if (!shown.has(id)) state.ticked.delete(id);
+    drawTabs(body.counts);
     drawBar();
     if (!body.invoices.length) {
       host.replaceChildren(h('p', { class: 'fx-empty' }, state.q
@@ -192,9 +226,13 @@ export async function renderInvoiceList(main, ui) {
     // The invoice page steps through this list, in this order (navBar).
     saveNav({ tab: state.status, q: state.q, ids: body.invoices.map((i) => i.id) });
     const open = (href) => { saveNav({ ...readNav(), scrollY: window.scrollY }); go(href); };
+    const link = (href, label) => h('a', { class: 'fx-strong', href, onclick: (event) => { event.preventDefault(); event.stopPropagation(); open(href); } }, label);
     const ticks = TICKS[state.status];
     const showProblem = state.status === 'problem';
     const created = ['to_check', 'problem', 'ready'].includes(state.status);
+    // An invoice gets its number when it is sent or issued, so only the
+    // Issued and Void tabs show a Number column; the others open on Client.
+    const numbered = !created;
     const boxes = [];
     const tickBox = (invoice) => {
       const box = h('input', {
@@ -218,7 +256,7 @@ export async function renderInvoiceList(main, ui) {
     host.replaceChildren(h('table', { class: 'fx-table fx-table--rows' },
       h('thead', {}, h('tr', {},
         ticks ? h('th', { class: 'fx-tick-cell' }, all) : null,
-        h('th', {}, 'Number'), h('th', {}, 'Client'), h('th', {}, showProblem ? 'Problem' : 'Reference'),
+        numbered ? h('th', {}, 'Number') : null, h('th', {}, 'Client'), h('th', {}, showProblem ? 'Problem' : 'Reference'),
         h('th', {}, created ? 'Created' : 'Issued'), h('th', { class: 'fx-num' }, 'Total'), h('th', {}, 'Status'))),
       h('tbody', {}, body.invoices.map((invoice) => {
         const href = `/invoices/${invoice.id}`;
@@ -226,8 +264,8 @@ export async function renderInvoiceList(main, ui) {
         const view = invoice.status === 'void' ? null : invoice.view;
         return h('tr', { tabindex: '0', onclick: () => open(href), onkeydown: (event) => { if (event.key === 'Enter') open(href); } },
           ticks ? h('td', { class: 'fx-tick-cell', onclick: (event) => event.stopPropagation() }, tickBox(invoice)) : null,
-          h('td', {}, h('a', { class: 'fx-strong', href, onclick: (event) => { event.preventDefault(); event.stopPropagation(); open(href); } }, invoice.number ?? 'Draft')),
-          h('td', {}, invoice.contactName ?? '—'),
+          numbered ? h('td', {}, link(href, invoice.number ?? 'Draft')) : null,
+          h('td', {}, numbered ? (invoice.contactName ?? '—') : link(href, invoice.contactName ?? 'No client')),
           showProblem
             ? h('td', { class: 'fx-problem' }, first?.message ?? '—', invoice.problems.length > 1 ? h('span', { class: 'fx-dim' }, ` +${invoice.problems.length - 1} more`) : null)
             : h('td', { class: 'fx-dim' }, invoice.reference ?? '—'),
@@ -289,12 +327,12 @@ function navBar(ui, id) {
 }
 
 // After a send, the next invoice of the list opens; at its end, the list.
-function openNext(ui, id) {
-  const nav = readNav();
-  const ids = nav?.ids ?? [];
+// The sent invoice stays in the bar's list, so the count holds (2 of 35) and
+// Previous opens it again, now sent. Back reloads the list without it.
+export function openNext(ui, id) {
+  const ids = readNav()?.ids ?? [];
   const at = ids.indexOf(id);
-  const next = at >= 0 ? (ids[at + 1] ?? ids[at - 1]) : null;
-  if (at >= 0) saveNav({ ...nav, ids: ids.filter((other) => other !== id) });
+  const next = at >= 0 ? ids[at + 1] : null;
   if (next) ui.go(`/invoices/${next}`);
   else { sessionStorage.setItem(NAV_BACK, '1'); ui.go('/invoices'); }
 }
@@ -355,6 +393,8 @@ function draftView(invoice, ui, context, redraw) {
   const lines = (invoice?.lines ?? []).map((line) => ({ ...line }));
   if (!lines.length) lines.push({ description: '', quantity: 1, unitAmountCents: null, taxCode: 'GST', priceItemId: null });
   let contact = invoice?.contact ?? null;
+  // Issue invoice waits for a client and a due date (syncIssue, below).
+  let onContact = () => {};
 
   // Client: type to find a customer.
   const clientInput = h('input', { class: 'fx-input', type: 'text', autocomplete: 'off', placeholder: 'Type a client name', value: contact?.name ?? '', 'aria-label': 'Client' });
@@ -376,6 +416,7 @@ function draftView(invoice, ui, context, redraw) {
             contact = c;
             clientInput.value = c.name;
             clientList.hidden = true;
+            onContact();
           },
         }, c.name, c.email ? h('span', { class: 'fx-dim' }, c.email) : null)) : [h('p', { class: 'fx-dim fx-suggest__none' }, 'No client by that name.')]));
         clientList.hidden = false;
@@ -386,7 +427,7 @@ function draftView(invoice, ui, context, redraw) {
   });
   clientInput.addEventListener('blur', () => { setTimeout(() => { clientList.hidden = true; }, 120); });
 
-  const reference = h('input', { class: 'fx-input', type: 'text', value: invoice?.reference ?? '', placeholder: 'Case or order number' });
+  const reference = h('input', { class: 'fx-input', type: 'text', value: invoice?.reference ?? '', placeholder: 'Practitioner - Patient' });
   const dueDate = h('input', { class: 'fx-input', type: 'date', value: invoice?.dueDate ?? '' });
 
   // Lines.
@@ -521,7 +562,7 @@ function draftView(invoice, ui, context, redraw) {
   // With an accounting system on, a ready invoice is sent there: Flow issues
   // it and queues it, the same as Send all ready. With none, Flow issues it
   // and keeps it. A draft that is not ready has no send: mark it ready first.
-  const to = invoice?.sendsTo ?? null;
+  const to = invoice?.sendsTo ?? context.sendsTo ?? null;
   const ready = invoice?.view === 'ready';
   const nextNumber = `${context.organisations[0]?.invoicePrefix ?? ''}${String(context.organisations[0]?.nextInvoiceNumber ?? '').padStart(4, '0')}`;
   const emails = invoice?.sendMode?.mode === 'approve_and_email';
@@ -566,6 +607,28 @@ function draftView(invoice, ui, context, redraw) {
       }
     },
   }, 'Issue invoice') : null;
+  // Issue needs a client and a due date: until both are set it is greyed.
+  const syncIssue = () => {
+    if (!issueButton) return;
+    const missing = [contact ? null : 'a client', dueDate.value ? null : 'a due date'].filter(Boolean);
+    issueButton.disabled = missing.length > 0;
+    issueButton.title = missing.length ? `Choose ${missing.join(' and ')} first.` : '';
+  };
+  onContact = syncIssue;
+  clientInput.addEventListener('input', syncIssue);
+  dueDate.addEventListener('input', syncIssue);
+  dueDate.addEventListener('change', syncIssue);
+  syncIssue();
+
+  // A new invoice can start from a job that has no invoice yet: a quiet
+  // strip above the form says so. Flow drafts it the way the invoicing rules
+  // do (client, Reference, lines) and links it to the job. An invoice with
+  // no job is fine too.
+  const fromJob = isNew && context.canIssue ? h('section', { class: 'fx-fromjob' },
+    h('div', { class: 'fx-fromjob__text' },
+      h('span', { class: 'fx-strong' }, 'Billing a job?'),
+      h('span', { class: 'fx-dim' }, 'Flow fills in the details.')),
+    h('button', { class: 'fx-btn', type: 'button', onclick: () => pickJob(ui) }, 'Choose a job')) : null;
 
   // Mark ready: the draft is saved, then Flow checks it; one with a problem
   // stays a draft. Move to Drafts, on the Status card, undoes it.
@@ -612,8 +675,9 @@ function draftView(invoice, ui, context, redraw) {
       h('div', { class: 'fx-ph__text' },
         h('h1', { class: 'fx-title' }, isNew ? 'New invoice' : ready ? 'Ready invoice' : 'Draft invoice'),
         h('p', { class: 'fx-ph__sub' }, draftNote(to, invoice, ready))),
-      h('div', { class: 'fx-ph__actions' }, saveButton, markReadyButton, sendButton ?? issueButton)),
+      h('div', { class: 'fx-ph__actions' }, saveButton, markReadyButton, isNew ? null : previewButton(ui, invoice.id, 'Shows the saved invoice.'), sendButton ?? issueButton)),
     problems,
+    fromJob,
     h('div', { class: 'fx-invoice__grid' },
       h('div', { class: 'fx-invoice__main' },
         h('section', { class: 'fx-card fx-invoice__head' },
@@ -639,6 +703,39 @@ function draftView(invoice, ui, context, redraw) {
   });
 }
 
+// Preview: the invoice as a PDF in a new tab (GET /api/invoicing/invoices/:id/pdf).
+// The tab opens at once, because a browser blocks a tab opened after a wait,
+// and shows the PDF when it is ready. If Flow cannot make it, the tab closes
+// and a toast says why.
+function previewButton(ui, invoiceId, title = 'Shows the invoice as a PDF.') {
+  const { h, toast } = ui;
+  return h('button', {
+    class: 'fx-btn', type: 'button', title,
+    onclick: async () => {
+      const tab = window.open('', '_blank');
+      if (tab) {
+        tab.document.title = 'Preparing PDF';
+        tab.document.body.textContent = 'Preparing PDF…';
+      }
+      try {
+        const token = await window.Clerk.session?.getToken();
+        const res = await fetch(`/api/invoicing/invoices/${invoiceId}/pdf`, { headers: { Authorization: `Bearer ${token}` } });
+        if (!res.ok) {
+          const body = await res.json().catch(() => ({}));
+          throw new Error(body.error || `HTTP ${res.status}`);
+        }
+        const url = URL.createObjectURL(await res.blob());
+        if (tab) tab.location.href = url;
+        else window.location.assign(url);
+        setTimeout(() => URL.revokeObjectURL(url), 60_000);
+      } catch (error) {
+        tab?.close();
+        toast(`The PDF could not be made. ${error.message}`, 'danger');
+      }
+    },
+  }, 'Preview');
+}
+
 // An issued or void invoice: the document as sent, and what can happen next.
 function issuedView(invoice, ui, context, redraw) {
   const { h, flow, toast } = ui;
@@ -658,10 +755,12 @@ function issuedView(invoice, ui, context, redraw) {
   const organisationId = context.organisations?.[0]?.id;
   const xeroHost = h('div');
   let xeroStatus = null;
+  const send = invoice.status === 'issued' && context.canIssue ? sendToXero(invoice, ui, context) : 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) ?? '');
+    if (xeroStatus && xeroStatus.state !== 'not_sent') showSent(send);
   };
   loadXero();
   // Voiding in Flow never changes Xero: say so while Xero still holds it live.
@@ -677,7 +776,6 @@ function issuedView(invoice, ui, context, redraw) {
       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),
   ] : [];
   return [
     navBar(ui, invoice.id),
@@ -687,7 +785,7 @@ function issuedView(invoice, ui, context, redraw) {
           h('h1', { class: 'fx-title' }, invoice.number),
           h('span', { class: 'fx-status', 'data-tone': STATUS_TONE[invoice.status] }, STATUS_LABEL[invoice.status])),
         h('p', { class: 'fx-ph__sub' }, `${invoice.contact?.name ?? ''} · issued ${showDate(invoice.issueDate)}`)),
-      h('div', { class: 'fx-ph__actions' }, actions)),
+      h('div', { class: 'fx-ph__actions' }, actions, previewButton(ui, invoice.id), send)),
     h('div', { class: 'fx-invoice__grid' },
       h('div', { class: 'fx-invoice__main' },
         h('section', { class: 'fx-card fx-doc' },
@@ -763,6 +861,7 @@ function sendToXero(invoice, ui, context) {
     class: 'fx-btn fx-btn--primary', type: 'button',
     onclick: async () => {
       button.disabled = true;
+      let sent = false;
       try {
         const res = await flow('/api/xero/invoices/push', { method: 'POST', body: JSON.stringify({ organisationId, invoiceIds: [invoice.id] }) });
         const result = res.invoices?.[0];
@@ -772,18 +871,81 @@ function sendToXero(invoice, ui, context) {
         else if (['created', 'reconciled', 'existing'].includes(result?.outcome)) toast(`${invoice.number} is in Xero as a draft.`, 'success');
         else if (result?.outcome === 'already_in_xero') toast(`Xero already has ${invoice.number}.`, 'info');
         else toast(result?.error?.message ?? 'Xero did not take it.', 'danger');
+        sent = ['created', 'reconciled', 'existing', 'already_in_xero'].includes(result?.outcome);
       } catch (error) {
         toast(error.message, 'danger');
       } finally {
-        button.disabled = false;
+        if (sent) showSent(button);
+        else button.disabled = false;
       }
     },
   }, 'Send to Xero');
+  // Sent or on its way (Send, or Send all ready): it cannot be sent twice.
+  if (['queued', 'sent'].includes(invoice.sendState)) {
+    showSent(button);
+    return button;
+  }
   // The preview reads only Flow's copy of Xero: it costs no Xero calls.
   flow('/api/xero/invoices/preview', { method: 'POST', body: JSON.stringify({ organisationId, invoiceIds: [invoice.id] }) })
     .then((res) => {
-      if (res.invoices?.[0]?.sendMode === 'approve_and_email') button.textContent = 'Send to Xero and email';
+      if (res.invoices?.[0]?.sendMode === 'approve_and_email' && !button.disabled) button.textContent = 'Send to Xero and email';
     })
     .catch(() => {});
   return button;
 }
+
+// A sent invoice's Send button stays, greyed, and says it went.
+function showSent(button) {
+  if (!button) return;
+  button.disabled = true;
+  button.textContent = 'Sent to Xero';
+  button.title = 'Flow sent this invoice to Xero.';
+}
+
+// The jobs a new invoice can start from: no invoice yet, newest first.
+const PICKABLE = new Set(['in_work', 'ready', 'pending']);
+
+async function pickJob(ui) {
+  const { h, flow, toast, go } = ui;
+  let jobs;
+  try {
+    jobs = (await flow('/api/invoicing/jobs?limit=500')).jobs.filter((job) => PICKABLE.has(job.view) && !job.invoiceId);
+  } catch (error) {
+    toast(error.message, 'danger');
+    return;
+  }
+  const search = h('input', { class: 'fx-input', type: 'search', placeholder: 'Find a client or practitioner', 'aria-label': 'Find a job' });
+  const rows = jobs.map((job) => {
+    const label = h('label', { class: 'fx-pick__row' },
+      h('input', { type: 'radio', name: 'job', value: job.id, required: true }),
+      h('span', { class: 'fx-pick__main' },
+        h('span', { class: 'fx-strong' }, job.contactName ?? 'No client yet'),
+        h('span', { class: 'fx-dim' }, [job.practitioner, job.shippedOn ? showDate(job.shippedOn) : null].filter(Boolean).join(' · '))),
+      h('span', { class: 'fx-num fx-strong' }, job.totalCents == null ? '—' : formatCents(job.totalCents)));
+    label.dataset.find = `${job.contactName ?? ''} ${job.practitioner ?? ''}`.toLowerCase();
+    return label;
+  });
+  const list = h('div', { class: 'fx-pick', role: 'radiogroup', 'aria-label': 'Jobs' },
+    rows.length ? rows : h('p', { class: 'fx-dim' }, 'Every job has an invoice already.'));
+  search.addEventListener('input', () => {
+    const q = search.value.trim().toLowerCase();
+    for (const row of rows) row.hidden = Boolean(q) && !row.dataset.find.includes(q);
+  });
+  const picked = await ui.dialog({
+    title: 'New invoice from a job',
+    body: h('div', { class: 'fx-pick__body' },
+      h('p', { class: 'fx-dim' }, 'Flow fills in the client, Reference and lines from the invoice rules, and links the invoice to the job.'),
+      search, list),
+    confirm: 'Make draft',
+  });
+  const jobId = picked?.get('job');
+  if (!jobId) return;
+  try {
+    const { invoice } = await flow(`/api/invoicing/jobs/${jobId}/draft`, { method: 'POST', body: '{}' });
+    toast('Draft invoice made from the job.', 'success');
+    go(`/invoices/${invoice.id}`, { replace: true });
+  } catch (error) {
+    const reasons = error.details?.reasons;
+    toast(reasons?.length ? `Not drafted: ${reasons.join('; ')}.` : error.message, 'danger');
+  }
+}

package/server/ui/job-board.js

@@ -91,7 +91,8 @@ function reasonFix(reason, acct) {
   if (reason === 'the work system report is out of date') {
     return { label: 'Out of date', text: 'Flow has no news of this job from the work system for more than a day.', todo: 'Check the work system under Settings, Integrations.' };
   }
-  if (reason === 'the job changed after its invoice was made') return fix('Job changed', 'Compare the invoice with the job, then correct the invoice.');
+  if (reason === 'the job changed after its invoice was made') return fix('Job changed', 'Compare the invoice with the job, then correct the invoice. If only the job changed, use its new lines.');
+  if (reason === 'the job status moved back after its invoice was made') return fix('Status moved back', 'Check the job in the work system. Void or hold its invoice if the work is not done.');
   if (/deleted in /i.test(reason)) return fix('Deleted', 'Check the job in the work system. Void its invoice if it has one.');
   if (/^the accounting evidence is ambiguous/.test(reason)) return fix(`${acct} match unclear`, `Find the invoice for this job in ${acct}, then link it.`);
   if (/^the accounting evidence is conflict/.test(reason)) return fix(`Two ${acct} invoices`, `Find the right invoice for this job in ${acct}. Void the other.`);

package/server/ui/jobs.js

@@ -18,6 +18,7 @@ const ACTIVITY = {
   in_work: 'Put back in work', drafted: 'Draft invoice made', draft_refused: 'Draft invoice refused',
   accounting_checked: 'Checked in the accounting system', payment_recorded: 'Payment recorded', paid: 'Paid in full',
   held: 'Put on hold', review: 'Sent to review', released: 'Hold removed',
+  status_moved_back: 'The job status moved back in the lab system', source_lines_used: 'New job lines used on the draft',
   writeback_sent: 'Status sent to the lab system', writeback_failed: 'Status not sent to the lab system',
   writeback_not_supported: 'The lab system does not take the status',
 };
@@ -58,7 +59,7 @@ export async function renderJobs(main, ui) {
   main.classList.add('fx-main--wide');
   main.append(
     pageHeader('Jobs', { subtitle: 'Every job in the lab system, by its status there.' }),
-    h('div', { class: 'fx-toolbar fx-toolbar--plain' }, search, toggle),
+    h('div', { class: 'fx-toolbar fx-toolbar--plain fx-toolbar--end' }, search, toggle),
     host);
 
   const drawToggle = () => toggle.replaceChildren(...[['board', 'Board'], ['list', 'List']].map(([id, label]) => h('button', {
@@ -72,12 +73,14 @@ export async function renderJobs(main, ui) {
 
   function draw() {
     if (!state.jobs.length) {
+      main.classList.remove('fx-main--board');
       host.replaceChildren(h('div', { class: 'fx-panel fx-empty' },
         h('p', {}, 'No jobs yet. Jobs appear here once the lab system is connected under Integrations.'),
         h('a', { class: 'fx-btn', href: '/invoices/new', onclick: ui.go }, 'Make an invoice by hand')));
       return;
     }
     const shown = state.jobs.filter((job) => matches(job, state.q));
+    main.classList.toggle('fx-main--board', state.layout === 'board');
     host.replaceChildren(state.layout === 'list' ? list(shown) : board(shown));
   }
 
@@ -172,7 +175,24 @@ export async function renderJobs(main, ui) {
     if (!o) return [];
     if (o.invoiceId) {
       const label = o.invoiceStatus === 'draft' ? 'Open draft invoice' : `Open invoice ${o.invoiceNumber ?? ''}`.trim();
-      return [h('a', { class: 'fx-btn', href: `/invoices/${o.invoiceId}`, onclick: (event) => { close(); ui.go(event); } }, label)];
+      const open = h('a', { class: 'fx-btn', href: `/invoices/${o.invoiceId}`, onclick: (event) => { close(); ui.go(event); } }, label);
+      // Only the job changed and the draft is not sent (ledger.js): one tap
+      // puts the job's new lines on Flow's own draft.
+      if (!o.canUseNewLines) return [open];
+      return [h('button', {
+        class: 'fx-btn fx-btn--primary', type: 'button',
+        onclick: async (event) => {
+          event.currentTarget.disabled = true;
+          try {
+            await flow(`/api/invoicing/jobs/${o.id}/use-new-lines`, { method: 'POST', body: '{}' });
+            ui.toast('The draft has the new job lines.', 'success');
+          } catch (error) {
+            ui.toast(error.message, 'danger');
+          }
+          close();
+          await load();
+        },
+      }, 'Use new lines'), open];
     }
     // Flow's own stage: a person marks a job ready to invoice, or an
     // automation does (Settings, Automations).

package/server/ui/monitoring.js

@@ -1,5 +1,6 @@
-// Errors and problem reports from the browser, to the installation's own
-// Sentry project (docs/SENTRY.md). Only while the Sentry integration is on:
+// Errors, problem reports and performance traces from the browser, to the
+// installation's own Sentry project (docs/SENTRY.md). Only while the Sentry
+// integration is on:
 // GET /api/monitoring says so and gives the project's public DSN. The SDK
 // comes from Sentry's CDN, pinned and checked against its integrity hash.
 // With the integration off, nothing loads and there is no "Report a problem".
@@ -26,6 +27,36 @@ export function tagNotify(event) {
   event.tags = { ...event.tags, notify: email ? 'yes' : 'no' };
 }
 
+// A path as a pattern: each id in it becomes ":id", so every invoice's page
+// is one name in a trace. The server names its requests the same way when no
+// route matched (server/core/tracing.js).
+const ID_SEGMENT = /^(\d+|[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}|[0-9a-z_-]*\d[0-9a-z_-]{15,})$/i;
+export function routePattern(path) {
+  const bare = String(path ?? '').replace(/[?#].*$/, '');
+  return bare.split('/').map((part) => (ID_SEGMENT.test(part) ? ':id' : part)).join('/');
+}
+
+// What a trace span keeps: timings, the route, the status. Never a query
+// string (a search can hold a name), a header, a cookie, an address or an
+// email. The person's Flow id stays, as on errors. Used here and by the
+// server (server/integrations/sentry/index.js).
+const DROPPED_ATTRIBUTE = /^(http\.(request|response)\.header\.|client\.|network\.(peer|local)\.|url\.(query|fragment)$|user\.(?!id$))/;
+export function scrubSpan(span) {
+  if (!span) return span;
+  // "GET /api/search?q=…" loses its query; a database span's SQL keeps its "?".
+  const request = /^((?:GET|POST|PUT|PATCH|DELETE) \S*?)[?#]\S*/;
+  if (typeof span.name === 'string') span.name = span.name.replace(request, '$1');
+  if (typeof span.description === 'string') span.description = span.description.replace(request, '$1');
+  const attributes = span.attributes ?? span.data;
+  if (attributes) {
+    for (const key of Object.keys(attributes)) {
+      if (DROPPED_ATTRIBUTE.test(key)) delete attributes[key];
+      else if (typeof attributes[key] === 'string' && /(^|\.)url(\.full)?$|^http\.url$/.test(key)) attributes[key] = attributes[key].replace(/[?#].*$/, '');
+    }
+  }
+  return span;
+}
+
 /** 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');
@@ -51,12 +82,23 @@ export async function startMonitoring({ flow, person }) {
     submitButtonLabel: 'Send report',
     successMessageText: 'Thank you. Your report is sent.',
   })] : [];
+  // Traces: page loads, moves between pages and each click's wait, with the
+  // calls to Flow's server joined to the server's own trace. Only when the
+  // installation set a share above 0 (SENTRY_TRACES_SAMPLE_RATE).
+  const tracesSampleRate = Number(config.tracesSampleRate) || 0;
+  if (tracesSampleRate > 0) {
+    integrations.push(Sentry.browserTracingIntegration({
+      beforeStartSpan: (options) => ({ ...options, name: routePattern(options.name) }),
+    }));
+  }
   Sentry.init({
     dsn: config.dsn,
     environment: config.environment,
     release: config.release ?? undefined,
     sendDefaultPii: false,
     integrations,
+    tracesSampleRate,
+    beforeSendSpan: scrubSpan,
   });
   Sentry.getClient()?.on('beforeSendFeedback', tagNotify);
   // Who reported or met the error, so the lab can follow up.

package/server/ui/routes.js

@@ -20,7 +20,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']);
-const UI_FILES = new Set(['flow.css', 'appearance.js', 'clerk-appearance.js', 'app.js', 'invoicing.js', 'invoice-notes.js', 'invoicing-settings.js', 'automations.js', 'invoice-rules.js', 'line-mappings.js', 'price-list.js', 'jobs.js', 'job-board.js', 'monitoring.js', 'search.js', 'alerts.js', 'flow-mark.svg']);
+const UI_FILES = new Set(['flow.css', 'appearance.js', 'clerk-appearance.js', 'app.js', 'invoicing.js', 'invoice-notes.js', 'invoicing-settings.js', 'automations.js', 'invoice-rules.js', 'line-mappings.js', 'price-list.js', 'custom-fields.js', 'jobs.js', 'job-board.js', 'monitoring.js', 'search.js', 'alerts.js', 'flow-mark.svg']);
 const MAX_AGE = '1h';
 
 // Send one named file from dir. Passing dir as root limits the dotfile check