@arcforgelabs/flow 2026.10.42 → 2026.10.44

package/server/ui/reconcile.js

@@ -17,7 +17,11 @@
 // /jobs/:id/no-invoice (docs/JOB_INVOICE_LINKS.md).
 import { bulkBar } from '/assets/ui/bulk-bar.js';
 import { lucide } from '/assets/ui/custom-fields.js';
-import { filterJobs, MATCHES } from '/assets/ui/job-view.js';
+import { columnTable, rowCells, viewSaver } from '/assets/ui/columns.js';
+import { statusRank } from '/assets/ui/job-board.js';
+import { filterJobs, KIND_OF_TYPE, normaliseListView, RECONCILE_COLUMNS } from '/assets/ui/job-view.js';
+import { normaliseReconcileView, RECONCILE_FILTER_FIELDS } from '/assets/ui/list-views.js';
+import { savedViews } from '/assets/ui/saved-views.js';
 import { findBox, today, viewBar } from '/assets/ui/view-bar.js';
 import { formatCents } from '/assets/ui/invoicing.js';
 
@@ -97,15 +101,10 @@ const CHEVRONS = { prev: 'M14.5 6l-6 6 6 6', next: 'M9.5 6l6 6-6 6' };
 const FILTER_KEY = 'flow_reconcile_filters';
 const NAV_KEY = 'flow_reconcile_nav';
 // The fields a filter row can use. One word each; Type's choices have icons.
