@arcforgelabs/flow 2026.10.40 → 2026.10.41

package/npm-shrinkwrap.json

@@ -1,12 +1,12 @@
 {
   "name": "@arcforgelabs/flow",
-  "version": "2026.10.40",
+  "version": "2026.10.41",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@arcforgelabs/flow",
-      "version": "2026.10.40",
+      "version": "2026.10.41",
       "license": "MIT",
       "dependencies": {
         "@clerk/backend": "3.25.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcforgelabs/flow",
-  "version": "2026.10.40",
+  "version": "2026.10.41",
   "description": "Invoicing, bill entry and a financial dashboard for labs, with Seazona and Xero integrations.",
   "license": "MIT",
   "repository": {

package/server/core/job-match.js

@@ -97,6 +97,8 @@ export async function listReconcile(db, organisationId) {
     practitioner: billingObligations.practitioner,
     jobDate: billingObligations.jobDate,
     totalCents: billingObligations.totalCents,
+    // An unclear accounting match: "Make invoice" settles it first.
+    unclear: sql`${billingObligations.accountingState} = 'ambiguous'`.mapWith(Boolean),
     possible: sql`(select count(*) from invoices i
       where i.organisation_id = ${billingObligations.organisationId} and i.contact_id = ${billingObligations.contactId}
         and i.status <> 'void' and i.total_cents = ${billingObligations.totalCents}

package/server/ui/flow.css

@@ -387,9 +387,6 @@ a.fx-strong:hover { text-decoration: underline; }
 .fx-tabs button[aria-selected="true"] { color: var(--t-strong); border-bottom-color: var(--t-brand); }
 .fx-tabs__count { padding: 0 7px; border-radius: 999px; background: var(--fx-hover); color: var(--t-dim); font-size: 12px; line-height: 20px; }
 .fx-tabs button[data-tone="danger"] .fx-tabs__count { background: var(--t-danger-bg); color: var(--t-danger); }
-/* Invoices: the Send all ready bar above the Ready list. */
-.fx-sendbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; padding: 12px 16px; border: 1px solid var(--fx-line); border-radius: 8px; background: var(--t-paper); margin-top: 12px; }
-.fx-sendbar[hidden] { display: none; }
 
 /* Quiet alerts (server/ui/alerts.js): one slim line under the page header,
    only while something on the page needs this person. */
@@ -409,9 +406,7 @@ a.fx-strong:hover { text-decoration: underline; }
   .fx-alerts__text { flex-basis: calc(100% - 52px); }
   .fx-alerts__action, .fx-alerts__more { order: 2; }
 }
-.fx-sendbar p { margin: 0; }
 .fx-problem { color: var(--t-danger); }
-.fx-sendbar__actions { display: flex; flex-wrap: wrap; gap: 8px; }
 .fx-tick-cell { width: 40px; }
 .fx-tick { width: 16px; height: 16px; accent-color: var(--t-brand); cursor: pointer; }
 .fx-search { width: min(320px, 100%); margin-bottom: 8px; }
@@ -705,26 +700,15 @@ th:hover .fx-th-sort, .fx-th-sort:focus-visible, .fx-th-sort--on { opacity: 1; }
 .fx-task__none { display: inline-flex; align-items: center; gap: 6px; color: var(--t-warn); }
 .fx-task__none svg { width: 16px; height: 16px; }
 
-/* Reconcile: the queue left, one job and its possible invoices right. */
-.fx-rec { display: grid; grid-template-columns: 280px minmax(0, 1fr); border: 1px solid var(--fx-line); border-radius: var(--t-radius-lg); background: var(--t-paper); min-height: 420px; }
-.fx-rec > .fx-empty, .fx-rec > .fx-dim { grid-column: 1 / -1; }
-.fx-rec__queue { display: flex; flex-direction: column; border-right: 1px solid var(--fx-line); max-height: 75vh; overflow-y: auto; }
-.fx-rec__tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--fx-line); }
-.fx-rec__tab { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border: 1px solid var(--fx-line); border-radius: 999px; color: var(--t-text); font-size: 12.5px; font-weight: 600; text-decoration: none; }
-.fx-rec__tab[aria-selected="true"] { border-color: var(--t-primary); background: var(--t-primary); color: var(--t-on-primary); }
-.fx-rec__search { width: 100%; min-width: 0; }
+/* Reconcile (reconcile.js): the list, as Jobs and Invoices; one gap, as an
+   invoice opened from Invoices (the pager on top). */
+.fx-rec { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
+.fx-rec .fx-lucide { width: 16px; height: 16px; }
+.fx-rec__gap { max-width: 1180px; }
+.fx-rec__gap .fx-toolbar .fx-rows__title { margin: 0; }
+.fx-rec__gap .fx-ph__actions .fx-btn, .fx-rec__acts .fx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
 .fx-rec__results { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
-.fx-rec__item { display: grid; gap: 3px; min-height: 44px; padding: 12px 16px; border-bottom: 1px solid var(--fx-line-soft); border-left: 3px solid transparent; color: var(--t-text); text-decoration: none; }
-.fx-rec__item:hover { background: var(--fx-hover); }
-.fx-rec__item[aria-current="true"] { border-left-color: var(--t-accent); background: var(--t-s1); }
-.fx-rec__item-top { display: flex; justify-content: space-between; gap: 8px; }
-.fx-rec__item .fx-num { font-family: var(--t-data); font-variant-numeric: tabular-nums; }
-.fx-rec__detail { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 20px 24px; }
-.fx-rec__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
-.fx-rec__head > div { display: grid; gap: 2px; }
-.fx-rec__back { display: none; color: var(--t-accent); text-decoration: none; font-size: 13px; }
-.fx-rec__title { margin: 0; font-family: var(--t-display); font-weight: var(--t-display-weight); color: var(--t-strong); font-size: 24px; }
-.fx-rec__table { display: grid; grid-template-columns: 110px minmax(150px, 1fr) repeat(var(--cols), minmax(170px, 1fr)); border: 1px solid var(--fx-line); border-radius: var(--t-radius); overflow-x: auto; }
+.fx-rec__table { display: grid; grid-template-columns: 110px minmax(150px, 1fr) repeat(var(--cols), minmax(170px, 1fr)); border: 1px solid var(--fx-line); border-radius: var(--t-radius); background: var(--t-paper); overflow-x: auto; }
 .fx-rec__row { display: contents; }
 .fx-rec__row > span { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-top: 1px solid var(--fx-line-soft); font-size: 13.5px; color: var(--t-strong); }
 .fx-rec__row:first-child > span { border-top: 0; background: var(--t-s1); }
@@ -738,8 +722,6 @@ th:hover .fx-th-sort, .fx-th-sort:focus-visible, .fx-th-sort--on { opacity: 1; }
 [data-mark="same"] > .fx-rec__mark { color: var(--t-success); }
 [data-mark="differs"], [data-mark="differs"] > .fx-rec__mark { color: var(--t-warn); }
 .fx-rec__best { color: var(--t-success); font-size: 12px; font-weight: 700; }
-.fx-rec__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
-.fx-rec__foot-acts { display: flex; gap: 10px; flex-wrap: wrap; }
 .fx-rec__cards { display: none; }
 .fx-rec__card { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--fx-line); border-radius: var(--t-radius); font-size: 13.5px; color: var(--t-strong); }
 .fx-rec__card.fx-rec__job { border-color: transparent; }
@@ -747,20 +729,17 @@ th:hover .fx-th-sort, .fx-th-sort:focus-visible, .fx-th-sort--on { opacity: 1; }
 .fx-rec__card-top { display: flex; justify-content: space-between; gap: 8px; }
 .fx-rec__label { color: var(--t-dim); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
 .fx-rec__checks { display: flex; flex-wrap: wrap; gap: 4px 12px; }
-@media (max-width: 1100px) {
-  .fx-rec { grid-template-columns: minmax(0, 1fr); min-height: 0; }
-  .fx-rec__queue { border-right: 0; max-height: none; }
-  .fx-rec--open .fx-rec__queue { display: none; }
-  .fx-rec:not(.fx-rec--open) .fx-rec__detail { display: none; }
-  .fx-rec__back { display: inline; }
-}
+.fx-rec-list tbody tr { cursor: pointer; }
+.fx-rec-list__kind { width: 36px; color: var(--t-dim); }
+.fx-rec-list__mid { width: 72px; text-align: center; white-space: nowrap; }
+.fx-rec__possible { display: inline-flex; align-items: center; gap: 4px; color: var(--t-dim); font-variant-numeric: tabular-nums; }
+.fx-rec__possible[data-state="some"] { color: var(--t-warn); }
 @media (max-width: 820px) {
-  .fx-rec__detail { padding: 16px; }
   .fx-rec__table { display: none; }
   .fx-rec__cards { display: flex; flex-direction: column; gap: 12px; }
-  .fx-rec__cards .fx-btn, .fx-rec__foot .fx-btn { min-height: 44px; }
-  .fx-rec__foot-acts { width: 100%; }
-  .fx-rec__foot-acts .fx-btn { flex: 1 1 auto; }
+  .fx-rec__cards .fx-btn, .fx-rec__gap .fx-ph__actions .fx-btn { min-height: 44px; }
+  .fx-rec__gap .fx-ph__actions { width: 100%; }
+  .fx-rec__gap .fx-ph__actions .fx-btn { flex: 1 1 auto; }
 }
 .fx-task__custom { margin-top: 24px; }
 .fx-task__custom h3 { margin: 0 0 4px; color: var(--t-dim); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
@@ -1293,7 +1272,6 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
    Narrow, the app bar (60px) sits above it. */
 .fx-listhead { position: sticky; top: 0; z-index: 5; margin: -12px calc(-1 * clamp(16px, 4vw, 48px)) 0; padding: 12px clamp(16px, 4vw, 48px) 0; background: var(--t-bg); transition: box-shadow .15s; }
 .fx-listhead[data-stuck] { box-shadow: 0 10px 12px -12px rgba(0, 0, 0, .45); }
-.fx-listhead .fx-sendbar { margin-bottom: 12px; }
 .fx-listhead__edge { height: 0; margin-bottom: -20px; }
 @media (max-width: 820px) { .fx-listhead { top: 60px; } }
 /* On a phone the head would hide too many rows: it scrolls away. */
@@ -1389,3 +1367,11 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 }
 .fx-xi-count { font-size: 18px; }
 .fx-xi-list td.fx-num:not(.fx-strong) { text-align: left; }
+
+/* A list's own search (view-bar.js findBox): an icon that opens into a box. */
+.fx-find { display: inline-flex; align-items: 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; }
+.fx-find--open .fx-find__input { display: block; }
+.fx-find--open .fx-find__button { display: none; }

package/server/ui/invoicing.js

@@ -10,6 +10,7 @@ import { bulkBar } from '/assets/ui/bulk-bar.js';
 import { draftNote, sendModeNote } from '/assets/ui/invoice-notes.js';
 import { caseNumber } from '/assets/ui/job-board.js';
 import { jobChangeBanner } from '/assets/ui/job-change.js';
+import { findBox } from '/assets/ui/view-bar.js';
 
 // The tabs, left to right (server/api/invoicing.js, TABS): Pending (a
 // person must look), Ready (checks pass), then the accounting system's
@@ -118,17 +119,24 @@ export async function renderInvoiceList(main, ui) {
   sessionStorage.removeItem(NAV_BACK);
   const state = { status: TABS.some(([id]) => id === saved) ? saved : 'ready', q: returning ? back?.q ?? '' : '', ticked: new Set() };
   const tabs = h('div', { class: 'fx-tabs', role: 'tablist' });
-  const search = h('input', { class: 'fx-input fx-search', type: 'search', placeholder: 'Find a number, client or reference', 'aria-label': 'Find an invoice', value: state.q });
-  const bar = h('div', { class: 'fx-sendbar', hidden: true });
+  let timer;
+  const find = findBox(h, {
+    label: 'Find a number, client or reference', value: state.q,
+    oninput: (words) => {
+      clearTimeout(timer);
+      timer = setTimeout(() => { state.q = words.trim(); load(); }, 200);
+    },
+  });
   const host = h('div', { class: 'fx-panel' }, h('div', { class: 'fx-skeleton' }));
   const bulk = bulkBar(ui);
   const context = await flow('/api/invoicing/context').catch(() => ({ canIssue: false }));
   let body = null;
   const openTab = (id) => { state.status = id; state.ticked.clear(); sessionStorage.setItem('flow_invoice_tab', id); load(); };
   const alerts = alertStrip(ui, 'invoices', { onTab: openTab });
-  // The tabs, search and send bar stay at the top while the rows scroll up
-  // under them; the bulk bar floats at the foot (ClickUp's layout).
-  const head = h('div', { class: 'fx-listhead' }, h('div', { class: 'fx-toolbar' }, tabs, search), bar);
+  // The tabs and search stay at the top while the rows scroll up under them;
+  // the bulk bar floats at the foot (ClickUp's layout). Sending is a bulk
+  // action: tick rows (the head tick takes every row shown), then Send.
+  const head = h('div', { class: 'fx-listhead' }, h('div', { class: 'fx-toolbar' }, tabs, find.element));
   const edge = h('div', { class: 'fx-listhead__edge', 'aria-hidden': 'true' });
   main.append(
     pageHeader('Invoices', {
@@ -144,56 +152,11 @@ export async function renderInvoiceList(main, ui) {
     new IntersectionObserver(([entry]) => head.toggleAttribute('data-stuck', !entry.isIntersecting), { rootMargin: `-${head.offsetTop > 0 && window.matchMedia?.('(max-width: 820px)').matches ? 61 : 1}px 0px 0px 0px` }).observe(edge);
   }
 
-  let timer;
-  search.addEventListener('input', () => {
-    clearTimeout(timer);
-    timer = setTimeout(() => { state.q = search.value.trim(); load(); }, 200);
-  });
 
   const plural = (n, one, many) => `${n} ${n === 1 ? one : many}`;
-  const action = (label, path, payload, done, tone = 'primary') => {
-    const el = h('button', {
-      class: `fx-btn fx-btn--${tone}`, type: 'button',
-      onclick: async () => {
-        el.disabled = true;
-        try {
-          const res = await flow(`/api/invoicing/invoices/${path}`, { method: 'POST', body: JSON.stringify(payload()) });
-          toast(...done(res));
-          state.ticked.clear();
-          seen.clear();
-          await load();
-          alerts.refresh();
-        } catch (error) {
-          toast(error.message, 'danger');
-          el.disabled = false;
-        }
-      },
-    }, label);
-    return el;
-  };
-
-  // The bar above the list: what a person can do with this view.
+  // The bulk bar for the ticked rows: what a person can do with this view.
   function drawBar() {
-    const to = body.sendsTo;
     const ticked = [...state.ticked];
-    const parts = [];
-    if (state.status === 'ready') {
-      parts.push(h('p', { class: 'fx-dim' }, sendModeNote(to, body.sendMode)));
-      const buttons = [];
-      if (context.canIssue && body.counts.ready > 0) {
-        buttons.push(action(to ? `Send all ${body.counts.ready} ready to ${to}` : `Approve all ${body.counts.ready} ready`, 'send-ready', () => ({ issueDate: localDate() }),
-          (res) => [`${to ? `${res.issued} on the way to ${to}.` : `${res.issued} approved.`}${res.remaining ? ` ${res.remaining} more are ready: press again.` : ''}`, 'success']));
-      }
-      if (buttons.length) parts.push(h('div', { class: 'fx-sendbar__actions' }, buttons));
-    } else if (state.status === 'pending') {
-      const failed = body.invoices.filter((i) => i.status === 'issued' && i.problems.some((p) => p.code === 'send_failed' || p.code?.startsWith('xero_'))).length;
-      if (context.canIssue && to && failed > 0) {
-        parts.push(h('p', { class: 'fx-dim' }, `${plural(failed, 'invoice', 'invoices')} did not reach ${to}. Fix the cause, then send again.`));
-        parts.push(action('Send again', 'send-again', () => ({}), (res) => [`${res.queued} on the way to ${to} again.`, 'success']));
-      }
-    }
-    bar.replaceChildren(...parts);
-    bar.hidden = !parts.length;
     bulk.draw({ count: ticked.length, onClear: () => setTicks([]), ...bulkActions(ticked) });
   }
 
@@ -228,7 +191,7 @@ export async function renderInvoiceList(main, ui) {
     const apply = [];
     if (state.status === 'ready' && context.canIssue) {
       status.push({
-        icon: to ? 'send' : 'circle-check-big', label: to ? 'Send' : 'Approve', primary: true,
+        icon: to ? 'send' : 'circle-check-big', label: to ? `Send to ${to}` : 'Approve', primary: true,
         title: to ? `Send to ${to}` : 'Approve',
         run: async () => {
           const ok = await ui.dialog({
@@ -352,7 +315,6 @@ export async function renderInvoiceList(main, ui) {
       draw(seen.get(key));
     } else if (body) {
       drawTabs(body.counts);
-      bar.hidden = true;
       host.dataset.stale = '';
     }
     host.setAttribute('aria-busy', 'true');

package/server/ui/jobs.js

@@ -19,9 +19,10 @@ import {
   caseNumber, FINAL_RANK, fixes, INVOICE_STAGES, invoiceStage, matches, NO_STATUS, orderStatuses, problemSummary, statusRank,
 } from '/assets/ui/job-board.js';
 import {
-  COLUMNS, DEFAULT_VIEW, fieldGroup, fieldIdOf, fieldLanes, FILTER_FIELDS, filterCount, filterJobs, groupJobs, GROUPS, KIND_OF_TYPE, keptStatuses, laneOf,
+  COLUMNS, DEFAULT_VIEW, fieldGroup, fieldIdOf, fieldLanes, FILTER_FIELDS, filterJobs, groupJobs, GROUPS, KIND_OF_TYPE, keptStatuses, laneOf,
   normaliseJobsView, NOT_SET, OPERATORS, sortJobs, SORTS,
 } from '/assets/ui/job-view.js';
+import { findBox, ICONS, svg, today, viewBar } from '/assets/ui/view-bar.js';
 
 const LAYOUT_KEY = 'flow_jobs_layout';
 const FOLDED_KEY = 'flow_jobs_folded';
@@ -84,19 +85,9 @@ function saveFolded(folded) {
   try { localStorage.setItem(FOLDED_KEY, JSON.stringify(folded)); } catch { /* a convenience only */ }
 }
 
-// The local calendar day, as yyyy-mm-dd, to mark late jobs.
-const today = () => {
-  const now = new Date();
-  return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
-};
 
 const WARN_ICON = '<svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1.5 15 14H1z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 6v3.6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="8" cy="11.6" r=".9" fill="currentColor"/></svg>';
 const PERSON_ICON = '<svg width="13" height="13" viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="5.5" r="3" fill="none" stroke="currentColor" stroke-width="1.3"/><path d="M2.5 14c.6-2.8 2.8-4.3 5.5-4.3s4.9 1.5 5.5 4.3" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>';
-const GROUP_ICON = '<svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1.8 14.5 5 8 8.2 1.5 5z" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/><path d="m1.5 8.2 6.5 3.2 6.5-3.2M1.5 11.2 8 14.4l6.5-3.2" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/></svg>';
-const SORT_ICON = '<svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><path d="m4.5 6 3.5-3.5L11.5 6M4.5 10 8 13.5l3.5-3.5" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>';
-const COLUMNS_ICON = '<svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><rect x="2" y="2.5" width="12" height="11" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.3"/><path d="M6 2.5v11M10 2.5v11" stroke="currentColor" stroke-width="1.3"/></svg>';
-const FILTER_ICON = '<svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><path d="M2 3.5h12M4.5 8h7M7 12.5h2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>';
-const TICK_ICON = '<svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><path d="m3 8.5 3.2 3L13 4.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>';
 const CHEVRON_ICON = '<svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><path d="m6 3.5 4.5 4.5L6 12.5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>';
 const CALENDAR_ICON = '<svg width="13" height="13" viewBox="0 0 16 16" aria-hidden="true"><rect x="2" y="3" width="12" height="11" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.3"/><path d="M2 6.5h12M5.5 1.5v3M10.5 1.5v3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>';
 
@@ -120,7 +111,7 @@ export async function renderJobs(main, ui) {
     ticked: new Set(), folded: readFolded(),
   };
   const toggle = h('div', { class: 'fx-seg', role: 'radiogroup', 'aria-label': 'Layout' });
-  const search = h('input', { class: 'fx-input fx-search', type: 'search', placeholder: 'Find a case, client or practitioner', 'aria-label': 'Find a job', value: asked });
+  const find = findBox(h, { label: 'Find a case, client or practitioner', value: asked, oninput: (words) => { state.q = words.trim(); draw(); } });
   const host = h('div', { class: 'fx-jobs' }, h('div', { class: 'fx-skeleton' }));
   const controls = h('div', { class: 'fx-viewbar', role: 'group', 'aria-label': 'Group, sort and filter' });
   // In the list, ticked rows get the same floating bar as Invoices.
@@ -128,7 +119,7 @@ export async function renderJobs(main, ui) {
   main.classList.add('fx-main--wide');
   main.append(
     pageHeader('Jobs', { subtitle: 'Every job in the lab system, by its status there.' }),
-    h('div', { class: 'fx-toolbar fx-toolbar--plain' }, controls, h('div', { class: 'fx-toolbar__end' }, search, toggle)),
+    h('div', { class: 'fx-toolbar fx-toolbar--plain' }, controls, h('div', { class: 'fx-toolbar__end' }, find.element, toggle)),
     host,
     bulk.element);
 
@@ -137,7 +128,6 @@ export async function renderJobs(main, ui) {
     onclick: () => { saveLayout(id); change({ layout: id }); drawToggle(); },
   }, label)));
   drawToggle();
-  search.addEventListener('input', () => { state.q = search.value.trim(); draw(); });
 
   const problemsOf = (job) => fixes(job.obligation);
   const jobKey = (job) => `${job.sourceSystem}\u0000${job.sourceJobRef}`;
@@ -177,45 +167,8 @@ export async function renderJobs(main, ui) {
     }, 500);
   }
 
-  // One toolbar control: a chip that opens a small panel under it, and an ×
-  // that clears what the chip sets (as ClickUp's "Clear all filters"). The
-  // panel is a popover, so a click outside or Escape closes it.
-  let menuCount = 0;
-  function menu(icon, build, { rows = false, clearLabel = 'Clear' } = {}) {
-    const id = `fx-jobs-menu-${++menuCount}`;
-    const panel = h('div', { class: `fx-pop${rows ? ' fx-pop--rows' : ''}`, id, popover: 'auto', role: rows ? 'dialog' : 'menu' });
-    const button = h('button', { type: 'button', class: 'fx-chip', popovertarget: id, 'aria-haspopup': rows ? 'dialog' : 'menu', 'aria-expanded': 'false' });
-    const clear = h('button', { type: 'button', class: 'fx-chip__clear', 'aria-label': clearLabel, title: clearLabel, hidden: true }, lucide(h, 'x'));
-    const wrap = h('span', { class: 'fx-chipset' }, button, clear);
-    let onClear = null;
-    clear.addEventListener('click', () => onClear?.());
-    const fill = () => panel.replaceChildren(...build(fill, () => panel.hidePopover()).filter(Boolean));
-    panel.addEventListener('toggle', (event) => {
-      button.setAttribute('aria-expanded', String(event.newState === 'open'));
-      if (event.newState !== 'open') return;
-      fill();
-      const at = button.getBoundingClientRect();
-      panel.style.top = `${Math.round(at.bottom + 6)}px`;
-      panel.style.left = `${Math.round(Math.max(8, Math.min(at.left, innerWidth - panel.offsetWidth - 8)))}px`;
-    });
-    return {
-      node: [wrap, panel],
-      wrap,
-      fill: () => { if (panel.matches(':popover-open')) fill(); },
-      set(label, on, clearIt = null) {
-        button.replaceChildren(svg(icon), h('span', {}, label));
-        wrap.classList.toggle('fx-chipset--on', on);
-        button.classList.toggle('fx-chip--on', on);
-        onClear = clearIt;
-        clear.hidden = !clearIt;
-      },
-    };
-  }
-
-  // A choice in a menu: a row with a tick when it is chosen.
-  const option = (text, checked, onclick, role = 'menuitemradio') => h('button', {
-    type: 'button', class: 'fx-pop__item', role, 'aria-checked': String(checked), onclick,
-  }, h('span', { class: 'fx-pop__tick' }, checked ? svg(TICK_ICON) : null), h('span', {}, text));
+  // The chips (view-bar.js), shared with every list page.
+  const { menu, option, title, choose, bin, addButton, rowsFoot, clearAll, filterMenu: buildFilterMenu } = viewBar(h);
   const DATE_WORDS = ['Oldest first', 'Newest first'];
   const NUMBER_WORDS = ['Low to high', 'High to low'];
   const DIR_WORDS = { total: NUMBER_WORDS, due: DATE_WORDS, ordered: DATE_WORDS, shipped: DATE_WORDS };
@@ -223,19 +176,6 @@ export async function renderJobs(main, ui) {
   const dirWords = (by) => DIR_WORDS[by] ?? TYPE_WORDS[fieldById(fieldIdOf(by))?.type] ?? ['A to Z', 'Z to A'];
   const fieldById = (id) => state.fields.find((f) => f.id === id) ?? null;
 
-  // The parts of a row panel (Group by, Sort, Filters): a title, rows of
-  // selects with a bin at the end, and a foot with "Add" and "Clear all".
-  const title = (text) => h('p', { class: 'fx-rows__title' }, text);
-  const choose = (label, value, options, onchange, extra = {}) => h('select', {
-    class: 'fx-select fx-select--sm', 'aria-label': label, onchange: (event) => onchange(event.target.value), ...extra,
-  }, options.map((o) => (o.group
-    ? (o.options.length ? h('optgroup', { label: o.group }, o.options.map((x) => h('option', { value: x.value, selected: x.value === value }, x.label))) : null)
-    : h('option', { value: o.value, selected: o.value === value, disabled: o.disabled }, o.label))));
-  const bin = (label, onclick) => h('button', { type: 'button', class: 'fx-rows__bin', 'aria-label': label, title: label, onclick }, lucide(h, 'trash-2'));
-  const addButton = (text, onclick) => h('button', { type: 'button', class: 'fx-btn fx-btn--ghost fx-btn--sm fx-rows__add', onclick }, lucide(h, 'plus'), text);
-  const rowsFoot = (...parts) => h('div', { class: 'fx-rows__foot' }, ...parts);
-  const clearAll = (onclick) => h('button', { type: 'button', class: 'fx-btn fx-btn--ghost fx-btn--sm', onclick }, 'Clear all');
-
   // ── Group by ──
   // One row: what to group by, the group order, and a bin that takes the
   // groups away (the list only: the board always has lanes).
@@ -243,7 +183,7 @@ export async function renderJobs(main, ui) {
     ...Object.entries(GROUPS).filter(([id]) => id !== 'none').map(([value, label]) => ({ value, label })),
     { group: 'Custom fields', options: groupable().map((f) => ({ value: fieldGroup(f.id), label: f.name })) },
   ];
-  const groupMenu = menu(GROUP_ICON, (redraw) => {
+  const groupMenu = menu(ICONS.group, (redraw) => {
     const list = state.view.layout === 'list';
     const group = state.view.group === 'none' && !list ? 'status' : state.view.group;
     const none = group === 'none';
@@ -264,7 +204,7 @@ export async function renderJobs(main, ui) {
     { group: 'Custom fields', options: state.fields.map((f) => ({ value: fieldGroup(f.id), label: f.name })) },
   ];
   const setSorts = (sorts) => change({ sorts });
-  const sortMenu = menu(SORT_ICON, (redraw) => {
+  const sortMenu = menu(ICONS.sort, (redraw) => {
     const { sorts } = state.view;
     const unused = sortOptions().flatMap((o) => o.options ?? [o]).filter((o) => !sorts.some((s) => s.by === o.value));
     return [
@@ -329,105 +269,15 @@ export async function renderJobs(main, ui) {
       default: return valueOf(job, fieldIdOf(field))?.value ?? null;
     }
   }
-  // A row's value when its operator changes: kept when it still fits.
-  function valueFor(field, op, old) {
-    const kind = kindOf(field);
-    if (['is', 'not'].includes(op) && ['choice', 'person'].includes(kind)) return Array.isArray(old) ? old : [];
-    if (['before', 'after', 'on'].includes(op)) return typeof old === 'string' && /^\d{4}-/.test(old) ? old : today();
-    if (['eq', 'gt', 'lt'].includes(op)) return typeof old === 'number' ? old : null;
-    if (['has', 'is'].includes(op)) return typeof old === 'string' ? old : '';
-    return null;
-  }
-  const setFilters = (filters) => change({ filters });
-  const setRow = (i, patch) => setFilters(state.view.filters.map((f, n) => (n === i ? { ...f, ...patch } : f)));
-  // A choice row's value: a button that opens a list of choices to tick,
-  // with a search when the list is long.
-  function choiceValue(i, filter) {
-    const choices = choicesOf(filter.field);
-    const named = () => {
-      const on = choices.filter((c) => filter.value.includes(c.value)).map((c) => c.label);
-      return on.length ? on.join(', ') : 'Choose…';
-    };
-    const id = `fx-jobs-choice-${i}`;
-    const button = h('button', { type: 'button', class: 'fx-select fx-select--sm fx-rows__value', popovertarget: id, title: named() }, named());
-    const pop = h('div', { class: 'fx-pop fx-pop--choices', id, popover: 'auto', role: 'menu' });
-    const find = choices.length > 8 ? h('input', { class: 'fx-input fx-input--sm', type: 'search', placeholder: 'Find', 'aria-label': 'Find a choice' }) : null;
-    const items = h('div', {});
-    const drawItems = () => {
-      const q = find?.value.trim().toLowerCase() ?? '';
-      items.replaceChildren(...choices.filter((c) => !q || c.label.toLowerCase().includes(q)).map((c) => option(c.label, filter.value.includes(c.value), () => {
-        filter = { ...filter, value: filter.value.includes(c.value) ? filter.value.filter((v) => v !== c.value) : [...filter.value, c.value] };
-        setRow(i, { value: filter.value });
-        button.textContent = named();
-        button.title = named();
-        drawItems();
-      }, 'menuitemcheckbox')));
-    };
-    find?.addEventListener('input', drawItems);
-    pop.append(...[find, items].filter(Boolean));
-    pop.addEventListener('toggle', (event) => {
-      if (event.newState !== 'open') return;
-      drawItems();
-      const at = button.getBoundingClientRect();
-      pop.style.top = `${Math.round(at.bottom + 4)}px`;
-      pop.style.left = `${Math.round(Math.max(8, Math.min(at.left, innerWidth - pop.offsetWidth - 8)))}px`;
-      find?.focus();
-    });
-    return [button, pop];
-  }
-  function valueControl(i, filter) {
-    const kind = kindOf(filter.field);
-    const { op } = filter;
-    if (['is', 'not'].includes(op) && ['choice', 'person'].includes(kind)) return choiceValue(i, filter);
-    if (['before', 'after', 'on'].includes(op)) {
-      return h('input', { class: 'fx-input fx-input--sm fx-rows__value', type: 'date', 'aria-label': 'Date', value: filter.value ?? '', onchange: (event) => setRow(i, { value: event.target.value || null }) });
-    }
-    if (['eq', 'gt', 'lt'].includes(op)) {
-      return h('input', {
-        class: 'fx-input fx-input--sm fx-rows__value', type: 'number', step: 'any', inputmode: 'decimal', 'aria-label': 'Number', value: filter.value ?? '',
-        oninput: (event) => setRow(i, { value: event.target.value === '' ? null : Number(event.target.value) }),
-      });
-    }
-    if (['has', 'is'].includes(op)) {
-      return h('input', { class: 'fx-input fx-input--sm fx-rows__value', type: 'text', 'aria-label': 'Text', value: filter.value ?? '', oninput: (event) => setRow(i, { value: event.target.value }) });
-    }
-    return h('span', { class: 'fx-rows__value fx-rows__value--none' });
-  }
-  const filterMenu = menu(FILTER_ICON, (redraw) => {
-    const { filters, match } = state.view;
-    const fields = filterFields();
-    return [
-      title('Filters'),
-      filters.length ? h('div', { class: 'fx-rows' }, filters.map((filter, i) => {
-        const known = kindOf(filter.field);
-        const lead = i === 0 ? h('span', { class: 'fx-rows__lead' }, 'Where')
-          : i === 1 ? choose('Match', match, [{ value: 'all', label: 'And' }, { value: 'any', label: 'Or' }], (value) => { change({ match: value }); redraw(); })
-            : h('span', { class: 'fx-rows__lead' }, match === 'any' ? 'Or' : 'And');
-        if (!known) {
-          return h('div', { class: 'fx-rows__row' }, lead, h('span', { class: 'fx-rows__gone' }, 'A custom field that was deleted'), bin('Remove this filter', () => { setFilters(filters.filter((_, n) => n !== i)); redraw(); }));
-        }
-        const ops = opsOf(filter.field);
-        return h('div', { class: 'fx-rows__row' },
-          lead,
-          choose('Field', filter.field, fields, (field) => {
-            const op = Object.keys(opsOf(field))[0];
-            setRow(i, { field, op, value: valueFor(field, op, null) });
-            redraw();
-          }),
-          choose('Operator', filter.op, Object.entries(ops).map(([value, label]) => ({ value, label })), (op) => { setRow(i, { op, value: valueFor(filter.field, op, filter.value) }); redraw(); }),
-          valueControl(i, filter),
-          bin('Remove this filter', () => { setFilters(filters.filter((_, n) => n !== i)); redraw(); }));
-      })) : h('p', { class: 'fx-rows__empty' }, 'No filters. Every job shows.'),
-      rowsFoot(
-        filters.length < 20 ? addButton('Add filter', () => { setFilters([...filters, { field: 'status', op: 'is', value: [] }]); redraw(); }) : h('span'),
-        filters.length ? clearAll(() => { setFilters([]); redraw(); }) : null),
-    ];
-  }, { rows: true, clearLabel: 'Clear all filters' });
+  const filterMenu = buildFilterMenu({
+    fields: filterFields, kindOf, opsOf, choicesOf, first: 'status',
+    view: () => state.view, change, empty: 'No filters. Every job shows.',
+  });
 
   // Columns (the list only): Client always shows; each other column can be
   // shown or hidden. Custom fields are columns too.
   const heading = (text) => h('p', { class: 'fx-pop__head' }, text);
-  const columnsMenu = menu(COLUMNS_ICON, (redraw) => {
+  const columnsMenu = menu(ICONS.columns, (redraw) => {
     const on = new Set(state.view.columns);
     const flip = (id) => {
       const next = on.has(id) ? state.view.columns.filter((c) => c !== id) : [...state.view.columns, id];
@@ -463,8 +313,7 @@ export async function renderJobs(main, ui) {
     sortMenu.set(sorts.length > 1 ? `Sort · ${sorts.length}` : first ? `Sort: ${sortName(first.by)} ${first.dir === 'desc' ? '↓' : '↑'}` : 'Sort', sorts.length > 0,
       sorts.length ? () => change({ sorts: [] }) : null);
     sortMenu.wrap.hidden = list && !sorts.length;
-    const count = filterCount(state.view);
-    filterMenu.set(count ? `${count} ${count === 1 ? 'Filter' : 'Filters'}` : 'Filter', count > 0, state.view.filters.length ? () => change({ filters: [], match: 'all' }) : null);
+    filterMenu.draw();
     columnsMenu.set('Columns', false);
     columnsMenu.wrap.hidden = !list;
   }
@@ -898,7 +747,7 @@ export async function renderJobs(main, ui) {
     const flip = () => change({ sorts: sorts.map((s, n) => (n === at ? { ...s, dir: s.dir === 'asc' ? 'desc' : 'asc' } : s)) });
     columnPop.replaceChildren(
       h('button', { type: 'button', class: 'fx-pop__item', role: 'menuitemcheckbox', 'aria-checked': 'true', title: 'Change the direction', onclick: () => { close(); flip(); } },
-        h('span', { class: 'fx-pop__tick' }, lucide(h, on.dir === 'asc' ? 'arrow-up' : 'arrow-down')), h('span', {}, `Sort by ${label}`), h('span', { class: 'fx-pop__end' }, svg(TICK_ICON))),
+        h('span', { class: 'fx-pop__tick' }, lucide(h, on.dir === 'asc' ? 'arrow-up' : 'arrow-down')), h('span', {}, `Sort by ${label}`), h('span', { class: 'fx-pop__end' }, svg(ICONS.tick))),
       h('button', { type: 'button', class: 'fx-pop__item', role: 'menuitem', onclick: () => { close(); change({ sorts: sorts.filter((_, n) => n !== at) }); } },
         h('span', { class: 'fx-pop__tick' }, lucide(h, 'ban')), h('span', {}, 'Clear sort')));
     placeColumnPop(event);
@@ -1426,9 +1275,3 @@ export async function renderJobs(main, ui) {
 
   await load();
 }
-
-function svg(markup) {
-  const span = document.createElement('span');
-  span.innerHTML = markup;
-  return span.firstChild;
-}