@arcforgelabs/flow 2026.10.41 → 2026.10.43

package/server/ui/custom-fields.js

@@ -14,6 +14,7 @@
 // passes in app.js's shared pieces as `ui`.
 
 import { orderStatuses, statusRank } from '/assets/ui/job-board.js';
+import { sidecar } from '/assets/ui/sidecar.js';
 
 const DOCS = 'https://github.com/arcforgelabs/flow/blob/main/docs/CUSTOM_FIELDS.md';
 const TYPE_LABELS = {
@@ -96,7 +97,7 @@ export async function renderCustomFields(main, ui) {
   const disabled = !['owner', 'admin'].includes(me?.person.role);
   const host = h('div', { class: 'fx-card fx-cfm__card' }, h('div', { class: 'fx-skeleton' }));
   const addButton = h('button', { class: 'fx-btn fx-btn--primary fx-btn--sm', type: 'button', disabled }, 'Create custom field');
-  main.append(pageHeader('Custom fields', { subtitle: 'Fields for your jobs. They stay in Flow and never change Seazona or Xero.' }), host);
+  main.append(pageHeader('Custom fields', { help: { href: DOCS, label: 'How custom fields work' } }), host);
 
   let data = null;
   const groupColor = (type) => data?.groupColors?.[type] ?? 'gray';
@@ -157,17 +158,19 @@ export async function renderCustomFields(main, ui) {
   // the manager. Edit on a row (or Create) opens it; another row's Edit
   // switches it at once, so a person moves between fields quickly. The
   // table stays usable behind it. Save closes it; so do Cancel, × and Esc.
-  const side = h('aside', { class: 'fx-cfs', 'aria-label': 'Custom field', hidden: true });
-  let sideFor = null;
-  function closeSide() {
-    side.hidden = true;
-    side.replaceChildren();
-    sideFor = null;
-    table.querySelector('.fx-cfm__row[data-open]')?.removeAttribute('data-open');
-  }
-  document.addEventListener('keydown', (event) => {
-    if (event.key === 'Escape' && side.isConnected && !side.hidden && !document.querySelector('dialog[open], .fx-pop:popover-open')) closeSide();
+  // The shared sidecar (sidecar.js), over the table.
+  const panel = sidecar(h, {
+    label: 'Custom field', overlay: true, escape: true,
+    onChange: (tab) => {
+      if (tab !== null) return;
+      sideFor = null;
+      table.querySelector('.fx-cfm__row[data-open]')?.removeAttribute('data-open');
+    },
   });
+  const side = panel.element;
+  side.classList.add('fx-cfs');
+  let sideFor = null;
+  const closeSide = () => panel.close();
 
   // Open the sidecar for a field (null: a new one; `draft` fills it after a
   // failed save). A work system's field opens read only.
@@ -188,7 +191,7 @@ export async function renderCustomFields(main, ui) {
     // lies over the label, so the label shows and the browser's list opens.
     const typeText = h('span', {}, TYPE_LABELS[type.value]);
     const headType = field ? typeLabel() : h('label', { class: 'fx-cfs__typepick' }, lucide(h, TYPE_ICONS[type.value]), typeText, lucide(h, 'chevron-down'), type);
-    const close = h('button', { class: 'fx-cfs__close', type: 'button', 'aria-label': 'Close', onclick: closeSide }, lucide(h, 'x'));
+    const close = panel.closeButton();
 
     const name = h('input', { class: 'fx-cfs__name', required: true, maxlength: '60', value: draft?.name ?? '', 'aria-label': 'Custom field name', placeholder: 'For example Priority', readonly: readOnly });
     name.addEventListener('input', changed);
@@ -245,10 +248,9 @@ export async function renderCustomFields(main, ui) {
       await load();
     });
     fit();
-    side.replaceChildren(form);
+    panel.show(form);
     // Below the toolbar, so search and Create stay in reach.
     side.style.top = `${toolbar.offsetHeight}px`;
-    side.hidden = false;
     table.querySelector('.fx-cfm__row[data-open]')?.removeAttribute('data-open');
     if (field) table.querySelector(`.fx-cfm__row[data-id="${CSS.escape(field.id)}"]`)?.setAttribute('data-open', 'true');
     (readOnly ? close : name).focus({ preventScroll: true });
@@ -493,8 +495,7 @@ export async function renderCustomFields(main, ui) {
     }
     table.replaceChildren(...parts);
     // The count is what the table shows, the work systems' fields too.
-    foot.replaceChildren(h('span', {}, `${count} ${count === 1 ? 'custom field' : 'custom fields'}`),
-      h('a', { href: DOCS, target: '_blank', rel: 'noopener' }, 'How custom fields work'));
+    foot.replaceChildren(h('span', {}, `${count} ${count === 1 ? 'custom field' : 'custom fields'}`));
   }
   const foot = h('div', { class: 'fx-cfm__foot' });
   host.append(foot);

package/server/ui/flow.css

@@ -170,15 +170,30 @@ body:is([data-state="off"], [data-state="error"], [data-state="no-access"]) .fx-
 .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; }
 
-/* Page header: title and one line, then the actions, primary last. */
-.fx-ph { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
-.fx-ph__text { display: grid; gap: 6px; max-width: 64ch; }
+/* Page header: the title only (no line under it), then the actions,
+   primary last. One height on every page, with or without a button. */
+.fx-ph { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 36px; }
+.fx-ph__text { display: flex; align-items: center; gap: 10px; min-width: 0; }
 .fx-title {
   color: var(--t-strong);
-  font: var(--t-display-weight) 28px/1.15 var(--t-display); letter-spacing: -0.015em;
+  font: var(--t-display-weight) 24px/1.15 var(--t-display); letter-spacing: -0.015em;
 }
+.fx-ph__count { color: var(--t-dim); font-size: 14px; font-variant-numeric: tabular-nums; }
+/* A record's facts beside its title (Reconcile: client · date · total). */
 .fx-ph__sub { color: var(--t-dim); }
-.fx-ph__actions { display: flex; gap: 8px; }
+/* A docs link as a "?" icon beside a title (helpLink in app.js). */
+.fx-help { display: inline-flex; vertical-align: middle; margin-left: 2px; padding: 4px; border-radius: var(--t-radius); color: var(--t-dim); }
+.fx-help:hover, .fx-help:focus-visible { background: var(--fx-hover); color: var(--t-strong); }
+.fx-help .fx-lucide { width: 16px; height: 16px; }
+.fx-ph__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+
+/* The tip an icon-only control shows on hover and keyboard focus (tip.js). */
+.fx-tip {
+  position: fixed; top: 0; left: 0; z-index: 1000; max-width: 260px; padding: 4px 8px;
+  border: 1px solid var(--fx-line); border-radius: var(--t-radius); background: var(--t-paper); color: var(--t-strong);
+  font: 500 12px/1.3 var(--t-body); pointer-events: none; white-space: nowrap;
+  box-shadow: var(--t-shadow), 0 4px 12px rgba(0, 0, 0, .12);
+}
 
 /* ── Notices, pills, tags, toasts ──────────────────────────────────────── */
 .fx-notice {
@@ -287,10 +302,12 @@ a.fx-link:hover, a.fx-link:focus-visible { border-color: var(--t-strong); }
 .fx-chip { border: 1px solid var(--fx-line); border-radius: 999px; background: var(--t-paper); color: var(--t-text); }
 .fx-int-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
 .fx-int-bar .fx-search { margin: 0; }
+.fx-int-bar .fx-row { flex: 1 1 auto; flex-wrap: nowrap; justify-content: flex-end; min-width: 0; }
+.fx-int-bar .fx-row .fx-search { flex: 0 1 320px; width: auto; min-width: 0; }
+.fx-int-bar .fx-row .fx-select { flex: none; }
 .fx-int-sections { display: grid; gap: 32px; }
 .fx-int-section-list { display: grid; gap: 16px; }
 .fx-int-heading { color: var(--t-strong); font: 600 19px/1.3 var(--t-body); }
-.fx-int-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
 .fx-int-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
 .fx-int-card {
   display: grid; grid-template-rows: auto 1fr auto; gap: 14px; padding: 18px;
@@ -298,6 +315,7 @@ a.fx-link:hover, a.fx-link:focus-visible { border-color: var(--t-strong); }
   color: var(--t-text); text-decoration: none;
   transition: transform 140ms var(--fx-ease), box-shadow 140ms var(--fx-ease), border-color 140ms var(--fx-ease);
 }
+.fx-int-card--bare { grid-template-rows: auto auto; }
 .fx-int-card:hover, .fx-int-card:focus-visible { transform: translateY(-2px); border-color: var(--t-brd-hi, var(--t-control)); box-shadow: 0 8px 24px rgba(0, 0, 0, .1); }
 .fx-int-card__head { display: flex; align-items: center; gap: 12px; }
 .fx-int-card__head h3 { flex: 1; color: var(--t-strong); font: 650 16px/1.25 var(--t-body); }
@@ -312,6 +330,7 @@ a.fx-link:hover, a.fx-link:focus-visible { border-color: var(--t-strong); }
   display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 10px;
   background: #fff; box-shadow: inset 0 0 0 1px var(--fx-line);
 }
+.fx-logo--icon { background: var(--t-accent-bg); color: var(--t-accent); box-shadow: none; }
 .fx-logo img { width: 28px; height: 28px; object-fit: contain; }
 .fx-logo--lg { width: 52px; height: 52px; }
 .fx-logo--lg img { width: 34px; height: 34px; }
@@ -473,7 +492,8 @@ a.fx-strong:hover { text-decoration: underline; }
 }
 
 /* ── Jobs board ─────────────────────────────────────────────────────────── */
-.fx-main--wide { max-width: none; }
+/* Every page shares .fx-main's width; only the board's lanes use the whole window. */
+.fx-main--board { max-width: none; }
 .fx-main > * { min-width: 0; }
 .fx-toolbar--plain { border-bottom: 0; align-items: center; }
 .fx-toolbar--plain .fx-search { margin-bottom: 0; }
@@ -674,7 +694,14 @@ th:hover .fx-th-sort, .fx-th-sort:focus-visible, .fx-th-sort--on { opacity: 1; }
    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__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
+/* No sidecar: the main area takes the room. Review is wider for its table. */
+.fx-task__grid:has(> .fx-sidecar[hidden]) { grid-template-columns: minmax(0, 1fr); }
+.fx-task__grid:has(> .fx-sidecar [data-tab="review"][aria-selected="true"]) { grid-template-columns: minmax(0, 1fr) 400px; }
+.fx-task__side { background: var(--t-s1); }
+.fx-task__tools { display: flex; align-items: center; gap: 4px; }
+.fx-task__tools .fx-lucide { width: 16px; height: 16px; }
+.fx-task__tools [aria-pressed="true"] { background: var(--fx-hover); color: var(--t-strong); }
 .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; }
@@ -689,9 +716,14 @@ th:hover .fx-th-sort, .fx-th-sort:focus-visible, .fx-th-sort--on { opacity: 1; }
 .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, .fx-task__lines 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 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 9px 14px; border-top: 1px solid var(--fx-line-soft); color: var(--t-strong); font-size: 13.5px; }
+.fx-task__fixrow > strong { font-weight: 600; }
+.fx-task__fixrow > span { flex: 1 1 160px; color: var(--t-text); }
+.fx-task__linkbtn { all: unset; cursor: pointer; color: var(--t-accent); border-bottom: 1px solid color-mix(in srgb, var(--t-accent) 40%, transparent); }
+.fx-task__linkbtn:hover { border-bottom-color: currentColor; }
+.fx-task__linkbtn:focus-visible { box-shadow: var(--fx-focus); }
 .fx-task__fixrow:first-of-type { border-top: 0; }
 .fx-task__choose { scroll-margin-top: 16px; margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--t-warn-brd, var(--t-warn)); border-radius: var(--t-radius); background: var(--t-warn-bg); color: var(--t-strong); font-size: 13.5px; }
 .fx-task__choose > svg { flex: none; width: 20px; height: 20px; color: var(--t-warn); }
