@arcforgelabs/flow 2026.10.35 → 2026.10.37

package/server/integrations/xero/index.js

@@ -75,10 +75,10 @@ export function createXeroAdapter({ runtime: given = null } = {}) {
       if (!given) runtime = createXeroRuntime({ settings: requireXeroSettings(env ?? process.env) });
       const { settings } = current();
       if (reconfigured) await current().guardFor(db).resume();
-      log.info?.(`[xero] mode ${settings.mode}; writes ${writesAllowed(settings) ? 'on' : 'off (XERO_ALLOW_LIVE_WRITES)'}; redirect URI ${settings.redirectUri ?? 'not set (FLOW_PUBLIC_ORIGIN)'}`);
+      log.info?.(`[xero] mode ${settings.mode}; writes ${writesAllowed(settings) ? 'on' : settings.backgroundJobs === false ? 'off (FLOW_BACKGROUND_JOBS)' : 'off (XERO_ALLOW_LIVE_WRITES)'}; redirect URI ${settings.redirectUri ?? 'not set (FLOW_PUBLIC_ORIGIN)'}`);
       // The history import (import.js) runs in the background outside replay
-      // mode. Replay tests run its slices directly.
-      if (settings.mode !== 'replay') {
+      // mode, where background jobs run. Replay tests run its slices directly.
+      if (settings.mode !== 'replay' && settings.backgroundJobs !== false) {
         importer = createImportWorker({ db, runtime: current(), log });
         await importer.start();
       }

package/server/integrations/xero/settings.js

@@ -11,6 +11,8 @@
 //   replay   no network: recorded, synthetic Xero responses
 //            (server/integrations/xero/fixtures). Development and CI.
 
+import { backgroundJobsOn } from '../../core/host.js';
+
 export const XERO_MODES = Object.freeze(['live', 'sandbox', 'replay']);
 
 // Xero's own public endpoints. They are the same for every installation.
@@ -154,6 +156,9 @@ export function resolveXeroSettings(env = process.env) {
     tenantId,
     tenantName,
     liveWrites: readOnOff(env, 'XERO_ALLOW_LIVE_WRITES'),
+    // Off in a Replit workspace (server/core/host.js): no history read and
+    // no writes, whatever XERO_ALLOW_LIVE_WRITES says.
+    backgroundJobs: backgroundJobsOn(env),
     dayLimit: readPositiveInteger(env, 'XERO_DAY_LIMIT', DEFAULT_XERO_DAY_LIMIT),
     usageWarningFraction: readFraction(env, 'XERO_USAGE_WARNING_FRACTION', 0.7),
     taxTypes: resolveTaxTypes(env),
@@ -177,5 +182,6 @@ export function resolveXeroSettings(env = process.env) {
 // Whether this installation may write to Xero now. Reads always may.
 export function writesAllowed(settings) {
   if (!settings) return false;
+  if (settings.backgroundJobs === false) return false;
   return settings.mode !== 'live' || settings.liveWrites === true;
 }

package/server/ui/app.js

@@ -13,7 +13,7 @@ import { renderInvoice, renderInvoiceList } from '/assets/ui/invoicing.js';
 import { automationSection } from '/assets/ui/automations.js';
 import { renderInvoicingSettings, sendModeSection } from '/assets/ui/invoicing-settings.js';
 import { renderPriceList } from '/assets/ui/price-list.js';
-import { renderCustomFields } from '/assets/ui/custom-fields.js';
+import { lucide, renderCustomFields } from '/assets/ui/custom-fields.js';
 import { renderJobs } from '/assets/ui/jobs.js';
 import { startMonitoring } from '/assets/ui/monitoring.js';
 import { openSearch } from '/assets/ui/search.js';
@@ -59,6 +59,7 @@ function mountClerk(kind, element, options = {}) {
   // The "Manage account" modal does not inherit the button's appearance.
   if (kind === 'userButton') props.userProfileProps = { ...options.userProfileProps, appearance: clerkAppearance('modal') };
   if (kind === 'signIn') Clerk.mountSignIn(element, props);
+  else if (kind === 'signUp') Clerk.mountSignUp(element, props);
   else if (kind === 'userButton') Clerk.mountUserButton(element, props);
   else if (kind === 'profile') Clerk.mountUserProfile(element, props);
   mounted.set(element, { kind, options });
@@ -69,6 +70,7 @@ function unmountClerk(element) {
   if (!entry) return;
   const Clerk = window.Clerk;
   if (entry.kind === 'signIn') Clerk.unmountSignIn(element);
+  else if (entry.kind === 'signUp') Clerk.unmountSignUp(element);
   else if (entry.kind === 'userButton') Clerk.unmountUserButton(element);
   else if (entry.kind === 'profile') Clerk.unmountUserProfile(element);
   mounted.delete(element);
@@ -181,12 +183,13 @@ function statusPill(person) {
   if (person.status === 'pending') return h('span', { class: 'fx-status', 'data-tone': 'warn' }, 'Waiting for approval');
   if (person.status === 'disabled') return h('span', { class: 'fx-status', 'data-tone': 'mute' }, 'Turned off');
   if (person.invited) return h('span', { class: 'fx-status', 'data-tone': 'info' }, 'Invited');
-  return h('span', { class: 'fx-status', 'data-tone': 'success' }, 'Active');
+  // Active is the usual state, so it shows nothing.
+  return null;
 }
 
 function roleSelect(value, attrs = {}) {
   return h('select', { class: 'fx-select', ...attrs },
-    ['owner', 'admin', 'staff'].map((role) => h('option', { value: role, selected: role === value }, ROLE_LABEL[role])));
+    ['owner', 'admin', 'staff'].map((role) => h('option', { value: role, selected: role === value, title: ROLE_HINT[role] }, ROLE_LABEL[role])));
 }
 
 // ── Views ──────────────────────────────────────────────────────────────────
@@ -284,6 +287,13 @@ document.addEventListener('keydown', (event) => {
 document.addEventListener('click', (event) => {
   if (!event.target.closest?.('.fx-side') || event.target.closest?.('[data-nav]')) closeMenu();
 });
+// Folded, a click on the sidebar's empty space opens it out again, as in
+// Claude. A click on a page, the account photo or Search still does its job.
+document.addEventListener('click', (event) => {
+  if (NARROW.matches || !readFolded() || !event.target.closest?.('.fx-side')) return;
+  if (event.target.closest('a, button, input, select, textarea, [role="button"], [role="menuitem"], #user-button')) return;
+  toggleMenu();
+});
 
 // Search, from the sidebar foot or Ctrl+K (⌘K): the pages this person may
 // open, invoices and jobs (search.js).
@@ -363,6 +373,13 @@ function renderSignedOut() {
   document.body.dataset.state = 'signed-out';
   document.title = 'Sign in · Flow';
   const panel = $('sign-in');
+  // The link in an invitation email (POST /api/people) carries a Clerk
+  // ticket: the invitee makes their account here, on that address only.
+  if (new URLSearchParams(location.search).has('__clerk_ticket')) {
+    $('sign-in-note').textContent = 'Finish your invitation to Flow.';
+    mountClerk('signUp', panel, { forceRedirectUrl: '/sign-in', signInUrl: '/sign-in' });
+    return;
+  }
   $('sign-in-note').textContent = config.publicSignUp
     ? 'Sign in, or ask for access with your work email.'
     : 'Sign in with the account you were invited with.';
@@ -442,13 +459,12 @@ function renderNoAccess(error) {
 // removes. Managing people needs a verified owner sign-in (/api/me says).
 async function renderPeople(main) {
   const canManage = Boolean(me.ownerActions?.allowed);
-  const invite = h('button', { class: 'fx-btn fx-btn--primary', type: 'button', disabled: !canManage, onclick: () => invitePerson() }, 'Invite someone');
+  const invite = h('button', { class: 'fx-btn fx-btn--primary', type: 'button', disabled: !canManage, onclick: () => invitePerson() }, 'Invite');
   const tableHost = h('div', { class: 'fx-panel' }, h('div', { class: 'fx-skeleton' }));
   main.append(...[
-    pageHeader('People', { subtitle: 'Who can sign in to Flow, and what each person can do.', actions: [invite] }),
+    pageHeader('People', { actions: [invite] }),
     canManage ? null : notice('Managing people needs a verified owner sign-in: Google Workspace on the owner domain with no password, or a second factor.', 'warn', 'Read only.'),
     tableHost,
-    h('dl', { class: 'fx-roles' }, ['owner', 'admin', 'staff'].flatMap((role) => [h('dt', {}, ROLE_LABEL[role]), h('dd', {}, ROLE_HINT[role])])),
   ].filter(Boolean));
   if (!canManage) {
     tableHost.replaceChildren(h('p', { class: 'fx-empty' }, 'The people list opens after a verified owner sign-in.'));
@@ -469,12 +485,34 @@ async function refreshPeople(host) {
   const rows = people.map((person) => personRow(person, host));
   host.replaceChildren(...[
     waiting ? notice(`${waiting} ${waiting === 1 ? 'person is' : 'people are'} waiting for approval.`, 'info') : null,
-    h('table', { class: 'fx-table' },
-      h('thead', {}, h('tr', {}, h('th', {}, 'Person'), h('th', {}, 'Role'), h('th', {}, 'Access'), h('th', { class: 'fx-table__actions' }, h('span', { class: 'fx-sr' }, 'Actions')))),
+    h('table', { class: 'fx-table fx-people' },
+      h('thead', { class: 'fx-sr' }, h('tr', {}, h('th', {}, 'Person'), h('th', {}, 'Role'), h('th', {}, 'Access'), h('th', {}, 'Actions'))),
       h('tbody', {}, rows)),
   ].filter(Boolean));
 }
 
+let peopleMenus = 0;
+
+// A row's ⋯ menu, as on the Custom fields page.
+function rowMenu(label, items) {
+  const id = `fx-people-menu-${++peopleMenus}`;
+  const button = h('button', { class: 'fx-cfm__more', type: 'button', 'aria-label': label, popovertarget: id, 'aria-haspopup': 'menu', 'aria-expanded': 'false' }, 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 at = button.getBoundingClientRect();
+    panel.style.top = `${Math.round(at.bottom + 6)}px`;
+    panel.style.left = `${Math.round(Math.max(8, Math.min(at.right - panel.offsetWidth, innerWidth - panel.offsetWidth - 8)))}px`;
+  });
+  return [button, panel];
+}
+
 function personRow(person, host) {
   const self = person.id === me.person.id;
   const act = async (fn, done) => {
@@ -493,24 +531,28 @@ function personRow(person, host) {
       h('span', { class: 'fx-person__name' }, person.name || person.email, self ? h('span', { class: 'fx-tag' }, 'You') : null),
       person.name ? h('span', { class: 'fx-person__email' }, person.email) : null));
   const role = self
-    ? h('span', {}, ROLE_LABEL[person.role])
+    ? h('span', { title: ROLE_HINT[person.role] }, ROLE_LABEL[person.role])
     : roleSelect(person.role, {
       'aria-label': `Role for ${person.email}`,
+      title: ROLE_HINT[person.role],
       onchange: (event) => act(() => patch({ role: event.target.value }), `${person.email} is now ${ROLE_LABEL[event.target.value].toLowerCase()}.`),
     });
   const actions = [];
   if (!self) {
     if (person.status === 'pending') {
       actions.push(h('button', { class: 'fx-btn fx-btn--primary fx-btn--sm', type: 'button', onclick: () => act(() => patch({ status: 'active' }), `${person.email} can sign in.`) }, 'Approve'));
-    } else if (person.status === 'active') {
-      actions.push(h('button', { class: 'fx-btn fx-btn--sm', type: 'button', onclick: () => act(() => patch({ status: 'disabled' }), `${person.email} is turned off.`) }, 'Turn off'));
-    } else {
-      actions.push(h('button', { class: 'fx-btn fx-btn--sm', type: 'button', onclick: () => act(() => patch({ status: 'active' }), `${person.email} is turned on.`) }, 'Turn on'));
     }
-    actions.push(h('button', {
-      class: 'fx-btn fx-btn--ghost fx-btn--danger fx-btn--sm',
-      type: 'button',
-      onclick: async () => {
+    const items = [];
+    if (person.invited && person.status === 'active') {
+      items.push({ icon: 'mail', text: 'Email invite again', run: () => act(() => flow(`/api/people/${person.id}/invite`, { method: 'POST' }), `Invite emailed to ${person.email}.`) });
+    }
+    if (person.status === 'active') items.push({ icon: 'circle-off', text: 'Turn off', run: () => act(() => patch({ status: 'disabled' }), `${person.email} is turned off.`) });
+    if (person.status === 'disabled') items.push({ icon: 'circle-check', text: 'Turn on', run: () => act(() => patch({ status: 'active' }), `${person.email} is turned on.`) });
+    items.push('-', {
+      icon: 'trash-2',
+      text: 'Remove',
+      tone: 'danger',
+      run: async () => {
         const ok = await dialog({
           title: `Remove ${person.email}?`,
           body: h('p', {}, 'They can no longer sign in to Flow. Records they made stay.'),
@@ -519,7 +561,8 @@ function personRow(person, host) {
         });
         if (ok) await act(() => flow(`/api/people/${person.id}`, { method: 'DELETE' }), `${person.email} is removed.`);
       },
-    }, 'Remove'));
+    });
+    actions.push(...rowMenu(`More for ${person.email}`, items));
   }
   return h('tr', {},
     h('td', {}, who),
@@ -907,7 +950,27 @@ function xeroConnection(organisations, canChange) {
   return h('div', {}, h('h2', { class: 'fx-int-section__title' }, 'Xero organisation'), host);
 }
 
+// When Clerk cannot email an invitation, the owner sends the invitee this
+// message instead. It names the sign-in address and the email to use.
+function inviteMessage(person) {
+  return [
+    'You have access to Flow.',
+    `Sign in at ${location.origin}/sign-in with ${person.email}.`,
+    'Use Continue with Google if that address is a Google account.',
+  ].join('\n');
+}
+
+async function copyInvite(person) {
+  try {
+    await navigator.clipboard.writeText(inviteMessage(person));
+    return true;
+  } catch {
+    return false;
+  }
+}
+
 async function invitePerson() {
+  const hint = h('p', { class: 'fx-dim' }, ROLE_HINT.staff);
   const data = await dialog({
     title: 'Invite someone',
     body: h('div', { class: 'fx-fields' },
@@ -916,14 +979,16 @@ async function invitePerson() {
         h('input', { class: 'fx-input', name: 'email', type: 'email', required: true, autocomplete: 'off', placeholder: 'name@example.com' })),
       h('label', { class: 'fx-field' },
         h('span', { class: 'fx-label' }, 'Role'),
-        roleSelect('staff', { name: 'role' })),
-      h('p', { class: 'fx-dim' }, 'They sign in with this email. Flow prepares their sign-in account.')),
-    confirm: 'Send invitation',
+        roleSelect('staff', { name: 'role', onchange: (event) => { hint.textContent = ROLE_HINT[event.target.value]; } })),
+      hint),
+    confirm: 'Send invite',
   });
   if (!data) return;
   try {
-    await flow('/api/people', { method: 'POST', body: JSON.stringify({ email: data.get('email'), role: data.get('role') }) });
-    toast(`${data.get('email')} is invited.`, 'success');
+    const { person, invite } = await flow('/api/people', { method: 'POST', body: JSON.stringify({ email: data.get('email'), role: data.get('role') }) });
+    if (invite?.emailed) toast(`Invite emailed to ${person.email}.`, 'success');
+    else if (await copyInvite(person)) toast(`${person.email} is invited, but the email could not be sent. A sign-in message is copied: paste it into an email to them.`, 'info');
+    else toast(`${person.email} is invited, but the email could not be sent. Send them: ${inviteMessage(person)}`, 'info');
   } catch (error) {
     toast(error.message, 'danger');
   }

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 };
+}