@arcforgelabs/flow 2026.10.36 → 2026.10.37

package/server/ui/bulk-bar.js

@@ -0,0 +1,99 @@
+// The bulk action bar: while a person has ticked rows in a list, it floats
+// at the foot of the page, like ClickUp's. It shows "N selected ×" (the ×
+// clears the ticks), then the actions in groups split by a thin line, then
+// More. An action has a Lucide icon and one word; an icon-only action gives
+// its name on hover and to a screen reader. More opens every action, with a
+// search box, grouped under small heads.
+//
+// bulkBar(ui) answers { element, draw(state) }. state = { count, onClear,
+// groups: [[action]], more: [{ head, actions: [action] }] }; an action is
+// { icon, label, title?, run, primary?, iconOnly?, tone? }. title is the
+// long name, for the hover tip and the More menu. A count of 0 hides the
+// bar; Esc clears the ticks while it shows.
+import { lucide } from '/assets/ui/custom-fields.js';
+
+let barCount = 0;
+
+export function bulkBar(ui) {
+  const { h } = ui;
+  const id = `fx-bulk-more-${++barCount}`;
+  const element = h('div', { class: 'fx-bulk', role: 'toolbar', 'aria-label': 'Ticked invoices', hidden: true });
+  const panel = h('div', { class: 'fx-pop fx-bulk__more', id, popover: 'auto', role: 'menu' });
+  let current = null;
+  let busy = false;
+
+  const run = async (action) => {
+    if (busy) return;
+    busy = true;
+    element.setAttribute('aria-busy', 'true');
+    try { await action.run(); } finally {
+      busy = false;
+      element.removeAttribute('aria-busy');
+    }
+  };
+
+  const button = (action) => h('button', {
+    type: 'button',
+    class: `fx-bulk__act${action.primary ? ' fx-bulk__act--primary' : ''}${action.iconOnly ? ' fx-bulk__act--icon' : ''}`,
+    ...(action.tone ? { 'data-tone': action.tone } : {}),
+    ...(action.iconOnly ? { 'aria-label': action.title ?? action.label, 'data-tip': action.title ?? action.label } : action.title ? { title: action.title } : {}),
+    onclick: () => run(action),
+  }, lucide(h, action.icon), action.iconOnly ? null : h('span', { class: 'fx-bulk__word' }, action.label));
+
+  // More: a search box over every action, under small heads.
+  const search = h('input', { class: 'fx-input fx-bulk__search', type: 'search', placeholder: 'Search…', 'aria-label': 'Search actions' });
+  const list = h('div', { class: 'fx-bulk__list' });
+  const drawMore = () => {
+    const q = search.value.trim().toLowerCase();
+    const parts = [];
+    for (const { head, actions } of current?.more ?? []) {
+      const found = actions.filter((a) => !q || `${a.label} ${a.title ?? ''}`.toLowerCase().includes(q));
+      if (!found.length) continue;
+      parts.push(h('p', { class: 'fx-pop__head' }, head), h('div', { class: 'fx-bulk__grid' }, found.map((action) => h('button', {
+        type: 'button', class: 'fx-pop__item', role: 'menuitem', ...(action.tone ? { 'data-tone': action.tone } : {}),
+        onclick: () => { panel.hidePopover?.(); run(action); },
+      }, h('span', { class: 'fx-pop__tick' }, lucide(h, action.icon)), h('span', {}, action.title ?? action.label)))));
+    }
+    list.replaceChildren(...(parts.length ? parts : [h('p', { class: 'fx-bulk__none' }, 'No action matches.')]));
+  };
+  search.addEventListener('input', drawMore);
+  const onKey = (event) => {
+    if (!element.isConnected) { document.removeEventListener('keydown', onKey); return; }
+    if (event.key === 'Escape' && !element.hidden && !panel.matches?.(':popover-open') && !document.querySelector('dialog[open]')) current?.onClear();
+  };
+  document.addEventListener?.('keydown', onKey);
+  panel.append(search, list);
+  const more = h('button', {
+    type: 'button', class: 'fx-bulk__act', popovertarget: id, 'aria-haspopup': 'menu', 'aria-expanded': 'false',
+  }, lucide(h, 'ellipsis'), h('span', { class: 'fx-bulk__word' }, 'More'));
+  // The menu opens above the bar, at its right edge.
+  panel.addEventListener('toggle', (event) => {
+    more.setAttribute('aria-expanded', String(event.newState === 'open'));
+    if (event.newState !== 'open') return;
+    search.value = '';
+    drawMore();
+    const at = more.getBoundingClientRect();
+    panel.style.top = `${Math.round(Math.max(8, at.top - panel.offsetHeight - 8))}px`;
+    panel.style.left = `${Math.round(Math.max(8, Math.min(at.right - panel.offsetWidth, innerWidth - panel.offsetWidth - 8)))}px`;
+    search.focus();
+  });
+
+  function draw(state) {
+    current = state;
+    element.hidden = !state?.count;
+    if (element.hidden) { panel.hidePopover?.(); return; }
+    const count = h('span', { class: 'fx-bulk__count' },
+      h('span', {}, `${state.count} selected`),
+      h('button', { type: 'button', class: 'fx-bulk__clear', 'aria-label': 'Clear the ticks', 'data-tip': 'Clear', onclick: state.onClear }, lucide(h, 'x')));
+    const groups = state.groups.filter((g) => g.length);
+    const parts = [];
+    groups.forEach((group, i) => {
+      if (i) parts.push(h('span', { class: 'fx-bulk__sep', 'aria-hidden': 'true' }));
+      parts.push(...group.map(button));
+    });
+    if ((state.more ?? []).some((g) => g.actions.length)) parts.push(h('span', { class: 'fx-bulk__sep', 'aria-hidden': 'true' }), more, panel);
+    element.replaceChildren(count, h('span', { class: 'fx-bulk__acts' }, ...parts));
+  }
+
+  return { element, draw };
+}