@@ -758,8 +790,9 @@ th:hover .fx-th-sort, .fx-th-sort:focus-visible, .fx-th-sort--on { opacity: 1; }
 .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 { min-width: 0; }
+/* Review in the sidecar: the change banner, without its own box. */
+.fx-task__review .fx-change { margin: 0; padding: 0; border: 0; background: none; }
 .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); }
@@ -771,7 +804,8 @@ th:hover .fx-th-sort, .fx-th-sort:focus-visible, .fx-th-sort--on { opacity: 1; }
   .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; }
+  .fx-task__grid:has(> .fx-sidecar [data-tab="review"][aria-selected="true"]) { grid-template-columns: minmax(0, 1fr); }
+  .fx-task__side { border-top: 1px solid var(--fx-line); border-left: 0; }
 }
 
 /* ── Dialog ─────────────────────────────────────────────────────────────── */
@@ -898,8 +932,13 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
 }
 .fx-swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--t-paper), 0 0 0 4px var(--t-text); }
-.fx-swatch--default { overflow: hidden; background: var(--t-paper); }
-.fx-swatch--default span { display: block; width: 100%; height: 100%; }
+/* The default accent: a pill that says Default, before the colours. */
+.fx-swatch--default {
+  display: inline-flex; align-items: center; gap: 6px; width: auto; padding: 0 10px 0 4px; border-radius: 999px;
+  background: var(--t-paper); color: var(--t-text); font: 600 12.5px/1 var(--t-body); box-shadow: inset 0 0 0 1px var(--t-control);
+}
+.fx-swatch--default[aria-checked="true"] { box-shadow: inset 0 0 0 1px var(--t-control), 0 0 0 2px var(--t-paper), 0 0 0 4px var(--t-text); }
+.fx-swatch__dot { flex: none; width: 22px; height: 22px; border-radius: 50%; }
 .fx-swatch-custom { display: inline-flex; align-items: center; gap: 8px; color: var(--t-dim); font-size: 13px; font-weight: 600; }
 .fx-swatch-custom input { width: 34px; height: 30px; padding: 0; border: 1px solid var(--t-control); border-radius: var(--t-radius); background: var(--t-paper); cursor: pointer; }
 
