@arcforgelabs/flow 2026.10.26 → 2026.10.27

package/server/integrations/xero/migrations/0005_xero_send_modes.sql

@@ -0,0 +1,10 @@
+-- How each push was sent (invoicing_settings.send_mode) and, for an invoice
+-- sent approved, whether Xero emailed it to the customer. Xero's email action
+-- is not idempotent, so Flow records `sending` before the call and retries
+-- only a refusal (`failed`), never an unknown outcome.
+ALTER TABLE "xero_invoice_pushes" ADD COLUMN "send_mode" text DEFAULT 'accounting_draft' NOT NULL;--> statement-breakpoint
+ALTER TABLE "xero_invoice_pushes" ADD COLUMN "email_state" text;--> statement-breakpoint
+ALTER TABLE "xero_invoice_pushes" ADD COLUMN "email_error" text;--> statement-breakpoint
+ALTER TABLE "xero_invoice_pushes" ADD COLUMN "emailed_at" timestamp with time zone;--> statement-breakpoint
+ALTER TABLE "xero_invoice_pushes" ADD CONSTRAINT "xero_invoice_pushes_send_mode_valid" CHECK ("send_mode" in ('accounting_draft', 'approve_and_email'));--> statement-breakpoint
+ALTER TABLE "xero_invoice_pushes" ADD CONSTRAINT "xero_invoice_pushes_email_state_valid" CHECK ("email_state" is null or "email_state" in ('pending', 'sending', 'sent', 'failed', 'unknown'));

package/server/integrations/xero/migrations/meta/_journal.json

@@ -36,6 +36,13 @@
       "when": 1792388000000,
       "tag": "0004_xero_mirror",
       "breakpoints": true
+    },
+    {
+      "idx": 5,
+      "version": "7",
+      "when": 1792406000000,
+      "tag": "0005_xero_send_modes",
+      "breakpoints": true
     }
   ]
 }

package/server/ui/app-page.js