package/server/ui/flow.css

@@ -155,7 +155,8 @@ body:is([data-state="off"], [data-state="error"], [data-state="no-access"]) .fx-
 /* Folded (wide screens only): the sidebar keeps its icons, the menu button
    and the account photo; each page's name is still read out. */
 @media (min-width: 821px) {
-  .fx-shell[data-folded] .fx-side { width: 64px; padding-inline: 10px; }
+  .fx-shell[data-folded] .fx-side { width: 64px; padding-inline: 10px; cursor: e-resize; }
+  .fx-shell[data-folded] .fx-side :is(a, button, #user-button) { cursor: pointer; }
   .fx-shell[data-folded] .fx-side__head { flex-direction: column; gap: 10px; padding: 0 0 14px; }
   .fx-shell[data-folded] .fx-side__head .fx-brand { display: none; }
   .fx-shell[data-folded] .fx-nav__group { height: 1px; margin: 10px 6px; padding: 0; overflow: hidden; background: var(--fx-line); color: transparent; }
@@ -234,6 +235,12 @@ a.fx-link:hover, a.fx-link:focus-visible { border-color: var(--t-strong); }
 .fx-link__dot[data-tone="success"] { background: var(--t-success); }
 .fx-link__dot[data-tone="warn"] { background: var(--t-warn); }
 .fx-link__dot[data-tone="danger"] { background: var(--t-danger); }
+.fx-linked { display: grid; }
+.fx-linked__row { display: flex; align-items: center; gap: 8px; white-space: nowrap; min-height: 44px; padding: 6px 0; border-top: 1px solid var(--fx-line-soft); }
+.fx-linked__row:first-child { border-top: 0; }
+.fx-linked__ref { font-family: var(--t-data); font-variant-numeric: tabular-nums; color: var(--t-strong); }
+.fx-linked__open { margin-left: auto; font-size: 12.5px; color: var(--t-dim); white-space: nowrap; }
+.fx-linked__open:hover { color: var(--t-strong); }
 .fx-tag {
   margin-left: 8px; padding: 1px 7px; border: 1px solid var(--fx-line); border-radius: 999px;
   color: var(--t-dim); font-size: 11.5px; font-weight: 600;
@@ -269,9 +276,6 @@ a.fx-link:hover, a.fx-link:focus-visible { border-color: var(--t-strong); }
   font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
 }
 .fx-empty { padding: 28px 16px; color: var(--t-dim); text-align: center; }
-.fx-roles { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: 13.5px; color: var(--t-dim); }
-.fx-roles dt { color: var(--t-strong); font-weight: 600; }
-.fx-roles dd { margin: 0; }
 
 /* ── Integrations ───────────────────────────────────────────────────────── */
 .fx-chip { border: 1px solid var(--fx-line); border-radius: 999px; background: var(--t-paper); color: var(--t-text); }
@@ -509,12 +513,13 @@ a.fx-strong:hover { text-decoration: underline; }
 .fx-table__group-row { display: flex; align-items: center; gap: 12px; }
 .fx-table__group-row .fx-board__sum { margin-left: 0; }
 .fx-stage[data-rank="plain"] { --stage: var(--t-dim); }
-/* The board never scrolls sideways: its columns (one per work system status)
-   are about a phone wide, wrap onto more rows when the page is narrow, and
-   stack on a phone. On a wide, tall screen the board fills the page down to
-   its bottom edge, and each column scrolls inside itself (jobs.js sets
-   fx-main--board while the board shows). */
-.fx-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 256px), 1fr)); gap: 12px; align-items: start; }
+/* The board is one row of lanes (one per group), each about a phone wide.
+   Lanes share the width when they fit; more lanes scroll sideways inside
+   the board, never as a second row. On a wide, tall screen the board fills
+   the page down to its bottom edge, the page itself does not scroll, and
+   each lane scrolls inside itself (jobs.js sets fx-main--board while the
+   board shows). */
+.fx-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(min(85vw, 272px), 1fr); gap: 12px; align-items: start; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: 4px; }
 .fx-board__col { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; padding: 10px 6px 6px 8px; border-radius: var(--t-radius-lg); background: var(--t-s1); }
 .fx-board__head { display: flex; flex: none; align-items: center; gap: 8px; min-width: 0; padding: 2px 4px 4px 2px; }
 .fx-board__sum { flex: none; margin-left: auto; color: var(--t-dim); font-size: 12px; font-variant-numeric: tabular-nums; }
