@arcforgelabs/flow 2026.10.33 → 2026.10.35

package/server/ui/custom-fields.js

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

package/server/ui/flow.css

@@ -189,6 +189,30 @@ body:is([data-state="off"], [data-state="error"], [data-state="no-access"]) .fx-
 .fx-notice[data-tone="danger"] { border-color: var(--t-danger-brd); background: var(--t-danger-bg); color: var(--t-danger); }
 .fx-panel > .fx-notice { margin: 12px; }
 
+/* The job changed after its invoice was made (job-change.js): was / now per
+   changed fact. Was is struck through; Now is the work system's value. */
+.fx-change {
+  display: grid; gap: 10px; padding: 12px 14px;
+  border: 1px solid var(--t-danger-brd); border-radius: var(--t-radius);
+  background: var(--t-danger-bg); color: var(--t-text); font-size: 14px;
+}
+.fx-change p { margin: 0; }
+.fx-change strong { color: var(--t-danger); }
+.fx-change__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
+.fx-change__acts { display: flex; flex-wrap: wrap; gap: 8px; }
+.fx-change__note { font-size: 13px; color: var(--t-dim); }
+.fx-change__scroll { overflow-x: auto; }
+.fx-change__table { width: 100%; border-collapse: collapse; background: var(--t-paper); border: 1px solid var(--t-brd); font-size: 13.5px; }
+.fx-change__table th, .fx-change__table td { padding: 8px 12px; border-bottom: 1px solid var(--t-brd); text-align: left; vertical-align: top; }
+.fx-change__table thead th {
+  font-size: var(--t-label-size, 12px); font-weight: var(--t-label-weight, 600); letter-spacing: var(--t-label-spacing, .08em);
+  text-transform: var(--t-label-case, uppercase); color: var(--t-dim);
+}
+.fx-change__table tbody th { font-weight: 400; color: var(--t-dim); white-space: nowrap; }
+.fx-change__was { background: color-mix(in srgb, var(--t-danger) 9%, transparent); text-decoration: line-through; text-decoration-thickness: 1px; }
+.fx-change__now { background: color-mix(in srgb, var(--t-success) 11%, transparent); color: var(--t-strong); font-weight: 600; }
+.fx-change__table .fx-num { text-align: left; font-family: var(--t-data); font-variant-numeric: tabular-nums; }
+
 .fx-status {
   display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
   border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
@@ -220,7 +244,7 @@ body:is([data-state="off"], [data-state="error"], [data-state="no-access"]) .fx-
   letter-spacing: var(--t-label-spacing); text-transform: var(--t-label-case);
 }
 .fx-table td { padding: 12px 16px; border-bottom: 1px solid var(--fx-line-soft); vertical-align: middle; }
-.fx-table tbody tr:last-child td { border-bottom: 0; }
+.fx-table tbody:last-child tr:last-child td { border-bottom: 0; }
 .fx-table tbody tr:hover td { background: var(--fx-hover); }
 .fx-table__actions { text-align: right; width: 1%; white-space: nowrap; }
 .fx-table__actions .fx-row { flex-wrap: nowrap; }
@@ -439,14 +463,57 @@ a.fx-strong:hover { text-decoration: underline; }
 .fx-toolbar--plain .fx-search { margin-bottom: 0; }
 .fx-empty .fx-btn { margin-top: 12px; }
 .fx-panel.fx-empty { display: grid; justify-items: center; }
