@arcforgelabs/flow 2026.10.46 → 2026.10.47

package/server/ui/jobs.js

@@ -9,8 +9,8 @@
 // (docs/JOB_BOARD_MOVES.md). Grouped by a custom field, the move sets the
 // job's value, in Flow only. Grouped by status, the move is a stage move
 // in the work system: Seazona cannot take one through its API, so Flow
-// shows what to do there and the card waits in its new lane. On a phone,
-// or with a keyboard, the job's panel has the same moves.
+// shows what to do there and the card waits in its new lane. On a phone a
+// long press opens Move to. With a keyboard, the job's panel has the same moves.
 
 import { bulkBar } from '/assets/ui/bulk-bar.js';
 import { columnTable, dateCell, fieldColumn, onRightButton, personCell, rowCells, viewSaver } from '/assets/ui/columns.js';
@@ -18,15 +18,17 @@ import { lucide } from '/assets/ui/custom-fields.js';
 import { formatCents } from '/assets/ui/invoicing.js';
 import { jobChangeReview } from '/assets/ui/job-change.js';
 import {
-  caseNumber, FINAL_RANK, fixes, INVOICE_STAGES, invoiceStage, matches, NO_STATUS, orderStatuses, problemSummary, statusRank,
+  caseNumber, FINAL_RANK, fixes, INVOICE_STAGES, invoiceStage, matches, NO_STATUS, orderStatuses, phoneLaneIndex, PHONE_HOLD_MS, problemSummary, statusRank,
 } from '/assets/ui/job-board.js';
+import { rowMenu } from '/assets/ui/kit.js';
+import { isPhone } from '/assets/ui/mobile.js';
 import {
   COLUMNS, DEFAULT_VIEW, fieldGroup, fieldIdOf, fieldLanes, FILTER_FIELDS, filterJobs, groupJobs, GROUPS, KIND_OF_TYPE, keptStatuses, laneOf,
   normaliseJobsView, NOT_SET, OPERATORS, sortJobs, SORTS,
 } from '/assets/ui/job-view.js';
 import { clipLabel } from '/assets/ui/person.js';
 import { savedViews } from '/assets/ui/saved-views.js';
-import { sidecar } from '/assets/ui/sidecar.js';
+import { recordBar, sidecar } from '/assets/ui/sidecar.js';
 import { findBox, ICONS, svg, today, viewBar } from '/assets/ui/view-bar.js';
 
 const LAYOUT_KEY = 'flow_jobs_layout';
