@arcforgelabs/flow 2026.10.51 → 2026.10.52

package/server/ui/captures.js

@@ -0,0 +1,283 @@
+// 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';
+
+    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),
+      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/flow.css

@@ -199,7 +199,9 @@ body:is([data-state="off"], [data-state="error"], [data-state="no-access"]) .fx-
 .fx-tip {
   position: fixed; top: 0; left: 0; z-index: 1000; max-width: 260px; padding: 4px 8px;
   border: 1px solid var(--fx-line); border-radius: var(--t-radius); background: var(--t-paper); color: var(--t-strong);
-  font: 500 12px/1.3 var(--t-body); pointer-events: none; white-space: nowrap;
+  font: 500 12px/1.3 var(--t-body); pointer-events: none;
+  /* A short name keeps one line; a long help text wraps inside the box. */
+  width: max-content; overflow-wrap: anywhere;
   box-shadow: var(--t-shadow), 0 4px 12px rgba(0, 0, 0, .12);
 }
 
@@ -382,7 +384,7 @@ a.fx-link:hover, a.fx-link:focus-visible { border-color: var(--t-strong); }
 
 /* One integration's page: hero, then the setup beside its facts. */
 .fx-int-page { display: grid; gap: 24px; }
-.fx-int-hero { display: flex; align-items: center; gap: 14px; min-width: 0; }
+.fx-int-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; min-width: 0; }
 .fx-int-hero .fx-title { min-width: 0; font-size: 28px; overflow-wrap: anywhere; }
 .fx-int-hero__actions { position: relative; display: flex; align-items: center; gap: 10px; margin-left: auto; }
 .fx-int-hero__actions .fx-progress { left: auto; right: 0; }
@@ -399,6 +401,9 @@ a.fx-link:hover, a.fx-link:focus-visible { border-color: var(--t-strong); }
 .fx-int-fold > summary::after { content: ''; width: 8px; height: 8px; margin-left: 2px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform 120ms var(--fx-ease); }
 .fx-int-fold[open] > summary::after { transform: rotate(45deg) translateY(-2px); }
 .fx-int-fold:not([open]) { gap: 0; }
+/* A fold inside a section (Settings, Advanced). */
+.fx-int-fold--sub { display: grid; gap: 14px; }
+.fx-int-fold--sub > summary { color: var(--t-dim); font: 600 14.5px/1.3 var(--t-body); }
 .fx-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
 .fx-steps li { position: relative; padding-left: 38px; min-height: 26px; counter-increment: step; font-size: 14.5px; line-height: 1.55; }
 .fx-steps li::before {
@@ -561,7 +566,10 @@ a.fx-strong:hover { text-decoration: underline; }
 .fx-totals dd { margin: 0; text-align: right; font-family: var(--t-data, var(--t-body)); font-variant-numeric: tabular-nums; color: var(--t-strong); }
 .fx-totals__grand { padding-top: 8px; border-top: 1px solid var(--fx-line); font-size: 17px; font-weight: 700; color: var(--t-strong) !important; }
 .fx-doc__meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 20px; border-bottom: 1px solid var(--fx-line-soft); }
