@arcforgelabs/flow 2026.10.27 → 2026.10.29

package/server/ui/app.js

@@ -14,6 +14,7 @@ import { automationSection } from '/assets/ui/automations.js';
 import { renderInvoicingSettings, sendModeSection } from '/assets/ui/invoicing-settings.js';
 import { renderJobs } from '/assets/ui/jobs.js';
 import { startMonitoring } from '/assets/ui/monitoring.js';
+import { openSearch } from '/assets/ui/search.js';
 
 const $ = (id) => document.getElementById(id);
 
@@ -208,6 +209,8 @@ const ICON_PATHS = {
   plug: '<path d="M9 3v5M15 3v5M6 8h12v3a6 6 0 01-12 0zM12 17v4"/>',
   person: '<circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 3.6-7 8-7s8 3 8 7"/>',
   flag: '<path d="M5 21V4M5 4h11l-2 4 2 4H5"/>',
+  search: '<circle cx="11" cy="11" r="6.5"/><path d="M16 16l4.5 4.5"/>',
+  menu: '<path d="M4 6h16M4 12h16M4 18h16"/>',
   palette: '<path d="M12 3a9 9 0 100 18c1.1 0 1.5-.8 1.5-1.6 0-1-.8-1.4-.8-2.4 0-.9.7-1.5 1.6-1.5H17a4 4 0 004-4c0-4.7-4-8.5-9-8.5z"/><circle cx="7.5" cy="11" r="1"/><circle cx="10" cy="7" r="1"/><circle cx="15" cy="7" r="1"/>',
 };
 
@@ -217,6 +220,87 @@ function icon(name) {
   return node;
 }
 
