@arcforgelabs/flow 2026.10.42 → 2026.10.44

package/server/ui/jobs.js

@@ -13,8 +13,10 @@
 // or with a keyboard, the job's panel has the same moves.
 
 import { bulkBar } from '/assets/ui/bulk-bar.js';
+import { columnTable, onRightButton, rowCells, viewSaver } from '/assets/ui/columns.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 +24,16 @@ 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 { clipLabel, initialsOf } from '/assets/ui/person.js';
+import { savedViews } from '/assets/ui/saved-views.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', 'fix', 'closed'];
 const SYSTEM_NAME = { seazona: 'Seazona', xero: 'Xero' };
 // A job's events (server/core/ledger.js), in plain words.
 const ACTIVITY = {
@@ -56,11 +64,6 @@ const shortDate = (iso) => {
   if (days === -1) return 'Yesterday';
   return at.toLocaleDateString('en-AU', at.getFullYear() === now.getFullYear() ? { day: '2-digit', month: '2-digit' } : { day: '2-digit', month: '2-digit', year: '2-digit' });
 };
-// A person's badge: their initials in a circle; the name on hover.
-const initialsOf = (name) => {
-  const parts = (name ?? '?').split(/[\s._-]+/).filter(Boolean);
-  return ((parts[0]?.[0] ?? '?') + (parts[1]?.[0] ?? '')).toUpperCase();
-};
 const clientOf = (job) => job.clientName ?? 'No client';
 // The one date a card shows: when the job is due, else when it was ordered.
 const dateOf = (job) => (job.dueOn ? `Due ${showDate(job.dueOn)}` : job.orderedOn ? `Ordered ${showDate(job.orderedOn)}` : job.jobDate ? showDate(job.jobDate) : null);
@@ -85,6 +88,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>';
@@ -92,7 +106,7 @@ const CHEVRON_ICON = '<svg width="14" height="14" viewBox="0 0 16 16" aria-hidde
 const CALENDAR_ICON = '<svg width="13" height="13" viewBox="0 0 16 16" aria-hidden="true"><rect x="2" y="3" width="12" height="11" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.3"/><path d="M2 6.5h12M5.5 1.5v3M10.5 1.5v3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>';
 
 export async function renderJobs(main, ui) {
-  const { h, flow, pageHeader, notice } = ui;
+  const { h, flow, listHead, listFrame, edgeFade, notice } = ui;
   // Search (search.js) opens a job with no invoice as /jobs?q=<case>.
   const asked = new URLSearchParams(location.search).get('q') ?? '';
   // The person's own view (job-view.js), saved with their account. Before
@@ -110,24 +124,26 @@ export async function renderJobs(main, ui) {
     // The list's ticked jobs (by jobKey), and its folded groups by group key.
     ticked: new Set(), folded: readFolded(),
   };
+  // The person's named views (saved-views.js): their default opens on a
+  // new visit.
+  const views = savedViews(ui, { page: 'jobs', current: () => state.view, apply: (view) => { change(view); drawToggle(); } });
+  const opening = views.opening();
+  if (opening) state.view = normaliseJobsView(opening);
   const toggle = h('div', { class: 'fx-seg', role: 'radiogroup', 'aria-label': 'Layout' });
   const find = findBox(h, { label: 'Find a case, client or practitioner', value: asked, oninput: (words) => { state.q = words.trim(); draw(); } });
   const host = h('div', { class: 'fx-jobs' }, h('div', { class: 'fx-skeleton' }));
   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.' }),
-    h('div', { class: 'fx-toolbar fx-toolbar--plain' }, controls, h('div', { class: 'fx-toolbar__end' }, find.element, toggle)),
-    host,
-    bulk.element);
+  const frame = listFrame(main, host);
+  main.append(...listHead('Jobs', { views: views.element, start: controls, end: [find.element, toggle] }).nodes, frame.element, bulk.element);
 
   const drawToggle = () => toggle.replaceChildren(...[['board', 'Board'], ['list', 'List']].map(([id, label]) => h('button', {
     type: 'button', role: 'radio', class: 'fx-seg__item', 'aria-checked': String(state.view.layout === id),
     onclick: () => { saveLayout(id); change({ layout: id }); drawToggle(); },
   }, label)));
   drawToggle();
+  views.draw();
 
   const problemsOf = (job) => fixes(job.obligation);
   const jobKey = (job) => `${job.sourceSystem}\u0000${job.sourceJobRef}`;
@@ -154,17 +170,13 @@ export async function renderJobs(main, ui) {
 
   // A change to the view: draw it now, save it with the account shortly
   // after, so a few quick clicks make one request.
-  let saveTimer = null;
+  const saveView = viewSaver(ui, 'jobs');
   function change(patch) {
     state.view = normaliseJobsView({ ...state.view, ...patch });
-    if (ui.me) ui.me.views = { ...ui.me.views, jobs: state.view };
+    views.draw();
     drawControls();
     draw();
-    clearTimeout(saveTimer);
-    saveTimer = setTimeout(() => {
-      flow('/api/me/views/jobs', { method: 'PUT', body: JSON.stringify(state.view) })
-        .catch(() => ui.toast?.('Flow could not save your view. It applies on this page only.', 'danger'));
-    }, 500);
+    saveView(state.view);
   }
 
   // The chips (view-bar.js), shared with every list page.
@@ -226,11 +238,11 @@ export async function renderJobs(main, ui) {
   }, { rows: true, clearLabel: 'Clear the sort' });
 
   // ── Filters ──
-  // Rows of field, operator and value, with a bin on each, "Add filter",
-  // and "Clear all". The second row's And / Or applies to every row.
+  // The shared filter panel (view-bar.js), as ClickUp's: groups of rows of
+  // field, operator and value. A job's fields, then the lab's custom fields.
   const filterFields = () => [
     ...Object.entries(FILTER_FIELDS).filter(([id]) => id !== 'assignee' || assigneeField())
-      .map(([value, f]) => ({ value, label: value === 'assignee' ? assigneeField().name : f.label })),
+      .map(([value, f]) => ({ value, label: value === 'assignee' ? assigneeField().name : f.label, icon: f.icon })),
     { group: 'Custom fields', options: customColumns().map((f) => ({ value: fieldGroup(f.id), label: f.name })) },
   ];
   const kindOf = (field) => {
@@ -238,20 +250,23 @@ export async function renderJobs(main, ui) {
     if (Object.hasOwn(FILTER_FIELDS, field)) return FILTER_FIELDS[field].kind;
     return KIND_OF_TYPE[fieldById(fieldIdOf(field))?.type] ?? null;
   };
-  const PROBLEM_OPS = { yes: 'has one', no: 'has none' };
-  const opsOf = (field) => (field === 'problem' ? PROBLEM_OPS : OPERATORS[kindOf(field)] ?? {});
+  // Status and stage are always set, so they offer Is and Is not, as
+  // ClickUp's Status does.
+  const PROBLEM_OPS = { yes: 'Has one', no: 'Has none' };
+  const SET_OPS = { is: 'Is', not: 'Is not' };
+  const opsOf = (field) => (field === 'problem' ? PROBLEM_OPS : ['status', 'stage'].includes(field) ? SET_OPS : OPERATORS[kindOf(field)] ?? {});
   // The choices a choice or person filter offers: [{ value, label }].
   function choicesOf(field) {
     const people = () => [{ value: 'me', label: 'Me' }, ...state.people.map((p) => ({ value: p.id, label: p.name }))];
     const labels = (list) => [...new Set(list.filter(Boolean))].sort((a, b) => a.localeCompare(b)).map((v) => ({ value: v, label: v }));
-    if (field === 'status') return orderStatuses(state.statuses, state.jobs).map((v) => ({ value: v, label: v }));
+    if (field === 'status') return orderStatuses(state.statuses, state.jobs).map((v) => ({ value: v, label: v, rank: statusRank(v) }));
     if (field === 'stage') return Object.values(STAGE_GROUPS).map((v) => ({ value: v, label: v }));
     if (field === 'client') return labels(state.jobs.map(clientOf));
     if (field === 'practitioner') return labels(state.jobs.map((job) => job.practitioner));
     if (field === 'assignee') return people();
     const custom = fieldById(fieldIdOf(field));
     if (custom?.type === 'person') return people();
-    return (custom?.options ?? []).map((o) => ({ value: o.id, label: o.archived ? `${o.name} (archived)` : o.name }));
+    return (custom?.options ?? []).map((o) => ({ value: o.id, label: o.archived ? `${o.name} (archived)` : o.name, color: o.color }));
   }
   // A job's value for a filter field, as the filter compares it.
   function filterValue(job, field) {
@@ -335,6 +350,7 @@ export async function renderJobs(main, ui) {
     const shown = new Set(found.map(jobKey));
     for (const key of state.ticked) if (!shown.has(key)) state.ticked.delete(key);
     state.found = found;
+    frame.count(`${found.length} ${found.length === 1 ? 'job' : 'jobs'}`);
     host.replaceChildren(state.view.layout === 'list' ? list(groups, found.length) : board(groups));
     drawBulk();
   }
@@ -453,6 +469,9 @@ export async function renderJobs(main, ui) {
         h('span', { class: 'fx-board__sum' }, jobs.length ? formatCents(totalOf(jobs)) : '')),
       h('div', { class: 'fx-board__cards' }, jobs.length ? jobs.map(jobCard) : h('p', { class: 'fx-board__none' }, 'None')))));
     if (groups.some((g) => g.drop)) enableDrag(element, groups);
