@arcforgelabs/flow 2026.10.46 → 2026.10.47

package/server/integrations/sentry/index.js

@@ -9,13 +9,17 @@ import { scrubSpan } from '../../ui/monitoring.js';
 // 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. With traces on,
-// the bundle that also traces; Sentry ships it only with session replay in
-// it too, which Flow never turns on.
+// (server/ui/monitoring.js). Pinned, with its integrity hash. With replay on,
+// the bundle with session replay; with traces on, the bundle that also traces
+// (Sentry ships it only with replay in it).
 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_REPLAY = Object.freeze({
+  src: 'https://browser.sentry-cdn.com/11.4.0/bundle.replay.feedback.min.js',
+  integrity: 'sha384-9Iyc17wHvpK0bqZe+cuAedQDHoWwenMrxXR+HgLLkQ3rHM4zQD+amLzBnmrQgowj',
+});
 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',
@@ -44,6 +48,7 @@ export const SENTRY_SETUP = {
     { name: 'SENTRY_ENVIRONMENT', label: 'Environment', help: 'How Sentry labels this installation, for example production. Empty: production, or workspace in a Replit workspace.' },
     { name: 'SENTRY_CLIENT', label: 'Client', help: 'The name your support desk files this installation\'s reports under. Sent as the client tag. Empty: no client tag.' },
     { 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_REPLAY', label: 'Replay with reports', kind: 'onoff', help: 'On: each report and each browser error keeps up to the last minute of the page, as a replay with every word hidden.' },
     { 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.' },
   ],
 };
@@ -56,6 +61,7 @@ export function readSentrySettings(env) {
   // labelled apart so they never read as the live app's.
   const environment = String(env.SENTRY_ENVIRONMENT ?? '').trim() || (isReplitWorkspace(env) ? 'workspace' : 'production');
   const feedback = String(env.SENTRY_FEEDBACK ?? 'on').trim() !== 'off';
+  const replay = String(env.SENTRY_REPLAY ?? 'on').trim() !== 'off';
   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)) {
@@ -66,7 +72,7 @@ export function readSentrySettings(env) {
   // Every event says which product and, when set, which client it is from,
   // so one support desk can serve many installations.
   const tags = client ? { product: 'flow', client } : { product: 'flow' };
-  return { dsn, environment, feedback, tracesSampleRate, tags };
+  return { dsn, environment, feedback, replay, tracesSampleRate, tags };
 }
 
 // No trace for the host's health check: it is not a person waiting.
@@ -108,7 +114,7 @@ export function createSentryAdapter({ sdk = SentryNode, env: hostEnv = process.e
         ),
         beforeSendSpan: scrubSpan,
       });
