@arcforgelabs/flow 2026.10.26 → 2026.10.29

package/server/ui/app.js

@@ -10,7 +10,11 @@ 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';
+import { openSearch } from '/assets/ui/search.js';
 
 const $ = (id) => document.getElementById(id);
 
@@ -190,6 +194,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 +208,9 @@ 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"/>',
+  search: '<circle cx="11" cy="11" r="6.5"/><path d="M16 16l4.5 4.5"/>',
+  menu: '<path d="M4 6h16M4 12h16M4 18h16"/>',
   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"/>',
 };
 
@@ -212,6 +220,87 @@ function icon(name) {
   return node;
 }
 
+// The menu button at the top of the sidebar. On a wide screen it folds the
+// sidebar to its icons and back, and the choice stays in this browser. On a
+// narrow screen the sidebar is a bar across the top, and the button opens
+// the menu below it; choosing a page, Escape or a click outside closes it.
+const NARROW = window.matchMedia('(max-width: 820px)');
+const FOLDED_KEY = 'flow_sidebar_folded';
+
+function readFolded() {
+  try { return localStorage.getItem(FOLDED_KEY) === '1'; } catch { return false; }
+}
+
+function drawMenu() {
+  const shell = $('shell');
+  const folded = readFolded();
+  shell.toggleAttribute('data-folded', folded);
+  const open = NARROW.matches ? shell.hasAttribute('data-menu-open') : !folded;
+  const toggle = $('menu-toggle');
+  const label = NARROW.matches ? (open ? 'Close the menu' : 'Open the menu') : (folded ? 'Show the menu' : 'Fold the menu');
+  toggle.setAttribute('aria-expanded', String(open));
+  toggle.setAttribute('aria-label', label);
+  toggle.title = 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');
+  }
+}
+
+function closeMenu() {
+  if (!$('shell').hasAttribute('data-menu-open')) return;
+  $('shell').removeAttribute('data-menu-open');
+  drawMenu();
+}
+
+function toggleMenu() {
+  if (NARROW.matches) {
+    $('shell').toggleAttribute('data-menu-open');
+  } else {
+    try { localStorage.setItem(FOLDED_KEY, readFolded() ? '0' : '1'); } catch { /* the choice is only a convenience */ }
+  }
+  drawMenu();
+}
+
+NARROW.addEventListener('change', () => { $('shell').removeAttribute('data-menu-open'); drawMenu(); });
+document.addEventListener('keydown', (event) => {
+  if (event.key === 'Escape' && $('shell')?.hasAttribute('data-menu-open')) {
+    closeMenu();
+    $('menu-toggle').focus();
+  }
+});
+document.addEventListener('click', (event) => {
+  if (!event.target.closest?.('.fx-side') || event.target.closest?.('[data-nav]')) closeMenu();
+});
+
+// Search, from the sidebar foot or Ctrl+K (⌘K): the pages this person may
+// open, invoices and jobs (search.js).
+function search() {
+  const views = Object.entries(VIEWS)
+    .filter(([, view]) => !view.ownerOnly || me?.person.role === 'owner')
+    .map(([name, view]) => ({ name, label: view.label, icon: view.icon }));
+  openSearch({ h, flow, go, icon, views });
+}
+
+document.addEventListener('keydown', (event) => {
+  if (event.key.toLowerCase() !== 'k' || !(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey) return;
+  if (document.body.dataset.state !== 'signed-in') return;
+  event.preventDefault();
+  search();
+});
+
+// "Report a problem" in Clerk's account menu, between "Manage account" and
+// "Sign out". Clerk mounts and unmounts the icon itself.
+function reportMenuItem(openReport) {
+  return {
+    label: 'Report a problem',
+    onClick: () => { openReport().catch((error) => toast(error.message, 'danger')); },
+    mountIcon: (element) => element.replaceChildren(icon('flag')),
+    unmountIcon: (element) => element.replaceChildren(),
+  };
+}
+
 // The view and, for one record, its id: /invoices/<id> is ['invoices', '<id>'].
 function currentView() {
   const [name, id = null] = location.pathname.replace(/^\/+|\/+$/g, '').split('/');
@@ -225,7 +314,7 @@ async function route() {
   const [view, id] = currentView();
   const path = id ? `/${view}/${id}` : `/${view}`;
   if (location.pathname !== path) history.replaceState(null, '', path);
-  for (const link of document.querySelectorAll('[data-nav]')) {
+  for (const link of document.querySelectorAll('a[data-nav]')) {
     link.setAttribute('aria-current', link.dataset.nav === view ? 'page' : 'false');
   }
   main.replaceChildren();
@@ -237,7 +326,7 @@ async function route() {
 
 // Opens a path in place; the address changes, the page stays.
 function go(path, { replace = false } = {}) {
-  if (path !== location.pathname) history[replace ? 'replaceState' : 'pushState'](null, '', path);
+  if (path !== location.pathname + location.search) history[replace ? 'replaceState' : 'pushState'](null, '', path);
   route();
 }
 
@@ -281,10 +370,34 @@ function renderShell() {
     if (view.ownerOnly && me?.person.role !== 'owner') continue;
     if (view.group && view.group !== group) items.push(h('span', { class: 'fx-nav__group' }, view.group));
     group = view.group;
-    items.push(h('a', { href: `/${name}`, 'data-nav': name, onclick: navigate }, icon(view.icon), h('span', {}, view.label)));
+    items.push(h('a', { href: `/${name}`, 'data-nav': name, 'data-label': view.label, onclick: navigate }, icon(view.icon), h('span', { class: 'fx-nav__label' }, view.label)));
   }
-  nav.replaceChildren(...items);
-  mountClerk('userButton', $('user-button'), { afterSignOutUrl: '/sign-in', showName: false });
+  // "Report a problem" sits at the foot of the menu, above the account chip,
+  // while Sentry and its report form are on (monitoring.js).
+  const report = h('button', { type: 'button', class: 'fx-nav__report', 'data-nav': 'report', 'data-label': 'Report a problem', hidden: true },
+    icon('flag'), h('span', { class: 'fx-nav__label' }, 'Report a problem'));
+  nav.replaceChildren(...items, report);
+  $('menu-toggle').replaceChildren(icon('menu'));
+  $('menu-toggle').onclick = toggleMenu;
+  drawMenu();
+  // The sidebar foot shows who is signed in: photo or initial, then the name
+  // (the email when the account has no name). It opens the account menu.
+  const userButton = { afterSignOutUrl: '/sign-in', showName: true };
+  $('search').replaceChildren(icon('search'));
+  $('search').onclick = search;
+  mountClerk('userButton', $('user-button'), userButton);
+  // Errors and problem reports go to the installation's own Sentry, when the
+  // Sentry integration is on (monitoring.js). Then "Report a problem" shows
+  // in the menu and in the account menu. Flow works the same without it.
+  startMonitoring({ flow, person: me.person })
+    .then((openReport) => {
+      if (!openReport) return;
+      report.hidden = false;
+      report.onclick = () => { openReport().catch((error) => toast(error.message, 'danger')); };
+      unmountClerk($('user-button'));
+      mountClerk('userButton', $('user-button'), { ...userButton, customMenuItems: [reportMenuItem(openReport)] });
+    })
+    .catch((error) => console.warn(`[monitoring] ${error.message}`));
   window.addEventListener('popstate', route);
   return route();
 }
@@ -405,8 +518,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 +740,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/clerk-appearance.js

@@ -11,6 +11,9 @@ const gearIcon = {
   '&& > *': { visibility: 'hidden' },
 };
 
+// Matches the narrow-screen rule in flow.css, where the sidebar becomes a bar.
+const NARROW = '@media (max-width: 820px)';
+
 function token(name, fallback) {
   const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
   return value || fallback;
@@ -42,6 +45,7 @@ export function flowClerkAppearance({ embedded = false, publicSignUp = false } =
   const inputEdge = { ...controlEdge, '&&[data-feedback="error"]': { boxShadow: edge(danger) } };
   const display = token('--t-display', 'ui-serif, Georgia, serif');
   const dim = token('--t-dim', '#5b6773');
+  const paper = token('--t-paper', '#ffffff');
   return {
     variables: {
       colorPrimary: token('--t-primary', '#1f6f8f'),
@@ -84,6 +88,23 @@ export function flowClerkAppearance({ embedded = false, publicSignUp = false } =
       badge: { '&&': { color: dim, background: `color-mix(in srgb, ${text} 5%, transparent)`, borderColor: line } },
       formButtonPrimary: { boxShadow: 'none', textTransform: 'none', fontWeight: 650 },
       socialButtonsBlockButton: controlEdge,
+      // The account button in the sidebar foot is a chip: photo or initial,
+      // then the name (Clerk shows the email when there is no name), clipped
+      // with an ellipsis to fit. The top bar on narrow screens has no room for
+      // the name, so there it is the photo or initial alone.
+      userButtonTrigger: {
+        '&&': {
+          width: '100%', minWidth: 0, justifyContent: 'flex-start', padding: '4px 10px 4px 4px', borderRadius: token('--t-radius-lg', '10px'), background: paper, boxShadow: `inset 0 0 0 1px ${line}`,
+          '&:hover': { background: `color-mix(in srgb, ${text} 6%, ${paper})` },
+          [NARROW]: { width: 'auto', padding: 0, borderRadius: '50%', background: 'transparent', boxShadow: 'none', '&:hover': { background: 'transparent' } },
+        },
+      },
+      userButtonBox: { flexDirection: 'row-reverse', justifyContent: 'flex-end', minWidth: 0, gap: '8px' },
+      userButtonOuterIdentifier: {
+        minWidth: 0, paddingInlineStart: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
+        color: token('--t-strong', text), fontSize: '14px', fontWeight: 600,
+        [NARROW]: { display: 'none' },
+      },
       userButtonPopoverCard: { border: `1px solid ${line}`, boxShadow: shadow },
       userButtonPopoverActionButtonIcon__manageAccount: gearIcon,
       footer: embedded ? { display: 'none' } : undefined,