@arcforgelabs/flow 2026.10.33 → 2026.10.34

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

@@ -50,6 +50,13 @@
       "when": 1792459854631,
       "tag": "0006_sweep_findings",
       "breakpoints": true
+    },
+    {
+      "idx": 7,
+      "version": "7",
+      "when": 1792472936253,
+      "tag": "0007_stage_moves",
+      "breakpoints": true
     }
   ]
 }

package/server/integrations/seazona/schema.js

@@ -292,3 +292,29 @@ export const seazonaSweepFindings = pgTable('seazona_sweep_findings', {
   primaryKey({ columns: [t.resource, t.recordKey, t.kind] }),
   index('seazona_sweep_findings_found').on(t.lastFoundAt),
 ]);
+
+// A person's stage move on the Jobs board that Seazona must make, because
+// Seazona's API cannot change an order's status (docs/SEAZONA.md, "Stage
+// moves"). One row per order: the latest move. `state` is waiting until the
+// sync reads the new status (done), a day passes (expired), or the person
+// takes it back (cancelled). Statuses only; never patient data.
+export const seazonaStageMoves = pgTable('seazona_stage_moves', {
+  orderId: text('order_id').primaryKey(),
+  fromStatus: text('from_status'),
+  toStatus: text('to_status').notNull(),
+  requestedBy: text('requested_by'),
+  requestedAt: at('requested_at').notNull(),
+  expiresAt: at('expires_at').notNull(),
+  state: text('state').notNull().default('waiting'),
+  settledAt: at('settled_at'),
+}, (t) => [
+  index('seazona_stage_moves_state').on(t.state, t.expiresAt),
+]);
+
+// Each person's own Seazona choices. `ask_before_stage_moves`: show the
+// "Move in Seazona" dialog before a stage move on the Jobs board.
+export const seazonaPersonSettings = pgTable('seazona_person_settings', {
+  personId: text('person_id').primaryKey(),
+  askBeforeStageMoves: boolean('ask_before_stage_moves').notNull().default(true),
+  updatedAt: at('updated_at').notNull(),
+});

package/server/integrations/seazona/settings.js

@@ -55,6 +55,16 @@ export function normaliseBaseUrl(value) {
   return `${url.origin}${path}/v1`;
 }
 
