@arcforgelabs/flow 2026.10.36 → 2026.10.37

package/npm-shrinkwrap.json

@@ -1,12 +1,12 @@
 {
   "name": "@arcforgelabs/flow",
-  "version": "2026.10.36",
+  "version": "2026.10.37",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@arcforgelabs/flow",
-      "version": "2026.10.36",
+      "version": "2026.10.37",
       "license": "MIT",
       "dependencies": {
         "@clerk/backend": "3.25.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcforgelabs/flow",
-  "version": "2026.10.36",
+  "version": "2026.10.37",
   "description": "Invoicing, bill entry and a financial dashboard for labs, with Seazona and Xero integrations.",
   "license": "MIT",
   "repository": {

package/server/api/invoicing.js

@@ -245,6 +245,13 @@ function withLink(job, systems) {
   return { ...job, systemName: source?.name ?? job.sourceSystem, link: link ?? null };
 }
 
+// The connected systems an invoice can link to: work systems, then the
+// accounting system.
+const linkedSystems = (work, accounting) => [
+  ...work.map((a) => ({ id: a.id, name: a.name, kind: 'work' })),
+  ...(accounting ? [{ id: accounting.id, name: accounting.name, kind: 'accounting' }] : []),
+];
+
 async function jobsByInvoice(db, organisationId, invoiceIds) {
   if (!invoiceIds.length) return new Map();
   const rows = await db.select().from(billingObligations)
@@ -291,7 +298,9 @@ async function invoiceDetail(db, organisationId, invoiceId, accounting = null, w
       ? { mode: await sendModeFor(db, organisationId, invoice.contactId), otherCustomers: 0, ...(await accounting.capabilities.sendStatus({ organisationId })) }
       : null,
     contact: contact ?? null,
-    job: jobs.get(invoiceId) ?? null,
+    job: withLink(jobs.get(invoiceId) ?? null, work),
+    // The Linked card: each connected system, and this invoice's link there.
+    linksTo: linkedSystems(work, accounting),
     versions: versions.map(({ version, issuedAt, issuedBy }) => ({ version, issuedAt, issuedBy })),
   };
 }
@@ -374,7 +383,7 @@ export function createInvoicingRouter({
       sendsTo: system?.name ?? null,
       sendMode: mode,
       // The Linked column: one icon for each connected system.
-      linksTo: [...systems.map((a) => ({ id: a.id, name: a.name, kind: 'work' })), ...(system ? [{ id: system.id, name: system.name, kind: 'accounting' }] : [])],
+      linksTo: linkedSystems(systems, system),
     });
   }));
 

package/server/auth/clerk.js

@@ -8,6 +8,9 @@ import { normaliseEmail } from './people.js';
 //   getUser(clerkUserId)     the Clerk user (emails, external accounts)
 //   findUserIdByEmail(email) the Clerk user with this email, or null
 //   createUser({ email })    a Clerk account with no password, for an invitee
+//   deleteUser(clerkUserId)  removes a Clerk account (an unused invitee's only)
+//   inviteByEmail({ email, redirectUrl })
+//                            Clerk emails an invitation link to `email`
 //
 // The real one is loaded only when FLOW_AUTH=clerk.
 export async function loadClerkAdapter({ secretKey, publishableKey, proxyUrl, authorizedParties = [] }) {
@@ -36,9 +39,41 @@ export async function loadClerkAdapter({ secretKey, publishableKey, proxyUrl, au
       const user = await client.users.createUser({ emailAddress: [email], skipPasswordRequirement: true });
       return user.id;
     },
+    async deleteUser(clerkUserId) {
+      await client.users.deleteUser(clerkUserId);
+    },
+    // Clerk sends the email. Its link opens `redirectUrl` with a sign-up
+    // ticket; a pending invitation for the same address is replaced.
+    async inviteByEmail({ email, redirectUrl }) {
+      await client.invitations.createInvitation({ emailAddress: email, redirectUrl, notify: true, ignoreExisting: true });
+    },
   };
 }
 