+    // Lanes past the frame's sides, and cards past a lane's foot, fade.
+    edgeFade(element, { target: frame.view, edges: ['left', 'right'] });
+    element.querySelectorAll('.fx-board__cards').forEach((cards) => edgeFade(cards, { target: cards.parentElement, edges: ['top', 'bottom'] }));
     return element;
   }
 
@@ -649,10 +668,10 @@ export async function renderJobs(main, ui) {
     const label = field.name;
     if (field.type === 'dropdown' || field.type === 'person') {
       const choices = field.type === 'person'
-        ? state.people.map((p) => ({ value: p.id, label: p.name }))
+        ? state.people.map((p) => ({ value: p.id, label: p.name, title: p.name }))
         : field.options.filter((o) => !o.archived || o.id === current).map((o) => ({ value: o.id, label: o.archived ? `${o.name} (archived)` : o.name }));
       const select = h('select', { class: 'fx-select fx-task__input', 'aria-label': label },
-        h('option', { value: '' }, NOT_SET), choices.map((c) => h('option', { value: c.value, selected: c.value === current }, c.label)));
+        h('option', { value: '' }, NOT_SET), choices.map((c) => h('option', { value: c.value, selected: c.value === current, title: c.title ?? null }, clipLabel(c.label))));
       select.addEventListener('change', () => save(select.value || null));
       return select;
     }
