@arcforgelabs/flow 2026.10.44 → 2026.10.45

package/npm-shrinkwrap.json

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

package/package.json

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

package/server/api/invoicing.js

@@ -1,5 +1,6 @@
 import { and, asc, desc, eq, ilike, inArray, isNull, or, sql } from 'drizzle-orm';
 import express from 'express';
+import { invoicePage, INVOICE_SORTS, normaliseInvoicesView } from '../ui/list-views.js';
 import { FlowError } from '../core/errors.js';
 import { createActionGuard } from '../integrations/call-guard.js';
 import {
@@ -165,6 +166,21 @@ function limitOf(raw, fallback, max) {
   return Math.min(n, max);
 }
 
+function offsetOf(raw) {
+  if (raw === undefined) return 0;
+  const n = Number(text(raw));
+  if (!Number.isInteger(n) || n < 0) throw invalid('offset must be a whole number from 0');
+  return n;
+}
+
+// The Filter chip's view, sent as JSON (list-views.js keeps only what it knows).
+function filterViewOf(raw) {
+  if (raw === undefined || text(raw) === '') return normaliseInvoicesView({});
+  let value;
+  try { value = JSON.parse(String(raw)); } catch { throw invalid('filter must be JSON'); }
+  return normaliseInvoicesView(value);
+}
+
 // A LIKE pattern that matches the text anywhere, with its wildcards escaped.
 const containing = (q) => `%${q.replace(/[\\%_]/g, (c) => `\\${c}`)}%`;
 
@@ -404,7 +420,20 @@ export function createInvoicingRouter({
       throw invalid(`status must be one of ${TABS.join(', ')}`);
     }
     const q = text(req.query.q);
+    // The list pages on the server, so it works with any number of invoices:
+    // the tab and the search pick rows, the Filter chip's view and the sort
+    // (job-view.js, the page's own rules) run over all of them, and one page
+    // goes back with the total.
     const limit = limitOf(req.query.limit, 200, 500);
+    const offset = offsetOf(req.query.offset);
+    const view = filterViewOf(req.query.filter);
+    const sort = text(req.query.sort) || null;
+    if (sort && !INVOICE_SORTS.includes(sort)) throw invalid(`sort must be one of ${INVOICE_SORTS.join(', ')}`);
+    const dir = text(req.query.dir) || 'asc';
+    if (!['asc', 'desc'].includes(dir)) throw invalid('dir must be asc or desc');
+    // The person's own day, for date filters such as This week.
+    const day = text(req.query.today) || new Date().toISOString().slice(0, 10);
+    if (!isRealDate(day)) throw invalid('today must be a date (yyyy-mm-dd)');
     // Each tab switch runs this, so the independent reads run side by side.
     const system = accounting();
     const sendMode = system
@@ -420,11 +449,25 @@ export function createInvoicingRouter({
       const pattern = containing(q);
       where.push(or(ilike(invoices.number, pattern), ilike(invoices.reference, pattern), ilike(contacts.name, pattern)));
     }
-    const rows = await db.select({ invoice: invoices, contactName: contacts.name }).from(invoices)
+    // First the few columns the filter and sort read, for every row; then
+    // the whole rows of the one page.
+    const light = (await db.select({
+      id: invoices.id, number: invoices.number, reference: invoices.reference, issueDate: invoices.issueDate,
+      createdAt: invoices.createdAt, totalCents: invoices.totalCents, contactName: contacts.name,
+    }).from(invoices)
       .leftJoin(contacts, eq(contacts.id, invoices.contactId))
       .where(and(...where))
-      .orderBy(desc(invoices.createdAt), desc(invoices.id))
-      .limit(limit);
+      .orderBy(desc(invoices.createdAt), desc(invoices.id)))
+      .map((row) => ({ ...row, problems: tabs.problems.get(row.id) ?? [] }));
+    const page = invoicePage(light, { view, sort, dir, offset, limit, today: day });
+    const pageIds = page.rows.map((r) => r.id);
+    const full = pageIds.length
+      ? await db.select({ invoice: invoices, contactName: contacts.name }).from(invoices)
+        .leftJoin(contacts, eq(contacts.id, invoices.contactId))
+        .where(and(eq(invoices.organisationId, organisationId), inArray(invoices.id, pageIds)))
+      : [];
+    const byId = new Map(full.map((r) => [r.invoice.id, r]));
+    const rows = pageIds.map((id) => byId.get(id)).filter(Boolean);
     const jobs = await jobsByInvoice(db, organisationId, rows.map((r) => r.invoice.id));
     const systems = work();
     res.json({
@@ -438,6 +481,13 @@ export function createInvoicingRouter({
         problems: tabs.problems.get(invoice.id) ?? [],
       })),
       counts: Object.fromEntries(TABS.map((t) => [t, tabs.ids[t].length])),
+      // The page: where it starts, its size, and every row the filter keeps.
+      offset,
+      limit,
+      total: page.total,
+      totalCents: page.totalCents,
+      // The Filter chip's Client choices: every client of the tab.
+      clients: [...new Set(light.map((r) => r.contactName).filter(Boolean))].sort((a, b) => a.localeCompare(b)),
       sendsTo: system?.name ?? null,
       sendMode: mode,
       // The Linked column: one icon for each connected system.

package/server/auth/people.js

@@ -2,7 +2,7 @@ import { and, asc, eq, isNull, ne, sql } from 'drizzle-orm';
 import { people, PERSON_ROLES } from '../db/schema.js';
 import { FlowError } from '../core/errors.js';
 import { isThemeFamily, normalizeAccent } from '../theme/themes.js';
-import { INVOICE_COLUMNS, normaliseJobsView, normaliseListView, RECONCILE_COLUMNS } from '../ui/job-view.js';
+import { INVOICE_COLUMNS, normaliseJobsView, normaliseListView, PRICE_COLUMNS, RECONCILE_COLUMNS } from '../ui/job-view.js';
 import { normaliseSavedViews, SAVED_VIEW_PAGES } from '../ui/list-views.js';
 import { isPlainEmail } from './settings.js';
 
@@ -60,10 +60,11 @@ function viewCheck(page) {
     case 'jobs': return normaliseJobsView;
     case 'invoices': return (view) => normaliseListView(view, INVOICE_COLUMNS);
     case 'reconcile': return (view) => normaliseListView(view, RECONCILE_COLUMNS);
+    case 'price-list': return (view) => normaliseListView(view, PRICE_COLUMNS);
     default: return null;
   }
 }
-const VIEW_PAGE_NAMES = ['jobs', 'invoices', 'reconcile'];
+const VIEW_PAGE_NAMES = ['jobs', 'invoices', 'reconcile', 'price-list'];
 
 // A person's saved views as Flow sends them: only the known pages, each
 // checked, so a view saved by an older Flow still loads.

package/server/ui/app.js

@@ -142,23 +142,26 @@ function roleSelect(value, attrs = {}) {
 
 let me = null;
 
-// The sidebar lists the views in this order, under their group's heading.
+// Where each view sits: the sidebar, in this order, daily work first (no
+// `place`); the sidebar's More menu (`place: 'more'`, `more` names its Lucide
+// icon); the account menu (`place: 'account'`). `sidebar: false` views open
+// by link and Search only.
 const VIEWS = {
-  jobs: { label: 'Jobs', icon: 'jobs', group: 'Work', render: (main) => renderJobs(main, ui()) },
-  invoices: { label: 'Invoices', icon: 'invoices', group: 'Work', render: (main, id) => (id ? renderInvoice(main, ui(), id) : renderInvoiceList(main, ui())) },
-  reconcile: { label: 'Reconcile', icon: 'reconcile', group: 'Work', render: (main, id) => renderReconcile(main, ui(), id) },
-  'invoicing-settings': { label: 'Rules', icon: 'rules', group: 'Settings', render: (main, id) => renderInvoicingSettings(main, ui(), id) },
-  automations: { label: 'Automations', icon: 'bolt', group: 'Settings', render: (main) => renderAutomations(main, ui()) },
-  'price-list': { label: 'Price list', icon: 'tag', group: 'Settings', render: (main, id) => (id === 'reconcile' ? renderPriceReconcile(main, ui()) : renderPriceList(main, ui())) },
-  'custom-fields': { label: 'Custom fields', icon: 'fields', group: 'Settings', render: (main) => renderCustomFields(main, ui()) },
-  people: { label: 'People', icon: 'people', group: 'Settings', ownerOnly: true, render: renderPeople },
-  integrations: { label: 'Integrations', icon: 'plug', group: 'Settings', ownerOnly: true, render: (main, id) => (id ? renderIntegration(main, id) : renderIntegrations(main)) },
+  jobs: { label: 'Jobs', icon: 'jobs', render: (main) => renderJobs(main, ui()) },
+  invoices: { label: 'Invoices', icon: 'invoices', render: (main, id) => (id ? renderInvoice(main, ui(), id) : renderInvoiceList(main, ui())) },
+  reconcile: { label: 'Reconcile', icon: 'reconcile', render: (main, id) => renderReconcile(main, ui(), id) },
+  'price-list': { label: 'Price list', icon: 'tag', render: (main, id) => (id === 'reconcile' ? renderPriceReconcile(main, ui()) : renderPriceList(main, ui())) },
+  'invoicing-settings': { label: 'Rules', icon: 'rules', render: (main, id) => renderInvoicingSettings(main, ui(), id) },
+  automations: { label: 'Automations', icon: 'bolt', place: 'more', more: 'zap', render: (main) => renderAutomations(main, ui()) },
+  'custom-fields': { label: 'Custom fields', icon: 'fields', place: 'more', more: 'form-input', render: (main) => renderCustomFields(main, ui()) },
+  integrations: { label: 'Integrations', icon: 'plug', place: 'more', more: 'plug', ownerOnly: true, render: (main, id) => (id ? renderIntegration(main, id) : renderIntegrations(main)) },
+  people: { label: 'People', icon: 'people', place: 'account', ownerOnly: true, render: renderPeople },
   // Not in the sidebar: "Manage account" in the account menu opens the same
   // Clerk profile. The page stays for links and Search.
   // Opened from the Xero integration page: Xero invoices against Flow's own.
-  'xero-import': { label: 'Xero import', icon: 'plug', group: 'Settings', sidebar: false, render: (main) => renderXeroImport(main, ui()) },
-  account: { label: 'Account', icon: 'person', group: 'Settings', sidebar: false, render: renderAccount },
-  appearance: { label: 'Appearance', icon: 'palette', group: 'Settings', render: renderAppearance },
+  'xero-import': { label: 'Xero import', icon: 'plug', sidebar: false, render: (main) => renderXeroImport(main, ui()) },
+  account: { label: 'Account', icon: 'person', sidebar: false, render: renderAccount },
+  appearance: { label: 'Appearance', icon: 'palette', place: 'account', render: renderAppearance },
 };
 
 // Line icons for the sidebar, drawn on a 24-unit grid in the text colour.
@@ -176,6 +179,7 @@ const ICON_PATHS = {
   flag: '<path d="M5 21V4M5 4h11l-2 4 2 4H5"/>',
   search: '<circle cx="11" cy="11" r="6.5"/><path d="M16 16l4.5 4.5"/>',
   sidebar: '<rect x="3" y="4" width="18" height="16" rx="2.5"/><path d="M9.5 4v16"/>',
+  more: '<circle cx="5" cy="12" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/>',
   palette: '<path d="M12 3a9 9 0 100 18c1.1 0 1.5-.8 1.5-1.6 0-1-.8-1.4-.8-2.4 0-.9.7-1.5 1.6-1.5H17a4 4 0 004-4c0-4.7-4-8.5-9-8.5z"/><circle cx="7.5" cy="11" r="1"/><circle cx="10" cy="7" r="1"/><circle cx="15" cy="7" r="1"/>',
 };
 
@@ -238,7 +242,7 @@ document.addEventListener('keydown', (event) => {
   }
 });
 document.addEventListener('click', (event) => {
-  if (!event.target.closest?.('.fx-side') || event.target.closest?.('[data-nav]')) closeMenu();
+  if (!event.target.closest?.('.fx-side') || event.target.closest?.('[data-nav]:not([data-nav="more"])')) closeMenu();
 });
 // Folded, a click on the sidebar's empty space opens it out again, as in
 // Claude. A click on a page, the account photo or Search still does its job.
@@ -266,15 +270,19 @@ document.addEventListener('keydown', (event) => {
 
 // "Report a problem" in Clerk's account menu, between "Manage account" and
 // "Sign out". Clerk mounts and unmounts the icon itself.
-function reportMenuItem(openReport) {
+function accountMenuItem(label, iconName, onClick) {
   return {
-    label: 'Report a problem',
-    onClick: () => { openReport().catch((error) => toast(error.message, 'danger')); },
-    mountIcon: (element) => element.replaceChildren(icon('flag')),
+    label,
+    onClick,
+    mountIcon: (element) => element.replaceChildren(icon(iconName)),
     unmountIcon: (element) => element.replaceChildren(),
   };
 }
 
+function reportMenuItem(openReport) {
+  return accountMenuItem('Report a problem', 'flag', () => { openReport().catch((error) => toast(error.message, 'danger')); });
+}
+
 // The page a person lands on after sign-in, and for / or an unknown path.
 // Invoices opens on its Ready tab. A home page can take this over later.
 const START_VIEW = 'invoices';
@@ -295,6 +303,8 @@ async function route() {
   for (const link of document.querySelectorAll('a[data-nav]')) {
     link.setAttribute('aria-current', link.dataset.nav === view ? 'page' : 'false');
   }
+  // More shows as current while one of its pages is open.
+  document.querySelector('[data-nav="more"]')?.setAttribute('aria-current', VIEWS[view].place === 'more' ? 'page' : 'false');
   main.replaceChildren();
   main.className = 'fx-main';
   document.title = `${VIEWS[view].label} · Flow`;
@@ -352,14 +362,17 @@ function renderShell() {
   document.body.dataset.state = 'signed-in';
   const nav = $('nav');
   const items = [];
-  let group = null;
+  const more = [];
   for (const [name, view] of Object.entries(VIEWS)) {
     if (view.ownerOnly && me?.person.role !== 'owner') continue;
-    if (view.sidebar === false) continue;
-    if (view.group && view.group !== group) items.push(h('span', { class: 'fx-nav__group' }, view.group));
-    group = view.group;
-    items.push(h('a', { href: `/${name}`, 'data-nav': name, 'data-label': view.label, onclick: navigate }, icon(view.icon), h('span', { class: 'fx-nav__label' }, view.label)));
+    if (view.sidebar === false || view.place === 'account') continue;
+    if (view.place === 'more') more.push({ icon: view.more, text: view.label, run: () => { closeMenu(); go(`/${name}`); } });
+    else items.push(h('a', { href: `/${name}`, 'data-nav': name, 'data-label': view.label, onclick: navigate }, icon(view.icon), h('span', { class: 'fx-nav__label' }, view.label)));
   }
+  // The rest of the setup pages, behind More (the shared ⋯ menu).
+  const [moreButton, morePanel] = rowMenu('More', more, { trigger: [icon('more'), h('span', { class: 'fx-nav__label' }, 'More')], className: 'fx-nav__more', align: 'start' });
+  Object.assign(moreButton.dataset, { nav: 'more', label: 'More' });
+  items.push(moreButton, morePanel);
   // "Report a problem" sits at the foot of the menu, above the account chip,
   // while Sentry and its report form are on (monitoring.js).
   const report = h('button', { type: 'button', class: 'fx-nav__report', 'data-nav': 'report', 'data-label': 'Report a problem', hidden: true },
@@ -376,7 +389,11 @@ function renderShell() {
   drawMenu();
   // The sidebar foot shows who is signed in: photo or initial, then the name
   // (the email when the account has no name). It opens the account menu.
-  const userButton = { afterSignOutUrl: '/sign-in', showName: true };
+  // People (owners) and Appearance live in the account menu.
+  const accountItems = Object.entries(VIEWS)
+    .filter(([, view]) => view.place === 'account' && (!view.ownerOnly || me?.person.role === 'owner'))
+    .map(([name, view]) => accountMenuItem(view.label, view.icon, () => go(`/${name}`)));
+  const userButton = { afterSignOutUrl: '/sign-in', showName: true, customMenuItems: accountItems };
   $('search').replaceChildren(icon('search'));
   $('search').onclick = search;
   mountClerk('userButton', $('user-button'), userButton);
@@ -389,7 +406,7 @@ function renderShell() {
       report.hidden = false;
       report.onclick = () => { openReport().catch((error) => toast(error.message, 'danger')); };
       unmountClerk($('user-button'));
-      mountClerk('userButton', $('user-button'), { ...userButton, customMenuItems: [reportMenuItem(openReport)] });
+      mountClerk('userButton', $('user-button'), { ...userButton, customMenuItems: [...accountItems, reportMenuItem(openReport)] });
     })
     .catch((error) => console.warn(`[monitoring] ${error.message}`));
   window.addEventListener('popstate', route);

package/server/ui/columns.js

@@ -1,8 +1,9 @@
 // A list's columns, as ClickUp's: drag a head's right edge to make the
 // column wider or narrower (never under its kind's minimum), drag a head
 // to move the column, and click or right-click a head for its menu (Move to
-// start, Move to end, Hide; + shows a hidden column again). Jobs, Invoices
-// and Reconcile build their tables here, so every list works the same.
+// start, Move to end, Hide; + shows a hidden column again). Jobs, Invoices,
+// Reconcile and the Price list build their tables here, so every list works
+// the same.
 //
 // The view a person keeps for a list (with their account, PUT
 // /api/me/views/:page) holds two keys from here:
@@ -25,11 +26,8 @@
 //   rows     the <tbody> nodes (rowCells builds a row's cells)
 //   lead     <th> nodes before the columns (the tick column)
 import { lucide } from '/assets/ui/custom-fields.js';
-import { MAX_WIDTH, minWidth, moveColumn, widthOf } from '/assets/ui/job-view.js';
+import { endWidth, LEAD_WIDTH, MAX_WIDTH, minWidth, moveColumn, TAIL_WIDTH, tableWidth, widthOf } from '/assets/ui/job-view.js';
 
-// The tick column at the start and the + column at the end.
-const LEAD_WIDTH = 44;
-const TAIL_WIDTH = 40;
 
 // A row's cells for the shown columns: a class per kind, the label for
 // the phone layout, the full text as the cell's name on hover.
@@ -110,23 +108,42 @@ export function columnTable(h, config) {
 
   function table({ columns, rows, lead = [], className = '' }) {
     const saved = widths();
-    // Each column keeps its own width: the table is as wide as its columns,
-    // never stretched to the page. Space left over stays empty at the right.
-    // A resize changes the table only; the tools stay put.
+    // Each column keeps its own width: never stretched to the page. As
+    // HubSpot's, the head and every row still run to the right edge: the
+    // end column (+ at its right) takes the space after the last column, so
+    // a row looks whole, not cut off. A resize changes the table only; the
+    // tools stay put.
     const cols = columns.map((c) => h('col', { style: { width: `${widthOf(c, saved)}px` } }));
     const leadCols = lead.map(() => h('col', { style: { width: `${LEAD_WIDTH}px` } }));
+    const endCol = h('col', { style: { width: `${TAIL_WIDTH}px` } });
     const tail = config.hidden ? h('th', { class: 'fx-th-add' }, h('button', {
       type: 'button', class: 'fx-th fx-th--add', 'aria-label': 'Show a column', title: 'Show a column', onclick: (event) => openMenu(null, event),
     }, '+')) : h('th', { class: 'fx-th-end', 'aria-hidden': 'true' });
     const heads = columns.map((c, n) => head(c, n));
     const node = h('table', { class: `fx-table fx-table--sized ${className}`.trim() },
-      h('colgroup', {}, leadCols, cols, h('col', { style: { width: `${TAIL_WIDTH}px` } })),
+      h('colgroup', {}, leadCols, cols, endCol),
       h('thead', {}, h('tr', {}, lead, heads, tail)),
       rows);
-    // The table is as wide as its columns; past the page it scrolls sideways.
-    const fit = () => { node.style.width = `${columns.reduce((sum, c) => sum + widthOf(c, widths()), 0) + lead.length * LEAD_WIDTH + TAIL_WIDTH}px`; };
+    const box = h('div', { class: 'fx-table-scroll' }, node);
+    // The width the columns need; past the window the table scrolls
+    // sideways. A browser shares spare width among fixed columns, so the
+    // end column is sized here, and again when the window changes size.
+    let need = tableWidth(columns, saved, lead.length);
+    const fit = () => {
+      const end = endWidth(need, box.getBoundingClientRect?.().width ?? 0);
+      endCol.style.width = `${end}px`;
+      node.style.width = `${need - TAIL_WIDTH + end}px`;
+    };
     fit();
-    return h('div', { class: 'fx-table-scroll' }, node);
+    if (typeof ResizeObserver === 'function') {
+      // Once the table has left the page (a redraw), stop watching.
+      let shown = false;
+      const watch = new ResizeObserver(() => {
+        if (box.isConnected) { shown = true; fit(); } else if (shown) watch.disconnect();
+      });
+      watch.observe(box);
+    }
+    return box;
 
     function head(c, n) {
       const button = h('button', {
@@ -167,12 +184,13 @@ export function columnTable(h, config) {
         grip.setPointerCapture(event.pointerId);
         const from = event.clientX;
         const start = col.getBoundingClientRect().width || widthOf(c, widths());
-        const base = node.getBoundingClientRect().width;
+        const base = need;
         let w = start;
         node.dataset.resizing = '';
         const move = (e) => {
           w = set(start + e.clientX - from);
-          node.style.width = `${base + w - start}px`;
+          need = base + w - start;
+          fit();
         };
         const up = () => {
           grip.removeEventListener('pointermove', move);

package/server/ui/flow.css

@@ -141,17 +141,16 @@ body:is([data-state="off"], [data-state="error"], [data-state="no-access"]) .fx-
 .fx-toggle__mark { display: none; }
 .fx-toggle__mark .fx-mark { display: block; }
 .fx-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; }
-.fx-nav__group { padding: 16px 10px 6px; color: var(--t-dim); font: var(--t-label-weight) var(--t-label-size)/1.3 var(--t-body); letter-spacing: var(--t-label-spacing); text-transform: var(--t-label-case); }
-.fx-nav__group:first-child { padding-top: 4px; }
-.fx-nav a, .fx-nav__report {
+.fx-nav a, .fx-nav__report, .fx-nav__more {
   display: flex; align-items: center; gap: 10px;
   padding: 8px 10px; border-radius: var(--t-radius);
   color: var(--t-text); font-weight: 500; font-size: 14px; text-decoration: none; white-space: nowrap;
 }
-.fx-nav a:hover, .fx-nav__report:hover { color: var(--t-strong); background: var(--fx-hover); }
-.fx-nav__report { margin-top: auto; border: 0; background: none; font: inherit; font-weight: 500; font-size: 14px; text-align: left; cursor: pointer; }
+.fx-nav a:hover, .fx-nav__report:hover, .fx-nav__more:hover { color: var(--t-strong); background: var(--fx-hover); }
+.fx-nav__report, .fx-nav__more { border: 0; background: none; font: inherit; font-weight: 500; font-size: 14px; text-align: left; cursor: pointer; }
+.fx-nav__report { margin-top: auto; }
 .fx-nav__report[hidden] { display: none; }
-.fx-nav a[aria-current="page"] { color: var(--t-accent); background: var(--t-accent-bg); font-weight: 650; box-shadow: inset 2px 0 0 var(--t-brand); }
+.fx-nav :is(a, .fx-nav__more)[aria-current="page"] { color: var(--t-accent); background: var(--t-accent-bg); font-weight: 650; box-shadow: inset 2px 0 0 var(--t-brand); }
 .fx-nav__count { margin-left: auto; color: var(--t-dim); font-size: 12px; font-weight: 700; }
 .fx-ico { display: inline-flex; flex: none; }
 .fx-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@@ -166,8 +165,7 @@ body:is([data-state="off"], [data-state="error"], [data-state="no-access"]) .fx-
   .fx-shell[data-folded] .fx-side :is(a, button, #user-button) { cursor: pointer; }
   .fx-shell[data-folded] .fx-side__head { flex-direction: column; gap: 10px; padding: 0 0 14px; }
   .fx-shell[data-folded] .fx-side__head .fx-brand { display: none; }
-  .fx-shell[data-folded] .fx-nav__group { height: 1px; margin: 10px 6px; padding: 0; overflow: hidden; background: var(--fx-line); color: transparent; }
-  .fx-shell[data-folded] :is(.fx-nav a, .fx-nav__report) { justify-content: center; padding: 9px 0; }
+  .fx-shell[data-folded] :is(.fx-nav a, .fx-nav__report, .fx-nav__more) { justify-content: center; padding: 9px 0; }
   .fx-shell[data-folded] .fx-nav__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
   .fx-shell[data-folded] .fx-side__end { flex-direction: column; padding: 12px 0 0; }
   .fx-shell[data-folded] #user-button { flex: none; }
@@ -730,18 +728,21 @@ th:hover > .fx-th-grip::after { background: var(--t-brd-hi); }
 .fx-table--sized[data-resizing] { cursor: col-resize; user-select: none; }
 .fx-table--sized .fx-tick-cell, .fx-table--sized .fx-th-add, .fx-table--sized .fx-c-end { overflow: visible; text-overflow: clip; }
 .fx-table--sized .fx-tick-cell { padding-right: 0; }
-/* + stays at the right edge while the table scrolls sideways. */
-.fx-table--sized .fx-th-add { position: sticky; right: 0; z-index: 1; padding-left: 0; padding-right: 12px; }
+/* The end column fills the row after the last column (columns.js), as
+   HubSpot's; + sits at its right edge and stays there while the table
+   scrolls sideways. */
+.fx-table--sized .fx-th-add { position: sticky; right: 0; z-index: 1; padding-left: 0; padding-right: 12px; text-align: right; }
 .fx-avatar--sm { width: 24px; height: 24px; font-size: 10px; }
 .fx-c-date time { font-variant-numeric: tabular-nums; }
 .fx-stage[data-rank="plain"] { --stage: var(--t-dim); }
-/* The board is one row of lanes (one per group), each about a phone wide.
-   Lanes share the width when they fit; more lanes scroll sideways inside
-   the board, never as a second row. On a wide, tall screen the board fills
+/* The board is one row of lanes (one per group), each a fixed phone width
+   (--fx-lane), as HubSpot's: lanes never stretch to fill a wide screen, so
+   the space past the last lane stays empty. More lanes scroll sideways
+   inside the board, never as a second row. On a wide, tall screen the board fills
    the page down to its bottom edge, the page itself does not scroll, and
    each lane scrolls inside itself (jobs.js sets fx-main--board while the
    board shows). */
-.fx-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(min(85vw, 272px), 1fr); gap: 12px; align-items: start; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: 4px; }
+.fx-board { --fx-lane: min(85vw, 272px); display: grid; grid-auto-flow: column; grid-auto-columns: var(--fx-lane); justify-content: start; gap: 12px; align-items: start; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: 4px; }
 .fx-board__col { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; padding: 10px 6px 6px 8px; border-radius: var(--t-radius-lg); background: var(--t-s1); }
 .fx-board__head { display: flex; flex: none; align-items: center; gap: 8px; min-width: 0; padding: 2px 4px 4px 2px; }
 .fx-board__sum { flex: none; margin-left: auto; color: var(--t-dim); font-size: 12px; font-variant-numeric: tabular-nums; }
@@ -1151,6 +1152,7 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
   .fx-table.fx-table--sized { width: 100% !important; min-width: 0; table-layout: auto; }
   .fx-table--sized td { white-space: normal; }
   .fx-table--sized colgroup { display: none; }
+  .fx-table--sized td.fx-c-end { display: none; }
   .fx-table, .fx-table tbody, .fx-table tr, .fx-table td { display: block; width: 100%; }
   .fx-table tr { padding: 12px 14px; border-bottom: 1px solid var(--fx-line-soft); }
   .fx-table td { padding: 4px 0; border: 0; }
@@ -1211,7 +1213,6 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-price__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 16px; }
 .fx-price__head .fx-search { margin: 0 0 6px; width: 260px; }
 @media (max-width: 560px) { .fx-price__head .fx-search { width: 100%; } }
-.fx-price__scroll { overflow-x: auto; border: 1px solid var(--fx-line); background: var(--t-paper); }
 .fx-price__table th { position: sticky; top: 0; z-index: 1; }
 .fx-price__table td { padding-top: 9px; padding-bottom: 9px; }
 .fx-price__table td.fx-num, .fx-price__table th.fx-num { text-align: right; white-space: nowrap; }
@@ -1464,6 +1465,19 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-pager__step:hover:not(:disabled) { background: var(--fx-hover); border-color: var(--fx-line); }
 .fx-pager__step:disabled { opacity: 0.35; cursor: default; }
 
+/* The pages of a long list, in the list window's foot bar (pager.js):
+   rows per page, the range, numbered pages. The page shown is filled. */
+.fx-pages { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; color: var(--t-dim); font-size: 13px; font-variant-numeric: tabular-nums; }
+.fx-pages__rows { display: inline-flex; align-items: center; gap: 6px; }
+.fx-pages__size { width: 76px; min-height: 28px; padding-block: 2px; font-size: 13px; }
+.fx-pages__range { color: var(--t-text); }
+.fx-pages__steps { display: inline-flex; align-items: center; gap: 4px; }
+.fx-pages__step, .fx-pages__num { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border: 1px solid var(--fx-line-soft); border-radius: 999px; background: transparent; color: var(--t-text); font: inherit; cursor: pointer; transition: background 120ms var(--fx-ease), border-color 120ms var(--fx-ease); }
+.fx-pages__step:hover:not(:disabled), .fx-pages__num:hover:not([aria-current]) { background: var(--fx-hover); border-color: var(--fx-line); }
+.fx-pages__step:disabled { opacity: 0.35; cursor: default; }
+.fx-pages__num[aria-current="page"] { background: var(--t-primary); border-color: var(--t-primary); color: var(--t-on-primary); cursor: default; }
+.fx-pages__gap { min-width: 16px; text-align: center; color: var(--t-mute); }
+
 /* New invoice from a job: a searchable list of jobs with no invoice. */
 .fx-dialog:has(.fx-pick__body) { width: min(620px, calc(100vw - 32px)); }
 .fx-pick__body { display: grid; gap: 12px; }

package/server/ui/invoicing.js

@@ -11,8 +11,9 @@ import { draftNote, sendModeNote } from '/assets/ui/invoice-notes.js';
 import { caseNumber } from '/assets/ui/job-board.js';
 import { jobChangeReview } from '/assets/ui/job-change.js';
 import { columnTable, rowCells, viewSaver } from '/assets/ui/columns.js';
-import { filterJobs, INVOICE_COLUMNS, normaliseListView } from '/assets/ui/job-view.js';
-import { INVOICE_FILTER_FIELDS, normaliseInvoicesView } from '/assets/ui/list-views.js';
+import { filterCount, filterJobs, INVOICE_COLUMNS, normaliseListView } from '/assets/ui/job-view.js';
+import { INVOICE_FILTER_FIELDS, invoiceFilterKind, invoiceValue, normaliseInvoicesView } from '/assets/ui/list-views.js';
+import { listPager, PAGE_SIZES } from '/assets/ui/pager.js';
 import { savedViews } from '/assets/ui/saved-views.js';
 import { findBox, today, viewBar } from '/assets/ui/view-bar.js';
 
@@ -114,28 +115,25 @@ const showDate = (iso) => (iso ? new Date(`${iso}T00:00:00`).toLocaleDateString(
 
 // ── The list ───────────────────────────────────────────────────────────────
 
-// The filter's fields: list-views.js (the server checks saved views with them).
+// The filter's fields and rules: list-views.js. The server checks saved
+// views with them and filters every invoice of a tab (GET /invoices).
 const FILTER_FIELDS = INVOICE_FILTER_FIELDS;
 const PROBLEM_OPS = { yes: 'Has one', no: 'Has none' };
 const FILTER_KEY = 'flow_invoice_filters';
-const filterKind = (field) => FILTER_FIELDS[field]?.kind ?? null;
-
-// An invoice's value for a filter field, as the filter compares it.
-export function invoiceValue(invoice, field) {
-  switch (field) {
-    case 'client': return invoice.contactName ?? null;
-    case 'number': return invoice.number ?? null;
-    case 'reference': return invoice.reference ?? null;
-    case 'date': return invoice.issueDate ?? invoice.createdAt?.slice(0, 10) ?? null;
-    case 'total': return invoice.totalCents == null ? null : invoice.totalCents / 100;
-    case 'problem': return (invoice.problems?.length ?? 0) > 0;
-    default: return null;
-  }
-}
+const SIZE_KEY = 'flow_invoice_page_size';
+const filterKind = invoiceFilterKind;
+export { invoiceValue };
 
 // The invoices a filter view keeps.
 export const keptInvoices = (invoices, view, now = today()) => filterJobs(invoices, view, { valueOf: invoiceValue, kindOf: filterKind, today: now });
 
+// Rows per page, kept on this device.
+function readSize() {
+  let size = null;
+  try { size = Number(localStorage.getItem(SIZE_KEY)); } catch { /* none kept */ }
+  return PAGE_SIZES.includes(size) ? size : 100;
+}
+
 function readFilters() {
   try { return normaliseInvoicesView(JSON.parse(localStorage.getItem(FILTER_KEY))); } catch { return normaliseInvoicesView(null); }
 }
@@ -149,6 +147,8 @@ 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(), view: readFilters(),
+    // The page of rows shown: the server filters and cuts it (GET /invoices).
+    offset: returning ? back?.offset ?? 0 : 0, limit: readSize(),
     columns: normaliseListView(ui.me?.views?.invoices, INVOICE_COLUMNS),
   };
   // The list's columns: resize, move, hide, kept with the account. A tab
@@ -171,17 +171,18 @@ export async function renderInvoiceList(main, ui) {
     label: 'Find a number, client or reference', value: state.q,
     oninput: (words) => {
       clearTimeout(timer);
-      timer = setTimeout(() => { state.q = words.trim(); load(); }, 200);
+      timer = setTimeout(() => { state.q = words.trim(); state.offset = 0; load(); }, 200);
     },
   });
   // The Filter chip: the same panel as on Jobs and Reconcile (view-bar.js).
-  // It filters the rows of the tab shown, on this device.
-  // A change to the filter: kept in this browser, and drawn.
+  // The server filters every invoice of the tab shown.
+  // A change to the filter: kept in this browser, and the first page loads.
   function setView(patch) {
     state.view = normaliseInvoicesView({ ...state.view, ...patch });
     try { localStorage.setItem(FILTER_KEY, JSON.stringify(state.view)); } catch { /* the page still works, it forgets */ }
     views.draw();
-    if (raw) draw(raw);
+    state.offset = 0;
+    if (raw) load();
   }
   // The person's named views (saved-views.js): their default opens on a
   // new visit.
@@ -189,12 +190,11 @@ export async function renderInvoiceList(main, ui) {
   const opening = views.opening();
   if (opening) state.view = normaliseInvoicesView(opening);
   views.draw();
-  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, icon: f.icon })),
     kindOf: filterKind,
     opsOf: (field) => (field === 'problem' ? PROBLEM_OPS : null),
-    choicesOf: (field) => (field === 'client' ? labels((raw?.invoices ?? []).map((i) => i.contactName)) : []),
+    choicesOf: (field) => (field === 'client' ? (raw?.clients ?? []).map((v) => ({ value: v, label: v })) : []),
     view: () => state.view,
     change: setView,
     first: 'client',
@@ -203,10 +203,22 @@ export async function renderInvoiceList(main, ui) {
   const controls = h('div', { class: 'fx-viewbar', role: 'group', 'aria-label': 'Filter' }, ...filterMenu.node);
   const host = h('div', { class: 'fx-panel' }, h('div', { class: 'fx-skeleton' }));
   const bulk = bulkBar(ui);
+  // The pages, in the foot under the rows (pager.js).
+  const pager = listPager(h, {
+    label: 'Invoice pages',
+    change: ({ offset, limit }) => {
+      if (limit !== state.limit) { try { localStorage.setItem(SIZE_KEY, String(limit)); } catch { /* it forgets */ } }
+      Object.assign(state, { offset, limit });
+      state.ticked.clear();
+      // A new page opens at its first row.
+      frame.body.scrollTop = 0;
+      load();
+    },
+  });
   const context = await flow('/api/invoicing/context').catch(() => ({ canIssue: false }));
   let body = null;
   let raw = null;
-  const openTab = (id) => { state.status = id; state.ticked.clear(); sessionStorage.setItem('flow_invoice_tab', id); load(); };
+  const openTab = (id) => { state.status = id; state.offset = 0; state.ticked.clear(); sessionStorage.setItem('flow_invoice_tab', id); load(); };
   const alerts = alertStrip(ui, 'invoices', { onTab: openTab });
   // 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
@@ -217,6 +229,8 @@ export async function renderInvoiceList(main, ui) {
   });
   const [title, ...top] = head.nodes;
   const frame = listFrame(main, host);
+  // The pages sit in the window's foot bar, beside the count.
+  frame.tools.append(pager.element);
   main.append(title, alerts.element, ...top, frame.element, bulk.element);
 
   const plural = (n, one, many) => `${n} ${n === 1 ? one : many}`;
@@ -373,7 +387,11 @@ export async function renderInvoiceList(main, ui) {
   const seen = new Map();
   let asked = 0;
   async function load() {
-    const query = new URLSearchParams({ status: state.status, ...(state.q ? { q: state.q } : {}) });
+    const query = new URLSearchParams({
+      status: state.status, offset: String(state.offset), limit: String(state.limit), today: today(),
+      ...(state.q ? { q: state.q } : {}),
+      ...(filterCount(state.view, filterKind) ? { filter: JSON.stringify(state.view) } : {}),
+    });
     const key = String(query);
     const mine = ++asked;
     if (seen.has(key)) {
@@ -414,14 +432,22 @@ export async function renderInvoiceList(main, ui) {
   async function draw(answer) {
     raw = answer;
     filterMenu.draw();
-    body = { ...answer, invoices: keptInvoices(answer.invoices, state.view) };
+    body = answer;
+    // A page past the end (rows went to another tab): show the last one.
+    if (!answer.invoices.length && answer.total && answer.offset) {
+      state.offset = Math.max(0, Math.floor((answer.total - 1) / state.limit) * state.limit);
+      load();
+      return;
+    }
+    pager.draw({ offset: answer.offset ?? 0, limit: answer.limit ?? state.limit, total: answer.total ?? answer.invoices.length });
     const shown = new Set(body.invoices.map((i) => i.id));
-    frame.count(plural(body.invoices.length, 'invoice', 'invoices'));
+    const total = answer.total ?? body.invoices.length;
+    frame.count(`${total.toLocaleString('en-AU')} ${total === 1 ? 'invoice' : 'invoices'}${total ? ` · ${formatCents(answer.totalCents ?? 0)}` : ''}`);
     for (const id of state.ticked) if (!shown.has(id)) state.ticked.delete(id);
     drawTabs(body.counts);
     drawBar();
     if (!body.invoices.length) {
-      host.replaceChildren(h('p', { class: 'fx-empty' }, answer.invoices.length
+      host.replaceChildren(h('p', { class: 'fx-empty' }, filterCount(state.view, filterKind)
         ? 'No invoice in this tab passes the filter.'
         : state.q
         ? 'No invoice matches that search.'
@@ -429,7 +455,7 @@ export async function renderInvoiceList(main, ui) {
       return;
     }
     // The invoice page steps through this list, in this order (navBar).
-    saveNav({ tab: state.status, q: state.q, ids: body.invoices.map((i) => i.id) });
+    saveNav({ tab: state.status, q: state.q, offset: state.offset, ids: body.invoices.map((i) => i.id) });
     const open = (href) => { saveNav({ ...readNav(), scrollY: window.scrollY, frameY: frame.body.scrollTop }); go(href); };
     const link = (href, label) => h('a', { class: 'fx-strong', href, onclick: (event) => { event.preventDefault(); event.stopPropagation(); open(href); } }, label);
     const showProblem = state.status === 'pending';

package/server/ui/job-view.js

@@ -418,6 +418,24 @@ export function widthOf(column, widths) {
   return Number.isFinite(saved) ? Math.round(Math.min(MAX_WIDTH, Math.max(minWidth(column.kind), saved))) : startWidth(column.kind);
 }
 
+// A list table's columns: the tick column at the start, the end column
+// (+) at least this wide.
+export const LEAD_WIDTH = 44;
+export const TAIL_WIDTH = 40;
+
+// The width a list table needs for its columns, with the end column at
+// its least.
+export function tableWidth(columns, widths, lead = 0) {
+  return columns.reduce((sum, c) => sum + widthOf(c, widths), 0) + lead * LEAD_WIDTH + TAIL_WIDTH;
+}
+
+// The end column's width: the room left after the other columns, so the
+// head and rows reach the window's right edge (as HubSpot's), never under
+// TAIL_WIDTH. A window not drawn yet (width 0) gets TAIL_WIDTH.
+export function endWidth(need, room) {
+  return Math.max(TAIL_WIDTH, Math.floor(room) - (need - TAIL_WIDTH));
+}
+
 // Saved widths as Flow keeps them: known-looking ids, whole pixels in range.
 // The minimum per kind applies when a width is drawn (widthOf), since the
 // server does not know a custom column's kind.
@@ -456,11 +474,14 @@ export function inOrder(columns, ids) {
 export const INVOICE_COLUMNS = Object.freeze({
   number: 'Number', client: 'Client', reference: 'Reference', date: 'Date', total: 'Total', status: 'Status', linked: 'Linked',
 });
+export const PRICE_COLUMNS = Object.freeze({
+  code: 'Code', name: 'Name', price: 'Price', tax: 'Tax',
+});
 export const RECONCILE_COLUMNS = Object.freeze({
   kind: 'Type', client: 'Client', detail: 'Detail', date: 'Date', total: 'Total', possible: 'Possible',
 });
 
-// A person's view of a list with set columns (Invoices, Reconcile): the
+// A person's view of a list with set columns (Invoices, Reconcile, Price list): the
 // shown columns in order (every one when none is saved) and their widths.
 export function normaliseListView(input, columns) {
   const value = input && typeof input === 'object' && !Array.isArray(input) ? input : {};

package/server/ui/kit.js

@@ -208,9 +208,10 @@ let rowMenus = 0;
 
 // A row's ⋯ menu, as on the Custom fields page. The menu lines up with the
 // button's right edge; `align: 'start'` lines it up with its left edge.
-export function rowMenu(label, items, { align = 'end' } = {}) {
+// `trigger` swaps the ⋯ icon for the given contents (the sidebar's More).
+export function rowMenu(label, items, { trigger = null, className = 'fx-cfm__more', align = 'end' } = {}) {
   const id = `fx-row-menu-${++rowMenus}`;
-  const button = h('button', { class: 'fx-cfm__more', type: 'button', 'aria-label': label, popovertarget: id, 'aria-haspopup': 'menu', 'aria-expanded': 'false' }, lucide(h, 'ellipsis'));
+  const button = h('button', { class: className, type: 'button', 'aria-label': label, popovertarget: id, 'aria-haspopup': 'menu', 'aria-expanded': 'false' }, trigger ?? lucide(h, 'ellipsis'));
   const panel = h('div', { class: 'fx-pop', id, popover: 'auto', role: 'menu' });
   panel.addEventListener('toggle', (event) => {
     button.setAttribute('aria-expanded', String(event.newState === 'open'));

package/server/ui/list-views.js

@@ -3,10 +3,12 @@
 // Filter, Columns), and one can be the person's default, which opens when
 // they go to the page. No DOM: the server checks a saved list with the same
 // rules the page uses (server/auth/people.js).
-import { cleanFilterView, normaliseJobsView } from './job-view.js';
+import { cleanFilterView, filterJobs, normaliseJobsView } from './job-view.js';
 
 // The Invoices filter's fields (invoicing.js). The tabs are the status, so
-// Status is not here.
+// Status is not here. The page shows the chip (view-bar.js); the server keeps
+// the rows (GET /api/invoicing/invoices), so a filter reaches every invoice
+// of a tab.
 export const INVOICE_FILTER_FIELDS = {
   client: { label: 'Client', kind: 'choice', icon: 'building-2' },
   number: { label: 'Number', kind: 'text', icon: 'hash' },
@@ -16,6 +18,46 @@ export const INVOICE_FILTER_FIELDS = {
   problem: { label: 'Problem', kind: 'check', icon: 'triangle-alert' },
 };
 
+export const invoiceFilterKind = (field) => INVOICE_FILTER_FIELDS[field]?.kind ?? null;
+
+// An invoice's value for a filter field or a sort, as they compare it. A
+// draft has no issue date: it uses the day it was made.
+export function invoiceValue(invoice, field) {
+  switch (field) {
+    case 'client': return invoice.contactName ?? null;
+    case 'number': return invoice.number ?? null;
+    case 'reference': return invoice.reference ?? null;
+    case 'date': return invoice.issueDate ?? (invoice.createdAt ? new Date(invoice.createdAt).toISOString().slice(0, 10) : null);
+    case 'total': return invoice.totalCents == null ? null : invoice.totalCents / 100;
+    case 'problem': return (invoice.problems?.length ?? 0) > 0;
+    default: return null;
+  }
+}
+
+// What the Invoices list sorts by (a column head). No sort is newest first.
+export const INVOICE_SORTS = Object.freeze(['number', 'client', 'reference', 'date', 'total']);
+
+// One page of an invoice list: the Filter view keeps rows, the sort orders
+// them (an empty value last, either way), then `offset` and `limit` cut the
+// page. `total` and `totalCents` are of every kept row. The rows come in
+// newest first; that order breaks ties.
+export function invoicePage(invoices, { view, sort = null, dir = 'asc', offset = 0, limit = 100, today }) {
+  const kept = filterJobs(invoices, view, { valueOf: invoiceValue, kindOf: invoiceFilterKind, today });
+  const sign = dir === 'desc' ? -1 : 1;
+  const ordered = INVOICE_SORTS.includes(sort)
+    ? kept.map((invoice, i) => [invoice, invoiceValue(invoice, sort), i]).sort(([, x, i], [, y, j]) => {
+      if (x == null || y == null) return x == null && y == null ? i - j : (x == null) - (y == null);
+      const order = typeof x === 'number' ? x - y : String(x).localeCompare(String(y), 'en', { numeric: true });
+      return order ? order * sign : i - j;
+    }).map(([invoice]) => invoice)
+    : kept;
+  return {
+    rows: ordered.slice(offset, offset + limit),
+    total: kept.length,
+    totalCents: kept.reduce((sum, i) => sum + (i.totalCents ?? 0), 0),
+  };
+}
+
 // The Reconcile filter's fields (reconcile.js). Reconcile lists jobs and
 // invoices, so it has both lists' fields; a job's own field (Practitioner,
 // a custom field) skips invoice rows, so it never hides them.

package/server/ui/monitoring.js

@@ -17,15 +17,46 @@ function loadScript({ src, integrity }) {
   });
 }
 
-// "Notify me": the form's email field (Sentry's own words) starts with the
-// signed-in person's email. A report sent with an address asks to hear back;
-// Flow tags it notify=yes, so the support desk sees it on the task. A person
-// who clears the field sends notify=no.
-// Sentry's form has no tick box of its own; this keeps to its stock options.
-export function tagNotify(event) {
+// "Request a response": a tick box under the form's email field, off by
+// default. The email field (Sentry's own words) starts with the signed-in
+// person's email, but an address alone does not ask for a reply. A report
+// sent with the box ticked and an address is tagged notify=yes, so the
+// support desk replies (fixed, planned or won't fix). Every other report
+// sends notify=no. Sentry's form has no tick box of its own (SDK 11.4.0),
+// so Flow adds one to it (addResponseBox).
+export function tagNotify(event, wantsResponse = false) {
   if (event?.type !== 'feedback') return;
   const email = String(event.contexts?.feedback?.contact_email ?? '').trim();
-  event.tags = { ...event.tags, notify: email ? 'yes' : 'no' };
+  event.tags = { ...event.tags, notify: wantsResponse && email ? 'yes' : 'no' };
+}
+
+export const RESPONSE_LABEL = 'Request a response';
+
+// The tick box goes under the email field inside the form's shadow root, so
+// flow.css cannot reach it: its look comes from the form's own variables,
+// which flow.css sets from the --t-* tokens (#sentry-feedback). Ticked, the
+// email is required. No email field (or no form yet): no box.
+const RESPONSE_STYLE = `
+.form__response { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; cursor: pointer; }
+.form__response input { margin: 0; width: 16px; height: 16px; accent-color: var(--accent-background); cursor: pointer; }`;
+function addResponseBox(root, onChange) {
+  const email = root?.querySelector('input[name="email"]:not([type="hidden"])');
+  if (!email || root.querySelector('.form__response')) return Boolean(email);
+  const style = document.createElement('style');
+  style.textContent = RESPONSE_STYLE;
+  const box = document.createElement('input');
+  box.type = 'checkbox';
+  box.name = 'response';
+  box.addEventListener('change', () => {
+    email.required = box.checked;
+    onChange(box.checked);
+  });
+  const label = document.createElement('label');
+  label.className = 'form__response';
+  label.append(box, RESPONSE_LABEL);
+  (email.closest('label') ?? email).after(label);
+  root.append(style);
+  return true;
 }
 
 // A path as a pattern: each id in it becomes ":id", so every invoice's page
@@ -101,7 +132,9 @@ export async function startMonitoring({ flow, person }) {
     beforeSendSpan: scrubSpan,
     initialScope: { tags: config.tags ?? {} },
   });
-  Sentry.getClient()?.on('beforeSendFeedback', tagNotify);
+  // Read when the report is sent: the tick box of the form open now.
+  let wantsResponse = false;
+  Sentry.getClient()?.on('beforeSendFeedback', (event) => tagNotify(event, wantsResponse));
   // Who reported or met the error, so the lab can follow up.
   Sentry.setUser({ id: person.id, email: person.email, username: person.name || undefined });
   const feedback = config.feedback ? Sentry.getFeedback() : null;
@@ -112,8 +145,18 @@ export async function startMonitoring({ flow, person }) {
   let form = null;
   return async () => {
     form?.removeFromDom();
+    wantsResponse = false;
     form = await feedback.createForm();
     form.appendToDom();
     form.open();
+    // The form draws itself a moment after open(); add the tick box once its
+    // email field is there.
+    const root = document.getElementById('sentry-feedback')?.shadowRoot;
+    const onChange = (checked) => { wantsResponse = checked; };
+    if (!addResponseBox(root, onChange) && root) {
+      const watch = new MutationObserver(() => { if (addResponseBox(root, onChange)) watch.disconnect(); });
+      watch.observe(root, { childList: true, subtree: true });
+      setTimeout(() => watch.disconnect(), 5000);
+    }
   };
 }

package/server/ui/pager.js

@@ -0,0 +1,67 @@
+// The pages of a long list, in the list window's foot bar (listFrame), as
+// HubSpot's: rows per page, "1–100 of 1,204", and numbered pages between
+// previous and next. The server cuts the page (GET /api/invoicing/invoices
+// takes offset and limit), so a list works with any number of rows.
+//
+// listPager(h, { label, sizes, change }) answers { element, draw(page) }.
+// page = { offset, limit, total }. change({ offset, limit }) asks for a
+// page; a new size starts again at the first page. One page or none hides
+// the page numbers; the size stays, so a person can show more per page.
+// Issue #220 brings the pager over one record (.fx-pager) into this file.
+
+export const PAGE_SIZES = Object.freeze([25, 50, 100, 200]);
+
+const chevron = (d) => `<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path d="${d}" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+const PREV = chevron('M14.5 6l-6 6 6 6');
+const NEXT = chevron('M9.5 6l6 6-6 6');
+const count = new Intl.NumberFormat('en-AU');
+
+// The page numbers to show: the first, the last, and two each side of the
+// one shown, with '…' for a gap. Pages count from 1.
+export function pageNumbers(at, pages) {
+  if (pages <= 7) return Array.from({ length: pages }, (_, n) => n + 1);
+  const near = new Set([1, pages, at - 1, at, at + 1]);
+  if (at <= 3) [2, 3, 4].forEach((n) => near.add(n));
+  if (at >= pages - 2) [pages - 3, pages - 2, pages - 1].forEach((n) => near.add(n));
+  const list = [...near].filter((n) => n >= 1 && n <= pages).sort((a, b) => a - b);
+  return list.flatMap((n, i) => (i && n - list[i - 1] > 1 ? ['…', n] : [n]));
+}
+
+// "1–100 of 1,204", or "0 of 0".
+export function pageRange({ offset, limit, total }) {
+  if (!total) return '0 of 0';
+  return `${count.format(offset + 1)}–${count.format(Math.min(offset + limit, total))} of ${count.format(total)}`;
+}
+
+export function listPager(h, { label = 'Pages', sizes = PAGE_SIZES, change }) {
+  const element = h('nav', { class: 'fx-pages', 'aria-label': label });
+  const icon = (markup) => { const span = h('span', { 'aria-hidden': 'true' }); span.innerHTML = markup; return span; };
+
+  function draw({ offset = 0, limit = sizes[0], total = 0 }) {
+    const pages = Math.max(1, Math.ceil(total / limit));
+    const at = Math.min(pages, Math.floor(offset / limit) + 1);
+    const go = (n) => change({ offset: (n - 1) * limit, limit });
+    const size = h('select', {
+      class: 'fx-select fx-pages__size', 'aria-label': 'Rows per page', title: 'Rows per page',
+      onchange: (event) => change({ offset: 0, limit: Number(event.target.value) }),
+    }, sizes.map((n) => h('option', { value: String(n), ...(n === limit ? { selected: true } : {}) }, String(n))));
+    const step = (n, markup, name) => h('button', {
+      type: 'button', class: 'fx-pages__step', 'aria-label': name, title: name,
+      ...(n < 1 || n > pages ? { disabled: true } : {}), onclick: () => go(n),
+    }, icon(markup));
+    element.replaceChildren(
+      h('label', { class: 'fx-pages__rows' }, 'Rows', size),
+      h('span', { class: 'fx-pages__range' }, pageRange({ offset, limit, total })),
+      pages > 1 ? h('span', { class: 'fx-pages__steps' },
+        step(at - 1, PREV, 'Previous page'),
+        pageNumbers(at, pages).map((n) => (n === '…'
+          ? h('span', { class: 'fx-pages__gap', 'aria-hidden': 'true' }, '…')
+          : h('button', {
+            type: 'button', class: 'fx-pages__num', 'aria-label': `Page ${n}`,
+            ...(n === at ? { 'aria-current': 'page' } : {}), onclick: () => { if (n !== at) go(n); },
+          }, String(n)))),
+        step(at + 1, NEXT, 'Next page')) : '');
+  }
+
+  return { element, draw };
+}

package/server/ui/price-list.js

@@ -7,6 +7,8 @@
 // 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`.
 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 { reconcileRows } from '/assets/ui/price-match.js';
 
 const DOCS = 'https://github.com/arcforgelabs/flow/blob/main/docs/PRICE_LIST.md';
@@ -16,6 +18,15 @@ const LINE_PRICES = [
   { value: 'list', label: 'Price list' },
 ];
 
+// 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 },
+  name: { kind: 'client', 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 },
+};
+
 const money = (cents) => (cents === null || cents === undefined ? '' : `$${(cents / 100).toFixed(2)}`);
 const toCents = (text) => {
   const value = Number(String(text ?? '').replace(/[$,\s]/g, ''));
@@ -26,6 +37,18 @@ export async function renderPriceList(main, ui) {
   const { h, flow, toast, notice, dialog, pageHeader, 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 saveView = viewSaver(ui, 'price-list');
+  const heads = columnTable(h, {
+    order: () => view.columns,
+    widths: () => view.widths,
+    change: (patch) => {
+      view = normaliseListView({ ...view, ...patch }, PRICE_COLUMNS);
+      saveView(view);
+      draw();
+    },
+    hidden: () => Object.keys(PRICE_COLUMNS).filter((id) => !view.columns.includes(id)).map((id) => ({ id, label: PRICE_COLUMNS[id] })),
+  });
   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');
@@ -160,15 +183,12 @@ export async function renderPriceList(main, ui) {
     const tabs = h('div', { class: 'fx-tabs', role: 'tablist' }, [['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); } },
-      h('td', { class: 'fx-price__code' }, item.code),
-      h('td', {}, item.name),
-      h('td', { class: 'fx-num' }, money(item.unitAmountCents)),
-      h('td', { class: 'fx-dim' }, TAX_LABELS[item.taxCode] ?? item.taxCode));
+      rowCells(h, columns, item),
+      h('td', { class: 'fx-c-end' }));
     const table = shown.length
-      ? h('div', { class: 'fx-price__scroll' }, h('table', { class: 'fx-table fx-table--rows fx-price__table' },
-        h('thead', {}, h('tr', {}, h('th', {}, 'Code'), h('th', {}, 'Name'), h('th', { class: 'fx-num' }, 'Price'), h('th', {}, 'Tax'))),
-        h('tbody', {}, shown.map(itemRow))))
+      ? 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,

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']);
-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']);
+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', 'pager.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';