-.fx-doc__meta dd { display: grid; margin: 4px 0 0; color: var(--t-strong); font-weight: 600; }
+.fx-doc__meta dd { display: grid; margin: 4px 0 0; color: var(--t-strong); font-weight: 600; overflow-wrap: anywhere; }
+/* A long value stays in its column: text wraps, an email cuts with "…" (full value on hover). */
+.fx-doc__meta > div, .fx-doc__meta dd > * { min-width: 0; }
+.fx-doc__meta dd > .fx-dim { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 @media (max-width: 1320px) {
   .fx-invoice__grid { grid-template-columns: minmax(0, 1fr); }
   .fx-invoice__aside { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
@@ -747,7 +755,7 @@ a.fx-strong:hover { text-decoration: underline; }
 .fx-table__group-row .fx-board__sum { margin-left: 0; }
 /* The Jobs list's group head folds its rows (jobs.js, list): a click on the
    head or its chevron. */
-.fx-table--jobs .fx-table__group { cursor: pointer; }
+.fx-table__group { cursor: pointer; }
 .fx-table--jobs .fx-table__group td.fx-tick-cell { padding-right: 0; }
 .fx-table__fold { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 2px 4px 2px 0; border: 0; background: none; color: var(--t-dim); font: inherit; cursor: pointer; }
 .fx-table__fold > svg { flex: none; transition: transform .15s; }
@@ -1064,6 +1072,38 @@ th:hover > .fx-th-grip::after { background: var(--t-brd-hi); }
 .fx-task__activity li::after { content: ""; position: absolute; left: 5.5px; top: 16px; bottom: 0; width: 1px; background: var(--fx-line); }
 .fx-task__activity li:last-child::after { display: none; }
 .fx-task__activity time { display: block; margin-top: 1px; color: var(--t-mute); font-size: 11.5px; }
+/* Capture (server/ui/captures.js): the tray rows and the result sheet. The
+   sheet reuses the job panel (.fx-task), so a phone gets the same full page. */
+.fx-captures { margin: 0; padding: 0; list-style: none; }
+.fx-captures__row {
+  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 16px;
+  border: 0; border-bottom: 1px solid var(--fx-line-soft); background: transparent; color: var(--t-text);
+  font: inherit; text-align: left; cursor: pointer;
+}
+.fx-captures__row:hover:not(:disabled) { background: var(--t-accent-bg); }
+.fx-captures__row:focus-visible { box-shadow: var(--fx-focus); }
+.fx-captures__row:disabled { cursor: default; }
+.fx-captures__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--t-strong); }
+.fx-dialog.fx-capture { width: min(720px, calc(100vw - 32px)); }
+.fx-capture .fx-task__grid { grid-template-columns: minmax(0, 1fr); }
+.fx-capture__photo { display: block; width: 100%; max-height: 32vh; object-fit: contain; border-radius: var(--t-radius); background: var(--t-bg); }
+.fx-capture__changes { display: grid; margin-top: 12px; }
+.fx-capture__change {
+  display: grid; grid-template-columns: minmax(80px, 1fr) minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px;
+  min-height: 44px; padding: 4px 8px; border-bottom: 1px solid var(--fx-line-soft);
+}
+.fx-capture__field { color: var(--t-dim); }
+.fx-capture__from { color: var(--t-dim); text-decoration: line-through; overflow-wrap: anywhere; }
+.fx-capture__arrow { color: var(--t-dim); }
+.fx-capture__to { color: var(--t-strong); font-weight: 600; overflow-wrap: anywhere; }
+.fx-capture__change[data-unsure="true"] { background: var(--t-warn-bg); }
+.fx-capture__change[data-unsure="true"] .fx-capture__to { color: var(--t-warn); }
+/* Phones and tablets: Capture and the sheet's controls are thumb sized. */
+@media (max-width: 1023px) {
+  .fx-dialog.fx-capture .fx-task__actions .fx-btn { min-height: 44px; }
+  .fx-dialog.fx-capture .fx-task__tools .fx-btn--icon { width: 44px; height: 44px; }
+}
+
 /* A record's phone bar and foot. Hidden above a phone, so the desk panel and
    the invoice header stay as they are. */
 .fx-record, .fx-record__foot { display: none; }
@@ -1246,6 +1286,9 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-setting__head { display: flex; align-items: center; gap: 2px; min-width: 0; }
 .fx-setting__head .fx-help { margin: -4px 0; border: 0; background: none; cursor: pointer; }
 .fx-setting__hint { margin: 0; color: var(--t-dim); font-size: 13px; line-height: 1.45; }
+.fx-history__status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
+.fx-history__day { width: 160px; flex: none; }
+.fx-history__bar { width: 100%; height: 8px; accent-color: var(--t-brand); }
 .fx-setting[data-tone="danger"] .fx-setting__hint { color: var(--t-danger); }
 .fx-setting__control { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }
 .fx-setting__control > .fx-input, .fx-setting__control > .fx-select, .fx-setting__stack { width: 320px; max-width: 100%; }
@@ -1457,6 +1500,8 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
   }
   /* Line 2 is 20px; its cells centre on it. */
   [data-phone-layout="two-line"] .fx-table td[data-phone-slot="meta"] { display: flex; align-items: center; overflow: visible; }
