@arcforgelabs/flow 2026.10.43 → 2026.10.44

package/README.md

@@ -35,6 +35,7 @@ run a lab.
 | `docs/index.md` | The docs site home page |
 | `docs/releases/` | One release notes page per version (`<version>.md`), shown on the docs site |
 | `docs/DESIGN.md` | The design systems (theme families), how pages and Clerk's components take them, and the screens |
+| `docs/DESIGN_SYSTEM.md` | The Flow Design System artifact: how `npm run design-system` builds it from the code, the card per shared component, publishing and review |
 | `docs/DATA_MODEL.md` | The PostgreSQL records, the rules the database holds, and how to change the schema |
 | `docs/DATA_SPINE.md` | The design of the tables and jobs every integration shares: mirror, identity map, job queue, outbox, review queue |
 | `docs/JOB_INVOICE_LINKS.md` | The pipeline: how each job links to its customer and to the accounting invoice that bills it |

package/npm-shrinkwrap.json

@@ -1,12 +1,12 @@
 {
   "name": "@arcforgelabs/flow",
-  "version": "2026.10.43",
+  "version": "2026.10.44",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@arcforgelabs/flow",
-      "version": "2026.10.43",
+      "version": "2026.10.44",
       "license": "MIT",
       "dependencies": {
         "@clerk/backend": "3.25.0",
@@ -33,7 +33,8 @@
         "flow-server": "server/flow-server.js"
       },
       "devDependencies": {
-        "drizzle-kit": "0.31.11"
+        "drizzle-kit": "0.31.11",
+        "esbuild": "0.25.12"
       },
       "engines": {
         "node": ">=24"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcforgelabs/flow",
-  "version": "2026.10.43",
+  "version": "2026.10.44",
   "description": "Invoicing, bill entry and a financial dashboard for labs, with Seazona and Xero integrations.",
   "license": "MIT",
   "repository": {
@@ -36,7 +36,8 @@
     "theme:contrast": "node scripts/theme-contrast.mjs",
     "db:generate": "drizzle-kit generate && node scripts/db-guard-migrations.js",
     "db:follow-production": "node scripts/replit-workspace-db.js sync",
-    "db:follow-production:status": "node scripts/replit-workspace-db.js status"
+    "db:follow-production:status": "node scripts/replit-workspace-db.js status",
+    "design-system": "node scripts/design-system/build.mjs"
   },
   "dependencies": {
     "@clerk/backend": "3.25.0",
@@ -60,7 +61,8 @@
     "pg": "8.23.1"
   },
   "devDependencies": {
-    "drizzle-kit": "0.31.11"
+    "drizzle-kit": "0.31.11",
+    "esbuild": "0.25.12"
   },
   "overrides": {
     "@esbuild-kit/core-utils": {

package/server/auth/people.js

@@ -2,7 +2,8 @@ import { and, asc, eq, isNull, ne, sql } from 'drizzle-orm';
 import { people, PERSON_ROLES } from '../db/schema.js';
 import { FlowError } from '../core/errors.js';
 import { isThemeFamily, normalizeAccent } from '../theme/themes.js';
-import { normaliseJobsView } from '../ui/job-view.js';
+import { INVOICE_COLUMNS, normaliseJobsView, normaliseListView, RECONCILE_COLUMNS } from '../ui/job-view.js';
+import { normaliseSavedViews, SAVED_VIEW_PAGES } from '../ui/list-views.js';
 import { isPlainEmail } from './settings.js';
 
 // The people who may sign in, and their roles. Only an owner changes this
@@ -57,10 +58,12 @@ export async function setPersonAppearance(db, { id, appearance }) {
 function viewCheck(page) {
   switch (page) {
     case 'jobs': return normaliseJobsView;
+    case 'invoices': return (view) => normaliseListView(view, INVOICE_COLUMNS);
+    case 'reconcile': return (view) => normaliseListView(view, RECONCILE_COLUMNS);
     default: return null;
   }
 }
-const VIEW_PAGE_NAMES = ['jobs'];
+const VIEW_PAGE_NAMES = ['jobs', 'invoices', 'reconcile'];
 
 // A person's saved views as Flow sends them: only the known pages, each
 // checked, so a view saved by an older Flow still loads.
@@ -68,9 +71,31 @@ export function normaliseViews(input) {
   const value = input && typeof input === 'object' ? input : {};
   const out = {};
   for (const page of VIEW_PAGE_NAMES) if (value[page]) out[page] = viewCheck(page)(value[page]);
+  // The named views a person saved on each page, and their default
+  // (ui/list-views.js), kept under `saved`.
+  const saved = value.saved && typeof value.saved === 'object' ? value.saved : {};
+  const lists = {};
+  for (const page of SAVED_VIEW_PAGES) if (saved[page]) lists[page] = normaliseSavedViews(page, saved[page]);
+  if (Object.keys(lists).length) out.saved = lists;
   return out;
 }
 
+// Each person keeps their own named views of a page and picks their
+// default; saving one page's list leaves the other pages as they were.
+export async function setPersonSavedViews(db, { id, page, saved }) {
+  if (!SAVED_VIEW_PAGES.includes(page)) throw new FlowError('not_found', 'no such page');
+  const value = normaliseSavedViews(page, saved);
+  const [row] = await db.update(people)
+    .set({
+      views: sql`coalesce(${people.views}, '{}'::jsonb) || jsonb_build_object('saved', coalesce(${people.views}->'saved', '{}'::jsonb) || ${JSON.stringify({ [page]: value })}::jsonb)`,
+      updatedAt: new Date(),
+    })
+    .where(eq(people.id, id))
+    .returning();
+  if (!row) throw new FlowError('not_found', 'person not found');
+  return value;
+}
+
 // Each person keeps their own view of a page; saving one page leaves the
 // others as they were.
 export async function setPersonView(db, { id, page, view }) {
@@ -141,6 +166,19 @@ export async function linkPerson(db, { id, clerkUserId }) {
   return row ?? null;
 }
 
+// Fills a person's name from their sign-in account (Clerk) when Flow has
+// none, so pickers show "Jane Citizen", not an email. A name Flow already
+// holds stays.
+export async function fillPersonName(db, { id, name }) {
+  const value = String(name ?? '').trim();
+  if (!value) return null;
+  const [row] = await db.update(people)
+    .set({ name: value, updatedAt: new Date() })
+    .where(and(eq(people.id, id), isNull(people.name)))
+    .returning();
+  return row ?? null;
+}
+
 // While the installation has no owner, invite `email` as its owner (or make
 // that person the owner if they are already listed). Returns the row, or null
 // when an owner already exists.

package/server/auth/routes.js

@@ -13,6 +13,7 @@ import {
   publicPerson,
   removePerson,
   setPersonAppearance,
+  setPersonSavedViews,
   setPersonView,
   updatePerson,
 } from './people.js';
@@ -127,6 +128,16 @@ export function createSignInRouter({ settings, db, clerk, personAuth, defaultFam
     }
   });
 
+  // Each person's named views of a page and their default (ui/list-views.js).
+  router.put('/api/me/saved-views/:page', requireSession, express.json({ limit: '64kb' }), async (req, res) => {
+    try {
+      const saved = await setPersonSavedViews(db, { id: req.person.id, page: req.params.page, saved: req.body });
+      res.json({ ok: true, saved });
+    } catch (error) {
+      sendError(res, error, log);
+    }
+  });
+
   // Only an owner manages people.
   const people = express.Router();
   people.use(requireSession, requireOwner, express.json({ limit: '16kb' }));

package/server/auth/session.js

@@ -1,5 +1,5 @@
 import { displayNameOf, googleWorkspaceOwner, primaryEmailOf, secondFactorVerified } from './clerk.js';
-import { findPersonByClerkId, findPersonByEmail, linkPerson, recordPendingPerson } from './people.js';
+import { fillPersonName, findPersonByClerkId, findPersonByEmail, linkPerson, recordPendingPerson } from './people.js';
 import { DEFAULT_OWNER_MFA_MAX_AGE_MINUTES, isPlainEmail } from './settings.js';
 
 // Checks the Clerk session on every person request, then maps the Clerk user
@@ -60,10 +60,29 @@ export function createPersonAuth({
   // owner requests costs one Clerk call. Failures are never cached.
   const clerkUsers = new Map();
 
+  // Clerk users already checked for a name in this run, so a person whose
+  // sign-in has no name costs one Clerk call, not one per request.
+  const nameChecked = new Set();
+
+  // The person, with their Clerk name filled in when Flow has none. Never
+  // stops a sign-in: a Clerk error keeps the person as they are.
+  async function withName(person, clerkUser = null) {
+    if (person.name?.trim() || nameChecked.has(person.clerkUserId)) return person;
+    if (nameChecked.size > 1000) nameChecked.clear();
+    nameChecked.add(person.clerkUserId);
+    try {
+      const name = displayNameOf(clerkUser ?? await cachedClerkUser(person.clerkUserId));
+      return (name && await fillPersonName(db, { id: person.id, name })) || person;
+    } catch (error) {
+      log.warn?.(`[auth] could not read the name of Flow person ${person.id}: ${error.message}`);
+      return person;
+    }
+  }
+
   // { person } or { denial }.
   async function personFor(clerkUserId) {
     const linked = await findPersonByClerkId(db, clerkUserId);
-    if (linked) return { person: linked };
+    if (linked) return { person: await withName(linked) };
 
     const clerkUser = await clerk.getUser(clerkUserId);
     const { email, verified } = primaryEmailOf(clerkUser);
@@ -76,7 +95,7 @@ export function createPersonAuth({
       const person = await linkPerson(db, { id: invited.id, clerkUserId });
       if (person) {
         log.info?.(`[auth] linked Clerk user ${clerkUserId} to Flow person ${person.id} (${person.role})`);
-        return { person };
+        return { person: await withName(person, clerkUser) };
       }
       const again = await findPersonByClerkId(db, clerkUserId);
       return again ? { person: again } : { denial: 'email_linked_elsewhere' };

package/server/core/custom-fields.js

@@ -4,6 +4,7 @@ import {
   CUSTOM_FIELD_TYPES, integrationSettingEvents, integrationSettings, jobFieldEvents, jobFields, jobFieldSettings, jobFieldValues, people,
 } from '../db/schema.js';
 import { FlowError, notFound } from './errors.js';
+import { personLabel } from '../ui/person.js';
 
 // Custom fields (docs/CUSTOM_FIELDS.md): fields a lab makes for its jobs in
 // Flow, like ClickUp's custom fields. An owner or admin makes them in
@@ -372,11 +373,11 @@ export async function listJobFieldValues(db, organisationId, { jobs = null } = {
   return rows.filter((r) => !wanted || wanted.has(`${r.sourceSystem}\u0000${r.sourceJobRef}`)).map(publicValue);
 }
 
-// The people a person field can name: every active person, by id and name
-// (the part of the email before @ when they have no name), A to Z.
+// The people a person field can name: every active person, by id and label
+// (full name, else the whole email: server/ui/person.js), A to Z.
 export async function choosablePeople(db) {
   const rows = await db.select({ id: people.id, name: people.name, email: people.email }).from(people).where(eq(people.status, 'active'));
-  return rows.map((r) => ({ id: r.id, name: r.name?.trim() || r.email.replace(/@.*/, '') }))
+  return rows.map((r) => ({ id: r.id, name: personLabel(r) }))
     .sort((a, b) => a.name.localeCompare(b.name));
 }
 

package/server/core/invoice-rules.js

@@ -57,7 +57,7 @@ export const TESTS = Object.freeze({
   number: ['more_than', 'at_most', 'is', 'is_not', 'is_empty'],
   money: ['more_than', 'at_most', 'is', 'is_not'],
   choice: ['is', 'is_not', 'is_one_of', 'is_empty'],
-  text: ['is', 'is_not', 'is_one_of', 'is_not_one_of', 'contains', 'does_not_contain', 'starts_with', 'does_not_start_with', 'has_number', 'one_word', 'is_empty', 'is_not_empty'],
+  text: ['is', 'is_not', 'is_one_of', 'is_not_one_of', 'contains', 'does_not_contain', 'starts_with', 'does_not_start_with', 'has_number', 'number_in_words', 'one_word', 'is_empty', 'is_not_empty'],
   boolean: ['is'],
   items: ['has', 'has_not'],
   share: ['is', 'is_not'],
@@ -65,7 +65,7 @@ export const TESTS = Object.freeze({
 
 export const ACTIONS = Object.freeze(['wait', 'skip', 'pending']);
 // Tests that take no value.
-const NO_VALUE = new Set(['is_empty', 'is_not_empty', 'has_number', 'one_word']);
+const NO_VALUE = new Set(['is_empty', 'is_not_empty', 'has_number', 'number_in_words', 'one_word']);
 
 function readCondition(raw, index) {
   if (!raw || typeof raw !== 'object' || Array.isArray(raw)) throw invalid(`condition ${index + 1} must be an object`);
@@ -131,6 +131,9 @@ function matches(condition, job, context) {
     if (!left) return false;
     if (test === 'is_not_one_of') return !value.some((v) => norm(v) === left);
     if (test === 'has_number') return /\d/.test(left);
+    // A part (between " - ") that is only a number is a client's reference,
+    // such as a patient number, so only a number beside words matches.
+    if (test === 'number_in_words') return left.split(' - ').some((part) => /\d/.test(part) && /\p{L}/u.test(part));
     if (test === 'one_word') return !left.includes(' ');
     if (test === 'contains') return left.includes(norm(value));
     if (test === 'does_not_contain') return !left.includes(norm(value));
@@ -182,12 +185,14 @@ export function ruleReasons(rules, job, { customer = {}, now = new Date() } = {}
 // The notes of the enabled pending rules that match one draft, as problems:
 // they put the draft on Pending (sending.js). `job` is the draft's job with
 // `reference`, the draft's Reference. A pending rule never stops a draft.
+// `fields` names the fields the rule reads, so the invoice page marks the
+// one to fix (the Reference box goes red).
 export function rulePending(rules, job, { customer = {}, now = new Date() } = {}) {
   const context = { customer, now };
   return rules
     .filter((r) => r.enabled && r.trigger === 'job_ready' && r.action.kind === 'pending')
     .filter((r) => r.conditions.every((c) => matches(c, job, context)))
-    .map((r) => ({ code: 'rule', message: r.action.note, short: r.name.slice(0, 40), rule: r.id ?? null }));
+    .map((r) => ({ code: 'rule', message: r.action.note, short: r.name.slice(0, 40), rule: r.id ?? null, fields: [...new Set(r.conditions.map((c) => c.field))] }));
 }
 
 // The starter rules made from the earlier fixed settings.

package/server/core/job-match.js

@@ -87,8 +87,9 @@ function jobLines(o, codes) {
 }
 
 // The two queues, oldest first. jobs: { id, clientName, practitioner,
-// jobDate, totalCents, possible }; invoices: { id, number, clientName,
-// issueDate, status, totalCents, possible }. `possible` counts the other
+// jobDate, totalCents, status, sourceSystem, sourceJobRef, possible };
+// invoices: { id, number, clientName, issueDate, status, totalCents,
+// possible }. `possible` counts the other
 // side with the same client and total.
 export async function listReconcile(db, organisationId) {
   const jobs = await db.select({
@@ -97,6 +98,9 @@ export async function listReconcile(db, organisationId) {
     practitioner: billingObligations.practitioner,
     jobDate: billingObligations.jobDate,
     totalCents: billingObligations.totalCents,
+    status: billingObligations.sourceStatus,
+    sourceSystem: billingObligations.sourceSystem,
+    sourceJobRef: billingObligations.sourceJobRef,
     // An unclear accounting match: "Make invoice" settles it first.
     unclear: sql`${billingObligations.accountingState} = 'ambiguous'`.mapWith(Boolean),
     possible: sql`(select count(*) from invoices i

package/server/core/sending.js

@@ -38,8 +38,9 @@ const LEASE_MS = 15 * 60 * 1000;
 // Outcomes that mean the accounting system holds the invoice.
 const SENT = new Set(['created', 'reconciled', 'existing', 'already_in_xero']);
 
-// `short` is the few words the Invoices list shows; `message` says how to fix it.
-const problem = (code, message, short = null) => ({ code, message, ...(short ? { short } : {}) });
+// `short` is the few words the Invoices list shows; `message` says how to fix
+// it. `extra` adds `fields` (the invoice fields to fix) and `line`.
+const problem = (code, message, short = null, extra = {}) => ({ code, message, ...(short ? { short } : {}), ...extra });
 
 // Flow's own checks of one draft. `lines` are its invoice lines.
 export function draftProblems(invoice, lines) {
@@ -47,7 +48,7 @@ export function draftProblems(invoice, lines) {
   if (!lines.length) problems.push(problem('no_lines', 'The invoice has no lines.', 'No lines'));
   else if (invoice.totalCents <= 0) problems.push(problem('no_amount', 'The total is $0.00 or less.', 'Total $0'));
   for (const line of lines) {
-    if (!line.priceItemId && !line.accountCode) problems.push(problem('line_no_item', `Line ${line.position} has no price item.`, `Line ${line.position}: no item`));
+    if (!line.priceItemId && !line.accountCode) problems.push(problem('line_no_item', `Line ${line.position} has no price item.`, `Line ${line.position}: no item`, { fields: ['line_item'], line: line.position }));
   }
   return problems;
 }

package/server/release-channel.js

@@ -77,7 +77,9 @@ async function get(url, { fetchImpl, retryDelayMs, as = "json" }) {
   throw new ReleaseUnavailable(lastError);
 }
 
-async function fromGitHub(channel, { slug, githubApi, fetchImpl, retryDelayMs }) {
+// The release GitHub names for the channel, alone. A publish guard asks
+// GitHub and npm separately, so the two must agree.
+export async function fromGitHub(channel, { slug, githubApi, fetchImpl, retryDelayMs }) {
   if (channel === "stable") {
     const latest = await get(`${githubApi}/repos/${slug}/releases/latest`, { fetchImpl, retryDelayMs });
     const release = parseReleaseTag(latest?.tag_name);
@@ -95,7 +97,8 @@ async function fromGitHub(channel, { slug, githubApi, fetchImpl, retryDelayMs })
   return tags.at(-1);
 }
 
-async function fromNpm(channel, { npmRegistry, packageName, fetchImpl, retryDelayMs }) {
+// The release npm's dist-tag names for the channel, alone.
+export async function fromNpm(channel, { npmRegistry, packageName, fetchImpl, retryDelayMs }) {
   const metadata = await get(`${npmRegistry}/${packageName.replaceAll("/", "%2f")}`, { fetchImpl, retryDelayMs });
   const distTag = channel === "stable" ? "latest" : "beta";
   const version = metadata?.["dist-tags"]?.[distTag];

package/server/ui/app.js

@@ -14,33 +14,19 @@ import { automationSection, renderAutomations } from '/assets/ui/automations.js'
 import { renderInvoicingSettings, sendModeSection } from '/assets/ui/invoicing-settings.js';
 import { renderPriceList } from '/assets/ui/price-list.js';
 import { renderPriceReconcile } from '/assets/ui/price-reconcile.js';
-import { lucide, renderCustomFields } from '/assets/ui/custom-fields.js';
+import { renderCustomFields } from '/assets/ui/custom-fields.js';
 import { renderJobs } from '/assets/ui/jobs.js';
 import { renderReconcile } from '/assets/ui/reconcile.js';
 import { renderXeroImport } from '/assets/ui/xero-import.js';
 import { startMonitoring } from '/assets/ui/monitoring.js';
-import { openSearch } from '/assets/ui/search.js';
+import { isSearchKey, openSearch } from '/assets/ui/search.js';
 import { alertStrip } from '/assets/ui/alerts.js';
-import { named, startTips } from '/assets/ui/tip.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, rowMenu, sectionTitle, settingRow, tileCard, tileSection, toast } from '/assets/ui/kit.js';
 
 const $ = (id) => document.getElementById(id);
 
-// h('p', { class: 'x', onclick }, 'text', child) — children are text or nodes.
-function h(tag, attrs = {}, ...children) {
-  const node = document.createElement(tag);
-  for (const [key, value] of Object.entries(attrs ?? {})) {
-    if (value == null || value === false) continue;
-    if (key.startsWith('on')) node.addEventListener(key.slice(2), value);
-    else if (key === 'style' && typeof value === 'object') Object.assign(node.style, value);
-    else node.setAttribute(key, value === true ? '' : String(value));
-  }
-  for (const child of children.flat()) {
-    if (child == null || child === false) continue;
-    node.append(child instanceof Node ? child : document.createTextNode(String(child)));
-  }
-  return node;
-}
-
 const ROLE_LABEL = { owner: 'Owner', admin: 'Admin', staff: 'Staff' };
 const ROLE_HINT = {
   owner: 'Manages people, connections and every record.',
@@ -137,97 +123,8 @@ async function flow(path, options = {}) {
   return body;
 }
 
-// Keeps a button off for `ms`, with the time left on it, then puts it back.
-function holdButton(button, ms) {
-  if (!button || !(ms > 0)) return;
-  clearInterval(button.fxHold);
-  const label = button.dataset.label ?? button.textContent;
-  button.dataset.label = label;
-  const until = Date.now() + ms;
-  const draw = () => {
-    const left = Math.ceil((until - Date.now()) / 1000);
-    if (left <= 0) {
-      clearInterval(button.fxHold);
-      button.textContent = label;
-      delete button.dataset.label;
-      button.removeAttribute('title');
-      button.disabled = false;
-      return;
-    }
-    const time = left < 60 ? `${left}s` : `${Math.floor(left / 60)}:${String(left % 60).padStart(2, '0')}`;
-    button.disabled = true;
-    button.textContent = `${label} · ${time}`;
-    button.title = `Flow waits before it asks again, to protect the connected system's limits. Ready in ${time}.`;
-  };
-  draw();
-  button.fxHold = setInterval(draw, 1000);
-}
-
 // ── Shared pieces ──────────────────────────────────────────────────────────
 
-// The page's name and nothing under it: the page shows what it is for.
-// `count` is a live number beside the name (2 to check); `help` is a docs
-// link, an icon with its name as a tip.
-function pageHeader(title, { count = null, help = null, actions = [] } = {}) {
-  return h('header', { class: 'fx-ph' },
-    h('div', { class: 'fx-ph__text' },
-      h('h1', { class: 'fx-title' }, title),
-      count != null ? h('span', { class: 'fx-ph__count' }, count) : null,
-      help ? helpLink(help) : null),
-    actions.length ? h('div', { class: 'fx-ph__actions' }, actions) : null);
-}
-
-// A docs link as a small "?" icon whose tip names it (How sending works).
-function helpLink({ href, label }) {
-  return named(h('a', { class: 'fx-help', href, target: '_blank', rel: 'noopener' }, lucide(h, 'circle-help')), label);
-}
-
-// A settings section's heading, with its docs link beside it.
-function sectionTitle(text, help = null) {
-  return h('h2', { class: 'fx-set__title' }, text, help ? helpLink(help) : null);
-}
-
-function notice(text, tone = 'info', title = null) {
-  return h('div', { class: 'fx-notice', 'data-tone': tone, role: tone === 'danger' ? 'alert' : 'status' },
-    title ? h('strong', {}, title) : null,
-    h('span', {}, text));
-}
-
-function toast(text, tone = 'info') {
-  const region = $('toasts');
-  const item = h('div', { class: 'fx-toast', 'data-tone': tone, role: 'status' }, text);
-  region.append(item);
-  setTimeout(() => item.remove(), 4200);
-}
-
-// A modal built on <dialog>: resolves with the button's value, or null.
-function dialog({ title, body, confirm, tone = 'primary' }) {
-  return new Promise((resolve) => {
-    const form = h('form', { method: 'dialog', class: 'fx-dialog__form' },
-      h('h2', { class: 'fx-dialog__title' }, title),
-      body,
-      h('div', { class: 'fx-dialog__actions' },
-        h('button', { class: 'fx-btn fx-btn--ghost', value: 'cancel', type: 'submit', formnovalidate: true }, 'Cancel'),
-        h('button', { class: `fx-btn fx-btn--${tone}`, value: 'ok', type: 'submit' }, confirm)));
-    const element = h('dialog', { class: 'fx-dialog' }, form);
-    element.addEventListener('close', () => {
-      const ok = element.returnValue === 'ok';
-      const data = ok ? new FormData(form) : null;
-      element.remove();
-      resolve(ok ? data : null);
-    });
-    document.body.append(element);
-    element.showModal();
-    element.querySelector('input, select, button[value="ok"]')?.focus();
-  });
-}
-
-function initials(person) {
-  const source = (person.name || person.email || '?').replace(/@.*/, '');
-  const parts = source.split(/[\s._-]+/).filter(Boolean);
-  return ((parts[0]?.[0] ?? '?') + (parts[1]?.[0] ?? '')).toUpperCase();
-}
-
 function statusPill(person) {
   if (person.status === 'pending') return h('span', { class: 'fx-status', 'data-tone': 'warn' }, 'Waiting for approval');
   if (person.status === 'disabled') return h('span', { class: 'fx-status', 'data-tone': 'mute' }, 'Turned off');
@@ -268,7 +165,6 @@ const VIEWS = {
 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"/>',
-  draft: '<path d="M14 3H6v18h5M14 3l4 4v3M14 3v4h4"/><path d="M13 21v-2.5l6-6 2.5 2.5-6 6z"/>',
   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"/>',
@@ -362,7 +258,7 @@ function search() {
 }
 
 document.addEventListener('keydown', (event) => {
-  if (event.key.toLowerCase() !== 'k' || !(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey) return;
+  if (!isSearchKey(event)) return;
   if (document.body.dataset.state !== 'signed-in') return;
   event.preventDefault();
   search();
@@ -407,6 +303,8 @@ async function route() {
 }
 
 // Opens a path in place; the address changes, the page stays.
+linksOpenWith((path) => go(path));
+
 function go(path, { replace = false } = {}) {
   if (path !== location.pathname + location.search) history[replace ? 'replaceState' : 'pushState'](null, '', path);
   route();
@@ -422,7 +320,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, pageHeader, sectionTitle, dialog, me, holdButton, tileCard, crumbs,
+  h, flow, toast, notice, fieldError, pageHeader, listHead, listFrame, edgeFade, sectionTitle, dialog, me, holdButton, tileCard, tileSection, crumbs,
   go: (target, options) => (typeof target === 'string' ? go(target, options) : navigate(target)),
 });
 
@@ -548,28 +446,6 @@ async function refreshPeople(host) {
   ].filter(Boolean));
 }
 
-let peopleMenus = 0;
-
-// A row's ⋯ menu, as on the Custom fields page.
-function rowMenu(label, items) {
-  const id = `fx-people-menu-${++peopleMenus}`;
-  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 panel = h('div', { class: 'fx-pop', id, popover: 'auto', role: 'menu' });
-  panel.addEventListener('toggle', (event) => {
-    button.setAttribute('aria-expanded', String(event.newState === 'open'));
-    if (event.newState !== 'open') return;
-    const close = () => panel.hidePopover();
-    panel.replaceChildren(...items.map((entry) => (entry === '-'
-      ? h('div', { class: 'fx-pop__sep' })
-      : h('button', { type: 'button', class: 'fx-pop__item', role: 'menuitem', 'data-tone': entry.tone, onclick: () => { close(); entry.run(); } },
-        h('span', { class: 'fx-pop__tick' }, lucide(h, entry.icon)), h('span', {}, entry.text)))));
-    const at = button.getBoundingClientRect();
-    panel.style.top = `${Math.round(at.bottom + 6)}px`;
-    panel.style.left = `${Math.round(Math.max(8, Math.min(at.right - panel.offsetWidth, innerWidth - panel.offsetWidth - 8)))}px`;
-  });
-  return [button, panel];
-}
-
 function personRow(person, host) {
   const self = person.id === me.person.id;
   const act = async (fn, done) => {
@@ -583,9 +459,9 @@ function personRow(person, host) {
   };
   const patch = (body) => flow(`/api/people/${person.id}`, { method: 'PATCH', body: JSON.stringify(body) });
   const who = h('div', { class: 'fx-person' },
-    h('span', { class: 'fx-avatar', 'aria-hidden': 'true' }, initials(person)),
+    h('span', { class: 'fx-avatar', 'aria-hidden': 'true' }, initialsOf(person)),
     h('span', { class: 'fx-person__text' },
-      h('span', { class: 'fx-person__name' }, person.name || person.email, self ? h('span', { class: 'fx-tag' }, 'You') : null),
+      h('span', { class: 'fx-person__name' }, personLabel(person), self ? h('span', { class: 'fx-tag' }, 'You') : null),
       person.name ? h('span', { class: 'fx-person__email' }, person.email) : null));
   const role = self
     ? h('span', { title: ROLE_HINT[person.role] }, ROLE_LABEL[person.role])
@@ -728,27 +604,6 @@ function integrationTile(integration) {
   });
 }
 
-// One card in a grid of choices (Integrations, Rules): its mark (a node, or
-// an ICON_PATHS name), the name, a status pill, two lines at most (only when
-// they help), and the action. The whole card is the link.
-function tileCard({ href, mark, title, status, blurb, action = 'Manage' }) {
-  const logo = typeof mark === 'string' ? h('span', { class: 'fx-logo fx-logo--icon', 'aria-hidden': 'true' }, icon(mark)) : mark;
-  return h('a', { class: `fx-int-card${blurb ? '' : ' fx-int-card--bare'}`, href, onclick: navigate },
-    h('header', { class: 'fx-int-card__head' },
-      logo,
-      h('h3', {}, title),
-      status ? h('span', { class: 'fx-status', 'data-tone': status.tone ?? 'mute' }, status.label) : null),
-    blurb ? h('p', { class: 'fx-int-card__blurb' }, blurb) : null,
-    h('span', { class: 'fx-int-card__btn' }, action));
-}
-
-// The trail above a page one level down: crumbs(['/integrations', 'Integrations'], 'Xero').
-function crumbs(...trail) {
-  const here = trail.pop();
-  return h('nav', { class: 'fx-crumbs', 'aria-label': 'Breadcrumb' },
-    ...trail.flatMap(([href, label]) => [h('a', { href, onclick: navigate }, label), h('span', { 'aria-hidden': 'true' }, '›')]),
-    h('span', {}, here));
-}
 
 // One integration's page (/integrations/<id>): its logo and maker, Connect
 // with each step shown as it happens, the setup steps, its settings, and the
@@ -959,22 +814,6 @@ function personSettingsSection(integration) {
   return section;
 }
 
-// One setting, laid out the same on every settings screen: a short name, one
-// line of smaller text under it, and the control on the right. Longer help
-// lives behind a link, not here. A wide control (a grid of choices) sits on
-// its own line under the name. `tone: 'danger'` marks a row that needs a person.
-function settingRow({ label, hint, control, wide = false, tone = null }) {
-  const target = control?.matches?.('input, select, textarea') ? control : control?.querySelector?.('input:not([type=color]), select, textarea');
-  const id = target ? (target.id ||= `fx-set-${++settingRow.next}`) : null;
-  return h('div', { class: `fx-setting${wide ? ' fx-setting--wide' : ''}`, 'data-tone': tone },
-    h('div', { class: 'fx-setting__text' },
-      id ? h('label', { class: 'fx-setting__name', for: id }, label) : h('span', { class: 'fx-setting__name' }, label),
-      hint ? h('p', { class: 'fx-setting__hint' }, hint) : null),
-    h('div', { class: 'fx-setting__control' }, control));
-}
-settingRow.next = 0;
-
-// The steps of a Connect, each ticked, running or crossed, with the time taken.
 function connectProgress({ steps, started }) {
   const seconds = Math.max(0, Math.round((Date.now() - started) / 1000));
   return h('div', { class: 'fx-progress', role: 'status' },