@arcforgelabs/flow 2026.10.45 → 2026.10.47

package/server/ui/monitoring.js

@@ -4,6 +4,13 @@
 // GET /api/monitoring says so and gives the project's public DSN. The SDK
 // comes from Sentry's CDN, pinned and checked against its integrity hash.
 // With the integration off, nothing loads and there is no "Report a problem".
+//
+// Replay (SENTRY_REPLAY, on by default): the SDK keeps the last minute of the
+// page in the browser's memory and sends it only with a report or a browser
+// error, so a report shows the open menu or hover that the click on "Report a
+// problem" closed. Flow shows customers' and patients' names, addresses and
+// prices: a replay keeps the page's shape, the pointer and the clicks, never
+// its words.
 
 function loadScript({ src, integrity }) {
   return new Promise((resolve, reject) => {
@@ -89,6 +96,36 @@ export function scrubSpan(span) {
   return span;
 }
 
+// Elements a replay never shows: frames, canvases and embedded objects, and
+// links that carry an address, a number or a query.
+const REPLAY_BLOCK = ['iframe', 'canvas', 'embed', 'object', 'a[href^="mailto:" i]', 'a[href^="tel:" i]', 'a[href^="sms:" i]', 'a[href*="?"]'];
+// Attributes that can carry a name; masked like the text.
+const REPLAY_MASKED_ATTRIBUTES = ['title', 'placeholder', 'aria-label', 'aria-description', 'alt', 'download', 'value', 'data-value'];
+// What a replay keeps of a clicked element.
+const KEPT_NODE_ATTRIBUTES = new Set(['id', 'class', 'role']);
+const withoutQuery = (value) => (typeof value === 'string' ? value.replace(/[?#].*$/, '') : value);
+
+// One event of a replay's recording, before it is kept. A click names its
+// element by CSS path, and the path can quote an attribute's value: the
+// values go, and of the element only its id, class and role stay. A page's
+// address keeps its path, never its query string.
+export function scrubRecordingEvent(event) {
+  const payload = event?.data?.payload;
+  if (!payload || typeof payload !== 'object') return event;
+  const next = { ...payload };
+  if (typeof next.category === 'string' && next.category.startsWith('ui.')) {
+    if (typeof next.message === 'string') next.message = next.message.replace(/\[[^\]]*\]/g, '');
+    const node = next.data?.node;
+    if (node) {
+      const attributes = Object.fromEntries(Object.entries(node.attributes ?? {}).filter(([name]) => KEPT_NODE_ATTRIBUTES.has(name)));
+      next.data = { ...next.data, node: { ...node, attributes, textContent: '' } };
+    }
+  }
+  if (next.category === 'navigation' && next.data) next.data = { ...next.data, from: withoutQuery(next.data.from), to: withoutQuery(next.data.to) };
+  if (typeof next.description === 'string') next.description = withoutQuery(next.description);
+  return { ...event, data: { ...event.data, payload: next } };
+}
+
 /** Resolves to a function that opens the "Report a problem" form, or null. */
 export async function startMonitoring({ flow, person }) {
   const config = await flow('/api/monitoring');
@@ -113,6 +150,17 @@ export async function startMonitoring({ flow, person }) {
     submitButtonLabel: 'Send report',
     successMessageText: 'Thank you. Your report is sent.',
   })] : [];
+  if (config.replay && Sentry.replayIntegration) {
+    integrations.push(Sentry.replayIntegration({
+      maskAllText: true,
+      maskAllInputs: true,
+      blockAllMedia: true,
+      maskAttributes: REPLAY_MASKED_ATTRIBUTES,
+      block: REPLAY_BLOCK,
+      networkDetailAllowUrls: [],
+      beforeAddRecordingEvent: scrubRecordingEvent,
+    }));
+  }
   // Traces: page loads, moves between pages and each click's wait, with the
   // calls to Flow's server joined to the server's own trace. Only when the
   // installation set a share above 0 (SENTRY_TRACES_SAMPLE_RATE).
@@ -129,6 +177,9 @@ export async function startMonitoring({ flow, person }) {
     sendDefaultPii: false,
     integrations,
     tracesSampleRate,
+    // Replay: never a whole visit, only the minute before a report or error.
+    replaysSessionSampleRate: 0,
+    replaysOnErrorSampleRate: config.replay ? 1 : 0,
     beforeSendSpan: scrubSpan,
     initialScope: { tags: config.tags ?? {} },
   });

package/server/ui/nav-pins.js

@@ -0,0 +1,41 @@
+// Which sidebar pages a person has pinned. Stored with the account in
+// people.views.nav (PUT /api/me/views/nav). No table of its own.
+// Jobs and Invoices stay pinned: a request that leaves them out is saved
+// with them put back. A page Flow does not know is dropped.
+
+export const NAV_PAGES = Object.freeze([
+  'jobs',
+  'invoices',
+  'reconcile',
+  'price-list',
+  'invoicing-settings',
+  'automations',
+  'custom-fields',
+  'integrations',
+]);
+
+export const NAV_LOCKED = Object.freeze(['jobs', 'invoices']);
+
+// Today's sidebar, before a person has chosen: daily work, Price list and
+// Rules. Automations, Custom fields and Integrations start in More.
+export const NAV_DEFAULT = Object.freeze([
+  'jobs',
+  'invoices',
+  'reconcile',
+  'price-list',
+  'invoicing-settings',
+]);
+
+export function normaliseNavPins(input) {
+  const source = Array.isArray(input?.pinned) ? input.pinned : [];
+  const chosen = new Set(NAV_LOCKED);
+  for (const name of source) if (NAV_PAGES.includes(name)) chosen.add(name);
+  return { pinned: NAV_PAGES.filter((name) => chosen.has(name)) };
+}
+
+// No saved choice yet: the default sidebar. A saved choice is checked.
+export function navPinsFromViews(input) {
+  const value = input && typeof input === 'object' ? input : {};
+  if (!value.nav) return { pinned: [...NAV_DEFAULT] };
+  return normaliseNavPins(value.nav);
+}

package/server/ui/page.js

@@ -71,20 +71,125 @@ ${body}
 `;
 }
 
-/** A one-message page, such as the end of connecting Xero. */
-export function messagePage({ title, text, defaultFamily, tone = 'info' }) {
+// Mode labels on the connected callback card (issue #211). Sandbox is the
+// Demo Company; replay is for development and CI.
+const MODE_LABELS = Object.freeze({ live: 'Live', sandbox: 'Demo', replay: 'Replay' });
+
+function modeLabel(mode) {
+  if (mode == null || mode === '') return '';
+  const key = String(mode).toLowerCase();
+  return MODE_LABELS[key] ?? String(mode).replace(/^./, (c) => c.toUpperCase());
+}
+
+function lucideIcon(name) {
+  return `<span class="fx-lucide" style="--icon: url(/assets/icons/${escapeHtml(name)}.svg)" aria-hidden="true"></span>`;
+}
+
+/**
+ * A one-message page, such as the end of connecting an integration.
+ *
+ * Optional `integration` ({ name, logo }) shows Flow's mark beside the
+ * maker's logo. Optional `organisation` and `mode` become a status line.
+ * On success, `autoReturnSeconds` (default 5 when tone is success and an
+ * integration is named) starts a polite countdown and returns to Flow; set
+ * it to 0 or false to keep the person on the page. Failure never auto-returns.
+ */
+export function messagePage({
+  title,
+  text,
+  defaultFamily,
+  tone = 'info',
+  integration = null,
+  organisation = null,
+  mode = null,
+  autoReturnSeconds,
+  href = '/',
+}) {
+  const safeHref = typeof href === 'string' && href.startsWith('/') && !href.startsWith('//') ? href : '/';
+  const logo = integration?.logo && /^[a-z0-9][a-z0-9._-]*\.svg$/i.test(integration.logo) ? integration.logo : null;
+  const integrationName = integration?.name ? String(integration.name) : '';
+  const showMarks = Boolean(logo || integrationName);
+  const resultIcon = tone === 'success' ? 'check-circle' : tone === 'danger' ? 'x-circle' : null;
+  const org = organisation != null && String(organisation).trim() ? String(organisation).trim() : '';
+  const modeText = modeLabel(mode);
+  const statusParts = [org, modeText].filter(Boolean);
+  const returnSeconds = autoReturnSeconds === false || autoReturnSeconds === 0
+    ? 0
+    : tone === 'success' && showMarks
+      ? Math.max(1, Math.min(30, Number(autoReturnSeconds) || 5))
+      : 0;
+
+  const marks = showMarks
+    ? `<div class="fx-message__marks" aria-hidden="true">
+      <span class="fx-logo fx-logo--lg fx-message__flow">${FLOW_MARK}</span>
+      <span class="fx-message__plus">+</span>
+      <span class="fx-logo fx-logo--lg">${logo
+        ? `<img src="/assets/ui/logos/${escapeHtml(logo)}" alt="">`
+        : lucideIcon('plug')}</span>
+      ${resultIcon ? `<span class="fx-message__result" data-tone="${escapeHtml(tone)}">${lucideIcon(resultIcon)}</span>` : ''}
+    </div>`
+    : resultIcon
+      ? `<div class="fx-message__marks fx-message__marks--solo" aria-hidden="true">
+      <span class="fx-message__result" data-tone="${escapeHtml(tone)}">${lucideIcon(resultIcon)}</span>
+    </div>`
+      : '';
+
+  const status = statusParts.length
+    ? `<p class="fx-message__status"><span class="fx-status" data-tone="${escapeHtml(tone === 'danger' ? 'danger' : 'success')}">${escapeHtml(statusParts.join(' · '))}</span></p>`
+    : '';
+
+  const returnLine = returnSeconds
+    ? `<p class="fx-message__return" hidden aria-live="polite" data-return-after="${returnSeconds}" data-return-href="${escapeHtml(safeHref)}"></p>`
+    : '';
+
+  // Clean the OAuth query from the address. On success only, count down and
+  // return to Flow. Without JavaScript the Back button is enough.
+  const cleanScript = showMarks || returnSeconds
+    ? `<script>try{history.replaceState(null,'',location.pathname)}catch(e){}</script>`
+    : '';
+  const returnScript = returnSeconds
+    ? `<script>
+(function () {
+  var el = document.querySelector('[data-return-after]');
+  if (!el) return;
+  var left = Number(el.getAttribute('data-return-after')) || 0;
+  var href = el.getAttribute('data-return-href') || '/';
+  if (left < 1) return;
+  el.hidden = false;
+  function say(n) {
+    el.textContent = n === 1 ? 'Going back to Flow in 1 second' : 'Going back to Flow in ' + n + ' seconds';
+  }
+  say(left);
+  var timer = setInterval(function () {
+    left -= 1;
+    if (left <= 0) {
+      clearInterval(timer);
+      location.assign(href);
+      return;
+    }
+    say(left);
+  }, 1000);
+})();
+</script>`
+    : '';
+
   return renderPage({
     title,
     defaultFamily,
     bodyClass: 'fx-centre',
     scripts: ['/assets/ui/appearance.js'],
     body: `<main class="fx-message">
-  <a class="fx-brand" href="/">${FLOW_MARK}<span>Flow</span></a>
+  <a class="fx-brand" href="${escapeHtml(safeHref)}">${FLOW_MARK}<span>Flow</span></a>
   <section class="fx-card fx-message__card" data-tone="${escapeHtml(tone)}">
+    ${marks}
     <h1 class="fx-title">${escapeHtml(title)}</h1>
+    ${status}
     <p>${escapeHtml(text)}</p>
-    <a class="fx-btn" href="/">Back to Flow</a>
+    ${returnLine}
+    <a class="fx-btn" href="${escapeHtml(safeHref)}">Back to Flow</a>
   </section>
-</main>`,
+</main>
+${cleanScript}
+${returnScript}`,
   });
 }