@@ -690,9 +709,6 @@ export async function renderJobs(main, ui) {
     return h('div', { class: 'fx-task__move' }, wait, select);
   }
 
-  // A column's menu (a click on its head, or a right-click): sort by it,
-  // move it, hide it. Client always shows. `column` null is the + menu: the
-  // hidden columns, to add one back.
   // What a column's head sorts by: a built-in key, or the column's custom
   // field (Assignee is the lab's person field).
   const SORT_OF = { client: 'client', practitioner: 'practitioner', due: 'due', ordered: 'ordered', shipped: 'shipped', total: 'total' };
@@ -742,65 +758,43 @@ export async function renderJobs(main, ui) {
     on && sorts.length > 1 ? h('span', { class: 'fx-th-sort__n' }, String(at + 1)) : null);
   }
   function sortMenuAt(event, by, label, on, at) {
-    const close = () => columnPop.hidePopover?.();
     const { sorts } = state.view;
     const flip = () => change({ sorts: sorts.map((s, n) => (n === at ? { ...s, dir: s.dir === 'asc' ? 'desc' : 'asc' } : s)) });
-    columnPop.replaceChildren(
-      h('button', { type: 'button', class: 'fx-pop__item', role: 'menuitemcheckbox', 'aria-checked': 'true', title: 'Change the direction', onclick: () => { close(); flip(); } },
+    heads.menu.show([
+      h('button', { type: 'button', class: 'fx-pop__item', role: 'menuitemcheckbox', 'aria-checked': 'true', title: 'Change the direction', onclick: () => { heads.menu.close(); flip(); } },
         h('span', { class: 'fx-pop__tick' }, lucide(h, on.dir === 'asc' ? 'arrow-up' : 'arrow-down')), h('span', {}, `Sort by ${label}`), h('span', { class: 'fx-pop__end' }, svg(ICONS.tick))),
-      h('button', { type: 'button', class: 'fx-pop__item', role: 'menuitem', onclick: () => { close(); change({ sorts: sorts.filter((_, n) => n !== at) }); } },
-        h('span', { class: 'fx-pop__tick' }, lucide(h, 'ban')), h('span', {}, 'Clear sort')));
-    placeColumnPop(event);
-  }
-  const columnPop = h('div', { class: 'fx-pop', id: 'fx-jobs-colmenu', popover: 'auto', role: 'menu' });
-  document.body.append(columnPop);
-  // A popover opened while the right button is still down closes again on
-  // its release (light dismiss), so open it after the release.
-  function onRightButton(event, open) {
-    if (event.buttons & 2) addEventListener('pointerup', () => setTimeout(open), { once: true });
-    else open();
+      heads.menu.item('ban', 'Clear sort', () => change({ sorts: sorts.filter((_, n) => n !== at) })),
+    ], event);
   }
-  function columnMenu(column, event) {
-    const ids = state.view.columns;
-    const close = () => columnPop.hidePopover?.();
-    const item = (icon, text, run) => h('button', { type: 'button', class: 'fx-pop__item', role: 'menuitem', onclick: () => { close(); run(); } },
-      h('span', { class: 'fx-pop__tick' }, lucide(h, icon)), h('span', {}, text));
-    const parts = [];
-    if (column) {
+  // The list's heads (columns.js): drag an edge to resize, drag a head to
+  // move it; a click or right-click opens its menu: sort by it, move it,
+  // edit its custom field, hide it. Client always shows, first. + lists the
+  // hidden columns, to add one back.
+  const heads = columnTable(h, {
+    order: () => state.view.columns,
+    widths: () => state.view.widths,
+    change,
+    hidden: () => {
+      const shown = new Set(state.view.columns);
+      return [
+        ...builtInColumns().filter((id) => !shown.has(id)).map((id) => ({ id, label: id === 'assignee' ? assigneeField().name : COLUMNS[id] })),
+        ...customColumns().filter((f) => !shown.has(fieldGroup(f.id))).map((f) => ({ id: fieldGroup(f.id), label: f.name })),
+      ];
+    },
+    extra: (column, item) => {
+      const parts = [];
       const sort = sortOf(column.id);
       if (sort) {
         const [up, down] = dirWords(sort);
         parts.push(item('arrow-up-narrow-wide', `Sort: ${up}`, () => change({ sorts: [{ by: sort, dir: 'asc' }] })),
           item('arrow-down-wide-narrow', `Sort: ${down}`, () => change({ sorts: [{ by: sort, dir: 'desc' }] })), h('div', { class: 'fx-pop__sep' }));
       }
-      const rest = ids.filter((c) => c !== column.id);
-      parts.push(item('arrow-left-to-line', 'Move to start', () => change({ columns: [column.id, ...rest] })),
-        item('arrow-right-to-line', 'Move to end', () => change({ columns: [...rest, column.id] })));
       if (column.id.startsWith('field:') && ['owner', 'admin'].includes(ui.me?.person?.role)) {
         parts.push(item('settings', 'Edit custom field', () => ui.go('/custom-fields')));
       }
-      parts.push(h('div', { class: 'fx-pop__sep' }), item('eye-off', 'Hide column', () => change({ columns: rest })));
-    }
-    // + lists the hidden columns: a click adds one at the end.
-    if (!column) {
-      const shown = new Set(ids);
-      const hidden = [
-        ...builtInColumns().filter((id) => !shown.has(id)).map((id) => ({ id, label: id === 'assignee' ? assigneeField().name : COLUMNS[id] })),
-        ...customColumns().filter((f) => !shown.has(fieldGroup(f.id))).map((f) => ({ id: fieldGroup(f.id), label: f.name })),
-      ];
-      parts.push(...hidden.map((c) => h('button', { type: 'button', class: 'fx-pop__item', role: 'menuitem', onclick: () => { close(); change({ columns: [...ids, c.id] }); } }, c.label)));
-      if (!hidden.length) parts.push(h('p', { class: 'fx-pop__head' }, 'Every column shows'));
-    }
-    columnPop.replaceChildren(...parts);
-    placeColumnPop(event);
-  }
-  function placeColumnPop(event) {
-    columnPop.showPopover?.();
-    const x = event.clientX || event.currentTarget?.getBoundingClientRect?.().left || 0;
-    const y = event.clientY || event.currentTarget?.getBoundingClientRect?.().bottom || 0;
-    columnPop.style.top = `${Math.round(Math.min(y + 4, innerHeight - columnPop.offsetHeight - 8))}px`;
-    columnPop.style.left = `${Math.round(Math.max(8, Math.min(x, innerWidth - columnPop.offsetWidth - 8)))}px`;
-  }
+      return parts;
+    },
+  });
 
   // The list's columns, in the order the person chose them. One column holds
   // one field; each date has its own column.
@@ -808,25 +802,30 @@ export async function renderJobs(main, ui) {
     const day = (iso) => h('time', { datetime: iso ?? null, title: iso ? fullDate(iso) : null }, shortDate(iso));
     const late = (job) => (isLate(job) ? h('span', { class: 'fx-job__date--late', title: 'Past due' }, day(job.dueOn)) : day(job.dueOn));
     const BUILT_IN = {
-      case: { kind: 'case', dim: true, cell: (job) => caseNumber(job) ?? '—' },
-      practitioner: { kind: 'text', dim: true, cell: (job) => job.practitioner ?? '—' },
-      patient: { kind: 'text', dim: true, cell: (job) => job.patient ?? '—' },
+      case: { kind: 'case', className: 'fx-dim', cell: (job) => caseNumber(job) ?? '—' },
+      practitioner: { kind: 'text', className: 'fx-dim', cell: (job) => job.practitioner ?? '—' },
+      patient: { kind: 'text', className: 'fx-dim', cell: (job) => job.patient ?? '—' },
       stage: { kind: 'stage', cell: (job) => stagePill(statusOf(job)) },
       assignee: { kind: 'person', cell: (job) => personBadge(job, assigneeField()) },
-      ordered: { kind: 'date', dim: true, cell: (job) => day(job.orderedOn) },
-      due: { kind: 'date', dim: true, cell: late },
-      shipped: { kind: 'date', dim: true, cell: (job) => day(job.shippedOn) },
-      total: { kind: 'total', num: true, strong: true, cell: (job) => (job.totalCents == null ? '—' : formatCents(job.totalCents)) },
+      ordered: { kind: 'date', className: 'fx-dim', cell: (job) => day(job.orderedOn) },
+      due: { kind: 'date', className: 'fx-dim', cell: late },
+      shipped: { kind: 'date', className: 'fx-dim', cell: (job) => day(job.shippedOn) },
+      total: { kind: 'total', num: true, className: 'fx-strong', cell: (job) => (job.totalCents == null ? '—' : formatCents(job.totalCents)) },
     };
     const allowed = new Set(builtInColumns());
-    return state.view.columns.map((id) => {
+    // Client is always the first column: it has no drag, Move or Hide.
+    const client = {
+      id: 'client', label: 'Client', kind: 'client', fixed: true, sort: () => sortButton('client', 'Client'),
+      cell: (job) => h('span', { class: 'fx-job__cell' }, h('span', { class: 'fx-strong' }, clientOf(job)), problemMark(job)),
+    };
+    return [client, ...state.view.columns.map((id) => {
       if (BUILT_IN[id]) return allowed.has(id) ? { id, label: id === 'assignee' ? assigneeField().name : COLUMNS[id], ...BUILT_IN[id] } : null;
       const field = customColumns().find((f) => fieldGroup(f.id) === id);
       if (!field) return null;
       const cell = field.type === 'person' ? (job) => personBadge(job, field)
         : field.type === 'date' ? (job) => day(valueOf(job, field.id)?.value ?? null) : (job) => fieldText(job, field);
-      return { id, label: field.name, kind: field.type === 'date' ? 'date' : field.type === 'person' ? 'person' : field.type === 'number' ? 'total' : 'text', num: field.type === 'number', dim: true, cell };
-    }).filter(Boolean);
+      return { id, label: field.name, kind: field.type === 'date' ? 'date' : field.type === 'person' ? 'person' : field.type === 'number' ? 'total' : 'text', num: field.type === 'number', className: 'fx-dim', cell };
+    }).filter(Boolean).map((c) => ({ ...c, sort: () => sortButton(c.id, c.label) }))];
   }
 
   // A person custom field's value as a badge (initials), the name on hover.
@@ -883,8 +882,7 @@ export async function renderJobs(main, ui) {
       onkeydown: (event) => { if (event.key === 'Enter' && event.target === event.currentTarget) openJob(job); },
     },
     tickCell(setBox([job], `Tick ${clientOf(job)}${caseNumber(job) ? `, case ${caseNumber(job)}` : ''}`)),
-    h('td', { class: 'fx-c-client' }, h('span', { class: 'fx-job__cell' }, h('span', { class: 'fx-strong' }, clientOf(job)), problemMark(job))),
-    columns.map((c) => h('td', { class: `fx-c-${c.kind}${c.num ? ' fx-num' : ''}${c.dim ? ' fx-dim' : ''}${c.strong ? ' fx-strong' : ''}`, 'data-label': c.label }, c.cell(job))),
+    rowCells(h, columns, job),
     h('td', { class: 'fx-c-end' }));
     const fold = (label) => {
       const next = new Set(state.folded[state.view.group] ?? []);
@@ -902,22 +900,16 @@ export async function renderJobs(main, ui) {
       color ? h('span', { class: 'fx-cf__opt fx-board__lane', 'data-color': color }, label, h('span', { class: 'fx-stage__count' }, String(jobs.length))) : stagePill(label, jobs.length, rank));
       return h('tr', { class: `fx-table__group${open ? '' : ' fx-table__group--folded'}`, onclick: () => fold(label) },
         tickCell(setBox(jobs, `Tick every job in ${label}`)),
-        h('td', { colspan: String(columns.length + 2) }, h('span', { class: 'fx-table__group-row' }, toggle, h('span', { class: 'fx-board__sum' }, formatCents(totalOf(jobs))))));
+        h('td', { colspan: String(columns.length + 1) }, h('span', { class: 'fx-table__group-row' }, toggle, h('span', { class: 'fx-board__sum' }, formatCents(totalOf(jobs))))));
     };