+  /* Plain text on line 2 ends in "…" instead of running under the next cell. */
+  [data-phone-layout="two-line"] .fx-table td[data-phone-slot="meta"]:not(:has(*)) { display: block; overflow: hidden; line-height: 20px; }
   [data-phone-layout="two-line"] td.fx-c-stage,
   [data-phone-layout="two-line"] td.fx-c-status { order: 4; color: inherit; }
   [data-phone-layout="two-line"] .fx-stage { padding-block: 0; line-height: 16px; }
@@ -1506,20 +1551,9 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-set__title { margin: 8px 0 4px; color: var(--t-strong); font: 600 15px/1.3 var(--t-body); }
 .fx-set__hint { color: var(--t-dim); font-size: 13px; line-height: 1.35; }
 .fx-set + .fx-set { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--fx-line); }
-/* Price list (price-list.js): one plain table of Flow's codes. */
-.fx-price { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
-.fx-price__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 16px; }
-.fx-price__head .fx-search { margin: 0 0 6px; width: 260px; }
-@media (max-width: 639px) {
-  .fx-price__head .fx-search { width: 100%; }
-  .fx-price__settings .fx-select { min-height: 44px; }
-}
-.fx-price__table th { position: sticky; top: 0; z-index: 1; }
-.fx-price__table td { padding-top: 9px; padding-bottom: 9px; }
+/* Price list (price-list.js): the codes' table, in the list window. */
 .fx-price__table td.fx-num, .fx-price__table th.fx-num { text-align: right; white-space: nowrap; }
 .fx-price__code { width: 1%; white-space: nowrap; font-family: var(--t-data); font-size: 13px; font-weight: 600; color: var(--t-strong); }
-.fx-price__settings { margin-top: 12px; }
-.fx-ph__actions .fx-tabs__count[data-tone="warn"], .fx-btn .fx-tabs__count[data-tone="warn"] { margin-left: 8px; background: var(--t-warn-bg); color: var(--t-warn); }
 /* Price list › Reconcile (price-reconcile.js): Xero › Import's two views. */
 .fx-prc .fx-pager { margin-bottom: 4px; }
 .fx-prc__finder { display: flex; flex-direction: column; gap: 4px; }
@@ -1559,6 +1593,40 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-cf__choice[aria-checked="true"] { background: var(--fx-hover); color: var(--t-strong); }
 .fx-cf__choice > :first-child { justify-self: start; }
 .fx-cf__choice .fx-lucide { width: 15px; height: 15px; color: var(--t-accent); }
