@arcforgelabs/flow 2026.10.51 → 2026.10.53-1

package/server/ui/app.js

@@ -10,6 +10,7 @@ import { getAppearance, onAppearanceChange, setAppearance, loadFonts } from '/as
 import { flowClerkAppearance } from '/assets/ui/clerk-appearance.js';
 import { ACCENT_PRESETS, normalizeAccent, THEME_FAMILIES, tokensFor } from '/assets/theme/themes.js';
 import { renderInvoice, renderInvoiceList } from '/assets/ui/invoicing.js';
+import { renderCaptures } from '/assets/ui/captures.js';
 import { renderContacts } from '/assets/ui/contacts.js';
 import { automationSection, renderAutomations } from '/assets/ui/automations.js';
 import { renderInvoicingSettings, sendModeSection } from '/assets/ui/invoicing-settings.js';
@@ -25,7 +26,7 @@ import { isSearchKey, openSearch } from '/assets/ui/search.js';
 import { alertStrip } from '/assets/ui/alerts.js';
 import { initialsOf, personLabel } from '/assets/ui/person.js';
 import { startTips } from '/assets/ui/tip.js';
-import { crumbs, dialog, edgeFade, fieldError, h, holdButton, linksOpenWith, listFrame, listHead, notice, pageHeader, pickOne, rowMenu, sectionTitle, settingRow, tileCard, tileSection, toast } from '/assets/ui/kit.js';
+import { crumbs, dialog, edgeFade, fieldError, h, holdButton, iconPicker, linksOpenWith, listFrame, listHead, notice, pageHeader, pickOne, rowMenu, sectionTitle, settingRow, tileCard, tileSection, toast } from '/assets/ui/kit.js';
 import { NAV_DEFAULT, NAV_LOCKED } from '/assets/ui/nav-pins.js';
 
 const $ = (id) => document.getElementById(id);