@@ -946,7 +985,7 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 /* ── Phones ─────────────────────────────────────────────────────────────── */
 @media (max-width: 640px) {
   .fx-main { padding-top: 20px; }
-  .fx-title { font-size: 24px; }
+  .fx-title { font-size: 22px; }
   .fx-table thead { display: none; }
   .fx-table, .fx-table tbody, .fx-table tr, .fx-table td { display: block; width: 100%; }
   .fx-table tr { padding: 12px 14px; border-bottom: 1px solid var(--fx-line-soft); }
@@ -955,7 +994,6 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
   .fx-table tbody tr:hover td { background: none; }
   .fx-table__actions { text-align: left; }
   .fx-table__actions .fx-row--end { justify-content: flex-start; }
-  .fx-ph__actions, .fx-ph__actions .fx-btn { width: 100%; }
   /* People: the name with its actions (⋯, Approve) on one line, then the
      role select full width, then the status pill when there is one. */
   .fx-people tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 10px; }
@@ -1118,10 +1156,22 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
    in from the right of the manager and leaves the table usable. */
 .fx-cfm__card { position: relative; }
 .fx-cfm__card:has(> .fx-cfs:not([hidden])) { min-height: min(640px, 100vh); }
-.fx-cfs { position: absolute; inset: 0 0 0 auto; z-index: 5; display: flex; width: min(420px, 100%); border-left: 1px solid var(--fx-line); background: var(--t-paper); color: var(--t-text); box-shadow: -16px 0 40px rgba(0, 0, 0, .22); animation: fx-cfs-in .18s var(--fx-ease); }
-.fx-cfs[hidden] { display: none; }
-@keyframes fx-cfs-in { from { transform: translateX(24px); opacity: 0; } }
-@media (prefers-reduced-motion: reduce) { .fx-cfs { animation: none; } }
+/* The shared sidecar (sidecar.js): a right column, or over the page with
+   --over. Tabs are an icon and one word; × closes it. */
+.fx-sidecar { display: flex; flex-direction: column; min-width: 0; border-left: 1px solid var(--fx-line); background: var(--t-paper); color: var(--t-text); }
+.fx-sidecar[hidden] { display: none; }
+.fx-sidecar--over { position: absolute; inset: 0 0 0 auto; z-index: 5; width: min(420px, 100%); box-shadow: -16px 0 40px rgba(0, 0, 0, .22); animation: fx-sidecar-in .18s var(--fx-ease); }
+@keyframes fx-sidecar-in { from { transform: translateX(24px); opacity: 0; } }
+@media (prefers-reduced-motion: reduce) { .fx-sidecar--over { animation: none; } }
+.fx-sidecar__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 0 12px 0 8px; border-bottom: 1px solid var(--fx-line-soft); }
+.fx-sidecar__tabs { display: flex; gap: 2px; min-width: 0; }
+.fx-sidecar__tab { all: unset; cursor: pointer; position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border-radius: var(--t-radius); color: var(--t-dim); font-size: 13px; font-weight: 500; }
+.fx-sidecar__tab .fx-lucide { width: 15px; height: 15px; }
+.fx-sidecar__tab:hover { background: var(--fx-hover); color: var(--t-strong); }
+.fx-sidecar__tab[aria-selected="true"] { background: var(--fx-hover); color: var(--t-strong); }
+.fx-sidecar__tab:focus-visible { box-shadow: var(--fx-focus); }
+.fx-sidecar__mark { width: 6px; height: 6px; border-radius: 50%; background: var(--t-warn); }
+.fx-sidecar__body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; }
 .fx-cfs__form { position: sticky; top: 0; display: flex; flex-direction: column; width: 100%; height: min(100%, 100vh); max-height: 100vh; min-height: 0; }
 .fx-cfs__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--fx-line-soft); }
 .fx-cfs__typename, .fx-cfs__typepick { display: inline-flex; align-items: center; gap: 8px; color: var(--t-text); font-weight: 500; font-size: 14px; }
