@arcforgelabs/flow 2026.10.42 → 2026.10.44

package/server/ui/app.js

@@ -10,36 +10,23 @@ 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 { automationSection, renderAutomations } from '/assets/ui/automations.js';
 import { renderInvoicingSettings, sendModeSection } from '/assets/ui/invoicing-settings.js';
 import { renderPriceList } from '/assets/ui/price-list.js';
 import { renderPriceReconcile } from '/assets/ui/price-reconcile.js';
-import { lucide, renderCustomFields } from '/assets/ui/custom-fields.js';
+import { renderCustomFields } from '/assets/ui/custom-fields.js';
 import { renderJobs } from '/assets/ui/jobs.js';
 import { renderReconcile } from '/assets/ui/reconcile.js';
 import { renderXeroImport } from '/assets/ui/xero-import.js';
 import { startMonitoring } from '/assets/ui/monitoring.js';
-import { openSearch } from '/assets/ui/search.js';
+import { isSearchKey, openSearch } from '/assets/ui/search.js';
 import { alertStrip } from '/assets/ui/alerts.js';
+import { initialsOf, personLabel } from '/assets/ui/person.js';
+import { startTips } from '/assets/ui/tip.js';
+import { crumbs, dialog, edgeFade, fieldError, h, holdButton, linksOpenWith, listFrame, listHead, notice, pageHeader, rowMenu, sectionTitle, settingRow, tileCard, tileSection, toast } from '/assets/ui/kit.js';
 
 const $ = (id) => document.getElementById(id);
 
-// h('p', { class: 'x', onclick }, 'text', child) — children are text or nodes.
-function h(tag, attrs = {}, ...children) {
-  const node = document.createElement(tag);
-  for (const [key, value] of Object.entries(attrs ?? {})) {
-    if (value == null || value === false) continue;
-    if (key.startsWith('on')) node.addEventListener(key.slice(2), value);
-    else if (key === 'style' && typeof value === 'object') Object.assign(node.style, value);
-    else node.setAttribute(key, value === true ? '' : String(value));
-  }
-  for (const child of children.flat()) {
-    if (child == null || child === false) continue;
-    node.append(child instanceof Node ? child : document.createTextNode(String(child)));
-  }
-  return node;
-}
-
 const ROLE_LABEL = { owner: 'Owner', admin: 'Admin', staff: 'Staff' };
 const ROLE_HINT = {
   owner: 'Manages people, connections and every record.',
@@ -136,83 +123,8 @@ async function flow(path, options = {}) {
   return body;
 }
 
-// Keeps a button off for `ms`, with the time left on it, then puts it back.
-function holdButton(button, ms) {
-  if (!button || !(ms > 0)) return;
-  clearInterval(button.fxHold);
-  const label = button.dataset.label ?? button.textContent;
-  button.dataset.label = label;
-  const until = Date.now() + ms;
-  const draw = () => {
-    const left = Math.ceil((until - Date.now()) / 1000);
-    if (left <= 0) {
-      clearInterval(button.fxHold);
-      button.textContent = label;
-      delete button.dataset.label;
-      button.removeAttribute('title');
-      button.disabled = false;
-      return;
-    }
-    const time = left < 60 ? `${left}s` : `${Math.floor(left / 60)}:${String(left % 60).padStart(2, '0')}`;
-    button.disabled = true;
-    button.textContent = `${label} · ${time}`;
-    button.title = `Flow waits before it asks again, to protect the connected system's limits. Ready in ${time}.`;
-  };
-  draw();
-  button.fxHold = setInterval(draw, 1000);
-}
-
 // ── Shared pieces ──────────────────────────────────────────────────────────
 
-function pageHeader(title, { subtitle, actions = [] } = {}) {
-  return h('header', { class: 'fx-ph' },
-    h('div', { class: 'fx-ph__text' },
-      h('h1', { class: 'fx-title' }, title),
-      subtitle ? h('p', { class: 'fx-ph__sub' }, subtitle) : null),
-    actions.length ? h('div', { class: 'fx-ph__actions' }, actions) : null);
-}
-
-function notice(text, tone = 'info', title = null) {
-  return h('div', { class: 'fx-notice', 'data-tone': tone, role: tone === 'danger' ? 'alert' : 'status' },
-    title ? h('strong', {}, title) : null,
-    h('span', {}, text));
-}
-
-function toast(text, tone = 'info') {
-  const region = $('toasts');
-  const item = h('div', { class: 'fx-toast', 'data-tone': tone, role: 'status' }, text);
-  region.append(item);
-  setTimeout(() => item.remove(), 4200);
-}
-
-// A modal built on <dialog>: resolves with the button's value, or null.
-function dialog({ title, body, confirm, tone = 'primary' }) {
-  return new Promise((resolve) => {
-    const form = h('form', { method: 'dialog', class: 'fx-dialog__form' },
-      h('h2', { class: 'fx-dialog__title' }, title),
-      body,
-      h('div', { class: 'fx-dialog__actions' },
-        h('button', { class: 'fx-btn fx-btn--ghost', value: 'cancel', type: 'submit', formnovalidate: true }, 'Cancel'),
-        h('button', { class: `fx-btn fx-btn--${tone}`, value: 'ok', type: 'submit' }, confirm)));
-    const element = h('dialog', { class: 'fx-dialog' }, form);
-    element.addEventListener('close', () => {
-      const ok = element.returnValue === 'ok';
-      const data = ok ? new FormData(form) : null;
-      element.remove();
-      resolve(ok ? data : null);
-    });
-    document.body.append(element);
-    element.showModal();
-    element.querySelector('input, select, button[value="ok"]')?.focus();
-  });
-}
-
-function initials(person) {
-  const source = (person.name || person.email || '?').replace(/@.*/, '');
-  const parts = source.split(/[\s._-]+/).filter(Boolean);
-  return ((parts[0]?.[0] ?? '?') + (parts[1]?.[0] ?? '')).toUpperCase();
-}
-
 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');
@@ -235,7 +147,8 @@ 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())) },
   reconcile: { label: 'Reconcile', icon: 'reconcile', group: 'Work', render: (main, id) => renderReconcile(main, ui(), id) },
