@arcforgelabs/flow 2026.10.41 → 2026.10.43

package/server/ui/invoicing.js

@@ -9,7 +9,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 { jobChangeBanner } from '/assets/ui/job-change.js';
+import { jobChangeReview } from '/assets/ui/job-change.js';
 import { findBox } from '/assets/ui/view-bar.js';
 
 // The tabs, left to right (server/api/invoicing.js, TABS): Pending (a
@@ -201,7 +201,7 @@ export async function renderInvoiceList(main, ui) {
           });
           if (!ok) return;
           await post('send-ready', { issueDate: localDate(), invoiceIds: ticked },
-            (res) => [`${to ? `${res.issued} on the way to ${to}.` : `${res.issued} approved.`}${res.remaining ? ` ${res.remaining} more stay in Ready: tick them and press again.` : ''}`, 'success']);
+            (res) => [`${to ? `${res.issued} on the way to ${to}.` : `${res.issued} approved.`}${res.held ? ` ${res.held} failed a check and went to Pending.` : ''}${res.remaining ? ` ${res.remaining} more stay in Ready: tick them and press again.` : ''}`, res.held ? 'info' : 'success']);
         },
       });
     }
@@ -836,15 +836,12 @@ function draftView(invoice, ui, context, redraw) {
   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;
+  // A new invoice can start from a job that has no invoice yet: a button in
+  // the header. 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('button', { class: 'fx-btn fx-btn--ghost', type: 'button', onclick: () => pickJob(ui) }, 'From a job') : null;
 
   // A draft with no problem is in Ready by itself; one with a problem is
   // Pending. A changed job is fixed at its source or accepted here.
@@ -853,47 +850,18 @@ function draftView(invoice, ui, context, redraw) {
   // changed. Other problems stay one line.
   const otherProblems = (invoice?.problems ?? []).filter((p) => !(jobChange && p.code === 'job_review'));
   const problems = [
-    jobChange ? jobChangeBanner(ui, jobChange, {
-      money: formatCents,
-      // Accepting changes the draft for the business: owners and admins only.
-      onAccept: !context.canIssue ? null : async () => {
-        const system = jobChange.systemName;
-        const lost = [jobChange.outcome === 'conflict' ? 'Your own line changes here are replaced.' : null, changed() ? 'Unsaved changes are lost.' : null].filter(Boolean);
-        if (lost.length) {
-          const ok = await ui.dialog({ title: 'Accept change?', body: h('p', {}, lost.join(' ')), confirm: 'Accept change' });
-          if (!ok) return;
-        }
-        try {
-          const res = await flow(`/api/invoicing/jobs/${jobChange.jobId}/use-new-lines`, { method: 'POST', body: JSON.stringify({ accept: true }) });
-          toast(`Matches ${system}.${res.invoice.view === 'ready' ? ' In Ready.' : ''}`, 'success');
-          redraw(res.invoice);
-        } catch (error) {
-          toast(error.message, 'danger');
-        }
-      },
-      // Reads this one job from the work system again, then every check runs.
-      onRecheck: async () => {
-        try {
-          const res = await flow(`/api/invoicing/jobs/${jobChange.jobId}/recheck`, { method: 'POST', body: '{}' });
-          toast(res.invoice?.jobChange ? `Still changed in ${jobChange.systemName}.` : 'Fixed. It matches now.', res.invoice?.jobChange ? 'danger' : 'success');
-          if (res.invoice) redraw(res.invoice);
-        } catch (error) {
-          toast(error.message, 'danger');
-        }
-      },
-    }) : null,
+    // 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,
     otherProblems.length ? notice(otherProblems.map((p) => p.message).join(' '), 'danger', 'Problem.') : null,
   ];
 
   return [
     navBar(ui, invoice),
-    h('header', { class: 'fx-ph' },
-      h('div', { class: 'fx-ph__text' },
-        h('h1', { class: 'fx-title' }, isNew ? 'New invoice' : ready ? 'Ready invoice' : 'Pending invoice'),
-        h('p', { class: 'fx-ph__sub' }, draftNote(to, invoice, ready))),
-      h('div', { class: 'fx-ph__actions' }, isNew ? null : previewButton(ui, invoice.id, 'Shows the saved invoice.'), saveButton, sendButton ?? issueButton)),
+    ui.pageHeader(isNew ? 'New invoice' : ready ? 'Ready invoice' : 'Pending invoice', {
+      actions: [fromJob, isNew ? null : previewButton(ui, invoice.id, 'Shows the saved invoice.'), saveButton, sendButton ?? issueButton].filter(Boolean),
+    }),
+    draftNote(to, invoice) ? ui.notice(draftNote(to, invoice), 'warn') : null,
     ...problems,
-    fromJob,
     h('div', { class: 'fx-invoice__grid' },
       h('div', { class: 'fx-invoice__main' },
         h('section', { class: 'fx-card fx-invoice__head' },
@@ -999,10 +967,8 @@ function issuedView(invoice, ui, context, redraw) {
     navBar(ui, invoice),
     h('header', { class: 'fx-ph' },
       h('div', { class: 'fx-ph__text' },
-        h('div', { class: 'fx-row' },
-          h('h1', { class: 'fx-title' }, invoice.number),
-          h('span', { class: 'fx-status', 'data-tone': TAB_TONE[invoice.tab] }, TAB_LABEL[invoice.tab] ?? 'Approved')),
-        h('p', { class: 'fx-ph__sub' }, `${invoice.contact?.name ?? ''} · ${showDate(invoice.issueDate)}`)),
+        h('h1', { class: 'fx-title' }, invoice.number),
+        h('span', { class: 'fx-status', 'data-tone': TAB_TONE[invoice.tab] }, TAB_LABEL[invoice.tab] ?? 'Approved')),
       h('div', { class: 'fx-ph__actions' }, actions, previewButton(ui, invoice.id), send)),
     h('div', { class: 'fx-invoice__grid' },
       h('div', { class: 'fx-invoice__main' },
@@ -1072,7 +1038,7 @@ function xeroCard(invoice, ui, context, status, reload) {
 }
 
 // Send to Xero (POST /api/xero/invoices/push). The customer's send mode
-// (Settings, Invoice rules) decides what Xero gets: a draft that a person approves
+// (Settings, Rules) decides what Xero gets: a draft that a person approves
 // there, or an approved invoice that Xero emails to the customer.
 function sendToXero(invoice, ui, context) {
   const { h, flow, toast } = ui;

package/server/ui/job-board.js

@@ -93,7 +93,10 @@ function reasonFix(reason) {
   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.', go: 'integrations' };
   }
-  if (reason === 'the job changed after its invoice was made') return fix('Job changed', 'Open the invoice to see what changed. Fix the job in the work system, or adopt its changes on the draft.', 'invoice');
+  // Review opens the job's own sidecar: what changed, and Accept change.
+  if (reason === 'the job changed after its invoice was made') {
+    return { label: 'Job changed', text: 'Changed after the draft was made.', todo: 'Fix it in the work system, or accept the change.', go: 'review' };
+  }
   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.', 'work');
   if (/deleted in /i.test(reason)) return fix('Deleted', 'Check the job in the work system. Void its invoice if it has one.', 'work');
   // The matcher found invoices that may be this job's, but no exact link.
@@ -134,27 +137,36 @@ function draftFix(problem) {
 }
 
 // Where a fix's link goes: Flow's invoice, the job in the work system, a
-// Flow settings page, or `choose`: Make invoice and Link invoice buttons
-// (jobs.js draws them).
-export const GO = ['invoice', 'work', 'price-list', 'invoicing-settings', 'integrations', 'choose'];
+// 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'];
 
 // What a person must fix on a job, in order: [{ label, text, todo, go }];
 // `todo` is null when the buttons are the instruction.
-// Empty unless invoiceStage is Problem.
+// Empty unless invoiceStage is Problem. One fact is one fix: a job in review
+// already says why, so its draft's copy of that hold (sending.js,
+// `job_review`) is left out, and two fixes with the same words show once.
 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, Invoice rules.', go: 'invoicing-settings',
+      label: 'Stopped by a rule', text: sentence(r), todo: 'Draft the invoice here, or change the rule under Settings, Rules.', go: 'invoicing-settings',
     })));
   }
   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' });
   }
-  found.push(...(o.invoiceProblems ?? []).map((p) => draftFix(p)));
-  return found;
+  const held = o.view === 'review_required' && o.holdState === 'review';
+  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}`;
+    if (seen.has(key)) return false;
+    seen.add(key);
+    return true;
+  });
 }
 
 // The short words for a job's problems: the first label, and "+N" for more.

package/server/ui/job-change.js

@@ -87,3 +87,39 @@ export function jobChangeBanner(ui, change, { money, onAccept = null, onRecheck
       body)) : null,
     more);
 }
+
+// The banner with Accept change and the recheck wired, for the invoice page
+// and a job's Review sidecar (jobs.js). `canAccept`: the person may change
+// drafts (owners and admins). `unsaved()`: edits on the page that Accept
+// would lose. `done(invoice)` hears the invoice after Accept or a recheck.
+export function jobChangeReview(ui, change, { money, canAccept = false, unsaved = () => false, done = () => {} }) {
+  const { h, flow, toast } = ui;
+  const system = change.systemName;
+  return jobChangeBanner(ui, change, {
+    money,
+    onAccept: !canAccept ? null : async () => {
+      const lost = [change.outcome === 'conflict' ? 'Your own line changes here are replaced.' : null, unsaved() ? 'Unsaved changes are lost.' : null].filter(Boolean);
+      if (lost.length) {
+        const ok = await ui.dialog({ title: 'Accept change?', body: h('p', {}, lost.join(' ')), confirm: 'Accept change' });
+        if (!ok) return;
+      }
+      try {
+        const res = await flow(`/api/invoicing/jobs/${change.jobId}/use-new-lines`, { method: 'POST', body: JSON.stringify({ accept: true }) });
+        toast(`Matches ${system}.${res.invoice.view === 'ready' ? ' In Ready.' : ''}`, 'success');
+        await done(res.invoice);
+      } catch (error) {
+        toast(error.message, 'danger');
+      }
+    },
+    // Reads this one job from the work system again, then every check runs.
+    onRecheck: async () => {
+      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');
+        if (res.invoice) await done(res.invoice);
+      } catch (error) {
+        toast(error.message, 'danger');
+      }
+    },
+  });
+}

package/server/ui/jobs.js

@@ -15,6 +15,7 @@
 import { bulkBar } from '/assets/ui/bulk-bar.js';
 import { lucide } from '/assets/ui/custom-fields.js';
 import { formatCents } from '/assets/ui/invoicing.js';
+import { jobChangeReview } from '/assets/ui/job-change.js';
 import {
   caseNumber, FINAL_RANK, fixes, INVOICE_STAGES, invoiceStage, matches, NO_STATUS, orderStatuses, problemSummary, statusRank,
 } from '/assets/ui/job-board.js';
@@ -22,10 +23,14 @@ import {
   COLUMNS, DEFAULT_VIEW, fieldGroup, fieldIdOf, fieldLanes, FILTER_FIELDS, filterJobs, groupJobs, GROUPS, KIND_OF_TYPE, keptStatuses, laneOf,
   normaliseJobsView, NOT_SET, OPERATORS, sortJobs, SORTS,
 } from '/assets/ui/job-view.js';
+import { sidecar } from '/assets/ui/sidecar.js';
 import { findBox, ICONS, svg, today, viewBar } from '/assets/ui/view-bar.js';
 
 const LAYOUT_KEY = 'flow_jobs_layout';
 const FOLDED_KEY = 'flow_jobs_folded';
+// The job panel's sidecar: the tab last open, or closed.
+const SIDE_KEY = 'flow_job_side';
+const SIDE_TABS = ['activity', 'review', 'closed'];
 const SYSTEM_NAME = { seazona: 'Seazona', xero: 'Xero' };
 // A job's events (server/core/ledger.js), in plain words.
 const ACTIVITY = {
@@ -85,6 +90,17 @@ function saveFolded(folded) {
   try { localStorage.setItem(FOLDED_KEY, JSON.stringify(folded)); } catch { /* a convenience only */ }
 }
 
+function readSide() {
+  try {
+    const value = localStorage.getItem(SIDE_KEY);
+    return SIDE_TABS.includes(value) ? value : 'activity';
+  } catch { return 'activity'; }
+}
+
+function saveSide(tab) {
+  try { localStorage.setItem(SIDE_KEY, tab ?? 'closed'); } catch { /* a convenience only */ }
+}
+
 
 const WARN_ICON = '<svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1.5 15 14H1z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 6v3.6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="8" cy="11.6" r=".9" fill="currentColor"/></svg>';
 const PERSON_ICON = '<svg width="13" height="13" viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="5.5" r="3" fill="none" stroke="currentColor" stroke-width="1.3"/><path d="M2.5 14c.6-2.8 2.8-4.3 5.5-4.3s4.9 1.5 5.5 4.3" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>';
@@ -116,9 +132,8 @@ export async function renderJobs(main, ui) {
   const controls = h('div', { class: 'fx-viewbar', role: 'group', 'aria-label': 'Group, sort and filter' });
   // In the list, ticked rows get the same floating bar as Invoices.
   const bulk = bulkBar(ui, { label: 'Ticked jobs' });
-  main.classList.add('fx-main--wide');
   main.append(
-    pageHeader('Jobs', { subtitle: 'Every job in the lab system, by its status there.' }),
+    pageHeader('Jobs'),
     h('div', { class: 'fx-toolbar fx-toolbar--plain' }, controls, h('div', { class: 'fx-toolbar__end' }, find.element, toggle)),
     host,
     bulk.element);
@@ -1086,25 +1101,8 @@ 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();
-      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. Nothing goes elsewhere.
-      if (!o.canUseNewLines) return [open];
-      const system = SYSTEM_NAME[job.sourceSystem] ?? job.sourceSystem;
-      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 invoice now matches ${system}.`, 'success');
-          } catch (error) {
-            ui.toast(error.message, 'danger');
-          }
-          close();
-          await load();
-        },
-      }, `Adopt ${system} changes`), open];
+      // A changed job is accepted in the panel's Review sidecar.
+      return [h('a', { class: 'fx-btn', href: `/invoices/${o.invoiceId}`, onclick: (event) => { close(); ui.go(event); } }, label)];
     }
     // Flow's own stage: a person marks a job ready to invoice, or an
     // automation does (Settings, Automations).