+/* The Jobs toolbar: Group, Sort and Filter at the left, as small outlined
+   buttons that each open a menu; search and Board/List at the right. */
+.fx-toolbar__end { display: flex; flex: 1 1 360px; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; margin-left: auto; }
+.fx-toolbar__end .fx-search { flex: 0 1 320px; min-width: 0; }
+.fx-viewbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
+.fx-chip {
+  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 11px;
+  border: 1px solid var(--fx-line); border-radius: 999px; background: transparent;
+  color: var(--t-text); font: 600 13px/1.2 var(--t-body); white-space: nowrap; cursor: pointer;
+}
+.fx-chip svg { flex: none; color: var(--t-dim); }
+.fx-chip:hover, .fx-chip[aria-expanded="true"] { border-color: var(--t-brd-hi, var(--fx-line)); background: var(--fx-hover); color: var(--t-strong); }
+.fx-chip:focus-visible { outline: 2px solid var(--t-ring, var(--t-accent)); outline-offset: 2px; }
+.fx-chip--on { border-color: var(--t-accent-brd, var(--t-accent)); background: var(--t-accent-bg); color: var(--t-accent); }
+.fx-chip--on svg { color: currentColor; }
+.fx-pop {
+  position: fixed; inset: auto; margin: 0; min-width: 220px; max-width: min(320px, calc(100vw - 16px)); max-height: min(420px, calc(100vh - 32px));
+  overflow-y: auto; padding: 6px; border: 1px solid var(--fx-line); border-radius: var(--t-radius-lg);
+  background: var(--t-paper); color: var(--t-text); box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
+}
+.fx-pop__head { margin: 0; padding: 8px 10px 4px; color: var(--t-dim); font: var(--t-label-weight) var(--t-label-size)/1.3 var(--t-body); letter-spacing: var(--t-label-spacing); text-transform: var(--t-label-case); }
+.fx-pop__item {
+  display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border: 0; border-radius: var(--t-radius);
+  background: none; color: var(--t-text); font: 500 13.5px/1.3 var(--t-body); text-align: left; cursor: pointer;
+}
+.fx-pop__item:hover, .fx-pop__item:focus-visible { background: var(--fx-hover); color: var(--t-strong); outline: none; }
+.fx-pop__item[aria-checked="true"] { color: var(--t-strong); font-weight: 600; }
+.fx-pop__tick { display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; color: var(--t-accent); }
+.fx-pop__sep { height: 1px; margin: 6px 4px; background: var(--fx-line-soft); }
+.fx-pop__foot { display: flex; justify-content: flex-end; padding: 6px 4px 2px; border-top: 1px solid var(--fx-line-soft); margin-top: 6px; }
+.fx-table__group td { padding: 14px 16px 8px; background: var(--t-s1); }
+.fx-table tbody tr.fx-table__group:hover td { background: var(--t-s1); }
+.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)
-   wrap onto more rows when the page is narrow, and stack on a phone. A long
-   column scrolls inside itself. */
-.fx-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px; align-items: start; }
-.fx-board__col { display: grid; gap: 8px; align-content: start; min-width: 0; padding: 10px 8px 8px; border-radius: var(--t-radius-lg); background: var(--t-s1); }
-.fx-board__head { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 2px 2px 4px; }
+   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; }
+.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; }
-.fx-board__cards { display: grid; gap: 8px; max-height: 70vh; overflow-y: auto; }
+.fx-board__cards { display: grid; gap: 8px; align-content: start; min-height: 0; max-height: 70vh; padding-right: 2px; overflow-y: auto; scrollbar-width: thin; }
+@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__cards { flex: 1; max-height: none; }
+}
 .fx-board__none { padding: 8px 4px; color: var(--t-dim); font-size: 13px; }
 .fx-table--jobs tbody tr { cursor: pointer; }
 
@@ -476,9 +543,10 @@ a.fx-strong:hover { text-decoration: underline; }
 .fx-job { position: relative; display: grid; min-width: 0; padding: 11px 12px 9px; border: 1px solid var(--fx-line); border-radius: var(--t-radius); background: var(--t-paper); box-shadow: var(--t-shadow); font-size: 13px; cursor: pointer; }
 .fx-job:hover { border-color: var(--t-brd-hi, var(--fx-line)); }
 .fx-job:focus-visible { outline: 2px solid var(--t-ring, var(--t-accent)); outline-offset: 2px; }
-.fx-job__client { display: -webkit-box; overflow: hidden; color: var(--t-strong); font-size: 14px; font-weight: 600; line-height: 1.3; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
-.fx-job__who { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 5px; color: var(--t-dim); font-size: 12.5px; }
-.fx-job__who span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fx-job__client { color: var(--t-strong); font-size: 14px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
+.fx-job__who { display: flex; align-items: flex-start; gap: 6px; min-width: 0; margin-top: 5px; color: var(--t-dim); font-size: 12.5px; }
+.fx-job__who span { min-width: 0; overflow-wrap: anywhere; }
+.fx-job__who svg { margin-top: 2px; }
 .fx-job__who svg, .fx-job__date svg { flex: none; color: var(--t-mute); }
 .fx-job__foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--fx-line-soft); color: var(--t-dim); font-size: 12px; }
 .fx-job__date { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; white-space: nowrap; }
@@ -489,6 +557,22 @@ a.fx-strong:hover { text-decoration: underline; }
 .fx-job__problem:hover, .fx-job__problem:focus-visible { background: var(--t-warn-bg); }
 .fx-job__cell { display: inline-flex; align-items: center; gap: 6px; }
 
+/* Moves on the board (jobs.js, enableDrag): the lifted card, the copy that
+   follows the pointer, the lane that takes it, and the "Waiting for
+   Seazona" chip of a stage move the work system has not made yet. */
+.fx-job__wait { justify-self: start; margin-top: 8px; padding: 1px 8px; border: 1px dashed var(--t-accent); border-radius: 999px; color: var(--t-accent); font-size: 11.5px; font-weight: 600; }
+.fx-job--lifted { opacity: .35; }
+.fx-job--ghost { position: fixed; top: 0; left: 0; z-index: 60; pointer-events: none; box-shadow: var(--t-shadow-lg, var(--t-shadow)); cursor: grabbing; }
+.fx-board--dragging, .fx-board--dragging .fx-job { cursor: grabbing; user-select: none; }
+.fx-board__col--over { outline: 2px solid var(--t-accent); outline-offset: -2px; background: var(--t-accent-bg, var(--t-s1)); }
+.fx-board__lane { font-weight: 600; }
+.fx-board__lane .fx-stage__count { margin-left: 2px; }
+/* The stage move dialog (jobs.js, moveStage). */
+.fx-move__path { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; color: var(--t-dim); }
+.fx-move__stage { padding: 2px 10px; border: 1px solid var(--fx-line); border-radius: 999px; color: var(--t-strong); font-size: 13px; font-weight: 600; }
+.fx-move__note { margin: 0; color: var(--t-text); }
+.fx-check { display: inline-flex; align-items: center; gap: 8px; color: var(--t-dim); font-size: 13.5px; cursor: pointer; }
+
 /* ── Job page ───────────────────────────────────────────────────────────────
    A job opened from the board: a large panel over it, like a task page, with
    the activity at the side. It stacks on a phone. */