-  'invoicing-settings': { label: 'Invoice rules', icon: 'invoices', group: 'Settings', render: (main) => renderInvoicingSettings(main, ui()) },
+  'invoicing-settings': { label: 'Rules', icon: 'rules', group: 'Settings', render: (main, id) => renderInvoicingSettings(main, ui(), id) },
+  automations: { label: 'Automations', icon: 'bolt', group: 'Settings', render: (main) => renderAutomations(main, ui()) },
   'price-list': { label: 'Price list', icon: 'tag', group: 'Settings', render: (main, id) => (id === 'reconcile' ? renderPriceReconcile(main, ui()) : renderPriceList(main, ui())) },
   'custom-fields': { label: 'Custom fields', icon: 'fields', group: 'Settings', render: (main) => renderCustomFields(main, ui()) },
   people: { label: 'People', icon: 'people', group: 'Settings', ownerOnly: true, render: renderPeople },
@@ -252,6 +165,8 @@ const VIEWS = {
 const ICON_PATHS = {
   jobs: '<rect x="3" y="4" width="5" height="16" rx="1"/><rect x="10" y="4" width="5" height="11" rx="1"/><rect x="17" y="4" width="4" height="14" rx="1"/>',
   invoices: '<path d="M6 3h9l4 4v14H6z"/><path d="M14 3v5h5M9 13h7M9 17h5"/>',
+  bolt: '<path d="M13 3L5 13h6l-1 8 8-10h-6z"/>',
+  rules: '<path d="M3 6l2 2 4-4M3 16l2 2 4-4M13 6h8M13 12h8M13 18h8"/>',
   reconcile: '<path d="M4 8h13M13 4l4 4-4 4M20 16H7M11 12l-4 4 4 4"/>',
   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"/>',
   tag: '<path d="M3 12V4h8l10 10-8 8z"/><circle cx="7.5" cy="8.5" r="1.5"/>',
@@ -292,11 +207,11 @@ function drawMenu() {
   const label = NARROW.matches ? (open ? 'Close the menu' : 'Open the menu') : (folded ? 'Show the sidebar' : 'Hide the sidebar');
   toggle.setAttribute('aria-expanded', String(open));
   toggle.setAttribute('aria-label', label);
-  toggle.title = label;
+  toggle.dataset.tip = label;
   // Folded, a page's name shows when the pointer rests on its icon.
   for (const link of document.querySelectorAll('[data-nav]')) {
-    if (folded && !NARROW.matches) link.title = link.dataset.label;
-    else link.removeAttribute('title');
+    if (folded && !NARROW.matches) Object.assign(link.dataset, { tip: link.dataset.label, tipSide: 'right' });
+    else { delete link.dataset.tip; delete link.dataset.tipSide; }
   }
 }
 
@@ -343,7 +258,7 @@ function search() {
 }
 
 document.addEventListener('keydown', (event) => {
-  if (event.key.toLowerCase() !== 'k' || !(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey) return;
+  if (!isSearchKey(event)) return;
   if (document.body.dataset.state !== 'signed-in') return;
   event.preventDefault();
   search();
@@ -388,6 +303,8 @@ async function route() {
 }
 
 // Opens a path in place; the address changes, the page stays.
+linksOpenWith((path) => go(path));
+
 function go(path, { replace = false } = {}) {
   if (path !== location.pathname + location.search) history[replace ? 'replaceState' : 'pushState'](null, '', path);
   route();
@@ -403,7 +320,7 @@ function navigate(event) {
 // The shared pieces a view module (invoicing.js) builds with. Its `go`
 // takes a path, or a link's click event.
 const ui = () => ({
-  h, flow, toast, notice, pageHeader, dialog, me, holdButton,
+  h, flow, toast, notice, fieldError, pageHeader, listHead, listFrame, edgeFade, sectionTitle, dialog, me, holdButton, tileCard, tileSection, crumbs,
   go: (target, options) => (typeof target === 'string' ? go(target, options) : navigate(target)),
 });
 
@@ -529,28 +446,6 @@ async function refreshPeople(host) {
   ].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) => {
@@ -564,9 +459,9 @@ function personRow(person, host) {
   };
   const patch = (body) => flow(`/api/people/${person.id}`, { method: 'PATCH', body: JSON.stringify(body) });
   const who = h('div', { class: 'fx-person' },
-    h('span', { class: 'fx-avatar', 'aria-hidden': 'true' }, initials(person)),
+    h('span', { class: 'fx-avatar', 'aria-hidden': 'true' }, initialsOf(person)),
     h('span', { class: 'fx-person__text' },
-      h('span', { class: 'fx-person__name' }, person.name || person.email, self ? h('span', { class: 'fx-tag' }, 'You') : null),
+      h('span', { class: 'fx-person__name' }, personLabel(person), self ? h('span', { class: 'fx-tag' }, 'You') : null),
       person.name ? h('span', { class: 'fx-person__email' }, person.email) : null));
   const role = self
     ? h('span', { title: ROLE_HINT[person.role] }, ROLE_LABEL[person.role])
@@ -641,9 +536,9 @@ async function renderIntegrations(main) {
   const notices = h('div', { class: 'fx-fields' });
   const content = h('div', { class: 'fx-int-sections' }, h('div', { class: 'fx-skeleton' }));
   main.append(
-    h('header', { class: 'fx-ph' }, h('div', { class: 'fx-ph__text' }, h('h1', { class: 'fx-title' }, 'Integrations'))),
+    pageHeader('Integrations'),
     alertStrip(ui(), 'integrations').element,
-    h('div', { class: 'fx-int-bar' }, tabs, search),
+    h('div', { class: 'fx-int-bar' }, tabs, h('div', { class: 'fx-row' }, category, search)),
     notices, content);
   let body;
   try {
@@ -655,13 +550,14 @@ async function renderIntegrations(main) {
   const canChange = Boolean(me.ownerActions?.allowed);
   notices.replaceChildren(...[
     canChange ? null : notice('Changing integrations needs a verified owner sign-in: Google Workspace on the owner domain with no password, or a second factor.', 'warn', 'Read only.'),
-    body.secretsKey ? null : 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.'),
+    body.secretsKey ? null : notice('Flow cannot store a client secret. Set FLOW_SECRETS_KEY (64 hex characters), then restart Flow.', 'warn', 'No secrets key.'),
   ].filter(Boolean));
   const list = [...body.integrations].sort((a, b) => a.name.localeCompare(b.name));
   const connected = (i) => i.enabled;
 
   const draw = () => {
-    tabs.replaceChildren(...[['all', 'All integrations'], ['yours', 'Your integrations']].map(([id, label]) => h('button', {
+    category.hidden = state.tab !== 'all';
+    tabs.replaceChildren(...[['all', 'All'], ['yours', 'Connected']].map(([id, label]) => h('button', {
       type: 'button', role: 'tab', class: 'fx-seg__item', 'aria-selected': String(state.tab === id), 'aria-checked': String(state.tab === id),
       onclick: () => { state.tab = id; draw(); },
     }, label)));
@@ -672,7 +568,7 @@ async function renderIntegrations(main) {
       const yours = list.filter(connected).filter(matches);
       sections.push(h('section', { class: 'fx-int-section-list' },
         yours.length ? h('div', { class: 'fx-int-grid' }, yours.map(integrationTile))
-          : h('p', { class: 'fx-empty' }, q ? 'No integration matches.' : 'Nothing is connected yet. Pick one under All integrations.')));
+          : h('p', { class: 'fx-empty' }, q ? 'No integration matches.' : 'Nothing is connected yet. Pick one under All.')));
     } else {
       // Recommended: what is not connected yet, once the catalogue is long
       // enough that a short row helps (with a few, it would repeat the grid).
@@ -684,7 +580,7 @@ async function renderIntegrations(main) {
       }
       const all = list.filter(matches).filter((i) => state.category === 'all' || CATALOGUE[i.id]?.category === state.category);
       sections.push(h('section', { class: 'fx-int-section-list' },
-        h('div', { class: 'fx-int-heading-row' }, h('h2', { class: 'fx-int-heading' }, 'All integrations'), category),
+        recommended.length ? h('h2', { class: 'fx-int-heading' }, 'All') : null,
         all.length ? h('div', { class: 'fx-int-grid' }, all.map(integrationTile)) : h('p', { class: 'fx-empty' }, 'No integration matches.')));
     }
     content.replaceChildren(...sections);
@@ -695,19 +591,20 @@ async function renderIntegrations(main) {
 }
 
 function integrationTile(integration) {
-  const href = `/integrations/${integration.id}`;
   const entry = CATALOGUE[integration.id];
   const on = integration.enabled;
   const attention = ['failed', 'restart_needed'].includes(integration.state);
-  return h('a', { class: 'fx-int-card', href, onclick: navigate },
-    h('header', { class: 'fx-int-card__head' },
-      integrationLogo(integration),
-      h('h3', {}, integration.name),
-      on ? h('span', { class: 'fx-status', 'data-tone': STATE_TONE[integration.state] ?? 'mute' }, STATE_LABEL[integration.state] ?? integration.state) : null),
-    h('p', { class: 'fx-int-card__blurb' }, entry?.blurb ?? ''),
-    h('span', { class: 'fx-int-card__btn' }, attention ? 'Fix' : on ? 'Manage' : '+ Connect'));
+  return tileCard({
+    href: `/integrations/${integration.id}`,
+    mark: integrationLogo(integration),
+    title: integration.name,
+    status: on ? { label: STATE_LABEL[integration.state] ?? integration.state, tone: STATE_TONE[integration.state] } : null,
+    blurb: entry?.blurb,
+    action: attention ? 'Fix' : on ? 'Manage' : '+ Connect',
+  });
 }
 
+
 // One integration's page (/integrations/<id>): its logo and maker, Connect
 // with each step shown as it happens, the setup steps, its settings, and the
 // facts beside them.
@@ -842,8 +739,7 @@ async function renderIntegration(main, id) {
         busy ? h('span', { class: 'fx-spinner fx-spinner--sm', 'aria-hidden': 'true' }) : null, busy ? 'Connecting' : 'Connect');
 
     host.replaceChildren(
-      h('nav', { class: 'fx-crumbs', 'aria-label': 'Breadcrumb' },
-        h('a', { href: '/integrations', onclick: navigate }, 'Integrations'), h('span', { 'aria-hidden': 'true' }, '›'), h('span', {}, current.name)),
+      crumbs(['/integrations', 'Integrations'], current.name),
       h('header', { class: 'fx-int-hero' },
         integrationLogo(current, 'xl'),
         h('div', { class: 'fx-int-hero__text' },
@@ -858,7 +754,7 @@ async function renderIntegration(main, id) {
         h('div', { class: 'fx-int-page__main' }, ...[
           alerts.element,
           !canChange ? notice('Changing integrations needs a verified owner sign-in: Google Workspace on the owner domain with no password, or a second factor.', 'warn', 'Read only.') : null,
-          !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,
+          !body.secretsKey ? notice('Flow cannot store a client secret. 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,
@@ -918,22 +814,6 @@ function personSettingsSection(integration) {
   return section;
 }
 
-// One setting, laid out the same on every settings screen: a short name, one
-// line of smaller text under it, and the control on the right. Longer help
-// lives behind a link, not here. A wide control (a grid of choices) sits on
-// its own line under the name. `tone: 'danger'` marks a row that needs a person.
-function settingRow({ label, hint, control, wide = false, tone = null }) {
-  const target = control?.matches?.('input, select, textarea') ? control : control?.querySelector?.('input:not([type=color]), select, textarea');
-  const id = target ? (target.id ||= `fx-set-${++settingRow.next}`) : null;
-  return h('div', { class: `fx-setting${wide ? ' fx-setting--wide' : ''}`, 'data-tone': tone },
-    h('div', { class: 'fx-setting__text' },
-      id ? h('label', { class: 'fx-setting__name', for: id }, label) : h('span', { class: 'fx-setting__name' }, label),
-      hint ? h('p', { class: 'fx-setting__hint' }, hint) : null),
-    h('div', { class: 'fx-setting__control' }, control));
-}
-settingRow.next = 0;
-
-// The steps of a Connect, each ticked, running or crossed, with the time taken.
 function connectProgress({ steps, started }) {
   const seconds = Math.max(0, Math.round((Date.now() - started) / 1000));
   return h('div', { class: 'fx-progress', role: 'status' },
@@ -1103,7 +983,7 @@ function renderAccount(main) {
 // in it at once.
 function renderAppearance(main) {
   main.append(
-    pageHeader('Appearance', { subtitle: 'Saved with your account, on every device.' }),
+    pageHeader('Appearance'),
     h('div', { class: 'fx-appearance', id: 'appearance' }));
   drawAppearance();
 }
@@ -1169,13 +1049,16 @@ function drawAppearance() {
     (p) => chooseAppearance({ accent: p.hex ? p.id : null }),
     (p) => p.hex
       ? h('button', { type: 'button', class: 'fx-swatch', title: p.label, 'aria-label': p.label, style: { background: p.hex } })
-      : h('button', { type: 'button', class: 'fx-swatch fx-swatch--default', title: `${active.label}'s own`, 'aria-label': `${active.label}'s own accent` },
-        h('span', { 'aria-hidden': 'true', style: { background: `linear-gradient(135deg, ${active.swatches[mode].primary} 50%, ${active.swatches[mode].accent} 50%)` } })));
+      // The design system's own accent, named "Default" on the swatch: a
+      // click puts it back.
+      : h('button', { type: 'button', class: 'fx-swatch fx-swatch--default', 'aria-label': `Default: ${active.label}'s own accent` },
+        h('span', { class: 'fx-swatch__dot', 'aria-hidden': 'true', style: { background: `linear-gradient(135deg, ${active.swatches[mode].primary} 50%, ${active.swatches[mode].accent} 50%)` } }),
+        'Default'));
   accents.classList.add('fx-swatches');
   const custom = h('label', { class: 'fx-swatch-custom' },
     h('input', { type: 'color', 'aria-label': 'Custom accent colour', value: customHex ?? '#0d4e5f', onchange: (event) => chooseAppearance({ accent: event.target.value }) }),
     'Custom');
-  const accentLabel = customHex ? `Custom ${customHex}` : presetIndex > 0 ? ACCENT_PRESETS[presetIndex].label : `${active.label}'s own`;
+  const accentLabel = customHex ? `Custom ${customHex}` : presetIndex > 0 ? ACCENT_PRESETS[presetIndex].label : `the default, ${active.label}'s own`;
 
   host.replaceChildren(h('div', { class: 'fx-settings' },
     settingRow({ label: 'Mode', hint: 'Auto follows this device.', control: modeGroup }),
@@ -1230,7 +1113,7 @@ function drawModeToggles() {
     button.innerHTML = dark ? SUN : MOON;
     if (!button.classList.contains('fx-btn--icon')) button.append(` ${dark ? 'Light' : 'Dark'}`);
     button.setAttribute('aria-label', label);
-    button.title = label;
+    button.dataset.tip = label;
   }
 }
 
@@ -1291,4 +1174,5 @@ async function start() {
   await renderShell();
 }
 
+startTips();
 start();

package/server/ui/automations.js

@@ -1,6 +1,6 @@
 // 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
+// on that integration's page, the invoicing ones on Settings, Automations. 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`.
@@ -86,11 +86,17 @@ export function automationSection(ui, place, title) {
   (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')));
+      section.replaceChildren(ui.sectionTitle(title, { href: DOCS, label: 'How automations work' }), ...automations.flatMap(rowsOf));
     } catch (error) {
       section.replaceChildren(h('h2', { class: 'fx-set__title' }, title), notice(error.message, 'danger'));
     }
   })();
   return section;
 }
+
+// Settings, Automations (/automations): the invoicing automations. A work
+// system's own automations stay on its integration page.
+export function renderAutomations(main, ui) {
+  const { h, pageHeader } = ui;
+  main.append(pageHeader('Automations'), h('div', { class: 'fx-card', style: { padding: '8px 20px 16px' } }, automationSection(ui, 'invoicing', 'Invoicing')));
+}