@arcforgelabs/flow 2026.10.35 → 2026.10.37

package/server/ui/custom-fields.js

@@ -1,10 +1,13 @@
 // 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`.
+// docs/CUSTOM_FIELDS.md). The fields a lab makes for its jobs, laid out like
+// ClickUp's Custom Field Manager: one table, with a group per type that folds
+// open and closed, and one row per field with its type icon, who made it,
+// when, and where it applies. Search, a type filter and Filter (archived
+// fields) sit above it. A row's Edit opens the field's dialog (name and
+// options); its ⋯ menu has Rename, Duplicate, Copy field ID and Archive. The
+// work systems' own fields (Seazona's stage) sit in their own group, read
+// only. 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 = {
@@ -18,13 +21,44 @@ const TYPE_HINTS = {
   number: 'A number, for example units.',
   text: 'A short note.',
 };
+// Each type's icon (Lucide, served at /assets/icons/) and group colour.
+const TYPE_ICONS = {
+  dropdown: 'square-chevron-down', person: 'user-round', checkbox: 'square-check', date: 'calendar', number: 'hash', text: 'type',
+};
+const TYPE_COLORS = { dropdown: 'green', person: 'blue', checkbox: 'purple', date: 'teal', number: 'amber', text: 'gray' };
+const FOLDED_KEY = 'flow_custom_fields_folded';
+
+// A Lucide icon as a mask, so it takes the text colour.
+export function lucide(h, name, label = null) {
+  return h('span', { class: 'fx-lucide', style: `--icon: url(/assets/icons/${name}.svg)`, ...(label ? { role: 'img', 'aria-label': label, title: label } : { 'aria-hidden': 'true' }) });
+}
+
+// "Today", "Yesterday", else d/m/yy, like ClickUp's Date created.
+export function createdDay(iso, now = new Date()) {
+  if (!iso) return '';
+  const day = new Date(iso);
+  const start = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+  const days = Math.round((start(now) - start(day)) / 86_400_000);
+  if (days === 0) return 'Today';
+  if (days === 1) return 'Yesterday';
+  return `${day.getDate()}/${day.getMonth() + 1}/${String(day.getFullYear()).slice(2)}`;
+}
+
+const initials = (name) => (name ?? '').split(/[\s@._-]+/).filter(Boolean).slice(0, 2).map((w) => w[0].toUpperCase()).join('') || '?';
+
+function readFolded() {
+  try { return new Set(JSON.parse(localStorage.getItem(FOLDED_KEY) ?? '[]')); } catch { return new Set(); }
+}
+function saveFolded(set) {
+  try { localStorage.setItem(FOLDED_KEY, JSON.stringify([...set])); } catch { /* this browser keeps no state */ }
+}
 
 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);