@@ -1147,15 +1145,20 @@ export async function renderJobs(main, ui) {
 
   // The job's page: a large panel over the board, like a task page. A
   // breadcrumb, the client's name, the stage, the job's fields, what to fix
-  // and its lines; its activity at the side (below on a phone). Esc, the X
-  // or a click outside closes it. `atFix` scrolls to what to fix. The job's
-  // custom fields can be changed here (in Flow only), and its stage moved
-  // (a hand-off to the work system).
+  // and its lines. At the side (below on a phone), the sidecar: Activity,
+  // and Review when the job changed after its draft (what changed, and
+  // Accept change). The sidecar closes, and the main area takes its room.
+  // Esc, the X or a click outside closes the panel. `atFix` scrolls to what
+  // to fix, and opens Review when there is one. The job's custom fields can
+  // be changed here (in Flow only), and its stage moved (a hand-off to the
+  // work system).
   function openJob(job, { atFix = false } = {}) {
     const o = job.obligation;
     const stage = invoiceStage(o);
     const found = problemsOf(job);
     const choose = found.find((f) => f.go === 'choose') ?? null;
+    // The job changed after its draft: the sidecar has a Review tab.
+    const reviewable = Boolean(o?.invoiceId) && found.some((f) => f.go === 'review');
     const system = SYSTEM_NAME[job.sourceSystem] ?? job.sourceSystem;
     const status = job.status ?? NO_STATUS;
     const late = isLate(job);
@@ -1170,9 +1173,14 @@ export async function renderJobs(main, ui) {
       : choose ? h('span', { class: 'fx-task__none' }, svg(WARN_ICON), 'Needs invoice')
         : stage ? INVOICE_STAGES[stage] : o ? 'Not ready to invoice' : 'No invoice yet';
     const rest = found.filter((f) => f.go !== 'choose');
+    // One short line a fix: its label, what is wrong, and its link. What to
+    // do is the link's tip.
     const fixBox = rest.length ? h('section', { class: 'fx-task__fix', 'aria-label': 'Fix' },
       h('h3', {}, 'Fix'),
-      rest.map((f) => h('div', { class: 'fx-task__fixrow' }, h('span', {}, [f.text, f.todo].filter(Boolean).join(' ')), fixLink(f.go)))) : null;
+      rest.map((f) => {
+        const go = fixLink(f.go, f.todo);
+        return h('div', { class: 'fx-task__fixrow', title: go ? null : f.todo }, h('strong', {}, f.label), h('span', {}, f.text), go);
+      })) : null;
     // No invoice, and the match is unclear: one line and two buttons. The
     // possible matches are compared on the Reconcile page, not here.
     const chooseBox = choose ? h('section', { class: 'fx-task__choose', 'aria-label': 'Invoice' },
@@ -1200,8 +1208,12 @@ 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) {
-      const inFlow = (href, text) => h('a', { class: 'fx-task__link', href, onclick: (event) => { close(); ui.go(event); } }, text);
+    function fixLink(go, tip = null) {
+      const inFlow = (href, text) => h('a', { class: 'fx-task__link', href, title: tip, onclick: (event) => { close(); ui.go(event); } }, text);
+      if (go === 'review' && reviewable) {
+        return h('button', { class: 'fx-task__link fx-task__linkbtn', type: 'button', title: tip, onclick: () => side.open('review') }, 'Review');
+      }
+      if (go === 'review' && o?.invoiceId) return inFlow(`/invoices/${o.invoiceId}`, 'Open invoice');
       if (go === 'invoice' && o?.invoiceId) return inFlow(`/invoices/${o.invoiceId}`, 'Open invoice');
       if (go === 'work' && job.link?.url) {
         return h('a', { class: 'fx-task__link', href: job.link.url, target: '_blank', rel: 'noopener' }, job.link.exact ? `Open case in ${system} ↗` : `Open ${system} ↗`);
@@ -1213,12 +1225,55 @@ export async function renderJobs(main, ui) {
     }
     const lines = job.lines ?? [];
     const activity = h('ol', {}, h('li', { class: 'fx-dim' }, 'Loading…'));
+    const activityBody = h('div', { class: 'fx-task__activity' },
+      o ? activity : h('p', { class: 'fx-dim' }, `Flow has no invoice record for this job yet. It makes one when ${system} reports the job complete.`));
+    // Review: the job's change as the invoice page shows it (job-change.js),
+    // read from the invoice when the sidecar first needs it.
+    const reviewBody = h('div', { class: 'fx-task__review' }, h('p', { class: 'fx-dim' }, 'Loading…'));
+    let reviewRead = false;
+    const readReview = () => {
+      if (reviewRead) return;
+      reviewRead = true;
+      flow(`/api/invoicing/invoices/${o.invoiceId}`).then(({ invoice }) => drawReview(invoice))
+        .catch(() => reviewBody.replaceChildren(h('p', {}, 'Flow could not read the change.')));
+    };
+    function drawReview(invoice) {
+      const change = invoice?.jobChange ?? null;
+      reviewBody.replaceChildren(change
+        ? jobChangeReview(ui, change, { money: formatCents, canAccept: state.canDraft, done: reopen })
+        : h('p', { class: 'fx-dim' }, `The draft matches ${system}.`));
+    }
+    // After Accept change or a recheck: the board reads again, and this
+    // job's panel opens again with its new facts.
+    async function reopen() {
+      await load();
+      const fresh = state.jobs.find((j) => jobKey(j) === jobKey(job));
+      close();
+      if (fresh) openJob(fresh);
+    }
+    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',
+      onclick: () => (side.isOpen() ? side.close() : side.open(readSide() === 'review' && reviewable ? 'review' : 'activity')),
+    }, lucide(h, 'panel-right'));
+    const side = sidecar(h, {
+      label: 'Job side panel',
+      tabs: [
+        { id: 'activity', label: 'Activity', icon: 'history', render: () => activityBody },
+        reviewable ? { id: 'review', label: 'Review', icon: 'git-compare', mark: true, render: () => { readReview(); return reviewBody; } } : null,
+      ].filter(Boolean),
+      onChange: (tab) => {
+        saveSide(tab);
+        sideButton.setAttribute('aria-pressed', String(Boolean(tab)));
+      },
+    });
+    side.element.classList.add('fx-task__side');
     element.append(h('div', { class: 'fx-task__grid' },
       h('div', { class: 'fx-task__main' },
         h('header', { class: 'fx-task__head' },
           h('nav', { class: 'fx-task__crumb', 'aria-label': 'Breadcrumb' },
             h('span', {}, 'Jobs'), h('span', { class: 'fx-task__slash', 'aria-hidden': 'true' }, '/'), h('span', {}, status)),
-          h('button', { class: 'fx-btn fx-btn--ghost fx-btn--icon', type: 'button', 'aria-label': 'Close', onclick: close }, '✕')),
+          h('div', { class: 'fx-task__tools' }, sideButton,
+            h('button', { class: 'fx-btn fx-btn--ghost fx-btn--icon', type: 'button', 'aria-label': 'Close', title: 'Close', onclick: close }, '✕'))),
         h('h2', { class: 'fx-task__title' }, clientOf(job)),
         h('div', { class: 'fx-task__stage' }, stagePill(status)),
         h('dl', { class: 'fx-task__fields' },
@@ -1255,13 +1310,14 @@ export async function renderJobs(main, ui) {
               h('td', { class: 'fx-num' }, job.totalCents == null ? '—' : formatCents(job.totalCents)))))
             : h('p', { class: 'fx-dim' }, 'No lines.')),
         h('div', { class: 'fx-task__actions' }, actions(job, close))),
-      h('aside', { class: 'fx-task__activity', 'aria-label': 'Activity' },
-        h('h3', {}, 'Activity'),
-        o ? activity : h('p', { class: 'fx-dim' }, `Flow has no invoice record for this job yet. It makes one when ${system} reports the job complete.`))));
+      side.element));
     element.addEventListener('click', (event) => { if (event.target === element) close(); });
     element.addEventListener('close', () => element.remove());
     document.body.append(element);
     element.showModal();
