@arcforgelabs/flow 2026.10.51 → 2026.10.53

package/server/ui/captures.js

@@ -0,0 +1,289 @@
+// Capture (/captures): a photo of a handwritten lab form becomes a proposed
+// job change (RFC #357, docs/DATA_MODEL.md "Storage"). One tap opens the
+// phone's own camera. Reading runs on the server, so the person can shoot the
+// next form at once. The tray lists the captures; a row opens the result
+// sheet: the photo, the job, only the fields that change (old, then new;
+// amber when the reader was not sure) and Apply at the foot. On a desk a
+// photo can also be dropped or pasted on the page, and the sheet takes J, K
+// and Enter.
+import { lucide } from '/assets/ui/custom-fields.js';
+import { JOB_FIELDS, SURE_LINE } from '/assets/ui/capture-fields.js';
+import { isPhone } from '/assets/ui/mobile.js';
+import { recordBar } from '/assets/ui/sidecar.js';
+
+// The phone sends a smaller copy: about 1,600 px on the long side.
+const LONG_SIDE = 1600;
+const POLL_MS = 3000;
+const POLL_MAX = 40;
+const OFF = 'Capture needs a file store (FLOW_STORAGE).';
+const STATE = { reading: 'Reading', ready: 'Ready', problem: 'Problem', done: 'Done' };
+const TONE = { reading: 'info', ready: 'success', problem: 'warn', done: 'mute' };
+
+const valueOf = (capture, key) => capture.read?.fields?.find((f) => f.key === key)?.value || '';
+
+// One line for a capture: the practice and the work, else the case number.
+function titleOf(capture) {
+  const practice = valueOf(capture, 'practice');
+  const work = valueOf(capture, 'work');
+  const text = [practice, work].filter(Boolean).join(' · ') || valueOf(capture, 'case_number');
+  if (text) return text;
+  if (capture.state === 'reading') return 'Reading…';
+  const problem = capture.problem ?? '';
+  return problem ? problem[0].toUpperCase() + problem.slice(1) : 'Photo';
+}
+
+async function shrink(file) {
+  try {
+    const bitmap = await createImageBitmap(file);
+    const scale = Math.min(1, LONG_SIDE / Math.max(bitmap.width, bitmap.height));
+    const canvas = document.createElement('canvas');
+    canvas.width = Math.round(bitmap.width * scale);
+    canvas.height = Math.round(bitmap.height * scale);
+    canvas.getContext('2d').drawImage(bitmap, 0, 0, canvas.width, canvas.height);
+    const blob = await new Promise((resolve) => canvas.toBlob(resolve, 'image/jpeg', 0.85));
+    return blob ?? file;
+  } catch {
+    // A type the browser cannot draw (HEIC on some browsers) goes as it is.
+    return file;
+  }
+}
+
+async function upload(file) {
+  const body = await shrink(file);
+  const token = await window.Clerk.session?.getToken();
+  const res = await fetch('/api/captures', {
+    method: 'POST',
+    headers: {
+      Authorization: `Bearer ${token}`,
+      'Content-Type': body.type || 'image/jpeg',
+      'Idempotency-Key': crypto.randomUUID(),
+      'X-Flow-Capture-Source': isPhone() ? 'phone' : 'desk',
+    },
+    body,
+  });
+  const answer = await res.json().catch(() => ({}));
+  if (!res.ok) throw new Error(res.status === 404 ? OFF : answer.error || `HTTP ${res.status}`);
+  return answer.capture;
+}
+
+// The Capture button, on Capture and in the Jobs toolbar: one tap opens the
+// phone's own camera; a desk picks files. `send(files)` uploads each image
+// and calls `added(capture)`, then `done()`.
+export function captureButton(ui, { icon = false, added = () => {}, done = () => {} } = {}) {
+  const { h, toast } = ui;
+  const picker = h('input', { type: 'file', accept: 'image/*', hidden: true });
+  if (isPhone()) picker.setAttribute('capture', 'environment');
+  else picker.multiple = true;
+  const button = icon
+    ? h('button', { class: 'fx-btn fx-btn--ghost fx-btn--icon fx-capture__shoot', type: 'button', 'aria-label': 'Capture', title: 'Capture', onclick: () => picker.click() }, lucide(h, 'camera'))
+    : h('button', { class: 'fx-btn fx-btn--primary fx-capture__shoot', type: 'button', onclick: () => picker.click() }, lucide(h, 'camera'), 'Capture');
+  const send = async (files) => {
+    for (const file of [...files].filter((f) => f.type.startsWith('image/'))) {
+      try {
+        added(await upload(file));
+      } catch (error) {
+        toast(error.message, 'danger', { stay: true });
+      }
+    }
+    done();
+  };
+  picker.addEventListener('change', () => {
+    const files = [...picker.files];
+    picker.value = '';
+    send(files);
+  });
+  return { nodes: [button, picker], send };
+}
+
+export async function renderCaptures(main, ui) {
+  const { h, flow, toast, notice, listHead, listFrame } = ui;
+  const shoot = captureButton(ui, {
+    added: (capture) => { rows = [capture, ...rows]; draw(); },
+    done: () => { polls = 0; load(); },
+  });
+  const head = listHead('Captures', { actions: shoot.nodes });
+  const list = h('ul', { class: 'fx-captures', 'aria-label': 'Captures' });
+  const frame = listFrame(main, list);
+  main.append(...head.nodes, frame.element);
+
+  let rows = [];
+  let labels = new Map(JOB_FIELDS.map((f) => [f.key, f.label]));
+  let polls = 0;
+  let timer = null;
+
+  const draw = () => {
+    const ready = rows.filter((c) => c.state === 'ready').length;
+    frame.count(ready ? `${ready} ready` : '');
+    list.replaceChildren(...(rows.length ? rows.map((capture) => h('li', {},
+      h('button', { class: 'fx-captures__row', type: 'button', disabled: capture.state === 'reading', onclick: () => openSheet(capture.id) },
+        h('span', { class: 'fx-captures__title', title: titleOf(capture) }, titleOf(capture)),
+        h('span', { class: 'fx-status', 'data-tone': TONE[capture.state] }, STATE[capture.state])))) : [h('li', { class: 'fx-empty' }, 'No captures.')]));
+  };
+
+  async function load() {
+    try {
+      ({ captures: rows } = await flow('/api/captures'));
+      draw();
+    } catch (error) {
+      const off = error.status === 404;
+      list.replaceChildren(h('li', {}, notice(off ? OFF : error.message, off ? 'warn' : 'danger', off ? 'Off.' : null)));
+      return;
+    }
+    clearTimeout(timer);
+    if (rows.some((c) => c.state === 'reading') && polls < POLL_MAX && frame.element.isConnected) {
+      polls += 1;
+      timer = setTimeout(load, POLL_MS);
+    }
+  }
+
+  // A desk: a photo dropped on the list or pasted on the page is a capture.
+  // `main` stays across pages, so the listeners hang on this page's frame.
+  frame.element.addEventListener('dragover', (event) => { if (event.dataTransfer?.types.includes('Files')) event.preventDefault(); });
+  frame.element.addEventListener('drop', (event) => {
+    if (!event.dataTransfer?.files.length) return;
+    event.preventDefault();
+    shoot.send(event.dataTransfer.files);
+  });
+  const paste = (event) => {
+    if (!frame.element.isConnected) { document.removeEventListener('paste', paste); return; }
+    const files = [...(event.clipboardData?.files ?? [])];
+    if (files.length && !document.querySelector('dialog[open]')) shoot.send(files);
+  };
+  document.addEventListener('paste', paste);
+
+  // The result sheet: a dialog on a desk, the whole screen on a phone (the
+  // job panel's layout: record bar, body, the action fixed at the foot).
+  async function openSheet(id) {
+    let capture;
+    try {
+      ({ capture } = await flow(`/api/captures/${id}`));
+    } catch (error) {
+      toast(error.message, 'danger');
+      return;
+    }
+    const element = h('dialog', { class: 'fx-dialog fx-task fx-capture', 'aria-label': 'Capture' });
+    const close = () => element.close();
+    const at = rows.findIndex((c) => c.id === id);
+    // The next capture that has a result; one still reading is skipped.
+    const step = (delta) => {
+      for (let i = at + delta; i >= 0 && i < rows.length; i += delta) {
+        if (rows[i].state === 'reading') continue;
+        close();
+        openSheet(rows[i].id);
+        return;
+      }
+    };
+    const proposal = capture.proposal ?? { changes: [] };
+    const match = capture.match ?? { outcome: 'none', jobs: [] };
+    const job = match.jobs.find((j) => j.jobId === proposal.jobId) ?? null;
+    const jobLine = job
+      ? `${job.caseRef ? `Job ${job.caseRef}` : job.jobId} · ${job.clientName ?? ''}`
+      : proposal.action === 'create' ? 'New job' : 'Pick a job';
+
+    // A field the work system owns: Apply leaves it; the person changes it
+    // there (until a two-way sync can send it, #357).
+    const system = proposal.action === 'update' && proposal.jobId ? proposal.jobId.split(':')[0] : null;
+    const systemName = system ? system[0].toUpperCase() + system.slice(1) : null;
+    const elsewhere = (change) => systemName && !change.field.startsWith('custom_');
+    const changeRow = (change) => h('div', { class: 'fx-capture__change', 'data-unsure': change.sure != null && change.sure < SURE_LINE ? 'true' : 'false' },
+      h('span', { class: 'fx-capture__field' }, labels.get(change.field) ?? change.field,
+        elsewhere(change) ? h('span', { class: 'fx-capture__where', title: `Change this in ${systemName}` }, systemName) : null),
+      h('span', { class: 'fx-capture__from' }, change.from || '–'),
+      h('span', { class: 'fx-capture__arrow', 'aria-hidden': 'true' }, '→'),
+      h('span', { class: 'fx-capture__to' }, change.to));
+
+    const decide = async (decision) => {
+      try {
+        await flow(`/api/captures/${id}/decision`, { method: 'POST', body: JSON.stringify({ decision }) });
+        toast(decision === 'applied' ? 'Applied.' : 'Discarded.', 'success');
+        close();
+        load();
+      } catch (error) {
+        toast(error.message, 'danger', { stay: true });
+      }
+    };
+
+    const pickJob = async () => {
+      const chosen = await ui.pickOne({
+        title: 'Other job', label: 'Jobs', find: 'Find', empty: 'No jobs.', confirm: 'Use',
+        load: async () => {
+          const { jobs } = await flow('/api/invoicing/board');
+          const near = new Map(match.jobs.map((j, i) => [j.jobId, i]));
+          return jobs.map((j) => ({ ...j, jobId: `${j.sourceSystem}:${j.sourceJobRef}` }))
+            .sort((a, b) => (near.get(a.jobId) ?? 99) - (near.get(b.jobId) ?? 99));
+        },
+        item: (j) => ({ value: j.jobId, title: j.clientName ?? j.jobId, meta: j.caseRef ? `Job ${j.caseRef}` : null }),
+      });
+      const jobId = chosen?.jobId ?? null;
+      if (!jobId) return;
+      try {
+        await flow(`/api/captures/${id}/proposal`, { method: 'POST', body: JSON.stringify({ ...proposal, action: 'update', jobId }) });
+        close();
+        openSheet(id);
+      } catch (error) {
+        toast(error.message, 'danger');
+      }
+    };
+
+    // A capture the reader could not read: type the fields that find the job.
+    const typeIt = () => {
+      const inputs = ['case_number', 'practice', 'work'].map((key) => h('input', { class: 'fx-input', name: key, 'aria-label': labels.get(key), placeholder: labels.get(key) }));
+      const form = h('form', { class: 'fx-fields', onsubmit: async (event) => {
+        event.preventDefault();
+        const fields = Object.fromEntries(inputs.map((input) => [input.name, input.value.trim()]).filter(([, v]) => v));
+        try {
+          await flow(`/api/captures/${id}/match`, { method: 'POST', body: JSON.stringify({ fields }) });
+          close();
+          openSheet(id);
+        } catch (error) {
+          toast(error.message, 'danger');
+        }
+      } }, inputs, h('button', { class: 'fx-btn', type: 'submit' }, 'Find job'));
+      return form;
+    };
+
+    const ready = capture.state === 'ready';
+    const actions = ready ? [
+      h('button', { class: 'fx-btn', type: 'button', onclick: () => decide('discarded') }, 'Discard'),
+      match.jobs.length || proposal.action === 'update' ? h('button', { class: 'fx-btn', type: 'button', onclick: pickJob }, 'Other job') : null,
+      h('button', { class: 'fx-btn fx-btn--primary', type: 'button', autofocus: true, disabled: proposal.action === 'update' && !proposal.jobId, onclick: () => decide('applied') }, 'Apply'),
+    ] : capture.state === 'problem' ? [h('button', { class: 'fx-btn', type: 'button', onclick: () => decide('discarded') }, 'Discard')] : [];
+
+    element.append(
+      recordBar(h, {
+        title: jobLine, label: 'Capture', onBack: close,
+        prev: { label: 'Previous capture', disabled: at <= 0, onclick: () => step(-1) },
+        next: { label: 'Next capture', disabled: at < 0 || at >= rows.length - 1, onclick: () => step(1) },
+      }),
+      h('div', { class: 'fx-task__grid' }, h('div', { class: 'fx-task__main' },
+        h('header', { class: 'fx-task__head' }, h('span'), h('div', { class: 'fx-task__tools' },
+          h('button', { class: 'fx-btn fx-btn--ghost fx-btn--icon', type: 'button', 'aria-label': 'Close', title: 'Close', onclick: close }, '✕'))),
+        capture.link ? h('img', { class: 'fx-capture__photo', src: capture.link.url, alt: 'Form photo' }) : null,
+        h('h2', { class: 'fx-task__title' }, jobLine),
+        capture.state === 'problem' ? notice(capture.problem, 'warn', null, { short: capture.problem }) : null,
+        capture.state === 'problem' ? typeIt() : null,
+        ready && proposal.changes.length ? h('div', { class: 'fx-capture__changes' }, proposal.changes.map(changeRow)) : null,
+        ready && !proposal.changes.length ? h('p', { class: 'fx-dim' }, 'No change.') : null,
+        h('div', { class: 'fx-task__actions' }, actions))));
+    element.addEventListener('click', (event) => { if (event.target === element) close(); });
+    // Keys: J next, K previous (not while typing). Apply has the focus, so
+    // Enter applies.
+    element.addEventListener('keydown', (event) => {
+      if (event.target.closest('input, textarea, select') || event.metaKey || event.ctrlKey || event.altKey) return;
+      if (event.key !== 'j' && event.key !== 'k') return;
+      event.preventDefault();
+      step(event.key === 'j' ? 1 : -1);
+    });
+    element.addEventListener('close', () => element.remove());
+    document.body.append(element);
+    element.showModal();
+  }
+
+  try {
+    const { fields } = await flow('/api/custom-fields');
+    labels = new Map([...labels, ...fields.map((f) => [`custom_${f.id}`, f.name])]);
+  } catch {
+    // The standard labels still show; a custom field shows its key.
+  }
+  await load();
+}