+// A Clerk account nobody has used: never signed in, no password and no
+// connected account. Flow made it for an invitee (ensureClerkAccount).
+export function unusedClerkAccount(clerkUser) {
+  return Boolean(clerkUser)
+    && !clerkUser.lastSignInAt
+    && clerkUser.passwordEnabled === false
+    && !(Array.isArray(clerkUser.externalAccounts) && clerkUser.externalAccounts.length);
+}
+
+// Has Clerk email an invitation to `email`. Clerk does not invite an address
+// that already has an account, so an unused account Flow made earlier is
+// removed first; the invitee's account is made when they take up the
+// invitation. An address with a used account gets no email: that person can
+// already sign in. Returns { emailed }.
+export async function sendClerkInvitation(clerk, email, redirectUrl) {
+  const existing = await clerk.findUserIdByEmail(email);
+  if (existing) {
+    if (!unusedClerkAccount(await clerk.getUser(existing))) return { emailed: false };
+    await clerk.deleteUser(existing);
+  }
+  await clerk.inviteByEmail({ email, redirectUrl });
+  return { emailed: true };
+}
+
 // An invitee needs a Clerk account before their first sign-in, because with
 // public sign-up off Flow's sign-in page never creates one. The account has
 // the invitee's email (verified, since the backend made it) and no password;

package/server/auth/routes.js

@@ -1,9 +1,10 @@
 import express from 'express';
 import { FlowError } from '../core/errors.js';
 import { rateLimit } from '../rate-limit.js';
-import { ensureClerkAccount } from './clerk.js';
+import { ensureClerkAccount, sendClerkInvitation } from './clerk.js';
 import {
   findPersonByEmail,
+  findPersonById,
   invitePerson,
   listPeople,
   normaliseEmail,
@@ -139,23 +140,61 @@ export function createSignInRouter({ settings, db, clerk, personAuth, defaultFam
     }
   });
 