+// The menu button at the top of the sidebar. On a wide screen it folds the
+// sidebar to its icons and back, and the choice stays in this browser. On a
+// narrow screen the sidebar is a bar across the top, and the button opens
+// the menu below it; choosing a page, Escape or a click outside closes it.
+const NARROW = window.matchMedia('(max-width: 820px)');
+const FOLDED_KEY = 'flow_sidebar_folded';
+
+function readFolded() {
+  try { return localStorage.getItem(FOLDED_KEY) === '1'; } catch { return false; }
+}
+
+function drawMenu() {
+  const shell = $('shell');
+  const folded = readFolded();
+  shell.toggleAttribute('data-folded', folded);
+  const open = NARROW.matches ? shell.hasAttribute('data-menu-open') : !folded;
+  const toggle = $('menu-toggle');
+  const label = NARROW.matches ? (open ? 'Close the menu' : 'Open the menu') : (folded ? 'Show the menu' : 'Fold the menu');
+  toggle.setAttribute('aria-expanded', String(open));
+  toggle.setAttribute('aria-label', label);
+  toggle.title = label;
+  // Folded, a page's name shows when the pointer rests on its icon.
+  for (const link of document.querySelectorAll('[data-nav]')) {
+    if (folded && !NARROW.matches) link.title = link.dataset.label;
+    else link.removeAttribute('title');
+  }
+}
+
+function closeMenu() {
+  if (!$('shell').hasAttribute('data-menu-open')) return;
+  $('shell').removeAttribute('data-menu-open');
+  drawMenu();
+}
+
+function toggleMenu() {
+  if (NARROW.matches) {
+    $('shell').toggleAttribute('data-menu-open');
+  } else {
+    try { localStorage.setItem(FOLDED_KEY, readFolded() ? '0' : '1'); } catch { /* the choice is only a convenience */ }
+  }
+  drawMenu();
+}
+
+NARROW.addEventListener('change', () => { $('shell').removeAttribute('data-menu-open'); drawMenu(); });
+document.addEventListener('keydown', (event) => {
+  if (event.key === 'Escape' && $('shell')?.hasAttribute('data-menu-open')) {
+    closeMenu();
+    $('menu-toggle').focus();
+  }
+});
+document.addEventListener('click', (event) => {
+  if (!event.target.closest?.('.fx-side') || event.target.closest?.('[data-nav]')) closeMenu();
+});
+
+// Search, from the sidebar foot or Ctrl+K (⌘K): the pages this person may
+// open, invoices and jobs (search.js).
+function search() {
+  const views = Object.entries(VIEWS)
+    .filter(([, view]) => !view.ownerOnly || me?.person.role === 'owner')
+    .map(([name, view]) => ({ name, label: view.label, icon: view.icon }));
+  openSearch({ h, flow, go, icon, views });
+}
+
+document.addEventListener('keydown', (event) => {
+  if (event.key.toLowerCase() !== 'k' || !(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey) return;
+  if (document.body.dataset.state !== 'signed-in') return;
+  event.preventDefault();
+  search();
+});
+
+// "Report a problem" in Clerk's account menu, between "Manage account" and
+// "Sign out". Clerk mounts and unmounts the icon itself.
+function reportMenuItem(openReport) {
+  return {
+    label: 'Report a problem',
+    onClick: () => { openReport().catch((error) => toast(error.message, 'danger')); },
+    mountIcon: (element) => element.replaceChildren(icon('flag')),
+    unmountIcon: (element) => element.replaceChildren(),
+  };
+}
+
 // The view and, for one record, its id: /invoices/<id> is ['invoices', '<id>'].
 function currentView() {
   const [name, id = null] = location.pathname.replace(/^\/+|\/+$/g, '').split('/');
@@ -230,7 +314,7 @@ async function route() {
   const [view, id] = currentView();
   const path = id ? `/${view}/${id}` : `/${view}`;
   if (location.pathname !== path) history.replaceState(null, '', path);
-  for (const link of document.querySelectorAll('[data-nav]')) {
+  for (const link of document.querySelectorAll('a[data-nav]')) {
     link.setAttribute('aria-current', link.dataset.nav === view ? 'page' : 'false');
   }
   main.replaceChildren();
@@ -242,7 +326,7 @@ async function route() {
 
 // Opens a path in place; the address changes, the page stays.
 function go(path, { replace = false } = {}) {
-  if (path !== location.pathname) history[replace ? 'replaceState' : 'pushState'](null, '', path);
+  if (path !== location.pathname + location.search) history[replace ? 'replaceState' : 'pushState'](null, '', path);
   route();
 }
 
@@ -286,14 +370,33 @@ function renderShell() {
     if (view.ownerOnly && me?.person.role !== 'owner') continue;
     if (view.group && view.group !== group) items.push(h('span', { class: 'fx-nav__group' }, view.group));
     group = view.group;
-    items.push(h('a', { href: `/${name}`, 'data-nav': name, onclick: navigate }, icon(view.icon), h('span', {}, view.label)));
+    items.push(h('a', { href: `/${name}`, 'data-nav': name, 'data-label': view.label, onclick: navigate }, icon(view.icon), h('span', { class: 'fx-nav__label' }, view.label)));
   }
-  nav.replaceChildren(...items);
-  mountClerk('userButton', $('user-button'), { afterSignOutUrl: '/sign-in', showName: false });
+  // "Report a problem" sits at the foot of the menu, above the account chip,
+  // while Sentry and its report form are on (monitoring.js).
+  const report = h('button', { type: 'button', class: 'fx-nav__report', 'data-nav': 'report', 'data-label': 'Report a problem', hidden: true },
+    icon('flag'), h('span', { class: 'fx-nav__label' }, 'Report a problem'));
+  nav.replaceChildren(...items, report);
+  $('menu-toggle').replaceChildren(icon('menu'));
+  $('menu-toggle').onclick = toggleMenu;
+  drawMenu();
+  // The sidebar foot shows who is signed in: photo or initial, then the name
+  // (the email when the account has no name). It opens the account menu.
+  const userButton = { afterSignOutUrl: '/sign-in', showName: true };
+  $('search').replaceChildren(icon('search'));
+  $('search').onclick = search;
+  mountClerk('userButton', $('user-button'), userButton);
   // Errors and problem reports go to the installation's own Sentry, when the
-  // Sentry integration is on (monitoring.js). Flow works the same without it.
-  $('report-problem').replaceChildren(icon('flag'));
-  startMonitoring({ flow, person: me.person, button: $('report-problem') })
+  // Sentry integration is on (monitoring.js). Then "Report a problem" shows
+  // in the menu and in the account menu. Flow works the same without it.
+  startMonitoring({ flow, person: me.person })
+    .then((openReport) => {
+      if (!openReport) return;
+      report.hidden = false;
+      report.onclick = () => { openReport().catch((error) => toast(error.message, 'danger')); };
+      unmountClerk($('user-button'));
+      mountClerk('userButton', $('user-button'), { ...userButton, customMenuItems: [reportMenuItem(openReport)] });
+    })
     .catch((error) => console.warn(`[monitoring] ${error.message}`));
   window.addEventListener('popstate', route);
   return route();

package/server/ui/clerk-appearance.js

@@ -11,6 +11,9 @@ const gearIcon = {
   '&& > *': { visibility: 'hidden' },
 };
 
+// Matches the narrow-screen rule in flow.css, where the sidebar becomes a bar.
+const NARROW = '@media (max-width: 820px)';
+
 function token(name, fallback) {
   const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
   return value || fallback;
@@ -42,6 +45,7 @@ export function flowClerkAppearance({ embedded = false, publicSignUp = false } =
   const inputEdge = { ...controlEdge, '&&[data-feedback="error"]': { boxShadow: edge(danger) } };
   const display = token('--t-display', 'ui-serif, Georgia, serif');
   const dim = token('--t-dim', '#5b6773');
+  const paper = token('--t-paper', '#ffffff');
   return {
     variables: {
       colorPrimary: token('--t-primary', '#1f6f8f'),
@@ -84,6 +88,23 @@ export function flowClerkAppearance({ embedded = false, publicSignUp = false } =
       badge: { '&&': { color: dim, background: `color-mix(in srgb, ${text} 5%, transparent)`, borderColor: line } },
       formButtonPrimary: { boxShadow: 'none', textTransform: 'none', fontWeight: 650 },
       socialButtonsBlockButton: controlEdge,
+      // The account button in the sidebar foot is a chip: photo or initial,
+      // then the name (Clerk shows the email when there is no name), clipped
+      // with an ellipsis to fit. The top bar on narrow screens has no room for
+      // the name, so there it is the photo or initial alone.
+      userButtonTrigger: {
+        '&&': {
+          width: '100%', minWidth: 0, justifyContent: 'flex-start', padding: '4px 10px 4px 4px', borderRadius: token('--t-radius-lg', '10px'), background: paper, boxShadow: `inset 0 0 0 1px ${line}`,
+          '&:hover': { background: `color-mix(in srgb, ${text} 6%, ${paper})` },
+          [NARROW]: { width: 'auto', padding: 0, borderRadius: '50%', background: 'transparent', boxShadow: 'none', '&:hover': { background: 'transparent' } },
+        },
+      },
+      userButtonBox: { flexDirection: 'row-reverse', justifyContent: 'flex-end', minWidth: 0, gap: '8px' },
+      userButtonOuterIdentifier: {
+        minWidth: 0, paddingInlineStart: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
+        color: token('--t-strong', text), fontSize: '14px', fontWeight: 600,
+        [NARROW]: { display: 'none' },
+      },
       userButtonPopoverCard: { border: `1px solid ${line}`, boxShadow: shadow },
       userButtonPopoverActionButtonIcon__manageAccount: gearIcon,
       footer: embedded ? { display: 'none' } : undefined,

package/server/ui/flow.css

@@ -114,23 +114,42 @@ body:is([data-state="off"], [data-state="error"], [data-state="no-access"]) .fx-
   width: 232px; height: 100vh; padding: 16px 12px 12px;
   background: var(--t-s1); border-right: 1px solid var(--fx-line);
 }
-.fx-side > .fx-brand { padding: 4px 8px 18px; font-size: 19px; }
-.fx-side > .fx-brand .fx-mark { width: 26px; height: 26px; }
+.fx-side__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 0 14px 8px; }
+.fx-side__head .fx-brand { min-width: 0; font-size: 19px; }
+.fx-side__head .fx-mark { width: 26px; height: 26px; }
 .fx-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; }
 .fx-nav__group { padding: 16px 10px 6px; color: var(--t-dim); font: var(--t-label-weight) var(--t-label-size)/1.3 var(--t-body); letter-spacing: var(--t-label-spacing); text-transform: var(--t-label-case); }
 .fx-nav__group:first-child { padding-top: 4px; }
-.fx-nav a {
+.fx-nav a, .fx-nav__report {
   display: flex; align-items: center; gap: 10px;
   padding: 8px 10px; border-radius: var(--t-radius);
   color: var(--t-text); font-weight: 500; font-size: 14px; text-decoration: none; white-space: nowrap;
 }
-.fx-nav a:hover { color: var(--t-strong); background: var(--fx-hover); }
+.fx-nav a:hover, .fx-nav__report:hover { color: var(--t-strong); background: var(--fx-hover); }
+.fx-nav__report { margin-top: auto; border: 0; background: none; font: inherit; font-weight: 500; font-size: 14px; text-align: left; cursor: pointer; }
+.fx-nav__report[hidden] { display: none; }
 .fx-nav a[aria-current="page"] { color: var(--t-accent); background: var(--t-accent-bg); font-weight: 650; box-shadow: inset 2px 0 0 var(--t-brand); }
 .fx-nav__count { margin-left: auto; color: var(--t-dim); font-size: 12px; font-weight: 700; }
 .fx-ico { display: inline-flex; flex: none; }
 .fx-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
 .fx-side__end { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 6px 0; border-top: 1px solid var(--fx-line); }
 .fx-side__user { display: flex; min-width: 32px; min-height: 32px; align-items: center; }
+/* Clerk replaces the mount's classes with its root box's, so this uses the id. */
+#user-button { flex: 1 1 auto; min-width: 0; }
+/* Folded (wide screens only): the sidebar keeps its icons, the menu button
+   and the account photo; each page's name is still read out. */
+@media (min-width: 821px) {
+  .fx-shell[data-folded] .fx-side { width: 64px; padding-inline: 10px; }
+  .fx-shell[data-folded] .fx-side__head { flex-direction: column; gap: 10px; padding: 0 0 14px; }
+  .fx-shell[data-folded] .fx-brand span { display: none; }
+  .fx-shell[data-folded] .fx-nav__group { height: 1px; margin: 10px 6px; padding: 0; overflow: hidden; background: var(--fx-line); color: transparent; }
+  .fx-shell[data-folded] :is(.fx-nav a, .fx-nav__report) { justify-content: center; padding: 9px 0; }
+  .fx-shell[data-folded] .fx-nav__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
+  .fx-shell[data-folded] .fx-side__end { flex-direction: column; padding: 12px 0 0; }
+  .fx-shell[data-folded] #user-button { flex: none; }
+  .fx-shell[data-folded] #user-button .cl-userButtonTrigger { width: auto; padding: 0; border-radius: 50%; background: transparent; box-shadow: none; }
+  .fx-shell[data-folded] #user-button .cl-userButtonOuterIdentifier { display: none; }
+}
 .fx-main { flex: 1; min-width: 0; max-width: 1180px; margin: 0 auto; padding: 32px clamp(16px, 4vw, 48px) 64px; display: grid; gap: 20px; align-content: start; }
 .fx-main:focus { outline: none; box-shadow: none; }
 
@@ -384,25 +403,107 @@ a.fx-strong:hover { text-decoration: underline; }
 .fx-toolbar--plain .fx-search { margin-bottom: 0; }
 .fx-empty .fx-btn { margin-top: 12px; }
 .fx-panel.fx-empty { display: grid; justify-items: center; }
-.fx-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
-.fx-board__col { display: grid; gap: 8px; align-content: start; min-height: 240px; padding: 10px; border: 1px solid var(--fx-line); border-radius: var(--t-radius-lg); background: var(--t-s1); }
-.fx-board__head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 4px; font-size: 14px; }
-.fx-board__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--t-accent); flex: none; }
-.fx-board__dot[data-tone="warn"] { background: var(--t-warn); }
-.fx-board__dot[data-tone="success"] { background: var(--t-success); }
-.fx-board__dot[data-tone="mute"] { background: var(--t-dim); }
-.fx-board__count { padding: 0 7px; border-radius: 999px; background: var(--fx-hover); color: var(--t-dim); font-size: 12px; font-weight: 700; line-height: 20px; }
-.fx-board__sum { margin-left: auto; color: var(--t-dim); font-size: 12.5px; font-variant-numeric: tabular-nums; }
-.fx-board__cards { display: grid; gap: 8px; }
-.fx-board__none { padding: 12px 4px; color: var(--t-dim); font-size: 13px; }
-.fx-job { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--fx-line); border-radius: var(--t-radius); background: var(--t-paper); box-shadow: var(--t-shadow); font-size: 13.5px; }
-.fx-job--flag { border-left: 3px solid var(--t-warn); }
-.fx-job__top { display: flex; align-items: baseline; gap: 8px; }
-.fx-job__amount { margin-left: auto; color: var(--t-strong); font-weight: 600; font-family: var(--t-data, var(--t-body)); font-variant-numeric: tabular-nums; }
-.fx-job__client { color: var(--t-text); }
-.fx-job__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--t-dim); font-size: 12.5px; }
-.fx-job__why { color: var(--t-warn); font-size: 12.5px; }
-.fx-job .fx-btn { justify-self: start; margin-top: 4px; }
+/* The board never scrolls sideways: its columns (one per work system status)
+   wrap onto more rows when the page is narrow, and stack on a phone. A long
+   column scrolls inside itself. */
+.fx-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px; align-items: start; }
+.fx-board__col { display: grid; gap: 8px; align-content: start; min-width: 0; padding: 10px 8px 8px; border-radius: var(--t-radius-lg); background: var(--t-s1); }
+.fx-board__head { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 2px 2px 4px; }
+.fx-board__sum { flex: none; margin-left: auto; color: var(--t-dim); font-size: 12px; font-variant-numeric: tabular-nums; }
+.fx-board__cards { display: grid; gap: 8px; max-height: 70vh; overflow-y: auto; }
+.fx-board__none { padding: 8px 4px; color: var(--t-dim); font-size: 13px; }
+.fx-table--jobs tbody tr { cursor: pointer; }
+
+/* A work system status as a coloured label: board columns and the job page.
+   The colour follows where the status sits in the work (job-board.js,
+   statusRank): new, in work, checking and complete, out of the lab, cancelled. */
+.fx-stage {
+  --stage: var(--t-accent);
+  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; padding: 3px 8px 3px 7px;
+  border: 1px solid color-mix(in srgb, var(--stage) 30%, transparent); border-radius: 4px;
+  background: color-mix(in srgb, var(--stage) 12%, transparent); color: var(--stage);
+  font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: .04em; text-transform: uppercase;
+}
+.fx-stage::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
+.fx-stage__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fx-stage__count { opacity: .75; font-variant-numeric: tabular-nums; }
+.fx-stage[data-rank="0"] { --stage: var(--t-mute); }
+.fx-stage[data-rank="3"], .fx-stage[data-rank="4"] { --stage: color-mix(in srgb, var(--t-accent) 45%, var(--t-success)); }
+.fx-stage[data-rank="5"], .fx-stage[data-rank="6"] { --stage: var(--t-success); }
+.fx-stage[data-rank="7"] { --stage: var(--t-dim); }
+
+/* ── Job card ───────────────────────────────────────────────────────────────
+   One card on the board ("Task card"; jobs.js, jobCard): client,
+   practitioner, one date, total, and a small warning mark when the job has a
+   problem. The card design may be swapped: change this block and jobCard
+   together. */
+.fx-job { position: relative; display: grid; min-width: 0; padding: 11px 12px 9px; border: 1px solid var(--fx-line); border-radius: var(--t-radius); background: var(--t-paper); box-shadow: var(--t-shadow); font-size: 13px; cursor: pointer; }
+.fx-job:hover { border-color: var(--t-brd-hi, var(--fx-line)); }
+.fx-job:focus-visible { outline: 2px solid var(--t-ring, var(--t-accent)); outline-offset: 2px; }
+.fx-job__client { display: -webkit-box; overflow: hidden; color: var(--t-strong); font-size: 14px; font-weight: 600; line-height: 1.3; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
+.fx-job__who { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 5px; color: var(--t-dim); font-size: 12.5px; }
+.fx-job__who span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fx-job__who svg, .fx-job__date svg { flex: none; color: var(--t-mute); }
+.fx-job__foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--fx-line-soft); color: var(--t-dim); font-size: 12px; }
+.fx-job__date { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; white-space: nowrap; }
+.fx-job__date--late, .fx-job__date--late svg { color: var(--t-danger); }
+.fx-job__space { flex: 1; }
+.fx-job__amount { color: var(--t-text); font-weight: 600; font-family: var(--t-data, var(--t-body)); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.fx-job__problem { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--t-warn); cursor: pointer; }
+.fx-job__problem:hover, .fx-job__problem:focus-visible { background: var(--t-warn-bg); }
+.fx-job__cell { display: inline-flex; align-items: center; gap: 6px; }
+
+/* ── Job page ───────────────────────────────────────────────────────────────
+   A job opened from the board: a large panel over it, like a task page, with
+   the activity at the side. It stacks on a phone. */
+.fx-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: var(--t-dim); overflow-wrap: anywhere; }
+.fx-dialog.fx-task { width: min(1040px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; }
+.fx-task__grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; }
+.fx-task__main { min-width: 0; padding: 20px 28px 28px; }
+.fx-task__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.fx-task__crumb { display: flex; flex-wrap: wrap; gap: 6px; color: var(--t-dim); font-size: 12.5px; }
+.fx-task__slash { color: var(--t-mute); }
+.fx-task__title { margin: 6px 0 12px; color: var(--t-strong); font: var(--t-display-weight) 30px/1.15 var(--t-display); overflow-wrap: anywhere; }
+.fx-task__stage { margin-bottom: 18px; }
+.fx-task__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 0; }
+.fx-task__fields > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: center; min-width: 0; padding: 8px 0; border-bottom: 1px solid var(--fx-line-soft); }
+.fx-task__fields dt { color: var(--t-dim); font-size: 12.5px; }
+.fx-task__fields dd { min-width: 0; margin: 0; color: var(--t-strong); font-size: 13.5px; overflow-wrap: anywhere; }
+.fx-task__late { color: var(--t-danger) !important; }
+.fx-task__link { color: var(--t-accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--t-accent) 40%, transparent); }
+.fx-task__link:hover { border-bottom-color: currentColor; }
+.fx-task__fix { scroll-margin-top: 16px; margin-top: 22px; border: 1px solid var(--t-warn-brd, var(--t-warn)); border-radius: var(--t-radius); background: var(--t-warn-bg); }
+.fx-task__fix h3, .fx-task__lines h3, .fx-task__activity h3 { margin: 0; color: var(--t-dim); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
+.fx-task__fix h3 { padding: 12px 14px 4px; color: var(--t-warn); }
+.fx-task__fixrow { padding: 9px 14px; border-top: 1px solid var(--fx-line-soft); color: var(--t-strong); font-size: 13.5px; }
+.fx-task__fixrow:first-of-type { border-top: 0; }
+.fx-task__lines { margin-top: 24px; }
+.fx-task__lines h3 { margin-bottom: 8px; }
+.fx-task__lines table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
+.fx-task__lines th { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--fx-line); color: var(--t-mute); font-size: 12px; font-weight: 500; text-align: left; }
+.fx-task__lines td { padding: 9px 8px 9px 0; border-bottom: 1px solid var(--fx-line-soft); vertical-align: top; overflow-wrap: anywhere; }
+.fx-task__lines .fx-num { padding-right: 0; text-align: right; }
+.fx-task__lines tfoot td { border-bottom: 0; color: var(--t-strong); font-weight: 600; }
+.fx-task__col-code { width: 130px; }
+.fx-task__col-amount { width: 96px; }
+.fx-task__miss { color: var(--t-warn); }
+.fx-task__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
+.fx-task__actions:empty { display: none; }
+.fx-task__activity { min-width: 0; padding: 24px 20px; border-left: 1px solid var(--fx-line); background: var(--t-s1); }
+.fx-task__activity h3 { margin-bottom: 14px; }
+.fx-task__activity ol { margin: 0; padding: 0; list-style: none; }
+.fx-task__activity li { position: relative; padding: 0 0 16px 18px; color: var(--t-text); font-size: 13px; }
+.fx-task__activity li::before { content: ""; position: absolute; left: 3px; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--t-mute); }
+.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; }
+@media (max-width: 760px) {
+  .fx-dialog.fx-task { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0; border-radius: 0; }
+  .fx-task__grid { grid-template-columns: minmax(0, 1fr); }
+  .fx-task__main { padding: 16px; }
+  .fx-task__fields { grid-template-columns: minmax(0, 1fr); }
+  .fx-task__activity { padding: 16px; border-top: 1px solid var(--fx-line); border-left: 0; }
+}
 
 /* ── Dialog ─────────────────────────────────────────────────────────────── */
 .fx-dialog {
@@ -416,6 +517,25 @@ a.fx-strong:hover { text-decoration: underline; }
 .fx-dialog__title { color: var(--t-strong); font: var(--t-display-weight) 21px/1.2 var(--t-display); }
 .fx-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
 
+/* Search (search.js): a box near the top, results grouped under it. */
+.fx-search-dialog { width: min(600px, calc(100vw - 32px)); margin-top: 12vh; }
+.fx-search-dialog__bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--fx-line); color: var(--t-dim); }
+.fx-search-dialog__input { flex: 1; min-width: 0; padding: 6px 0; border: 0; background: transparent; color: var(--t-strong); font: 500 16px/1.4 var(--t-body); }
+.fx-search-dialog__input:focus { outline: none; box-shadow: none; }
+.fx-search-dialog__input::-webkit-search-cancel-button { display: none; }
+.fx-search-dialog__results { max-height: min(60vh, 460px); overflow-y: auto; padding: 6px; }
+.fx-search-dialog__group + .fx-search-dialog__group { margin-top: 6px; }
+.fx-search-dialog__label { padding: 8px 10px 4px; color: var(--t-dim); font: var(--t-label-weight) var(--t-label-size)/1.3 var(--t-body); letter-spacing: var(--t-label-spacing); text-transform: var(--t-label-case); }
+.fx-search-dialog__option { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--t-radius); color: var(--t-text); text-decoration: none; }
+.fx-search-dialog__option:hover { background: var(--fx-hover); }
+.fx-search-dialog__option[aria-selected="true"] { color: var(--t-accent); background: var(--t-accent-bg); }
+.fx-search-dialog__text { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
+.fx-search-dialog__title { flex: none; color: inherit; font-weight: 600; font-size: 14px; }
+.fx-search-dialog__detail { overflow: hidden; color: var(--t-dim); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
+/* --t-dim is only checked on plain surfaces; on the accent tint, --t-text passes. */
+.fx-search-dialog__option[aria-selected="true"] .fx-search-dialog__detail { color: var(--t-text); }
+.fx-search-dialog__empty { padding: 18px 10px; color: var(--t-dim); text-align: center; }
+
 /* ── Sign-in ────────────────────────────────────────────────────────────── */
 .fx-auth { min-height: 100vh; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
 .fx-auth__brand {
@@ -517,13 +637,18 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 @media (max-width: 820px) {
   .fx-shell { flex-direction: column; }
   .fx-side { flex-direction: row; align-items: center; width: auto; height: 60px; padding: 0 12px; border-right: 0; border-bottom: 1px solid var(--fx-line); }
-  .fx-side > .fx-brand { padding: 0; }
-  .fx-side > .fx-brand span { display: none; }
-  .fx-nav { flex-direction: row; overflow-x: auto; overflow-y: hidden; }
-  .fx-nav__group { display: none; }
-  .fx-nav a { padding: 7px 9px; }
-  .fx-nav a .fx-ico { display: none; }
-  .fx-side__end { padding: 0; border-top: 0; }
+  .fx-side__head { flex-direction: row-reverse; gap: 6px; padding: 0; }
+  .fx-side__head .fx-brand span { display: none; }
+  /* The menu opens as a panel below the bar. */
+  .fx-nav {
+    display: none; position: absolute; top: 60px; left: 0; right: 0;
+    max-height: calc(100vh - 60px); padding: 4px 12px 12px;
+    background: var(--t-s1); border-bottom: 1px solid var(--fx-line); box-shadow: var(--t-shadow);
+  }
+  .fx-shell[data-menu-open] .fx-nav { display: flex; }
+  .fx-nav__report { margin-top: 8px; }
+  .fx-side__end { margin-left: auto; padding: 0; border-top: 0; }
+  #user-button { flex: none; }
 }
 
 /* ── Phones ─────────────────────────────────────────────────────────────── */

package/server/ui/invoicing-settings.js

@@ -11,6 +11,7 @@
 
 import { automationSection } from '/assets/ui/automations.js';
 import { rulesSection } from '/assets/ui/invoice-rules.js';
+import { lineMappingSection } from '/assets/ui/line-mappings.js';
 
 const DOCS = 'https://github.com/arcforgelabs/flow/blob/main/docs/INVOICING_RULES.md';
 
@@ -66,6 +67,7 @@ export async function renderInvoicingSettings(main, ui) {
     disabled ? notice('Only an owner or admin can change these.', 'info') : null,
     section('Drafts',
       row('Payment terms', 'Days from invoice to due date.', days('paymentTermsDays', 'Payment terms in days'))),
+    lineMappingSection(ui),
     automationSection(ui, 'invoicing', 'Automations'),
     rulesSection(ui),
   ].filter(Boolean));

package/server/ui/job-board.js

@@ -0,0 +1,155 @@
+// The Jobs board's rules, with no page code, so tests can read them
+// (test/job-board.test.js). server/ui/jobs.js draws the page.
+//
+// The board's columns are the work system's own job statuses, one to one.
+// A job's invoice has a stage of its own (invoiceStage), shown in the job's
+// detail panel; a job whose invoice needs a person has a problem (fixes).
+
+// Where a status sits on the board when the work system gives no order:
+// first the statuses of new work, then the ones Flow does not know (in the
+// order Flow first saw them), then checking, complete, shipped, delivered,
+// and cancelled last.
+const STATUS_RANKS = [
+  [/\b(new|draft|received|booked|submitted|ordered|pending)\b/i, 0],
+  [/\b(scan|scanned|design|designed|model|wax|impression)/i, 1],
+  [/\b(qc|quality|check|checked|checking|finish|finished|finishing)\b/i, 3],
+  [/\bcomplete(d)?\b|\bready\b/i, 4],
+  [/\b(shipped|dispatched|sent)\b/i, 5],
+  [/\bdelivered\b/i, 6],
+  [/\b(cancell?ed|void|closed|archived|deleted)\b/i, 7],
+];
+const UNKNOWN_RANK = 2;
+// From this rank on, the work is out of the lab: shipped, delivered, cancelled.
+export const FINAL_RANK = 5;
+export const NO_STATUS = 'No status';
+
+export function statusRank(label) {
+  return STATUS_RANKS.find(([pattern]) => pattern.test(label ?? ''))?.[1] ?? UNKNOWN_RANK;
+}
+
+// The board's column labels, left to right. `statuses` is the work system's
+// list ({ label, firstSeenAt }); `jobs` adds any status only a job names.
+export function orderStatuses(statuses = [], jobs = []) {
+  const seen = new Map();
+  for (const s of statuses) if (s?.label && !seen.has(s.label)) seen.set(s.label, s.firstSeenAt ?? null);
+  for (const job of jobs) {
+    const label = job.status ?? NO_STATUS;
+    if (!seen.has(label)) seen.set(label, null);
+  }
+  return [...seen].sort(([a, at], [b, bt]) => statusRank(a) - statusRank(b)
+    || String(at ?? '9').localeCompare(String(bt ?? '9'))
+    || a.localeCompare(b)).map(([label]) => label);
+}
+
+export const INVOICE_STAGES = {
+  drafted: 'Drafted', problem: 'Problem', ready: 'Ready to invoice', invoiced: 'Invoiced', paid: 'Paid',
+};
+
+const PROBLEM_VIEWS = ['pending', 'review_required', 'held'];
+// A rule's reason, as ruleBlockers writes it (server/core/invoicing-rules.js).
+const isRule = (reason) => reason !== 'the job is not marked ready to invoice';
+
+// The stage of a job's invoice, from its billing obligation (the API's job
+// shape, server/core/job-board.js), or null while the job has none or is
+// still in work.
+//   Drafted           a draft in Flow that nobody marked ready, or a job
+//                     that passes every check and waits for the automation
+//   Problem           something a person must fix: the job's checks, a rule
+//                     that stops the draft, or a problem with the draft
+//   Ready to invoice  a person marked the draft ready
+//   Invoiced          issued, sent, or in the accounting system
+//   Paid              paid in full
+export function invoiceStage(o) {
+  if (!o || o.view === 'in_work') return null;
+  if (o.view === 'paid') return 'paid';
+  if (PROBLEM_VIEWS.includes(o.view)) return 'problem';
+  if (o.view === 'invoiced') return 'invoiced';
+  if (o.invoiceView === 'problem' || o.invoiceStatus === 'void') return 'problem';
+  if (o.invoiceStatus === 'issued') return 'invoiced';
+  if (o.invoiceView === 'ready') return 'ready';
+  if (o.view === 'ready') return (o.waitingFor ?? []).some(isRule) ? 'problem' : 'drafted';
+  if (o.view === 'drafted') return 'drafted';
+  return null;
+}
+
+const capital = (text) => (text ? text[0].toUpperCase() + text.slice(1) : text);
+const sentence = (text) => capital(String(text).trim().replace(/\.?$/, '.'));
+
+// One ledger reason (server/core/ledger.js) as a fix: a short label, what is
+// wrong, and what to do.
+function reasonFix(reason, acct) {
+  const fix = (label, todo) => ({ label, text: sentence(reason), todo });
+  if (reason === 'the accounting system was not checked') {
+    return { label: `Not checked in ${acct}`, text: `Flow did not check ${acct} for an invoice for this job yet.`, todo: `Wait for the next check, a few minutes. If it stays, check ${acct} under Settings, Integrations.` };
+  }
+  if (reason === 'a line does not map to a price item') {
+    return { label: 'No price code', text: 'A line has a code that is not in the price list.', todo: 'Add the code to the price list, or correct the code in the work system.' };
+  }
+  if (reason === 'the job has no customer contact') {
+    return { label: 'Client not linked', text: 'The client is not linked to a customer in Flow.', todo: 'Link the client to a customer in Flow.' };
+  }
+  if (reason === 'the work system report is out of date') {
+    return { label: 'Out of date', text: 'Flow has no news of this job from the work system for more than a day.', todo: 'Check the work system under Settings, Integrations.' };
+  }
+  if (reason === 'the job changed after its invoice was made') return fix('Job changed', 'Compare the invoice with the job, then correct the invoice.');
+  if (/deleted in /i.test(reason)) return fix('Deleted', 'Check the job in the work system. Void its invoice if it has one.');
+  if (/^the accounting evidence is ambiguous/.test(reason)) return fix(`${acct} match unclear`, `Find the invoice for this job in ${acct}, then link it.`);
+  if (/^the accounting evidence is conflict/.test(reason)) return fix(`Two ${acct} invoices`, `Find the right invoice for this job in ${acct}. Void the other.`);
+  if (/^invoice .* was (voided|deleted)$/.test(reason)) return fix(`Invoice ${/voided$/.test(reason) ? 'voided' : 'deleted'}`, 'Make a new invoice, or close the job.');
+  if (/^the accounting system reports /.test(reason)) return fix(`Already in ${acct}`, `Check the invoice in ${acct}. Link it to this job if it is the right one.`);
+  if (/^the job is held$/.test(reason)) return fix('On hold', 'Release the hold when the job can be invoiced.');
+  if (/^the job is review$/.test(reason)) return fix('Needs review', 'Check the job and its invoice.');
+  if (reason === 'held') return fix('On hold', 'Release the hold when the job can be invoiced.');
+  return fix('Needs review', 'Check the job and its invoice.');
+}
+
+// One draft problem (server/core/sending.js, and the accounting system's) as a fix.
+function draftFix(problem, acct) {
+  const code = problem.code ?? '';
+  const fix = (label, todo) => ({ label, text: sentence(problem.message ?? label), todo });
+  if (code === 'no_lines') return fix('No lines', 'Open the invoice and add the lines.');
+  if (code === 'no_amount') return fix('Total is $0', 'Open the invoice and correct the amounts.');
+  if (code === 'line_no_item') return fix('No price code', 'Open the invoice and choose a price item for each line.');
+  if (code.endsWith('_item_missing')) return fix(`Item not in ${acct}`, `Add the item in ${acct}, then sync.`);
+  if (code.endsWith('_contact_missing')) return fix(`Client not in ${acct}`, `Add the client in ${acct}, then sync.`);
+  if (code.endsWith('_contact_ambiguous')) return fix(`Two ${acct} clients`, `Merge or rename the clients in ${acct}, then sync.`);
+  if (code.includes('earlier_version')) return fix(`Old copy in ${acct}`, 'Open the invoice for the steps.');
+  if (code.startsWith('send_') || code.endsWith('_push_failed') || code.endsWith('_outcome_unknown')) return fix('Not sent', 'Open the invoice and send it again.');
+  return fix('Invoice problem', 'Open the invoice to correct it.');
+}
+
+// What a person must fix on a job, in order: [{ label, text, todo }]. Empty
+// unless invoiceStage is Problem. `accountingName` names the accounting
+// system (for example Xero).
+export function fixes(o, { accountingName = null } = {}) {
+  if (invoiceStage(o) !== 'problem') return [];
+  const acct = accountingName ?? 'the accounting system';
+  const found = [];
+  if (PROBLEM_VIEWS.includes(o.view)) found.push(...(o.reasons ?? []).map((r) => reasonFix(r, acct)));
+  if (o.view === 'ready') {
+    found.push(...(o.waitingFor ?? []).filter(isRule).map((r) => ({
+      label: 'Stopped by a rule', text: sentence(r), todo: 'Draft the invoice here, or change the rule under Settings, Invoicing, Rules.',
+    })));
+  }
+  if (o.invoiceStatus === 'void') {
+    found.push({ label: 'Invoice void', text: 'The invoice for this job is void.', todo: 'Make a new invoice, or close the job.' });
+  }
+  found.push(...(o.invoiceProblems ?? []).map((p) => draftFix(p, acct)));
+  return found;
+}
+
+// The short words for a job's problems: the first label, and "+N" for more.
+export function problemSummary(found) {
+  const labels = [...new Set(found.map((f) => f.label))];
+  if (!labels.length) return '';
+  return labels.length > 1 ? `${labels[0]} +${labels.length - 1}` : labels[0];
+}
+
+// Does a job match the search text? Case, client, practitioner or invoice
+// number; the case is not shown on the board, but a person can find it.
+export function matches(job, q) {
+  if (!q) return true;
+  const needle = q.toLowerCase();
+  return [job.caseRef, job.sourceJobRef, job.clientName, job.workClientName, job.practitioner, job.obligation?.invoiceNumber]
+    .some((value) => value && String(value).toLowerCase().includes(needle));
+}