@arcforgelabs/flow 2026.10.51 → 2026.10.52

package/server/ui/nav-pins.js

@@ -5,6 +5,7 @@
 
 export const NAV_PAGES = Object.freeze([
   'jobs',
+  'captures',
   'invoices',
   'contacts',
   'reconcile',
@@ -17,11 +18,12 @@ export const NAV_PAGES = Object.freeze([
 
 export const NAV_LOCKED = Object.freeze(['jobs', 'invoices']);
 
-// Today's sidebar, before a person has chosen: daily work (Jobs, Invoices,
-// Contacts, Reconcile), Price list and Rules. Automations, Custom fields
+// Today's sidebar, before a person has chosen: daily work (Jobs, Capture,
+// Invoices, Contacts, Reconcile), Price list and Rules. Automations, Custom fields
 // and Integrations start in More.
 export const NAV_DEFAULT = Object.freeze([
   'jobs',
+  'captures',
   'invoices',
   'contacts',
   'reconcile',

package/server/ui/price-list.js

@@ -1,27 +1,34 @@
-// Settings, Price list (/price-list; server/core/price-list.js,
-// docs/PRICE_LIST.md). Flow's own codes and prices, which work with no
-// integration connected: one table row per code, with its price and tax, and
-// the line price setting below. Edit opens a dialog with the code's fields, its
-// links and, when something differs, Mark resolved. While an integration with
-// its own price list is on, Reconcile (price-reconcile.js) says how many
-// records need a person and opens the work. Everyone can read it; an owner or
-// admin changes it. The caller passes in app.js's shared pieces as `ui`.
+// Price list (/price-list; server/core/price-list.js, docs/PRICE_LIST.md).
+// Flow's own codes and prices, which work with no integration connected.
+// Laid out like Jobs and Invoices: the shared list head (Active / Archived
+// tabs, Group, Sort, Filter, saved views, Find) over the list window, one
+// row per code. A row opens a dialog with the code's fields, its links and,
+// when something differs, Mark resolved. The head's icons open Reconcile
+// (price-reconcile.js, while an integration with its own price list is on)
+// and the price list's settings. Everyone can read it; an owner or admin
+// changes it. The caller passes in app.js's shared pieces as `ui`.
 import { alertStrip } from '/assets/ui/alerts.js';
-import { columnTable, rowCells, viewSaver } from '/assets/ui/columns.js';
-import { normaliseListView, PRICE_COLUMNS } from '/assets/ui/job-view.js';
+import { columnTable, groupHead, rowCells, viewSaver } from '/assets/ui/columns.js';
+import { lucide } from '/assets/ui/custom-fields.js';
+import { filterJobs, groupJobs, PRICE_COLUMNS, sortJobs } from '/assets/ui/job-view.js';
+import { normalisePriceView, PRICE_FIELDS, priceValue } from '/assets/ui/list-views.js';
 import { reconcileRows } from '/assets/ui/price-match.js';
+import { savedViews } from '/assets/ui/saved-views.js';
+import { findBox, today, viewBar } from '/assets/ui/view-bar.js';
 
-const DOCS = 'https://github.com/arcforgelabs/flow/blob/main/docs/PRICE_LIST.md';
 const TAX_LABELS = { GST: 'GST', GST_FREE: 'GST free' };
+// Where an invoice line takes its price (the line mapping routine's
+// `linePrice`): the job's own amount, or this list's price.
 const LINE_PRICES = [
-  { value: 'work', label: 'Work system amount' },
+  { value: 'work', label: 'Job price' },
   { value: 'list', label: 'Price list' },
 ];
+const NUMBER_WORDS = ['Low to high', 'High to low'];
 
 // The list's columns (columns.js): each keeps its own width, saved with the
 // person's account; + shows a hidden one again.
 const COLUMN_DEFS = {
-  code: { kind: 'number', className: 'fx-price__code', cell: (item) => item.code },
+  code: { kind: 'number', phone: 'meta', className: 'fx-price__code', cell: (item) => item.code },
   name: { kind: 'client', phone: 'title', cell: (item) => item.name },
   price: { kind: 'total', num: true, cell: (item) => money(item.unitAmountCents) },
   tax: { kind: 'case', className: 'fx-dim', cell: (item) => TAX_LABELS[item.taxCode] ?? item.taxCode },
@@ -34,31 +41,79 @@ const toCents = (text) => {
 };
 
 export async function renderPriceList(main, ui) {
-  const { h, flow, toast, notice, dialog, pageHeader, me, settingRow } = ui;
+  const { h, flow, toast, notice, dialog, listHead, listFrame, me } = ui;
   const disabled = !['owner', 'admin'].includes(me?.person.role);
-  const host = h('div', { class: 'fx-price' }, h('div', { class: 'fx-skeleton' }));
-  let view = normaliseListView(me?.views?.['price-list'], PRICE_COLUMNS);
+  const host = h('div', { class: 'fx-panel' }, h('div', { class: 'fx-skeleton' }));
+  // The person's view (list-views.js): columns, Group, Sort and Filter,
+  // kept with their account.
+  let view = normalisePriceView(me?.views?.['price-list']);
   const saveView = viewSaver(ui, 'price-list');
+  function change(patch) {
+    view = normalisePriceView({ ...view, ...patch });
+    saveView(view);
+    views.draw();
+    if (data) draw();
+  }
+  const views = savedViews(ui, { page: 'price-list', current: () => view, apply: change });
+  const opening = views.opening();
+  if (opening) view = normalisePriceView(opening);
+  views.draw();
+
+  let data = null;
+  let query = '';
+  let tab = 'active';
+  let opened = new URLSearchParams(location.search).get('code');
+  const systemName = (id) => data?.systems.find((s) => s.id === id)?.name ?? id;
+  const taxName = (code) => TAX_LABELS[code] ?? code;
+
+  // Group, Sort and Filter: the same chips as on Jobs (view-bar.js).
+  const kindOf = (field) => PRICE_FIELDS[field]?.kind ?? null;
+  const fieldList = (keep = () => true) => Object.entries(PRICE_FIELDS).filter(([, f]) => keep(f)).map(([value, f]) => ({ value, label: f.label, icon: f.icon }));
+  const bar = viewBar(h);
+  const groupMenu = bar.groupMenu({ options: () => fieldList((f) => f.group), view: () => view, change });
+  const sortMenu = bar.sortMenu({
+    options: fieldList, view: () => view, change,
+    dirWords: (by) => (kindOf(by) === 'number' ? NUMBER_WORDS : ['A to Z', 'Z to A']),
+    nameOf: (by) => PRICE_FIELDS[by].label, empty: 'No sort. Codes show A to Z.',
+  });
+  const filterMenu = bar.filterMenu({
+    fields: fieldList, kindOf,
+    choicesOf: (field) => (field === 'tax' ? Object.entries(TAX_LABELS).map(([value, label]) => ({ value, label }))
+      : field === 'linked' ? (data?.systems ?? []).map((s) => ({ value: s.id, label: s.name })) : []),
+    view: () => view, change, first: 'tax', empty: 'No filters. Every code shows.',
+  });
+  const controls = h('div', { class: 'fx-viewbar', role: 'group', 'aria-label': 'Group, sort and filter' }, ...groupMenu.node, ...sortMenu.node, ...filterMenu.node);
+  const drawControls = () => {
+    groupMenu.set(view.group === 'none' ? 'Group' : `Group: ${PRICE_FIELDS[view.group].label}`, view.group !== 'none', view.group === 'none' ? null : () => change({ group: 'none' }));
+    sortMenu.draw();
+    filterMenu.draw();
+  };
+
+  // The list's columns (columns.js): each keeps its own width, saved with
+  // the person's account; + shows a hidden one again; a head sorts.
   const heads = columnTable(h, {
     order: () => view.columns,
     widths: () => view.widths,
-    change: (patch) => {
-      view = normaliseListView({ ...view, ...patch }, PRICE_COLUMNS);
-      saveView(view);
-      draw();
-    },
+    change,
     hidden: () => Object.keys(PRICE_COLUMNS).filter((id) => !view.columns.includes(id)).map((id) => ({ id, label: PRICE_COLUMNS[id] })),
+    sorting: { sortOf: (id) => (PRICE_FIELDS[id] ? id : null), sorts: () => view.sorts, change, dirWords: (by) => (kindOf(by) === 'number' ? NUMBER_WORDS : ['A to Z', 'Z to A']) },
   });
-  const addButton = h('button', { class: 'fx-btn fx-btn--primary', type: 'button', disabled }, 'Add code');
-  const reconcileButton = h('button', { class: 'fx-btn fx-btn--ghost', type: 'button', hidden: true, onclick: () => ui.go('/price-list/reconcile') }, 'Reconcile');
-  const alerts = alertStrip(ui, 'price-list');
-  main.append(pageHeader('Price list', { help: { href: DOCS, label: 'How the price list works' }, actions: [reconcileButton, addButton] }), alerts.element, host);
 
-  let data = null;
-  let query = '';
-  let tab = 'active';
-  let opened = new URLSearchParams(location.search).get('code');
-  const systemName = (id) => data.systems.find((s) => s.id === id)?.name ?? id;
+  const tabs = h('div', { class: 'fx-tabs', role: 'tablist' });
+  const find = findBox(h, { label: 'Find a code or name', value: query, oninput: (words) => { query = words; draw(); } });
+  const icon = (name, label, onclick) => h('button', { class: 'fx-btn fx-btn--ghost fx-btn--icon', type: 'button', 'aria-label': label, title: label, onclick }, lucide(h, name));
+  const reconcileButton = icon('git-compare-arrows', 'Reconcile', () => ui.go('/price-list/reconcile'));
+  reconcileButton.hidden = true;
+  const settingsButton = icon('settings', 'Price list settings', () => openSettings());
+  const addButton = h('button', { class: 'fx-btn fx-btn--primary', type: 'button', disabled, title: disabled ? 'Only an owner or admin can add a code' : null, onclick: () => edit(null) }, lucide(h, 'plus'), 'New');
+  const alerts = alertStrip(ui, 'price-list');
+  const listTop = listHead('Price list', {
+    actions: [reconcileButton, settingsButton, addButton],
+    views: views.element, start: tabs, controls, controlsAt: 'end', end: find.element, line: true, sticky: true,
+  });
+  const [title, ...top] = listTop.nodes;
+  const frame = listFrame(main, host);
+  main.append(title, alerts.element, ...top, frame.element);
 
   async function send(path, method, payload, done = 'Saved.') {
     try {
@@ -71,8 +126,6 @@ export async function renderPriceList(main, ui) {
     }
   }
 
-  const row = (label, hint, control) => settingRow({ label, hint, control });
-
   const findingText = (f) => {
     const name = systemName(f.system);
     if (f.kind === 'price') return `${name} price is ${money(f.other)}. Flow price is ${money(f.flow)}.`;
@@ -148,55 +201,70 @@ export async function renderPriceList(main, ui) {
     return load();
   }
 
-  async function linePriceRow() {
-    const select = h('select', { class: 'fx-select', 'aria-label': 'Line price from', disabled }, LINE_PRICES.map((p) => h('option', { value: p.value }, p.label)));
+  // The price list's settings: one dialog from the head's settings icon.
+  async function openSettings() {
+    const select = h('select', { class: 'fx-select', 'aria-label': 'Invoice line price', disabled }, LINE_PRICES.map((p) => h('option', { value: p.value }, p.label)));
+    let saved = 'work';
     try {
       const { automations } = await flow('/api/invoicing/automations');
-      select.value = automations.find((a) => a.key === 'map_lines')?.config.linePrice ?? 'work';
-    } catch {
-      select.value = 'work';
-    }
-    let saved = select.value;
-    select.addEventListener('change', async () => {
-      select.disabled = true;
-      if (await send('/api/invoicing/automations/map_lines', 'PUT', { config: { linePrice: select.value } })) saved = select.value;
-      else select.value = saved;
-      select.disabled = disabled;
+      saved = automations.find((a) => a.key === 'map_lines')?.config.linePrice ?? 'work';
+    } catch { /* the default shows */ }
+    select.value = saved;
+    const ok = await dialog({
+      title: 'Price list settings',
+      body: h('div', { class: 'fx-fields' }, h('label', { class: 'fx-field' }, h('span', { class: 'fx-label' }, 'Invoice line price'), select)),
+      confirm: 'Save',
     });
-    return row('Line price from', 'Where an invoice line takes its price.', select);
+    if (ok && select.value !== saved) await send('/api/invoicing/automations/map_lines', 'PUT', { config: { linePrice: select.value } });
   }
 
+  // A group's name: a choice's label, or Yes / No.
+  const groupLabel = (item) => {
+    const value = priceValue(item, view.group);
+    if (view.group === 'tax') return taxName(value);
+    if (view.group === 'linked') return value.length ? value.map(systemName).join(', ') : 'Not linked';
+    return value ? 'Differs' : 'Agrees';
+  };
+
   function draw() {
+    drawControls();
     const words = query.trim().toLowerCase();
     const live = data.items.filter((i) => !i.archivedAt);
     const archived = data.items.filter((i) => i.archivedAt);
-    const shown = (tab === 'archived' ? archived : live).filter((i) => !words || `${i.code} ${i.name}`.toLowerCase().includes(words));
+    const kept = filterJobs(tab === 'archived' ? archived : live, view, { valueOf: priceValue, kindOf, late: null, today: today() })
+      .filter((i) => !words || `${i.code} ${i.name}`.toLowerCase().includes(words));
+    const shown = sortJobs(kept, view, (item, by) => {
+      const value = priceValue(item, by);
+      return typeof value === 'string' ? value.toLowerCase() : value;
+    });
     const todo = data.systems.length ? reconcileRows(data).length : 0;
     reconcileButton.hidden = !data.systems.length;
-    reconcileButton.replaceChildren('Reconcile', todo ? h('span', { class: 'fx-tabs__count', 'data-tone': 'warn' }, String(todo)) : null);
-    reconcileButton.title = todo ? `${todo} records need a person` : 'Every record has a code, and every price agrees';
-
-    const search = h('input', { class: 'fx-input fx-search', type: 'search', placeholder: 'Find a code', value: query, 'aria-label': 'Find a code' });
-    search.addEventListener('input', () => { query = search.value; draw(); search.focus(); search.setSelectionRange(query.length, query.length); });
-    const tabs = h('div', { class: 'fx-tabs', role: 'tablist' }, [['active', 'Active', live.length], ['archived', 'Archived', archived.length]].map(([id, label, count]) => h('button', {
+    reconcileButton.title = todo ? `Reconcile: ${todo} to check` : 'Reconcile';
+    frame.count(`${shown.length} ${shown.length === 1 ? 'code' : 'codes'}`);
+    tabs.replaceChildren(...[['active', 'Active', live.length], ['archived', 'Archived', archived.length]].map(([id, label, count]) => h('button', {
       type: 'button', role: 'tab', 'aria-selected': String(tab === id), onclick: () => { tab = id; draw(); },
     }, label, h('span', { class: 'fx-tabs__count' }, String(count)))));
-    const columns = view.columns.map((id) => ({ id, label: PRICE_COLUMNS[id], ...COLUMN_DEFS[id] }));
-    const itemRow = (item) => h('tr', { onclick: () => edit(item), tabindex: '0', onkeydown: (event) => { if (event.key === 'Enter') edit(item); } },
-      rowCells(h, columns, item),
-      h('td', { class: 'fx-c-end' }));
-    const table = shown.length
-      ? h('div', { class: 'fx-panel' }, heads.table({ className: 'fx-table--rows fx-price__table', columns, rows: h('tbody', {}, shown.map(itemRow)) }))
-      : h('p', { class: 'fx-empty' }, words ? 'No code matches.' : tab === 'archived' ? 'No archived codes.' : 'No codes yet. Add the first one.');
-    const sections = [
-      disabled ? notice('Only an owner or admin can change these.', 'info') : null,
-      h('div', { class: 'fx-toolbar fx-price__head' }, tabs, search),
-      table,
-    ];
-    const settings = h('section', { class: 'fx-set fx-price__settings' }, h('h2', { class: 'fx-set__title' }, 'Invoice lines'), h('div', { class: 'fx-skeleton' }));
-    linePriceRow().then((r) => settings.replaceChildren(settings.firstChild, r));
-    sections.push(settings);
-    host.replaceChildren(...sections.filter(Boolean));
+
+    if (!shown.length) {
+      host.replaceChildren(h('p', { class: 'fx-empty' }, words || view.groups.length ? 'No code matches.' : tab === 'archived' ? 'No archived codes.' : 'No codes yet.'));
+    } else {
+      const columns = view.columns.map((id) => ({ id, label: PRICE_COLUMNS[id], ...COLUMN_DEFS[id] }));
+      const itemRow = (item) => h('tr', { class: 'fx-row-link', tabindex: '0', onclick: () => edit(item), onkeydown: (event) => { if (event.key === 'Enter') edit(item); } },
+        rowCells(h, columns, item),
+        h('td', { class: 'fx-c-end' }));
+      const groups = view.group === 'none' ? [{ label: null, jobs: shown }] : groupJobs(shown, [], groupLabel)
+        .sort((x, y) => x.label.localeCompare(y.label) * (view.groupDir === 'desc' ? -1 : 1));
+      const head = ({ label, jobs }) => groupHead(h, {
+        label: `${label}, ${jobs.length} ${jobs.length === 1 ? 'code' : 'codes'}`,
+        badge: h('span', { class: 'fx-strong' }, label, ' ', h('span', { class: 'fx-tabs__count' }, String(jobs.length))),
+        open: !folded.has(label), onFold: () => { if (folded.has(label)) folded.delete(label); else folded.add(label); draw(); },
+        span: columns.length + 1,
+      });
+      host.replaceChildren(heads.table({
+        className: 'fx-table--rows fx-price__table', columns,
+        rows: groups.map((g) => h('tbody', {}, g.label == null ? null : head(g), g.label != null && folded.has(g.label) ? null : g.jobs.map(itemRow))),
+      }));
+    }
     // Opened from Reconcile's "Edit code": that code's dialog, once.
     if (opened) {
       const item = data.items.find((i) => i.id === opened);
@@ -205,6 +273,8 @@ export async function renderPriceList(main, ui) {
       if (item) edit(item);
     }
   }
+  // Folded groups, for this visit.
+  const folded = new Set();
 
   async function load() {
     try {
@@ -216,6 +286,5 @@ export async function renderPriceList(main, ui) {
     draw();
   }
 
-  addButton.addEventListener('click', () => edit(null));
   await load();
 }

package/server/ui/routes.js

@@ -12,6 +12,7 @@ import { themeStylesheet } from '../theme/themes.js';
 //   /assets/ui/<file>        Flow's components (flow.css) and page scripts
 //   /assets/fonts/<pkg>/…    the families' faces (server/theme/font-families.js)
 //   /assets/icons/<name>.svg one Lucide icon (lucide-static, ISC), for any page
+//   /assets/icons/tags.json  each Lucide icon's words, for the icon picker
 // Only the files named here are served. They change only with a release, so
 // browsers may keep them for an hour.
 
@@ -21,7 +22,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']);
-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', 'contacts.js', 'xero-contact.js', 'jobs.js', 'job-board.js', 'reconcile.js', 'xero-import.js', 'xero-usage.js', 'xero-usage-model.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', 'mobile.js', 'person.js', 'pager.js', 'nav-pins.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', 'contacts.js', 'xero-contact.js', 'jobs.js', 'job-board.js', 'reconcile.js', 'xero-import.js', 'xero-usage.js', 'xero-usage-model.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', 'mobile.js', 'person.js', 'captures.js', 'capture-fields.js', 'pager.js', 'nav-pins.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';
@@ -58,6 +59,8 @@ export function createUiAssetsRouter({ rateLimitPerMinute = 600 } = {}) {
     if (!ICON_FILE.test(req.params.file)) return next();
     sendNamed(res, next, iconDir, req.params.file);
   });
+  // Each icon's words, for the icon picker's search (kit.js iconPicker).
+  router.get('/assets/icons/tags.json', (_req, res, next) => sendNamed(res, next, dirname(iconDir), 'tags.json'));
 
   for (const name of FONT_PACKAGES) {
     const dir = dirname(require.resolve(`@fontsource-variable/${name}/LICENSE`));

package/server/ui/saved-views.js

@@ -116,6 +116,8 @@ export function savedViews(ui, { page, current, apply }) {
         }, 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);
     });
+    // A tab list needs tabs: with no saved view yet it is a plain group.
+    element.setAttribute('role', tabs.length ? 'tablist' : 'group');
     element.replaceChildren(...[
       ...tabs,
       saved.list.length < MAX_SAVED_VIEWS ? h('button', { type: 'button', class: 'fx-views__add', title: 'Save as a view', onclick: addView }, lucide(h, 'plus'), 'View') : null,

package/server/ui/view-bar.js

@@ -1,6 +1,6 @@
 // The view bar over a list: chips that open a small panel (Group, Sort,
 // Filter, Columns), as on ClickUp. Every list page builds its chips here, so
-// they look and work the same: Jobs (jobs.js) and Reconcile (reconcile.js).
+// they look and work the same: Jobs, Invoices, Reconcile and the Price list.
 //
 // viewBar(h) answers the parts:
 //   menu(icon, build, { rows, clearLabel })  a chip, its × and its panel.
@@ -9,6 +9,7 @@
 //   option(text, checked, onclick, role, icon)  a row in a panel, with a tick.
 //   title, choose, bin, addButton, rowsFoot, clearAll  the parts of a rows
 //     panel: a title, rows of selects with a bin, a foot with Add and Clear.
+//   groupMenu(config), sortMenu(config)  the Group and Sort chips (below).
 //   filterMenu(config)  the Filter chip, as ClickUp's: groups of rows of
 //     field, operator and value, And / Or in a group and between groups,
 //     "Add nested filter", "Add filter" and "Clear all" (job-view.js has
@@ -161,6 +162,64 @@ export function viewBar(h) {
     pop.style.left = `${Math.round(left)}px`;
   }
 
+  // ── Group by ──
+  // One row: what to group by, the group order, and a bin that takes the
+  // groups away when `clearable()` (Jobs' board always has lanes). The page
+  // names the chip with set(), as only it knows its group's name.
+  //   options()  [{ value, label } | { group, options }]
+  //   view()     { group, groupDir }; group 'none' is no groups
+  function groupMenu({ options, view, change, clearable = () => true }) {
+    return menu(ICONS.group, (redraw) => {
+      const { group, groupDir } = view();
+      const none = group === 'none';
+      return [
+        title('Group by'),
+        h('div', { class: 'fx-rows' }, h('div', { class: 'fx-rows__row fx-rows__row--group' },
+          choose('Group by', none ? '' : group, [...(none ? [{ value: '', label: 'Choose…', disabled: true }] : []), ...options()], (value) => { change({ group: value }); redraw(); }),
+          choose('Group order', groupDir, [{ value: 'asc', label: 'Ascending' }, { value: 'desc', label: 'Descending' }], (value) => { change({ groupDir: value }); redraw(); }, { disabled: none }),
+          clearable() && !none ? bin('Remove the grouping', () => { change({ group: 'none' }); redraw(); }) : h('span', { class: 'fx-rows__gap' }))),
+      ];
+    }, { rows: true, clearLabel: 'Remove the grouping' });
+  }
+
+  // ── Sort ──
+  // Rows of sorts, each applied in turn; a list's column heads sort too.
+  //   options()   [{ value, label } | { group, options }]
+  //   view()      { sorts: [{ by, dir }] }
+  //   dirWords(by)  the two directions' words, as ['A to Z', 'Z to A']
+  //   nameOf(by)  the chip's name for a sort
+  function sortMenu({ options, view, change, dirWords, nameOf, empty = 'No sort.' }) {
+    const setSorts = (sorts) => change({ sorts });
+    const control = menu(ICONS.sort, (redraw) => {
+      const { sorts } = view();
+      const unused = options().flatMap((o) => o.options ?? [o]).filter((o) => !sorts.some((s) => s.by === o.value));
+      return [
+        title('Sort'),
+        sorts.length ? h('div', { class: 'fx-rows' }, sorts.map((s, i) => {
+          const [up, down] = dirWords(s.by);
+          const others = sorts.filter((_, n) => n !== i).map((x) => x.by);
+          const shown = options().map((o) => (o.group ? { ...o, options: o.options.filter((x) => !others.includes(x.value)) } : o)).filter((o) => o.group || !others.includes(o.value));
+          return h('div', { class: 'fx-rows__row fx-rows__row--sort' },
+            h('span', { class: 'fx-rows__lead' }, i ? 'then' : 'Sort by'),
+            choose('Sort by', s.by, shown, (by) => { setSorts(sorts.map((x, n) => (n === i ? { by, dir: x.dir } : x))); redraw(); }),
+            choose('Order', s.dir, [{ value: 'asc', label: up }, { value: 'desc', label: down }], (dir) => { setSorts(sorts.map((x, n) => (n === i ? { ...x, dir } : x))); redraw(); }),
+            bin('Remove this sort', () => { setSorts(sorts.filter((_, n) => n !== i)); redraw(); }));
+        })) : h('p', { class: 'fx-rows__empty' }, empty),
+        rowsFoot(
+          sorts.length < 5 && unused.length ? addButton('Add sort', () => { setSorts([...sorts, { by: unused[0].value, dir: 'asc' }]); redraw(); }) : h('span'),
+          sorts.length ? clearAll(() => { setSorts([]); redraw(); }) : null),
+      ];
+    }, { rows: true, clearLabel: 'Clear the sort' });
+    // The chip names the sort that is on.
+    const draw = () => {
+      const { sorts } = view();
+      const [first] = sorts;
+      control.set(sorts.length > 1 ? `Sort · ${sorts.length}` : first ? `Sort: ${nameOf(first.by)} ${first.dir === 'desc' ? '↓' : '↑'}` : 'Sort', sorts.length > 0,
+        sorts.length ? () => setSorts([]) : null);
+    };
+    return { ...control, draw };
+  }
+
   // ── Filters ──
   // As ClickUp's: groups of rows of field, operator and value, with a bin on
   // each row. A group's second row has And / Or for the rows in it; the
@@ -329,7 +388,7 @@ export function viewBar(h) {
     return { ...control, draw };
   }
 
-  return { menu, option, title, choose, bin, addButton, rowsFoot, clearAll, filterMenu };
+  return { menu, option, title, choose, bin, addButton, rowsFoot, clearAll, groupMenu, sortMenu, filterMenu };
 }
 
 // A list's own search: a round search icon in the view bar that opens into a