package/server/ui/pager.js

@@ -1,13 +1,23 @@
-// 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.
+// Two pagers live here:
 //
-// 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.
+// listPager — 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.
+//
+// pager — ".fx-pager" over one record opened from a list: "← Back", "n of N",
+// previous and next. pager(h, { label, back, … }) answers { element, draw }.
+// draw({ count, prev, next, prevLabel, nextLabel }) fills the count and
+// steps; omit draw (or draw with steps: false) for Back only, as when an
+// invoice is not yet in the list. Invoices, Reconcile and Price list ›
+// Reconcile use it (issue #220).
+
+import { applyPhoneRule } from './mobile.js';
 
 export const PAGE_SIZES = Object.freeze([25, 50, 100, 200]);
 
@@ -16,6 +26,43 @@ 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 bar over one record: Back, optional "n of N", previous and next.
+export function pager(h, { label = 'Records', back }) {
+  const backBtn = h('button', { class: 'fx-pager__back', type: 'button', onclick: back }, '← Back');
+  const element = h('nav', { class: 'fx-pager', 'aria-label': label }, backBtn);
+
+  function draw({
+    count: text = '',
+    prev = null,
+    next = null,
+    prevLabel = 'Previous',
+    nextLabel = 'Next',
+    steps = true,
+  } = {}) {
+    if (!steps) {
+      element.replaceChildren(backBtn);
+      return;
+    }
+    const step = (go, name, markup) => {
+      const button = h('button', {
+        class: 'fx-pager__step', type: 'button',
+        'aria-label': name, title: name,
+        ...(!go ? { disabled: true } : { onclick: go }),
+      });
+      button.innerHTML = markup;
+      return button;
+    };
+    element.replaceChildren(
+      backBtn,
+      h('span', { class: 'fx-pager__count' }, text),
+      h('span', { class: 'fx-pager__steps' },
+        step(prev, prevLabel, PREV),
+        step(next, nextLabel, NEXT)));
+  }
+
+  return { element, draw };
+}
+
 // 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) {
