@arcforgelabs/flow 2026.10.34 → 2026.10.36

package/server/db/migrations/meta/_journal.json

@@ -134,6 +134,13 @@
       "when": 1792472460808,
       "tag": "0018_custom_fields",
       "breakpoints": true
+    },
+    {
+      "idx": 19,
+      "version": "7",
+      "when": 1792474607940,
+      "tag": "0019_people_views",
+      "breakpoints": true
     }
   ]
 }

package/server/db/schema.js

@@ -177,7 +177,10 @@ export const PERSON_STATUSES = ['active', 'pending', 'disabled'];
 // are stored lower-case. `clerk_user_id` is set on the person's first verified
 // sign-in; until then the row is an invitation. `appearance` is the person's
 // own design system, light or dark and accent (server/auth/people.js,
-// normaliseAppearance); null until they first choose.
+// normaliseAppearance); null until they first choose. `views` is the
+// person's own view of each page, such as how the Jobs page groups, sorts
+// and filters ({ jobs: … }, server/ui/job-view.js); null until they first
+// change one.
 export const people = pgTable('people', {
   id: id(),
   email: text('email').notNull(),
@@ -188,6 +191,7 @@ export const people = pgTable('people', {
   invitedBy: uuid('invited_by').references(() => people.id, { onDelete: 'set null' }),
   linkedAt: timestamp('linked_at', { withTimezone: true }),
   appearance: jsonb('appearance'),
+  views: jsonb('views'),
   createdAt: createdAt(),
   updatedAt: updatedAt(),
 }, (t) => [

package/server/integrations/port.js

@@ -23,6 +23,7 @@ export const CAPABILITIES = Object.freeze([
   'checkInvoice', // does the accounting system hold an invoice for a billable job? (the ledger's liveCheck)
   'billableJobs', // billable jobs by day from the work system's copy in Flow, for the daily reconcile; never a live call
   'jobReferenceFields', // { patient }: the fields a job gives the invoice Reference (server/core/references.js)
+  'jobLink', // { url, exact } or null: the link to one job in the work system's own web app, for "Open in" on a job's problem; never a live call
   'listWork', // the work system's jobs from its copy in Flow, open and lately finished, for the Jobs board; a job may carry `pendingMove`
   'moveWork', // { sourceJobRef, toStatus, personId }: a person moved a job to another stage on the Jobs board; answers what happens (a hand-off when the system's API cannot change it)
   'cancelMove', // { sourceJobRef }: take back a move the work system has not made yet

package/server/integrations/seazona/index.js

@@ -8,13 +8,13 @@ import { readBillableJobs } from './reconcile.js';
 import { SEAZONA_CALL_GUARD } from './governor.js';
 import { createSeazonaRouter } from './routes.js';
 import {
-  cancelStageMove, expiredStageMoves, readPersonSettings, requestStageMove, settleStageMoves, waitingStageMoves, writePersonSetting,
+  cancelStageMove, expiredStageMoves, handOff, readPersonSettings, requestStageMove, settleStageMoves, waitingStageMoves, writePersonSetting,
 } from './stage-moves.js';
 import { orderPatient } from './patients.js';
 import { createSeazonaScheduler } from './scheduler.js';
 import { readSweepHealth } from './sweep.js';
 import { resetFailedLanes, resetStoppedLanes } from './store.js';
-import { describeSeazonaSettings, resolveSeazonaSettings } from './settings.js';
+import { describeSeazonaSettings, orderLink, resolveSeazonaSettings } from './settings.js';
 import { seazonaSchema } from './tables.js';
 
 // The Seazona adapter (docs/SEAZONA.md). FLOW_INTEGRATIONS=seazona turns it
@@ -51,7 +51,7 @@ export const SEAZONA_SETUP = {
     { name: 'SEAZONA_API_BASE_URL', label: 'API address', kind: 'url', help: 'The API root of your account, https://…' },
     { name: 'SEAZONA_API_CLIENT_ID', label: 'Client id' },
     { name: 'SEAZONA_API_CLIENT_SECRET', label: 'Client secret', secret: true, help: 'Stored encrypted. Flow never shows it again.' },
-    { name: 'SEAZONA_ORDER_URL', label: 'Order address', kind: 'url', help: 'Optional. The address of one order in Seazona, with {ref} for the order number. Stage moves on the Jobs board open it.' },
+    { name: 'SEAZONA_ORDER_URL', label: 'Order address', kind: 'url', help: 'Optional. Open any order in Seazona and paste its address here, or write {ref} where the order id goes. Stage moves on the Jobs board and Open in Seazona use it.' },
     { name: 'SEAZONA_KEEP_PATIENT_REFERENCE', label: 'Keep patient names', kind: 'onoff', help: 'On: Flow keeps the patient name of each job for the invoice Reference.' },
   ],
 };
@@ -225,9 +225,15 @@ export function createSeazonaAdapter({ env = null, fetchImpl = null, now = Date.
         const [work, waiting] = await Promise.all([listWork(db, { now: now() }), waitingStageMoves(db)]);
         // A stage move Seazona has not made yet (stage-moves.js): the card
         // shows in its new lane, waiting for Seazona.
+        // Each card also carries the link that opens its order in Seazona.
+        const { settings } = current();
         for (const item of work.items) {
+          item.link = orderLink(settings, { sourceJobRef: item.sourceJobRef });
           const move = waiting.get(item.sourceJobRef);
-          if (move) item.pendingMove = { to: move.toStatus, from: move.fromStatus, requestedAt: move.requestedAt.toISOString(), expiresAt: move.expiresAt.toISOString() };
+          if (move) {
+            const { to, from, requestedAt, expiresAt, openUrl, openExact } = handOff(move, { settings });
+            item.pendingMove = { to, from, requestedAt, expiresAt, openUrl, openExact };
+          }
         }
         return work;
       },
@@ -237,7 +243,7 @@ export function createSeazonaAdapter({ env = null, fetchImpl = null, now = Date.
       // records a hand-off and answers what the person does in Seazona.
       async moveWork({ sourceJobRef, toStatus, personId = null }) {
         const { db, settings } = current();
-        return requestStageMove(db, { orderId: sourceJobRef, toStatus, personId, orderUrlTemplate: settings.orderUrlTemplate, now: now() });
+        return requestStageMove(db, { orderId: sourceJobRef, toStatus, personId, settings, now: now() });
       },
 
       async cancelMove({ sourceJobRef }) {
@@ -267,6 +273,12 @@ export function createSeazonaAdapter({ env = null, fetchImpl = null, now = Date.
         return historyJobIssues(current().db, refs);
       },
 
+      // The link to one order in Seazona's web app, for "Open in Seazona" on
+      // a job's problem (settings.js, orderLink). Never calls Seazona.
+      jobLink({ sourceJobRef }) {
+        return runtime ? orderLink(runtime.settings, { sourceJobRef }) : null;
+      },
+
       // Seazona's products, for the price list (server/core/price-list.js).
       // Reads Flow's copy only.
       async listPriceItems() {

package/server/integrations/seazona/settings.js

@@ -55,9 +55,18 @@ export function normaliseBaseUrl(value) {
   return `${url.origin}${path}/v1`;
 }
 
-function orderUrlTemplate(value) {
-  const raw = text(value);
-  if (!raw.includes('{ref}')) return null;
+// SEAZONA_ORDER_URL: the address of one order in Seazona's own web app, with
+// {ref} where the order id goes. Seazona's API guide gives no order page
+// address, and each lab has its own, so a person may also paste the address
+// of any one order as the browser shows it: the order id in it (a GUID)
+// becomes {ref}. Answers the template, or null: https only, and an order id
+// or {ref} in it. It never throws; an address Flow cannot read turns it off.
+const ORDER_ID = /[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}/i;
+
+export function orderUrlTemplate(value) {
+  const given = text(value);
+  const raw = given.includes('{ref}') ? given : ORDER_ID.test(given) ? given.replace(ORDER_ID, '{ref}') : '';
+  if (!raw) return null;
   try {
     return new URL(raw.replaceAll('{ref}', 'x')).protocol === 'https:' ? raw : null;
   } catch {
@@ -65,6 +74,18 @@ function orderUrlTemplate(value) {
   }
 }
 
+// The link to one order for "Open in Seazona": the order's own page when the
+// installation set SEAZONA_ORDER_URL, else the home page of the lab's
+// Seazona web app when the API address names it (https://{lab}.seazonaapi.net),
+// else null. `exact` is true only for the order's own page.
+export function orderLink(settings, { sourceJobRef } = {}) {
+  const template = settings?.orderUrlTemplate ?? null;
+  if (template && sourceJobRef) return { url: template.replaceAll('{ref}', encodeURIComponent(sourceJobRef)), exact: true };
+  const host = settings?.baseUrl ? new URL(settings.baseUrl).hostname : '';
+  const lab = /^([a-z0-9-]+)\.seazonaapi\.net$/i.exec(host)?.[1];
+  return lab ? { url: `https://${lab}.seazona.net/`, exact: false } : 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) {

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

@@ -1,6 +1,7 @@
 import { and, eq, gte, inArray, lt, sql } from 'drizzle-orm';
 import { FlowError } from '../../core/errors.js';
 import { orderStatusLabel } from './map.js';
+import { orderLink } from './settings.js';
 import { seazonaOrders, seazonaPersonSettings, seazonaStageMoves } from './schema.js';
 
 // Stage moves on the Jobs board (docs/SEAZONA.md, "Stage moves"). Seazona's
@@ -16,16 +17,9 @@ export const HAND_OFF_MS = 24 * 60 * 60_000;
 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() }) {
+export async function requestStageMove(db, { orderId, toStatus, personId = null, settings = 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 ?? '')));
@@ -41,7 +35,7 @@ export async function requestStageMove(db, { orderId, toStatus, personId = null,
     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 });
+  return handOff(row, { settings });
 }
 
 // Take a waiting move back: the card returns to Seazona's stage.
@@ -92,8 +86,11 @@ export async function expiredStageMoves(db, { now = Date.now() } = {}) {
   ));
 }
 
-// What the board shows for a waiting move.
-export function handOff(row, { orderUrlTemplate = null } = {}) {
+// What the board shows for a waiting move. `link` opens the order in
+// Seazona's web app (settings.js, orderLink); `exact` is false when it opens
+// only the lab's Seazona home page.
+export function handOff(row, { settings = null } = {}) {
+  const link = orderLink(settings, { sourceJobRef: row.orderId });
   return {
     kind: 'hand_off',
     system: 'seazona',
@@ -104,7 +101,8 @@ export function handOff(row, { orderUrlTemplate = null } = {}) {
     state: row.state,
     requestedAt: row.requestedAt.toISOString(),
     expiresAt: row.expiresAt.toISOString(),
-    openUrl: orderUrl(orderUrlTemplate, row.orderId),
+    openUrl: link?.url ?? null,
+    openExact: Boolean(link?.exact),
   };
 }
 

package/server/release-channel.js

@@ -2,8 +2,9 @@
 // GitHub Releases (with npm's dist-tags as the fallback). Used by the Replit
 // deploy (scripts/deploy-release.js, FLOW_DEPLOY_REF=stable|beta).
 //
-// Release names follow docs/RELEASING.md: vYYYY.M.N is stable, and
-// vYYYY.M.N-beta.B is a beta of the upcoming YYYY.M.N.
+// Release names follow docs/RELEASING.md: vYYYY.M.N is stable,
+// vYYYY.M.N-beta.B is a beta of the upcoming YYYY.M.N, and vYYYY.M.N-C is a
+// stable correction of YYYY.M.N.
 //
 //   stable  GitHub's latest release (what Flow Release Promote points at, so
 //           a rollback is followed), else npm `latest`
@@ -13,7 +14,7 @@
 // Nothing here sends anything about the installation: each request is an
 // anonymous GET of public data.
 
-const TAG = /^v(20\d{2})\.([1-9]|1[0-2])\.([1-9]\d*)(?:-beta\.([1-9]\d*))?$/;
+const TAG = /^v(20\d{2})\.([1-9]|1[0-2])\.([1-9]\d*)(?:-beta\.([1-9]\d*)|-([1-9]\d*))?$/;
 export const CHANNELS = ["stable", "beta"];
 export const DEFAULT_GITHUB_API = "https://api.github.com";
 export const DEFAULT_GITHUB_DOWNLOADS = "https://github.com";
@@ -35,8 +36,9 @@ export function parseReleaseTag(value) {
     tag,
     version: tag.slice(1),
     channel: beta ? "beta" : "stable",
-    // A stable release sorts after every beta of its own version.
-    parts: [Number(match[1]), Number(match[2]), Number(match[3]), beta ?? Number.POSITIVE_INFINITY],
+    // A stable release sorts after every beta of its own version, and its
+    // corrections after it.
+    parts: [Number(match[1]), Number(match[2]), Number(match[3]), beta ?? Number.POSITIVE_INFINITY, Number(match[5] ?? 0)],
   };
 }
 
@@ -44,7 +46,7 @@ export function parseReleaseTag(value) {
 export function compareReleases(a, b) {
   const [x, y] = [parseReleaseTag(a), parseReleaseTag(b)];
   if (!x || !y) throw new ReleaseUnavailable(`cannot compare ${a} with ${b}`);
-  for (let index = 0; index < 4; index += 1) {
+  for (let index = 0; index < 5; index += 1) {
     if (x.parts[index] !== y.parts[index]) return x.parts[index] < y.parts[index] ? -1 : 1;
   }
   return 0;

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 {