+  const host = h('div', { class: 'fx-card fx-cfm__card' }, h('div', { class: 'fx-skeleton' }));
+  const addButton = h('button', { class: 'fx-btn fx-btn--primary fx-btn--sm', 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.' }), host);
 
   let data = null;
 
@@ -39,11 +73,6 @@ export async function renderCustomFields(main, ui) {
     }
   }
 
-  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.
@@ -119,60 +148,198 @@ export async function renderCustomFields(main, ui) {
     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();
+  // ---- The manager: toolbar, then one table of groups ----
+  const view = { q: '', types: new Set(), archived: false, desc: false, folded: readFolded(), renaming: null };
+  let menuCount = 0;
+
+  // A popover menu under a button (the Jobs board's toolbar menus work the same way).
+  function popMenu(button, build) {
+    const id = `fx-cf-menu-${++menuCount}`;
+    const panel = h('div', { class: 'fx-pop', id, popover: 'auto', role: 'menu' });
+    button.setAttribute('popovertarget', id);
+    button.setAttribute('aria-haspopup', 'menu');
+    button.setAttribute('aria-expanded', 'false');
+    panel.addEventListener('toggle', (event) => {
+      button.setAttribute('aria-expanded', String(event.newState === 'open'));
+      if (event.newState !== 'open') return;
+      panel.replaceChildren(...build(() => panel.hidePopover()).filter(Boolean));
+      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 panel;
+  }
+  const item = (iconName, text, onclick, { disabled: off = false, title = null, role = 'menuitem', checked = null } = {}) => h('button', {
+    type: 'button', class: 'fx-pop__item', role, disabled: off, title, onclick, ...(checked === null ? {} : { 'aria-checked': String(checked) }),
+  }, h('span', { class: 'fx-pop__tick' }, iconName ? lucide(h, iconName) : null), h('span', {}, text));
+
+  const search = h('input', { class: 'fx-input fx-cfm__search', type: 'search', placeholder: 'Search fields…', 'aria-label': 'Search fields' });
+  search.addEventListener('input', () => { view.q = search.value.trim().toLowerCase(); draw(); });
+  const typeButton = h('button', { class: 'fx-chip fx-cfm__tool', type: 'button' });
+  const typeMenu = popMenu(typeButton, (close) => [
+    ...data.types.map((t) => item(view.types.has(t) ? 'check' : null, TYPE_LABELS[t], () => {
+      if (view.types.has(t)) view.types.delete(t); else view.types.add(t);
+      close(); draw();
+    }, { role: 'menuitemcheckbox', checked: view.types.has(t) })),
+    view.types.size ? h('div', { class: 'fx-pop__sep' }) : null,
+    view.types.size ? item(null, 'All types', () => { view.types.clear(); close(); draw(); }) : null,
+  ]);
+  const filterButton = h('button', { class: 'fx-chip fx-cfm__tool fx-cfm__tool--dashed', type: 'button' });
+  const filterMenu = popMenu(filterButton, (close) => [
+    item(view.archived ? 'check' : null, 'Show archived fields', () => { view.archived = !view.archived; close(); draw(); }, { role: 'menuitemcheckbox', checked: view.archived }),
+  ]);
+  const toolbar = h('div', { class: 'fx-cfm__bar' }, search, typeButton, typeMenu, filterButton, filterMenu, h('span', { class: 'fx-cfm__gap' }), addButton);
+  const table = h('div', { class: 'fx-cfm', role: 'table', 'aria-label': 'Custom fields' });
+  host.replaceChildren(toolbar, table);
+
+  const personName = (id) => data.people?.find((p) => p.id === id)?.name ?? null;
+  const matches = (f) => !view.q || f.name.toLowerCase().includes(view.q)
+    || (f.options ?? []).some((o) => !o.archived && o.name.toLowerCase().includes(view.q));
+  const byName = (a, b) => a.name.localeCompare(b.name) * (view.desc ? -1 : 1);
+
+  async function rename(field, name) {
+    view.renaming = null;
+    const clean = name.trim();
+    if (clean && clean !== field.name && await send(`/api/custom-fields/${field.id}`, 'PUT', { name: clean }, 'Renamed.')) return load();
+    return draw();
+  }
+
+  async function duplicate(field) {
+    const taken = new Set(data.fields.map((f) => f.name.toLowerCase()));
+    let name = `${field.name} copy`.slice(0, 60);
+    for (let n = 2; taken.has(name.toLowerCase()); n += 1) name = `${field.name} copy ${n}`.slice(0, 60);
+    const payload = { name, type: field.type };
+    if (field.type === 'dropdown') payload.options = field.options.filter((o) => !o.archived).map(({ name: n, color }) => ({ name: n, color }));
+    if (await send('/api/custom-fields', 'POST', payload, `Made ${name}.`)) 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();
+  async function copyId(field) {
+    try {
+      await navigator.clipboard.writeText(field.id);
+      toast('Field ID copied.', 'success');
+    } catch {
+      toast(`Field ID: ${field.id}`, 'info');
+    }
+  }
+
+  async function setArchived(field, archived) {
+    if (await send(`/api/custom-fields/${field.id}/archive`, 'POST', { archived }, archived ? 'Archived. Its values are kept.' : 'Brought back.')) await load();
+  }
+
+  function rowMenu(field) {
+    const button = h('button', { class: 'fx-cfm__more', type: 'button', 'aria-label': `More for ${field.name}` }, lucide(h, 'ellipsis'));
+    const panel = popMenu(button, (close) => (field.archived
+      ? [item('archive-restore', 'Bring back', () => { close(); setArchived(field, false); }, { disabled })]
+      : [
+        item('square-pen', 'Edit', () => { close(); edit(field); }, { disabled }),
+        item('pencil', 'Rename', () => { close(); view.renaming = field.id; draw(); }, { disabled }),
+        item('copy', 'Duplicate', () => { close(); duplicate(field); }, { disabled }),
+        item('repeat', 'Convert', null, { disabled: true, title: 'Changing a field\'s type is not in Flow yet.' }),
+        item('clipboard-copy', 'Copy field ID', () => { close(); copyId(field); }),
+        h('div', { class: 'fx-pop__sep' }),
+        item('archive', 'Archive', () => { close(); setArchived(field, true); }, { disabled }),
+      ]));
+    return [button, panel];
+  }
+
+  function nameCell(field) {
+    if (view.renaming === field.id) {
+      const input = h('input', { class: 'fx-input fx-cfm__rename', value: field.name, maxlength: '60', 'aria-label': 'Field name' });
+      input.addEventListener('keydown', (event) => {
+        if (event.key === 'Enter') input.blur();
+        if (event.key === 'Escape') { view.renaming = null; draw(); }
       });
-      controls.push(back);
+      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 row(field.name, hint, h('div', { class: 'fx-row' }, ...controls));
+    const editButton = field.archived || disabled || field.source ? null
+      : h('button', { class: 'fx-cfm__edit', type: 'button', onclick: () => edit(field) }, 'Edit', lucide(h, 'panel-right'));
+    return h('div', { class: 'fx-cfm__name', role: 'cell' },
+      field.source ? lucide(h, 'lock', 'Read only') : null,
+      h('span', { class: 'fx-cfm__label', title: field.name }, field.name), editButton);
   }
 
-  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 fieldRow(field) {
+    const by = field.source ? field.sourceLabel : personName(field.createdBy);
+    return h('div', { class: 'fx-cfm__row', role: 'row', 'data-archived': field.archived ? 'true' : null },
+      nameCell(field),
+      h('div', { class: 'fx-cfm__type', role: 'cell', 'data-color': TYPE_COLORS[field.type] }, lucide(h, TYPE_ICONS[field.type], TYPE_LABELS[field.type])),
+      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' }, field.source ? h('span', { class: 'fx-dim' }, '—') : createdDay(field.createdAt)),
+      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)));
+  }
+
+  // One group: a header that folds it, its rows, and "Create … field". A
+  // search opens every group that has a match.
+  function group(key, pill, rows, { create = null } = {}) {
+    const open = Boolean(view.q) || !view.folded.has(key);
+    const toggle = h('button', { class: 'fx-cfm__fold', type: 'button', 'aria-expanded': String(open), 'aria-label': `${open ? 'Fold' : 'Open'} ${pill.text}` }, lucide(h, 'chevron-down'));
+    toggle.addEventListener('click', () => {
+      if (open) view.folded.add(key); else view.folded.delete(key);
+      saveFolded(view.folded);
+      draw();
+    });
+    const head = h('div', { class: 'fx-cfm__group', role: 'row' }, toggle,
+      h('span', { class: 'fx-cfm__pill', 'data-color': pill.color }, pill.icon ? lucide(h, pill.icon) : null, pill.text),
+      h('span', { class: 'fx-cfm__count' }, String(rows.length)));
+    if (!open) return [head];
+    const out = [head, ...rows.map(fieldRow)];
+    if (create) out.push(create);
+    return out;
   }
 
   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 (!data) return;
+    typeButton.replaceChildren(lucide(h, 'layers'), h('span', {}, view.types.size === 1 ? TYPE_LABELS[[...view.types][0]] : view.types.size ? `${view.types.size} types` : 'Field type'), lucide(h, 'chevron-down'));
+    typeButton.classList.toggle('fx-chip--on', view.types.size > 0);
+    filterButton.replaceChildren(lucide(h, 'list-filter'), h('span', {}, view.archived ? 'Archived shown' : 'Filter'), lucide(h, 'chevron-down'));
+    filterButton.classList.toggle('fx-chip--on', view.archived);
+
+    const shown = (type) => !view.types.size || view.types.has(type);
+    const sortHead = h('button', { class: 'fx-cfm__sort', type: 'button', 'aria-label': `Sort by name, ${view.desc ? 'Z to A' : 'A to Z'}` }, 'Name', lucide(h, view.desc ? 'arrow-up-z-a' : 'arrow-down-a-z'));
+    sortHead.addEventListener('click', () => { view.desc = !view.desc; draw(); });
+    const parts = [h('div', { class: 'fx-cfm__head', role: 'row' },
+      h('div', { role: 'columnheader' }, sortHead), h('div', { role: 'columnheader' }, 'Type'), h('div', { role: 'columnheader', class: 'fx-cfm__by' }, 'Created by'),
+      h('div', { role: 'columnheader', class: 'fx-cfm__date' }, 'Date created'), h('div', { role: 'columnheader', class: 'fx-cfm__where' }, 'Location'), h('div', { role: 'columnheader' }))];
+    if (disabled) parts.unshift(notice('Only an owner or admin can change these. Everyone can set a job\'s values.', 'info'));
+
+    // Type groups in ClickUp's order: by type name.
+    const types = [...data.types].sort((a, b) => TYPE_LABELS[a].localeCompare(TYPE_LABELS[b]));
+    let count = 0;
+    for (const type of types) {
+      if (!shown(type)) continue;
+      const fields = data.fields.filter((f) => f.type === type && matches(f)).sort(byName);
+      if (!fields.length && (view.q || view.types.size === 0)) continue;
+      count += fields.length;
+      const create = view.q || disabled ? null : h('button', { class: 'fx-cfm__create', type: 'button', onclick: () => edit(null, { type, name: '', options: undefined }) },
+        lucide(h, 'plus'), `Create ${TYPE_LABELS[type].toLowerCase()} field`);
+      parts.push(...group(type, { text: TYPE_LABELS[type], icon: TYPE_ICONS[type], color: TYPE_COLORS[type] }, fields, { create }));
+    }
+    // The work systems' own fields: one read-only group per system.
+    for (const source of [...new Set(data.systemFields.map((f) => f.source))]) {
+      const fields = data.systemFields.filter((f) => f.source === source && shown(f.type))
+        .map((f) => ({ ...f, id: `${f.source}:${f.name}`, name: `${f.sourceLabel} ${f.name.toLowerCase()}` })).filter(matches);
+      if (!fields.length) continue;
+      count += fields.length;
+      parts.push(...group(`source:${source}`, { text: `From ${fields[0].sourceLabel}`, icon: 'lock', color: 'gray' }, fields));
+    }
+    if (view.archived) {
+      const fields = data.archived.filter((f) => f.archived && shown(f.type) && matches(f)).sort(byName);
+      count += fields.length;
+      parts.push(...group('archived', { text: 'Archived', icon: 'archive', color: 'gray' }, fields));
     }
-    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))));
+    if (!count && (view.q || view.types.size)) parts.push(h('p', { class: 'fx-cfm__empty' }, 'No field matches.'));
+    if (!data.fields.length && !view.q && !view.types.size) {
+      parts.push(h('p', { class: 'fx-cfm__empty' }, 'No fields yet. Create one, for example Priority or Technician, to group the Jobs board by it.'));
     }