package/server/ui/columns.js

@@ -17,15 +17,20 @@
 //   widths()         the saved widths
 //   change(patch)    saves { columns } or { widths }
 //   hidden()         [{ id, label }] the + menu lists (no hidden: no +)
-//   extra(column, item)  menu nodes before Move (Sort, Edit custom field)
+//   extra(column, item)  menu nodes before Move (Edit custom field)
+//   sorting          the heads sort the list (Jobs, Price list), as
+//                    ClickUp's: { sortOf(columnId) (the sort key, or null),
+//                    sorts(), change({ sorts }), dirWords(by) }
 // table({ columns, rows, lead, className }), per draw, answers the table:
 //   columns  the shown columns, in order: { id, label, kind, cell(row),
-//            num?, className?, sort?(): node, icon?, fixed? }. An icon
+//            num?, className?, icon?, fixed? }. An icon
 //            shows in place of the label (the label is its name). A fixed
 //            column keeps its place: no drag, no Move, no Hide.
 //   rows     the <tbody> nodes (rowCells builds a row's cells)
 //   lead     <th> nodes before the columns (the tick column)
 //
+// groupHead(h, config) is a grouped list's head row (below).
+//
 // Cells every list shares: dateCell (a short date), personCell (a person's
 // initials) and fieldColumn (one of the lab's custom fields as a column, on
 // Jobs and on Invoices, where it is the invoice's job's value).
