@arcforgelabs/flow 2026.10.46 → 2026.10.48

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,44 @@
+// 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',
+  'contacts',
+  '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 (Jobs, Invoices,
+// Contacts, Reconcile), Price list and Rules. Automations, Custom fields
+// and Integrations start in More.
+export const NAV_DEFAULT = Object.freeze([
+  'jobs',
+  'invoices',
+  'contacts',
+  '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/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';
@@ -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', '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', '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', 'contacts.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

@@ -14,6 +14,7 @@
 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) {

package/server/ui/sidecar.js

@@ -1,9 +1,12 @@
 // The sidecar, as in ClickUp: a panel at the right of a page or a dialog.
 // The Custom fields manager opens it over its table (`overlay`); a job's
-// panel keeps it as its right column, with tabs (Activity, Review). Closed,
-// it takes no room, so the main area gets the full width.
+// panel keeps it as its right column, with tabs (Activity, Fix). Closed,
+// it takes no room, so the main area gets the full width. `phone: 'page'`
+// opens that panel as a full page on a phone: the tabs sit at the top of
+// the record and the record bar (`recordBar`) carries back, the title and
+// the next record. The main action stays in the caller's foot.
 //
-// sidecar(h, { label, overlay, escape, tabs, onChange }) answers
+// sidecar(h, { label, overlay, escape, tabs, onChange, phone }) answers
 // { element, isOpen, open, show, close, tab, setTabs }:
 //   open(id)     selects tab `id` (or the first) and draws its `render()`
 //   show(node)   draws one node with no tabs (the overlay's own form)
@@ -13,14 +16,34 @@
 // `onChange(id)` hears each open (the tab id) and close (null).
 
 import { lucide } from '/assets/ui/custom-fields.js';
+import { applyPhoneRule, isPhone, WIDTHS } from './mobile.js';
 
-export function sidecar(h, { label, overlay = false, escape = false, tabs = [], onChange = null } = {}) {
-  const element = h('aside', { class: `fx-sidecar${overlay ? ' fx-sidecar--over' : ''}`, 'aria-label': label, hidden: true });
+const CHEVRON_LEFT = 'M14.5 6l-6 6 6 6';
+const CHEVRON_RIGHT = 'M9.5 6l6 6-6 6';
+
+function glyph(button, path) {
+  button.innerHTML = `<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><path d="${path}" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+  return button;
+}
+
+export function sidecar(h, { label, overlay = false, escape = false, tabs = [], onChange = null, phone = null } = {}) {
+  const element = applyPhoneRule(h('aside', { class: `fx-sidecar${overlay ? ' fx-sidecar--over' : ''}`, 'aria-label': label, hidden: true }), 'sidecar');
   let list = tabs;
   let current = null;
+  let drawn = false;
+  if (phone === 'page') element.dataset.phone = 'page';
 
   const closeButton = () => h('button', { class: 'fx-sidecar__close', type: 'button', 'aria-label': 'Close', title: 'Close', onclick: () => api.close() }, lucide(h, 'x'));
 
+  // On a phone page the tab strip is the record's top tabs, so it lives on
+  // the record (the parent) and stays put while the record scrolls. The
+  // body stays in the sidecar, which is what the phone suite measures.
+  function parkHead(head) {
+    const grid = element.parentElement;
+    if (element.classList.contains('fx-sidecar--page') && grid) grid.prepend(head);
+    else element.prepend(head);
+  }
+
   function drawTabs() {
     const head = h('header', { class: 'fx-sidecar__head' },
       h('div', { class: 'fx-sidecar__tabs', role: 'tablist', 'aria-label': label },
@@ -30,7 +53,10 @@ export function sidecar(h, { label, overlay = false, escape = false, tabs = [],
         }, lucide(h, t.icon), h('span', {}, t.label), t.mark ? h('span', { class: 'fx-sidecar__mark', 'aria-hidden': 'true' }) : null))),
       closeButton());
     const tab = list.find((t) => t.id === current);
-    element.replaceChildren(head, h('div', { class: 'fx-sidecar__body', role: 'tabpanel' }, tab?.render?.() ?? null));
+    const body = h('div', { class: 'fx-sidecar__body', role: 'tabpanel' }, tab?.render?.() ?? null);
+    element.parentElement?.querySelector(':scope > .fx-sidecar__head')?.remove();
+    element.replaceChildren(body);
+    parkHead(head);
   }
 
   const api = {
@@ -41,18 +67,27 @@ export function sidecar(h, { label, overlay = false, escape = false, tabs = [],
       current = list.find((t) => t.id === id)?.id ?? list[0]?.id ?? null;
       drawTabs();
       element.hidden = false;
+      // The first open leaves the record where it is. A later tab brings
+      // its panel up under the sticky tabs.
+      if (drawn && element.classList.contains('fx-sidecar--page')) {
+        element.querySelector('.fx-sidecar__body')?.scrollIntoView({ block: 'start' });
+      }
+      drawn = true;
       onChange?.(current);
     },
     show(node) {
       current = null;
+      element.parentElement?.querySelector(':scope > .fx-sidecar__head')?.remove();
       element.replaceChildren(node);
       element.hidden = false;
     },
     close() {
       if (element.hidden) return;
       element.hidden = true;
+      element.parentElement?.querySelector(':scope > .fx-sidecar__head')?.remove();
       element.replaceChildren();
       current = null;
+      drawn = false;
       onChange?.(null);
     },
     // New tabs (a tab's data came in): an open tab draws again.
@@ -63,6 +98,15 @@ export function sidecar(h, { label, overlay = false, escape = false, tabs = [],
     closeButton,
   };
 
+  if (phone === 'page') {
+    const sync = () => {
+      element.classList.toggle('fx-sidecar--page', isPhone());
+      if (!element.hidden && current) drawTabs();
+    };
+    sync();
+    if (typeof matchMedia === 'function') matchMedia(WIDTHS.phone).addEventListener('change', sync);
+  }
+
   if (escape) {
     document.addEventListener('keydown', (event) => {
       if (event.key === 'Escape' && element.isConnected && !element.hidden && !document.querySelector('dialog[open], .fx-pop:popover-open')) api.close();
@@ -70,3 +114,59 @@ export function sidecar(h, { label, overlay = false, escape = false, tabs = [],
   }
   return api;
 }
+
+// The bar at the top of a record on a phone: ← back, the title, ‹ › for the
+// previous and next record, and an optional ⋯ menu. Hidden above phone
+// width (flow.css), so a desk record keeps its own bar. `prev` and `next`
+// are { label, disabled, onclick }. `setSteps` and `setMenu` update them
+// after the list arrives.
+export function recordBar(h, { title = '', onBack, prev = null, next = null, menu = null, label = 'Record' } = {}) {
+  const back = glyph(h('button', { class: 'fx-record__back', type: 'button', 'aria-label': 'Back', title: 'Back', onclick: onBack }), CHEVRON_LEFT);
+  const titleNode = h('h2', { class: 'fx-record__title', title }, title);
+  const step = (path) => glyph(h('button', { class: 'fx-record__step', type: 'button' }), path);
+  const prevBtn = step(CHEVRON_LEFT);
+  const nextBtn = step(CHEVRON_RIGHT);
+  const end = h('div', { class: 'fx-record__end' }, prevBtn, nextBtn);
+  const apply = (button, spec, fallback) => {
+    const name = spec?.label ?? fallback;
+    button.setAttribute('aria-label', name);
+    button.title = name;
+    button.disabled = !spec || Boolean(spec.disabled);
+    button.onclick = spec?.onclick ?? null;
+  };
+  apply(prevBtn, prev, 'Previous');
+  apply(nextBtn, next, 'Next');
+  const element = h('header', { class: 'fx-record', 'aria-label': label }, back, titleNode, end);
+  element.setSteps = (nextPrev, nextNext) => {
+    apply(prevBtn, nextPrev, 'Previous');
+    apply(nextBtn, nextNext, 'Next');
+  };
+  element.setMenu = (node) => {
+    end.querySelector('.fx-record__menu')?.remove();
+    if (node) end.append(node);
+  };
+  if (menu) element.setMenu(menu);
+  return element;
+}
+
+// Keeps `pick()` in `foot` while the window is a phone, and back in `home`
+// (the header's actions) otherwise. Returns the function to call again when
+// the primary action changes (Save appears, a send arrives).
+export function watchPhonePrimary(home, foot, pick) {
+  let parked = null;
+  const apply = () => {
+    const next = isPhone() ? (pick() ?? null) : null;
+    if (parked && parked !== next && home) home.append(parked);
+    parked = next;
+    if (parked) {
+      foot.hidden = false;
+      if (parked.parentElement !== foot) foot.replaceChildren(parked);
+    } else {
+      foot.replaceChildren();
+      foot.hidden = true;
+    }
+  };
+  apply();
+  if (typeof matchMedia === 'function') matchMedia(WIDTHS.phone).addEventListener('change', apply);
+  return apply;
+}

package/server/ui/view-bar.js

@@ -22,6 +22,7 @@
 //       first             the field a new row starts on
 //       empty             the words when no filter is on
 import { lucide } from '/assets/ui/custom-fields.js';
+import { applyPhoneRule } from './mobile.js';
 import { DATE_VALUES, dateValueIsOn, filterCount, KIND_ICONS, OPERATORS } from '/assets/ui/job-view.js';
 
 const DAY_BETWEEN = /^between:(\d{4}-\d{2}-\d{2})\.\.(\d{4}-\d{2}-\d{2})$/;
@@ -59,17 +60,22 @@ export function viewBar(h) {
     const panel = h('div', { class: `fx-pop${rows ? ' fx-pop--rows' : ''}`, id, popover: 'auto', role: rows ? 'dialog' : 'menu' });
     const button = h('button', { type: 'button', class: 'fx-chip', popovertarget: id, 'aria-haspopup': rows ? 'dialog' : 'menu', 'aria-expanded': 'false' });
     const clear = h('button', { type: 'button', class: 'fx-chip__clear', 'aria-label': clearLabel, title: clearLabel, hidden: true }, lucide(h, 'x'));
-    const wrap = h('span', { class: 'fx-chipset' }, button, clear);
+    const wrap = applyPhoneRule(h('span', { class: 'fx-chipset' }, button, clear), 'viewBar');
     let onClear = null;
     clear.addEventListener('click', () => onClear?.());
-    const fill = () => panel.replaceChildren(...build(fill, () => panel.hidePopover()).filter(Boolean));
+    // Place again after the rows draw. A filter row is wider than the empty
+    // panel, and the panel is measured once it is open; without this a button
+    // at the right (Invoices) leaves the value and the bin off the screen.
+    const placeMenu = () => { if (panel.matches(':popover-open')) place(button, panel, 6); };
+    const fill = () => {
+      panel.replaceChildren(...build(fill, () => panel.hidePopover()).filter(Boolean));
+      placeMenu();
+      requestAnimationFrame(placeMenu);
+    };
     panel.addEventListener('toggle', (event) => {
       button.setAttribute('aria-expanded', String(event.newState === 'open'));
       if (event.newState !== 'open') return;
       fill();
-      const at = button.getBoundingClientRect();
-      panel.style.top = `${Math.round(at.bottom + 6)}px`;
-      panel.style.left = `${Math.round(Math.max(8, Math.min(at.left, innerWidth - panel.offsetWidth - 8)))}px`;
     });
     return {
       node: [wrap, panel],
@@ -144,11 +150,16 @@ export function viewBar(h) {
     });
     return [button, pop];
   }
-  const place = (button, pop) => {
-    const at = button.getBoundingClientRect();
-    pop.style.top = `${Math.round(at.bottom + 4)}px`;
-    pop.style.left = `${Math.round(Math.max(8, Math.min(at.left, innerWidth - pop.offsetWidth - 8)))}px`;
-  };
+  // Keep a popover on the screen: at the control's left edge, shifted left
+  // when it would run off the right. Called again after a filter row draws,
+  // because that row is wider than the empty panel.
+  function place(anchor, pop, gap = 4) {
+    const at = anchor.getBoundingClientRect();
+    const width = pop.offsetWidth;
+    const left = Math.max(8, Math.min(at.left, innerWidth - width - 8));
+    pop.style.top = `${Math.round(at.bottom + gap)}px`;
+    pop.style.left = `${Math.round(left)}px`;
+  }
 
   // ── Filters ──
   // As ClickUp's: groups of rows of field, operator and value, with a bin on
@@ -328,7 +339,7 @@ export function viewBar(h) {
 export function findBox(h, { label, value = '', oninput }) {
   const input = h('input', { class: 'fx-input fx-input--sm fx-find__input', type: 'search', placeholder: label, 'aria-label': label, value });
   const button = h('button', { type: 'button', class: 'fx-chip fx-find__button', 'aria-label': label, title: label }, lucide(h, 'search'));
-  const element = h('span', { class: `fx-find${value ? ' fx-find--open' : ''}` }, button, input);
+  const element = applyPhoneRule(h('span', { class: `fx-find${value ? ' fx-find--open' : ''}` }, button, input), 'findBox');
   button.addEventListener('click', () => { element.classList.add('fx-find--open'); input.focus(); });
   input.addEventListener('input', () => oninput(input.value));
   input.addEventListener('blur', () => { if (!input.value) element.classList.remove('fx-find--open'); });