-  // Invite someone. Flow also makes sure they have a Clerk account, because
-  // with public sign-up off the sign-in page never creates one.
+  // The invitation email's link opens this installation's sign-in page.
+  const signInUrl = (req) => `${req.protocol}://${req.get('host')}/sign-in`;
+
+  // Clerk emails the invitation. If Clerk cannot, Flow makes the invitee's
+  // Clerk account itself (with public sign-up off the sign-in page never
+  // creates one) and the owner sends the sign-in message by hand.
+  async function inviteWithClerk(req, email) {
+    try {
+      return await sendClerkInvitation(clerk, email, signInUrl(req));
+    } catch (error) {
+      log.error?.(`[people] Clerk invitation email failed: ${error.message}`);
+    }
+    await ensureClerkAccount(clerk, email);
+    return { emailed: false };
+  }
+
+  // Invite someone.
   people.post('/', async (req, res) => {
     try {
       const email = normaliseEmail(req.body?.email);
       const role = req.body?.role;
       if (!isPlainEmail(email)) throw new FlowError('invalid', 'email must be a plain (ASCII) email address');
       if (await findPersonByEmail(db, email)) throw new FlowError('conflict', 'that email address is already on the people list');
+      let invite;
       try {
-        await ensureClerkAccount(clerk, email);
+        invite = await inviteWithClerk(req, email);
       } catch (error) {
         log.error?.(`[people] Clerk account for an invitation failed: ${error.message}`);
         return res.status(503).json({ ok: false, code: 'sign_in_unavailable', error: 'Flow could not prepare the sign-in account. Try again shortly.' });
       }
       const person = await invitePerson(db, { email, name: req.body?.name ?? null, role, invitedBy: req.person.id });
-      log.info?.(`[people] ${req.person.id} invited ${person.id} as ${person.role}`);
-      res.status(201).json({ ok: true, person: publicPerson(person) });
+      log.info?.(`[people] ${req.person.id} invited ${person.id} as ${person.role} (${invite.emailed ? 'emailed' : 'not emailed'})`);
+      res.status(201).json({ ok: true, person: publicPerson(person), invite });
+    } catch (error) {
+      sendError(res, error, log);
+    }
+  });
+
+  // Email an invited person's invitation again. Only for someone who has
+  // not signed in yet.
+  people.post('/:id/invite', async (req, res) => {
+    try {
+      const person = await findPersonById(db, req.params.id);
+      if (!person) throw new FlowError('not_found', 'person not found');
+      if (person.clerkUserId || person.status !== 'active') throw new FlowError('conflict', 'only an invited person who has not signed in yet gets an invitation email');
+      let invite;
+      try {
+        invite = await sendClerkInvitation(clerk, person.email, signInUrl(req));
+      } catch (error) {
+        log.error?.(`[people] Clerk invitation email failed: ${error.message}`);
+        return res.status(503).json({ ok: false, code: 'sign_in_unavailable', error: 'Clerk could not send the invitation email. Try again shortly.' });
+      }
+      if (!invite.emailed) throw new FlowError('conflict', 'they already have a sign-in account: they can sign in now');
+      log.info?.(`[people] ${req.person.id} emailed the invitation for ${person.id} again`);
+      res.json({ ok: true, invite });
     } catch (error) {
       sendError(res, error, log);
     }

package/server/core/host.js

@@ -0,0 +1,24 @@
+// Where this copy of Flow runs. A Replit workspace (the editor's Run button)
+// shares its secrets with the published app, so without a rule it would sync,
+// draft and send next to the live copy: twice the calls to Xero and Seazona,
+// and a second sender. FLOW_BACKGROUND_JOBS decides; unset, it is off in a
+// Replit workspace and on everywhere else (docs/SELF_HOSTING.md).
+
+const read = (env, name) => String(env?.[name] ?? '').trim();
+
+// Replit sets REPL_ID in the workspace and REPLIT_DEPLOYMENT on the published
+// app only.
+export function isReplitWorkspace(env = process.env) {
+  return Boolean(read(env, 'REPL_ID')) && !read(env, 'REPLIT_DEPLOYMENT');
+}
+
+// Whether this copy runs the jobs that call or write to other systems: the
+// Seazona sync, the Xero read, the pipeline, the daily reconcile and the send
+// worker. Off, it also never writes to Xero.
+export function backgroundJobsOn(env = process.env) {
+  const value = read(env, 'FLOW_BACKGROUND_JOBS').toLowerCase();
+  if (value === 'on') return true;
+  if (value === 'off') return false;
+  if (value) throw new Error('FLOW_BACKGROUND_JOBS must be "on", "off" or unset');
+  return !isReplitWorkspace(env);
+}

package/server/index.js

@@ -13,6 +13,7 @@ import { createMonitoredLog } from './core/monitoring.js';
 import { createTracing, traceQueries } from './core/tracing.js';
 import { createPipelineWorker } from './core/pipeline.js';
 import { createReconcileWorker } from './core/reconcile.js';
+import { backgroundJobsOn } from './core/host.js';
 import { createSendWorker } from './core/sending.js';
 import { resolveSecretsKey } from './core/secrets.js';
 import { adapters as shippedAdapters } from './integrations/adapters.js';
@@ -96,20 +97,25 @@ try {
 const integrationsOn = integrations.list().filter((a) => a.enabled).map((a) => `${a.id}${a.state === 'ready' ? '' : ` (${a.state})`}`);
 console.log(`[integrations] on: ${integrationsOn.join(', ') || 'none'}; secrets key ${secrets ? `from ${secrets.source}` : 'not set (FLOW_SECRETS_KEY)'}`);
 
+// Background jobs run only where FLOW_BACKGROUND_JOBS allows: never in a
+// Replit workspace, which shares the published app's secrets
+// (server/core/host.js).
+const jobsOn = backgroundJobsOn(process.env);
+if (!jobsOn) console.log('[flow] background jobs off (FLOW_BACKGROUND_JOBS): no sync, pipeline, reconcile or sending in this copy');
 // The pipeline (server/core/pipeline.js) joins what the integrations copy into
 // Flow: jobs into the ledger, and each job to its accounting invoice. It runs
 // only while an integration that feeds it is on, and writes to no other
 // system. FLOW_PIPELINE=off stops it.
-if (process.env.FLOW_PIPELINE !== 'off') {
+if (jobsOn && process.env.FLOW_PIPELINE !== 'off') {
   createPipelineWorker({ db: database.db, integrations, log }).start();
 }
 // The daily reconcile (server/core/reconcile.js) compares Flow's own copies
 // and opens a review item for a day that does not agree. It never calls or
 // writes to another system.
-createReconcileWorker({ db: database.db, integrations, log }).start();
+if (jobsOn) createReconcileWorker({ db: database.db, integrations, log }).start();
 // The send worker (server/core/sending.js) sends only what a person queued
 // with Send all ready, to the accounting integration that is on.
-createSendWorker({ db: database.db, integrations, log }).start();
+if (jobsOn) createSendWorker({ db: database.db, integrations, log }).start();
 
 let auth = null;
 if (settings.mode === 'clerk') {

package/server/integrations/seazona/index.js

@@ -111,7 +111,7 @@ export function createSeazonaAdapter({ env = null, fetchImpl = null, now = Date.
       const scheduler = settings.scheduled ? createSeazonaScheduler({ db, settings, run, now, log, timers }) : null;
       runtime = { settings, db, client, run, scheduler };
       scheduler?.start();
-      log.info?.(`[seazona] mode ${settings.mode}; background sync ${scheduler ? 'on' : 'off (live mode only)'}; ${settings.rate.requestsPerMinute} requests a minute at most`);
+      log.info?.(`[seazona] mode ${settings.mode}; background sync ${scheduler ? 'on' : settings.mode === 'live' ? 'off (FLOW_BACKGROUND_JOBS)' : 'off (live mode only)'}; ${settings.rate.requestsPerMinute} requests a minute at most`);
     },
 
     async stop() {

package/server/integrations/seazona/settings.js

@@ -8,6 +8,8 @@
 //   replay   recorded, synthetic responses from a file; no network at all.
 // There is no default mode. Without one the adapter does nothing.
 
+import { backgroundJobsOn } from '../../core/host.js';
+
 export const MODES = Object.freeze(['live', 'sandbox', 'replay']);
 
 // Seazona publishes 60 requests a minute per API client. Flow stays at half of
@@ -190,8 +192,9 @@ export function resolveSeazonaSettings(env = process.env) {
     credentials: null,
     replayFile: '',
     rate,
-    // The scheduler starts only in live mode (issue #10).
-    scheduled: mode === 'live',
+    // The scheduler starts only in live mode (issue #10), and only where
+    // background jobs run: never in a Replit workspace (server/core/host.js).
+    scheduled: mode === 'live' && backgroundJobsOn(env),
     // The address of one order in Seazona's own screens, with {ref} for the
     // order number, for "Open in Seazona" on a stage move. Optional; one
     // without {ref} is ignored.

package/server/integrations/sentry/index.js

@@ -1,4 +1,5 @@
 import * as SentryNode from '@sentry/node';
+import { isReplitWorkspace } from '../../core/host.js';
 import { scrubSpan } from '../../ui/monitoring.js';
 
 // The Sentry adapter (docs/SENTRY.md). It sends the errors Flow logs, the
@@ -40,7 +41,7 @@ export const SENTRY_SETUP = {
   },
   fields: [
     { name: 'SENTRY_DSN', label: 'DSN', kind: 'url', help: 'From the Sentry project\'s Client Keys. Browsers see it, so it is not a secret.' },
-    { name: 'SENTRY_ENVIRONMENT', label: 'Environment', help: 'How Sentry labels this installation, for example production. Empty: production.' },
+    { name: 'SENTRY_ENVIRONMENT', label: 'Environment', help: 'How Sentry labels this installation, for example production. Empty: production, or workspace in a Replit workspace.' },
     { name: 'SENTRY_FEEDBACK', label: 'Report a problem button', kind: 'onoff', help: 'On: everyone signed in can send a report, with a screenshot, to this Sentry project.' },
     { name: 'SENTRY_TRACES_SAMPLE_RATE', label: 'Traces', help: 'The share of clicks, page loads and requests timed, from 0 (off) to 1 (all). Empty: 0.2.' },
   ],
@@ -50,7 +51,9 @@ export function readSentrySettings(env) {
   const dsn = String(env.SENTRY_DSN ?? '').trim();
   if (!dsn) throw new Error('SENTRY_DSN is not set. Enter the Sentry project\'s DSN in Settings, Integrations.');
   if (!DSN_PATTERN.test(dsn)) throw new Error('SENTRY_DSN is not a Sentry DSN (https://<key>@<host>/<project id>).');
-  const environment = String(env.SENTRY_ENVIRONMENT ?? '').trim() || 'production';
+  // A Replit workspace shares the published app's secrets; its errors are
+  // labelled apart so they never read as the live app's.
+  const environment = String(env.SENTRY_ENVIRONMENT ?? '').trim() || (isReplitWorkspace(env) ? 'workspace' : 'production');
   const feedback = String(env.SENTRY_FEEDBACK ?? 'on').trim() !== 'off';
   const rate = String(env.SENTRY_TRACES_SAMPLE_RATE ?? '').trim();
   const tracesSampleRate = rate === '' ? DEFAULT_TRACES_SAMPLE_RATE : Number(rate);

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');
   }