@@ -522,7 +527,7 @@ a.fx-strong:hover { text-decoration: underline; }
 @media (min-width: 821px) and (min-height: 560px) {
   .fx-main--board { height: 100vh; height: 100dvh; padding: 24px 24px 16px; grid-template-rows: auto auto minmax(0, 1fr); align-content: stretch; }
   .fx-main--board > .fx-jobs { min-height: 0; }
-  .fx-main--board .fx-board { height: 100%; overflow-y: auto; grid-auto-rows: 100%; align-items: stretch; }
+  .fx-main--board .fx-board { height: 100%; overflow-y: hidden; align-items: stretch; }
   .fx-main--board .fx-board__cards { flex: 1; max-height: none; }
 }
 .fx-board__none { padding: 8px 4px; color: var(--t-dim); font-size: 13px; }
@@ -823,6 +828,16 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
   .fx-table__actions { text-align: left; }
   .fx-table__actions .fx-row--end { justify-content: flex-start; }
   .fx-ph__actions, .fx-ph__actions .fx-btn { width: 100%; }
+  /* People: the name with its actions (⋯, Approve) on one line, then the
+     role select full width, then the status pill when there is one. */
+  .fx-people tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 10px; }
+  .fx-people td, .fx-people td:nth-child(2), .fx-people td:nth-child(3) { display: block; width: auto; margin: 0; padding: 0; }
+  .fx-people td:nth-child(1) { grid-area: 1 / 1; }
+  .fx-people td:nth-child(4) { grid-area: 1 / 2; }
+  .fx-people td:nth-child(2) { grid-area: 2 / 1 / 3 / -1; }
+  .fx-people td:nth-child(2) .fx-select { width: 100%; }
+  .fx-people td:nth-child(3) { grid-area: 3 / 1 / 4 / -1; }
+  .fx-people td:nth-child(3):empty { display: none; }
 }
 
 @keyframes fx-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@@ -921,6 +936,7 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-cfm > .fx-notice { margin: 12px 16px 0; }
 .fx-cfm__foot { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--fx-line-soft); color: var(--t-dim); font-size: 13px; }
 .fx-pop__item:disabled { opacity: .5; cursor: default; }