+function orderUrlTemplate(value) {
+  const raw = text(value);
+  if (!raw.includes('{ref}')) return null;
+  try {
+    return new URL(raw.replaceAll('{ref}', 'x')).protocol === 'https:' ? raw : null;
+  } catch {
+    return null;
+  }
+}
+
 // Returns the resolved settings, or throws SeazonaSettingsError. `mode` is
 // null when SEAZONA_MODE is unset: the adapter is then not configured.
 export function resolveSeazonaSettings(env = process.env) {
@@ -161,6 +171,10 @@ export function resolveSeazonaSettings(env = process.env) {
     rate,
     // The scheduler starts only in live mode (issue #10).
     scheduled: mode === 'live',
+    // 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.
+    orderUrlTemplate: orderUrlTemplate(env.SEAZONA_ORDER_URL),
   };
 
   if (mode === 'live' || mode === 'sandbox') {

package/server/integrations/seazona/stage-moves.js

@@ -0,0 +1,135 @@
+import { and, eq, gte, inArray, lt, sql } from 'drizzle-orm';
+import { FlowError } from '../../core/errors.js';
+import { orderStatusLabel } from './map.js';
+import { seazonaOrders, seazonaPersonSettings, seazonaStageMoves } from './schema.js';
+
+// Stage moves on the Jobs board (docs/SEAZONA.md, "Stage moves"). Seazona's
+// API cannot change an order's status, so Flow never tries: a move becomes a
+// hand-off. Flow records the move, the person makes it in Seazona, and the
+// next sync that reads the new status settles it. Until then the card shows
+// "Waiting for Seazona" in the new lane. After a day with no change the move
+// expires, the card goes back to Seazona's stage, and a quiet alert says so.
+// Every function here reads and writes Flow's database only.
+
+export const HAND_OFF_MS = 24 * 60 * 60_000;
+// How long an expired move stays in the alert.
+const EXPIRED_ALERT_MS = 7 * 24 * 60 * 60_000;
+const MAX_STATUS = 80;
+
+// The address that opens one order in Seazona, from SEAZONA_ORDER_URL with
+// its {ref} placeholder, or null when the installation has not set one.
+export function orderUrl(template, ref) {
+  if (!template || !template.includes('{ref}')) return null;
+  return template.replaceAll('{ref}', encodeURIComponent(ref));
+}
+
+// Record a person's move of one order to `toStatus`, and answer the hand-off
+// the board shows. A second move of the same order replaces the first.
+export async function requestStageMove(db, { orderId, toStatus, personId = null, orderUrlTemplate = null, now = Date.now() }) {
+  const to = typeof toStatus === 'string' ? toStatus.trim() : '';
+  if (!to || to.length > MAX_STATUS) throw new FlowError('invalid', 'toStatus must be a Seazona status');
+  const [order] = await db.select().from(seazonaOrders).where(eq(seazonaOrders.id, String(orderId ?? '')));
+  if (!order || order.deletedInSourceAt) throw new FlowError('not_found', 'Flow has no Seazona order with that number');
+  const known = await db.selectDistinct({ status: seazonaOrders.status }).from(seazonaOrders)
+    .where(eq(sql`lower(trim(${seazonaOrders.status}))`, to.toLowerCase()));
+  if (!known.length) throw new FlowError('invalid', `Seazona has no status named ${to}`);
+  const from = orderStatusLabel(order) || null;
+  if (from && from.toLowerCase() === to.toLowerCase()) throw new FlowError('conflict', `The order is already ${from} in Seazona`);
+  const at = new Date(Number(now));
+  const row = {
+    orderId: order.id, fromStatus: from, toStatus: known[0].status.trim(), requestedBy: personId,
+    requestedAt: at, expiresAt: new Date(at.getTime() + HAND_OFF_MS), state: 'waiting', settledAt: null,
+  };
+  await db.insert(seazonaStageMoves).values(row).onConflictDoUpdate({ target: seazonaStageMoves.orderId, set: row });
+  return handOff(row, { orderUrlTemplate });
+}
+
+// Take a waiting move back: the card returns to Seazona's stage.
+export async function cancelStageMove(db, { orderId, now = Date.now() }) {
+  const rows = await db.update(seazonaStageMoves).set({ state: 'cancelled', settledAt: new Date(Number(now)) })
+    .where(and(eq(seazonaStageMoves.orderId, String(orderId ?? '')), eq(seazonaStageMoves.state, 'waiting'))).returning();
+  return { cancelled: rows.length > 0 };
+}
+
+// Settle the waiting moves against Flow's copy of the orders: done when the
+// order has the new status, expired when a day has passed. An order that
+// moved to some other status settles as done too: Seazona has the last word.
+export async function settleStageMoves(db, { now = Date.now() } = {}) {
+  const at = new Date(Number(now));
+  const waiting = await db.select({ move: seazonaStageMoves, order: seazonaOrders }).from(seazonaStageMoves)
+    .leftJoin(seazonaOrders, eq(seazonaOrders.id, seazonaStageMoves.orderId))
+    .where(eq(seazonaStageMoves.state, 'waiting'));
+  const done = [];
+  const expired = [];
+  for (const { move, order } of waiting) {
+    const status = orderStatusLabel(order) || null;
+    if (status && status !== move.fromStatus) done.push(move.orderId);
+    else if (move.expiresAt <= at) expired.push(move.orderId);
+  }
+  if (done.length) {
+    await db.update(seazonaStageMoves).set({ state: 'done', settledAt: at })
+      .where(and(inArray(seazonaStageMoves.orderId, done), eq(seazonaStageMoves.state, 'waiting')));
+  }
+  if (expired.length) {
+    await db.update(seazonaStageMoves).set({ state: 'expired', settledAt: at })
+      .where(and(inArray(seazonaStageMoves.orderId, expired), eq(seazonaStageMoves.state, 'waiting')));
+  }
+  return { done: done.length, expired: expired.length };
+}
+
+// The waiting moves, by order id, for the board's cards.
+export async function waitingStageMoves(db) {
+  const rows = await db.select().from(seazonaStageMoves).where(eq(seazonaStageMoves.state, 'waiting'));
+  return new Map(rows.map((r) => [r.orderId, r]));
+}
+
+// The moves that expired in the last week, for the quiet alert.
+export async function expiredStageMoves(db, { now = Date.now() } = {}) {
+  return db.select().from(seazonaStageMoves).where(and(
+    eq(seazonaStageMoves.state, 'expired'),
+    gte(seazonaStageMoves.settledAt, new Date(Number(now) - EXPIRED_ALERT_MS)),
+    lt(seazonaStageMoves.settledAt, new Date(Number(now) + 1)),
+  ));
+}
+
+// What the board shows for a waiting move.
+export function handOff(row, { orderUrlTemplate = null } = {}) {
+  return {
+    kind: 'hand_off',
+    system: 'seazona',
+    sourceJobRef: row.orderId,
+    caseRef: row.orderId,
+    from: row.fromStatus,
+    to: row.toStatus,
+    state: row.state,
+    requestedAt: row.requestedAt.toISOString(),
+    expiresAt: row.expiresAt.toISOString(),
+    openUrl: orderUrl(orderUrlTemplate, row.orderId),
+  };
+}
+
+// Each person's own Seazona choices, with their defaults.
+export const PERSON_SETTINGS = Object.freeze([
+  {
+    key: 'askBeforeStageMoves',
+    label: 'Ask before stage moves',
+    hint: 'On the Jobs board, show what to do in Seazona before a card moves to a Seazona stage.',
+    kind: 'onoff',
+    default: true,
+  },
+]);
+
+export async function readPersonSettings(db, personId) {
+  const [row] = await db.select().from(seazonaPersonSettings).where(eq(seazonaPersonSettings.personId, String(personId)));
+  return PERSON_SETTINGS.map((s) => ({ ...s, value: row ? Boolean(row[s.key]) : s.default }));
+}
+
+export async function writePersonSetting(db, personId, { key, value }, { now = Date.now() } = {}) {
+  const setting = PERSON_SETTINGS.find((s) => s.key === key);
+  if (!setting) throw new FlowError('invalid', 'no such setting');
+  if (typeof value !== 'boolean') throw new FlowError('invalid', `${setting.label} must be on or off`);
+  const at = new Date(Number(now));
+  await db.insert(seazonaPersonSettings).values({ personId: String(personId), [key]: value, updatedAt: at })
+    .onConflictDoUpdate({ target: seazonaPersonSettings.personId, set: { [key]: value, updatedAt: at } });
+  return readPersonSettings(db, personId);
+}

package/server/integrations/seazona/tables.js

@@ -19,5 +19,7 @@ export const seazonaSchema = Object.freeze({
     'seazona_history_batch_jobs',
     'seazona_history_jobs',
     'seazona_sweep_findings',
+    'seazona_stage_moves',
+    'seazona_person_settings',
   ]),
 });