@@ -513,6 +597,11 @@ a.fx-strong:hover { text-decoration: underline; }
 .fx-task__fix h3 { padding: 12px 14px 4px; color: var(--t-warn); }
 .fx-task__fixrow { padding: 9px 14px; border-top: 1px solid var(--fx-line-soft); color: var(--t-strong); font-size: 13.5px; }
 .fx-task__fixrow:first-of-type { border-top: 0; }
+.fx-task__custom { margin-top: 24px; }
+.fx-task__custom h3 { margin: 0 0 4px; color: var(--t-dim); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
+.fx-task__input { width: 100%; min-width: 0; }
+.fx-task__move { display: grid; gap: 10px; max-width: 420px; margin-top: 8px; }
+.fx-task__wait { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border: 1px dashed var(--t-accent); border-radius: var(--t-radius); font-size: 13.5px; }
 .fx-task__lines { margin-top: 24px; }
 .fx-task__lines h3 { margin-bottom: 8px; }
 .fx-task__lines table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
@@ -755,6 +844,18 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-price__systems { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
 .fx-set__control .fx-price__link { width: 260px; min-width: 0; }
 @media (max-width: 560px) { .fx-set__control .fx-price__link { width: 150px; } }
+/* Custom fields (custom-fields.js): option chips with a colour dot, and the
+   dialog's option lines. The option colours are fixed, like ClickUp's. */
+.fx-cf__opt { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border: 1px solid var(--fx-line); border-radius: 999px; font-size: 12.5px; color: var(--t-text); white-space: nowrap; }
+.fx-cf__opt::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cf); flex: none; }
+[data-color="gray"] { --cf: #8a8f98; } [data-color="blue"] { --cf: #3b82f6; } [data-color="teal"] { --cf: #14b8a6; }
+[data-color="green"] { --cf: #22a35a; } [data-color="amber"] { --cf: #e0a019; } [data-color="red"] { --cf: #e5484d; }
+[data-color="purple"] { --cf: #8b5cf6; } [data-color="pink"] { --cf: #e5469a; }
+.fx-cf__options { display: grid; gap: 8px; }
+.fx-cf__line { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto auto; gap: 8px; align-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; } }
 /* 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; }
@@ -827,3 +928,20 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-pager__step { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--fx-line-soft); border-radius: 999px; background: transparent; color: var(--t-text); cursor: pointer; transition: background 120ms var(--fx-ease), border-color 120ms var(--fx-ease); }
 .fx-pager__step:hover:not(:disabled) { background: var(--fx-hover); border-color: var(--fx-line); }
 .fx-pager__step:disabled { opacity: 0.35; cursor: default; }
+
+/* New invoice from a job: a quiet strip above the form, and a searchable
+   list of jobs with no invoice. */
+.fx-fromjob {
+  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
+  padding: 12px 16px; border: 1px dashed var(--fx-line); border-radius: var(--t-radius);
+}
+.fx-fromjob__text { display: grid; gap: 2px; font-size: 14px; }
+.fx-dialog:has(.fx-pick__body) { width: min(620px, calc(100vw - 32px)); }
+.fx-pick__body { display: grid; gap: 12px; }
+.fx-pick { display: grid; max-height: min(420px, 55vh); overflow-y: auto; border: 1px solid var(--fx-line); border-radius: var(--t-radius); }
+.fx-pick__row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--fx-line); cursor: pointer; }
+.fx-pick__row:last-child { border-bottom: 0; }
+.fx-pick__row:hover, .fx-pick__row:has(input:checked) { background: var(--fx-hover); }
+.fx-pick__row[hidden] { display: none; }
+.fx-pick__main { display: grid; gap: 2px; min-width: 0; }
+.fx-pick > .fx-dim { padding: 14px; }

package/server/ui/invoice-notes.js

@@ -21,6 +21,6 @@ export function sendModeNote(to, sendMode, what = 'each invoice') {
 // The line under a draft's title, one fact per sentence.
 export function draftNote(to, invoice, ready) {
   if (!to) return ready ? 'A person checked it. A saved change keeps it ready.' : 'Flow gives it a number when you issue it.';
-  if (!ready) return `Mark it ready, then send it to ${to}.`;
+  if (!ready) return `Finalise it, then send it to ${to}.`;
   return sendModeNote(to, invoice?.sendMode, 'this invoice');
 }