+.fx-pop__item[data-tone="danger"], .fx-pop__item[data-tone="danger"] .fx-pop__tick { color: var(--t-danger); }
 .fx-pop__item .fx-lucide { width: 15px; height: 15px; }
 @media (max-width: 720px) {
   .fx-cfm { grid-template-columns: minmax(0, 1fr) 40px 40px; }
@@ -1019,3 +1035,60 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-pick__row[hidden] { display: none; }
 .fx-pick__main { display: grid; gap: 2px; min-width: 0; }
 .fx-pick > .fx-dim { padding: 14px; }
+
+/* The Invoices list head (invoicing.js): tabs, search and the send bar stay
+   at the top while rows scroll up under them; a shadow shows once they do.
+   Narrow, the app bar (60px) sits above it. */
+.fx-listhead { position: sticky; top: 0; z-index: 5; margin: -12px calc(-1 * clamp(16px, 4vw, 48px)) 0; padding: 12px clamp(16px, 4vw, 48px) 0; background: var(--t-bg); transition: box-shadow .15s; }
+.fx-listhead[data-stuck] { box-shadow: 0 10px 12px -12px rgba(0, 0, 0, .45); }
+.fx-listhead .fx-sendbar { margin-bottom: 12px; }
+.fx-listhead__edge { height: 0; margin-bottom: -20px; }
+@media (max-width: 820px) { .fx-listhead { top: 60px; } }
+/* On a phone the head would hide too many rows: it scrolls away. */
+@media (max-width: 560px) { .fx-listhead { position: static; } }
+
+/* The bulk action bar (bulk-bar.js): floats at the foot while rows are
+   ticked. "N selected ×", then icon actions in groups, then More. It takes
+   the theme's own surface, line, corners and primary button, like a menu. */
+.fx-bulk {
+  position: sticky; bottom: 16px; z-index: 6; justify-self: center; display: flex; align-items: center; gap: 2px; max-width: 100%;
+  padding: 5px; border: 1px solid var(--fx-line); border-radius: var(--t-radius-lg); background: var(--t-paper); color: var(--t-text);
+  box-shadow: var(--t-shadow), 0 12px 32px rgba(0, 0, 0, .16);
+  font: 500 13.5px/1 var(--t-body); white-space: nowrap;
+}
+.fx-bulk[hidden] { display: none; }
+.fx-bulk[aria-busy="true"] { opacity: .7; pointer-events: none; }
+.fx-bulk__acts { display: flex; align-items: center; gap: 2px; min-width: 0; }
+.fx-bulk__count { display: inline-flex; align-items: center; gap: 6px; flex: none; margin-right: 6px; padding: 3px 4px 3px 10px; border: 1px solid var(--t-accent-brd, var(--fx-line)); border-radius: var(--t-radius); background: var(--t-accent-bg); color: var(--t-accent); font-weight: 600; }
+.fx-bulk__clear, .fx-bulk__act { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border: 1px solid transparent; border-radius: var(--t-radius); background: none; color: inherit; font: inherit; cursor: pointer; }
+.fx-bulk__clear { padding: 3px; color: inherit; }
+.fx-bulk__act:hover, .fx-bulk__act:focus-visible, .fx-bulk__act[aria-expanded="true"] { background: var(--fx-hover); color: var(--t-strong); outline: none; }
+.fx-bulk__clear:hover, .fx-bulk__clear:focus-visible { background: color-mix(in srgb, var(--t-accent) 14%, transparent); outline: none; }
+.fx-bulk__act--primary, .fx-bulk__act--primary:hover, .fx-bulk__act--primary:focus-visible { background: var(--t-primary); border-color: var(--t-primary); color: var(--t-on-primary); font-weight: 600; }
+.fx-bulk__act--primary:hover { background: color-mix(in srgb, var(--t-primary) 86%, var(--t-text)); }
+.fx-bulk__act--icon { padding: 7px; }
+.fx-bulk__act[data-tone="danger"] { color: var(--t-danger); }
+.fx-bulk__act[data-tone="danger"]:hover { background: var(--t-danger-bg); }
+.fx-bulk__sep { flex: none; width: 1px; height: 18px; margin: 0 4px; background: var(--fx-line); }
+/* An icon-only action says its name on hover, in a tip above it. */
+.fx-bulk [data-tip]:hover::after, .fx-bulk [data-tip]:focus-visible::after {
+  content: attr(data-tip); position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
+  padding: 4px 8px; border: 1px solid var(--fx-line); border-radius: var(--t-radius); background: var(--t-paper); color: var(--t-strong);
+  font: 500 12px/1.2 var(--t-body); pointer-events: none; box-shadow: var(--t-shadow), 0 4px 12px rgba(0, 0, 0, .12);
+}
+/* More: a compact list, one row per action, like a dropdown. */
+.fx-pop.fx-bulk__more { width: 248px; min-width: 0; padding: 4px; }
+.fx-bulk__search { width: 100%; height: 30px; margin-bottom: 2px; padding: 4px 8px; font-size: 13px; }
+.fx-bulk__more .fx-pop__head { padding: 6px 8px 2px; font-size: 10.5px; }
+.fx-bulk__more .fx-pop__item { gap: 8px; padding: 4px 8px; font-size: 13px; line-height: 1.25; }
+.fx-bulk__more .fx-pop__item .fx-lucide { width: 14px; height: 14px; }
+.fx-bulk__grid { display: grid; }
+.fx-bulk__grid .fx-pop__item[data-tone="danger"] { color: var(--t-danger); }
+.fx-bulk__none { margin: 8px 10px; color: var(--t-dim); font-size: 13.5px; }
+@media (max-width: 560px) {
+  .fx-bulk { bottom: 10px; padding: 4px; }
+  .fx-bulk__count { margin-right: 2px; padding-left: 8px; }
+  .fx-bulk__act { padding: 7px 6px; }
+  .fx-bulk__sep { margin: 0 2px; }
+  .fx-bulk__act:not(.fx-bulk__act--primary) .fx-bulk__word { display: none; }
+}

package/server/ui/invoicing.js

@@ -6,6 +6,7 @@
 // zero, server/core/money.js). Data comes from /api/invoicing
 // (server/api/invoicing.js). app.js passes in its shared pieces as `ui`.
 import { alertStrip } from '/assets/ui/alerts.js';
+import { bulkBar } from '/assets/ui/bulk-bar.js';
 import { draftNote, sendModeNote } from '/assets/ui/invoice-notes.js';
 import { jobChangeBanner } from '/assets/ui/job-change.js';
 
@@ -22,10 +23,10 @@ const VIEW_TONE = { problem: 'danger', ready: 'success', sending: 'info', to_che
 const EMPTY = {
   to_check: 'No drafts to check. Press New invoice to start one.',
   problem: 'No problems.',
-  ready: 'Nothing is ready. Tick drafts and press Move to Ready.',
+  ready: 'Nothing is ready. In Drafts, tick drafts and press Ready.',
 };
-// Tabs whose rows can be ticked, and what the ticked rows can do.
-const TICKS = { to_check: true, ready: true };
+// Every tab's rows can be ticked; the bulk bar (bulkActions) says what the
+// ticked rows can do there.
 
 const money = new Intl.NumberFormat('en-AU', { style: 'currency', currency: 'AUD' });
 export const formatCents = (cents) => money.format((cents ?? 0) / 100);
@@ -120,18 +121,28 @@ export async function renderInvoiceList(main, ui) {
   const search = h('input', { class: 'fx-input fx-search', type: 'search', placeholder: 'Find a number, client or reference', 'aria-label': 'Find an invoice', value: state.q });
   const bar = h('div', { class: 'fx-sendbar', hidden: true });
   const host = h('div', { class: 'fx-panel' }, h('div', { class: 'fx-skeleton' }));
+  const bulk = bulkBar(ui);
   const context = await flow('/api/invoicing/context').catch(() => ({ canIssue: false }));
   let body = null;
   const openTab = (id) => { state.status = id; state.ticked.clear(); sessionStorage.setItem('flow_invoice_tab', id); load(); };
   const alerts = alertStrip(ui, 'invoices', { onTab: openTab });
+  // The tabs, search and send bar stay at the top while the rows scroll up
+  // under them; the bulk bar floats at the foot (ClickUp's layout).
+  const head = h('div', { class: 'fx-listhead' }, h('div', { class: 'fx-toolbar' }, tabs, search), bar);
+  const edge = h('div', { class: 'fx-listhead__edge', 'aria-hidden': 'true' });
   main.append(
     pageHeader('Invoices', {
       actions: [h('a', { class: 'fx-btn fx-btn--primary', href: '/invoices/new', onclick: go }, 'New invoice')],
     }),
     alerts.element,
-    h('div', { class: 'fx-toolbar' }, tabs, search),
-    bar,
-    host);
+    edge,
+    head,
+    host,
+    bulk.element);
+  // A shadow under the head shows once rows scroll under it.
+  if (typeof IntersectionObserver === 'function') {
+    new IntersectionObserver(([entry]) => head.toggleAttribute('data-stuck', !entry.isIntersecting), { rootMargin: `-${head.offsetTop > 0 && window.matchMedia?.('(max-width: 820px)').matches ? 61 : 1}px 0px 0px 0px` }).observe(edge);
+  }
 
   let timer;
   search.addEventListener('input', () => {
@@ -167,19 +178,10 @@ export async function renderInvoiceList(main, ui) {
     const ticked = [...state.ticked];
     const parts = [];
     if (state.status === 'to_check') {
-      parts.push(h('p', { class: 'fx-dim' }, ticked.length ? `${plural(ticked.length, 'draft', 'drafts')} ticked.` : 'Check each draft, tick it, then move it to Ready.'));
-      if (ticked.length) {
-        parts.push(action(`Move ${ticked.length} to Ready`, 'mark-ready', () => ({ invoiceIds: ticked }), (res) => (res.refused.length
-          ? [`${res.marked} ready. ${plural(res.refused.length, 'draft has', 'drafts have')} a problem and moved to Problem.`, 'danger']
-          : [`${plural(res.marked, 'draft', 'drafts')} ready.`, 'success'])));
-      }
+      parts.push(h('p', { class: 'fx-dim' }, 'Check each draft, tick it, then press Ready.'));
     } else if (state.status === 'ready') {
       parts.push(h('p', { class: 'fx-dim' }, sendModeNote(to, body.sendMode)));
       const buttons = [];
-      if (ticked.length) {
-        buttons.push(action(`Move ${ticked.length} to Drafts`, 'mark-not-ready', () => ({ invoiceIds: ticked }),
-          (res) => [`${plural(res.moved, 'invoice', 'invoices')} back in Drafts.`, 'success'], 'ghost'));
-      }
       if (context.canIssue && body.counts.ready > 0) {
         buttons.push(action(to ? `Send all ${body.counts.ready} ready to ${to}` : `Finalise all ${body.counts.ready} ready`, 'send-ready', () => ({ issueDate: localDate() }),
           (res) => [`${res.issued} finalised.${to ? ` They are on the way to ${to}.` : ''}${res.remaining ? ` ${res.remaining} more are ready: press again.` : ''}`, 'success']));
@@ -194,6 +196,162 @@ export async function renderInvoiceList(main, ui) {
     }
     bar.replaceChildren(...parts);
     bar.hidden = !parts.length;
+    bulk.draw({ count: ticked.length, onClear: () => setTicks([]), ...bulkActions(ticked) });
+  }
+
+  // Ticks changed from the bar: the rows draw again with the new ticks.
+  function setTicks(ids) {
+    state.ticked = new Set(ids);
+    if (body) draw(body);
+  }
+
+  // A bulk step on the server: on success the ticks clear and the list loads
+  // again; on a failure the ticks stay, so a person can try again.
+  async function post(path, payload, done) {
+    try {
+      const res = await flow(`/api/invoicing/invoices/${path}`, { method: 'POST', body: JSON.stringify(payload) });
+      toast(...done(res));
+      state.ticked.clear();
+      seen.clear();
+      await load();
+      alerts.refresh();
+    } catch (error) {
+      toast(error.message, 'danger');
+    }
+  }
+
+  // What the ticked rows can do on this tab. The bar shows the main ones;
+  // More shows them all, with Selection steps under them.
+  function bulkActions(ticked) {
+    const to = body.sendsTo;
+    const rows = body.invoices.filter((i) => state.ticked.has(i.id));
+    const numbered = ['issued', 'void'].includes(state.status);
+    const status = [];
+    const apply = [];
+    if (state.status === 'ready' && context.canIssue) {
+      status.push({
+        icon: 'circle-check-big', label: 'Finalise', primary: true,
+        title: to ? `Finalise and send to ${to}` : 'Finalise',
+        run: async () => {
+          const ok = await ui.dialog({
+            title: `Finalise ${plural(ticked.length, 'invoice', 'invoices')}?`,
+            body: h('p', {}, `Each one gets the next number and is locked.${to ? ` ${sendModeNote(to, body.sendMode, 'each one')}` : ''}`),
+            confirm: to ? `Finalise and send ${ticked.length}` : `Finalise ${ticked.length}`,
+          });
+          if (!ok) return;
+          await post('send-ready', { issueDate: localDate(), invoiceIds: ticked },
+            (res) => [`${plural(res.issued, 'invoice', 'invoices')} finalised.${to ? ` They are on the way to ${to}.` : ''}${res.remaining ? ` ${res.remaining} more stay in Ready: tick them and press again.` : ''}`, 'success']);
+        },
+      });
+    }
+    if (state.status === 'ready') {
+      status.push({
+        icon: 'undo-2', label: 'Drafts', title: 'Move to Drafts',
+        run: () => post('mark-not-ready', { invoiceIds: ticked }, (res) => [`${plural(res.moved, 'invoice', 'invoices')} back in Drafts.`, 'success']),
+      });
+    }
+    if (state.status === 'to_check') {
+      status.push({
+        icon: 'check-check', label: 'Ready', primary: true, title: 'Move to Ready',
+        run: () => post('mark-ready', { invoiceIds: ticked }, (res) => (res.refused.length
+          ? [`${res.marked} ready. ${plural(res.refused.length, 'draft has', 'drafts have')} a problem and moved to Problem.`, 'danger']
+          : [`${plural(res.marked, 'draft', 'drafts')} ready.`, 'success'])),
+      });
+    }
+    const failed = rows.filter((i) => i.status === 'issued').map((i) => i.id);
+    if (state.status === 'problem' && context.canIssue && to && failed.length) {
+      status.push({
+        icon: 'refresh-cw', label: 'Retry', primary: true, title: `Send again to ${to}`,
+        run: () => post('send-again', { invoiceIds: failed }, (res) => [`${res.queued} on the way to ${to} again.`, 'success']),
+      });
+    }
+    apply.push({
+      icon: 'copy', label: 'Copy', iconOnly: true, title: numbered ? 'Copy numbers' : 'Copy references',
+      run: () => copyLines(rows.map((i) => (numbered ? i.number : i.reference) ?? i.contactName ?? '')),
+    });
+    apply.push({ icon: 'download', label: 'Export', iconOnly: true, title: 'Export CSV', run: () => exportCsv(rows) });
+    if (numbered) apply.push({ icon: 'file-down', label: 'PDFs', iconOnly: true, title: 'Download PDFs', run: () => downloadPdfs(rows) });
+    const danger = [];
+    const voidable = rows.filter((i) => i.status === 'issued');
+    if (state.status === 'issued' && context.canIssue && voidable.length) {
+      danger.push({
+        icon: 'ban', label: 'Void', iconOnly: true, tone: 'danger', title: 'Void',
+        run: () => voidAll(voidable),
+      });
+    }
+    const all = body.invoices.map((i) => i.id);
+    const selection = [
+      { icon: 'list-checks', label: 'Tick all shown', run: () => setTicks(all) },
+      { icon: 'square-check', label: 'Invert ticks', run: () => setTicks(all.filter((id) => !state.ticked.has(id))) },
+      { icon: 'square-x', label: 'Clear ticks', run: () => setTicks([]) },
+    ];
+    return {
+      groups: [status, apply, danger],
+      more: [
+        { head: 'Change status', actions: [...status, ...danger] },
+        { head: 'Apply an action', actions: apply },
+        { head: 'Selection', actions: selection },
+      ],
+    };
+  }
+
+  async function copyLines(lines) {
+    try {
+      await navigator.clipboard.writeText(lines.join('\n'));
+      toast(`${plural(lines.length, 'line', 'lines')} copied.`, 'success');
+    } catch {
+      toast('The browser did not allow a copy.', 'danger');
+    }
+  }
+
+  // The ticked rows as a CSV file, with the columns on the screen.
+  function exportCsv(rows) {
+    const cell = (v) => (/[",\n]/.test(String(v ?? '')) ? `"${String(v).replace(/"/g, '""')}"` : String(v ?? ''));
+    const lines = [['Number', 'Client', 'Reference', 'Date', 'Total', 'Status']]
+      .concat(rows.map((i) => [i.number ?? '', i.contactName ?? '', i.reference ?? '', i.issueDate ?? i.createdAt?.slice(0, 10) ?? '',
+        ((i.totalCents ?? 0) / 100).toFixed(2), i.status === 'void' ? 'Void' : VIEW_LABEL[i.view] ?? STATUS_LABEL[i.status]]));
+    save(new Blob([lines.map((l) => l.map(cell).join(',')).join('\r\n')], { type: 'text/csv' }), `invoices-${state.status}-${localDate()}.csv`);
+    toast(`${plural(rows.length, 'invoice', 'invoices')} exported.`, 'success');
+  }
+
+  async function downloadPdfs(rows) {
+    const token = await window.Clerk?.session?.getToken();
+    let saved = 0;
+    for (const invoice of rows) {
+      try {
+        const res = await fetch(`/api/invoicing/invoices/${invoice.id}/pdf`, { headers: { Authorization: `Bearer ${token}` } });
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        save(await res.blob(), `${invoice.number ?? invoice.id}.pdf`);
+        saved += 1;
+      } catch {
+        // The toast below counts the ones that did not save.
+      }
+    }
+    toast(saved === rows.length ? `${plural(saved, 'PDF', 'PDFs')} saved.` : `${saved} of ${rows.length} PDFs saved.`, saved === rows.length ? 'success' : 'danger');
+  }
+
+  // Void, one invoice after the other, as on one invoice's page.
+  async function voidAll(rows) {
+    const ok = await ui.dialog({
+      title: `Void ${plural(rows.length, 'invoice', 'invoices')}?`,
+      body: h('div', {}, h('p', {}, 'Their numbers stay used. A void invoice cannot be finalised again.'),
+        body.sendsTo ? h('p', { class: 'fx-problem' }, `Flow does not change ${body.sendsTo}: void them in ${body.sendsTo} too.`) : null),
+      confirm: `Void ${rows.length}`, tone: 'danger',
+    });
+    if (!ok) return;
+    let done = 0;
+    let error = null;
+    for (const invoice of rows) {
+      try {
+        await flow(`/api/invoicing/invoices/${invoice.id}/void`, { method: 'POST', body: '{}' });
+        done += 1;
+      } catch (e) { error = e; }
+    }
+    toast(error ? `${done} of ${rows.length} void. ${error.message}` : `${plural(done, 'invoice', 'invoices')} void.`, error ? 'danger' : 'success');
+    state.ticked.clear();
+    seen.clear();
+    await load();
+    alerts.refresh();
   }
 
   // A tab switch shows at once: the tab is selected, the last list seen for
@@ -257,7 +415,6 @@ export async function renderInvoiceList(main, ui) {
     saveNav({ tab: state.status, q: state.q, ids: body.invoices.map((i) => i.id) });
     const open = (href) => { saveNav({ ...readNav(), scrollY: window.scrollY }); go(href); };
     const link = (href, label) => h('a', { class: 'fx-strong', href, onclick: (event) => { event.preventDefault(); event.stopPropagation(); open(href); } }, label);
-    const ticks = TICKS[state.status];
     const showProblem = state.status === 'problem';
     const created = ['to_check', 'problem', 'ready'].includes(state.status);
     // An invoice gets its number when it is sent or issued, so only the
@@ -280,6 +437,7 @@ export async function renderInvoiceList(main, ui) {
     };
     const all = h('input', {
       type: 'checkbox', class: 'fx-tick', 'aria-label': 'Tick every invoice shown',
+      ...(state.ticked.size && body.invoices.every((i) => state.ticked.has(i.id)) ? { checked: true } : {}),
       onchange: () => {
         for (const invoice of body.invoices) { if (all.checked) state.ticked.add(invoice.id); else state.ticked.delete(invoice.id); }
         for (const box of boxes) box.checked = all.checked;
@@ -289,7 +447,7 @@ export async function renderInvoiceList(main, ui) {
     const statusCells = new Map();
     host.replaceChildren(h('table', { class: 'fx-table fx-table--rows' },
       h('thead', {}, h('tr', {},
-        ticks ? h('th', { class: 'fx-tick-cell' }, all) : null,
+        h('th', { class: 'fx-tick-cell' }, all),
         numbered ? h('th', {}, 'Number') : null, h('th', {}, 'Client'), h('th', {}, showProblem ? 'Problem' : 'Reference'),
         h('th', {}, created ? 'Created' : 'Finalised'), h('th', { class: 'fx-num' }, 'Total'), h('th', {}, 'Status'),
         linked ? h('th', {}, 'Linked') : null)),
@@ -298,7 +456,7 @@ export async function renderInvoiceList(main, ui) {
         const first = invoice.problems?.[0];
         const view = invoice.status === 'void' ? null : invoice.view;
         return h('tr', { tabindex: '0', onclick: () => open(href), onkeydown: (event) => { if (event.key === 'Enter') open(href); } },
-          ticks ? h('td', { class: 'fx-tick-cell', onclick: (event) => event.stopPropagation() }, tickBox(invoice)) : null,
+          h('td', { class: 'fx-tick-cell', onclick: (event) => event.stopPropagation() }, tickBox(invoice)),
           numbered ? h('td', {}, link(href, invoice.number ?? 'Draft')) : null,
           h('td', {}, numbered ? (invoice.contactName ?? '—') : link(href, invoice.contactName ?? 'No client')),
           showProblem
@@ -336,6 +494,18 @@ export async function renderInvoiceList(main, ui) {
   if (returning && back?.scrollY) window.scrollTo(0, back.scrollY);
 }
 
+// A file the browser saves, from a blob made on this page.
+function save(blob, name) {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = name;
+  document.body.append(a);
+  a.click();
+  a.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 60_000);
+}
+
 // The list an invoice was opened from: its tab, search, invoice ids in order,
 // and scroll. The invoice page's bar steps through it and goes back to it.
 const NAV = 'flow_invoice_nav';
@@ -435,16 +605,46 @@ function totalsBox(ui, { subtotalCents, taxCents, totalCents }) {
     h('dt', { class: 'fx-totals__grand' }, 'Total'), h('dd', { class: 'fx-totals__grand' }, formatCents(totalCents)));
 }
 
-// The job an invoice bills. The case id stays on the record, not on screen.
-function jobCard(ui, job) {
+// The Linked card: this invoice's link in each connected system (linksTo).
+// A work system row names the job's order and opens it there; the
+// accounting row gives the number and state there (from Flow's copy). A
+// system with no link shows a dashed row. With no system on, the card holds
+// the job's facts only.
+function linkedCard(ui, invoice, accountingStatus = null) {
   const { h } = ui;
-  if (!job) return null;
+  const job = invoice?.job ?? null;
+  const systems = invoice?.linksTo ?? [];
+  if (!job && !systems.length) return null;
+  const facts = job && (job.practitioner || job.shippedOn) ? h('dl', { class: 'fx-facts' },
+    job.practitioner ? [h('dt', {}, 'Practitioner'), h('dd', {}, job.practitioner)] : null,
+    job.shippedOn ? [h('dt', {}, 'Shipped'), h('dd', {}, showDate(job.shippedOn))] : null) : null;
+  const row = (system, { tone = null, ref = null, state = null, url = null, none = null }) => h('div', { class: 'fx-linked__row' },
+    linkIcon(ui, system, { tone, title: none ?? `${system.name}${ref ? ` ${ref}` : ''}` }),
+    h('span', { class: 'fx-strong' }, system.name),
+    ref ? h('span', { class: 'fx-linked__ref' }, ref) : null,
+    state ? h('span', { class: 'fx-status', 'data-tone': tone ?? 'mute' }, state) : null,
+    none ? h('span', { class: 'fx-dim' }, none) : null,
+    url ? h('a', { class: 'fx-linked__open', href: url, target: '_blank', rel: 'noopener', title: `Open in ${system.name}` }, 'Open ↗') : null);
+  const rows = systems.map((system) => {
+    if (system.kind === 'work') {
+      return job?.sourceSystem === system.id
+        ? row(system, { tone: 'success', ref: job.caseRef ?? job.sourceJobRef, url: job.link?.url ?? null })
+        : row(system, { none: 'No job linked' });
+    }
+    const status = accountingStatus;
+    if (!status || (status.state === 'not_sent' && !status.finding)) {
+      return row(system, { none: invoice?.status === 'draft' ? 'Goes there when sent' : `Not in ${system.name} yet` });
+    }
+    const tone = status.finding ? 'danger' : LINK_TONE[status.state] ?? 'mute';
+    const state = status.finding ? 'Out of sync' : status.label.replace(` in ${system.name}`, '');
+    return row(system, { tone, ref: status.xero?.number ?? null, state, url: status.xero?.url ?? null });
+  });
+  const workRows = systems.some((s) => s.kind === 'work');
   return h('section', { class: 'fx-card fx-side-card' },
-    h('h3', { class: 'fx-label' }, 'Job'),
-    h('dl', { class: 'fx-facts' },
-      job.practitioner ? [h('dt', {}, 'Practitioner'), h('dd', {}, job.practitioner)] : null,
-      job.shippedOn ? [h('dt', {}, 'Shipped'), h('dd', {}, showDate(job.shippedOn))] : null,
-      h('dt', {}, 'From'), h('dd', {}, job.sourceSystem === 'seazona' ? 'Seazona' : job.sourceSystem)));
+    h('h3', { class: 'fx-label' }, 'Linked'),
+    !workRows && job ? h('p', { class: 'fx-dim' }, `Job from ${job.systemName ?? job.sourceSystem}`) : null,
+    h('div', { class: 'fx-linked' }, rows),
+    facts);
 }
 
 // A draft, or a new invoice before its first save.
@@ -796,7 +996,7 @@ function draftView(invoice, ui, context, redraw) {
           h('div', { class: 'fx-lines__foot' },
             h('button', { class: 'fx-btn fx-btn--ghost fx-btn--sm', type: 'button', onclick: () => { lines.push({ description: '', quantity: 1, unitAmountCents: null, taxCode: 'GST', priceItemId: null }); drawLines(); } }, '+ Add line'),
             totalsHost))),
-      h('aside', { class: 'fx-invoice__aside' }, statusCard, jobCard(ui, invoice?.job))),
+      h('aside', { class: 'fx-invoice__aside' }, statusCard, linkedCard(ui, invoice))),
   ].map((part) => {
     // Any edit on the page shows Save changes; undoing it hides it again.
     for (const kind of ['input', 'change', 'click']) part?.addEventListener?.(kind, () => setTimeout(watchChanges));
@@ -855,12 +1055,14 @@ function issuedView(invoice, ui, context, redraw) {
   };
   const organisationId = context.organisations?.[0]?.id;
   const xeroHost = h('div');
+  const linkedHost = h('div', {}, linkedCard(ui, invoice) ?? '');
   let xeroStatus = null;
   const send = invoice.status === 'issued' && context.canIssue ? sendToXero(invoice, ui, context) : null;
   const loadXero = async () => {
     if (!context.xero) return;
     xeroStatus = (await xeroStatuses(ui, organisationId, [invoice.id])).get(invoice.id) ?? null;
     xeroHost.replaceChildren(xeroCard(invoice, ui, context, xeroStatus, loadXero) ?? '');
+    linkedHost.replaceChildren(linkedCard(ui, invoice, xeroStatus) ?? '');
     if (xeroStatus && xeroStatus.state !== 'not_sent') showSent(send);
   };
   loadXero();
@@ -905,8 +1107,8 @@ function issuedView(invoice, ui, context, redraw) {
               h('td', { class: 'fx-num fx-strong' }, formatCents(line.lineAmountCents)))))),
           h('div', { class: 'fx-lines__foot' }, h('span'), totalsBox(ui, invoice)))),
       h('aside', { class: 'fx-invoice__aside' },
+        linkedHost,
         xeroHost,
-        jobCard(ui, invoice.job),
         invoice.versions?.length ? h('section', { class: 'fx-card fx-side-card' },
           h('h3', { class: 'fx-label' }, 'History'),
           h('ol', { class: 'fx-timeline' }, invoice.versions.map((v) => h('li', {},
@@ -920,7 +1122,9 @@ function issuedView(invoice, ui, context, redraw) {
 // never writes to Xero: a person fixes the difference where they choose.
 function xeroCard(invoice, ui, context, status, reload) {
   const { h, flow, toast } = ui;
-  if (!status || (status.state === 'not_sent' && !status.finding)) return null;
+  // The Linked card shows Xero's number and state; this card shows only a
+  // difference to resolve.
+  if (!status?.finding) return null;
   const rows = status.differences.map((d) => h('tr', {},
     h('td', {}, FIELD_LABEL[d.field] ?? d.field),
     h('td', { class: 'fx-num' }, showField(d.field, d.flow)),