@@ -1129,9 +1179,9 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-cfs__typepick:hover, .fx-cfs__typepick:focus-within { background: var(--fx-hover); }
 .fx-cfs__typepick .fx-lucide { width: 15px; height: 15px; }
 .fx-cfs__type { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
-.fx-cfs__close, .fx-cfs__delete, .fx-cfs__tool { all: unset; cursor: pointer; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; color: var(--t-dim); }
-.fx-cfs__close:hover, .fx-cfs__tool:hover:not(:disabled) { background: var(--fx-hover); color: var(--t-strong); }
-.fx-cfs__close:focus-visible, .fx-cfs__delete:focus-visible, .fx-cfs__tool:focus-visible { box-shadow: var(--fx-focus); }
+.fx-sidecar__close, .fx-cfs__delete, .fx-cfs__tool { all: unset; cursor: pointer; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; color: var(--t-dim); }
+.fx-sidecar__close:hover, .fx-cfs__tool:hover:not(:disabled) { background: var(--fx-hover); color: var(--t-strong); }
+.fx-sidecar__close:focus-visible, .fx-cfs__delete:focus-visible, .fx-cfs__tool:focus-visible { box-shadow: var(--fx-focus); }
 .fx-cfs__body { flex: 1; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 0; }
 .fx-cfs__section { display: grid; gap: 8px; padding: 14px 16px 4px; }
 .fx-cfs__section:last-child { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--fx-line-soft); }