-    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));
+    table.replaceChildren(...parts);
+    foot.replaceChildren(h('span', {}, `${data.fields.length} ${data.fields.length === 1 ? 'field' : 'fields'}`),
+      h('a', { href: DOCS, target: '_blank', rel: 'noopener' }, 'How custom fields work'));
   }
+  const foot = h('div', { class: 'fx-cfm__foot' });
+  host.append(foot);
 
   async function load() {
     try {

package/server/ui/flow.css

@@ -155,7 +155,8 @@ body:is([data-state="off"], [data-state="error"], [data-state="no-access"]) .fx-
 /* Folded (wide screens only): the sidebar keeps its icons, the menu button
    and the account photo; each page's name is still read out. */
 @media (min-width: 821px) {
-  .fx-shell[data-folded] .fx-side { width: 64px; padding-inline: 10px; }
+  .fx-shell[data-folded] .fx-side { width: 64px; padding-inline: 10px; cursor: e-resize; }
+  .fx-shell[data-folded] .fx-side :is(a, button, #user-button) { cursor: pointer; }
   .fx-shell[data-folded] .fx-side__head { flex-direction: column; gap: 10px; padding: 0 0 14px; }
   .fx-shell[data-folded] .fx-side__head .fx-brand { display: none; }
   .fx-shell[data-folded] .fx-nav__group { height: 1px; margin: 10px 6px; padding: 0; overflow: hidden; background: var(--fx-line); color: transparent; }
@@ -223,6 +224,23 @@ body:is([data-state="off"], [data-state="error"], [data-state="no-access"]) .fx-
 .fx-status[data-tone="warn"] { color: var(--t-warn); background: var(--t-warn-bg); }
 .fx-status[data-tone="mute"] { color: var(--t-dim); background: var(--fx-hover); }
 .fx-status[data-tone="danger"] { color: var(--t-danger); background: var(--t-danger-bg); }
+.fx-links { white-space: nowrap; }
+.fx-links > * + * { margin-left: 6px; }
+.fx-link { position: relative; display: inline-grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--fx-line); border-radius: 8px; vertical-align: middle; }
+.fx-link img { width: 15px; height: 15px; }
+a.fx-link:hover, a.fx-link:focus-visible { border-color: var(--t-strong); }
+.fx-link--none { border-style: dashed; }
+.fx-link--none img { filter: grayscale(1); opacity: .35; }
+.fx-link__dot { position: absolute; right: -3px; bottom: -3px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--t-paper); background: var(--t-dim); }
+.fx-link__dot[data-tone="success"] { background: var(--t-success); }
+.fx-link__dot[data-tone="warn"] { background: var(--t-warn); }
+.fx-link__dot[data-tone="danger"] { background: var(--t-danger); }
+.fx-linked { display: grid; }
+.fx-linked__row { display: flex; align-items: center; gap: 8px; white-space: nowrap; min-height: 44px; padding: 6px 0; border-top: 1px solid var(--fx-line-soft); }
+.fx-linked__row:first-child { border-top: 0; }
+.fx-linked__ref { font-family: var(--t-data); font-variant-numeric: tabular-nums; color: var(--t-strong); }
+.fx-linked__open { margin-left: auto; font-size: 12.5px; color: var(--t-dim); white-space: nowrap; }
+.fx-linked__open:hover { color: var(--t-strong); }
 .fx-tag {
   margin-left: 8px; padding: 1px 7px; border: 1px solid var(--fx-line); border-radius: 999px;
   color: var(--t-dim); font-size: 11.5px; font-weight: 600;
@@ -258,9 +276,6 @@ body:is([data-state="off"], [data-state="error"], [data-state="no-access"]) .fx-
   font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
 }
 .fx-empty { padding: 28px 16px; color: var(--t-dim); text-align: center; }
-.fx-roles { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: 13.5px; color: var(--t-dim); }
-.fx-roles dt { color: var(--t-strong); font-weight: 600; }
-.fx-roles dd { margin: 0; }
 
 /* ── Integrations ───────────────────────────────────────────────────────── */
 .fx-chip { border: 1px solid var(--fx-line); border-radius: 999px; background: var(--t-paper); color: var(--t-text); }
@@ -498,12 +513,13 @@ a.fx-strong:hover { text-decoration: underline; }
 .fx-table__group-row { display: flex; align-items: center; gap: 12px; }
 .fx-table__group-row .fx-board__sum { margin-left: 0; }
 .fx-stage[data-rank="plain"] { --stage: var(--t-dim); }
-/* The board never scrolls sideways: its columns (one per work system status)
-   are about a phone wide, wrap onto more rows when the page is narrow, and
-   stack on a phone. On a wide, tall screen the board fills the page down to
-   its bottom edge, and each column scrolls inside itself (jobs.js sets
-   fx-main--board while the board shows). */
-.fx-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 256px), 1fr)); gap: 12px; align-items: start; }
+/* The board is one row of lanes (one per group), each about a phone wide.
+   Lanes share the width when they fit; more lanes scroll sideways inside
+   the board, never as a second row. On a wide, tall screen the board fills
+   the page down to its bottom edge, the page itself does not scroll, and
+   each lane scrolls inside itself (jobs.js sets fx-main--board while the
+   board shows). */
+.fx-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(min(85vw, 272px), 1fr); gap: 12px; align-items: start; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: 4px; }
 .fx-board__col { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; padding: 10px 6px 6px 8px; border-radius: var(--t-radius-lg); background: var(--t-s1); }
 .fx-board__head { display: flex; flex: none; align-items: center; gap: 8px; min-width: 0; padding: 2px 4px 4px 2px; }
 .fx-board__sum { flex: none; margin-left: auto; color: var(--t-dim); font-size: 12px; font-variant-numeric: tabular-nums; }
