@arcforgelabs/flow 2026.10.44 → 2026.10.46

package/server/ui/job-view.js

@@ -418,6 +418,24 @@ export function widthOf(column, widths) {
   return Number.isFinite(saved) ? Math.round(Math.min(MAX_WIDTH, Math.max(minWidth(column.kind), saved))) : startWidth(column.kind);
 }
 
+// A list table's columns: the tick column at the start, the end column
+// (+) at least this wide.
+export const LEAD_WIDTH = 44;
+export const TAIL_WIDTH = 40;
+
+// The width a list table needs for its columns, with the end column at
+// its least.
+export function tableWidth(columns, widths, lead = 0) {
+  return columns.reduce((sum, c) => sum + widthOf(c, widths), 0) + lead * LEAD_WIDTH + TAIL_WIDTH;
+}
+
+// The end column's width: the room left after the other columns, so the
+// head and rows reach the window's right edge (as HubSpot's), never under
+// TAIL_WIDTH. A window not drawn yet (width 0) gets TAIL_WIDTH.
+export function endWidth(need, room) {
+  return Math.max(TAIL_WIDTH, Math.floor(room) - (need - TAIL_WIDTH));
+}
+
 // Saved widths as Flow keeps them: known-looking ids, whole pixels in range.
 // The minimum per kind applies when a width is drawn (widthOf), since the
 // server does not know a custom column's kind.