@@ -1250,13 +1300,7 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-pager__step:hover:not(:disabled) { background: var(--fx-hover); border-color: var(--fx-line); }
 .fx-pager__step:disabled { opacity: 0.35; cursor: default; }
 
-/* New invoice from a job: a quiet strip above the form, and a searchable
-   list of jobs with no invoice. */
-.fx-fromjob {
-  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
-  padding: 12px 16px; border: 1px dashed var(--fx-line); border-radius: var(--t-radius);
-}
-.fx-fromjob__text { display: grid; gap: 2px; font-size: 14px; }
+/* New invoice from a job: a searchable list of jobs with no invoice. */
 .fx-dialog:has(.fx-pick__body) { width: min(620px, calc(100vw - 32px)); }
 .fx-pick__body { display: grid; gap: 12px; }
 .fx-pick { display: grid; max-height: min(420px, 55vh); overflow-y: auto; border: 1px solid var(--fx-line); border-radius: var(--t-radius); }
@@ -1300,12 +1344,6 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-bulk__act[data-tone="danger"] { color: var(--t-danger); }
 .fx-bulk__act[data-tone="danger"]:hover { background: var(--t-danger-bg); }
 .fx-bulk__sep { flex: none; width: 1px; height: 18px; margin: 0 4px; background: var(--fx-line); }
-/* An icon-only action says its name on hover, in a tip above it. */
-.fx-bulk [data-tip]:hover::after, .fx-bulk [data-tip]:focus-visible::after {
-  content: attr(data-tip); position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
-  padding: 4px 8px; border: 1px solid var(--fx-line); border-radius: var(--t-radius); background: var(--t-paper); color: var(--t-strong);
-  font: 500 12px/1.2 var(--t-body); pointer-events: none; box-shadow: var(--t-shadow), 0 4px 12px rgba(0, 0, 0, .12);
-}
 /* More: a compact list, one row per action, like a dropdown. */
 .fx-pop.fx-bulk__more { width: 248px; min-width: 0; padding: 4px; }
 .fx-bulk__search { width: 100%; height: 30px; margin-bottom: 2px; padding: 4px 8px; font-size: 13px; }
@@ -1370,6 +1408,8 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 
 /* A list's own search (view-bar.js findBox): an icon that opens into a box. */
 .fx-find { display: inline-flex; align-items: center; }
+/* On a tab bar the icon sits level with the tab names, not on the line. */
+.fx-toolbar > .fx-find { align-self: center; }
 .fx-find__button { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; }
 .fx-find__button .fx-lucide { width: 15px; height: 15px; }
 .fx-find__input { display: none; width: min(240px, 60vw); height: 32px; padding: 0 10px; }

package/server/ui/invoice-notes.js

@@ -18,9 +18,11 @@ export function sendModeNote(to, sendMode, what = 'each invoice') {
   return text.join(' ');
 }
 