@@ -38,7 +40,7 @@ const SYSTEM_NAME = { seazona: 'Seazona', xero: 'Xero' };
 // A job's events (server/core/ledger.js), in plain words.
 const ACTIVITY = {
   observed: 'Flow read the job', source_changed: 'The job changed in the lab system', ready: 'Marked ready to invoice',
-  in_work: 'Put back in work', drafted: 'Draft invoice made', draft_refused: 'Draft invoice refused', invoice_linked: 'Linked to an invoice',
+  in_work: 'Put back in work', drafted: 'Draft invoice made', draft_deleted: 'Draft invoice deleted', draft_refused: 'Draft invoice refused', invoice_linked: 'Linked to an invoice',
   accounting_checked: 'Checked in the accounting system', payment_recorded: 'Payment recorded', paid: 'Paid in full',
   held: 'Put on hold', review: 'Sent to review', released: 'Hold removed',
   status_moved_back: 'The job status moved back in the lab system', source_lines_used: 'New job lines used on the draft',
@@ -324,6 +326,7 @@ export async function renderJobs(main, ui) {
 
   function draw() {
     if (!state.jobs.length) {
+      boardTabs.hidden = true;
       main.classList.remove('fx-main--board');
       host.replaceChildren(h('div', { class: 'fx-panel fx-empty' },
         h('p', {}, 'No jobs yet. Jobs appear here once the lab system is connected under Integrations.'),
@@ -339,6 +342,7 @@ export async function renderJobs(main, ui) {
     for (const key of state.ticked) if (!shown.has(key)) state.ticked.delete(key);
     state.found = found;
     frame.count(`${found.length} ${found.length === 1 ? 'job' : 'jobs'}`);
+    if (state.view.layout !== 'board') boardTabs.hidden = true;
     host.replaceChildren(state.view.layout === 'list' ? list(groups, found.length) : board(groups));
     drawBulk();
   }
@@ -389,7 +393,7 @@ export async function renderJobs(main, ui) {
     const system = SYSTEM_NAME[job.sourceSystem] ?? job.sourceSystem;
     const card = h('article', {
       class: 'fx-job', tabindex: '0', role: 'button', 'aria-label': `${clientOf(job)}, open the job`,
-      onclick: () => { if (!dragged) openJob(job); },
+      onclick: () => { if (dragged) { dragged = false; return; } openJob(job); },
       onkeydown: (event) => { if (event.target === event.currentTarget && (event.key === 'Enter' || event.key === ' ')) { event.preventDefault(); openJob(job); } },
     },
     h('div', { class: 'fx-job__client' }, clientOf(job)),
@@ -450,19 +454,108 @@ export async function renderJobs(main, ui) {
   const totalOf = (jobs) => jobs.reduce((sum, job) => sum + (job.totalCents ?? 0), 0);
 
   function board(groups) {
-    if (!groups.length) return h('div', { class: 'fx-panel' }, h('p', { class: 'fx-empty' }, 'No job matches the search or filter.'));
+    if (!groups.length) {
+      boardTabs.hidden = true;
+      return h('div', { class: 'fx-panel' }, h('p', { class: 'fx-empty' }, 'No job matches the search or filter.'));
+    }
     const element = h('div', { class: 'fx-board' }, groups.map(({ label, jobs, rank, color }, index) => h('section', { class: 'fx-board__col', 'aria-label': label, 'data-lane': String(index) },
       h('header', { class: 'fx-board__head' },
         color ? h('span', { class: 'fx-cf__opt fx-board__lane', 'data-color': color }, label, h('span', { class: 'fx-stage__count' }, String(jobs.length))) : stagePill(label, jobs.length, rank),
         h('span', { class: 'fx-board__sum' }, jobs.length ? formatCents(totalOf(jobs)) : '')),
       h('div', { class: 'fx-board__cards' }, jobs.length ? jobs.map(jobCard) : h('p', { class: 'fx-board__none' }, 'None')))));
     if (groups.some((g) => g.drop)) enableDrag(element, groups);
+    phoneLanes(element, groups);
     // Lanes past the frame's sides, and cards past a lane's foot, fade.
     edgeFade(element, { target: frame.view, edges: ['left', 'right'] });
     element.querySelectorAll('.fx-board__cards').forEach((cards) => edgeFade(cards, { target: cards.parentElement, edges: ['top', 'bottom'] }));
     return element;
   }
 
+  // Stage tabs for the phone: one per lane, with its count. A tap brings
+  // that lane across; a swipe updates the tab. Hidden on a wider screen.
+  const boardTabs = h('div', { class: 'fx-board-tabs', role: 'tablist', 'aria-label': 'Stages', hidden: true });
+  function phoneLanes(element, groups) {
+    const bar = main.querySelector('.fx-toolbar');
+    if (bar && !boardTabs.isConnected) bar.prepend(boardTabs);
+    const buttons = groups.map((group, index) => {
+      const count = group.jobs.length;
+      const name = `${group.label}, ${count} ${count === 1 ? 'job' : 'jobs'}`;
+      return h('button', {
+        type: 'button', role: 'tab', id: `fx-lane-tab-${index}`,
+        'aria-controls': `fx-lane-${index}`, 'aria-selected': 'false', title: name,
+        onclick: () => element.scrollTo({ left: element.querySelector(`#fx-lane-${index}`)?.offsetLeft ?? 0, behavior: 'smooth' }),
+      }, h('span', {}, group.label), h('span', { class: 'fx-tabs__count' }, String(count)));
+    });
+    boardTabs.replaceChildren(...buttons);
+    boardTabs.hidden = false;
+    const cols = [...element.querySelectorAll(':scope > .fx-board__col')];
+    cols.forEach((col, index) => {
+      col.id = `fx-lane-${index}`;
+      col.setAttribute('role', 'tabpanel');
+      col.setAttribute('aria-labelledby', `fx-lane-tab-${index}`);
+    });
+    let shown = -1;
+    const mark = () => {
+      const at = phoneLaneIndex(element.scrollLeft, element.clientWidth, cols.length);
+      if (at === shown) return;
+      shown = at;
+      buttons.forEach((button, index) => {
+        const on = index === at;
+        button.setAttribute('aria-selected', String(on));
+        if (on) button.scrollIntoView({ inline: 'nearest', block: 'nearest' });
+      });
+    };
+    element.addEventListener('scroll', () => requestAnimationFrame(mark), { passive: true });
+    mark();
+    enableHold(element, groups);
+  }
+
+  // A long press on a phone opens Move to. A drag stays a mouse or pen
+  // move on a wider screen (enableDrag). A small move cancels the press,
+  // so a swipe still changes lane.
+  function enableHold(element, groups) {
+    element.addEventListener('pointerdown', (event) => {
+      if (!isPhone() || event.pointerType !== 'touch' || event.button !== 0) return;
+      const card = event.target.closest('.fx-job');
+      if (!card || event.target.closest('button, a')) return;
+      const startX = event.clientX;
+      const startY = event.clientY;
+      let held = false;
+      const timer = setTimeout(() => {
+        held = true;
+        dragged = true;
+        const from = Number(card.closest('.fx-board__col')?.dataset.lane);
+        openMoveSheet(cardJobs.get(card), groups, from);
+      }, PHONE_HOLD_MS);
+      // The release may land outside the card (a tap still ends on the page),
+      // so the press is watched on the document.
+      const stop = (end) => {
+        if (end.type === 'pointermove' && Math.hypot(end.clientX - startX, end.clientY - startY) <= 10) return;
+        clearTimeout(timer);
+        document.removeEventListener('pointermove', stop);
+        document.removeEventListener('pointerup', stop);
+        document.removeEventListener('pointercancel', stop);
+        if (held) setTimeout(() => { dragged = false; }, 0);
+      };
+      document.addEventListener('pointermove', stop);
+      document.addEventListener('pointerup', stop);
+      document.addEventListener('pointercancel', stop);
+      card.addEventListener('contextmenu', (menu) => { if (held) menu.preventDefault(); }, { once: true });
+    });
+  }
+
+  async function openMoveSheet(job, groups, from) {
+    const choices = groups.flatMap((group, index) => {
+      if (index === from || !group.drop) return [];
+      if (group.drop.kind !== 'field' && !movesStages(job)) return [];
+      return [{ label: group.label, value: String(index), detail: group.jobs.length }];
+    });
+    if (!choices.length || !job) return;
+    const picked = await ui.dialog({ title: 'Move to', choices });
+    const target = picked == null ? null : groups[Number(picked)];
+    if (target?.drop) moveJob(job, target.drop);
+  }
+
   // ── Moves ────────────────────────────────────────────────────────────────
   // Drag with a mouse or pen: press on a card, move 6px, and a copy of the
   // card follows the pointer. A lane that takes the card lights up. Touch
@@ -486,7 +579,7 @@ export async function renderJobs(main, ui) {
       drag = null;
     };
     element.addEventListener('pointerdown', (event) => {
-      if (event.button !== 0 || event.pointerType === 'touch') return;
+      if (event.button !== 0 || event.pointerType === 'touch' || isPhone()) return;
       const card = event.target.closest('.fx-job');
       if (!card || event.target.closest('button, a')) return;
       const rect = card.getBoundingClientRect();
@@ -1091,12 +1184,15 @@ export async function renderJobs(main, ui) {
 
   // The job's page: a large panel over the board, like a task page. A
   // breadcrumb, the client's name, the stage, the job's fields, what to fix
-  // and its lines. At the side (below on a phone), the sidecar: Activity,
-  // and Fix when the job has a problem (for a changed job: what changed,
-  // and Accept change). The sidecar closes, and the main area takes its room.
-  // Esc, the X or a click outside closes the panel. `atFix` opens the
-  // Fix tab on the first problem (or scrolls to the invoice choice). The job's custom fields can
-  // be changed here (in Flow only), and its stage moved (a hand-off to the
+  // and its lines. At the side, the sidecar: Activity, and Fix when the job
+  // has a problem (for a changed job: what changed, and Accept change). The
+  // sidecar closes, and the main area takes its room. On a phone the same
+  // panel is the whole screen: back (the board stays where it was scrolled),
+  // the client, the previous and next job, a menu, the sidecar's tabs under
+  // the bar, and the main action fixed at the foot. Esc, the X or a click
+  // outside closes the panel. `atFix` opens the Fix tab on the first problem
+  // (or scrolls to the invoice choice). The job's custom fields can be
+  // changed here (in Flow only), and its stage moved (a hand-off to the
   // work system).
   function openJob(job, { atFix = false } = {}) {
     const o = job.obligation;
@@ -1131,11 +1227,9 @@ export async function renderJobs(main, ui) {
       class: 'fx-task__fixchip', type: 'button', 'aria-pressed': 'false', onclick: () => toggleFix(i),
     }, lucide(h, 'triangle-alert'), f.label));
     function toggleFix(i) {
-      if (picked === i && side.tab() === 'fix') { side.close(); return; }
+      if (!isPhone() && picked === i && side.tab() === 'fix') { side.close(); return; }
       picked = i;
       side.open('fix');
-      // On a phone the sidecar is below the job: bring it into view.
-      if (matchMedia('(max-width: 720px)').matches) side.element.scrollIntoView({ block: 'start' });
     }
     // No invoice, and the match is unclear: one line and two buttons. The
     // possible matches are compared on the Reconcile page, not here.
@@ -1221,6 +1315,7 @@ export async function renderJobs(main, ui) {
     }, lucide(h, 'panel-right'));
     const side = sidecar(h, {
       label: 'Job side panel',
+      phone: 'page',
       tabs: [
         { id: 'activity', label: 'Activity', icon: 'history', render: () => activityBody },
         hasFix ? { id: 'fix', label: 'Fix', icon: 'triangle-alert', mark: true, render: () => { picked ??= 0; return fixBody(); } } : null,
@@ -1233,7 +1328,40 @@ export async function renderJobs(main, ui) {
       },
     });
     side.element.classList.add('fx-task__side');
-    element.append(h('div', { class: 'fx-task__grid' },
+    const jobs = state.found ?? [];
+    const at = jobs.findIndex((item) => jobKey(item) === jobKey(job));
+    // Back closes the page. The board is still underneath, at the same scroll.
+    const stepTo = (delta) => {
+      const other = jobs[at + delta];
+      if (!other) return;
+      const board = document.querySelector('.fx-board');
+      const frame = document.querySelector('.fx-frame__body');
+      const saved = { y: window.scrollY, frame: frame?.scrollTop ?? 0, board: board?.scrollLeft ?? 0 };
+      close();
+      openJob(other);
+      const restore = () => {
+        window.scrollTo(0, saved.y);
+        const nextFrame = document.querySelector('.fx-frame__body');
+        const nextBoard = document.querySelector('.fx-board');
+        if (nextFrame) nextFrame.scrollTop = saved.frame;
+        if (nextBoard) nextBoard.scrollLeft = saved.board;
+      };
+      restore();
+      requestAnimationFrame(restore);
+    };
+    const menuItems = [];
+    if (choose && o?.id) menuItems.push({ icon: 'git-compare', text: 'Reconcile', run: () => { close(); ui.go(`/reconcile/${o.id}`); } });
+    if (job.link?.url) menuItems.push({ icon: 'external-link', text: `Open in ${system}`, run: () => window.open(job.link.url, '_blank', 'noopener') });
+    const menu = menuItems.length ? rowMenu('More', menuItems, { className: 'fx-record__menu' }) : null;
+    const bar = recordBar(h, {
+      title: clientOf(job),
+      label: 'Job',
+      onBack: close,
+      prev: { label: 'Previous job', disabled: at <= 0, onclick: () => stepTo(-1) },
+      next: { label: 'Next job', disabled: at < 0 || at >= jobs.length - 1, onclick: () => stepTo(1) },
+      menu: menu?.[0] ?? null,
+    });
+    element.append(bar, h('div', { class: 'fx-task__grid' },
       h('div', { class: 'fx-task__main' },
         h('header', { class: 'fx-task__head' },
           h('nav', { class: 'fx-task__crumb', 'aria-label': 'Breadcrumb' },
@@ -1276,12 +1404,15 @@ export async function renderJobs(main, ui) {
             : h('p', { class: 'fx-dim' }, 'No lines.')),
         h('div', { class: 'fx-task__actions' }, actions(job, close))),
       side.element));
+    if (menu) element.append(menu[1]);
     element.addEventListener('click', (event) => { if (event.target === element) close(); });
     element.addEventListener('close', () => element.remove());
     document.body.append(element);
     element.showModal();
     const last = readSide();
-    if (atFix && hasFix) toggleFix(0);
+    // On a phone the tabs are the page, so the sidecar stays open.
+    if (isPhone()) side.open((atFix || last === 'fix') && hasFix ? 'fix' : 'activity');
+    else if (atFix && hasFix) toggleFix(0);
     else if (last !== 'closed') side.open(last === 'fix' && hasFix ? 'fix' : 'activity');
     if (atFix && chooseBox) chooseBox.scrollIntoView({ block: 'start' });
     if (!o) return;

package/server/ui/kit.js

@@ -5,6 +5,7 @@
 // functions, so a card is the real thing. Reuse one or give it an option;
 // never copy it into a page (AGENTS.md, "UI: reuse first").
 import { lucide } from '/assets/ui/custom-fields.js';
+import { applyPhoneRule } from './mobile.js';
 import { named } from '/assets/ui/tip.js';
 
 // h('p', { class: 'x', onclick }, 'text', child) — children are text or nodes.
@@ -53,12 +54,12 @@ export function holdButton(button, ms) {
 // `count` is a live number beside the name (2 to check); `help` is a docs
 // link, an icon with its name as a tip.
 export function pageHeader(title, { count = null, help = null, actions = [] } = {}) {
-  return h('header', { class: 'fx-ph' },
+  return applyPhoneRule(h('header', { class: 'fx-ph' },
     h('div', { class: 'fx-ph__text' },
       h('h1', { class: 'fx-title' }, title),
       count != null ? h('span', { class: 'fx-ph__count' }, count) : null,
       help ? helpLink(help) : null),
-    actions.length ? h('div', { class: 'fx-ph__actions' }, actions) : null);
+    actions.length ? h('div', { class: 'fx-ph__actions' }, actions) : null), 'pageHeader');
 }
 
 // The top of a list page (Jobs, Invoices, Reconcile), laid out the same on
@@ -77,8 +78,8 @@ export function listHead(title, { count = null, help = null, actions = [], start
   const tools = h('div', { class: 'fx-toolbar__tools' }, controls, views);
   const left = controlsAt === 'end' ? [start].flat() : [start, tools].flat();
   const right = controlsAt === 'end' ? [tools, end].flat() : [end].flat();
-  const bar = h('div', { class: 'fx-listhead', 'data-sticky': sticky },
-    h('div', { class: `fx-toolbar${line ? '' : ' fx-toolbar--plain'}` }, left, h('div', { class: 'fx-toolbar__end' }, right, actions)));
+  const bar = applyPhoneRule(h('div', { class: 'fx-listhead', 'data-sticky': sticky },
+    h('div', { class: `fx-toolbar${line ? '' : ' fx-toolbar--plain'}` }, left, h('div', { class: 'fx-toolbar__end' }, right, actions))), 'listHead');
   const edge = sticky ? h('div', { class: 'fx-listhead__edge', 'aria-hidden': 'true' }) : null;
   if (edge && typeof IntersectionObserver === 'function') {
     const top = window.matchMedia?.('(max-width: 820px)').matches ? 61 : 1;
@@ -99,7 +100,7 @@ export function listFrame(main, content) {
   const tools = h('div', { class: 'fx-frame__tools' });
   const body = h('div', { class: 'fx-frame__body' }, content);
   const view = h('div', { class: 'fx-frame__view' }, body);
-  const element = h('section', { class: 'fx-frame' }, view, h('footer', { class: 'fx-frame__foot' }, count, tools));
+  const element = applyPhoneRule(h('section', { class: 'fx-frame' }, view, h('footer', { class: 'fx-frame__foot' }, count, tools)), 'listFrame');
   edgeFade(body, { target: view, edges: ['bottom', 'left', 'right'] });
   return { element, body, view, tools, count: (text) => { count.textContent = text ?? ''; } };
 }
@@ -149,9 +150,9 @@ export function sectionTitle(text, help = null) {
 }
 
 export function notice(text, tone = 'info', title = null) {
-  return h('div', { class: 'fx-notice', 'data-tone': tone, role: tone === 'danger' ? 'alert' : 'status' },
+  return applyPhoneRule(h('div', { class: 'fx-notice', 'data-tone': tone, role: tone === 'danger' ? 'alert' : 'status' },
     title ? h('strong', {}, title) : null,
-    h('span', {}, text));
+    h('span', {}, text)), 'notice');
 }
 
 // A field that fails a check glows red, like a required field, until the
@@ -159,37 +160,63 @@ export function notice(text, tone = 'info', title = null) {
 // `on` false clears it. Answers the field.
 export function fieldError(field, on = true) {
   if (!on) { field.removeAttribute('aria-invalid'); return field; }
+  applyPhoneRule(field, 'fieldError');
   field.setAttribute('aria-invalid', 'true');
   field.addEventListener('input', () => field.removeAttribute('aria-invalid'), { once: true });
   return field;
 }
 
-export function toast(text, tone = 'info') {
+// A short result after an action. With `stay: true` it stays until the person
+// closes it (for a danger a failed press must not pass unseen).
+export function toast(text, tone = 'info', { stay = false } = {}) {
   const region = document.getElementById('toasts');
-  const item = h('div', { class: 'fx-toast', 'data-tone': tone, role: 'status' }, text);
+  const item = applyPhoneRule(h('div', {
+    class: stay ? 'fx-toast fx-toast--stay' : 'fx-toast',
+    'data-tone': tone,
+    role: tone === 'danger' ? 'alert' : 'status',
+  }, h('span', { class: 'fx-toast__text' }, text)), 'toast');
+  if (stay) {
+    item.append(h('button', {
+      type: 'button', class: 'fx-toast__close', 'aria-label': 'Close', title: 'Close',
+      onclick: () => item.remove(),
+    }, lucide(h, 'x')));
+  } else {
+    setTimeout(() => item.remove(), 4200);
+  }
   region.append(item);
-  setTimeout(() => item.remove(), 4200);
 }
 
 // A modal built on <dialog>: resolves with the button's value, or null.
-export function dialog({ title, body, confirm, tone = 'primary' }) {
+export function dialog({ title, body, confirm, tone = 'primary', choices = null }) {
   return new Promise((resolve) => {
+    const choiceList = choices
+      ? h('div', { class: 'fx-sheet__choices', role: 'group', 'aria-label': title },
+        choices.map((choice) => h('button', { class: 'fx-sheet__choice', type: 'submit', value: choice.value },
+          h('span', {}, choice.label),
+          choice.detail == null ? null : h('span', { class: 'fx-tabs__count' }, String(choice.detail)))))
+      : null;
+    const actions = choices ? null : h('div', { class: 'fx-dialog__actions' },
+      h('button', { class: 'fx-btn fx-btn--ghost', value: 'cancel', type: 'submit', formnovalidate: true }, 'Cancel'),
+      h('button', { class: `fx-btn fx-btn--${tone}`, value: 'ok', type: 'submit' }, confirm));
     const form = h('form', { method: 'dialog', class: 'fx-dialog__form' },
       h('h2', { class: 'fx-dialog__title' }, title),
-      body,
-      h('div', { class: 'fx-dialog__actions' },
-        h('button', { class: 'fx-btn fx-btn--ghost', value: 'cancel', type: 'submit', formnovalidate: true }, 'Cancel'),
-        h('button', { class: `fx-btn fx-btn--${tone}`, value: 'ok', type: 'submit' }, confirm)));
-    const element = h('dialog', { class: 'fx-dialog' }, form);
+      choiceList ?? body,
+      actions);
+    const element = applyPhoneRule(h('dialog', { class: 'fx-dialog' }, form), 'dialog');
     element.addEventListener('close', () => {
-      const ok = element.returnValue === 'ok';
-      const data = ok ? new FormData(form) : null;
+      const value = element.returnValue;
       element.remove();
-      resolve(ok ? data : null);
+      if (choices) {
+        resolve(value && value !== 'cancel' ? value : null);
+        return;
+      }
+      const ok = value === 'ok';
+      resolve(ok ? new FormData(form) : null);
     });
+    if (choices) element.addEventListener('click', (event) => { if (event.target === element) element.close(); });
     document.body.append(element);
     element.showModal();
-    element.querySelector('input, select, button[value="ok"]')?.focus();
+    element.querySelector(choices ? '.fx-sheet__choice' : 'input, select, button[value="ok"]')?.focus();
   });
 }
 
@@ -200,11 +227,11 @@ export function dialog({ title, body, confirm, tone = 'primary' }) {
 export function settingRow({ label, hint, control, wide = false, tone = null }) {
   const target = control?.matches?.('input, select, textarea') ? control : control?.querySelector?.('input:not([type=color]), select, textarea');
   const id = target ? (target.id ||= `fx-set-${++settingRow.next}`) : null;
-  return h('div', { class: `fx-setting${wide ? ' fx-setting--wide' : ''}`, 'data-tone': tone },
+  return applyPhoneRule(h('div', { class: `fx-setting${wide ? ' fx-setting--wide' : ''}`, 'data-tone': tone },
     h('div', { class: 'fx-setting__text' },
       id ? h('label', { class: 'fx-setting__name', for: id }, label) : h('span', { class: 'fx-setting__name' }, label),
       hint ? h('p', { class: 'fx-setting__hint' }, hint) : null),
-    h('div', { class: 'fx-setting__control' }, control));
+    h('div', { class: 'fx-setting__control' }, control)), 'settingRow');
 }
 settingRow.next = 0;
 
@@ -212,26 +239,126 @@ settingRow.next = 0;
 
 let rowMenus = 0;
 
+function menuGlyph(icon) {
+  if (icon instanceof Node) return icon.isConnected ? icon.cloneNode(true) : icon;
+  return icon ? lucide(h, icon) : null;
+}
+
 // 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.
-// `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' } = {}) {
+// `place: 'side'` floats it to the right of the button (the sidebar's More),
+// and moves focus into the menu and back to the button on close.
+// `trigger` swaps the ⋯ icon for the given contents.
+// An item is `{ icon, text, run, tone }` or `'-'` (a line). `icon` is a Lucide
+// name or a node. `trailing` is a control at the row's end (the pin) that
+// does not close the menu: `{ icon, label, pressed, run, locked }`. `locked`
+// draws the icon and does not take a click. `items` may be a function, read
+// again each time the menu opens. `panel.refresh()` redraws it while open.
+export function rowMenu(label, items, { trigger = null, className = 'fx-cfm__more', align = 'end', place = 'below' } = {}) {
   const id = `fx-row-menu-${++rowMenus}`;
-  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'));
-    if (event.newState !== 'open') return;
-    const close = () => panel.hidePopover();
-    panel.replaceChildren(...items.map((entry) => (entry === '-'
-      ? h('div', { class: 'fx-pop__sep' })
-      : h('button', { type: 'button', class: 'fx-pop__item', role: 'menuitem', 'data-tone': entry.tone, onclick: () => { close(); entry.run(); } },
-        h('span', { class: 'fx-pop__tick' }, lucide(h, entry.icon)), h('span', {}, entry.text)))));
+  const button = applyPhoneRule(h('button', { class: className, type: 'button', 'aria-label': label, popovertarget: id, 'aria-haspopup': 'menu', 'aria-expanded': 'false' }, trigger ?? lucide(h, 'ellipsis')), 'rowMenu');
+  const panel = h('div', { class: place === 'side' ? 'fx-pop fx-pop--side' : 'fx-pop', id, popover: 'auto', role: 'menu' });
+  const entries = () => (typeof items === 'function' ? items() : items);
+  let picking = false;
+
+  function renderEntry(entry) {
+    if (entry === '-') return h('div', { class: 'fx-pop__sep' });
+    const item = h('button', {
+      type: 'button', class: 'fx-pop__item', role: 'menuitem', 'data-tone': entry.tone,
+      onclick: () => { picking = true; panel.hidePopover(); entry.run(); },
+    }, h('span', { class: 'fx-pop__tick' }, menuGlyph(entry.icon)), h('span', {}, entry.text));
+    if (!entry.trailing) return item;
+    const trail = entry.trailing;
+    const mark = menuGlyph(trail.icon);
+    const control = trail.locked
+      ? h('span', { class: 'fx-pop__pin fx-pop__pin--fixed', role: 'img', 'aria-label': trail.label }, mark)
+      : h('button', {
+        type: 'button', class: 'fx-pop__pin', 'aria-label': trail.label, 'aria-pressed': trail.pressed ? 'true' : 'false',
+        onclick: (event) => { event.stopPropagation(); trail.run(); },
+      }, mark);
+    return h('div', { class: 'fx-pop__row', role: 'none' }, item, control);
+  }
+
+  function placePanel() {
     const at = button.getBoundingClientRect();
+    const margin = 8;
+    const narrow = place === 'side' && window.matchMedia('(max-width: 820px)').matches;
+    if (narrow) {
+      // On a phone the sidebar is the slide-out. The menu stays inside it.
+      const drawer = button.closest('.fx-nav')?.getBoundingClientRect();
+      const left = Math.round((drawer?.left ?? at.left) + margin);
+      const width = Math.max(160, Math.round((drawer?.width ?? at.width) - margin * 2));
+      panel.style.width = `${width}px`;
+      panel.style.minWidth = '0';
+      let top = Math.round(at.bottom + 6);
+      if (top + panel.offsetHeight > innerHeight - margin) top = Math.max(margin, Math.round(innerHeight - margin - panel.offsetHeight));
+      panel.style.top = `${top}px`;
+      panel.style.left = `${left}px`;
+      return;
+    }
+    panel.style.width = '';
+    panel.style.minWidth = '';
+    if (place === 'side') {
+      const gap = 8;
+      let left = Math.round(at.right + gap);
+      if (left + panel.offsetWidth > innerWidth - margin) left = Math.round(at.left - gap - panel.offsetWidth);
+      panel.style.left = `${Math.max(margin, Math.min(left, innerWidth - panel.offsetWidth - margin))}px`;
+      let top = Math.round(at.top);
+      panel.style.top = `${Math.max(margin, Math.min(top, innerHeight - panel.offsetHeight - margin))}px`;
+      return;
+    }
     panel.style.top = `${Math.round(at.bottom + 6)}px`;
     const left = align === 'start' ? at.left : at.right - panel.offsetWidth;
-    panel.style.left = `${Math.round(Math.max(8, Math.min(left, innerWidth - panel.offsetWidth - 8)))}px`;
+    panel.style.left = `${Math.round(Math.max(margin, Math.min(left, innerWidth - panel.offsetWidth - margin)))}px`;
+  }
+
+  function draw(keepFocus) {
+    const active = document.activeElement;
+    const row = active?.closest?.('.fx-pop__row');
+    const text = row?.querySelector('[role="menuitem"]')?.textContent?.trim() ?? '';
+    const onPin = Boolean(active?.classList?.contains('fx-pop__pin'));
+    panel.replaceChildren(...entries().map(renderEntry));
+    if (!keepFocus || !text) return;
+    const next = [...panel.querySelectorAll('.fx-pop__row')].find((candidate) => candidate.querySelector('[role="menuitem"]')?.textContent?.trim() === text);
+    (onPin ? next?.querySelector('.fx-pop__pin') : next?.querySelector('[role="menuitem"]'))?.focus();
+  }
+
+  panel.refresh = () => {
+    if (!panel.matches(':popover-open')) return;
+    draw(true);
+    placePanel();
+  };
+
+  panel.addEventListener('toggle', (event) => {
+    const open = event.newState === 'open';
+    button.setAttribute('aria-expanded', String(open));
+    if (!open) {
+      // A chosen row moves focus itself. Anything else (Escape, a click
+      // outside) puts focus back on the button that opened the menu.
+      if (place === 'side' && !picking) button.focus();
+      picking = false;
+      return;
+    }
+    draw(false);
+    placePanel();
+    if (place === 'side') panel.querySelector('[role="menuitem"]')?.focus();
   });
+
+  if (place === 'side') {
+    panel.addEventListener('keydown', (event) => {
+      if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) return;
+      const stops = [...panel.querySelectorAll('button')];
+      if (!stops.length) return;
+      event.preventDefault();
+      const index = Math.max(0, stops.indexOf(document.activeElement));
+      const next = event.key === 'Home' ? 0
+        : event.key === 'End' ? stops.length - 1
+        : event.key === 'ArrowDown' ? (index + 1) % stops.length
+        : (index - 1 + stops.length) % stops.length;
+      stops[next].focus();
+    });
+  }
+
   return [button, panel];
 }
 
@@ -255,31 +382,59 @@ export function tileCard({ href, mark, title, status, blurb, meta, action = 'Man
   const logo = typeof mark === 'string' ? h('span', { class: 'fx-logo fx-logo--icon', 'aria-hidden': 'true' }, lucide(h, mark)) : mark;
   const pill = status ? h('span', { class: 'fx-status', 'data-tone': status.tone ?? 'mute' }, status.label) : null;
   if (row) {
-    return h('a', { class: 'fx-tile', href, onclick: inPlace },
+    return applyPhoneRule(h('a', { class: 'fx-tile', href, onclick: inPlace },
       logo,
       h('h3', {}, title),
-      pill ?? (meta ? h('span', { class: 'fx-tile__meta' }, meta) : null));
+      pill ?? (meta ? h('span', { class: 'fx-tile__meta' }, meta) : null)), 'tileCard');
   }
-  return h('a', { class: `fx-int-card${blurb ? '' : ' fx-int-card--bare'}`, href, onclick: inPlace },
+  return applyPhoneRule(h('a', { class: `fx-int-card${blurb ? '' : ' fx-int-card--bare'}`, href, onclick: inPlace },
     h('header', { class: 'fx-int-card__head' }, logo, h('h3', {}, title), pill),
     blurb ? h('p', { class: 'fx-int-card__blurb' }, blurb) : null,
-    h('span', { class: 'fx-int-card__btn' }, action));
+    h('span', { class: 'fx-int-card__btn' }, action)), 'tileCard');
 }
 
 // A titled group of one-line cards, three columns where they fit, with "Show all" at the right
 // when `href` is given (Claude's Customize page).
 export function tileSection(title, cards, { href, more = 'Show all' } = {}) {
-  return h('section', { class: 'fx-tiles' },
+  return applyPhoneRule(h('section', { class: 'fx-tiles' },
     h('header', { class: 'fx-tiles__head' },
       h('h2', {}, title),
       href ? h('a', { class: 'fx-tiles__more', href, onclick: inPlace }, more, lucide(h, 'chevron-right')) : null),
-    h('div', { class: 'fx-tiles__grid' }, cards));
+    h('div', { class: 'fx-tiles__grid' }, cards)), 'tileSection');
+}
+
+// A dialog that fills the screen has no pixel outside it, so an accessibility
+// check cannot tell it is modal and reads the page underneath. While one is
+// open, every other top-level node is inert. The attribute is what the check
+// reads; the browser's own modal behaviour is unchanged.
+function shieldBehindDialogs() {
+  const top = [...document.querySelectorAll('dialog[open]')].at(-1) ?? null;
+  for (const child of document.body.children) {
+    if (top && child !== top) child.setAttribute('inert', '');
+    else child.removeAttribute('inert');
+  }
+}
+// Node tests import this module and have no HTMLDialogElement. The wrap only
+// matters in the browser, where showModal and close are the three call sites.
+if (typeof HTMLDialogElement !== 'undefined') {
+  const openDialog = HTMLDialogElement.prototype.showModal;
+  const closeDialog = HTMLDialogElement.prototype.close;
+  HTMLDialogElement.prototype.showModal = function showModal() {
+    const result = openDialog.call(this);
+    shieldBehindDialogs();
+    return result;
+  };
+  HTMLDialogElement.prototype.close = function close(...args) {
+    const result = closeDialog.apply(this, args);
+    shieldBehindDialogs();
+    return result;
+  };
 }
 
 // The trail above a page one level down: crumbs(['/integrations', 'Integrations'], 'Xero').
 export function crumbs(...trail) {
   const here = trail.pop();
-  return h('nav', { class: 'fx-crumbs', 'aria-label': 'Breadcrumb' },
+  return applyPhoneRule(h('nav', { class: 'fx-crumbs', 'aria-label': 'Breadcrumb' },
     ...trail.flatMap(([href, label]) => [h('a', { href, onclick: inPlace }, label), h('span', { 'aria-hidden': 'true' }, '›')]),
-    h('span', {}, here));
+    h('span', {}, here)), 'crumbs');
 }