@@ -455,18 +473,29 @@ export function inOrder(columns, ids) {
 // shows the invoice's problem; Number shows on the tabs with numbers only.
 export const INVOICE_COLUMNS = Object.freeze({
   number: 'Number', client: 'Client', reference: 'Reference', date: 'Date', total: 'Total', status: 'Status', linked: 'Linked',
+  due: 'Due', case: 'Case', practitioner: 'Practitioner', shipped: 'Shipped',
+});
+// The Invoices columns a person sees before they choose: the others (the
+// invoice's due date, its job's case, practitioner and shipped date, and
+// the lab's custom fields) wait in the + menu.
+export const INVOICE_SHOWN = Object.freeze(['number', 'client', 'reference', 'date', 'total', 'status', 'linked']);
+// A person's Invoices columns: custom fields ('field:<id>') are columns too.
+export const invoiceColumnsView = (input) => normaliseListView(input, INVOICE_COLUMNS, { shown: INVOICE_SHOWN, fields: true });
+export const PRICE_COLUMNS = Object.freeze({
+  code: 'Code', name: 'Name', price: 'Price', tax: 'Tax',
 });
 export const RECONCILE_COLUMNS = Object.freeze({
   kind: 'Type', client: 'Client', detail: 'Detail', date: 'Date', total: 'Total', possible: 'Possible',
 });
 
-// A person's view of a list with set columns (Invoices, Reconcile): the
-// shown columns in order (every one when none is saved) and their widths.
-export function normaliseListView(input, columns) {
+// A person's view of a list with set columns (Invoices, Reconcile, Price list): the
+// shown columns in order (`shown`, else every one, when none is saved) and
+// their widths. With `fields`, a custom field ('field:<id>') is a column too.
+export function normaliseListView(input, columns, { shown = null, fields = false } = {}) {
   const value = input && typeof input === 'object' && !Array.isArray(input) ? input : {};
   const ids = Object.keys(columns);
   return {
-    columns: cleanColumnIds(value.columns, (id) => ids.includes(id)) ?? ids,
+    columns: cleanColumnIds(value.columns, (id) => ids.includes(id) || (fields && FIELD_GROUP.test(id))) ?? [...(shown ?? ids)],
     widths: cleanWidths(value.widths),
   };
 }

package/server/ui/jobs.js

@@ -13,7 +13,7 @@
 // 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 { columnTable, dateCell, fieldColumn, onRightButton, personCell, 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';
@@ -24,7 +24,7 @@ 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 { clipLabel } 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';
@@ -52,18 +52,6 @@ const STAGE_RANK = { 'In work': 0, Drafted: 2, Problem: 2, 'Ready to invoice': 4
 
 const showDate = (iso) => (iso ? new Date(`${iso}T00:00:00`).toLocaleDateString('en-AU', { day: 'numeric', month: 'short' }) : '—');
 const fullDate = (iso) => (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
-// year when it is not this year).
-const shortDate = (iso) => {
-  if (!iso) return '—';
-  const at = new Date(`${iso}T00:00:00`);
-  const now = new Date();
-  const days = Math.round((at - new Date(now.getFullYear(), now.getMonth(), now.getDate())) / 86_400_000);
-  if (days === 0) return 'Today';
-  if (days === 1) return 'Tomorrow';
-  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' });
-};
 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);
@@ -136,7 +124,7 @@ export async function renderJobs(main, ui) {
   // In the list, ticked rows get the same floating bar as Invoices.
   const bulk = bulkBar(ui, { label: 'Ticked jobs' });
   const frame = listFrame(main, host);
-  main.append(...listHead('Jobs', { views: views.element, start: controls, end: [find.element, toggle] }).nodes, frame.element, bulk.element);
+  main.append(...listHead('Jobs', { views: views.element, 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),
@@ -799,7 +787,7 @@ export async function renderJobs(main, ui) {
   // The list's columns, in the order the person chose them. One column holds
   // one field; each date has its own column.
   function listColumns() {
-    const day = (iso) => h('time', { datetime: iso ?? null, title: iso ? fullDate(iso) : null }, shortDate(iso));
+    const day = (iso) => dateCell(h, 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', className: 'fx-dim', cell: (job) => caseNumber(job) ?? '—' },
@@ -821,31 +809,12 @@ export async function renderJobs(main, ui) {
     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', className: 'fx-dim', cell };
+      return field ? fieldColumn(h, field, { id, valueOf: (job) => valueOf(job, field.id)?.value ?? null, people: state.people }) : null;
     }).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.
-  function personBadge(job, field) {
-    const value = field ? valueOf(job, field.id)?.value ?? null : null;
-    if (!value) return h('span', { class: 'fx-dim' }, '—');
-    const name = state.people.find((p) => p.id === value)?.name ?? 'Former person';
-    return h('span', { class: 'fx-avatar fx-avatar--sm', role: 'img', 'aria-label': name, title: name }, initialsOf(name));
-  }
-
-  // A job's custom field value as text.
-  function fieldText(job, field) {
-    const value = field ? valueOf(job, field.id)?.value ?? null : null;
-    if (value == null || value === false) return '—';
-    if (field.type === 'checkbox') return 'Yes';
-    if (field.type === 'person') return state.people.find((p) => p.id === value)?.name ?? 'Former person';
-    if (field.type === 'dropdown') return field.options?.find((o) => o.id === value)?.name ?? '—';
-    if (field.type === 'date') return showDate(value);
-    return String(value);
-  }
+  const personBadge = (job, field) => personCell(h, field ? valueOf(job, field.id)?.value ?? null : null, state.people);
 
   // The list: one block per group, with the group's label over its rows.
   // A tick column at the left; a group's head has a tick for every job in

package/server/ui/kit.js

@@ -63,22 +63,28 @@ export function pageHeader(title, { count = null, help = null, actions = [] } =
 
 // The top of a list page (Jobs, Invoices, Reconcile), laid out the same on
 // every list and in Board and List alike, so nothing moves when a person
-// switches: the title row, a row for saved view tabs (`views`: the page's
-// savedViews element, else an empty slot that stays hidden), then one toolbar with `start` at the left (tabs, Group,
-// Sort, Filter) and `end` at the right (search, Board/List), then the page's
-// `actions` (New invoice) last, as Claude's own lists do. `line` draws the
-// rule that tabs sit on; `sticky` keeps the toolbar at the top while the rows
-// scroll up under it, with a shadow once they do. Append `nodes` to the page.
-export function listHead(title, { count = null, help = null, actions = [], start = [], end = [], line = false, sticky = false, views: tabs = null } = {}) {
+// switches: the title row, then one toolbar with `start` at the left (tabs,
+// Group, Sort, Filter) and `end` at the right (search, Board/List), then the
+// page's `actions` (New invoice) last, as Claude's own lists do. `controls`
+// (the page's Group, Sort and Filter) sit with the saved view tabs at their
+// right (`views`: the page's savedViews element, else an empty slot that
+// stays hidden), at the end of `start`, or of `end` when `controlsAt` is
+// 'end'. `line` draws the rule that tabs sit on; `sticky` keeps the toolbar
+// at the top while the rows scroll up under it, with a shadow once they do.
+// Append `nodes` to the page.
+export function listHead(title, { count = null, help = null, actions = [], start = [], end = [], controls = null, controlsAt = 'start', line = false, sticky = false, views: tabs = null } = {}) {
   const views = tabs ?? h('div', { class: 'fx-views', role: 'group', 'aria-label': 'Views', hidden: true });
+  const tools = h('div', { class: 'fx-toolbar__tools' }, controls, views);
+  const left = controlsAt === 'end' ? [start].flat() : [start, tools].flat();
+  const right = controlsAt === 'end' ? [tools, end].flat() : [end].flat();
   const bar = h('div', { class: 'fx-listhead', 'data-sticky': sticky },
-    h('div', { class: `fx-toolbar${line ? '' : ' fx-toolbar--plain'}` }, start, h('div', { class: 'fx-toolbar__end' }, end, actions)));
+    h('div', { class: `fx-toolbar${line ? '' : ' fx-toolbar--plain'}` }, left, h('div', { class: 'fx-toolbar__end' }, right, actions)));
   const edge = sticky ? h('div', { class: 'fx-listhead__edge', 'aria-hidden': 'true' }) : null;
   if (edge && typeof IntersectionObserver === 'function') {
     const top = window.matchMedia?.('(max-width: 820px)').matches ? 61 : 1;
     new IntersectionObserver(([entry]) => bar.toggleAttribute('data-stuck', !entry.isIntersecting), { rootMargin: `-${top}px 0px 0px 0px` }).observe(edge);
   }
-  return { nodes: [pageHeader(title, { count, help }), views, edge, bar].filter(Boolean), views, bar };
+  return { nodes: [pageHeader(title, { count, help }), edge, bar].filter(Boolean), views, bar };
 }
 
 // The window a list or board sits in under listHead, as HubSpot's: on a
@@ -208,9 +214,10 @@ let rowMenus = 0;
 
 // A row's ⋯ menu, as on the Custom fields page. The menu lines up with the
 // button's right edge; `align: 'start'` lines it up with its left edge.
-export function rowMenu(label, items, { align = 'end' } = {}) {
+// `trigger` swaps the ⋯ icon for the given contents (the sidebar's More).
+export function rowMenu(label, items, { trigger = null, className = 'fx-cfm__more', align = 'end' } = {}) {
   const id = `fx-row-menu-${++rowMenus}`;
-  const button = h('button', { class: 'fx-cfm__more', type: 'button', 'aria-label': label, popovertarget: id, 'aria-haspopup': 'menu', 'aria-expanded': 'false' }, lucide(h, 'ellipsis'));
+  const button = h('button', { class: className, type: 'button', 'aria-label': label, popovertarget: id, 'aria-haspopup': 'menu', 'aria-expanded': 'false' }, trigger ?? lucide(h, 'ellipsis'));
   const panel = h('div', { class: 'fx-pop', id, popover: 'auto', role: 'menu' });
   panel.addEventListener('toggle', (event) => {
     button.setAttribute('aria-expanded', String(event.newState === 'open'));

package/server/ui/list-views.js

@@ -3,10 +3,12 @@
 // Filter, Columns), and one can be the person's default, which opens when
 // they go to the page. No DOM: the server checks a saved list with the same
 // rules the page uses (server/auth/people.js).
-import { cleanFilterView, normaliseJobsView } from './job-view.js';
+import { cleanFilterView, filterJobs, normaliseJobsView } from './job-view.js';
 
 // The Invoices filter's fields (invoicing.js). The tabs are the status, so
-// Status is not here.
+// Status is not here. The page shows the chip (view-bar.js); the server keeps
+// the rows (GET /api/invoicing/invoices), so a filter reaches every invoice
+// of a tab.
 export const INVOICE_FILTER_FIELDS = {
   client: { label: 'Client', kind: 'choice', icon: 'building-2' },
   number: { label: 'Number', kind: 'text', icon: 'hash' },
@@ -16,6 +18,46 @@ export const INVOICE_FILTER_FIELDS = {
   problem: { label: 'Problem', kind: 'check', icon: 'triangle-alert' },
 };
 
+export const invoiceFilterKind = (field) => INVOICE_FILTER_FIELDS[field]?.kind ?? null;
+
+// An invoice's value for a filter field or a sort, as they compare it. A
+// draft has no issue date: it uses the day it was made.
+export function invoiceValue(invoice, field) {
+  switch (field) {
+    case 'client': return invoice.contactName ?? null;
+    case 'number': return invoice.number ?? null;
+    case 'reference': return invoice.reference ?? null;
+    case 'date': return invoice.issueDate ?? (invoice.createdAt ? new Date(invoice.createdAt).toISOString().slice(0, 10) : null);
+    case 'total': return invoice.totalCents == null ? null : invoice.totalCents / 100;
+    case 'problem': return (invoice.problems?.length ?? 0) > 0;
+    default: return null;
+  }
+}
+
+// What the Invoices list sorts by (a column head). No sort is newest first.
+export const INVOICE_SORTS = Object.freeze(['number', 'client', 'reference', 'date', 'total']);
+
+// One page of an invoice list: the Filter view keeps rows, the sort orders
+// them (an empty value last, either way), then `offset` and `limit` cut the
+// page. `total` and `totalCents` are of every kept row. The rows come in
+// newest first; that order breaks ties.
+export function invoicePage(invoices, { view, sort = null, dir = 'asc', offset = 0, limit = 100, today }) {
+  const kept = filterJobs(invoices, view, { valueOf: invoiceValue, kindOf: invoiceFilterKind, today });
+  const sign = dir === 'desc' ? -1 : 1;
+  const ordered = INVOICE_SORTS.includes(sort)
+    ? kept.map((invoice, i) => [invoice, invoiceValue(invoice, sort), i]).sort(([, x, i], [, y, j]) => {
+      if (x == null || y == null) return x == null && y == null ? i - j : (x == null) - (y == null);
+      const order = typeof x === 'number' ? x - y : String(x).localeCompare(String(y), 'en', { numeric: true });
+      return order ? order * sign : i - j;
+    }).map(([invoice]) => invoice)
+    : kept;
+  return {
+    rows: ordered.slice(offset, offset + limit),
+    total: kept.length,
+    totalCents: kept.reduce((sum, i) => sum + (i.totalCents ?? 0), 0),
+  };
+}
+
 // The Reconcile filter's fields (reconcile.js). Reconcile lists jobs and
 // invoices, so it has both lists' fields; a job's own field (Practitioner,
 // a custom field) skips invoice rows, so it never hides them.

package/server/ui/monitoring.js

@@ -17,15 +17,46 @@ function loadScript({ src, integrity }) {
   });
 }
 
-// "Notify me": the form's email field (Sentry's own words) starts with the
-// signed-in person's email. A report sent with an address asks to hear back;
-// Flow tags it notify=yes, so the support desk sees it on the task. A person
-// who clears the field sends notify=no.
-// Sentry's form has no tick box of its own; this keeps to its stock options.
-export function tagNotify(event) {
+// "Request a response": a tick box under the form's email field, off by
+// default. The email field (Sentry's own words) starts with the signed-in
+// person's email, but an address alone does not ask for a reply. A report
+// sent with the box ticked and an address is tagged notify=yes, so the
+// support desk replies (fixed, planned or won't fix). Every other report
+// sends notify=no. Sentry's form has no tick box of its own (SDK 11.4.0),
+// so Flow adds one to it (addResponseBox).
+export function tagNotify(event, wantsResponse = false) {
   if (event?.type !== 'feedback') return;
   const email = String(event.contexts?.feedback?.contact_email ?? '').trim();
-  event.tags = { ...event.tags, notify: email ? 'yes' : 'no' };
+  event.tags = { ...event.tags, notify: wantsResponse && email ? 'yes' : 'no' };
+}
+
+export const RESPONSE_LABEL = 'Request a response';
+
+// The tick box goes under the email field inside the form's shadow root, so
+// flow.css cannot reach it: its look comes from the form's own variables,
+// which flow.css sets from the --t-* tokens (#sentry-feedback). Ticked, the
+// email is required. No email field (or no form yet): no box.
+const RESPONSE_STYLE = `
+.form__response { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; cursor: pointer; }
+.form__response input { margin: 0; width: 16px; height: 16px; accent-color: var(--accent-background); cursor: pointer; }`;
+function addResponseBox(root, onChange) {
+  const email = root?.querySelector('input[name="email"]:not([type="hidden"])');
+  if (!email || root.querySelector('.form__response')) return Boolean(email);
+  const style = document.createElement('style');
+  style.textContent = RESPONSE_STYLE;
+  const box = document.createElement('input');
+  box.type = 'checkbox';
+  box.name = 'response';
+  box.addEventListener('change', () => {
+    email.required = box.checked;
+    onChange(box.checked);
+  });
+  const label = document.createElement('label');
+  label.className = 'form__response';
+  label.append(box, RESPONSE_LABEL);
+  (email.closest('label') ?? email).after(label);
+  root.append(style);
+  return true;
 }
 
 // A path as a pattern: each id in it becomes ":id", so every invoice's page
@@ -101,7 +132,9 @@ export async function startMonitoring({ flow, person }) {
     beforeSendSpan: scrubSpan,
     initialScope: { tags: config.tags ?? {} },
   });
-  Sentry.getClient()?.on('beforeSendFeedback', tagNotify);
+  // Read when the report is sent: the tick box of the form open now.
+  let wantsResponse = false;
+  Sentry.getClient()?.on('beforeSendFeedback', (event) => tagNotify(event, wantsResponse));
   // Who reported or met the error, so the lab can follow up.
   Sentry.setUser({ id: person.id, email: person.email, username: person.name || undefined });
   const feedback = config.feedback ? Sentry.getFeedback() : null;
@@ -112,8 +145,18 @@ export async function startMonitoring({ flow, person }) {
   let form = null;
   return async () => {
     form?.removeFromDom();
+    wantsResponse = false;
     form = await feedback.createForm();
     form.appendToDom();
     form.open();
+    // The form draws itself a moment after open(); add the tick box once its
+    // email field is there.
+    const root = document.getElementById('sentry-feedback')?.shadowRoot;
+    const onChange = (checked) => { wantsResponse = checked; };
+    if (!addResponseBox(root, onChange) && root) {
+      const watch = new MutationObserver(() => { if (addResponseBox(root, onChange)) watch.disconnect(); });
+      watch.observe(root, { childList: true, subtree: true });
+      setTimeout(() => watch.disconnect(), 5000);
+    }
   };
 }

package/server/ui/page.js

@@ -71,20 +71,125 @@ ${body}
 `;
 }
 
-/** A one-message page, such as the end of connecting Xero. */
-export function messagePage({ title, text, defaultFamily, tone = 'info' }) {
+// Mode labels on the connected callback card (issue #211). Sandbox is the
+// Demo Company; replay is for development and CI.
+const MODE_LABELS = Object.freeze({ live: 'Live', sandbox: 'Demo', replay: 'Replay' });
+
+function modeLabel(mode) {
+  if (mode == null || mode === '') return '';
+  const key = String(mode).toLowerCase();
+  return MODE_LABELS[key] ?? String(mode).replace(/^./, (c) => c.toUpperCase());
+}
+
+function lucideIcon(name) {
+  return `<span class="fx-lucide" style="--icon: url(/assets/icons/${escapeHtml(name)}.svg)" aria-hidden="true"></span>`;
+}
+
+/**
+ * A one-message page, such as the end of connecting an integration.
+ *
+ * Optional `integration` ({ name, logo }) shows Flow's mark beside the
+ * maker's logo. Optional `organisation` and `mode` become a status line.
+ * On success, `autoReturnSeconds` (default 5 when tone is success and an
+ * integration is named) starts a polite countdown and returns to Flow; set
+ * it to 0 or false to keep the person on the page. Failure never auto-returns.
+ */
+export function messagePage({
+  title,
+  text,
+  defaultFamily,
+  tone = 'info',
+  integration = null,
+  organisation = null,
+  mode = null,
+  autoReturnSeconds,
+  href = '/',
+}) {
+  const safeHref = typeof href === 'string' && href.startsWith('/') && !href.startsWith('//') ? href : '/';
+  const logo = integration?.logo && /^[a-z0-9][a-z0-9._-]*\.svg$/i.test(integration.logo) ? integration.logo : null;
+  const integrationName = integration?.name ? String(integration.name) : '';
+  const showMarks = Boolean(logo || integrationName);
+  const resultIcon = tone === 'success' ? 'check-circle' : tone === 'danger' ? 'x-circle' : null;
+  const org = organisation != null && String(organisation).trim() ? String(organisation).trim() : '';
+  const modeText = modeLabel(mode);
+  const statusParts = [org, modeText].filter(Boolean);
+  const returnSeconds = autoReturnSeconds === false || autoReturnSeconds === 0
+    ? 0
+    : tone === 'success' && showMarks
+      ? Math.max(1, Math.min(30, Number(autoReturnSeconds) || 5))
+      : 0;
+
+  const marks = showMarks
+    ? `<div class="fx-message__marks" aria-hidden="true">
+      <span class="fx-logo fx-logo--lg fx-message__flow">${FLOW_MARK}</span>
+      <span class="fx-message__plus">+</span>
+      <span class="fx-logo fx-logo--lg">${logo
+        ? `<img src="/assets/ui/logos/${escapeHtml(logo)}" alt="">`
+        : lucideIcon('plug')}</span>
+      ${resultIcon ? `<span class="fx-message__result" data-tone="${escapeHtml(tone)}">${lucideIcon(resultIcon)}</span>` : ''}
+    </div>`
+    : resultIcon
+      ? `<div class="fx-message__marks fx-message__marks--solo" aria-hidden="true">
+      <span class="fx-message__result" data-tone="${escapeHtml(tone)}">${lucideIcon(resultIcon)}</span>
+    </div>`
+      : '';
+
+  const status = statusParts.length
+    ? `<p class="fx-message__status"><span class="fx-status" data-tone="${escapeHtml(tone === 'danger' ? 'danger' : 'success')}">${escapeHtml(statusParts.join(' · '))}</span></p>`
+    : '';
+
+  const returnLine = returnSeconds
+    ? `<p class="fx-message__return" hidden aria-live="polite" data-return-after="${returnSeconds}" data-return-href="${escapeHtml(safeHref)}"></p>`
+    : '';
+
+  // Clean the OAuth query from the address. On success only, count down and
+  // return to Flow. Without JavaScript the Back button is enough.
+  const cleanScript = showMarks || returnSeconds
+    ? `<script>try{history.replaceState(null,'',location.pathname)}catch(e){}</script>`
+    : '';
+  const returnScript = returnSeconds
+    ? `<script>
+(function () {
+  var el = document.querySelector('[data-return-after]');
+  if (!el) return;
+  var left = Number(el.getAttribute('data-return-after')) || 0;
+  var href = el.getAttribute('data-return-href') || '/';
+  if (left < 1) return;
+  el.hidden = false;
+  function say(n) {
+    el.textContent = n === 1 ? 'Going back to Flow in 1 second' : 'Going back to Flow in ' + n + ' seconds';
+  }
+  say(left);
+  var timer = setInterval(function () {
+    left -= 1;
+    if (left <= 0) {
+      clearInterval(timer);
+      location.assign(href);
+      return;
+    }
+    say(left);
+  }, 1000);
+})();
+</script>`
+    : '';
+
   return renderPage({
     title,
     defaultFamily,
     bodyClass: 'fx-centre',
     scripts: ['/assets/ui/appearance.js'],
     body: `<main class="fx-message">
-  <a class="fx-brand" href="/">${FLOW_MARK}<span>Flow</span></a>
+  <a class="fx-brand" href="${escapeHtml(safeHref)}">${FLOW_MARK}<span>Flow</span></a>
   <section class="fx-card fx-message__card" data-tone="${escapeHtml(tone)}">
+    ${marks}
     <h1 class="fx-title">${escapeHtml(title)}</h1>
+    ${status}
     <p>${escapeHtml(text)}</p>
-    <a class="fx-btn" href="/">Back to Flow</a>
+    ${returnLine}
+    <a class="fx-btn" href="${escapeHtml(safeHref)}">Back to Flow</a>
   </section>
-</main>`,
+</main>
+${cleanScript}
+${returnScript}`,
   });
 }

package/server/ui/pager.js

@@ -0,0 +1,67 @@
+// The pages of a long list, in the list window's foot bar (listFrame), as
+// HubSpot's: rows per page, "1–100 of 1,204", and numbered pages between
+// previous and next. The server cuts the page (GET /api/invoicing/invoices
+// takes offset and limit), so a list works with any number of rows.
+//
+// listPager(h, { label, sizes, change }) answers { element, draw(page) }.
+// page = { offset, limit, total }. change({ offset, limit }) asks for a
+// page; a new size starts again at the first page. One page or none hides
+// the page numbers; the size stays, so a person can show more per page.
+// Issue #220 brings the pager over one record (.fx-pager) into this file.
+
+export const PAGE_SIZES = Object.freeze([25, 50, 100, 200]);
+
+const chevron = (d) => `<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path d="${d}" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+const PREV = chevron('M14.5 6l-6 6 6 6');
+const NEXT = chevron('M9.5 6l6 6-6 6');
+const count = new Intl.NumberFormat('en-AU');
+
+// The page numbers to show: the first, the last, and two each side of the
+// one shown, with '…' for a gap. Pages count from 1.
+export function pageNumbers(at, pages) {
+  if (pages <= 7) return Array.from({ length: pages }, (_, n) => n + 1);
+  const near = new Set([1, pages, at - 1, at, at + 1]);
+  if (at <= 3) [2, 3, 4].forEach((n) => near.add(n));
+  if (at >= pages - 2) [pages - 3, pages - 2, pages - 1].forEach((n) => near.add(n));
+  const list = [...near].filter((n) => n >= 1 && n <= pages).sort((a, b) => a - b);
+  return list.flatMap((n, i) => (i && n - list[i - 1] > 1 ? ['…', n] : [n]));
+}
+
+// "1–100 of 1,204", or "0 of 0".
+export function pageRange({ offset, limit, total }) {
+  if (!total) return '0 of 0';
+  return `${count.format(offset + 1)}–${count.format(Math.min(offset + limit, total))} of ${count.format(total)}`;
+}
+
+export function listPager(h, { label = 'Pages', sizes = PAGE_SIZES, change }) {
+  const element = h('nav', { class: 'fx-pages', 'aria-label': label });
+  const icon = (markup) => { const span = h('span', { 'aria-hidden': 'true' }); span.innerHTML = markup; return span; };
+
+  function draw({ offset = 0, limit = sizes[0], total = 0 }) {
+    const pages = Math.max(1, Math.ceil(total / limit));
+    const at = Math.min(pages, Math.floor(offset / limit) + 1);
+    const go = (n) => change({ offset: (n - 1) * limit, limit });
+    const size = h('select', {
+      class: 'fx-select fx-pages__size', 'aria-label': 'Rows per page', title: 'Rows per page',
+      onchange: (event) => change({ offset: 0, limit: Number(event.target.value) }),
+    }, sizes.map((n) => h('option', { value: String(n), ...(n === limit ? { selected: true } : {}) }, String(n))));
+    const step = (n, markup, name) => h('button', {
+      type: 'button', class: 'fx-pages__step', 'aria-label': name, title: name,
+      ...(n < 1 || n > pages ? { disabled: true } : {}), onclick: () => go(n),
+    }, icon(markup));
+    element.replaceChildren(
+      h('label', { class: 'fx-pages__rows' }, 'Rows', size),
+      h('span', { class: 'fx-pages__range' }, pageRange({ offset, limit, total })),
+      pages > 1 ? h('span', { class: 'fx-pages__steps' },
+        step(at - 1, PREV, 'Previous page'),
+        pageNumbers(at, pages).map((n) => (n === '…'
+          ? h('span', { class: 'fx-pages__gap', 'aria-hidden': 'true' }, '…')
+          : h('button', {
+            type: 'button', class: 'fx-pages__num', 'aria-label': `Page ${n}`,
+            ...(n === at ? { 'aria-current': 'page' } : {}), onclick: () => { if (n !== at) go(n); },
+          }, String(n)))),
+        step(at + 1, NEXT, 'Next page')) : '');
+  }
+
+  return { element, draw };
+}

package/server/ui/price-list.js

@@ -7,6 +7,8 @@
 // records need a person and opens the work. Everyone can read it; an owner or
 // admin changes it. The caller passes in app.js's shared pieces as `ui`.
 import { alertStrip } from '/assets/ui/alerts.js';
+import { columnTable, rowCells, viewSaver } from '/assets/ui/columns.js';
+import { normaliseListView, PRICE_COLUMNS } from '/assets/ui/job-view.js';
 import { reconcileRows } from '/assets/ui/price-match.js';
 
 const DOCS = 'https://github.com/arcforgelabs/flow/blob/main/docs/PRICE_LIST.md';
@@ -16,6 +18,15 @@ const LINE_PRICES = [
   { value: 'list', label: 'Price list' },
 ];
 
+// The list's columns (columns.js): each keeps its own width, saved with the
+// person's account; + shows a hidden one again.
+const COLUMN_DEFS = {
+  code: { kind: 'number', className: 'fx-price__code', cell: (item) => item.code },
+  name: { kind: 'client', cell: (item) => item.name },
+  price: { kind: 'total', num: true, cell: (item) => money(item.unitAmountCents) },
+  tax: { kind: 'case', className: 'fx-dim', cell: (item) => TAX_LABELS[item.taxCode] ?? item.taxCode },
+};
+
 const money = (cents) => (cents === null || cents === undefined ? '' : `$${(cents / 100).toFixed(2)}`);
 const toCents = (text) => {
   const value = Number(String(text ?? '').replace(/[$,\s]/g, ''));
@@ -26,6 +37,18 @@ export async function renderPriceList(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-price' }, h('div', { class: 'fx-skeleton' }));
+  let view = normaliseListView(me?.views?.['price-list'], PRICE_COLUMNS);
+  const saveView = viewSaver(ui, 'price-list');
+  const heads = columnTable(h, {
+    order: () => view.columns,
+    widths: () => view.widths,
+    change: (patch) => {
+      view = normaliseListView({ ...view, ...patch }, PRICE_COLUMNS);
+      saveView(view);
+      draw();
+    },
+    hidden: () => Object.keys(PRICE_COLUMNS).filter((id) => !view.columns.includes(id)).map((id) => ({ id, label: PRICE_COLUMNS[id] })),
+  });
   const addButton = h('button', { class: 'fx-btn fx-btn--primary', type: 'button', disabled }, 'Add code');
   const reconcileButton = h('button', { class: 'fx-btn fx-btn--ghost', type: 'button', hidden: true, onclick: () => ui.go('/price-list/reconcile') }, 'Reconcile');
   const alerts = alertStrip(ui, 'price-list');
@@ -160,15 +183,12 @@ export async function renderPriceList(main, ui) {
     const tabs = h('div', { class: 'fx-tabs', role: 'tablist' }, [['active', 'Active', live.length], ['archived', 'Archived', archived.length]].map(([id, label, count]) => h('button', {
       type: 'button', role: 'tab', 'aria-selected': String(tab === id), onclick: () => { tab = id; draw(); },
     }, label, h('span', { class: 'fx-tabs__count' }, String(count)))));
+    const columns = view.columns.map((id) => ({ id, label: PRICE_COLUMNS[id], ...COLUMN_DEFS[id] }));
     const itemRow = (item) => h('tr', { onclick: () => edit(item), tabindex: '0', onkeydown: (event) => { if (event.key === 'Enter') edit(item); } },
-      h('td', { class: 'fx-price__code' }, item.code),
-      h('td', {}, item.name),
-      h('td', { class: 'fx-num' }, money(item.unitAmountCents)),
-      h('td', { class: 'fx-dim' }, TAX_LABELS[item.taxCode] ?? item.taxCode));
+      rowCells(h, columns, item),
+      h('td', { class: 'fx-c-end' }));
     const table = shown.length
-      ? h('div', { class: 'fx-price__scroll' }, h('table', { class: 'fx-table fx-table--rows fx-price__table' },
-        h('thead', {}, h('tr', {}, h('th', {}, 'Code'), h('th', {}, 'Name'), h('th', { class: 'fx-num' }, 'Price'), h('th', {}, 'Tax'))),
-        h('tbody', {}, shown.map(itemRow))))
+      ? h('div', { class: 'fx-panel' }, heads.table({ className: 'fx-table--rows fx-price__table', columns, rows: h('tbody', {}, shown.map(itemRow)) }))
       : h('p', { class: 'fx-empty' }, words ? 'No code matches.' : tab === 'archived' ? 'No archived codes.' : 'No codes yet. Add the first one.');
     const sections = [
       disabled ? notice('Only an owner or admin can change these.', 'info') : null,

package/server/ui/reconcile.js

@@ -204,7 +204,7 @@ async function renderList(main, ui) {
   const host = h('div', { class: 'fx-rec' }, h('div', { class: 'fx-skeleton' }));
   const bulk = bulkBar(ui, { label: 'Ticked jobs' });
   const frame = listFrame(main, host);
-  main.append(...listHead('Reconcile', { views: views.element, start: controls, end: find.element }).nodes, frame.element, bulk.element);
+  main.append(...listHead('Reconcile', { views: views.element, controls, end: find.element }).nodes, frame.element, bulk.element);
 
   // The Filter chip: the same panel as on Jobs (view-bar.js). Job rows also
   // have the lab's custom fields.

package/server/ui/routes.js

@@ -21,7 +21,7 @@ const themeDir = join(here, '..', 'theme');
 const logoDir = join(here, 'logos');
 const LOGO_FILES = new Set(['xero.svg', 'seazona.svg', 'sentry.svg']);
 const THEME_FILES = new Set(['themes.js', 'color-contrast.js', 'openclaw-palettes.js', 'font-families.js']);
-export const UI_FILES = new Set(['flow.css', 'appearance.js', 'clerk-appearance.js', 'app.js', 'invoicing.js', 'invoice-notes.js', 'job-change.js', 'sidecar.js', 'invoicing-settings.js', 'automations.js', 'invoice-rules.js', 'line-mappings.js', 'price-list.js', 'price-match.js', 'price-reconcile.js', 'custom-fields.js', 'jobs.js', 'job-board.js', 'reconcile.js', 'xero-import.js', 'job-view.js', 'list-views.js', 'saved-views.js', 'monitoring.js', 'search.js', 'alerts.js', 'bulk-bar.js', 'view-bar.js', 'tip.js', 'kit.js', 'columns.js', 'person.js', 'flow-mark.svg']);
+export const UI_FILES = new Set(['flow.css', 'appearance.js', 'clerk-appearance.js', 'app.js', 'invoicing.js', 'invoice-notes.js', 'job-change.js', 'sidecar.js', 'invoicing-settings.js', 'automations.js', 'invoice-rules.js', 'line-mappings.js', 'price-list.js', 'price-match.js', 'price-reconcile.js', 'custom-fields.js', 'jobs.js', 'job-board.js', 'reconcile.js', 'xero-import.js', 'xero-usage.js', 'xero-usage-model.js', 'job-view.js', 'list-views.js', 'saved-views.js', 'monitoring.js', 'search.js', 'alerts.js', 'bulk-bar.js', 'view-bar.js', 'tip.js', 'kit.js', 'columns.js', 'person.js', 'pager.js', 'flow-mark.svg']);
 const iconDir = join(dirname(require.resolve('lucide-static/package.json')), 'icons');
 const ICON_FILE = /^[a-z0-9]+(?:-[a-z0-9]+)*\.svg$/;
 const MAX_AGE = '1h';