+    const last = readSide();
+    if (atFix && reviewable) side.open('review');
+    else if (last !== 'closed') side.open(last === 'review' && reviewable ? 'review' : 'activity');
     if (atFix && (chooseBox ?? fixBox)) (chooseBox ?? fixBox).scrollIntoView({ block: 'start' });
     if (!o) return;
     const when = (iso) => new Date(iso).toLocaleString('en-AU', { day: 'numeric', month: 'short', hour: 'numeric', minute: '2-digit' });

package/server/ui/monitoring.js

@@ -99,6 +99,7 @@ export async function startMonitoring({ flow, person }) {
     integrations,
     tracesSampleRate,
     beforeSendSpan: scrubSpan,
+    initialScope: { tags: config.tags ?? {} },
   });
   Sentry.getClient()?.on('beforeSendFeedback', tagNotify);
   // Who reported or met the error, so the lab can follow up.

package/server/ui/price-list.js

@@ -29,7 +29,7 @@ export async function renderPriceList(main, ui) {
   const addButton = h('button', { class: 'fx-btn fx-btn--primary', type: 'button', disabled }, 'Add code');
   const reconcileButton = h('button', { class: 'fx-btn fx-btn--ghost', type: 'button', hidden: true, onclick: () => ui.go('/price-list/reconcile') }, 'Reconcile');
   const alerts = alertStrip(ui, 'price-list');
-  main.append(pageHeader('Price list', { subtitle: 'The codes and prices that Flow puts on invoice lines.', actions: [reconcileButton, addButton] }), alerts.element, host);
+  main.append(pageHeader('Price list', { help: { href: DOCS, label: 'How the price list works' }, actions: [reconcileButton, addButton] }), alerts.element, host);
 
   let data = null;
   let query = '';
@@ -176,8 +176,7 @@ export async function renderPriceList(main, ui) {
       table,
     ];
     const settings = h('section', { class: 'fx-set fx-price__settings' }, h('h2', { class: 'fx-set__title' }, 'Invoice lines'), h('div', { class: 'fx-skeleton' }));
-    linePriceRow().then((r) => settings.replaceChildren(settings.firstChild, r,
-      h('p', { class: 'fx-dim', style: { margin: '8px 0 0' } }, h('a', { href: DOCS, target: '_blank', rel: 'noopener' }, 'How the price list works'))));
+    linePriceRow().then((r) => settings.replaceChildren(settings.firstChild, r));
     sections.push(settings);
     host.replaceChildren(...sections.filter(Boolean));
     // Opened from Reconcile's "Edit code": that code's dialog, once.

package/server/ui/price-reconcile.js

@@ -26,17 +26,16 @@ export async function renderPriceReconcile(main, ui) {
   const icon = (name, label) => lucide(h, name, label);
   let view = new URLSearchParams(location.search).get('view') === 'list' ? 'list' : 'card';
   const host = h('div', { class: 'fx-xi fx-prc' }, h('p', { class: 'fx-dim' }, 'Loading…'));
-  const subtitle = h('span', {});
+  const tally = h('span', {});
   const toggle = (name, label, glyph) => h('button', {
     class: 'fx-xi__view', type: 'button', role: 'tab', 'aria-selected': String(view === name), 'aria-label': label, title: label, 'data-view': name,
     onclick: () => setView(name),
   }, icon(glyph));
   const bulk = bulkBar(ui, { label: 'Ticked records' });
   main.append(
-    h('nav', { class: 'fx-crumbs', 'aria-label': 'Breadcrumb' },
-      h('a', { href: '/price-list', onclick: (event) => ui.go(event) }, 'Price list'), h('span', { 'aria-hidden': 'true' }, '›'), h('span', {}, 'Reconcile')),
+    ui.crumbs(['/price-list', 'Price list'], 'Reconcile'),
     ui.pageHeader('Reconcile prices', {
-      subtitle,
+      count: tally,
       actions: [h('div', { class: 'fx-xi__views', role: 'tablist', 'aria-label': 'View' }, toggle('card', 'One at a time', 'square'), toggle('list', 'List, tick many', 'list-checks'))],
     }),
     host, bulk.element);
@@ -129,13 +128,13 @@ export async function renderPriceReconcile(main, ui) {
     if (!data) return;
     bulk.draw({ count: 0 });
     if (!data.systems.length) {
-      subtitle.replaceChildren('');
+      tally.replaceChildren('');
       host.replaceChildren(h('p', { class: 'fx-empty' }, 'No integration with a price list is on. Flow uses its own list alone.'),
         h('a', { href: '/price-list', onclick: (event) => ui.go(event) }, '← Price list'));
       return;
     }
     if (!rows.length) {
-      subtitle.replaceChildren('');
+      tally.replaceChildren('');
       host.replaceChildren(h('div', { class: 'fx-xi__done' }, icon('check-check'), h('p', {}, 'Every record has a code, and every price agrees.'),
         h('a', { href: '/price-list', onclick: (event) => ui.go(event) }, 'Price list')));
       return;
@@ -184,7 +183,7 @@ export async function renderPriceReconcile(main, ui) {
   // One record (or one differing code) at a time.
   function drawCard() {
     const row = rows[at];
-    subtitle.replaceChildren(`${rows.length} to check`);
+    tally.replaceChildren(`${rows.length} to check`);
     const next = () => { at = (at + 1) % rows.length; pick = 0; chosen = null; drawCard(); };
     const record = row.record;
     const item = row.kind === 'differs' ? row.item : chosen ?? row.candidates[pick]?.item ?? null;
@@ -267,7 +266,7 @@ export async function renderPriceReconcile(main, ui) {
 
   // Every record and code to check; ticked rows go from the bulk bar.
   function drawList() {
-    subtitle.replaceChildren(`${rows.length} to check`);
+    tally.replaceChildren(`${rows.length} to check`);
     const ticked = new Set();
     const boxes = new Map();
     const picked = () => rows.filter((r) => ticked.has(r.key));

package/server/ui/routes.js

@@ -21,7 +21,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', 'job-change.js', 'invoicing-settings.js', 'automations.js', 'invoice-rules.js', 'line-mappings.js', 'price-list.js', 'price-match.js', 'price-reconcile.js', 'custom-fields.js', 'jobs.js', 'job-board.js', 'reconcile.js', 'xero-import.js', 'job-view.js', 'monitoring.js', 'search.js', 'alerts.js', 'bulk-bar.js', 'view-bar.js', 'flow-mark.svg']);
+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', 'jobs.js', 'job-board.js', 'reconcile.js', 'xero-import.js', 'job-view.js', 'monitoring.js', 'search.js', 'alerts.js', 'bulk-bar.js', 'view-bar.js', 'tip.js', 'flow-mark.svg']);
 const iconDir = join(dirname(require.resolve('lucide-static/package.json')), 'icons');
 const ICON_FILE = /^[a-z0-9]+(?:-[a-z0-9]+)*\.svg$/;
 const MAX_AGE = '1h';

package/server/ui/sidecar.js

@@ -0,0 +1,72 @@
+// The sidecar, as in ClickUp: a panel at the right of a page or a dialog.
+// The Custom fields manager opens it over its table (`overlay`); a job's
+// panel keeps it as its right column, with tabs (Activity, Review). Closed,
+// it takes no room, so the main area gets the full width.
+//
+// sidecar(h, { label, overlay, escape, tabs, onChange }) answers
+// { element, isOpen, open, show, close, tab, setTabs }:
+//   open(id)     selects tab `id` (or the first) and draws its `render()`
+//   show(node)   draws one node with no tabs (the overlay's own form)
+//   close()      hides it and empties it
+// `tabs` is [{ id, label, icon, render }]; each tab is an icon and one word.
+// `escape` closes it on Esc when no dialog or menu is open over the page.
+// `onChange(id)` hears each open (the tab id) and close (null).
+
+import { lucide } from '/assets/ui/custom-fields.js';
+
+export function sidecar(h, { label, overlay = false, escape = false, tabs = [], onChange = null } = {}) {
+  const element = h('aside', { class: `fx-sidecar${overlay ? ' fx-sidecar--over' : ''}`, 'aria-label': label, hidden: true });
+  let list = tabs;
+  let current = null;
+
+  const closeButton = () => h('button', { class: 'fx-sidecar__close', type: 'button', 'aria-label': 'Close', title: 'Close', onclick: () => api.close() }, lucide(h, 'x'));
+
+  function drawTabs() {
+    const head = h('header', { class: 'fx-sidecar__head' },
+      h('div', { class: 'fx-sidecar__tabs', role: 'tablist', 'aria-label': label },
+        list.map((t) => h('button', {
+          class: 'fx-sidecar__tab', type: 'button', role: 'tab', 'data-tab': t.id,
+          'aria-selected': String(t.id === current), onclick: () => api.open(t.id),
+        }, lucide(h, t.icon), h('span', {}, t.label), t.mark ? h('span', { class: 'fx-sidecar__mark', 'aria-hidden': 'true' }) : null))),
+      closeButton());
+    const tab = list.find((t) => t.id === current);
+    element.replaceChildren(head, h('div', { class: 'fx-sidecar__body', role: 'tabpanel' }, tab?.render?.() ?? null));
+  }
+
+  const api = {
+    element,
+    isOpen: () => !element.hidden,
+    tab: () => (element.hidden ? null : current),
+    open(id = null) {
+      current = list.find((t) => t.id === id)?.id ?? list[0]?.id ?? null;
+      drawTabs();
+      element.hidden = false;
+      onChange?.(current);
+    },
+    show(node) {
+      current = null;
+      element.replaceChildren(node);
+      element.hidden = false;
+    },
+    close() {
+      if (element.hidden) return;
+      element.hidden = true;
+      element.replaceChildren();
+      current = null;
+      onChange?.(null);
+    },
+    // New tabs (a tab's data came in): an open tab draws again.
+    setTabs(next) {
+      list = next;
+      if (!element.hidden && current) drawTabs();
+    },
+    closeButton,
+  };
+
+  if (escape) {
+    document.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape' && element.isConnected && !element.hidden && !document.querySelector('dialog[open], .fx-pop:popover-open')) api.close();
+    });
+  }
+  return api;
+}