package/server/integrations/sentry/index.js

@@ -1,16 +1,27 @@
 import * as SentryNode from '@sentry/node';
+import { scrubSpan } from '../../ui/monitoring.js';
 
-// The Sentry adapter (docs/SENTRY.md). It sends the errors Flow logs, and the
-// browser's errors and problem reports, to the installation's own Sentry
+// The Sentry adapter (docs/SENTRY.md). It sends the errors Flow logs, the
+// browser's errors and problem reports, and performance traces from both
+// (when SENTRY_TRACES_SAMPLE_RATE is above 0), to the installation's own Sentry
 // project. Flow ships no DSN: each installation enters its own, here or as
 // the host setting SENTRY_DSN. It has no tables.
 
 // The browser SDK, loaded from Sentry's CDN only while this adapter is on
-// (server/ui/monitoring.js). Pinned, with its integrity hash.
+// (server/ui/monitoring.js). Pinned, with its integrity hash. With traces on,
+// the bundle that also traces; Sentry ships it only with session replay in
+// it too, which Flow never turns on.
 export const SENTRY_BROWSER = Object.freeze({
   src: 'https://browser.sentry-cdn.com/11.4.0/bundle.feedback.min.js',
   integrity: 'sha384-H9RmZ/VaqOPZrUezgCSqHp4t3LoQMd/5+0Y4oEGUB2bddZzSnwZiOYoWneK4diWt',
 });
+export const SENTRY_BROWSER_TRACING = Object.freeze({
+  src: 'https://browser.sentry-cdn.com/11.4.0/bundle.tracing.replay.feedback.min.js',
+  integrity: 'sha384-LjwHQKAojcITl6Q7innDSAFjziFnqV9ovZBNXnXnQwub1VXIdBMJnYrQNihtxSa6',
+});
+
+// The share of requests and page loads traced when the setting is empty.
+export const DEFAULT_TRACES_SAMPLE_RATE = 0.2;
 
 // A DSN is https://<public key>@<host>/<project id>.
 const DSN_PATTERN = /^https:\/\/[0-9a-f]{16,64}@[a-z0-9.-]+(:\d+)?\/(\d+)$/i;