@@ -33,6 +38,7 @@ 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';
+import { ICONS, svg } from '/assets/ui/view-bar.js';
 
 const fullDate = (iso) => new Date(`${iso}T00:00:00`).toLocaleDateString('en-AU', { day: 'numeric', month: 'short', year: 'numeric' });
 // A list date, short: Today, Tomorrow or Yesterday, else day/month (and
@@ -132,14 +138,73 @@ export function onRightButton(event, open) {
   else open();
 }
 
+// A group's head row in a grouped list (Jobs, Price list): a fold button
+// with the group's `badge` (its name and count), then `extra` (a sum). A
+// click on the row folds the group or opens it. `lead` is the cells before
+// the columns (a tick); `span` is how many cells the head covers after them.
+const CHEVRON = '<svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><path d="m6 3.5 4.5 4.5L6 12.5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+export function groupHead(h, { label, badge, open, onFold, lead = [], span, extra = null }) {
+  const chevron = h('span', {});
+  chevron.innerHTML = CHEVRON;
+  const toggle = h('button', {
+    type: 'button', class: 'fx-table__fold', 'aria-expanded': String(open), 'aria-label': `${label}. ${open ? 'Fold' : 'Open'} the group`,
+    onclick: (event) => { event.stopPropagation(); onFold(); },
+  }, chevron.firstChild, badge);
+  return h('tr', { class: `fx-table__group${open ? '' : ' fx-table__group--folded'}`, onclick: onFold },
+    lead, h('td', { colspan: String(span) }, h('span', { class: 'fx-table__group-row' }, toggle, extra)));
+}
+
 export function columnTable(h, config) {
   const menu = columnPopover(h);
   const ids = () => config.order?.() ?? [];
   const widths = () => config.widths?.() ?? {};
 
+  // A column head's sort button: it shows on hover, or always while it
+  // sorts. A click sorts one way, again the other way, and a third time
+  // takes the sort off. A right-click on a sorting head opens a small menu:
+  // change the direction, or clear the sort.
+  const sorting = config.sorting ?? null;
+  function sortButton(column) {
+    const by = sorting?.sortOf(column.id);
+    if (!by) return null;
+    const sorts = sorting.sorts();
+    const change = (next) => sorting.change({ sorts: next });
+    const at = sorts.findIndex((s) => s.by === by);
+    const on = at >= 0 ? sorts[at] : null;
+    const [up, down] = sorting.dirWords(by);
+    const next = () => {
+      if (!on) change([{ by, dir: 'asc' }]);
+      else if (on.dir === 'asc') change(sorts.map((s, n) => (n === at ? { ...s, dir: 'desc' } : s)));
+      else change(sorts.filter((_, n) => n !== at));
+    };
+    const flip = () => change(sorts.map((s, n) => (n === at ? { ...s, dir: s.dir === 'asc' ? 'desc' : 'asc' } : s)));
+    const words = on ? `Sorted ${on.dir === 'asc' ? up : down}. Click to ${on.dir === 'asc' ? `sort ${down}` : 'clear the sort'}` : `Sort by ${column.label}`;
+    return h('button', {
+      type: 'button', class: `fx-th-sort${on ? ' fx-th-sort--on' : ''}`, 'aria-label': words, title: words,
+      onclick: (event) => { event.stopPropagation(); next(); },
+      oncontextmenu: (event) => {
+        if (!on) return;
+        event.preventDefault();
+        event.stopPropagation();
+        onRightButton(event, () => menu.show([
+          h('button', { type: 'button', class: 'fx-pop__item', role: 'menuitemcheckbox', 'aria-checked': 'true', title: 'Change the direction', onclick: () => { menu.close(); flip(); } },
+            h('span', { class: 'fx-pop__tick' }, lucide(h, on.dir === 'asc' ? 'arrow-up' : 'arrow-down')), h('span', {}, `Sort by ${column.label}`), h('span', { class: 'fx-pop__end' }, svg(ICONS.tick))),
+          menu.item('ban', 'Clear sort', () => change(sorts.filter((_, n) => n !== at))),
+        ], event));
+      },
+    }, lucide(h, on ? (on.dir === 'asc' ? 'arrow-up' : 'arrow-down') : 'chevrons-up-down'),
+    on && sorts.length > 1 ? h('span', { class: 'fx-th-sort__n' }, String(at + 1)) : null);
+  }
+
   function openMenu(column, event) {
     const parts = [];
     if (column) {
+      const by = sorting?.sortOf(column.id);
+      if (by) {
+        const [up, down] = sorting.dirWords(by);
+        parts.push(menu.item('arrow-up-narrow-wide', `Sort: ${up}`, () => sorting.change({ sorts: [{ by, dir: 'asc' }] })),
+          menu.item('arrow-down-wide-narrow', `Sort: ${down}`, () => sorting.change({ sorts: [{ by, dir: 'desc' }] })), menu.sep());
+      }
       parts.push(...(config.extra?.(column, menu.item) ?? []));
       if (!column.fixed) {
         const order = ids();
@@ -212,7 +277,7 @@ export function columnTable(h, config) {
         class: [c.num ? 'fx-num' : null, c.fixed ? null : 'fx-th--drag'].filter(Boolean).join(' ') || null,
         'data-col': c.id,
         oncontextmenu: (event) => { event.preventDefault(); onRightButton(event, () => openMenu(c, event)); },
-      }, h('span', { class: 'fx-th-cell' }, button, c.sort?.() ?? null), grip);
+      }, h('span', { class: 'fx-th-cell' }, button, sortButton(c)), grip);
       resizer(grip, c, n);
       if (!c.fixed) dragger(button, th, c);
       return th;

package/server/ui/custom-fields.js

@@ -111,7 +111,7 @@ 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 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 custom field');
+  const addButton = h('button', { class: 'fx-btn fx-btn--primary fx-btn--sm', type: 'button', disabled, title: 'New custom field' }, lucide(h, 'plus'), 'New');
   main.append(pageHeader('Custom fields', { help: { href: DOCS, label: 'How custom fields work' } }), host);
 
   let data = null;
@@ -309,7 +309,7 @@ export async function renderCustomFields(main, ui) {
   ]);
   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 custom fields', () => { view.archived = !view.archived; close(); draw(); }, { role: 'menuitemcheckbox', checked: view.archived }),
+    item(view.archived ? 'check' : null, 'Archived', () => { 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' });
@@ -505,15 +505,9 @@ export async function renderCustomFields(main, ui) {
       parts.push(...group('archived', { text: 'Archived', icon: 'archive', color: 'gray' }, fields));
     }
     if (!count && (view.q || view.types.size)) parts.push(h('p', { class: 'fx-cfm__empty' }, 'No custom field matches.'));
-    if (!data.fields.length && !view.q && !view.types.size) {
-      parts.push(h('p', { class: 'fx-cfm__empty' }, 'No custom fields yet. Create one, for example Priority or Technician, to group the Jobs board by it.'));
-    }
+    else if (!count) parts.push(h('p', { class: 'fx-cfm__empty' }, 'No custom fields'));
     table.replaceChildren(...parts);
-    // The count is what the table shows, the work systems' fields too.
-    foot.replaceChildren(h('span', {}, `${count} ${count === 1 ? 'custom field' : 'custom fields'}`));
   }
-  const foot = h('div', { class: 'fx-cfm__foot' });
-  host.append(foot);
 
   async function load() {
     try {