@@ -511,7 +527,7 @@ a.fx-strong:hover { text-decoration: underline; }
 @media (min-width: 821px) and (min-height: 560px) {
   .fx-main--board { height: 100vh; height: 100dvh; padding: 24px 24px 16px; grid-template-rows: auto auto minmax(0, 1fr); align-content: stretch; }
   .fx-main--board > .fx-jobs { min-height: 0; }
-  .fx-main--board .fx-board { height: 100%; overflow-y: auto; grid-auto-rows: 100%; align-items: stretch; }
+  .fx-main--board .fx-board { height: 100%; overflow-y: hidden; align-items: stretch; }
   .fx-main--board .fx-board__cards { flex: 1; max-height: none; }
 }
 .fx-board__none { padding: 8px 4px; color: var(--t-dim); font-size: 13px; }
@@ -812,6 +828,16 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
   .fx-table__actions { text-align: left; }
   .fx-table__actions .fx-row--end { justify-content: flex-start; }
   .fx-ph__actions, .fx-ph__actions .fx-btn { width: 100%; }
+  /* People: the name with its actions (⋯, Approve) on one line, then the
+     role select full width, then the status pill when there is one. */
+  .fx-people tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 10px; }
+  .fx-people td, .fx-people td:nth-child(2), .fx-people td:nth-child(3) { display: block; width: auto; margin: 0; padding: 0; }
+  .fx-people td:nth-child(1) { grid-area: 1 / 1; }
+  .fx-people td:nth-child(4) { grid-area: 1 / 2; }
+  .fx-people td:nth-child(2) { grid-area: 2 / 1 / 3 / -1; }
+  .fx-people td:nth-child(2) .fx-select { width: 100%; }
+  .fx-people td:nth-child(3) { grid-area: 3 / 1 / 4 / -1; }
+  .fx-people td:nth-child(3):empty { display: none; }
 }
 
 @keyframes fx-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@@ -856,6 +882,70 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-cf__line .fx-input, .fx-cf__line .fx-select { width: 100%; min-width: 0; }
 .fx-cf__color { border-left: 4px solid var(--cf); }
 @media (max-width: 560px) { .fx-cf__line { grid-template-columns: minmax(0, 1fr) 96px; } }
