@arcforgelabs/flow 2026.10.45 → 2026.10.47

package/server/ui/job-view.js

@@ -304,7 +304,9 @@ export function filterJobs(jobs, view, { valueOf, kindOf = (field) => FILTER_FIE
   const live = (f) => kindOf(f.field) && Object.hasOwn(OPERATORS[kindOf(f.field)], f.op) && filterIsOn(f, kindOf(f.field));
   const groups = (view.groups ?? []).map((g) => ({ match: g.match, rows: g.filters.filter(live) })).filter((g) => g.rows.length);
   if (!groups.length) return [...jobs];
-  const pass = (job) => (f) => matchesFilter(f, valueOf(job, f.field), { today, me, kind: kindOf(f.field), late: f.field === 'due' ? () => late(job) : null });
+  // `late` is a job's own lateness (Jobs). Pass null when "due" is a date on
+  // the row, so Overdue means that day is before today (Invoices).
+  const pass = (job) => (f) => matchesFilter(f, valueOf(job, f.field), { today, me, kind: kindOf(f.field), late: f.field === 'due' && late ? () => late(job) : null });
   const passGroup = (job) => (g) => (g.match === 'any' ? g.rows.some(pass(job)) : g.rows.every(pass(job)));
   return jobs.filter((job) => (view.match === 'any' ? groups.some(passGroup(job)) : groups.every(passGroup(job))));
 }
@@ -473,7 +475,14 @@ export function inOrder(columns, ids) {
 // shows the invoice's problem; Number shows on the tabs with numbers only.
 export const INVOICE_COLUMNS = Object.freeze({
   number: 'Number', client: 'Client', reference: 'Reference', date: 'Date', total: 'Total', status: 'Status', linked: 'Linked',
+  due: 'Due', case: 'Case', practitioner: 'Practitioner', shipped: 'Shipped',
 });
+// The Invoices columns a person sees before they choose: the others (the
+// invoice's due date, its job's case, practitioner and shipped date, and
+// the lab's custom fields) wait in the + menu.
+export const INVOICE_SHOWN = Object.freeze(['number', 'client', 'reference', 'date', 'total', 'status', 'linked']);
+// A person's Invoices columns: custom fields ('field:<id>') are columns too.
+export const invoiceColumnsView = (input) => normaliseListView(input, INVOICE_COLUMNS, { shown: INVOICE_SHOWN, fields: true });
 export const PRICE_COLUMNS = Object.freeze({
   code: 'Code', name: 'Name', price: 'Price', tax: 'Tax',
 });
@@ -482,12 +491,13 @@ export const RECONCILE_COLUMNS = Object.freeze({
 });
 
 // A person's view of a list with set columns (Invoices, Reconcile, Price list): the
-// shown columns in order (every one when none is saved) and their widths.
-export function normaliseListView(input, columns) {
+// shown columns in order (`shown`, else every one, when none is saved) and
+// their widths. With `fields`, a custom field ('field:<id>') is a column too.
+export function normaliseListView(input, columns, { shown = null, fields = false } = {}) {
   const value = input && typeof input === 'object' && !Array.isArray(input) ? input : {};
   const ids = Object.keys(columns);
   return {
-    columns: cleanColumnIds(value.columns, (id) => ids.includes(id)) ?? ids,
+    columns: cleanColumnIds(value.columns, (id) => ids.includes(id) || (fields && FIELD_GROUP.test(id))) ?? [...(shown ?? ids)],
     widths: cleanWidths(value.widths),
   };
 }

package/server/ui/jobs.js

@@ -9,24 +9,26 @@
 // (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, onRightButton, rowCells, viewSaver } from '/assets/ui/columns.js';
+import { columnTable, dateCell, fieldColumn, onRightButton, personCell, rowCells, viewSaver } from '/assets/ui/columns.js';
 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, initialsOf } from '/assets/ui/person.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',
@@ -52,18 +54,6 @@ const STAGE_RANK = { 'In work': 0, Drafted: 2, Problem: 2, 'Ready to invoice': 4
 
 const showDate = (iso) => (iso ? new Date(`${iso}T00:00:00`).toLocaleDateString('en-AU', { day: 'numeric', month: 'short' }) : '—');
 const fullDate = (iso) => (iso ? new Date(`${iso}T00:00:00`).toLocaleDateString('en-AU', { day: 'numeric', month: 'short', year: 'numeric' }) : '—');
-// A list date, short: Today, Tomorrow or Yesterday, else day/month (and
-// year when it is not this year).
-const shortDate = (iso) => {
-  if (!iso) return '—';
-  const at = new Date(`${iso}T00:00:00`);
-  const now = new Date();
-  const days = Math.round((at - new Date(now.getFullYear(), now.getMonth(), now.getDate())) / 86_400_000);
-  if (days === 0) return 'Today';
-  if (days === 1) return 'Tomorrow';
-  if (days === -1) return 'Yesterday';
-  return at.toLocaleDateString('en-AU', at.getFullYear() === now.getFullYear() ? { day: '2-digit', month: '2-digit' } : { day: '2-digit', month: '2-digit', year: '2-digit' });
-};
 const clientOf = (job) => job.clientName ?? 'No client';
 // The one date a card shows: when the job is due, else when it was ordered.
 const dateOf = (job) => (job.dueOn ? `Due ${showDate(job.dueOn)}` : job.orderedOn ? `Ordered ${showDate(job.orderedOn)}` : job.jobDate ? showDate(job.jobDate) : null);
@@ -136,7 +126,7 @@ export async function renderJobs(main, ui) {
   // In the list, ticked rows get the same floating bar as Invoices.
   const bulk = bulkBar(ui, { label: 'Ticked jobs' });
   const frame = listFrame(main, host);
-  main.append(...listHead('Jobs', { views: views.element, start: controls, end: [find.element, toggle] }).nodes, frame.element, bulk.element);
+  main.append(...listHead('Jobs', { views: views.element, controls, end: [find.element, toggle] }).nodes, frame.element, bulk.element);
 
   const drawToggle = () => toggle.replaceChildren(...[['board', 'Board'], ['list', 'List']].map(([id, label]) => h('button', {
     type: 'button', role: 'radio', class: 'fx-seg__item', 'aria-checked': String(state.view.layout === id),
@@ -336,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.'),
@@ -351,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();
   }
@@ -401,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)),
@@ -462,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
@@ -498,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();
@@ -799,7 +880,7 @@ export async function renderJobs(main, ui) {
   // The list's columns, in the order the person chose them. One column holds
   // one field; each date has its own column.
   function listColumns() {
-    const day = (iso) => h('time', { datetime: iso ?? null, title: iso ? fullDate(iso) : null }, shortDate(iso));
+    const day = (iso) => dateCell(h, iso);
     const late = (job) => (isLate(job) ? h('span', { class: 'fx-job__date--late', title: 'Past due' }, day(job.dueOn)) : day(job.dueOn));
     const BUILT_IN = {
       case: { kind: 'case', className: 'fx-dim', cell: (job) => caseNumber(job) ?? '—' },
@@ -821,31 +902,12 @@ export async function renderJobs(main, ui) {
     return [client, ...state.view.columns.map((id) => {
       if (BUILT_IN[id]) return allowed.has(id) ? { id, label: id === 'assignee' ? assigneeField().name : COLUMNS[id], ...BUILT_IN[id] } : null;
       const field = customColumns().find((f) => fieldGroup(f.id) === id);
-      if (!field) return null;
-      const cell = field.type === 'person' ? (job) => personBadge(job, field)
-        : field.type === 'date' ? (job) => day(valueOf(job, field.id)?.value ?? null) : (job) => fieldText(job, field);
-      return { id, label: field.name, kind: field.type === 'date' ? 'date' : field.type === 'person' ? 'person' : field.type === 'number' ? 'total' : 'text', num: field.type === 'number', className: 'fx-dim', cell };
+      return field ? fieldColumn(h, field, { id, valueOf: (job) => valueOf(job, field.id)?.value ?? null, people: state.people }) : null;
     }).filter(Boolean).map((c) => ({ ...c, sort: () => sortButton(c.id, c.label) }))];
   }
 
   // A person custom field's value as a badge (initials), the name on hover.
-  function personBadge(job, field) {
-    const value = field ? valueOf(job, field.id)?.value ?? null : null;
-    if (!value) return h('span', { class: 'fx-dim' }, '—');
-    const name = state.people.find((p) => p.id === value)?.name ?? 'Former person';
-    return h('span', { class: 'fx-avatar fx-avatar--sm', role: 'img', 'aria-label': name, title: name }, initialsOf(name));
-  }
-
-  // A job's custom field value as text.
-  function fieldText(job, field) {
-    const value = field ? valueOf(job, field.id)?.value ?? null : null;
-    if (value == null || value === false) return '—';
-    if (field.type === 'checkbox') return 'Yes';
-    if (field.type === 'person') return state.people.find((p) => p.id === value)?.name ?? 'Former person';
-    if (field.type === 'dropdown') return field.options?.find((o) => o.id === value)?.name ?? '—';
-    if (field.type === 'date') return showDate(value);
-    return String(value);
-  }
+  const personBadge = (job, field) => personCell(h, field ? valueOf(job, field.id)?.value ?? null : null, state.people);
 
   // The list: one block per group, with the group's label over its rows.
   // A tick column at the left; a group's head has a tick for every job in
@@ -1122,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;
@@ -1162,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.
@@ -1252,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,
@@ -1264,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' },
@@ -1307,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;