-      log.info?.(`[sentry] on: environment ${settings.environment}; report button ${settings.feedback ? 'on' : 'off'}; traces ${settings.tracesSampleRate > 0 ? settings.tracesSampleRate : 'off'}`);
+      log.info?.(`[sentry] on: environment ${settings.environment}; report button ${settings.feedback ? 'on' : 'off'}; replay ${settings.replay ? 'on' : 'off'}; traces ${settings.tracesSampleRate > 0 ? settings.tracesSampleRate : 'off'}`);
     },
     async stop() {
       if (settings) await sdk.close(2000);
@@ -133,15 +139,16 @@ export function createSentryAdapter({ sdk = SentryNode, env: hostEnv = process.e
       // meant for browsers.
       browserMonitoring() {
         if (!settings) return null;
-        const { tracesSampleRate } = settings;
+        const { tracesSampleRate, replay } = settings;
         return {
           dsn: settings.dsn,
           environment: settings.environment,
           release,
           feedback: settings.feedback,
+          replay,
           tags: settings.tags,
           tracesSampleRate,
-          script: tracesSampleRate > 0 ? SENTRY_BROWSER_TRACING : SENTRY_BROWSER,
+          script: tracesSampleRate > 0 ? SENTRY_BROWSER_TRACING : replay ? SENTRY_BROWSER_REPLAY : SENTRY_BROWSER,
         };
       },
       // Runs `work` in a span of the current trace (server/core/tracing.js).

package/server/ui/alerts.js

@@ -33,8 +33,9 @@ export function alertStrip(ui, page, { onTab = () => {}, scope = null, onLoad =
     let action = null;
     if (first.action?.href && first.action.href !== location.pathname) action = h('a', { class: 'fx-alerts__action', href: first.action.href, onclick: go }, first.action.label);
     else if (first.action?.tab) action = h('button', { class: 'fx-alerts__action', type: 'button', onclick: () => onTab(first.action.tab) }, first.action.label);
+    const line = first.moneyAtRiskCents > 0 ? `${first.title} ${money.format(first.moneyAtRiskCents / 100)} at risk.` : first.title;
     element.replaceChildren(...[
-      h('p', { class: 'fx-alerts__text' },
+      h('p', { class: 'fx-alerts__text', title: line },
         first.title,
         first.moneyAtRiskCents > 0 ? h('span', { class: 'fx-alerts__money' }, ` ${money.format(first.moneyAtRiskCents / 100)} at risk.`) : null),
       action,

package/server/ui/app.js

@@ -25,6 +25,7 @@ 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';
+import { NAV_DEFAULT, NAV_LOCKED } from '/assets/ui/nav-pins.js';
 
 const $ = (id) => document.getElementById(id);
 
@@ -143,19 +144,20 @@ function roleSelect(value, attrs = {}) {
 
 let me = null;
 
-// Where each view sits: the sidebar, in this order, daily work first (no
-// `place`); the sidebar's More menu (`place: 'more'`, `more` names its Lucide
-// icon); the account menu (`place: 'account'`). `sidebar: false` views open
-// by link and Search only.
+// Where each view sits, in sidebar order, daily work first. No `place`: a
+// sidebar page, pinned until the person unpins it. `place: 'more'`: a sidebar
+// page that starts in More until they pin it. `place: 'account'`: the account
+// menu. `sidebar: false`: opened by a link or Search only. Jobs and Invoices
+// cannot be unpinned (nav-pins.js).
 const VIEWS = {
   jobs: { label: 'Jobs', icon: 'jobs', render: (main) => renderJobs(main, ui()) },
   invoices: { label: 'Invoices', icon: 'invoices', render: (main, id) => (id ? renderInvoice(main, ui(), id) : renderInvoiceList(main, ui())) },
   reconcile: { label: 'Reconcile', icon: 'reconcile', render: (main, id) => renderReconcile(main, ui(), id) },
   'price-list': { label: 'Price list', icon: 'tag', render: (main, id) => (id === 'reconcile' ? renderPriceReconcile(main, ui()) : renderPriceList(main, ui())) },
   'invoicing-settings': { label: 'Rules', icon: 'rules', render: (main, id) => renderInvoicingSettings(main, ui(), id) },
-  automations: { label: 'Automations', icon: 'bolt', place: 'more', more: 'zap', render: (main) => renderAutomations(main, ui()) },
-  'custom-fields': { label: 'Custom fields', icon: 'fields', place: 'more', more: 'form-input', render: (main) => renderCustomFields(main, ui()) },
-  integrations: { label: 'Integrations', icon: 'plug', place: 'more', more: 'plug', ownerOnly: true, render: (main, id) => (id ? renderIntegration(main, id) : renderIntegrations(main)) },
+  automations: { label: 'Automations', icon: 'bolt', place: 'more', render: (main) => renderAutomations(main, ui()) },
+  'custom-fields': { label: 'Custom fields', icon: 'fields', place: 'more', render: (main) => renderCustomFields(main, ui()) },
+  integrations: { label: 'Integrations', icon: 'plug', place: 'more', ownerOnly: true, render: (main, id) => (id ? renderIntegration(main, id) : renderIntegrations(main)) },
   people: { label: 'People', icon: 'people', place: 'account', ownerOnly: true, render: renderPeople },
   // Not in the sidebar: "Manage account" in the account menu opens the same
   // Clerk profile. The page stays for links and Search.
@@ -301,11 +303,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('a[data-nav]')) {
-    link.setAttribute('aria-current', link.dataset.nav === view ? 'page' : 'false');
-  }
-  // More shows as current while one of its pages is open.
-  document.querySelector('[data-nav="more"]')?.setAttribute('aria-current', VIEWS[view].place === 'more' ? 'page' : 'false');
+  markNavCurrent(view);
   main.replaceChildren();
   main.className = 'fx-main';
   document.title = `${VIEWS[view].label} · Flow`;
@@ -359,26 +357,108 @@ function renderSignedOut() {
   });
 }
 
+// Sidebar pages this person may open. Account pages stay in the account menu.
+function sidebarViews() {
+  return Object.entries(VIEWS).filter(([, view]) => view.sidebar !== false && view.place !== 'account' && (!view.ownerOnly || me?.person.role === 'owner'));
+}
+
+// Null until the shell reads the account. Jobs and Invoices are always in it.
+let pinned = null;
+let pinEpoch = 0;
+let pinWrite = Promise.resolve();
+let morePanel = null;
+
+function pinSet() {
+  if (!pinned) {
+    pinned = new Set(me?.views?.nav?.pinned ?? NAV_DEFAULT);
+    for (const name of NAV_LOCKED) pinned.add(name);
+  }
+  return pinned;
+}
+
+function navLink(name, view) {
+  return h('a', { href: `/${name}`, 'data-nav': name, 'data-label': view.label, onclick: navigate }, icon(view.icon), h('span', { class: 'fx-nav__label' }, view.label));
+}
+
+// More is the current page while the open page is a sidebar page that is
+// not pinned, so it has no row of its own.
+function markNavCurrent(view = currentView()[0]) {
+  for (const link of document.querySelectorAll('a[data-nav]')) {
+    link.setAttribute('aria-current', link.dataset.nav === view ? 'page' : 'false');
+  }
+  const shown = [...document.querySelectorAll('a[data-nav]')].some((link) => link.dataset.nav === view);
+  const inSidebar = sidebarViews().some(([name]) => name === view);
+  document.querySelector('[data-nav="more"]')?.setAttribute('aria-current', inSidebar && !shown ? 'page' : 'false');
+}
+
+function syncSidebar() {
+  const nav = $('nav');
+  const moreButton = nav?.querySelector('[data-nav="more"]');
+  if (!moreButton) return;
+  for (const link of [...nav.querySelectorAll('a[data-nav]')]) link.remove();
+  const links = sidebarViews().filter(([name]) => pinSet().has(name)).map(([name, view]) => navLink(name, view));
+  if (links.length) moreButton.before(...links);
+  morePanel?.refresh?.();
+  drawMenu();
+  markNavCurrent();
+}
+
+function moreItems() {
+  const pins = pinSet();
+  return sidebarViews().map(([name, view]) => {
+    const on = pins.has(name);
+    const locked = NAV_LOCKED.includes(name);
+    return {
+      icon: icon(view.icon),
+      text: view.label,
+      run: () => { closeMenu(); go(`/${name}`); },
+      trailing: locked
+        ? { icon: 'pin', label: 'Pinned', pressed: true, locked: true }
+        : { icon: 'pin', label: on ? 'Unpin' : 'Pin', pressed: on, run: () => togglePin(name) },
+    };
+  });
+}
+
+function togglePin(name) {
+  if (NAV_LOCKED.includes(name)) return;
+  const next = new Set(pinSet());
+  if (next.has(name)) next.delete(name);
+  else next.add(name);
+  for (const locked of NAV_LOCKED) next.add(locked);
+  const epoch = ++pinEpoch;
+  pinned = next;
+  syncSidebar();
+  const body = { pinned: [...next] };
+  pinWrite = pinWrite.then(() => savePins(body, epoch), () => savePins(body, epoch));
+}
+
+async function savePins(body, epoch) {
+  try {
+    const saved = await flow('/api/me/views/nav', { method: 'PUT', body: JSON.stringify(body) });
+    if (epoch !== pinEpoch) return;
+    pinned = new Set(saved.view.pinned);
+    me.views = { ...(me.views ?? {}), nav: saved.view };
+    syncSidebar();
+  } catch (error) {
+    if (epoch !== pinEpoch) return;
+    pinned = new Set(me?.views?.nav?.pinned ?? NAV_DEFAULT);
+    for (const locked of NAV_LOCKED) pinned.add(locked);
+    syncSidebar();
+    toast(error.message, 'danger');
+  }
+}
+
 function renderShell() {
   document.body.dataset.state = 'signed-in';
   const nav = $('nav');
-  const items = [];
-  const more = [];
-  for (const [name, view] of Object.entries(VIEWS)) {
-    if (view.ownerOnly && me?.person.role !== 'owner') continue;
-    if (view.sidebar === false || view.place === 'account') continue;
-    if (view.place === 'more') more.push({ icon: view.more, text: view.label, run: () => { closeMenu(); go(`/${name}`); } });
-    else 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)));
-  }
-  // The rest of the setup pages, behind More (the shared ⋯ menu).
-  const [moreButton, morePanel] = rowMenu('More', more, { trigger: [icon('more'), h('span', { class: 'fx-nav__label' }, 'More')], className: 'fx-nav__more', align: 'start' });
+  const [moreButton, panel] = rowMenu('More', moreItems, { trigger: [icon('more'), h('span', { class: 'fx-nav__label' }, 'More')], className: 'fx-nav__more', align: 'start', place: 'side' });
+  morePanel = panel;
   Object.assign(moreButton.dataset, { nav: 'more', label: 'More' });
-  items.push(moreButton, morePanel);
   // "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);
+  nav.replaceChildren(moreButton, panel, report);
   // Folded or narrow, the logo is the sidebar button: it shows the mark and
   // turns into the sidebar icon under the pointer or keyboard focus.
   const mark = h('span', { class: 'fx-toggle__mark', 'aria-hidden': 'true' });
@@ -387,7 +467,7 @@ function renderShell() {
   sidebar.classList.add('fx-toggle__icon');
   $('menu-toggle').replaceChildren(mark, sidebar);
   $('menu-toggle').onclick = toggleMenu;
-  drawMenu();
+  syncSidebar();
   // 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.
   // People (owners) and Appearance live in the account menu.

package/server/ui/bulk-bar.js

@@ -9,16 +9,19 @@
 // bar for a screen reader ("Ticked invoices", "Ticked jobs"). state = { count, onClear,
 // groups: [[action]], more: [{ head, actions: [action] }] }; an action is
 // { icon, label, title?, run, primary?, iconOnly?, tone? }. title is the
-// long name, for the hover tip and the More menu. A count of 0 hides the
-// bar; Esc clears the ticks while it shows.
+// long name, for the hover tip and the More menu. run(working) may call
+// working('Sending') once the step really starts (after its dialog): the
+// pressed button then shows a spinner and that word until run ends. A count
+// of 0 hides the bar; Esc clears the ticks while it shows.
 import { lucide } from '/assets/ui/custom-fields.js';
+import { applyPhoneRule } from './mobile.js';
 
 let barCount = 0;
 
 export function bulkBar(ui, { label = 'Ticked invoices' } = {}) {
   const { h } = ui;
   const id = `fx-bulk-more-${++barCount}`;
-  const element = h('div', { class: 'fx-bulk', role: 'toolbar', 'aria-label': label, hidden: true });
+  const element = applyPhoneRule(h('div', { class: 'fx-bulk', role: 'toolbar', 'aria-label': label, hidden: true }), 'bulkBar');
   const panel = h('div', { class: 'fx-pop fx-bulk__more', id, popover: 'auto', role: 'menu' });
   let current = null;
   let busy = false;
@@ -27,14 +30,24 @@ export function bulkBar(ui, { label = 'Ticked invoices' } = {}) {
     if (busy) return;
     busy = true;
     element.setAttribute('aria-busy', 'true');
-    try { await action.run(); } finally {
+    // The step is on its way: its button (on the bar, or More's) spins.
+    const working = (word) => {
+      const pressed = [...element.querySelectorAll('.fx-bulk__act')].find((b) => b.dataset.action === action.label);
+      if (!pressed) return;
+      pressed.dataset.busy = '';
+      pressed.firstChild?.replaceWith(h('span', { class: 'fx-spinner fx-spinner--sm', 'aria-hidden': 'true' }));
+      const text = pressed.querySelector('.fx-bulk__word');
+      if (text && word) text.textContent = `${word}…`;
+    };
+    try { await action.run(working); } finally {
       busy = false;
       element.removeAttribute('aria-busy');
+      if (current) draw(current);
     }
   };
 
   const button = (action) => h('button', {
-    type: 'button',
+    type: 'button', 'data-action': action.label,
     class: `fx-bulk__act${action.primary ? ' fx-bulk__act--primary' : ''}${action.iconOnly ? ' fx-bulk__act--icon' : ''}`,
     ...(action.tone ? { 'data-tone': action.tone } : {}),
     ...(action.iconOnly ? { 'aria-label': action.title ?? action.label, 'data-tip': action.title ?? action.label } : action.title ? { title: action.title } : {}),

package/server/ui/columns.js

@@ -31,6 +31,7 @@
 // Jobs and on Invoices, where it is the invoice's job's value).
 import { lucide } from '/assets/ui/custom-fields.js';
 import { endWidth, LEAD_WIDTH, MAX_WIDTH, minWidth, moveColumn, TAIL_WIDTH, tableWidth, widthOf } from '/assets/ui/job-view.js';
+import { applyPhoneRule, assignPhoneSlots, phoneSlot } from './mobile.js';
 import { initialsOf } from '/assets/ui/person.js';
 
 const fullDate = (iso) => new Date(`${iso}T00:00:00`).toLocaleDateString('en-AU', { day: 'numeric', month: 'short', year: 'numeric' });
@@ -81,10 +82,12 @@ export function fieldColumn(h, field, { id, valueOf, people }) {
 // A row's cells for the shown columns: a class per kind, the label for
 // the phone layout, the full text as the cell's name on hover.
 export function rowCells(h, columns, row) {
-  return columns.map((c) => {
+  return assignPhoneSlots(columns).map((c) => {
+    const slot = phoneSlot(c);
     const td = h('td', {
       class: [`fx-c-${c.kind}`, c.num ? 'fx-num' : null, c.className].filter(Boolean).join(' '),
       'data-label': c.label,
+      ...(slot ? { 'data-phone-slot': slot } : {}),
     }, c.cell(row));
     // A cell stays on one line and ends in "…" when the column is narrow
     // (flow.css, .fx-table--sized); the whole text shows on hover.
@@ -173,7 +176,7 @@ export function columnTable(h, config) {
       h('colgroup', {}, leadCols, cols, endCol),
       h('thead', {}, h('tr', {}, lead, heads, tail)),
       rows);
-    const box = h('div', { class: 'fx-table-scroll' }, node);
+    const box = applyPhoneRule(h('div', { class: 'fx-table-scroll' }, node), 'columnTable');
     // The width the columns need; past the window the table scrolls
     // sideways. A browser shares spare width among fixed columns, so the
     // end column is sized here, and again when the window changes size.

package/server/ui/custom-fields.js

@@ -15,6 +15,21 @@
 
 import { orderStatuses, statusRank } from '/assets/ui/job-board.js';
 import { sidecar } from '/assets/ui/sidecar.js';
+import { assignPhoneSlots, phoneSlot } from './mobile.js';
+
+// The manager row uses the same phone slots as a column list.
+const FIELD_SLOTS = assignPhoneSlots([
+  { id: 'name', kind: 'text' },
+  { id: 'type', kind: 'text' },
+  { id: 'by', kind: 'person' },
+  { id: 'date', kind: 'date' },
+  { id: 'where', kind: 'text' },
+  { id: 'menu', kind: 'text', phone: 'end' },
+]);
+const fieldSlot = (id) => {
+  const slot = phoneSlot(FIELD_SLOTS.find((column) => column.id === id));
+  return slot ? { 'data-phone-slot': slot } : {};
+};
 
 const DOCS = 'https://github.com/arcforgelabs/flow/blob/main/docs/CUSTOM_FIELDS.md';
 const TYPE_LABELS = {
@@ -395,12 +410,12 @@ export async function renderCustomFields(main, ui) {
       });
       input.addEventListener('blur', () => { if (view.renaming === field.id) rename(field, input.value); });
       queueMicrotask(() => { input.focus(); input.select(); });
-      return h('div', { class: 'fx-cfm__name', role: 'cell' }, input);
+      return h('div', { class: 'fx-cfm__name', role: 'cell', ...fieldSlot('name') }, input);
     }
     const editButton = field.archived || disabled || field.source ? null
       : h('button', { class: 'fx-cfm__edit', type: 'button', onclick: () => edit(field) }, 'Edit', lucide(h, 'panel-right'));
     const viewButton = field.source ? h('button', { class: 'fx-cfm__edit', type: 'button', onclick: () => edit(field) }, 'View', lucide(h, 'panel-right')) : null;
-    return h('div', { class: 'fx-cfm__name', role: 'cell' },
+    return h('div', { class: 'fx-cfm__name', role: 'cell', ...fieldSlot('name') },
       h('div', { class: 'fx-cfm__title' },
         field.source ? lucide(h, 'lock', 'Read only') : null,
         h('span', { class: 'fx-cfm__label', title: field.name }, field.name), editButton, viewButton));
@@ -418,11 +433,11 @@ export async function renderCustomFields(main, ui) {
     });
     return h('div', { class: 'fx-cfm__row', role: 'row', 'data-id': field.id, 'data-open': sideFor === field.id ? 'true' : null, 'data-archived': field.archived ? 'true' : null },
       nameCell(field),
-      h('div', { class: 'fx-cfm__type', role: 'cell' }, picker ? [picker.button, picker.panel] : h('span', { class: 'fx-cfm__icon', 'data-color': color }, icon)),
-      h('div', { class: 'fx-cfm__by', role: 'cell' }, by ? h('span', { class: 'fx-cfm__avatar', title: by }, field.source ? lucide(h, 'plug') : initials(by)) : h('span', { class: 'fx-dim' }, '—')),
-      h('div', { class: 'fx-cfm__date', role: 'cell', title: field.source ? `${field.sourceLabel} connected` : null }, field.createdAt ? createdDay(field.createdAt) : h('span', { class: 'fx-dim' }, '—')),
-      h('div', { class: 'fx-cfm__where', role: 'cell' }, field.source ? `${field.sourceLabel} jobs` : 'Jobs'),
-      h('div', { class: 'fx-cfm__end', role: 'cell' }, field.source ? null : rowMenu(field, picker)));
+      h('div', { class: 'fx-cfm__type', role: 'cell', ...fieldSlot('type') }, picker ? [picker.button, picker.panel] : h('span', { class: 'fx-cfm__icon', 'data-color': color }, icon)),
+      h('div', { class: 'fx-cfm__by', role: 'cell', ...fieldSlot('by') }, by ? h('span', { class: 'fx-cfm__avatar', title: by }, field.source ? lucide(h, 'plug') : initials(by)) : h('span', { class: 'fx-dim' }, '—')),
+      h('div', { class: 'fx-cfm__date', role: 'cell', ...fieldSlot('date'), title: field.source ? `${field.sourceLabel} connected` : null }, field.createdAt ? createdDay(field.createdAt) : h('span', { class: 'fx-dim' }, '—')),
+      h('div', { class: 'fx-cfm__where', role: 'cell', ...fieldSlot('where') }, field.source ? `${field.sourceLabel} jobs` : 'Jobs'),
+      h('div', { class: 'fx-cfm__end', role: 'cell', ...fieldSlot('menu') }, field.source ? null : rowMenu(field, picker)));
   }
 
   // One group: a header that folds it, its rows, and "Create … field". A