+/* Custom fields manager (custom-fields.js), like ClickUp's Custom Field
+   Manager: a toolbar, then one table of type groups that fold. */
+.fx-lucide { display: inline-block; flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
+.fx-cfm__card { padding: 0; overflow: hidden; }
+.fx-cfm__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--fx-line-soft); }
+.fx-cfm__search { width: 220px; min-width: 0; height: 32px; }
+.fx-cfm__tool { min-height: 32px; }
+.fx-cfm__tool--dashed { border-style: dashed; }
+.fx-cfm__gap { flex: 1; }
+.fx-cfm { display: grid; grid-template-columns: minmax(160px, 1fr) 64px 96px 120px minmax(90px, .6fr) 44px; }
+.fx-cfm > [role="row"], .fx-cfm > .fx-notice, .fx-cfm > .fx-cfm__create, .fx-cfm > .fx-cfm__empty { grid-column: 1 / -1; }
+.fx-cfm__head, .fx-cfm__row { display: grid; grid-template-columns: subgrid; align-items: center; }
+.fx-cfm__head { height: 36px; padding: 0 8px 0 36px; color: var(--t-dim); font-size: 12.5px; border-bottom: 1px solid var(--fx-line-soft); }
+.fx-cfm__sort { all: unset; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
+.fx-cfm__sort:focus-visible { box-shadow: var(--fx-focus); border-radius: 4px; }
+.fx-cfm__sort .fx-lucide { width: 13px; height: 13px; }
+.fx-cfm__group { display: flex; align-items: center; gap: 8px; height: 44px; margin-top: 12px; padding: 0 16px 0 8px; border-bottom: 1px solid var(--fx-line-soft); }
+.fx-cfm__group:first-of-type { margin-top: 4px; }
+.fx-cfm__fold { all: unset; cursor: pointer; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; color: var(--t-dim); }
+.fx-cfm__fold:hover { background: var(--fx-hover); color: var(--t-strong); }
+.fx-cfm__fold:focus-visible { box-shadow: var(--fx-focus); }
+.fx-cfm__fold .fx-lucide { width: 14px; height: 14px; transition: transform .15s var(--fx-ease); }
+.fx-cfm__fold[aria-expanded="false"] .fx-lucide { transform: rotate(-90deg); }
+.fx-cfm__pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 6px; font-size: 12.5px; font-weight: 600; color: var(--cf); background: color-mix(in srgb, var(--cf) 14%, transparent); }
+.fx-cfm__pill .fx-lucide { width: 14px; height: 14px; }
+.fx-cfm__count { color: var(--t-dim); font-size: 12.5px; font-weight: 600; }
+.fx-cfm__row { min-height: 36px; padding: 0 8px 0 36px; border-bottom: 1px solid var(--fx-line-soft); font-size: 14px; }
+.fx-cfm__row:hover { background: var(--fx-hover); }
+.fx-cfm__row[data-archived] .fx-cfm__label { color: var(--t-dim); }
+.fx-cfm__name { display: flex; align-items: center; gap: 8px; min-width: 0; padding-right: 8px; color: var(--t-strong); }
+.fx-cfm__name > .fx-lucide { width: 13px; height: 13px; color: var(--t-dim); }
+.fx-cfm__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fx-cfm__edit { display: none; align-items: center; gap: 5px; flex: none; height: 24px; padding: 0 7px; border: 1px solid var(--fx-line); border-radius: 6px; background: var(--t-paper); color: var(--t-text); font: inherit; font-size: 12px; cursor: pointer; }
+.fx-cfm__edit .fx-lucide { width: 13px; height: 13px; }
+.fx-cfm__row:hover .fx-cfm__edit, .fx-cfm__edit:focus-visible { display: inline-flex; }
+.fx-cfm__edit:focus-visible { box-shadow: var(--fx-focus); outline: none; }
+.fx-cfm__rename { height: 28px; width: 100%; max-width: 320px; }
+.fx-cfm__type { color: var(--cf); }
+.fx-cfm__type .fx-lucide { width: 17px; height: 17px; }
+.fx-cfm__avatar { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--t-primary); color: var(--t-on-primary); font-size: 10.5px; font-weight: 700; letter-spacing: .02em; }
+.fx-cfm__avatar .fx-lucide { width: 13px; height: 13px; }
+.fx-cfm__date, .fx-cfm__where { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.fx-cfm__row .fx-cfm__where { font-weight: 600; }
+.fx-cfm__end { justify-self: end; }
+.fx-cfm__more { all: unset; cursor: pointer; display: inline-grid; place-items: center; width: 30px; height: 28px; border-radius: 6px; color: var(--t-dim); }
+.fx-cfm__more:hover, .fx-cfm__more[aria-expanded="true"] { background: var(--fx-hover); color: var(--t-strong); }
+.fx-cfm__more:focus-visible { box-shadow: var(--fx-focus); }
+.fx-cfm__create { all: unset; cursor: pointer; display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px 0 36px; color: var(--t-dim); font-size: 13px; }
+.fx-cfm__create:hover, .fx-cfm__create:focus-visible { color: var(--t-strong); background: var(--fx-hover); }
+.fx-cfm__create .fx-lucide { width: 14px; height: 14px; }
+.fx-cfm__empty { margin: 0; padding: 20px 16px; color: var(--t-dim); }
+.fx-cfm > .fx-notice { margin: 12px 16px 0; }
+.fx-cfm__foot { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--fx-line-soft); color: var(--t-dim); font-size: 13px; }
+.fx-pop__item:disabled { opacity: .5; cursor: default; }
+.fx-pop__item[data-tone="danger"], .fx-pop__item[data-tone="danger"] .fx-pop__tick { color: var(--t-danger); }
+.fx-pop__item .fx-lucide { width: 15px; height: 15px; }
+@media (max-width: 720px) {
+  .fx-cfm { grid-template-columns: minmax(0, 1fr) 40px 40px; }
+  .fx-cfm .fx-cfm__by, .fx-cfm .fx-cfm__date, .fx-cfm .fx-cfm__where { display: none; }
+  .fx-cfm__head, .fx-cfm__row { padding-left: 16px; }
+  .fx-cfm__create { padding-left: 16px; }
+  .fx-cfm__search { flex: 1 1 100%; width: auto; }
+  .fx-cfm__edit { display: none !important; }
+}
 /* Invoice rules (invoice-rules.js): a row's Edit button and switch, and the
    rule dialog's condition lines. */
 .fx-rule__controls { align-items: center; gap: 10px; }