@@ -34,7 +81,7 @@ export function pageRange({ offset, limit, total }) {
 }
 
 export function listPager(h, { label = 'Pages', sizes = PAGE_SIZES, change }) {
-  const element = h('nav', { class: 'fx-pages', 'aria-label': label });
+  const element = applyPhoneRule(h('nav', { class: 'fx-pages', 'aria-label': label }), 'listPager');
   const icon = (markup) => { const span = h('span', { 'aria-hidden': 'true' }); span.innerHTML = markup; return span; };
 
   function draw({ offset = 0, limit = sizes[0], total = 0 }) {

package/server/ui/price-list.js

@@ -22,7 +22,7 @@ const LINE_PRICES = [
 // 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 },
+  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 },
 };

package/server/ui/price-reconcile.js

@@ -13,6 +13,7 @@
 // The price check itself runs on each pipeline pass, so there is no button.
 import { bulkBar } from '/assets/ui/bulk-bar.js';
 import { lucide } from '/assets/ui/custom-fields.js';
+import { pager as recordPager } from '/assets/ui/pager.js';
 import { findCodes, nameScore, reconcileRows, SAME_NAME } from '/assets/ui/price-match.js';
 
 const TAX_LABELS = { GST: 'GST', GST_FREE: 'GST free' };
@@ -166,18 +167,17 @@ export async function renderPriceReconcile(main, ui) {
 
   // The invoice pager: Back to the price list, "n of N", previous and next.
   function pager() {
-    const step = (to, label, path) => {
-      const button = h('button', {
-        class: 'fx-pager__step', type: 'button', disabled: to < 0 || to >= rows.length, 'aria-label': label, title: label,
-        onclick: () => { at = to; pick = 0; chosen = null; drawCard(); },
-      });
-      button.innerHTML = `<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path d="${path}" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
-      return button;
-    };
-    return h('nav', { class: 'fx-pager', 'aria-label': 'Records to check' },
-      h('button', { class: 'fx-pager__back', type: 'button', onclick: () => ui.go('/price-list') }, '← Back'),
-      h('span', { class: 'fx-pager__count' }, `${at + 1} of ${rows.length}`),
-      h('span', { class: 'fx-pager__steps' }, step(at - 1, 'Previous', 'M14.5 6l-6 6 6 6'), step(at + 1, 'Next', 'M9.5 6l6 6-6 6')));
+    const go = (to) => () => { at = to; pick = 0; chosen = null; drawCard(); };
+    const { element, draw } = recordPager(h, {
+      label: 'Records to check',
+      back: () => ui.go('/price-list'),
+    });
+    draw({
+      count: `${at + 1} of ${rows.length}`,
+      prev: at > 0 ? go(at - 1) : null,
+      next: at < rows.length - 1 ? go(at + 1) : null,
+    });
+    return element;
   }
 
   // One record (or one differing code) at a time.

package/server/ui/reconcile.js

@@ -22,6 +22,7 @@ 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 { pager } from '/assets/ui/pager.js';
 import { findBox, today, viewBar } from '/assets/ui/view-bar.js';
 import { formatCents } from '/assets/ui/invoicing.js';
 
@@ -95,7 +96,6 @@ function jobCandidateFacts(job) {
 }
 
 
-const CHEVRONS = { prev: 'M14.5 6l-6 6 6 6', next: 'M9.5 6l6 6-6 6' };
 // The list's filter rows (view-bar.js), kept per viewer in this browser.
 // The list a person opened a gap from, for the pager.
 const FILTER_KEY = 'flow_reconcile_filters';
@@ -204,7 +204,7 @@ async function renderList(main, ui) {
   const host = h('div', { class: 'fx-rec' }, h('div', { class: 'fx-skeleton' }));
   const bulk = bulkBar(ui, { label: 'Ticked jobs' });
   const frame = listFrame(main, host);
-  main.append(...listHead('Reconcile', { views: views.element, start: controls, end: find.element }).nodes, frame.element, bulk.element);
+  main.append(...listHead('Reconcile', { views: views.element, 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.
@@ -306,12 +306,12 @@ async function renderList(main, ui) {
       ? 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')));
     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 },
+      kind: { kind: 'icon', phone: 'meta', icon: 'layers', className: 'fx-rec-list__kind', cell: (r) => icon(...KIND_ICON[r.kind]) },
+      client: { kind: 'client', phone: 'title', className: 'fx-strong', cell: (r) => r.client ?? h('span', { class: 'fx-dim' }, 'No client') },
+      detail: { kind: 'text', phone: 'meta', 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', phone: 'hide', className: 'fx-dim', cell: (r) => shortDate(r.date) },
+      total: { kind: 'total', phone: 'end', num: true, cell: (r) => money(r.totalCents) },
+      possible: { kind: 'status', phone: 'meta', 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({
@@ -351,15 +351,16 @@ async function renderGap(main, ui, id) {
     order = lists ? reconcileRows(lists).filter((r) => r.kind === kind).map(({ kind: k, id: i }) => ({ kind: k, id: i })) : [];
   }
   const at = order.findIndex((r) => r.id === id);
-  const step = (to, label, path) => {
-    const button = h('button', { class: 'fx-pager__step', type: 'button', disabled: !to, 'aria-label': label, title: label, onclick: () => ui.go(pathOf(to)) });
-    button.innerHTML = `<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path d="${path}" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
-    return button;
-  };
-  const pager = h('nav', { class: 'fx-pager', 'aria-label': 'Reconcile' },
-    h('button', { class: 'fx-pager__back', type: 'button', onclick: () => ui.go('/reconcile') }, '← Back'),
-    h('span', { class: 'fx-pager__count' }, at >= 0 ? `${at + 1} of ${order.length}` : ''),
-    h('span', { class: 'fx-pager__steps' }, step(at > 0 ? order[at - 1] : null, 'Previous', CHEVRONS.prev), step(at >= 0 ? order[at + 1] : null, 'Next', CHEVRONS.next)));
+  const { element: pagerBar, draw: drawPager } = pager(h, {
+    label: 'Reconcile',
+    back: () => ui.go('/reconcile'),
+  });
+  const goRow = (row) => (row ? () => ui.go(pathOf(row)) : null);
+  drawPager({
+    count: at >= 0 ? `${at + 1} of ${order.length}` : '',
+    prev: goRow(at > 0 ? order[at - 1] : null),
+    next: goRow(at >= 0 ? order[at + 1] : null),
+  });
   const next = () => {
     const rest = order.filter((r) => r.id !== id);
     writeStored(sessionStorage, NAV_KEY, { ...readStored(sessionStorage, NAV_KEY, {}), rows: rest });
@@ -380,7 +381,7 @@ async function renderGap(main, ui, id) {
     },
   });
   const card = h('section', { class: 'fx-rec fx-rec__gap', 'aria-label': 'Compare' },
-    pager,
+    pagerBar,
     h('header', { class: 'fx-ph' }, h('div', { class: 'fx-ph__text' }, title, sub), actions),
     // The search sits where it does on Jobs and Invoices: the right of the
     // toolbar over the rows it searches.

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

@@ -1,5 +1,5 @@
-// 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
+// Saved views: the named view tabs of a list (Jobs, Invoices, Reconcile),
+// as ClickUp's, in the toolbar beside Group, Sort and Filter (listHead). 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
@@ -7,13 +7,14 @@
 // 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.element   the tabs, for listHead's `views`
 //   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';
+import { applyPhoneRule } from './mobile.js';
 
 const ACTIVE_KEY = (page) => `flow_view_tab_${page}`;
 
@@ -33,7 +34,7 @@ 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 element = applyPhoneRule(h('div', { class: 'fx-views', role: 'tablist', 'aria-label': 'Views' }), 'savedViews');
   const chosen = () => saved.list.find((v) => v.id === active) ?? null;
 
   async function store(next) {
@@ -117,7 +118,7 @@ export function savedViews(ui, { page, current, apply }) {
     });
     element.replaceChildren(...[
       ...tabs,
-      saved.list.length < MAX_SAVED_VIEWS ? h('button', { type: 'button', class: 'fx-views__add', onclick: addView }, lucide(h, 'plus'), 'View') : null,
+      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,
       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,