-    return h('div', { class: 'fx-panel' }, h('table', { class: 'fx-table fx-table--jobs' },
-      h('thead', {}, h('tr', {},
-        h('th', { class: 'fx-tick-cell' }, setBox(allJobs, 'Tick every job shown')),
-        h('th', {}, h('span', { class: 'fx-th-cell' }, h('span', { class: 'fx-th fx-th--fixed' }, 'Client'), sortButton('client', 'Client'))),
-        columns.map((c) => h('th', { class: c.num ? 'fx-num' : null, oncontextmenu: (event) => { event.preventDefault(); onRightButton(event, () => columnMenu(c, event)); } },
-          h('span', { class: 'fx-th-cell' },
-            h('button', { type: 'button', class: 'fx-th', 'aria-haspopup': 'menu', title: 'Column menu (or right-click)', onclick: (event) => columnMenu(c, event) }, c.label),
-            sortButton(c.id, c.label)))),
-        h('th', { class: 'fx-th-add' }, h('button', {
-          type: 'button', class: 'fx-th fx-th--add', 'aria-label': 'Show a column', title: 'Show a column', onclick: (event) => columnMenu(null, event),
-        }, '+')))),
-      shownGroups.map((g) => h('tbody', {},
+    return h('div', { class: 'fx-panel' }, heads.table({
+      className: 'fx-table--jobs',
+      columns,
+      lead: [h('th', { class: 'fx-tick-cell' }, setBox(allJobs, 'Tick every job shown'))],
+      rows: shownGroups.map((g) => h('tbody', {},
         g.label == null ? null : head(g),
-        g.label != null && folded.has(g.label) ? null : g.jobs.map(row)))));
+        g.label != null && folded.has(g.label) ? null : g.jobs.map(row))),
+    }));
   }
 
   // ── Bulk actions ─────────────────────────────────────────────────────────