-const FILTER_FIELDS = {
-  type: { label: 'Type', kind: 'choice' },
-  client: { label: 'Client', kind: 'choice' },
-  practitioner: { label: 'Practitioner', kind: 'choice' },
-  date: { label: 'Date', kind: 'date' },
-  total: { label: 'Total', kind: 'number' },
-  match: { label: 'Match', kind: 'check' },
-};
-const MATCH_OPS = { yes: 'has one', no: 'has none' };
+// The filter's fields: list-views.js (the server checks saved views with them).
+const FILTER_FIELDS = RECONCILE_FILTER_FIELDS;
+const MATCH_OPS = { yes: 'Has one', no: 'Has none' };
+const SET_OPS = { is: 'Is', not: 'Is not' };
 const TYPES = [{ value: 'job', label: 'Job', icon: 'briefcase' }, { value: 'invoice', label: 'Invoice', icon: 'file-text' }];
 
 function readStored(store, key, fallback) {
@@ -118,35 +117,47 @@ function writeStored(store, key, value) {
 // One row for each gap, jobs and invoices together, oldest first.
 export function reconcileRows({ jobs = [], invoices = [] }) {
   return [
-    ...jobs.map((j) => ({ kind: 'job', id: j.id, client: j.clientName, who: j.practitioner, date: j.jobDate, totalCents: j.totalCents, possible: j.possible, unclear: j.unclear })),
-    ...invoices.map((i) => ({ kind: 'invoice', id: i.id, client: i.clientName, who: i.number ?? 'Draft', status: i.status, date: i.issueDate, totalCents: i.totalCents, possible: i.possible })),
+    ...jobs.map((j) => ({
+      kind: 'job', id: j.id, client: j.clientName, who: j.practitioner, stage: j.status ?? null, date: j.jobDate, totalCents: j.totalCents, possible: j.possible, unclear: j.unclear,
+      key: j.sourceSystem && j.sourceJobRef ? `${j.sourceSystem}\u0000${j.sourceJobRef}` : null,
+    })),
+    ...invoices.map((i) => ({ kind: 'invoice', id: i.id, client: i.clientName, who: i.number ?? 'Draft', status: i.status, stage: statusWords(i.status), date: i.issueDate, totalCents: i.totalCents, possible: i.possible })),
   ].sort((a, b) => String(a.date ?? '9999').localeCompare(String(b.date ?? '9999')));
 }
 
-// A row's value for a filter field, as the filter compares it.
-export function rowValue(row, field) {
+const isCustom = (field) => /^field:/.test(field);
+
+// A row's value for a filter field, as the filter compares it. `valueOf`
+// reads a job's custom field value: (row, fieldId) => value.
+export function rowValue(row, field, valueOf = () => null) {
   switch (field) {
     case 'type': return row.kind;
+    case 'status': return row.stage ?? null;
     case 'client': return row.client ?? null;
     case 'practitioner': return row.kind === 'job' ? row.who ?? null : null;
     case 'date': return row.date ?? null;
     case 'total': return row.totalCents == null ? null : row.totalCents / 100;
     case 'match': return row.possible > 0;
-    default: return null;
+    default: return isCustom(field) && row.kind === 'job' ? valueOf(row, field.slice(6)) : null;
   }
 }
 
-// The rows a view keeps: its filter rows, then the search words.
-export function keptRows(rows, view, q = '') {
+// A view without the rows a record does not have: an invoice has no
+// practitioner and no custom fields.
+const forInvoices = (view) => ({ ...view, groups: view.groups.map((g) => ({ ...g, filters: g.filters.filter((f) => !FILTER_FIELDS[f.field]?.job && !isCustom(f.field)) })) });
+
+// The rows a view keeps: its filter rows, then the search words. `kindOf`
+// gives a field's kind (custom fields too); `valueOf` a custom value.
+export function keptRows(rows, view, q = '', { kindOf = (field) => FILTER_FIELDS[field]?.kind ?? null, valueOf = () => null, now = today() } = {}) {
   const words = q.trim().toLowerCase();
-  return filterJobs(rows, view, { valueOf: rowValue, kindOf: (field) => FILTER_FIELDS[field]?.kind ?? null, today: today() })
+  const keep = (list, v) => filterJobs(list, v, { valueOf: (row, field) => rowValue(row, field, valueOf), kindOf, today: now });
+  const kept = new Set([...keep(rows.filter((r) => r.kind === 'job'), view), ...keep(rows.filter((r) => r.kind !== 'job'), forInvoices(view))]);
+  return rows.filter((r) => kept.has(r))
     .filter((r) => !words || [r.client, r.who, money(r.totalCents)].some((v) => String(v ?? '').toLowerCase().includes(words)));
 }
 
 function readView() {
-  const saved = readStored(localStorage, FILTER_KEY, {});
-  const filters = Array.isArray(saved.filters) ? saved.filters.filter((f) => f && Object.hasOwn(FILTER_FIELDS, f.field)) : [];
-  return { match: MATCHES.includes(saved.match) ? saved.match : 'all', filters };
+  return normaliseReconcileView(readStored(localStorage, FILTER_KEY, {}));
 }
 
 export async function renderReconcile(main, ui, id = null) {
@@ -158,43 +169,84 @@ const pathOf = (row) => `/reconcile/${row.id}${row.kind === 'invoice' ? '?kind=i
 const KIND_ICON = { job: ['briefcase', 'Job'], invoice: ['file-text', 'Invoice'] };
 
 async function renderList(main, ui) {
-  const { h, flow, toast, pageHeader } = ui;
+  const { h, flow, toast, listHead, listFrame } = ui;
   const icon = (name, label) => lucide(h, name, label);
   const canAct = ['owner', 'admin'].includes(ui.me?.person?.role);
   const back = readStored(sessionStorage, NAV_KEY, null);
-  const state = { view: readView(), q: back?.q ?? '', ticked: new Set() };
+  const state = { view: readView(), q: back?.q ?? '', ticked: new Set(), columns: normaliseListView(ui.me?.views?.reconcile, RECONCILE_COLUMNS) };
+  // The list's columns: resize, move, hide, kept with the account.
+  const saveColumns = viewSaver(ui, 'reconcile');
+  const heads = columnTable(h, {
+    order: () => state.columns.columns,
+    widths: () => state.columns.widths,
+    change: (patch) => {
+      state.columns = normaliseListView({ ...state.columns, ...patch }, RECONCILE_COLUMNS);
+      saveColumns(state.columns);
+      draw();
+    },
+    hidden: () => Object.keys(RECONCILE_COLUMNS).filter((id) => !state.columns.columns.includes(id)).map((id) => ({ id, label: RECONCILE_COLUMNS[id] })),
+  });
+  let rows;
+  // A change to the filter: kept in this browser, and drawn.
+  const setView = (patch) => {
+    state.view = normaliseReconcileView({ ...state.view, ...patch });
+    writeStored(localStorage, FILTER_KEY, state.view);
+    views.draw();
+    if (rows) draw();
+  };
+  // The person's named views (saved-views.js): their default opens on a
+  // new visit.
+  const views = savedViews(ui, { page: 'reconcile', current: () => state.view, apply: setView });
+  const opening = views.opening();
+  if (opening) state.view = normaliseReconcileView(opening);
   const find = findBox(h, { label: 'Find a client, practitioner or amount', value: state.q, oninput: (words) => { state.q = words; draw(); } });
   const controls = h('div', { class: 'fx-viewbar', role: 'group', 'aria-label': 'Filter' });
   const host = h('div', { class: 'fx-rec' }, h('div', { class: 'fx-skeleton' }));
   const bulk = bulkBar(ui, { label: 'Ticked jobs' });
-  main.append(
-    pageHeader('Reconcile'),
-    h('div', { class: 'fx-toolbar fx-toolbar--plain' }, controls, h('div', { class: 'fx-toolbar__end' }, find.element)),
-    host, bulk.element);
-
-  // The Filter chip: the same rows as on Jobs (view-bar.js).
+  const frame = listFrame(main, host);
+  main.append(...listHead('Reconcile', { views: views.element, start: controls, end: find.element }).nodes, frame.element, bulk.element);
+
+  // The Filter chip: the same panel as on Jobs (view-bar.js). Job rows also
+  // have the lab's custom fields.
+  const custom = { fields: [], people: [], values: new Map() };
+  const fieldById = (id) => custom.fields.find((f) => f.id === id) ?? null;
+  const kindOf = (field) => FILTER_FIELDS[field]?.kind ?? (isCustom(field) ? KIND_OF_TYPE[fieldById(field.slice(6))?.type] ?? null : null);
+  const valueOf = (row, fieldId) => (row.key ? custom.values.get(`${row.key}\u0000${fieldId}`) ?? null : null);
   const labels = (list) => [...new Set(list.filter(Boolean))].sort((a, b) => a.localeCompare(b)).map((v) => ({ value: v, label: v }));
   const filterMenu = viewBar(h).filterMenu({
-    fields: () => Object.entries(FILTER_FIELDS).map(([value, f]) => ({ value, label: f.label })),
-    kindOf: (field) => FILTER_FIELDS[field]?.kind ?? null,
-    opsOf: (field) => (field === 'match' ? MATCH_OPS : null),
-    choicesOf: (field) => (field === 'type' ? TYPES
-      : field === 'client' ? labels(rows.map((r) => r.client))
-        : field === 'practitioner' ? labels(rows.filter((r) => r.kind === 'job').map((r) => r.who)) : []),
-    view: () => state.view,
-    change: (patch) => {
-      state.view = { ...state.view, ...patch };
-      writeStored(localStorage, FILTER_KEY, state.view);
-      draw();
+    fields: () => [
+      ...Object.entries(FILTER_FIELDS).map(([value, f]) => ({ value, label: f.label, icon: f.icon })),
+      ...custom.fields.filter((f) => KIND_OF_TYPE[f.type]).map((f) => ({ value: `field:${f.id}`, label: f.name })),
+    ],
+    kindOf,
+    opsOf: (field) => (field === 'match' ? MATCH_OPS : ['type', 'status'].includes(field) ? SET_OPS : null),
+    choicesOf: (field) => {
+      if (field === 'type') return TYPES;
+      if (field === 'status') return labels(rows.filter((r) => r.kind === 'job').map((r) => r.stage)).map((c) => ({ ...c, rank: statusRank(c.value) }))
+        .concat(labels(rows.filter((r) => r.kind !== 'job').map((r) => r.stage)).filter((c) => !rows.some((r) => r.kind === 'job' && r.stage === c.value)));
+      if (field === 'client') return labels(rows.map((r) => r.client));
+      if (field === 'practitioner') return labels(rows.filter((r) => r.kind === 'job').map((r) => r.who));
+      const f = isCustom(field) ? fieldById(field.slice(6)) : null;
+      if (f?.type === 'person') return [{ value: 'me', label: 'Me' }, ...custom.people.map((p) => ({ value: p.id, label: p.name }))];
+      return (f?.options ?? []).map((o) => ({ value: o.id, label: o.archived ? `${o.name} (archived)` : o.name, color: o.color }));
     },
+    view: () => state.view,
+    change: setView,
     first: 'type',
     empty: 'No filters. Every job and invoice shows.',
   });
   controls.append(...filterMenu.node);
 
-  let rows;
+  views.draw();
   try {
-    rows = reconcileRows(await flow('/api/invoicing/reconcile'));
+    // Custom fields are extra: the list still shows without them.
+    const [lists, fields, values] = await Promise.all([
+      flow('/api/invoicing/reconcile'), flow('/api/custom-fields').catch(() => null), flow('/api/custom-fields/values').catch(() => null),
+    ]);
+    rows = reconcileRows(lists);
+    custom.fields = fields?.fields ?? [];
+    custom.people = fields?.people ?? [];
+    custom.values = new Map((values?.values ?? []).map((v) => [`${v.sourceSystem}\u0000${v.sourceJobRef}\u0000${v.fieldId}`, v.value]));
   } catch (error) {
     host.replaceChildren(h('p', { class: 'fx-empty' }, error.message));
     return;
@@ -202,8 +254,9 @@ async function renderList(main, ui) {
 
   function draw() {
     filterMenu.draw();
-    const shown = keptRows(rows, state.view, state.q);
+    const shown = keptRows(rows, state.view, state.q, { kindOf, valueOf });
     const seen = new Set(shown.map((r) => r.id));
+    frame.count(`${shown.length} to check`);
     for (const key of state.ticked) if (!seen.has(key)) state.ticked.delete(key);
     const remember = () => writeStored(sessionStorage, NAV_KEY, { q: state.q, rows: shown.map(({ kind, id }) => ({ kind, id })) });
     if (!rows.length) {
@@ -252,31 +305,31 @@ async function renderList(main, ui) {
     const possible = (r) => (r.possible
       ? h('span', { class: 'fx-rec__possible', 'data-state': 'some' }, icon('link-2', 'Possible match'), String(r.possible))
       : h('span', { class: 'fx-rec__possible' }, icon('circle-dashed', 'No possible match')));
-    host.replaceChildren(h('div', { class: 'fx-panel' }, h('table', { class: 'fx-table fx-table--rows fx-rec-list' },
-      h('thead', {}, h('tr', {},
-        canAct ? h('th', { class: 'fx-tick-cell' }, all) : null,
-        h('th', { class: 'fx-rec-list__kind' }, h('span', { class: 'fx-sr' }, 'Type')),
-        h('th', {}, 'Client'),
-        h('th', {}, 'Detail'),
-        h('th', {}, 'Date'),
-        h('th', { class: 'fx-num' }, 'Total'),
-        h('th', { class: 'fx-rec-list__mid' }, 'Possible'))),
-      h('tbody', {}, shown.map((r) => {
+    const ALL = {
+      kind: { kind: 'icon', icon: 'layers', className: 'fx-rec-list__kind', cell: (r) => icon(...KIND_ICON[r.kind]) },
+      client: { kind: 'client', className: 'fx-strong', cell: (r) => r.client ?? h('span', { class: 'fx-dim' }, 'No client') },
+      detail: { kind: 'text', cell: (r) => h('span', { class: r.kind === 'invoice' ? 'fx-num' : 'fx-dim' }, r.who ?? '—', r.kind === 'invoice' ? h('span', { class: 'fx-dim' }, ` · ${statusWords(r.status)}`) : null) },
+      date: { kind: 'date', className: 'fx-dim', cell: (r) => shortDate(r.date) },
+      total: { kind: 'total', num: true, cell: (r) => money(r.totalCents) },
+      possible: { kind: 'status', className: 'fx-rec-list__mid', cell: possible },
+    };
+    const columns = state.columns.columns.map((id) => ({ id, label: RECONCILE_COLUMNS[id], ...ALL[id] }));
+    host.replaceChildren(h('div', { class: 'fx-panel' }, heads.table({
+      className: 'fx-table--rows fx-rec-list',
+      columns,
+      lead: canAct ? [h('th', { class: 'fx-tick-cell' }, all)] : [],
+      rows: h('tbody', {}, shown.map((r) => {
         const box = r.kind === 'job' ? h('input', { type: 'checkbox', class: 'fx-tick', 'aria-label': `Tick ${r.client ?? 'job'}`, checked: state.ticked.has(r.id), onclick: (event) => event.stopPropagation(), onchange: () => {
           if (box.checked) state.ticked.add(r.id); else state.ticked.delete(r.id);
           drawBar();
         } }) : null;
         if (box) boxes.set(r.id, box);
-        const [glyph, label] = KIND_ICON[r.kind];
         return h('tr', { 'data-kind': r.kind, onclick: () => { remember(); ui.go(pathOf(r)); } },
           canAct ? h('td', { class: 'fx-tick-cell', onclick: (event) => event.stopPropagation() }, box) : null,
-          h('td', { class: 'fx-rec-list__kind' }, icon(glyph, label)),
-          h('td', { class: 'fx-strong' }, r.client ?? h('span', { class: 'fx-dim' }, 'No client')),
-          h('td', { class: r.kind === 'invoice' ? 'fx-num' : 'fx-dim' }, r.who ?? '—', r.kind === 'invoice' ? h('span', { class: 'fx-dim' }, ` · ${statusWords(r.status)}`) : null),
-          h('td', { class: 'fx-dim' }, shortDate(r.date)),
-          h('td', { class: 'fx-num' }, money(r.totalCents)),
-          h('td', { class: 'fx-rec-list__mid' }, possible(r)));
-      })))));
+          rowCells(h, columns, r),
+          h('td', { class: 'fx-c-end' }));
+      })),
+    })));
     drawBar();
   }
   draw();

package/server/ui/routes.js

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

package/server/ui/saved-views.js

@@ -0,0 +1,141 @@
+// Saved views: the row of named view tabs over a list (Jobs, Invoices,
+// Reconcile), as ClickUp's. A view keeps the page's Group, Sort, Filter and
+// Columns under a name. A tab shows it; "Save" and "Revert" show when the
+// page no longer matches the chosen tab; "+ View" saves the page as a new
+// view. Each tab's ⋯ menu has "Set as my default" (the view that opens
+// when the person comes to the page), Rename and Delete. The views follow
+// the person's account (PUT /api/me/saved-views/:page, list-views.js).
+//
+//   const views = savedViews(ui, { page, current, apply });
+//   views.element   the tab row, for the page to place
+//   views.opening() the view to open on, or null: the default view on the
+//                   first visit in this browser tab, else the page's own
+//   views.draw()    call after any change to the page's view
+import { lucide } from '/assets/ui/custom-fields.js';
+import { rowMenu } from '/assets/ui/kit.js';
+import { MAX_SAVED_VIEWS, normaliseSavedViews, sameView } from '/assets/ui/list-views.js';
+
+const ACTIVE_KEY = (page) => `flow_view_tab_${page}`;
+
+function readActive(page) {
+  try { return sessionStorage.getItem(ACTIVE_KEY(page)); } catch { return null; }
+}
+function writeActive(page, id) {
+  try {
+    if (id) sessionStorage.setItem(ACTIVE_KEY(page), id);
+    else sessionStorage.removeItem(ACTIVE_KEY(page));
+  } catch { /* the tab is forgotten on the next visit */ }
+}
+
+const newId = () => (globalThis.crypto?.randomUUID?.() ?? `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`);
+
+export function savedViews(ui, { page, current, apply }) {
+  const { h, flow, dialog, toast } = ui;
+  let saved = normaliseSavedViews(page, ui.me?.views?.saved?.[page]);
+  let active = null;
+  const element = h('div', { class: 'fx-views', role: 'tablist', 'aria-label': 'Views' });
+  const chosen = () => saved.list.find((v) => v.id === active) ?? null;
+
+  async function store(next) {
+    const before = saved;
+    saved = normaliseSavedViews(page, next);
+    if (ui.me) ui.me.views = { ...ui.me.views, saved: { ...ui.me.views?.saved, [page]: saved } };
+    draw();
+    try {
+      await flow(`/api/me/saved-views/${page}`, { method: 'PUT', body: JSON.stringify(saved) });
+    } catch {
+      saved = before;
+      draw();
+      toast?.('Flow could not save your views. Try again.', 'danger');
+    }
+  }
+
+  function choose(id) {
+    active = id;
+    writeActive(page, id);
+    const view = chosen();
+    if (view) apply(view.view);
+    draw();
+  }
+
+  // A name for a view: a dialog with one box.
+  async function askName(title, value, confirm) {
+    const data = await dialog({
+      title,
+      body: h('div', { class: 'fx-fields' }, h('label', { class: 'fx-field' },
+        h('span', { class: 'fx-label' }, 'Name'),
+        h('input', { class: 'fx-input', name: 'name', required: true, maxlength: '60', autocomplete: 'off', value }))),
+      confirm,
+    });
+    const name = data?.get('name')?.toString().trim();
+    return name || null;
+  }
+
+  async function addView() {
+    const name = await askName('Save view', `View ${saved.list.length + 1}`, 'Save');
+    if (!name) return;
+    const id = newId();
+    await store({ ...saved, list: [...saved.list, { id, name, view: current() }] });
+    active = id;
+    writeActive(page, id);
+    draw();
+  }
+
+  async function rename(view) {
+    const name = await askName('Rename view', view.name, 'Rename');
+    if (name) await store({ ...saved, list: saved.list.map((v) => (v.id === view.id ? { ...v, name } : v)) });
+  }
+
+  async function remove(view) {
+    const ok = await dialog({ title: `Delete "${view.name}"?`, body: h('p', {}, 'The list stays as it is now.'), confirm: 'Delete', tone: 'danger' });
+    if (!ok) return;
+    if (active === view.id) { active = null; writeActive(page, null); }
+    await store({ list: saved.list.filter((v) => v.id !== view.id), default: saved.default === view.id ? null : saved.default });
+  }
+
+  const setDefault = (view) => store({ ...saved, default: saved.default === view.id ? null : view.id });
+
+  function draw() {
+    const view = chosen();
+    const changed = Boolean(view) && !sameView(page, view.view, current());
+    const tabs = saved.list.map((v) => {
+      const on = v.id === active;
+      const isDefault = saved.default === v.id;
+      const [more, menu] = rowMenu(`More for ${v.name}`, [
+        { icon: isDefault ? 'house' : 'house-plus', text: isDefault ? 'Not my default' : 'Set as my default', run: () => setDefault(v) },
+        { icon: 'pencil', text: 'Rename', run: () => rename(v) },
+        '-',
+        { icon: 'trash-2', text: 'Delete', tone: 'danger', run: () => remove(v) },
+      ], { align: 'start' });
+      return h('span', { class: 'fx-views__item', 'data-on': String(on) },
+        h('button', {
+          type: 'button', class: 'fx-views__tab', role: 'tab', 'aria-selected': String(on),
+          title: isDefault ? `${v.name} (your default)` : v.name,
+          onclick: () => choose(v.id),
+        }, isDefault ? lucide(h, 'house', 'Your default') : null, h('span', { class: 'fx-views__name' }, v.name), on && changed ? h('span', { class: 'fx-views__dot', 'aria-label': 'Changed', title: 'Changed' }) : null),
+        more, menu);
+    });
+    element.replaceChildren(...[
+      ...tabs,
+      saved.list.length < MAX_SAVED_VIEWS ? h('button', { type: 'button', class: 'fx-views__add', onclick: addView }, lucide(h, 'plus'), 'View') : null,
+      changed ? h('span', { class: 'fx-views__end' },
+        h('button', { type: 'button', class: 'fx-btn fx-btn--ghost fx-btn--sm', onclick: () => { apply(view.view); draw(); } }, 'Revert'),
+        h('button', { type: 'button', class: 'fx-btn fx-btn--primary fx-btn--sm', onclick: () => store({ ...saved, list: saved.list.map((v) => (v.id === view.id ? { ...v, view: current() } : v)) }) }, 'Save')) : null,
+    ].filter(Boolean));
+  }
+
+  // The view the page opens on. In the same browser tab, the tab chosen
+  // last stays chosen and the page keeps its own view; on a new visit the
+  // person's default view opens.
+  function opening() {
+    const kept = readActive(page);
+    if (kept && saved.list.some((v) => v.id === kept)) { active = kept; return null; }
+    const first = saved.list.find((v) => v.id === saved.default);
+    if (!first) return null;
+    active = first.id;
+    writeActive(page, first.id);
+    return first.view;
+  }
+
+  return { element, opening, draw };
+}

package/server/ui/search.js

@@ -8,6 +8,14 @@ const LIMIT = 6;
 
 const lower = (value) => String(value ?? '').toLowerCase();
 
+/**
+ * True for Ctrl+K or ⌘K. Some keydown events carry no `key` (Chrome sends
+ * them when it fills a form from saved details), so a missing key is no match.
+ */
+export function isSearchKey(event) {
+  return lower(event.key) === 'k' && Boolean(event.metaKey || event.ctrlKey) && !event.altKey && !event.shiftKey;
+}
+
 /**
  * `views` is [{ name, label, icon }] for the pages this person may open;
  * `icon(name)` draws a sidebar icon; `go(path)` opens a path in place.

package/server/ui/sidecar.js

@@ -0,0 +1,72 @@
+// The sidecar, as in ClickUp: a panel at the right of a page or a dialog.
+// The Custom fields manager opens it over its table (`overlay`); a job's
+// panel keeps it as its right column, with tabs (Activity, Review). Closed,
+// it takes no room, so the main area gets the full width.
+//
+// sidecar(h, { label, overlay, escape, tabs, onChange }) answers
+// { element, isOpen, open, show, close, tab, setTabs }:
+//   open(id)     selects tab `id` (or the first) and draws its `render()`
+//   show(node)   draws one node with no tabs (the overlay's own form)
+//   close()      hides it and empties it
+// `tabs` is [{ id, label, icon, render }]; each tab is an icon and one word.
+// `escape` closes it on Esc when no dialog or menu is open over the page.
+// `onChange(id)` hears each open (the tab id) and close (null).
+
+import { lucide } from '/assets/ui/custom-fields.js';
+
+export function sidecar(h, { label, overlay = false, escape = false, tabs = [], onChange = null } = {}) {
+  const element = h('aside', { class: `fx-sidecar${overlay ? ' fx-sidecar--over' : ''}`, 'aria-label': label, hidden: true });
+  let list = tabs;
+  let current = null;
+
+  const closeButton = () => h('button', { class: 'fx-sidecar__close', type: 'button', 'aria-label': 'Close', title: 'Close', onclick: () => api.close() }, lucide(h, 'x'));
+
+  function drawTabs() {
+    const head = h('header', { class: 'fx-sidecar__head' },
+      h('div', { class: 'fx-sidecar__tabs', role: 'tablist', 'aria-label': label },
+        list.map((t) => h('button', {
+          class: 'fx-sidecar__tab', type: 'button', role: 'tab', 'data-tab': t.id,
+          'aria-selected': String(t.id === current), onclick: () => api.open(t.id),
+        }, lucide(h, t.icon), h('span', {}, t.label), t.mark ? h('span', { class: 'fx-sidecar__mark', 'aria-hidden': 'true' }) : null))),
+      closeButton());
+    const tab = list.find((t) => t.id === current);
+    element.replaceChildren(head, h('div', { class: 'fx-sidecar__body', role: 'tabpanel' }, tab?.render?.() ?? null));
+  }
+
+  const api = {
+    element,
+    isOpen: () => !element.hidden,
+    tab: () => (element.hidden ? null : current),
+    open(id = null) {
+      current = list.find((t) => t.id === id)?.id ?? list[0]?.id ?? null;
+      drawTabs();
+      element.hidden = false;
+      onChange?.(current);
+    },
+    show(node) {
+      current = null;
+      element.replaceChildren(node);
+      element.hidden = false;
+    },
+    close() {
+      if (element.hidden) return;
+      element.hidden = true;
+      element.replaceChildren();
+      current = null;
+      onChange?.(null);
+    },
+    // New tabs (a tab's data came in): an open tab draws again.
+    setTabs(next) {
+      list = next;
+      if (!element.hidden && current) drawTabs();
+    },
+    closeButton,
+  };
+
+  if (escape) {
+    document.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape' && element.isConnected && !element.hidden && !document.querySelector('dialog[open], .fx-pop:popover-open')) api.close();
+    });
+  }
+  return api;
+}

package/server/ui/tip.js

@@ -0,0 +1,99 @@
+// Tips: every control that shows only an icon says its name on hover and on
+// keyboard focus, in one small tip beside it. One listener on the document
+// serves the whole app, so a new icon button needs only a name:
+//
+//   data-tip="Clear"       the tip, when it differs from the spoken name
+//   aria-label="Close"     an icon-only control's name is its tip
+//   title="Search"         taken over as the tip (no second, native tip)
+//
+// A control with words on it shows no tip. Clerk's own components keep their
+// own tips. The tip floats on <body>, so a scrolling list cannot cut it off.
+
+const INTERACTIVE = 'button, a[href], [role="button"], [role="tab"], [role="radio"], [role="menuitem"], [role="switch"], summary';
+const CANDIDATE = `[data-tip], ${INTERACTIVE.split(', ').map((s) => `${s}[aria-label], ${s}[title]`).join(', ')}, [role="img"][aria-label], [role="img"][title]`;
+
+// True when the element shows no word of its own: only icons or a symbol.
+export function iconOnly(text) {
+  return !/[\p{L}\p{N}]/u.test(String(text ?? ''));
+}
+
+// The tip for this element, or null. `el` needs getAttribute, textContent
+// and closest (a DOM element, or a test's stand-in).
+export function tipText(el) {
+  if (!el || el.closest?.('[class*="cl-"]')) return null;
+  if (!iconOnly(el.textContent) && !el.getAttribute('data-tip')) return null;
+  return el.getAttribute('title') || el.getAttribute('data-tip') || el.getAttribute('aria-label') || null;
+}
+
+// Marks a control icon-only: its spoken name and its tip. Returns the node.
+export function named(node, label, tip = label) {
+  node.setAttribute('aria-label', label);
+  node.setAttribute('data-tip', tip);
+  node.removeAttribute('title');
+  return node;
+}
+
+let bubble = null;
+let anchor = null;
+
+function place() {
+  if (!bubble || !anchor) return;
+  const box = anchor.getBoundingClientRect();
+  const tip = bubble.getBoundingClientRect();
+  const gap = 6;
+  // A folded sidebar's icons take their tip at the right, as in ClickUp.
+  if (anchor.dataset.tipSide === 'right') {
+    bubble.style.transform = `translate(${Math.round(box.right + gap)}px, ${Math.round(box.top + box.height / 2 - tip.height / 2)}px)`;
+    return;
+  }
+  const above = box.top - tip.height - gap;
+  const top = above >= 4 ? above : box.bottom + gap;
+  const left = Math.min(Math.max(4, box.left + box.width / 2 - tip.width / 2), window.innerWidth - tip.width - 4);
+  bubble.style.transform = `translate(${Math.round(left)}px, ${Math.round(top)}px)`;
+}
+
+function show(el) {
+  const text = tipText(el);
+  if (!text) return;
+  // A native title would show a second tip after a pause, so the tip takes
+  // it over (a title set again later wins).
+  if (el.hasAttribute('title')) {
+    if (!el.hasAttribute('aria-label')) el.setAttribute('aria-label', el.getAttribute('title'));
+    el.setAttribute('data-tip', el.getAttribute('title'));
+    el.removeAttribute('title');
+    return show(el);
+  }
+  if (!bubble) {
+    bubble = document.createElement('div');
+    bubble.className = 'fx-tip';
+    bubble.setAttribute('role', 'tooltip');
+    bubble.setAttribute('aria-hidden', 'true');
+  }
+  bubble.textContent = text;
+  anchor = el;
+  (el.closest('dialog[open]') ?? document.body).append(bubble);
+  place();
+}
+
+function hide(el) {
+  if (el && el !== anchor) return;
+  anchor = null;
+  bubble?.remove();
+}
+
+export function startTips() {
+  document.addEventListener('pointerover', (event) => {
+    if (event.pointerType === 'touch') return;
+    const el = event.target.closest?.(CANDIDATE);
+    if (el && el !== anchor) show(el);
+    else if (!el) hide();
+  });
+  document.addEventListener('focusin', (event) => {
+    const el = event.target.closest?.(CANDIDATE);
+    if (el && el.matches(':focus-visible')) show(el);
+  });
+  document.addEventListener('focusout', (event) => hide(event.target.closest?.(CANDIDATE)));
+  document.addEventListener('pointerdown', () => hide());
+  document.addEventListener('keydown', (event) => { if (event.key === 'Escape') hide(); });
+  window.addEventListener('scroll', () => hide(), true);
+}