@@ -40,6 +40,7 @@ const BODY = `<div class="fx-app">
       <nav class="fx-nav" id="nav" aria-label="Flow"></nav>
       <div class="fx-side__end">
         <div id="user-button" class="fx-side__user"></div>
+        <button type="button" class="fx-btn fx-btn--ghost fx-btn--icon" id="report-problem" title="Report a problem" aria-label="Report a problem" hidden></button>
         <button type="button" class="fx-btn fx-btn--ghost fx-btn--icon fx-mode-toggle" data-mode-toggle>Light or dark</button>
       </div>
     </aside>
@@ -48,7 +49,7 @@ const BODY = `<div class="fx-app">
   <div id="toasts" class="fx-toasts" aria-live="polite"></div>
 </div>`;
 
-export const APP_PATHS = ['/sign-in', '/jobs', '/invoices', '/invoices/:id', '/people', '/integrations', '/integrations/:id', '/account', '/appearance'];
+export const APP_PATHS = ['/sign-in', '/jobs', '/invoices', '/invoices/:id', '/people', '/integrations', '/integrations/:id', '/account', '/appearance', '/invoicing-settings'];
 
 export function appPage({ defaultFamily }) {
   return renderPage({

package/server/ui/app.js

@@ -10,7 +10,10 @@ import { getAppearance, onAppearanceChange, setAppearance, loadFonts } from '/as
 import { flowClerkAppearance } from '/assets/ui/clerk-appearance.js';
 import { ACCENT_PRESETS, normalizeAccent, THEME_FAMILIES, tokensFor } from '/assets/theme/themes.js';
 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 { renderJobs } from '/assets/ui/jobs.js';
+import { startMonitoring } from '/assets/ui/monitoring.js';
 
 const $ = (id) => document.getElementById(id);
 
@@ -190,6 +193,7 @@ let me = null;
 const VIEWS = {
   jobs: { label: 'Jobs', icon: 'jobs', group: 'Work', render: (main) => renderJobs(main, ui()) },
   invoices: { label: 'Invoices', icon: 'invoices', group: 'Work', render: (main, id) => (id ? renderInvoice(main, ui(), id) : renderInvoiceList(main, ui())) },
+  'invoicing-settings': { label: 'Invoicing', icon: 'invoices', group: 'Settings', render: (main) => renderInvoicingSettings(main, ui()) },
   people: { label: 'People', icon: 'people', group: 'Settings', ownerOnly: true, render: renderPeople },
   integrations: { label: 'Integrations', icon: 'plug', group: 'Settings', ownerOnly: true, render: (main, id) => (id ? renderIntegration(main, id) : renderIntegrations(main)) },
   account: { label: 'Account', icon: 'person', group: 'Settings', render: renderAccount },
@@ -203,6 +207,7 @@ const ICON_PATHS = {
   people: '<circle cx="9" cy="8" r="3"/><path d="M3 20c0-3.5 2.7-6 6-6s6 2.5 6 6"/><path d="M16 5a3 3 0 010 6M21 20c0-3-1.6-5-4-5.7"/>',
   plug: '<path d="M9 3v5M15 3v5M6 8h12v3a6 6 0 01-12 0zM12 17v4"/>',
   person: '<circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 3.6-7 8-7s8 3 8 7"/>',
+  flag: '<path d="M5 21V4M5 4h11l-2 4 2 4H5"/>',
   palette: '<path d="M12 3a9 9 0 100 18c1.1 0 1.5-.8 1.5-1.6 0-1-.8-1.4-.8-2.4 0-.9.7-1.5 1.6-1.5H17a4 4 0 004-4c0-4.7-4-8.5-9-8.5z"/><circle cx="7.5" cy="11" r="1"/><circle cx="10" cy="7" r="1"/><circle cx="15" cy="7" r="1"/>',
 };
 
@@ -285,6 +290,11 @@ function renderShell() {
   }
   nav.replaceChildren(...items);
   mountClerk('userButton', $('user-button'), { afterSignOutUrl: '/sign-in', showName: false });
+  // Errors and problem reports go to the installation's own Sentry, when the
+  // Sentry integration is on (monitoring.js). Flow works the same without it.
+  $('report-problem').replaceChildren(icon('flag'));
+  startMonitoring({ flow, person: me.person, button: $('report-problem') })
+    .catch((error) => console.warn(`[monitoring] ${error.message}`));
   window.addEventListener('popstate', route);
   return route();
 }
@@ -405,8 +415,9 @@ const STATE_TONE = { ready: 'success', disabled: 'mute', failed: 'danger', resta
 const CATALOGUE = {
   xero: { maker: 'Xero', category: 'accounting', blurb: 'Send invoices to Xero as drafts and bring payments back.', logo: 'xero.svg' },
   seazona: { maker: 'Seazona', category: 'lab', blurb: 'Bring lab cases and orders into Flow as jobs.', logo: 'seazona.svg' },
+  sentry: { maker: 'Sentry', category: 'monitoring', blurb: 'Send errors and problem reports to your own Sentry project.', logo: 'sentry.svg' },
 };
-const CATEGORIES = [['all', 'All'], ['accounting', 'Accounting'], ['lab', 'Lab software']];
+const CATEGORIES = [['all', 'All'], ['accounting', 'Accounting'], ['lab', 'Lab software'], ['monitoring', 'Monitoring']];
 const CATEGORY_LABEL = Object.fromEntries(CATEGORIES);
 
 function integrationLogo(integration, size = '') {
@@ -626,6 +637,8 @@ async function renderIntegration(main, id) {
           !body.secretsKey ? notice('Flow has no secrets key, so it cannot store a client secret. Ask whoever hosts Flow to set FLOW_SECRETS_KEY (64 hex characters), then restart Flow.', 'warn', 'No secrets key.') : null,
           current.state === 'failed' && current.error ? notice(current.error, 'danger', 'It could not start.') : null,
           current.id === 'xero' && current.state === 'ready' ? h('section', { class: 'fx-int-section' }, xeroConnection(body.organisations, canChange)) : null,
+          current.id === 'seazona' ? h('section', { class: 'fx-int-section fx-card', style: { padding: '8px 20px 16px' } }, automationSection(ui(), 'seazona', 'Ready to invoice')) : null,
+          current.id === 'xero' ? h('section', { class: 'fx-int-section fx-card', style: { padding: '8px 20px 16px' } }, sendModeSection(ui())) : null,
           guide ? h('section', { class: 'fx-int-section' },
             h('h2', { class: 'fx-int-section__title' }, 'Set up'),
             h('ol', { class: 'fx-steps' }, guide.steps.map((step) => h('li', {}, step))),

package/server/ui/automations.js

@@ -0,0 +1,96 @@
+// Automation rows (server/core/automations.js, /api/invoicing/automations).
+// Each automation shows where its trigger lives: the work system's ready rule
+// on that integration's page, the draft rule on Settings, Invoicing. One row
+// for each: its name, one short line, and its switch, plus a row for each of
+// its settings. A change saves at once. Everyone can read them; an owner or
+// admin changes them. The caller passes in app.js's shared pieces as `ui`.
+
+const DOCS = 'https://github.com/arcforgelabs/flow/blob/main/docs/AUTOMATIONS.md';
+
+// A section of the automations kept at `place`, filled when they load.
+export function automationSection(ui, place, title) {
+  const { h, flow, toast, notice, me } = ui;
+  const section = h('section', { class: 'fx-set' }, h('h2', { class: 'fx-set__title' }, title), h('div', { class: 'fx-skeleton' }));
+  const disabled = !['owner', 'admin'].includes(me?.person.role);
+
+  async function save(key, changes, control) {
+    control.disabled = true;
+    try {
+      const { automation } = await flow(`/api/invoicing/automations/${key}`, { method: 'PUT', body: JSON.stringify(changes) });
+      toast('Saved.', 'success');
+      return automation;
+    } catch (error) {
+      toast(error.message, 'danger');
+      return null;
+    } finally {
+      control.disabled = disabled;
+    }
+  }
+
+  const row = (name, hint, control) => h('div', { class: 'fx-set__row' },
+    h('div', { class: 'fx-set__text' }, h('span', { class: 'fx-set__name' }, name), h('span', { class: 'fx-set__hint' }, hint)),
+    h('div', { class: 'fx-set__control' }, control));
+
+  // A menu of the statuses the work system reported, each with its job count.
+  // A status saved earlier stays in the menu even when no job has it now.
+  const statusPicker = (automation) => {
+    const summary = h('summary', { class: 'fx-select fx-multi__summary' });
+    const list = h('div', { class: 'fx-multi__list', role: 'group', 'aria-label': 'Ready statuses' }, h('div', { class: 'fx-skeleton' }));
+    const picker = h('details', { class: 'fx-multi' }, summary, list);
+    let options = [];
+    const show = () => {
+      const chosen = new Set(automation.config.statuses);
+      const names = options.filter((o) => chosen.has(o.value)).map((o) => o.label);
+      summary.textContent = names.length ? names.join(', ') : 'None';
+      list.replaceChildren(...(options.length ? options.map((o) => {
+        const box = h('input', { type: 'checkbox', checked: chosen.has(o.value), disabled });
+        box.addEventListener('change', async () => {
+          const next = options.map((x) => x.value).filter((v) => (v === o.value ? box.checked : chosen.has(v)));
+          if (!next.length) {
+            box.checked = true;
+            toast('Pick at least one status. To stop it, turn the automation off.', 'danger');
+            return;
+          }
+          const saved = await save(automation.key, { config: { statuses: next } }, box);
+          if (saved) automation.config = saved.config;
+          show();
+        });
+        return h('label', { class: 'fx-multi__option' }, box, h('span', {}, o.label), h('span', { class: 'fx-dim' }, String(o.jobs)));
+      }) : [h('p', { class: 'fx-dim', style: { margin: 0 } }, 'Seazona has reported no statuses yet.')]));
+    };
+    (async () => {
+      try {
+        ({ statuses: options } = await flow('/api/invoicing/work-statuses'));
+      } catch (error) {
+        options = [];
+        toast(error.message, 'danger');
+      }
+      const known = new Set(options.map((o) => o.value));
+      for (const value of automation.config.statuses) if (!known.has(value)) options.push({ value, label: value, jobs: 0 });
+      show();
+    })();
+    return picker;
+  };
+
+  const rowsOf = (automation) => {
+    const button = h('button', { class: 'fx-switch', type: 'button', role: 'switch', 'aria-label': automation.name, 'aria-checked': String(automation.enabled), disabled });
+    button.addEventListener('click', async () => {
+      const saved = await save(automation.key, { enabled: button.getAttribute('aria-checked') !== 'true' }, button);
+      if (saved) button.setAttribute('aria-checked', String(saved.enabled));
+    });
+    const out = [row(automation.name, automation.hint, button)];
+    if (automation.config.statuses) out.push(row('Ready statuses', 'Picked from the statuses Seazona reports.', statusPicker(automation)));
+    return out;
+  };
+
+  (async () => {
+    try {
+      const { automations } = await flow(`/api/invoicing/automations?place=${encodeURIComponent(place)}`);
+      section.replaceChildren(h('h2', { class: 'fx-set__title' }, title), ...automations.flatMap(rowsOf),
+        h('p', { class: 'fx-dim', style: { margin: '8px 0 0' } }, h('a', { href: DOCS, target: '_blank', rel: 'noopener' }, 'How automations work')));
+    } catch (error) {
+      section.replaceChildren(h('h2', { class: 'fx-set__title' }, title), notice(error.message, 'danger'));
+    }
+  })();
+  return section;
+}

package/server/ui/flow.css

@@ -295,6 +295,8 @@ a.fx-strong { text-decoration: none; }
 a.fx-strong:hover { text-decoration: underline; }
 .fx-toolbar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--fx-line); }
 .fx-tabs { display: flex; gap: 2px; }
+.fx-tabs button { flex: none; }
+@media (max-width: 640px) { .fx-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; } }
 .fx-tabs button {
   display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: -1px;
   border: 0; border-bottom: 2px solid transparent; background: transparent; cursor: pointer;
@@ -303,6 +305,15 @@ a.fx-strong:hover { text-decoration: underline; }
 .fx-tabs button:hover { color: var(--t-strong); }
 .fx-tabs button[aria-selected="true"] { color: var(--t-strong); border-bottom-color: var(--t-brand); }
 .fx-tabs__count { padding: 0 7px; border-radius: 999px; background: var(--fx-hover); color: var(--t-dim); font-size: 12px; line-height: 20px; }
+.fx-tabs button[data-tone="danger"] .fx-tabs__count { background: var(--t-danger-bg); color: var(--t-danger); }
+/* Invoices: the Send all ready bar above the Ready list. */
+.fx-sendbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; padding: 12px 16px; border: 1px solid var(--fx-line); border-radius: 8px; background: var(--t-paper); margin-top: 12px; }
+.fx-sendbar[hidden] { display: none; }
+.fx-sendbar p { margin: 0; }
+.fx-problem { color: var(--t-danger); }
+.fx-sendbar__actions { display: flex; flex-wrap: wrap; gap: 8px; }
+.fx-tick-cell { width: 40px; }
+.fx-tick { width: 16px; height: 16px; accent-color: var(--t-brand); cursor: pointer; }
 .fx-search { width: min(320px, 100%); margin-bottom: 8px; }
 .fx-table--rows tbody tr { cursor: pointer; }
 .fx-table th.fx-num { text-align: right; }
@@ -536,3 +547,80 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after { animation: none !important; transition: none !important; }
 }
+
+/* ── Settings rows ───────────────────────────────────────────────────────
+   One row for each setting: its name, one short line under it, and the
+   control on the right. */
+.fx-set { display: grid; gap: 4px; }
+.fx-set__title { margin: 8px 0 4px; color: var(--t-strong); font: 600 15px/1.3 var(--t-body); }
+.fx-set__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 12px 0; }
+.fx-set__row + .fx-set__row { border-top: 1px solid var(--fx-line); }
+.fx-set__text { display: grid; gap: 2px; min-width: 0; }
+.fx-set__name { color: var(--t-text); font: 500 14px/1.35 var(--t-body); }
+.fx-set__hint { color: var(--t-dim); font-size: 13px; line-height: 1.35; }
+.fx-set__control { flex: none; display: flex; justify-content: flex-end; }
+.fx-set__control .fx-input { width: 220px; }
+.fx-set__control .fx-input[type="number"] { width: 96px; }
+.fx-set__control .fx-select { min-width: 220px; }
+.fx-set + .fx-set { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--fx-line); }
+/* Invoice rules (invoice-rules.js): a row's Edit button and switch, and the
+   rule dialog's condition lines. */
+.fx-rule__controls { align-items: center; gap: 10px; }
+.fx-rule__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
+.fx-dialog:has(.fx-rule__dialog) { width: min(680px, calc(100vw - 32px)); }
+.fx-rule__dialog .fx-btn--sm { justify-self: start; }
+.fx-rule__conditions { display: grid; gap: 8px; }
+.fx-rule__condition { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 8px; align-items: start; }
+.fx-rule__condition + .fx-rule__condition { padding-top: 8px; border-top: 1px solid var(--fx-line); }
+.fx-rule__condition .fx-select, .fx-rule__condition .fx-input { width: 100%; min-width: 0; }
+.fx-rule__value { display: flex; gap: 6px; align-items: center; min-width: 0; }
+.fx-rule__many { display: grid; gap: 2px; max-height: 160px; overflow: auto; padding: 4px 8px; border: 1px solid var(--fx-line); border-radius: 8px; width: 100%; }
+.fx-rule__delete { justify-self: start; color: var(--t-danger); }
+@media (max-width: 640px) {
+  .fx-rule__condition { grid-template-columns: minmax(0, 1fr); }
+}
+@media (max-width: 560px) {
+  .fx-set__row { gap: 12px; }
+  .fx-set__control .fx-input { width: 140px; }
+  .fx-set__control .fx-input[type="number"] { width: 72px; }
+  .fx-set__control .fx-select { min-width: 140px; }
+}
+.fx-multi { position: relative; width: 220px; max-width: 100%; }
+.fx-multi__summary { display: flex; align-items: center; list-style: none; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+@media (max-width: 600px) { .fx-multi { width: 150px; } }
+.fx-multi__summary::-webkit-details-marker { display: none; }
+.fx-multi__list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; display: grid; gap: 2px; min-width: 100%; max-height: 280px; overflow-y: auto; padding: 6px; background: var(--t-paper); border: 1px solid var(--fx-line); border-radius: var(--t-radius-lg); box-shadow: var(--t-shadow); }
+.fx-multi__option { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px; cursor: pointer; white-space: nowrap; }
+.fx-multi__option:hover { background: var(--fx-line-soft); }
+.fx-switch {
+  position: relative; width: 40px; height: 22px; padding: 0; flex: none; cursor: pointer;
+  border: 0; border-radius: 999px; background: var(--t-control);
+}
+.fx-switch::after {
+  content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
+  border-radius: 50%; background: var(--t-paper); transition: transform 0.15s;
+}
+.fx-switch[aria-checked="true"] { background: var(--t-primary); }
+.fx-switch[aria-checked="true"]::after { transform: translateX(18px); }
+.fx-switch:focus-visible { outline: none; box-shadow: var(--fx-focus); }
+.fx-switch:disabled { cursor: default; opacity: 0.6; }
+
+/* ── Sentry's report form (monitoring.js) ──────────────────────────────────
+   The form lives in a shadow root and reads these variables from its host.
+   Rules here win over the form's own defaults, so it takes each person's
+   theme and mode, and follows a change at once. */
+#sentry-feedback {
+  --font-family: var(--t-body);
+  --foreground: var(--t-text);
+  --background: var(--t-paper);
+  --accent-foreground: var(--t-on-primary);
+  --accent-background: var(--t-primary);
+  --success-color: var(--t-success);
+  --error-color: var(--t-danger);
+  --border: 1px solid var(--t-control);
+  --box-shadow: var(--t-shadow);
+  --outline: 2px solid var(--t-primary);
+  --interactive-filter: brightness(95%);
+  color-scheme: light;
+}
+[data-mode="dark"] #sentry-feedback { --interactive-filter: brightness(150%); color-scheme: dark; }

package/server/ui/invoice-rules.js

@@ -0,0 +1,237 @@
+// The "Rules" section of Settings, Invoicing (server/core/invoice-rules.js,
+// /api/invoicing/rules). Each rule a lab builds is a row: its name, one short
+// line that reads its conditions, and its switch. Edit opens a dialog where
+// every part is picked from a menu: the field, the test, and a value from
+// what Flow already holds (Seazona's statuses, the customers, the price list).
+// Everyone can read the rules; an owner or admin changes them. The caller
+// passes in app.js's shared pieces as `ui`.
+
+const DOCS = 'https://github.com/arcforgelabs/flow/blob/main/docs/INVOICE_RULES.md';
+
+const TEST_LABELS = {
+  more_than: 'is more than', at_most: 'is at most', is: 'is', is_not: 'is not', is_one_of: 'is one of',
+  is_empty: 'is empty', is_not_empty: 'is not empty', has: 'has', has_not: 'does not have',
+};
+const ACTION_LABELS = { wait: 'Wait for a person', skip: 'Never draft' };
+const NO_VALUE = ['is_empty', 'is_not_empty'];
+
+// A rule as one short line: "Job age (days) is more than 90 · Wait for a person".
+export function ruleSummary(rule, meta) {
+  const fieldOf = new Map(meta.fields.map((f) => [f.key, f]));
+  const labelOf = (field, value) => {
+    const option = (meta.options[field.options] ?? []).find((o) => String(o.value).toLowerCase() === String(value).toLowerCase());
+    return option?.label ?? String(value);
+  };
+  const part = (c) => {
+    const field = fieldOf.get(c.field);
+    if (!field) return c.field;
+    const test = TEST_LABELS[c.test] ?? c.test;
+    if (NO_VALUE.includes(c.test)) return `${field.label} ${test}`;
+    if (field.kind === 'boolean') return `${field.label} ${test} ${c.value ? 'yes' : 'no'}`;
+    if (field.kind === 'share') return `${labelOf(field, c.item).split(' · ')[0]} share ${test} ${c.value}%`;
+    if (field.kind === 'money') return `${field.label} ${test} $${Number(c.value).toFixed(2)}`;
+    const value = Array.isArray(c.value) ? c.value.map((v) => labelOf(field, v)).join(', ') : labelOf(field, c.value);
+    return `${field.label} ${test} ${value}`;
+  };
+  return `${rule.conditions.map(part).join(' and ')} · ${ACTION_LABELS[rule.action.kind] ?? rule.action.kind}`;
+}
+
+export function rulesSection(ui, title = 'Rules') {
+  const { h, flow, toast, notice, dialog, me } = ui;
+  const disabled = !['owner', 'admin'].includes(me?.person.role);
+  const section = h('section', { class: 'fx-set' }, h('h2', { class: 'fx-set__title' }, title), h('div', { class: 'fx-skeleton' }));
+  let meta;
+  let rules = [];
+
+  const row = (name, hint, control) => h('div', { class: 'fx-set__row' },
+    h('div', { class: 'fx-set__text' }, h('span', { class: 'fx-set__name' }, name), h('span', { class: 'fx-set__hint' }, hint)),
+    h('div', { class: 'fx-set__control fx-rule__controls' }, control));
+
+  async function send(path, method, payload) {
+    try {
+      const body = await flow(path, { method, ...(payload ? { body: JSON.stringify(payload) } : {}) });
+      toast('Saved.', 'success');
+      return body;
+    } catch (error) {
+      toast(error.message, 'danger');
+      return null;
+    }
+  }
+
+  // One condition's controls: field, test and value, each a menu where Flow
+  // knows the values. `read()` answers the condition as the API takes it.
+  function conditionEditor(start, onRemove) {
+    const fieldSelect = h('select', { class: 'fx-select', 'aria-label': 'Field' },
+      meta.fields.map((f) => h('option', { value: f.key }, f.label)));
+    const testSelect = h('select', { class: 'fx-select', 'aria-label': 'Test' });
+    const valueHost = h('div', { class: 'fx-rule__value' });
+    let readValue = () => ({});
+
+    const options = (field) => meta.options[field.options] ?? [];
+    const choiceSelect = (field, value, label) => {
+      const list = options(field);
+      const select = h('select', { class: 'fx-select', 'aria-label': label },
+        list.map((o) => h('option', { value: o.value }, o.label)));
+      if (value !== undefined && !list.some((o) => String(o.value).toLowerCase() === String(value).toLowerCase())) {
+        select.append(h('option', { value }, String(value)));
+      }
+      if (value !== undefined) select.value = list.find((o) => String(o.value).toLowerCase() === String(value).toLowerCase())?.value ?? value;
+      return select;
+    };
+    const numberBox = (value, label) => h('input', { class: 'fx-input', type: 'number', min: '0', step: 'any', value: value ?? '', 'aria-label': label });
+
+    function drawValue(value, item) {
+      const field = meta.fields.find((f) => f.key === fieldSelect.value);
+      const test = testSelect.value;
+      valueHost.replaceChildren();
+      if (NO_VALUE.includes(test)) {
+        readValue = () => ({});
+      } else if (field.kind === 'boolean') {
+        const select = h('select', { class: 'fx-select', 'aria-label': 'Value' }, h('option', { value: 'true' }, 'Yes'), h('option', { value: 'false' }, 'No'));
+        select.value = String(value ?? false);
+        valueHost.append(select);
+        readValue = () => ({ value: select.value === 'true' });
+      } else if (field.kind === 'share') {
+        const items = choiceSelect(field, item, 'Line item');
+        const box = numberBox(value ?? 20, 'Percent of the other lines');
+        valueHost.append(items, box, h('span', { class: 'fx-dim' }, '%'));
+        readValue = () => ({ item: items.value, value: Number(box.value) });
+      } else if (['number', 'money'].includes(field.kind)) {
+        const box = numberBox(value, 'Value');
+        valueHost.append(box);
+        readValue = () => ({ value: Number(box.value) });
+      } else if (test === 'is_one_of') {
+        const chosen = new Set((Array.isArray(value) ? value : []).map((v) => String(v).toLowerCase()));
+        const boxes = options(field).map((o) => {
+          const box = h('input', { type: 'checkbox', value: o.value, checked: chosen.has(String(o.value).toLowerCase()) });
+          return h('label', { class: 'fx-multi__option' }, box, h('span', {}, o.label));
+        });
+        valueHost.append(h('div', { class: 'fx-rule__many' }, ...(boxes.length ? boxes : [h('span', { class: 'fx-dim' }, 'No values yet.')])));
+        readValue = () => ({ value: boxes.map((b) => b.querySelector('input')).filter((b) => b.checked).map((b) => b.value) });
+      } else if (field.options) {
+        const select = choiceSelect(field, Array.isArray(value) ? value[0] : value, 'Value');
+        valueHost.append(select);
+        readValue = () => ({ value: select.value });
+      } else {
+        const box = h('input', { class: 'fx-input', type: 'text', value: value ?? '', 'aria-label': 'Value' });
+        valueHost.append(box);
+        readValue = () => ({ value: box.value });
+      }
+    }
+
+    function drawTests(test) {
+      const field = meta.fields.find((f) => f.key === fieldSelect.value);
+      testSelect.replaceChildren(...field.tests.map((t) => h('option', { value: t }, TEST_LABELS[t] ?? t)));
+      testSelect.value = field.tests.includes(test) ? test : field.tests[0];
+    }
+
+    fieldSelect.value = start?.field ?? meta.fields[0].key;
+    drawTests(start?.test);
+    drawValue(start?.value, start?.item);
+    fieldSelect.addEventListener('change', () => { drawTests(); drawValue(); });
+    testSelect.addEventListener('change', () => drawValue());
+
+    const remove = h('button', { class: 'fx-btn fx-btn--ghost fx-btn--sm', type: 'button', 'aria-label': 'Remove condition' }, 'Remove');
+    const element = h('div', { class: 'fx-rule__condition' }, fieldSelect, testSelect, valueHost, remove);
+    remove.addEventListener('click', () => onRemove(element));
+    return { element, read: () => ({ field: fieldSelect.value, test: testSelect.value, ...readValue() }) };
+  }
+
+  // The dialog for a new rule (rule null) or an existing one. `draft` fills
+  // it again after a refused save, so no choice is lost.
+  async function edit(rule, draft = rule) {
+    const name = h('input', { class: 'fx-input', name: 'name', required: true, maxlength: '120', value: draft?.name ?? '', 'aria-label': 'Rule name' });
+    const action = h('select', { class: 'fx-select', 'aria-label': 'Then' },
+      Object.entries(ACTION_LABELS).map(([value, label]) => h('option', { value }, label)));
+    action.value = draft?.action.kind ?? 'wait';
+    let editors = [];
+    const list = h('div', { class: 'fx-rule__conditions' });
+    const addCondition = (start) => {
+      if (editors.length >= 10) return toast('A rule has 10 conditions at most.', 'danger');
+      const editor = conditionEditor(start, (element) => {
+        if (editors.length === 1) return toast('A rule needs at least one condition.', 'danger');
+        editors = editors.filter((e) => e.element !== element);
+        element.remove();
+        return null;
+      });
+      editors.push(editor);
+      list.append(editor.element);
+      return null;
+    };
+    for (const c of draft?.conditions ?? [null]) addCondition(c);
+    const more = h('button', { class: 'fx-btn fx-btn--ghost fx-btn--sm', type: 'button' }, 'Add condition');
+    more.addEventListener('click', () => addCondition());
+
+    let wantsDelete = false;
+    const remove = rule ? h('button', { class: 'fx-btn fx-btn--ghost fx-btn--sm fx-rule__delete', type: 'button' }, 'Delete rule') : null;
+    remove?.addEventListener('click', () => {
+      wantsDelete = true;
+      remove.closest('dialog').close();
+    });
+
+    const label = (text, ...children) => h('div', { class: 'fx-field' }, h('span', { class: 'fx-label' }, text), ...children);
+    const data = await dialog({
+      title: rule ? 'Edit rule' : 'New rule',
+      body: h('div', { class: 'fx-fields fx-rule__dialog' },
+        label('Name', name),
+        label('When', h('span', { class: 'fx-dim' }, 'A job is ready to invoice and has no invoice.')),
+        label('If all of these match', list, more),
+        label('Then', action),
+        remove),
+      confirm: rule ? 'Save' : 'Add rule',
+    });
+    if (wantsDelete) {
+      const sure = await dialog({ title: `Delete "${rule.name}"?`, body: h('p', { class: 'fx-dim' }, 'Jobs stop waiting on this rule.'), confirm: 'Delete', tone: 'danger' });
+      if (sure && await send(`/api/invoicing/rules/${rule.id}`, 'DELETE')) rules = rules.filter((r) => r.id !== rule.id);
+      return draw();
+    }
+    if (!data) return null;
+    const payload = { name: name.value, conditions: editors.map((e) => e.read()), action: { kind: action.value } };
+    const body = rule
+      ? await send(`/api/invoicing/rules/${rule.id}`, 'PUT', payload)
+      : await send('/api/invoicing/rules', 'POST', payload);
+    if (!body) return edit(rule, payload);
+    rules = rule ? rules.map((r) => (r.id === rule.id ? body.rule : r)) : [...rules, body.rule];
+    return draw();
+  }
+
+  const rowOf = (rule) => {
+    const toggle = h('button', { class: 'fx-switch', type: 'button', role: 'switch', 'aria-label': rule.name, 'aria-checked': String(rule.enabled), disabled });
+    toggle.addEventListener('click', async () => {
+      toggle.disabled = true;
+      const body = await send(`/api/invoicing/rules/${rule.id}`, 'PUT', { enabled: toggle.getAttribute('aria-checked') !== 'true' });
+      toggle.disabled = disabled;
+      if (!body) return;
+      rules = rules.map((r) => (r.id === rule.id ? body.rule : r));
+      toggle.setAttribute('aria-checked', String(body.rule.enabled));
+    });
+    const controls = [toggle];
+    if (!disabled) {
+      const open = h('button', { class: 'fx-btn fx-btn--ghost fx-btn--sm', type: 'button', 'aria-label': `Edit ${rule.name}` }, 'Edit');
+      open.addEventListener('click', () => edit(rule));
+      controls.unshift(open);
+    }
+    return row(rule.name, ruleSummary(rule, meta), controls);
+  };
+
+  function draw() {
+    const add = disabled ? null : h('button', { class: 'fx-btn fx-btn--ghost fx-btn--sm', type: 'button' }, 'Add rule');
+    add?.addEventListener('click', () => edit(null));
+    section.replaceChildren(
+      h('h2', { class: 'fx-set__title' }, title),
+      h('p', { class: 'fx-set__hint', style: { margin: '0 0 4px' } }, 'A ready job waits, or is never drafted, when a rule matches.'),
+      ...(rules.length ? rules.map(rowOf) : [h('p', { class: 'fx-dim' }, 'No rules. Every ready job is drafted.')]),
+      h('div', { class: 'fx-rule__footer' }, add,
+        h('a', { class: 'fx-dim', href: DOCS, target: '_blank', rel: 'noopener' }, 'How rules work')));
+  }
+
+  (async () => {
+    try {
+      [meta, { rules }] = await Promise.all([flow('/api/invoicing/rule-fields'), flow('/api/invoicing/rules')]);
+      draw();
+    } catch (error) {
+      section.replaceChildren(h('h2', { class: 'fx-set__title' }, title), notice(error.message, 'danger'));
+    }
+  })();
+  return section;
+}