+/* Icon picker (kit.js iconPicker): the button shows the icon; the panel is a
+   search box over a grid of icons. A phone gets a sheet at the foot. */
+.fx-icons { display: inline-flex; }
+.fx-icons__button {
+  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 8px 0 10px;
+  border: 1px solid var(--t-control); border-radius: var(--t-radius); background: var(--t-paper); color: var(--t-strong); cursor: pointer;
+}
+.fx-icons__button > .fx-lucide { width: 18px; height: 18px; }
+.fx-icons__button > .fx-lucide + .fx-lucide { width: 14px; height: 14px; color: var(--t-dim); }
+.fx-icons__button:hover { background: var(--fx-hover); }
+.fx-icons__button:focus-visible { box-shadow: var(--fx-focus); outline: none; }
+.fx-pop.fx-icons__panel { width: 316px; max-width: calc(100vw - 16px); padding: 8px; overflow: hidden; }
+.fx-icons__panel:popover-open { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; }
+.fx-icons__panel .fx-input { min-height: 32px; font-size: 13px; }
+.fx-icons__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 2px; max-height: 248px; overflow-y: auto; }
+.fx-icons__grid > p { grid-column: 1 / -1; margin: 8px 4px; }
+.fx-icons__cell {
+  display: inline-grid; place-items: center; aspect-ratio: 1; min-width: 36px; border: 0; border-radius: var(--t-radius);
+  background: none; color: var(--t-text); cursor: pointer;
+}
+.fx-icons__cell .fx-lucide { width: 18px; height: 18px; }
+.fx-icons__cell:hover, .fx-icons__cell:focus-visible { background: var(--fx-hover); color: var(--t-strong); outline: none; }
+.fx-icons__cell[aria-pressed="true"] { background: var(--t-accent-bg); color: var(--t-accent); box-shadow: inset 0 0 0 1px var(--t-accent-brd, var(--t-accent)); }
+.fx-icons__foot { display: flex; justify-content: flex-end; }
+.fx-icons__foot > [hidden] { display: none; }
+.fx-pop.fx-icons__panel[data-phone-layout="sheet"] {
+  inset: auto 0 0 0; width: 100%; max-width: 100%; max-height: min(70vh, 100%); padding: 12px 12px max(12px, env(safe-area-inset-bottom));
+  border-radius: var(--t-radius-lg) var(--t-radius-lg) 0 0;
+}
+.fx-icons__panel[data-phone-layout="sheet"] .fx-input { min-height: 44px; font-size: 16px; }
+.fx-icons__panel[data-phone-layout="sheet"] .fx-icons__grid { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); max-height: none; }
+.fx-icons__panel[data-phone-layout="sheet"] .fx-icons__cell { min-width: 44px; }
+.fx-icons__panel[data-phone-layout="sheet"] .fx-icons__cell .fx-lucide { width: 22px; height: 22px; }
+.fx-icons__panel[data-phone-layout="sheet"] .fx-icons__foot .fx-btn { min-height: 44px; }
 /* Custom fields manager (custom-fields.js), like ClickUp's Custom Field
    Manager: a toolbar, then one table of type groups that fold. */
 .fx-lucide { display: inline-block; flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
@@ -1714,6 +1782,7 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-rule__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
 .fx-dialog:has(.fx-rule__dialog) { width: min(680px, calc(100vw - 32px)); }
 .fx-rule__dialog .fx-btn--sm { justify-self: start; }
+.fx-rule__name { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
 .fx-rule__conditions { display: grid; gap: 8px; }
 .fx-rule__condition { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 8px; align-items: start; }
 .fx-rule__condition + .fx-rule__condition { padding-top: 8px; border-top: 1px solid var(--fx-line); }
@@ -1830,10 +1899,13 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-listhead > .fx-toolbar > .fx-tabs button { padding-block: 9px; }
 /* Every control in the toolbar is one height (--fx-control-h). Under a
    tab line, the controls keep 8px clear of the line; only the tabs sit on it. */
+/* A finger needs 44px: on a phone or tablet every list's toolbar controls
+   are that tall (the ListHead card's touch rule). */
+@media (max-width: 1023px) { .fx-listhead { --fx-control-h: 44px; } }
 .fx-listhead .fx-toolbar :is(.fx-btn, .fx-chip, .fx-views__add, .fx-views__tab) { min-height: var(--fx-control-h); }
 .fx-listhead .fx-toolbar .fx-btn:not(.fx-btn--sm) { padding-block: 0; font-size: 14px; }
 .fx-listhead .fx-toolbar :is(.fx-btn, .fx-chip) { height: var(--fx-control-h); }
-.fx-listhead .fx-toolbar .fx-find__button { width: var(--fx-control-h); height: var(--fx-control-h); }
+.fx-listhead .fx-toolbar :is(.fx-find__button, .fx-btn--icon) { width: var(--fx-control-h); height: var(--fx-control-h); }
 .fx-listhead .fx-toolbar .fx-find__input { height: var(--fx-control-h); }
 .fx-listhead .fx-toolbar .fx-seg { padding: 2px; }
 .fx-listhead .fx-toolbar .fx-seg__item { min-height: calc(var(--fx-control-h) - 4px); }
@@ -1846,6 +1918,9 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
   .fx-listhead[data-sticky] { position: static; margin-top: 0; padding-top: 0; }
   .fx-listhead__edge + .fx-listhead[data-sticky] { margin-top: -8px; }
   .fx-alerts { margin-bottom: 4px; }
+  /* The tools have their own row under the tabs: no gap under them, so the
+     44px controls still leave seven rows on a small phone. */
+  .fx-listhead > .fx-toolbar:not(.fx-toolbar--plain) > :not(.fx-tabs) { margin-bottom: 0; }
 }
 
 /* The bulk action bar (bulk-bar.js): floats at the foot while rows are

package/server/ui/invoice-rules.js

@@ -18,6 +18,9 @@ const ACTION_LABELS = { wait: 'Wait for a person', skip: 'Never draft', pending:
 const NO_VALUE = ['is_empty', 'is_not_empty', 'has_number', 'number_in_words', 'one_word'];
 const MANY = ['is_one_of', 'is_not_one_of'];
 const TYPED = ['contains', 'does_not_contain', 'starts_with', 'does_not_start_with'];
+// A rule's icon: its own (rule.icon), else the mark of what it does.
+const KIND_MARKS = { pending: 'flag', wait: 'clock', skip: 'ban' };
+export const ruleMark = (rule) => rule.icon ?? KIND_MARKS[rule.action.kind] ?? 'list-checks';
 
 // A rule as one short line: "Job age (days) is more than 90 · Wait for a person".
 export function ruleSummary(rule, meta) {
@@ -42,7 +45,7 @@ export function ruleSummary(rule, meta) {
 }
 
 export function rulesSection(ui, title = 'Rules') {
-  const { h, flow, toast, notice, dialog, me, settingRow } = ui;
+  const { h, flow, toast, notice, dialog, me, settingRow, iconPicker } = ui;
   const disabled = !['owner', 'admin'].includes(me?.person.role);
   const section = h('section', { class: 'fx-set' }, h('h2', { class: 'fx-set__title' }, title), h('div', { class: 'fx-skeleton' }));
   let meta;
@@ -153,6 +156,10 @@ export function rulesSection(ui, title = 'Rules') {
     const action = h('select', { class: 'fx-select', 'aria-label': 'Then' },
       Object.entries(ACTION_LABELS).map(([value, label]) => h('option', { value }, label)));
     action.value = draft?.action.kind ?? 'wait';
+    // With no icon of its own, the rule shows the mark of its Then.
+    const kindMark = () => ruleMark({ action: { kind: action.value } });
+    const icon = iconPicker({ value: draft?.icon ?? null, fallback: kindMark(), label: 'Icon' });
+    action.addEventListener('change', () => icon.fallback(kindMark()));
     // A pending rule's note: what a person must fix. It shows on the draft.
     const note = h('input', {
       class: 'fx-input', maxlength: '200', value: draft?.action.note ?? '', 'aria-label': 'Note',
@@ -191,7 +198,7 @@ export function rulesSection(ui, title = 'Rules') {
     const data = await dialog({
       title: rule ? 'Edit rule' : 'New rule',
       body: h('div', { class: 'fx-fields fx-rule__dialog' },
-        label('Name', name),
+        h('div', { class: 'fx-rule__name' }, label('Icon', icon.element), label('Name', name)),
         label('When', h('span', { class: 'fx-dim' }, 'A job is ready to invoice. A pending rule also checks its draft and the Reference.')),
         label('If all of these match', list, more),
         label('Then', action),
@@ -207,6 +214,7 @@ export function rulesSection(ui, title = 'Rules') {
     if (!data) return null;
     const payload = {
       name: name.value,
+      icon: icon.value(),
       conditions: editors.map((e) => e.read()),
       action: action.value === 'pending' ? { kind: 'pending', note: note.value } : { kind: action.value },
     };