@@ -945,3 +1035,60 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-pick__row[hidden] { display: none; }
 .fx-pick__main { display: grid; gap: 2px; min-width: 0; }
 .fx-pick > .fx-dim { padding: 14px; }
+
+/* The Invoices list head (invoicing.js): tabs, search and the send bar stay
+   at the top while rows scroll up under them; a shadow shows once they do.
+   Narrow, the app bar (60px) sits above it. */
+.fx-listhead { position: sticky; top: 0; z-index: 5; margin: -12px calc(-1 * clamp(16px, 4vw, 48px)) 0; padding: 12px clamp(16px, 4vw, 48px) 0; background: var(--t-bg); transition: box-shadow .15s; }
+.fx-listhead[data-stuck] { box-shadow: 0 10px 12px -12px rgba(0, 0, 0, .45); }
+.fx-listhead .fx-sendbar { margin-bottom: 12px; }
+.fx-listhead__edge { height: 0; margin-bottom: -20px; }
+@media (max-width: 820px) { .fx-listhead { top: 60px; } }
+/* On a phone the head would hide too many rows: it scrolls away. */
+@media (max-width: 560px) { .fx-listhead { position: static; } }
+
+/* The bulk action bar (bulk-bar.js): floats at the foot while rows are
+   ticked. "N selected ×", then icon actions in groups, then More. It takes
+   the theme's own surface, line, corners and primary button, like a menu. */
+.fx-bulk {
+  position: sticky; bottom: 16px; z-index: 6; justify-self: center; display: flex; align-items: center; gap: 2px; max-width: 100%;
+  padding: 5px; border: 1px solid var(--fx-line); border-radius: var(--t-radius-lg); background: var(--t-paper); color: var(--t-text);
+  box-shadow: var(--t-shadow), 0 12px 32px rgba(0, 0, 0, .16);
+  font: 500 13.5px/1 var(--t-body); white-space: nowrap;
+}
+.fx-bulk[hidden] { display: none; }
+.fx-bulk[aria-busy="true"] { opacity: .7; pointer-events: none; }
+.fx-bulk__acts { display: flex; align-items: center; gap: 2px; min-width: 0; }
+.fx-bulk__count { display: inline-flex; align-items: center; gap: 6px; flex: none; margin-right: 6px; padding: 3px 4px 3px 10px; border: 1px solid var(--t-accent-brd, var(--fx-line)); border-radius: var(--t-radius); background: var(--t-accent-bg); color: var(--t-accent); font-weight: 600; }
+.fx-bulk__clear, .fx-bulk__act { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border: 1px solid transparent; border-radius: var(--t-radius); background: none; color: inherit; font: inherit; cursor: pointer; }
+.fx-bulk__clear { padding: 3px; color: inherit; }
+.fx-bulk__act:hover, .fx-bulk__act:focus-visible, .fx-bulk__act[aria-expanded="true"] { background: var(--fx-hover); color: var(--t-strong); outline: none; }
+.fx-bulk__clear:hover, .fx-bulk__clear:focus-visible { background: color-mix(in srgb, var(--t-accent) 14%, transparent); outline: none; }
+.fx-bulk__act--primary, .fx-bulk__act--primary:hover, .fx-bulk__act--primary:focus-visible { background: var(--t-primary); border-color: var(--t-primary); color: var(--t-on-primary); font-weight: 600; }
+.fx-bulk__act--primary:hover { background: color-mix(in srgb, var(--t-primary) 86%, var(--t-text)); }
+.fx-bulk__act--icon { padding: 7px; }
+.fx-bulk__act[data-tone="danger"] { color: var(--t-danger); }
+.fx-bulk__act[data-tone="danger"]:hover { background: var(--t-danger-bg); }
+.fx-bulk__sep { flex: none; width: 1px; height: 18px; margin: 0 4px; background: var(--fx-line); }
+/* An icon-only action says its name on hover, in a tip above it. */
+.fx-bulk [data-tip]:hover::after, .fx-bulk [data-tip]:focus-visible::after {
+  content: attr(data-tip); position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
+  padding: 4px 8px; border: 1px solid var(--fx-line); border-radius: var(--t-radius); background: var(--t-paper); color: var(--t-strong);
+  font: 500 12px/1.2 var(--t-body); pointer-events: none; box-shadow: var(--t-shadow), 0 4px 12px rgba(0, 0, 0, .12);
+}
+/* More: a compact list, one row per action, like a dropdown. */
+.fx-pop.fx-bulk__more { width: 248px; min-width: 0; padding: 4px; }
+.fx-bulk__search { width: 100%; height: 30px; margin-bottom: 2px; padding: 4px 8px; font-size: 13px; }
+.fx-bulk__more .fx-pop__head { padding: 6px 8px 2px; font-size: 10.5px; }
+.fx-bulk__more .fx-pop__item { gap: 8px; padding: 4px 8px; font-size: 13px; line-height: 1.25; }
+.fx-bulk__more .fx-pop__item .fx-lucide { width: 14px; height: 14px; }
+.fx-bulk__grid { display: grid; }
+.fx-bulk__grid .fx-pop__item[data-tone="danger"] { color: var(--t-danger); }
+.fx-bulk__none { margin: 8px 10px; color: var(--t-dim); font-size: 13.5px; }
+@media (max-width: 560px) {
+  .fx-bulk { bottom: 10px; padding: 4px; }
+  .fx-bulk__count { margin-right: 2px; padding-left: 8px; }
+  .fx-bulk__act { padding: 7px 6px; }
+  .fx-bulk__sep { margin: 0 2px; }
+  .fx-bulk__act:not(.fx-bulk__act--primary) .fx-bulk__word { display: none; }
+}