-// The line under a draft's title, one fact per sentence.
-export function draftNote(to, invoice, ready) {
-  if (!to) return ready ? 'It has no problem. Approve gives it a number.' : 'Fix the problem, then approve it.';
-  if (!ready) return `Fix the problem, then send it to ${to}.`;
-  return sendModeNote(to, invoice?.sendMode, 'this invoice');
+// A warning above a draft, only when its Send cannot work: the accounting
+// system is off or takes no invoices. Otherwise nothing: the problems show
+// on their own, and the Send dialog says what Send does.
+export function draftNote(to, invoice) {
+  const sendMode = invoice?.sendMode;
+  if (!to || !sendMode || (sendMode.connected && sendMode.writesAllowed)) return null;
+  return sendModeNote(to, sendMode);
 }

package/server/ui/invoice-rules.js

@@ -11,9 +11,13 @@ const DOCS = 'https://github.com/arcforgelabs/flow/blob/main/docs/INVOICE_RULES.
 const TEST_LABELS = {
   more_than: 'is more than', at_most: 'is at most', is: 'is', is_not: 'is not', is_one_of: 'is one of',
   is_empty: 'is empty', is_not_empty: 'is not empty', has: 'has', has_not: 'does not have',
+  is_not_one_of: 'is not one of', contains: 'contains', does_not_contain: 'does not contain',
+  starts_with: 'starts with', does_not_start_with: 'does not start with', has_number: 'has a number', one_word: 'is one word',
 };
-const ACTION_LABELS = { wait: 'Wait for a person', skip: 'Never draft' };
-const NO_VALUE = ['is_empty', 'is_not_empty'];
+const ACTION_LABELS = { wait: 'Wait for a person', skip: 'Never draft', pending: 'Pending, with a note' };
+const NO_VALUE = ['is_empty', 'is_not_empty', 'has_number', 'one_word'];
+const MANY = ['is_one_of', 'is_not_one_of'];
+const TYPED = ['contains', 'does_not_contain', 'starts_with', 'does_not_start_with'];
 
 // A rule as one short line: "Job age (days) is more than 90 · Wait for a person".
 export function ruleSummary(rule, meta) {
@@ -33,7 +37,8 @@ export function ruleSummary(rule, meta) {
     const value = Array.isArray(c.value) ? c.value.map((v) => labelOf(field, v)).join(', ') : labelOf(field, c.value);
     return `${field.label} ${test} ${value}`;
   };
-  return `${rule.conditions.map(part).join(' and ')} · ${ACTION_LABELS[rule.action.kind] ?? rule.action.kind}`;
+  const then = rule.action.kind === 'pending' ? `Pending: ${rule.action.note}` : ACTION_LABELS[rule.action.kind] ?? rule.action.kind;
+  return `${rule.conditions.map(part).join(' and ')} · ${then}`;
 }
 
 export function rulesSection(ui, title = 'Rules') {
@@ -100,9 +105,19 @@ export function rulesSection(ui, title = 'Rules') {
         const box = numberBox(value, 'Value');
         valueHost.append(box);
         readValue = () => ({ value: Number(box.value) });
-      } else if (test === 'is_one_of') {
-        const chosen = new Set((Array.isArray(value) ? value : []).map((v) => String(v).toLowerCase()));
-        const boxes = options(field).map((o) => {
+      } else if (TYPED.includes(test) || (field.kind === 'text' && !MANY.includes(test) && !options(field).length)) {
+        const box = h('input', { class: 'fx-input', type: 'text', maxlength: '200', value: Array.isArray(value) ? value[0] ?? '' : value ?? '', 'aria-label': 'Value' });
+        valueHost.append(box);
+        readValue = () => ({ value: box.value });
+      } else if (MANY.includes(test)) {
+        const picked = Array.isArray(value) ? value : [];
+        const chosen = new Set(picked.map((v) => String(v).toLowerCase()));
+        // A value saved earlier that is no longer on the menu stays ticked.
+        const known = new Set(options(field).map((o) => String(o.value).toLowerCase()));
+        // Ticked values come first, so a long menu shows what the rule holds.
+        const list = [...picked.filter((v) => !known.has(String(v).toLowerCase())).map((v) => ({ value: v, label: v })), ...options(field)]
+          .sort((x, y) => Number(chosen.has(String(y.value).toLowerCase())) - Number(chosen.has(String(x.value).toLowerCase())));
+        const boxes = list.map((o) => {
           const box = h('input', { type: 'checkbox', value: o.value, checked: chosen.has(String(o.value).toLowerCase()) });
           return h('label', { class: 'fx-multi__option' }, box, h('span', {}, o.label));
         });
@@ -112,10 +127,6 @@ export function rulesSection(ui, title = 'Rules') {
         const select = choiceSelect(field, Array.isArray(value) ? value[0] : value, 'Value');
         valueHost.append(select);
         readValue = () => ({ value: select.value });
-      } else {
-        const box = h('input', { class: 'fx-input', type: 'text', value: value ?? '', 'aria-label': 'Value' });
-        valueHost.append(box);
-        readValue = () => ({ value: box.value });
       }
     }
 
@@ -144,6 +155,15 @@ export function rulesSection(ui, title = 'Rules') {
     const action = h('select', { class: 'fx-select', 'aria-label': 'Then' },
       Object.entries(ACTION_LABELS).map(([value, label]) => h('option', { value }, label)));
     action.value = draft?.action.kind ?? 'wait';
+    // A pending rule's note: what a person must fix. It shows on the draft.
+    const note = h('input', {
+      class: 'fx-input', maxlength: '200', value: draft?.action.note ?? '', 'aria-label': 'Note',
+      placeholder: 'For example: Put the practitioner in the job, then check the Reference.',
+    });
+    const noteField = h('div', { class: 'fx-field' }, h('span', { class: 'fx-label' }, 'Note on the draft'), note);
+    const showNote = () => { noteField.hidden = action.value !== 'pending'; };
+    action.addEventListener('change', showNote);
+    showNote();
     let editors = [];
     const list = h('div', { class: 'fx-rule__conditions' });
     const addCondition = (start) => {
@@ -174,9 +194,10 @@ export function rulesSection(ui, title = 'Rules') {
       title: rule ? 'Edit rule' : 'New rule',
       body: h('div', { class: 'fx-fields fx-rule__dialog' },
         label('Name', name),
-        label('When', h('span', { class: 'fx-dim' }, 'A job is ready to invoice and has no invoice.')),
+        label('When', h('span', { class: 'fx-dim' }, 'A job is ready to invoice. A pending rule also checks its draft and the Reference.')),
         label('If all of these match', list, more),
         label('Then', action),
+        noteField,
         remove),
       confirm: rule ? 'Save' : 'Add rule',
     });
@@ -186,7 +207,11 @@ export function rulesSection(ui, title = 'Rules') {
       return draw();
     }
     if (!data) return null;
-    const payload = { name: name.value, conditions: editors.map((e) => e.read()), action: { kind: action.value } };
+    const payload = {
+      name: name.value,
+      conditions: editors.map((e) => e.read()),
+      action: action.value === 'pending' ? { kind: 'pending', note: note.value } : { kind: action.value },
+    };
     const body = rule
       ? await send(`/api/invoicing/rules/${rule.id}`, 'PUT', payload)
       : await send('/api/invoicing/rules', 'POST', payload);
@@ -219,7 +244,7 @@ export function rulesSection(ui, title = 'Rules') {
     add?.addEventListener('click', () => edit(null));
     section.replaceChildren(
       h('h2', { class: 'fx-set__title' }, title),
-      h('p', { class: 'fx-set__hint', style: { margin: '0 0 4px' } }, 'A ready job waits, or is never drafted, when a rule matches.'),
+      h('p', { class: 'fx-set__hint', style: { margin: '0 0 4px' } }, 'When a rule matches, a ready job waits, is never drafted, or its draft is Pending with the rule\'s note.'),
       ...(rules.length ? rules.map(rowOf) : [h('p', { class: 'fx-dim' }, 'No rules. Every ready job is drafted.')]),
       h('div', { class: 'fx-rule__footer' }, add,
         h('a', { class: 'fx-dim', href: DOCS, target: '_blank', rel: 'noopener' }, 'How rules work')));

package/server/ui/invoicing-settings.js

@@ -1,15 +1,14 @@
-// Settings, Invoicing (/invoicing-settings): payment terms, the draft
-// automation, and the lab's own rules a ready job passes before Flow drafts
-// its invoice (invoice-rules.js, docs/INVOICE_RULES.md). Invoicing needs no integration: how an invoice
-// goes to Xero is on the Xero integration page (sendModeSection).
-// Draft when ready is an automation (server/core/automations.js); the
-// Seazona integration page holds the rule that marks a job ready.
-// One row for each setting: its name, one short line, and its control. A
-// change saves at once. Everyone can read them; an owner or admin changes
-// them. The full rules are in docs/INVOICING_RULES.md. app.js passes in its
-// shared pieces as `ui`.
+// Settings, Rules (/invoicing-settings): a card for each part, like the
+// Integrations page, and one page for each (/invoicing-settings/<key>).
+// Drafts holds payment terms and the Reference; Price codes the lines with no
+// price item (line-mappings.js); Invoices the checks a ready job passes
+// before Flow drafts its invoice (invoice-rules.js, docs/INVOICE_RULES.md).
+// Automations have their own page (automations.js).
+// How an invoice goes to Xero is on the Xero integration page
+// (sendModeSection). A change saves at once. Everyone can read them; an owner
+// or admin changes them. The full rules are in docs/INVOICING_RULES.md.
+// app.js passes in its shared pieces as `ui`.
 
-import { automationSection } from '/assets/ui/automations.js';
 import { rulesSection } from '/assets/ui/invoice-rules.js';
 import { lineMappingSection } from '/assets/ui/line-mappings.js';
 
@@ -20,19 +19,51 @@ const SEND_MODES = [
   { value: 'approve_and_email', label: 'Approved and emailed' },
 ];
 
-export async function renderInvoicingSettings(main, ui) {
-  const { h, flow, toast, notice, pageHeader, me } = ui;
-  const host = h('div', { class: 'fx-card', style: { padding: '8px 20px 16px' } }, h('div', { class: 'fx-skeleton' }));
-  main.append(pageHeader('Invoice rules', { subtitle: 'The rules Flow uses to draft each invoice.' }), host);
-  let body;
-  try {
-    body = await flow('/api/invoicing/settings');
-  } catch (error) {
-    host.replaceChildren(notice(error.message, 'danger'));
+const onCount = (list) => ({ label: `${list.filter((x) => x.enabled).length} on`, tone: list.some((x) => x.enabled) ? 'success' : 'mute' });
+
+// Each card: its page, its mark, and its state once the data is in. No
+// blurb: the name and the state say enough.
+const PARTS = [
+  { key: 'drafts', title: 'Drafts', mark: 'draft', mount: (ui) => draftsSection(ui) },
+  { key: 'price-codes', title: 'Price codes', mark: 'tag', mount: (ui) => lineMappingSection(ui),
+    summary: async (flow) => {
+      const { labels } = await flow('/api/invoicing/line-labels');
+      const waiting = labels.filter((l) => l.unmapped > 0).length;
+      return waiting ? { status: { label: `${waiting} wait`, tone: 'warn' }, action: 'Fix' } : { status: { label: 'All mapped', tone: 'success' } };
+    } },
+  { key: 'invoices', title: 'Invoices', mark: 'rules', mount: (ui) => rulesSection(ui, 'Invoices'),
+    summary: async (flow) => ({ status: onCount((await flow('/api/invoicing/rules')).rules) }) },
+];
+
+export function renderInvoicingSettings(main, ui, id) {
+  const { h, flow, notice, pageHeader, tileCard, crumbs } = ui;
+  if (id) {
+    const part = PARTS.find((p) => p.key === id);
+    main.append(crumbs(['/invoicing-settings', 'Rules'], part?.title ?? 'Not found'),
+      part ? h('div', { class: 'fx-card', style: { padding: '8px 20px 16px' } }, part.mount(ui)) : notice('No such part of Rules.', 'danger'));
     return;
   }
+  const grid = h('div', { class: 'fx-int-grid' });
+  main.append(pageHeader('Rules'), grid);
+  // Each card shows at once and fills in its state when its data comes back.
+  for (const part of PARTS) {
+    const href = `/invoicing-settings/${part.key}`;
+    const slot = tileCard({ href, mark: part.mark, title: part.title });
+    grid.append(slot);
+    if (part.summary) {
+      part.summary(flow)
+        .then((more) => slot.replaceWith(tileCard({ href, mark: part.mark, title: part.title, ...more })))
+        .catch(() => {});
+    }
+  }
+}
+
+// Payment terms and the Reference template.
+function draftsSection(ui) {
+  const { h, flow, toast, notice, me } = ui;
   const disabled = !['owner', 'admin'].includes(me?.person.role);
-  let saved = body.settings;
+  const section = h('section', { class: 'fx-set' }, h('h2', { class: 'fx-set__title' }, 'Drafts'), h('div', { class: 'fx-skeleton' }));
+  let saved;
 
   async function save(changes, control) {
     control.disabled = true;
@@ -60,19 +91,23 @@ export async function renderInvoicingSettings(main, ui) {
     });
     return input;
   };
-  const days = (key, label) => box(key, label, { type: 'number', read: Number });
 
-  const section = (title, ...rows) => h('section', { class: 'fx-set' }, h('h2', { class: 'fx-set__title' }, title), ...rows);
-  host.replaceChildren(...[
-    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')),
+  (async () => {
+    try {
+      saved = (await flow('/api/invoicing/settings')).settings;
+    } catch (error) {
+      section.replaceChildren(h('h2', { class: 'fx-set__title' }, 'Drafts'), notice(error.message, 'danger'));
+      return;
+    }
+    section.replaceChildren(...[
+      h('h2', { class: 'fx-set__title' }, 'Drafts'),
+      disabled ? notice('Only an owner or admin can change these.', 'info') : null,
+      row('Payment terms', 'Days from invoice to due date.', box('paymentTermsDays', 'Payment terms in days', { type: 'number', read: Number })),
       row('Reference', 'The Reference on each invoice. Use {practitioner} and {patient}.',
-        box('referenceTemplate', 'Reference rule', { placeholder: '{practitioner} - {patient}' }))),
-    lineMappingSection(ui),
-    automationSection(ui, 'invoicing', 'Automations'),
-    rulesSection(ui),
-  ].filter(Boolean));
+        box('referenceTemplate', 'Reference rule', { placeholder: '{practitioner} - {patient}' })),
+    ].filter(Boolean));
+  })();
+  return section;
 }
 
 // The Xero integration page's "Sending" section: how a checked invoice goes to
@@ -82,11 +117,10 @@ export function sendModeSection(ui) {
   const disabled = !['owner', 'admin'].includes(me?.person.role);
   const select = h('select', { class: 'fx-select', 'aria-label': 'Send to Xero as', disabled },
     SEND_MODES.map((m) => h('option', { value: m.value }, m.label)));
-  const section = h('section', { class: 'fx-set' }, h('h2', { class: 'fx-set__title' }, 'Sending'),
+  const section = h('section', { class: 'fx-set' }, ui.sectionTitle('Sending', { href: DOCS, label: 'How sending works' }),
     h('div', { class: 'fx-set__row' },
       h('div', { class: 'fx-set__text' }, h('span', { class: 'fx-set__name' }, 'Send to Xero as'), h('span', { class: 'fx-set__hint' }, 'Draft: approve in Xero. Approved: Xero emails it.')),
-      h('div', { class: 'fx-set__control' }, select)),
-    h('p', { class: 'fx-dim', style: { margin: '8px 0 0' } }, h('a', { href: DOCS, target: '_blank', rel: 'noopener' }, 'How sending works')));
+      h('div', { class: 'fx-set__control' }, select)));
   let saved = null;
   (async () => {
     try {