@@ -1086,25 +1078,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 sidecar (Fix tab).
+      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 +1122,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 Fix when the job has a problem (for a changed job: 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` opens the
+  // Fix tab on the first problem (or scrolls to the invoice choice). 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: its Fix shows the change.
+    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 +1150,24 @@ 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');
-    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;
+    // What to fix: one chip a problem, beside the stage, so the panel keeps
+    // one layout with or without a fix. A chip is a toggle: a click opens
+    // the sidecar's Fix tab on that problem and shows the chip pressed; a
+    // second click closes the sidecar. In the tab the problem is fixed: the
+    // change and Accept change for a changed job, else what is wrong, what
+    // to do and one button.
+    const hasFix = rest.length > 0;
+    let picked = null;
+    const fixChips = rest.map((f, i) => h('button', {
+      class: 'fx-task__fixchip', type: 'button', 'aria-pressed': 'false', onclick: () => toggleFix(i),
+    }, lucide(h, 'triangle-alert'), f.label));
+    function toggleFix(i) {
+      if (picked === i && side.tab() === 'fix') { side.close(); return; }
+      picked = i;
+      side.open('fix');
+      // On a phone the sidecar is below the job: bring it into view.
+      if (matchMedia('(max-width: 720px)').matches) side.element.scrollIntoView({ block: 'start' });
+    }
     // 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,27 +1195,84 @@ 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);
-      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} ↗`);
-      }
-      if (go === 'price-list') return inFlow('/price-list', 'Open price list');
-      if (go === 'invoicing-settings') return inFlow('/invoicing-settings', 'Open invoice rules');
-      if (go === 'integrations' && ui.me?.person?.role === 'owner') return inFlow('/integrations', 'Open integrations');
+    function fixLink(go, tip = null) {
+      const button = (icon, text, attrs) => h(attrs.href ? 'a' : 'button', {
+        class: 'fx-btn fx-btn--sm fx-btn--primary fx-task__fixgo', title: tip, ...(attrs.href ? {} : { type: 'button' }), ...attrs,
+      }, lucide(h, icon), text);
+      const inFlow = (icon, href, text) => button(icon, text, { href, onclick: (event) => { close(); ui.go(event); } });
+      if ((go === 'review' || go === 'invoice') && o?.invoiceId) return inFlow('file-text', `/invoices/${o.invoiceId}`, 'Invoice');
+      if (go === 'work' && job.link?.url) return button('external-link', system, { href: job.link.url, target: '_blank', rel: 'noopener' });
+      if (go === 'price-list') return inFlow('tag', '/price-list', 'Price list');
+      if (go === 'invoicing-settings') return inFlow('list-checks', '/invoicing-settings', 'Rules');
+      if (go === 'integrations' && ui.me?.person?.role === 'owner') return inFlow('plug', '/integrations', 'Integrations');
       return null;
     }
     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.`));
+    // The 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);
+    }
+    // The Fix tab: the picked problem (the first when the tab itself is
+    // clicked).
+    function fixBody() {
+      const f = rest[picked ?? 0];
+      if (f.go === 'review' && reviewable) {
+        readReview();
+        return h('section', { class: 'fx-task__fixitem', 'aria-label': f.label }, reviewBody);
+      }
+      return h('section', { class: 'fx-task__fixitem', 'aria-label': f.label },
+        h('strong', {}, f.label), h('p', {}, f.text), f.todo ? h('p', { class: 'fx-dim' }, f.todo) : null, fixLink(f.go));
+    }
+    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() === 'fix' && hasFix ? 'fix' : 'activity')),
+    }, lucide(h, 'panel-right'));
+    const side = sidecar(h, {
+      label: 'Job side panel',
+      tabs: [
+        { id: 'activity', label: 'Activity', icon: 'history', render: () => activityBody },
+        hasFix ? { id: 'fix', label: 'Fix', icon: 'triangle-alert', mark: true, render: () => { picked ??= 0; return fixBody(); } } : null,
+      ].filter(Boolean),
+      onChange: (tab) => {
+        saveSide(tab);
+        sideButton.setAttribute('aria-pressed', String(Boolean(tab)));
+        if (tab !== 'fix') picked = null;
+        fixChips.forEach((chip, i) => chip.setAttribute('aria-pressed', String(tab === 'fix' && picked === i)));
+      },
+    });
+    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('div', { class: 'fx-task__stage' }, stagePill(status), fixChips),
         h('dl', { class: 'fx-task__fields' },
           field('Practitioner', job.practitioner),
           field(job.dueOn ? 'Due' : 'Ordered', job.dueOn ? fullDate(job.dueOn) : job.orderedOn ? fullDate(job.orderedOn) : null, late ? { class: 'fx-task__late' } : {}),
@@ -1235,7 +1287,6 @@ export async function renderJobs(main, ui) {
           // link to an accounting system (its Linked card).
           field('Invoice', invoiceText)),
         chooseBox,
-        fixBox,
         state.fields.length ? h('section', { class: 'fx-task__custom', 'aria-label': 'Custom fields' },
           h('h3', {}, 'Custom fields'),
           h('dl', { class: 'fx-task__fields' }, state.fields.map((f) => h('div', {}, h('dt', {}, f.name), h('dd', {}, fieldControl(job, f)))))) : null,
@@ -1255,14 +1306,15 @@ 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();
-    if (atFix && (chooseBox ?? fixBox)) (chooseBox ?? fixBox).scrollIntoView({ block: 'start' });
+    const last = readSide();
+    if (atFix && hasFix) toggleFix(0);
+    else if (last !== 'closed') side.open(last === 'fix' && hasFix ? 'fix' : 'activity');
+    if (atFix && chooseBox) chooseBox.scrollIntoView({ block: 'start' });
     if (!o) return;
     const when = (iso) => new Date(iso).toLocaleString('en-AU', { day: 'numeric', month: 'short', hour: 'numeric', minute: '2-digit' });
     flow(`/api/invoicing/jobs/${o.id}/activity`).then(({ events }) => {