@@ -152,6 +153,7 @@ let me = null;
 // cannot be unpinned (nav-pins.js).
 const VIEWS = {
   jobs: { label: 'Jobs', icon: 'jobs', render: (main) => renderJobs(main, ui()) },
+  captures: { label: 'Capture', icon: 'camera', render: (main) => renderCaptures(main, ui()) },
   invoices: { label: 'Invoices', icon: 'invoices', render: (main, id) => (id ? renderInvoice(main, ui(), id) : renderInvoiceList(main, ui())) },
   contacts: { label: 'Contacts', icon: 'contacts', render: (main, id) => renderContacts(main, ui(), id) },
   reconcile: { label: 'Reconcile', icon: 'reconcile', render: (main, id) => renderReconcile(main, ui(), id) },
@@ -174,6 +176,7 @@ const ICON_PATHS = {
   jobs: '<rect x="3" y="4" width="5" height="16" rx="1"/><rect x="10" y="4" width="5" height="11" rx="1"/><rect x="17" y="4" width="4" height="14" rx="1"/>',
   invoices: '<path d="M6 3h9l4 4v14H6z"/><path d="M14 3v5h5M9 13h7M9 17h5"/>',
   contacts: '<rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="9" cy="10" r="2"/><path d="M6 16c.4-1.6 1.5-2.4 3-2.4s2.6.8 3 2.4M14 9h5M14 13h4"/>',
+  camera: '<path d="M4 8h3l2-3h6l2 3h3v11H4z"/><circle cx="12" cy="13" r="3.5"/>',
   bolt: '<path d="M13 3L5 13h6l-1 8 8-10h-6z"/>',
   rules: '<path d="M3 6l2 2 4-4M3 16l2 2 4-4M13 6h8M13 12h8M13 18h8"/>',
   reconcile: '<path d="M4 8h13M13 4l4 4-4 4M20 16H7M11 12l-4 4 4 4"/>',
@@ -332,7 +335,7 @@ function navigate(event) {
 // The shared pieces a view module (invoicing.js) builds with. Its `go`
 // takes a path, or a link's click event.
 const ui = () => ({
-  h, flow, toast, notice, fieldError, pageHeader, listHead, listFrame, edgeFade, sectionTitle, settingRow, dialog, pickOne, me, holdButton, tileCard, tileSection, crumbs,
+  h, flow, toast, notice, fieldError, pageHeader, listHead, listFrame, edgeFade, sectionTitle, settingRow, dialog, pickOne, iconPicker, me, holdButton, tileCard, tileSection, crumbs,
   go: (target, options) => (typeof target === 'string' ? go(target, options) : navigate(target)),
 });
 
@@ -741,6 +744,9 @@ async function renderIntegration(main, id) {
   // Settings: closed on a phone, open on a wider screen, then as the person
   // leaves it while the page redraws (Connect).
   let settingsOpen = !window.matchMedia?.('(max-width: 639px)').matches;
+  // Advanced: the technical settings and the host's values. Open while the
+  // integration is off, so Connect shows every setting it needs.
+  let advancedOpen = null;
   const alerts = alertStrip(ui(), 'integrations', {
     scope: id,
     onLoad: ({ danger }) => {
@@ -753,10 +759,11 @@ async function renderIntegration(main, id) {
     shown = current;
     const inputs = new Map();
     const rows = [];
+    const advanced = [];
     for (const field of current.fields) {
       if (field.source === 'host') {
         // The host sets it: a value to read, not a box to type in.
-        rows.push(settingRow({
+        advanced.push(settingRow({
           label: field.label,
           help: 'Set by whoever hosts Flow.',
           control: field.secret ? h('span', { class: 'fx-dim' }, 'Set') : h('code', { class: 'fx-setting__value' }, field.value),
@@ -778,7 +785,7 @@ async function renderIntegration(main, id) {
       }
       inputs.set(field.name, { field, input });
       const suggestion = field.suggest === 'callback' ? `${location.origin}/api/${current.id}/oauth/callback` : null;
-      rows.push(settingRow({
+      (field.advanced ? advanced : rows).push(settingRow({
         label: field.label,
         hint: field.unreadable ? 'Stored with another key. Enter it again.' : null,
         help: field.help,
@@ -875,9 +882,12 @@ async function renderIntegration(main, id) {
             h('summary', { class: 'fx-int-section__title' }, 'Set up'),
             h('ol', { class: 'fx-steps' }, guide.steps.map((step) => h('li', {}, step))),
             guide.link ? h('a', { class: 'fx-btn fx-btn--sm', href: guide.link, target: '_blank', rel: 'noopener' }, `${current.name} site ↗`) : null) : null,
-          rows.length ? h('details', { class: 'fx-int-section fx-int-fold', open: settingsOpen, ontoggle: (event) => { settingsOpen = event.currentTarget.open; } },
+          rows.length || advanced.length ? h('details', { class: 'fx-int-section fx-int-fold', open: settingsOpen, ontoggle: (event) => { settingsOpen = event.currentTarget.open; } },
             h('summary', { class: 'fx-int-section__title' }, 'Settings'),
-            h('div', { class: 'fx-settings' }, rows),
+            rows.length ? h('div', { class: 'fx-settings' }, rows) : null,
+            advanced.length ? h('details', { class: 'fx-int-fold fx-int-fold--sub', open: advancedOpen ?? !on, ontoggle: (event) => { advancedOpen = event.currentTarget.open === !on ? null : event.currentTarget.open; } },
+              h('summary', {}, 'Advanced'),
+              h('div', { class: 'fx-settings' }, advanced)) : null,
             canChange && on && inputs.size ? h('div', { class: 'fx-row fx-row--end' }, h('button', { class: 'fx-btn', type: 'button', onclick: () => save(undefined) }, 'Save changes')) : null) : null,
         ].filter(Boolean)),
         h('aside', { class: 'fx-int-page__meta' },
@@ -980,21 +990,26 @@ function xeroImportSection(organisations) {
 }
 
 // Seazona's history read (docs/SEAZONA.md, "The API backfill"): past orders
-// from a start day, a few calls a run inside the rate limit. Start and Stop
-// call no Seazona; the background lane reads. While it runs, the row reads
-// its progress again every 30 seconds, from Flow only.
+// from a start day, a few calls a run inside the rate limit. Start, Resume
+// and Stop call no Seazona; the background lane reads, and skips orders Flow
+// read before. While it runs, the card reads its progress again every 5
+// seconds, from Flow only, and counts down to the lane's next run.
 function seazonaHistorySection() {
   const canAct = ['owner', 'admin'].includes(me?.person?.role);
   const yearAgo = new Date(Date.now() - 365 * 86_400_000).toISOString().slice(0, 10);
-  const from = h('input', { class: 'fx-input', type: 'date', 'aria-label': 'Read from', value: yearAgo, disabled: !canAct });
-  const status = h('span', {}, 'Checking…');
-  const jobs = h('span', { class: 'fx-num' }, '…');
+  const from = h('input', { class: 'fx-input fx-history__day', type: 'date', 'aria-label': 'Read from', value: yearAgo, disabled: !canAct });
+  const status = h('span', { class: 'fx-history__status' }, 'Checking…');
   const control = h('span', { class: 'fx-row' });
+  const bar = h('progress', { class: 'fx-history__bar', max: 1, value: 0, 'aria-label': 'Read so far' });
+  const barRow = settingRow({ label: 'Progress', hint: h('span', {}), control: bar, wide: true });
+  barRow.hidden = true;
   const day = (value) => new Date(`${value}T00:00:00Z`).toLocaleDateString('en-AU', { dateStyle: 'medium', timeZone: 'UTC' });
   const section = h('section', { class: 'fx-set fx-int-section fx-card', style: { padding: '8px 20px 16px' } },
     h('h2', { class: 'fx-set__title' }, 'History'),
-    settingRow({ label: 'Read from', hint: status, help: 'Reads past Seazona orders into Flow, 10 every 2 minutes. Each job waits on hold and never drafts by itself.', control }),
-    settingRow({ label: 'Jobs read', control: jobs }));
+    settingRow({ label: 'Read from', hint: status, help: 'Reads past Seazona orders into Flow, 10 every 2 minutes. Orders Flow read before are skipped. Each job waits on hold and never drafts by itself.', control }),
+    barRow);
+  let timer = null;
+  let tick = null;
   const press = async (button, path, body) => {
     button.disabled = true;
     try {
@@ -1006,7 +1021,14 @@ function seazonaHistorySection() {
     }
     load();
   };
+  const start = (label, body, primary = true) => h('button', {
+    class: `fx-btn fx-btn--sm${primary ? ' fx-btn--primary' : ''}`, type: 'button', disabled: !canAct,
+    onclick: (event) => press(event.currentTarget, '/api/seazona/history/backfill', body()),
+  }, label);
   const load = async () => {
+    clearTimeout(timer);
+    clearInterval(tick);
+    if (!section.isConnected && timer !== null) return;
     let body;
     try {
       body = await flow('/api/seazona/history');
@@ -1015,15 +1037,34 @@ function seazonaHistorySection() {
       return;
     }
     const run = body.backfill;
-    jobs.replaceChildren(String(body.history?.jobs ?? 0));
+    barRow.hidden = !run;
+    if (run) {
+      const span = Date.parse(run.through) - Date.parse(run.from) + 86_400_000;
+      const at = run.running ? run.readingDay ?? run.through : run.resumeFrom ?? run.through;
+      bar.value = run.running || run.resumeFrom ? Math.min(1, Math.max(0, (Date.parse(at) - Date.parse(run.from)) / span)) : 1;
+      barRow.querySelector('.fx-setting__hint').replaceChildren(`${day(run.from)} to ${day(run.through)}`);
+    }
     if (run?.running) {
-      status.replaceChildren(`Reading ${day(run.nextDay ?? run.from)} · ${run.ordersRead} read`);
+      const what = { waiting: 'Waiting', failed: 'Failed' }[run.phase] ?? `Reading ${day(run.readingDay ?? run.through)}`;
+      const reading = `${what} · ${run.ordersRead} read${run.waitingToRead ? ` · ${run.waitingToRead} to read` : ''}`;
+      const next = h('span', { class: 'fx-dim' });
+      const count = () => {
+        const left = Math.round((Date.parse(run.nextRunAt) - Date.now()) / 1000);
+        next.replaceChildren(left > 0 ? `· ${run.phase === 'running' ? 'next' : 'retry'} in ${Math.floor(left / 60)}:${String(left % 60).padStart(2, '0')}` : '· reading now');
+      };
+      if (run.nextRunAt && run.phase !== 'failed') { count(); tick = setInterval(count, 1000); }
+      status.replaceChildren(
+        run.phase === 'running' ? h('span', { class: 'fx-spinner fx-spinner--sm', 'aria-hidden': 'true' }) : '',
+        reading, next, run.cause ? h('span', { class: 'fx-dim' }, `· ${run.cause}`) : '');
       control.replaceChildren(h('button', { class: 'fx-btn fx-btn--sm', type: 'button', disabled: !canAct, onclick: (event) => press(event.currentTarget, '/api/seazona/history/backfill/stop') }, 'Stop'));
-      setTimeout(() => { if (section.isConnected) load(); }, 30_000);
-      return;
+    } else if (run?.resumeFrom) {
+      status.replaceChildren(`Stopped at ${day(run.resumeFrom)} · ${run.ordersRead} read`);
+      control.replaceChildren(from, start('Start', () => ({ from: from.value }), false), start('Resume', () => ({ from: run.resumeFrom, through: run.through })));
+    } else {
+      status.replaceChildren(run ? `Done · ${run.ordersRead} read` : 'Not started');
+      control.replaceChildren(from, start('Start', () => ({ from: from.value })));
     }
-    status.replaceChildren(run ? `${run.stopped ? 'Stopped' : 'Done'} · ${run.ordersRead} read from ${day(run.from)}` : 'Not started');
-    control.replaceChildren(from, h('button', { class: 'fx-btn fx-btn--sm fx-btn--primary', type: 'button', disabled: !canAct, onclick: (event) => press(event.currentTarget, '/api/seazona/history/backfill', { from: from.value }) }, 'Start'));
+    timer = setTimeout(() => { if (section.isConnected && run?.running) load(); }, 5_000);
   };
   load();
   return section;

package/server/ui/capture-fields.js

@@ -0,0 +1,17 @@
+// The job fields the photo reader asks for (server/core/reader.js) and the
+// capture screens label (server/ui/captures.js). No DOM, so both can use it.
+// `needed` fields are read again by the larger model when they are not sure.
+export const JOB_FIELDS = Object.freeze([
+  Object.freeze({ key: 'case_number', label: 'Case number', needed: true }),
+  Object.freeze({ key: 'practice', label: 'Practice', needed: true }),
+  Object.freeze({ key: 'dentist', label: 'Dentist', needed: false }),
+  Object.freeze({ key: 'work', label: 'Work', needed: true }),
+  Object.freeze({ key: 'teeth', label: 'Teeth', needed: false }),
+  Object.freeze({ key: 'shade', label: 'Shade', needed: false }),
+  Object.freeze({ key: 'due_date', label: 'Due date', needed: false }),
+  Object.freeze({ key: 'notes', label: 'Notes', needed: false }),
+]);
+
+// Below this a needed field is read again (FLOW_READER_SURE_LINE can move
+// that line), and the screens mark a value as not sure (amber).
+export const SURE_LINE = 0.8;

package/server/ui/captures.js

@@ -0,0 +1,289 @@
+// Capture (/captures): a photo of a handwritten lab form becomes a proposed
+// job change (RFC #357, docs/DATA_MODEL.md "Storage"). One tap opens the
+// phone's own camera. Reading runs on the server, so the person can shoot the
+// next form at once. The tray lists the captures; a row opens the result
+// sheet: the photo, the job, only the fields that change (old, then new;
+// amber when the reader was not sure) and Apply at the foot. On a desk a
+// photo can also be dropped or pasted on the page, and the sheet takes J, K
+// and Enter.
+import { lucide } from '/assets/ui/custom-fields.js';
+import { JOB_FIELDS, SURE_LINE } from '/assets/ui/capture-fields.js';
+import { isPhone } from '/assets/ui/mobile.js';
+import { recordBar } from '/assets/ui/sidecar.js';
+
+// The phone sends a smaller copy: about 1,600 px on the long side.
+const LONG_SIDE = 1600;
+const POLL_MS = 3000;
+const POLL_MAX = 40;
+const OFF = 'Capture needs a file store (FLOW_STORAGE).';
+const STATE = { reading: 'Reading', ready: 'Ready', problem: 'Problem', done: 'Done' };
+const TONE = { reading: 'info', ready: 'success', problem: 'warn', done: 'mute' };
+
+const valueOf = (capture, key) => capture.read?.fields?.find((f) => f.key === key)?.value || '';
+
+// One line for a capture: the practice and the work, else the case number.
+function titleOf(capture) {
+  const practice = valueOf(capture, 'practice');
+  const work = valueOf(capture, 'work');
+  const text = [practice, work].filter(Boolean).join(' · ') || valueOf(capture, 'case_number');
+  if (text) return text;
+  if (capture.state === 'reading') return 'Reading…';
+  const problem = capture.problem ?? '';
+  return problem ? problem[0].toUpperCase() + problem.slice(1) : 'Photo';
+}
+
+async function shrink(file) {
+  try {
+    const bitmap = await createImageBitmap(file);
+    const scale = Math.min(1, LONG_SIDE / Math.max(bitmap.width, bitmap.height));
+    const canvas = document.createElement('canvas');
+    canvas.width = Math.round(bitmap.width * scale);
+    canvas.height = Math.round(bitmap.height * scale);
+    canvas.getContext('2d').drawImage(bitmap, 0, 0, canvas.width, canvas.height);
+    const blob = await new Promise((resolve) => canvas.toBlob(resolve, 'image/jpeg', 0.85));
+    return blob ?? file;
+  } catch {
+    // A type the browser cannot draw (HEIC on some browsers) goes as it is.
+    return file;
+  }
+}
+
+async function upload(file) {
+  const body = await shrink(file);
+  const token = await window.Clerk.session?.getToken();
+  const res = await fetch('/api/captures', {
+    method: 'POST',
+    headers: {
+      Authorization: `Bearer ${token}`,
+      'Content-Type': body.type || 'image/jpeg',
+      'Idempotency-Key': crypto.randomUUID(),
+      'X-Flow-Capture-Source': isPhone() ? 'phone' : 'desk',
+    },
+    body,
+  });
+  const answer = await res.json().catch(() => ({}));
+  if (!res.ok) throw new Error(res.status === 404 ? OFF : answer.error || `HTTP ${res.status}`);
+  return answer.capture;
+}
+
+// The Capture button, on Capture and in the Jobs toolbar: one tap opens the
+// phone's own camera; a desk picks files. `send(files)` uploads each image
+// and calls `added(capture)`, then `done()`.
+export function captureButton(ui, { icon = false, added = () => {}, done = () => {} } = {}) {
+  const { h, toast } = ui;
+  const picker = h('input', { type: 'file', accept: 'image/*', hidden: true });
+  if (isPhone()) picker.setAttribute('capture', 'environment');
+  else picker.multiple = true;
+  const button = icon
+    ? h('button', { class: 'fx-btn fx-btn--ghost fx-btn--icon fx-capture__shoot', type: 'button', 'aria-label': 'Capture', title: 'Capture', onclick: () => picker.click() }, lucide(h, 'camera'))
+    : h('button', { class: 'fx-btn fx-btn--primary fx-capture__shoot', type: 'button', onclick: () => picker.click() }, lucide(h, 'camera'), 'Capture');
+  const send = async (files) => {
+    for (const file of [...files].filter((f) => f.type.startsWith('image/'))) {
+      try {
+        added(await upload(file));
+      } catch (error) {
+        toast(error.message, 'danger', { stay: true });
+      }
+    }
+    done();
+  };
+  picker.addEventListener('change', () => {
+    const files = [...picker.files];
+    picker.value = '';
+    send(files);
+  });
+  return { nodes: [button, picker], send };
+}
+
+export async function renderCaptures(main, ui) {
+  const { h, flow, toast, notice, listHead, listFrame } = ui;
+  const shoot = captureButton(ui, {
+    added: (capture) => { rows = [capture, ...rows]; draw(); },
+    done: () => { polls = 0; load(); },
+  });
+  const head = listHead('Captures', { actions: shoot.nodes });
+  const list = h('ul', { class: 'fx-captures', 'aria-label': 'Captures' });
+  const frame = listFrame(main, list);
+  main.append(...head.nodes, frame.element);
+
+  let rows = [];
+  let labels = new Map(JOB_FIELDS.map((f) => [f.key, f.label]));
+  let polls = 0;
+  let timer = null;
+
+  const draw = () => {
+    const ready = rows.filter((c) => c.state === 'ready').length;
+    frame.count(ready ? `${ready} ready` : '');
+    list.replaceChildren(...(rows.length ? rows.map((capture) => h('li', {},
+      h('button', { class: 'fx-captures__row', type: 'button', disabled: capture.state === 'reading', onclick: () => openSheet(capture.id) },
+        h('span', { class: 'fx-captures__title', title: titleOf(capture) }, titleOf(capture)),
+        h('span', { class: 'fx-status', 'data-tone': TONE[capture.state] }, STATE[capture.state])))) : [h('li', { class: 'fx-empty' }, 'No captures.')]));
+  };
+
+  async function load() {
+    try {
+      ({ captures: rows } = await flow('/api/captures'));
+      draw();
+    } catch (error) {
+      const off = error.status === 404;
+      list.replaceChildren(h('li', {}, notice(off ? OFF : error.message, off ? 'warn' : 'danger', off ? 'Off.' : null)));
+      return;
+    }
+    clearTimeout(timer);
+    if (rows.some((c) => c.state === 'reading') && polls < POLL_MAX && frame.element.isConnected) {
+      polls += 1;
+      timer = setTimeout(load, POLL_MS);
+    }
+  }
+
+  // A desk: a photo dropped on the list or pasted on the page is a capture.
+  // `main` stays across pages, so the listeners hang on this page's frame.
+  frame.element.addEventListener('dragover', (event) => { if (event.dataTransfer?.types.includes('Files')) event.preventDefault(); });
+  frame.element.addEventListener('drop', (event) => {
+    if (!event.dataTransfer?.files.length) return;
+    event.preventDefault();
+    shoot.send(event.dataTransfer.files);
+  });
+  const paste = (event) => {
+    if (!frame.element.isConnected) { document.removeEventListener('paste', paste); return; }
+    const files = [...(event.clipboardData?.files ?? [])];
+    if (files.length && !document.querySelector('dialog[open]')) shoot.send(files);
+  };
+  document.addEventListener('paste', paste);
+
+  // The result sheet: a dialog on a desk, the whole screen on a phone (the
+  // job panel's layout: record bar, body, the action fixed at the foot).
+  async function openSheet(id) {
+    let capture;
+    try {
+      ({ capture } = await flow(`/api/captures/${id}`));
+    } catch (error) {
+      toast(error.message, 'danger');
+      return;
+    }
+    const element = h('dialog', { class: 'fx-dialog fx-task fx-capture', 'aria-label': 'Capture' });
+    const close = () => element.close();
+    const at = rows.findIndex((c) => c.id === id);
+    // The next capture that has a result; one still reading is skipped.
+    const step = (delta) => {
+      for (let i = at + delta; i >= 0 && i < rows.length; i += delta) {
+        if (rows[i].state === 'reading') continue;
+        close();
+        openSheet(rows[i].id);
+        return;
+      }
+    };
+    const proposal = capture.proposal ?? { changes: [] };
+    const match = capture.match ?? { outcome: 'none', jobs: [] };
+    const job = match.jobs.find((j) => j.jobId === proposal.jobId) ?? null;
+    const jobLine = job
+      ? `${job.caseRef ? `Job ${job.caseRef}` : job.jobId} · ${job.clientName ?? ''}`
+      : proposal.action === 'create' ? 'New job' : 'Pick a job';
+
+    // A field the work system owns: Apply leaves it; the person changes it
+    // there (until a two-way sync can send it, #357).
+    const system = proposal.action === 'update' && proposal.jobId ? proposal.jobId.split(':')[0] : null;
+    const systemName = system ? system[0].toUpperCase() + system.slice(1) : null;
+    const elsewhere = (change) => systemName && !change.field.startsWith('custom_');
+    const changeRow = (change) => h('div', { class: 'fx-capture__change', 'data-unsure': change.sure != null && change.sure < SURE_LINE ? 'true' : 'false' },
+      h('span', { class: 'fx-capture__field' }, labels.get(change.field) ?? change.field,
+        elsewhere(change) ? h('span', { class: 'fx-capture__where', title: `Change this in ${systemName}` }, systemName) : null),
+      h('span', { class: 'fx-capture__from' }, change.from || '–'),
+      h('span', { class: 'fx-capture__arrow', 'aria-hidden': 'true' }, '→'),
+      h('span', { class: 'fx-capture__to' }, change.to));
+
+    const decide = async (decision) => {
+      try {
+        await flow(`/api/captures/${id}/decision`, { method: 'POST', body: JSON.stringify({ decision }) });
+        toast(decision === 'applied' ? 'Applied.' : 'Discarded.', 'success');
+        close();
+        load();
+      } catch (error) {
+        toast(error.message, 'danger', { stay: true });
+      }
+    };
+
+    const pickJob = async () => {
+      const chosen = await ui.pickOne({
+        title: 'Other job', label: 'Jobs', find: 'Find', empty: 'No jobs.', confirm: 'Use',
+        load: async () => {
+          const { jobs } = await flow('/api/invoicing/board');
+          const near = new Map(match.jobs.map((j, i) => [j.jobId, i]));
+          return jobs.map((j) => ({ ...j, jobId: `${j.sourceSystem}:${j.sourceJobRef}` }))
+            .sort((a, b) => (near.get(a.jobId) ?? 99) - (near.get(b.jobId) ?? 99));
+        },
+        item: (j) => ({ value: j.jobId, title: j.clientName ?? j.jobId, meta: j.caseRef ? `Job ${j.caseRef}` : null }),
+      });
+      const jobId = chosen?.jobId ?? null;
+      if (!jobId) return;
+      try {
+        await flow(`/api/captures/${id}/proposal`, { method: 'POST', body: JSON.stringify({ ...proposal, action: 'update', jobId }) });
+        close();
+        openSheet(id);
+      } catch (error) {
+        toast(error.message, 'danger');
+      }
+    };
+
+    // A capture the reader could not read: type the fields that find the job.
+    const typeIt = () => {
+      const inputs = ['case_number', 'practice', 'work'].map((key) => h('input', { class: 'fx-input', name: key, 'aria-label': labels.get(key), placeholder: labels.get(key) }));
+      const form = h('form', { class: 'fx-fields', onsubmit: async (event) => {
+        event.preventDefault();
+        const fields = Object.fromEntries(inputs.map((input) => [input.name, input.value.trim()]).filter(([, v]) => v));
+        try {
+          await flow(`/api/captures/${id}/match`, { method: 'POST', body: JSON.stringify({ fields }) });
+          close();
+          openSheet(id);
+        } catch (error) {
+          toast(error.message, 'danger');
+        }
+      } }, inputs, h('button', { class: 'fx-btn', type: 'submit' }, 'Find job'));
+      return form;
+    };
+
+    const ready = capture.state === 'ready';
+    const actions = ready ? [
+      h('button', { class: 'fx-btn', type: 'button', onclick: () => decide('discarded') }, 'Discard'),
+      match.jobs.length || proposal.action === 'update' ? h('button', { class: 'fx-btn', type: 'button', onclick: pickJob }, 'Other job') : null,
+      h('button', { class: 'fx-btn fx-btn--primary', type: 'button', autofocus: true, disabled: proposal.action === 'update' && !proposal.jobId, onclick: () => decide('applied') }, 'Apply'),
+    ] : capture.state === 'problem' ? [h('button', { class: 'fx-btn', type: 'button', onclick: () => decide('discarded') }, 'Discard')] : [];
+
+    element.append(
+      recordBar(h, {
+        title: jobLine, label: 'Capture', onBack: close,
+        prev: { label: 'Previous capture', disabled: at <= 0, onclick: () => step(-1) },
+        next: { label: 'Next capture', disabled: at < 0 || at >= rows.length - 1, onclick: () => step(1) },
+      }),
+      h('div', { class: 'fx-task__grid' }, h('div', { class: 'fx-task__main' },
+        h('header', { class: 'fx-task__head' }, h('span'), h('div', { class: 'fx-task__tools' },
+          h('button', { class: 'fx-btn fx-btn--ghost fx-btn--icon', type: 'button', 'aria-label': 'Close', title: 'Close', onclick: close }, '✕'))),
+        capture.link ? h('img', { class: 'fx-capture__photo', src: capture.link.url, alt: 'Form photo' }) : null,
+        h('h2', { class: 'fx-task__title' }, jobLine),
+        capture.state === 'problem' ? notice(capture.problem, 'warn', null, { short: capture.problem }) : null,
+        capture.state === 'problem' ? typeIt() : null,
+        ready && proposal.changes.length ? h('div', { class: 'fx-capture__changes' }, proposal.changes.map(changeRow)) : null,
+        ready && !proposal.changes.length ? h('p', { class: 'fx-dim' }, 'No change.') : null,
+        h('div', { class: 'fx-task__actions' }, actions))));
+    element.addEventListener('click', (event) => { if (event.target === element) close(); });
+    // Keys: J next, K previous (not while typing). Apply has the focus, so
+    // Enter applies.
+    element.addEventListener('keydown', (event) => {
+      if (event.target.closest('input, textarea, select') || event.metaKey || event.ctrlKey || event.altKey) return;
+      if (event.key !== 'j' && event.key !== 'k') return;
+      event.preventDefault();
+      step(event.key === 'j' ? 1 : -1);
+    });
+    element.addEventListener('close', () => element.remove());
+    document.body.append(element);
+    element.showModal();
+  }
+
+  try {
+    const { fields } = await flow('/api/custom-fields');
+    labels = new Map([...labels, ...fields.map((f) => [`custom_${f.id}`, f.name])]);
+  } catch {
+    // The standard labels still show; a custom field shows its key.
+  }
+  await load();
+}

package/server/ui/columns.js

@@ -17,15 +17,20 @@
 //   widths()         the saved widths
 //   change(patch)    saves { columns } or { widths }
 //   hidden()         [{ id, label }] the + menu lists (no hidden: no +)
-//   extra(column, item)  menu nodes before Move (Sort, Edit custom field)
+//   extra(column, item)  menu nodes before Move (Edit custom field)
+//   sorting          the heads sort the list (Jobs, Price list), as
+//                    ClickUp's: { sortOf(columnId) (the sort key, or null),
+//                    sorts(), change({ sorts }), dirWords(by) }
 // table({ columns, rows, lead, className }), per draw, answers the table:
 //   columns  the shown columns, in order: { id, label, kind, cell(row),
-//            num?, className?, sort?(): node, icon?, fixed? }. An icon
+//            num?, className?, icon?, fixed? }. An icon
 //            shows in place of the label (the label is its name). A fixed
 //            column keeps its place: no drag, no Move, no Hide.
 //   rows     the <tbody> nodes (rowCells builds a row's cells)
 //   lead     <th> nodes before the columns (the tick column)
 //
+// groupHead(h, config) is a grouped list's head row (below).
+//
 // Cells every list shares: dateCell (a short date), personCell (a person's
 // initials) and fieldColumn (one of the lab's custom fields as a column, on
 // Jobs and on Invoices, where it is the invoice's job's value).
@@ -33,6 +38,7 @@ import { lucide } from '/assets/ui/custom-fields.js';
 import { endWidth, LEAD_WIDTH, MAX_WIDTH, minWidth, moveColumn, TAIL_WIDTH, tableWidth, widthOf } from '/assets/ui/job-view.js';
 import { applyPhoneRule, assignPhoneSlots, phoneSlot } from './mobile.js';
 import { initialsOf } from '/assets/ui/person.js';
+import { ICONS, svg } from '/assets/ui/view-bar.js';
 
 const fullDate = (iso) => new Date(`${iso}T00:00:00`).toLocaleDateString('en-AU', { day: 'numeric', month: 'short', year: 'numeric' });
 // A list date, short: Today, Tomorrow or Yesterday, else day/month (and
@@ -132,14 +138,73 @@ export function onRightButton(event, open) {
   else open();
 }
 
+// A group's head row in a grouped list (Jobs, Price list): a fold button
+// with the group's `badge` (its name and count), then `extra` (a sum). A
+// click on the row folds the group or opens it. `lead` is the cells before
+// the columns (a tick); `span` is how many cells the head covers after them.
+const CHEVRON = '<svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><path d="m6 3.5 4.5 4.5L6 12.5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+export function groupHead(h, { label, badge, open, onFold, lead = [], span, extra = null }) {
+  const chevron = h('span', {});
+  chevron.innerHTML = CHEVRON;
+  const toggle = h('button', {
+    type: 'button', class: 'fx-table__fold', 'aria-expanded': String(open), 'aria-label': `${label}. ${open ? 'Fold' : 'Open'} the group`,
+    onclick: (event) => { event.stopPropagation(); onFold(); },
+  }, chevron.firstChild, badge);
+  return h('tr', { class: `fx-table__group${open ? '' : ' fx-table__group--folded'}`, onclick: onFold },
+    lead, h('td', { colspan: String(span) }, h('span', { class: 'fx-table__group-row' }, toggle, extra)));
+}
+
 export function columnTable(h, config) {
   const menu = columnPopover(h);
   const ids = () => config.order?.() ?? [];
   const widths = () => config.widths?.() ?? {};
 
+  // A column head's sort button: it shows on hover, or always while it
+  // sorts. A click sorts one way, again the other way, and a third time
+  // takes the sort off. A right-click on a sorting head opens a small menu:
+  // change the direction, or clear the sort.
+  const sorting = config.sorting ?? null;
+  function sortButton(column) {
+    const by = sorting?.sortOf(column.id);
+    if (!by) return null;
+    const sorts = sorting.sorts();
+    const change = (next) => sorting.change({ sorts: next });
+    const at = sorts.findIndex((s) => s.by === by);
+    const on = at >= 0 ? sorts[at] : null;
+    const [up, down] = sorting.dirWords(by);
+    const next = () => {
+      if (!on) change([{ by, dir: 'asc' }]);
+      else if (on.dir === 'asc') change(sorts.map((s, n) => (n === at ? { ...s, dir: 'desc' } : s)));
+      else change(sorts.filter((_, n) => n !== at));
+    };
+    const flip = () => change(sorts.map((s, n) => (n === at ? { ...s, dir: s.dir === 'asc' ? 'desc' : 'asc' } : s)));
+    const words = on ? `Sorted ${on.dir === 'asc' ? up : down}. Click to ${on.dir === 'asc' ? `sort ${down}` : 'clear the sort'}` : `Sort by ${column.label}`;
+    return h('button', {
+      type: 'button', class: `fx-th-sort${on ? ' fx-th-sort--on' : ''}`, 'aria-label': words, title: words,
+      onclick: (event) => { event.stopPropagation(); next(); },
+      oncontextmenu: (event) => {
+        if (!on) return;
+        event.preventDefault();
+        event.stopPropagation();
+        onRightButton(event, () => menu.show([
+          h('button', { type: 'button', class: 'fx-pop__item', role: 'menuitemcheckbox', 'aria-checked': 'true', title: 'Change the direction', onclick: () => { menu.close(); flip(); } },
+            h('span', { class: 'fx-pop__tick' }, lucide(h, on.dir === 'asc' ? 'arrow-up' : 'arrow-down')), h('span', {}, `Sort by ${column.label}`), h('span', { class: 'fx-pop__end' }, svg(ICONS.tick))),
+          menu.item('ban', 'Clear sort', () => change(sorts.filter((_, n) => n !== at))),
+        ], event));
+      },
+    }, lucide(h, on ? (on.dir === 'asc' ? 'arrow-up' : 'arrow-down') : 'chevrons-up-down'),
+    on && sorts.length > 1 ? h('span', { class: 'fx-th-sort__n' }, String(at + 1)) : null);
+  }
+
   function openMenu(column, event) {
     const parts = [];
     if (column) {
+      const by = sorting?.sortOf(column.id);
+      if (by) {
+        const [up, down] = sorting.dirWords(by);
+        parts.push(menu.item('arrow-up-narrow-wide', `Sort: ${up}`, () => sorting.change({ sorts: [{ by, dir: 'asc' }] })),
+          menu.item('arrow-down-wide-narrow', `Sort: ${down}`, () => sorting.change({ sorts: [{ by, dir: 'desc' }] })), menu.sep());
+      }
       parts.push(...(config.extra?.(column, menu.item) ?? []));
       if (!column.fixed) {
         const order = ids();
@@ -212,7 +277,7 @@ export function columnTable(h, config) {
         class: [c.num ? 'fx-num' : null, c.fixed ? null : 'fx-th--drag'].filter(Boolean).join(' ') || null,
         'data-col': c.id,
         oncontextmenu: (event) => { event.preventDefault(); onRightButton(event, () => openMenu(c, event)); },
-      }, h('span', { class: 'fx-th-cell' }, button, c.sort?.() ?? null), grip);
+      }, h('span', { class: 'fx-th-cell' }, button, sortButton(c)), grip);
       resizer(grip, c, n);
       if (!c.fixed) dragger(button, th, c);
       return th;

package/server/ui/custom-fields.js

@@ -111,7 +111,7 @@ export async function renderCustomFields(main, ui) {
   const { h, flow, toast, notice, dialog, pageHeader, me } = ui;
   const disabled = !['owner', 'admin'].includes(me?.person.role);
   const host = h('div', { class: 'fx-card fx-cfm__card' }, h('div', { class: 'fx-skeleton' }));
-  const addButton = h('button', { class: 'fx-btn fx-btn--primary fx-btn--sm', type: 'button', disabled }, 'Create custom field');
+  const addButton = h('button', { class: 'fx-btn fx-btn--primary fx-btn--sm', type: 'button', disabled, title: 'New custom field' }, lucide(h, 'plus'), 'New');
   main.append(pageHeader('Custom fields', { help: { href: DOCS, label: 'How custom fields work' } }), host);
 
   let data = null;
@@ -309,7 +309,7 @@ export async function renderCustomFields(main, ui) {
   ]);
   const filterButton = h('button', { class: 'fx-chip fx-cfm__tool fx-cfm__tool--dashed', type: 'button' });
   const filterMenu = popMenu(filterButton, (close) => [
-    item(view.archived ? 'check' : null, 'Show archived custom fields', () => { view.archived = !view.archived; close(); draw(); }, { role: 'menuitemcheckbox', checked: view.archived }),
+    item(view.archived ? 'check' : null, 'Archived', () => { view.archived = !view.archived; close(); draw(); }, { role: 'menuitemcheckbox', checked: view.archived }),
   ]);
   const toolbar = h('div', { class: 'fx-cfm__bar' }, search, typeButton, typeMenu, filterButton, filterMenu, h('span', { class: 'fx-cfm__gap' }), addButton);
   const table = h('div', { class: 'fx-cfm', role: 'table', 'aria-label': 'Custom fields' });
@@ -505,15 +505,9 @@ export async function renderCustomFields(main, ui) {
       parts.push(...group('archived', { text: 'Archived', icon: 'archive', color: 'gray' }, fields));
     }
     if (!count && (view.q || view.types.size)) parts.push(h('p', { class: 'fx-cfm__empty' }, 'No custom field matches.'));
-    if (!data.fields.length && !view.q && !view.types.size) {
-      parts.push(h('p', { class: 'fx-cfm__empty' }, 'No custom fields yet. Create one, for example Priority or Technician, to group the Jobs board by it.'));
-    }
+    else if (!count) parts.push(h('p', { class: 'fx-cfm__empty' }, 'No custom fields'));
     table.replaceChildren(...parts);
-    // The count is what the table shows, the work systems' fields too.
-    foot.replaceChildren(h('span', {}, `${count} ${count === 1 ? 'custom field' : 'custom fields'}`));
   }
-  const foot = h('div', { class: 'fx-cfm__foot' });
-  host.append(foot);
 
   async function load() {
     try {