@@ -31,6 +42,7 @@ export const SENTRY_SETUP = {
     { 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_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.' },
   ],
 };
 
@@ -40,9 +52,17 @@ export function readSentrySettings(env) {
   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';
   const feedback = String(env.SENTRY_FEEDBACK ?? 'on').trim() !== 'off';
-  return { dsn, environment, feedback };
+  const rate = String(env.SENTRY_TRACES_SAMPLE_RATE ?? '').trim();
+  const tracesSampleRate = rate === '' ? DEFAULT_TRACES_SAMPLE_RATE : Number(rate);
+  if (!/^\d*\.?\d+$/.test(rate || '0') || !(tracesSampleRate >= 0 && tracesSampleRate <= 1)) {
+    throw new Error('SENTRY_TRACES_SAMPLE_RATE must be a number from 0 to 1, such as 0.2.');
+  }
+  return { dsn, environment, feedback, tracesSampleRate };
 }
 
+// No trace for the host's health check: it is not a person waiting.
+const UNTRACED_PATHS = new Set(['/health']);
+
 // The release Sentry groups events by: Flow's release tag, else its commit.
 export function sentryRelease(env) {
   const read = (value) => String(value ?? '').trim() || null;
@@ -51,7 +71,7 @@ export function sentryRelease(env) {
   return release ? `flow@${release.replace(/^v/, '')}` : revision ? `flow@${revision.slice(0, 12)}` : null;
 }
 
-// `sdk` is for tests: anything with init, captureMessage, captureException
+// `sdk` is for tests: anything with init, captureEvent, captureException
 // and close, as @sentry/node has.
 export function createSentryAdapter({ sdk = SentryNode, env: hostEnv = process.env } = {}) {
   let settings = null;
@@ -71,10 +91,14 @@ export function createSentryAdapter({ sdk = SentryNode, env: hostEnv = process.e
         release: release ?? undefined,
         // Flow sends what it logs; no request bodies, cookies or IP addresses.
         sendDefaultPii: false,
-        tracesSampleRate: 0,
-        skipOpenTelemetrySetup: true,
+        // A request the browser traced keeps the browser's choice, so a
+        // click and the server work it caused stay one trace.
+        tracesSampler: ({ attributes, inheritOrSampleWith }) => (
+          UNTRACED_PATHS.has(attributes?.['url.path']) ? 0 : inheritOrSampleWith(settings.tracesSampleRate)
+        ),
+        beforeSendSpan: scrubSpan,
       });
-      log.info?.(`[sentry] on: environment ${settings.environment}; report button ${settings.feedback ? 'on' : 'off'}`);
+      log.info?.(`[sentry] on: environment ${settings.environment}; report button ${settings.feedback ? 'on' : 'off'}; traces ${settings.tracesSampleRate > 0 ? settings.tracesSampleRate : 'off'}`);
     },
     async stop() {
       if (settings) await sdk.close(2000);
@@ -90,13 +114,40 @@ export function createSentryAdapter({ sdk = SentryNode, env: hostEnv = process.e
         if (!settings) return;
         const scope = { level: 'error', tags: { source } };
         if (error instanceof Error) sdk.captureException(error, { ...scope, extra: { log: message } });
-        else sdk.captureMessage(message, scope);
+        // Not captureMessage: the SDK adds a stack to it, and Sentry then
+        // names the issue after its top frame ("Object.captureError"), not
+        // the line Flow logged. A plain event keeps the line as the title.
+        else sdk.captureEvent({ message, ...scope });
       },
       // What the browser needs to report to the same project. The DSN is
       // meant for browsers.
       browserMonitoring() {
         if (!settings) return null;
-        return { dsn: settings.dsn, environment: settings.environment, release, feedback: settings.feedback, script: SENTRY_BROWSER };
+        const { tracesSampleRate } = settings;
+        return {
+          dsn: settings.dsn,
+          environment: settings.environment,
+          release,
+          feedback: settings.feedback,
+          tracesSampleRate,
+          script: tracesSampleRate > 0 ? SENTRY_BROWSER_TRACING : SENTRY_BROWSER,
+        };
+      },
+      // Runs `work` in a span of the current trace (server/core/tracing.js).
+      // Work outside a traced request (the pipeline, the workers) starts no
+      // trace of its own.
+      traceSpan({ name, op, attributes }, work) {
+        if (!settings?.tracesSampleRate) return work();
+        return sdk.startSpan({ name, op, attributes, onlyIfParent: true }, work);
+      },
+      // At a request's start: a function that names its trace once the route
+      // is known, or null when this request is not traced.
+      traceRequest() {
+        if (!settings?.tracesSampleRate) return null;
+        const span = sdk.getActiveSpan();
+        if (!span) return null;
+        const root = sdk.getRootSpan(span);
+        return (name) => sdk.updateSpanName(root, name);
       },
     },
   };

package/server/ui/app-page.js

@@ -51,7 +51,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', '/invoicing-settings', '/price-list'];
+export const APP_PATHS = ['/sign-in', '/jobs', '/invoices', '/invoices/:id', '/people', '/integrations', '/integrations/:id', '/account', '/appearance', '/invoicing-settings', '/price-list', '/custom-fields'];
 
 export function appPage({ defaultFamily }) {
   return renderPage({

package/server/ui/app.js

@@ -13,6 +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 { renderJobs } from '/assets/ui/jobs.js';
 import { startMonitoring } from '/assets/ui/monitoring.js';
 import { openSearch } from '/assets/ui/search.js';
@@ -198,6 +199,7 @@ const VIEWS = {
   invoices: { label: 'Invoices', icon: 'invoices', group: 'Work', render: (main, id) => (id ? renderInvoice(main, ui(), id) : renderInvoiceList(main, ui())) },
   'invoicing-settings': { label: 'Invoice rules', icon: 'invoices', group: 'Settings', render: (main) => renderInvoicingSettings(main, ui()) },
   'price-list': { label: 'Price list', icon: 'tag', group: 'Settings', render: (main) => 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 },
   integrations: { label: 'Integrations', icon: 'plug', group: 'Settings', ownerOnly: true, render: (main, id) => (id ? renderIntegration(main, id) : renderIntegrations(main)) },
   // Not in the sidebar: "Manage account" in the account menu opens the same
@@ -212,6 +214,7 @@ const ICON_PATHS = {
   invoices: '<path d="M6 3h9l4 4v14H6z"/><path d="M14 3v5h5M9 13h7M9 17h5"/>',
   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"/>',
+  fields: '<rect x="3" y="4" width="18" height="5" rx="1.5"/><rect x="3" y="13" width="18" height="5" rx="1.5"/><path d="M7 6.5h4M7 15.5h7"/>',
   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"/>',
@@ -309,11 +312,15 @@ function reportMenuItem(openReport) {
   };
 }
 
+// The page a person lands on after sign-in, and for / or an unknown path.
+// Invoices opens on its Ready tab. A home page can take this over later.
+const START_VIEW = 'invoices';
+
 // The view and, for one record, its id: /invoices/<id> is ['invoices', '<id>'].
 function currentView() {
   const [name, id = null] = location.pathname.replace(/^\/+|\/+$/g, '').split('/');
   if (VIEWS[name] && (!VIEWS[name].ownerOnly || me?.person.role === 'owner')) return [name, id];
-  return ['jobs', null];
+  return [START_VIEW, null];
 }
 
 async function route() {
@@ -533,7 +540,7 @@ 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' },
+  sentry: { maker: 'Sentry', category: 'monitoring', blurb: 'Send errors, problem reports and speed traces to your own Sentry project.', logo: 'sentry.svg' },
 };
 const CATEGORIES = [['all', 'All'], ['accounting', 'Accounting'], ['lab', 'Lab software'], ['monitoring', 'Monitoring']];
 const CATEGORY_LABEL = Object.fromEntries(CATEGORIES);
@@ -774,6 +781,7 @@ async function renderIntegration(main, id) {
           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,
+          on && current.state === 'ready' ? personSettingsSection(current) : 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'),
@@ -798,6 +806,36 @@ async function renderIntegration(main, id) {
   draw(found);
 }
 
+// "Your settings": this person's own choices in one integration
+// (GET /api/work/my-settings), such as Seazona's "Ask before stage moves".
+// Each person sees and changes only their own.
+function personSettingsSection(integration) {
+  const section = h('section', { class: 'fx-int-section' },
+    h('h2', { class: 'fx-int-section__title' }, 'Your settings'), h('div', { class: 'fx-skeleton' }));
+  flow(`/api/work/my-settings?integration=${encodeURIComponent(integration.id)}`).then(({ integrations }) => {
+    const settings = integrations[0]?.settings ?? [];
+    if (!settings.length) { section.remove(); return; }
+    const rows = settings.map((setting) => {
+      const input = h('select', { class: 'fx-select' },
+        [{ value: 'off', label: 'Off' }, { value: 'on', label: 'On' }].map((c) => h('option', { value: c.value, selected: (setting.value ? 'on' : 'off') === c.value }, c.label)));
+      input.addEventListener('change', async () => {
+        input.disabled = true;
+        try {
+          await flow('/api/work/my-settings', { method: 'PUT', body: JSON.stringify({ integration: integration.id, key: setting.key, value: input.value === 'on' }) });
+          toast('Saved for you.', 'success');
+        } catch (error) {
+          input.value = setting.value ? 'on' : 'off';
+          toast(error.message, 'danger');
+        }
+        input.disabled = false;
+      });
+      return settingRow({ label: setting.label, hint: setting.hint, control: input });
+    });
+    section.replaceChildren(section.firstChild, h('div', { class: 'fx-settings' }, rows));
+  }).catch(() => section.remove());
+  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

package/server/ui/custom-fields.js

@@ -0,0 +1,190 @@
+// Settings, Custom fields (/custom-fields; server/core/custom-fields.js,
+// docs/CUSTOM_FIELDS.md). The fields a lab makes for its jobs, like ClickUp's
+// custom fields: each row is one field, with its type and, for a dropdown,
+// its options in lane order. Create field and Edit open a dialog. The work
+// systems' own fields (Seazona's stage) show below, read only: Flow reads
+// them and never changes them here. Everyone can read the page; an owner or
+// admin changes it. The caller passes in app.js's shared pieces as `ui`.
+
+const DOCS = 'https://github.com/arcforgelabs/flow/blob/main/docs/CUSTOM_FIELDS.md';
+const TYPE_LABELS = {
+  dropdown: 'Dropdown', person: 'Person', checkbox: 'Checkbox', date: 'Date', number: 'Number', text: 'Text',
+};
+const TYPE_HINTS = {
+  dropdown: 'One option from a list. Makes board lanes.',
+  person: 'One person in Flow. Makes board lanes.',
+  checkbox: 'Yes or no. Makes board lanes.',
+  date: 'A day, for example a promised date.',
+  number: 'A number, for example units.',
+  text: 'A short note.',
+};
+
+export async function renderCustomFields(main, ui) {
+  const { h, flow, toast, notice, dialog, pageHeader, me } = ui;
+  const disabled = !['owner', 'admin'].includes(me?.person.role);
+  const host = h('div', { class: 'fx-card', style: { padding: '8px 20px 16px' } }, h('div', { class: 'fx-skeleton' }));
+  const addButton = h('button', { class: 'fx-btn fx-btn--primary', type: 'button', disabled }, 'Create field');
+  main.append(pageHeader('Custom fields', { subtitle: 'Fields for your jobs. They stay in Flow and never change Seazona or Xero.', actions: [addButton] }), host);
+
+  let data = null;
+
+  async function send(path, method, payload, done = 'Saved.') {
+    try {
+      const body = await flow(path, { method, ...(payload ? { body: JSON.stringify(payload) } : {}) });
+      if (done) toast(done, 'success');
+      return body;
+    } catch (error) {
+      toast(error.message, 'danger');
+      return null;
+    }
+  }
+
+  const row = (name, hint, control) => h('div', { class: 'fx-set__row' },
+    h('div', { class: 'fx-set__text' }, h('span', { class: 'fx-set__name' }, name), hint),
+    h('div', { class: 'fx-set__control fx-rule__controls' }, control));
+  const optionChip = (o) => h('span', { class: 'fx-cf__opt', 'data-color': o.color ?? 'gray' }, o.name);
+  const typeChip = (type) => h('span', { class: 'fx-chip fx-chip--static' }, TYPE_LABELS[type] ?? type);
+
+  // The option list editor for a dropdown: one line per option (name,
+  // colour, move up, remove), in lane order.
+  function optionsEditor(start) {
+    let options = start.filter((o) => !o.archived).map((o) => ({ ...o }));
+    const list = h('div', { class: 'fx-fields fx-cf__options' });
+    const add = h('button', { class: 'fx-btn fx-btn--ghost fx-btn--sm', type: 'button' }, 'Add option');
+    function draw() {
+      list.replaceChildren(...options.map((o, i) => {
+        const name = h('input', { class: 'fx-input', maxlength: '40', value: o.name, 'aria-label': `Option ${i + 1}`, placeholder: 'Option name' });
+        name.addEventListener('input', () => { o.name = name.value; });
+        const color = h('select', { class: 'fx-select fx-cf__color', 'aria-label': `Colour of option ${i + 1}`, 'data-color': o.color },
+          data.colors.map((c) => h('option', { value: c }, c[0].toUpperCase() + c.slice(1))));
+        color.value = o.color ?? 'gray';
+        color.addEventListener('change', () => { o.color = color.value; color.dataset.color = color.value; });
+        const up = h('button', { class: 'fx-btn fx-btn--ghost fx-btn--sm', type: 'button', 'aria-label': `Move option ${i + 1} up`, disabled: i === 0 }, '↑');
+        up.addEventListener('click', () => { [options[i - 1], options[i]] = [options[i], options[i - 1]]; draw(); });
+        const remove = h('button', { class: 'fx-btn fx-btn--ghost fx-btn--sm fx-rule__delete', type: 'button', 'aria-label': `Remove option ${i + 1}` }, 'Remove');
+        remove.addEventListener('click', () => { options.splice(i, 1); draw(); });
+        return h('div', { class: 'fx-cf__line' }, name, color, up, remove);
+      }));
+      if (!options.length) list.append(h('span', { class: 'fx-dim' }, 'No options yet.'));
+    }
+    add.addEventListener('click', () => {
+      options.push({ name: '', color: data.colors[options.length % data.colors.length] });
+      draw();
+      list.querySelector('.fx-cf__line:last-child input')?.focus();
+    });
+    draw();
+    return {
+      element: h('div', { class: 'fx-fields' }, list, add),
+      value: () => options.filter((o) => o.name.trim()).map(({ id, name, color }) => ({ ...(id ? { id } : {}), name, color })),
+    };
+  }
+
+  // The dialog for a new field (field null) or an existing one. The type is
+  // fixed once the field exists.
+  async function edit(field, draft = field) {
+    const label = (text, control, hint) => h('div', { class: 'fx-field' }, h('span', { class: 'fx-label' }, text), control, hint ?? null);
+    const name = h('input', { class: 'fx-input', required: true, maxlength: '60', value: draft?.name ?? '', 'aria-label': 'Field name', placeholder: 'For example Priority' });
+    const type = h('select', { class: 'fx-select', 'aria-label': 'Type', disabled: Boolean(field) },
+      data.types.map((t) => h('option', { value: t }, TYPE_LABELS[t] ?? t)));
+    type.value = draft?.type ?? 'dropdown';
+    const typeHint = h('span', { class: 'fx-dim' }, TYPE_HINTS[type.value]);
+    const editor = optionsEditor(draft?.options ?? [
+      { name: 'To do', color: 'gray' }, { name: 'Doing', color: 'blue' }, { name: 'Done', color: 'green' },
+    ]);
+    const optionsField = label('Options', editor.element, h('span', { class: 'fx-dim' }, 'Board lanes follow this order. A removed option is kept for old jobs.'));
+    const showOptions = () => { optionsField.hidden = type.value !== 'dropdown'; typeHint.textContent = TYPE_HINTS[type.value]; };
+    type.addEventListener('change', showOptions);
+    showOptions();
+
+    let action = null;
+    const parts = [label('Name', name), label('Type', type, typeHint), optionsField];
+    if (field) {
+      const archive = h('button', { class: 'fx-btn fx-btn--ghost fx-btn--sm fx-rule__delete', type: 'button' }, 'Archive field');
+      archive.addEventListener('click', () => { action = 'archive'; archive.closest('dialog').close(); });
+      parts.push(archive);
+    }
+    const ok = await dialog({ title: field ? `Edit ${field.name}` : 'Create field', body: h('div', { class: 'fx-fields fx-rule__dialog' }, ...parts), confirm: field ? 'Save' : 'Create field' });
+    if (action === 'archive') {
+      if (await send(`/api/custom-fields/${field.id}/archive`, 'POST', { archived: true }, 'Archived. Its values are kept.')) return load();
+      return null;
+    }
+    if (!ok) return null;
+    const payload = { name: name.value };
+    if (!field) payload.type = type.value;
+    if (type.value === 'dropdown') payload.options = editor.value();
+    const body = field
+      ? await send(`/api/custom-fields/${field.id}`, 'PUT', payload)
+      : await send('/api/custom-fields', 'POST', payload, 'Field created.');
+    if (!body) return edit(field, { ...draft, ...payload, type: type.value });
+    return load();
+  }
+
+  async function move(index, by) {
+    const ids = data.fields.map((f) => f.id);
+    [ids[index], ids[index + by]] = [ids[index + by], ids[index]];
+    if (await send('/api/custom-fields/order', 'PUT', { ids }, null)) await load();
+  }
+
+  function fieldRow(field, index) {
+    const hint = h('div', { class: 'fx-price__hint' }, typeChip(field.type),
+      ...(field.type === 'dropdown' ? field.options.filter((o) => !o.archived).map(optionChip) : [h('span', { class: 'fx-set__hint' }, TYPE_HINTS[field.type])]));
+    const controls = [];
+    if (index !== null) {
+      const up = h('button', { class: 'fx-btn fx-btn--ghost fx-btn--sm', type: 'button', disabled: disabled || index === 0, 'aria-label': `Move ${field.name} up` }, '↑');
+      up.addEventListener('click', () => move(index, -1));
+      const down = h('button', { class: 'fx-btn fx-btn--ghost fx-btn--sm', type: 'button', disabled: disabled || index === data.fields.length - 1, 'aria-label': `Move ${field.name} down` }, '↓');
+      down.addEventListener('click', () => move(index, 1));
+      const editButton = h('button', { class: 'fx-btn fx-btn--ghost fx-btn--sm', type: 'button', disabled }, 'Edit');
+      editButton.addEventListener('click', () => edit(field));
+      controls.push(up, down, editButton);
+    } else {
+      const back = h('button', { class: 'fx-btn fx-btn--ghost fx-btn--sm', type: 'button', disabled }, 'Bring back');
+      back.addEventListener('click', async () => {
+        if (await send(`/api/custom-fields/${field.id}/archive`, 'POST', { archived: false }, 'Brought back.')) await load();
+      });
+      controls.push(back);
+    }
+    return row(field.name, hint, h('div', { class: 'fx-row' }, ...controls));
+  }
+
+  function systemRow(field) {
+    const options = field.options.slice(0, 12).map((o) => h('span', { class: 'fx-cf__opt', 'data-color': o.final ? 'green' : 'gray' }, o.name));
+    if (field.options.length > 12) options.push(h('span', { class: 'fx-set__hint' }, `${field.options.length - 12} more`));
+    return row(`${field.sourceLabel} ${field.name.toLowerCase()}`, h('div', { class: 'fx-price__hint' }, typeChip(field.type), ...options),
+      h('span', { class: 'fx-status', 'data-tone': 'mute' }, `Read only · from ${field.sourceLabel}`));
+  }
+
+  function draw() {
+    const archived = data.archived.filter((f) => f.archived);
+    const sections = [
+      disabled ? notice('Only an owner or admin can change these. Everyone can set a job\'s values.', 'info') : null,
+      h('section', { class: 'fx-set' }, h('h2', { class: 'fx-set__title' }, `Your fields · ${data.fields.length}`),
+        ...(data.fields.length ? data.fields.map(fieldRow)
+          : [h('p', { class: 'fx-dim' }, 'No fields yet. Create one, for example Priority or Technician, to group the Jobs board by it.')])),
+    ];
+    if (data.systemFields.length) {
+      sections.push(h('section', { class: 'fx-set' }, h('h2', { class: 'fx-set__title' }, 'From integrations'),
+        ...data.systemFields.map(systemRow),
+        h('p', { class: 'fx-dim', style: { margin: '8px 0 0' } }, 'Flow reads these. Change them in their own system.')));
+    }
+    if (archived.length) {
+      sections.push(h('section', { class: 'fx-set' }, h('h2', { class: 'fx-set__title' }, `Archived · ${archived.length}`), ...archived.map((f) => fieldRow(f, null))));
+    }
+    sections.push(h('p', { class: 'fx-dim', style: { margin: '8px 0 0' } }, h('a', { href: DOCS, target: '_blank', rel: 'noopener' }, 'How custom fields work')));
+    host.replaceChildren(...sections.filter(Boolean));
+  }
+
+  async function load() {
+    try {
+      const [live, all] = await Promise.all([flow('/api/custom-fields'), flow('/api/custom-fields?archived=1')]);
+      data = { ...live, archived: all.fields };
+    } catch (error) {
+      host.replaceChildren(notice(error.message, 'danger'));
+      return;
+    }
+    draw();
+  }
+
+  addButton.addEventListener('click', () => edit(null));
+  await load();
+}