@arcforgelabs/flow 2026.10.33 → 2026.10.34

package/server/ui/flow.css

@@ -439,14 +439,23 @@ 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; }
+.fx-toolbar--end { justify-content: flex-end; }
 /* 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 +485,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; }
@@ -755,6 +765,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 +849,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/invoicing.js

@@ -226,9 +226,13 @@ export async function renderInvoiceList(main, ui) {
     // The invoice page steps through this list, in this order (navBar).
     saveNav({ tab: state.status, q: state.q, ids: body.invoices.map((i) => i.id) });
     const open = (href) => { saveNav({ ...readNav(), scrollY: window.scrollY }); go(href); };
+    const link = (href, label) => h('a', { class: 'fx-strong', href, onclick: (event) => { event.preventDefault(); event.stopPropagation(); open(href); } }, label);
     const ticks = TICKS[state.status];
     const showProblem = state.status === 'problem';
     const created = ['to_check', 'problem', 'ready'].includes(state.status);
+    // An invoice gets its number when it is sent or issued, so only the
+    // Issued and Void tabs show a Number column; the others open on Client.
+    const numbered = !created;
     const boxes = [];
     const tickBox = (invoice) => {
       const box = h('input', {
@@ -252,7 +256,7 @@ export async function renderInvoiceList(main, ui) {
     host.replaceChildren(h('table', { class: 'fx-table fx-table--rows' },
       h('thead', {}, h('tr', {},
         ticks ? h('th', { class: 'fx-tick-cell' }, all) : null,
-        h('th', {}, 'Number'), h('th', {}, 'Client'), h('th', {}, showProblem ? 'Problem' : 'Reference'),
+        numbered ? h('th', {}, 'Number') : null, h('th', {}, 'Client'), h('th', {}, showProblem ? 'Problem' : 'Reference'),
         h('th', {}, created ? 'Created' : 'Issued'), h('th', { class: 'fx-num' }, 'Total'), h('th', {}, 'Status'))),
       h('tbody', {}, body.invoices.map((invoice) => {
         const href = `/invoices/${invoice.id}`;
@@ -260,8 +264,8 @@ export async function renderInvoiceList(main, ui) {
         const view = invoice.status === 'void' ? null : invoice.view;
         return h('tr', { tabindex: '0', onclick: () => open(href), onkeydown: (event) => { if (event.key === 'Enter') open(href); } },
           ticks ? h('td', { class: 'fx-tick-cell', onclick: (event) => event.stopPropagation() }, tickBox(invoice)) : null,
-          h('td', {}, h('a', { class: 'fx-strong', href, onclick: (event) => { event.preventDefault(); event.stopPropagation(); open(href); } }, invoice.number ?? 'Draft')),
-          h('td', {}, invoice.contactName ?? '—'),
+          numbered ? h('td', {}, link(href, invoice.number ?? 'Draft')) : null,
+          h('td', {}, numbered ? (invoice.contactName ?? '—') : link(href, invoice.contactName ?? 'No client')),
           showProblem
             ? h('td', { class: 'fx-problem' }, first?.message ?? '—', invoice.problems.length > 1 ? h('span', { class: 'fx-dim' }, ` +${invoice.problems.length - 1} more`) : null)
             : h('td', { class: 'fx-dim' }, invoice.reference ?? '—'),
@@ -389,6 +393,8 @@ function draftView(invoice, ui, context, redraw) {
   const lines = (invoice?.lines ?? []).map((line) => ({ ...line }));
   if (!lines.length) lines.push({ description: '', quantity: 1, unitAmountCents: null, taxCode: 'GST', priceItemId: null });
   let contact = invoice?.contact ?? null;
+  // Issue invoice waits for a client and a due date (syncIssue, below).
+  let onContact = () => {};
 
   // Client: type to find a customer.
   const clientInput = h('input', { class: 'fx-input', type: 'text', autocomplete: 'off', placeholder: 'Type a client name', value: contact?.name ?? '', 'aria-label': 'Client' });
@@ -410,6 +416,7 @@ function draftView(invoice, ui, context, redraw) {
             contact = c;
             clientInput.value = c.name;
             clientList.hidden = true;
+            onContact();
           },
         }, c.name, c.email ? h('span', { class: 'fx-dim' }, c.email) : null)) : [h('p', { class: 'fx-dim fx-suggest__none' }, 'No client by that name.')]));
         clientList.hidden = false;
@@ -420,7 +427,7 @@ function draftView(invoice, ui, context, redraw) {
   });
   clientInput.addEventListener('blur', () => { setTimeout(() => { clientList.hidden = true; }, 120); });
 
-  const reference = h('input', { class: 'fx-input', type: 'text', value: invoice?.reference ?? '', placeholder: 'Case or order number' });
+  const reference = h('input', { class: 'fx-input', type: 'text', value: invoice?.reference ?? '', placeholder: 'Practitioner - Patient' });
   const dueDate = h('input', { class: 'fx-input', type: 'date', value: invoice?.dueDate ?? '' });
 
   // Lines.
@@ -555,7 +562,7 @@ function draftView(invoice, ui, context, redraw) {
   // With an accounting system on, a ready invoice is sent there: Flow issues
   // it and queues it, the same as Send all ready. With none, Flow issues it
   // and keeps it. A draft that is not ready has no send: mark it ready first.
-  const to = invoice?.sendsTo ?? null;
+  const to = invoice?.sendsTo ?? context.sendsTo ?? null;
   const ready = invoice?.view === 'ready';
   const nextNumber = `${context.organisations[0]?.invoicePrefix ?? ''}${String(context.organisations[0]?.nextInvoiceNumber ?? '').padStart(4, '0')}`;
   const emails = invoice?.sendMode?.mode === 'approve_and_email';
@@ -600,6 +607,28 @@ function draftView(invoice, ui, context, redraw) {
       }
     },
   }, 'Issue invoice') : null;
+  // Issue needs a client and a due date: until both are set it is greyed.
+  const syncIssue = () => {
+    if (!issueButton) return;
+    const missing = [contact ? null : 'a client', dueDate.value ? null : 'a due date'].filter(Boolean);
+    issueButton.disabled = missing.length > 0;
+    issueButton.title = missing.length ? `Choose ${missing.join(' and ')} first.` : '';
+  };
+  onContact = syncIssue;
+  clientInput.addEventListener('input', syncIssue);
+  dueDate.addEventListener('input', syncIssue);
+  dueDate.addEventListener('change', syncIssue);
+  syncIssue();
+
+  // A new invoice can start from a job that has no invoice yet: a quiet
+  // strip above the form says so. Flow drafts it the way the invoicing rules
+  // do (client, Reference, lines) and links it to the job. An invoice with
+  // no job is fine too.
+  const fromJob = isNew && context.canIssue ? h('section', { class: 'fx-fromjob' },
+    h('div', { class: 'fx-fromjob__text' },
+      h('span', { class: 'fx-strong' }, 'Billing a job?'),
+      h('span', { class: 'fx-dim' }, 'Flow fills in the details.')),
+    h('button', { class: 'fx-btn', type: 'button', onclick: () => pickJob(ui) }, 'Choose a job')) : null;
 
   // Mark ready: the draft is saved, then Flow checks it; one with a problem
   // stays a draft. Move to Drafts, on the Status card, undoes it.
@@ -648,6 +677,7 @@ function draftView(invoice, ui, context, redraw) {
         h('p', { class: 'fx-ph__sub' }, draftNote(to, invoice, ready))),
       h('div', { class: 'fx-ph__actions' }, saveButton, markReadyButton, isNew ? null : previewButton(ui, invoice.id, 'Shows the saved invoice.'), sendButton ?? issueButton)),
     problems,
+    fromJob,
     h('div', { class: 'fx-invoice__grid' },
       h('div', { class: 'fx-invoice__main' },
         h('section', { class: 'fx-card fx-invoice__head' },
@@ -871,3 +901,51 @@ function showSent(button) {
   button.textContent = 'Sent to Xero';
   button.title = 'Flow sent this invoice to Xero.';
 }
+
+// The jobs a new invoice can start from: no invoice yet, newest first.
+const PICKABLE = new Set(['in_work', 'ready', 'pending']);
+
+async function pickJob(ui) {
+  const { h, flow, toast, go } = ui;
+  let jobs;
+  try {
+    jobs = (await flow('/api/invoicing/jobs?limit=500')).jobs.filter((job) => PICKABLE.has(job.view) && !job.invoiceId);
+  } catch (error) {
+    toast(error.message, 'danger');
+    return;
+  }
+  const search = h('input', { class: 'fx-input', type: 'search', placeholder: 'Find a client or practitioner', 'aria-label': 'Find a job' });
+  const rows = jobs.map((job) => {
+    const label = h('label', { class: 'fx-pick__row' },
+      h('input', { type: 'radio', name: 'job', value: job.id, required: true }),
+      h('span', { class: 'fx-pick__main' },
+        h('span', { class: 'fx-strong' }, job.contactName ?? 'No client yet'),
+        h('span', { class: 'fx-dim' }, [job.practitioner, job.shippedOn ? showDate(job.shippedOn) : null].filter(Boolean).join(' · '))),
+      h('span', { class: 'fx-num fx-strong' }, job.totalCents == null ? '—' : formatCents(job.totalCents)));
+    label.dataset.find = `${job.contactName ?? ''} ${job.practitioner ?? ''}`.toLowerCase();
+    return label;
+  });
+  const list = h('div', { class: 'fx-pick', role: 'radiogroup', 'aria-label': 'Jobs' },
+    rows.length ? rows : h('p', { class: 'fx-dim' }, 'Every job has an invoice already.'));
+  search.addEventListener('input', () => {
+    const q = search.value.trim().toLowerCase();
+    for (const row of rows) row.hidden = Boolean(q) && !row.dataset.find.includes(q);
+  });
+  const picked = await ui.dialog({
+    title: 'New invoice from a job',
+    body: h('div', { class: 'fx-pick__body' },
+      h('p', { class: 'fx-dim' }, 'Flow fills in the client, Reference and lines from the invoice rules, and links the invoice to the job.'),
+      search, list),
+    confirm: 'Make draft',
+  });
+  const jobId = picked?.get('job');
+  if (!jobId) return;
+  try {
+    const { invoice } = await flow(`/api/invoicing/jobs/${jobId}/draft`, { method: 'POST', body: '{}' });
+    toast('Draft invoice made from the job.', 'success');
+    go(`/invoices/${invoice.id}`, { replace: true });
+  } catch (error) {
+    const reasons = error.details?.reasons;
+    toast(reasons?.length ? `Not drafted: ${reasons.join('; ')}.` : error.message, 'danger');
+  }
+}

package/server/ui/jobs.js

@@ -59,7 +59,7 @@ export async function renderJobs(main, ui) {
   main.classList.add('fx-main--wide');
   main.append(
     pageHeader('Jobs', { subtitle: 'Every job in the lab system, by its status there.' }),
-    h('div', { class: 'fx-toolbar fx-toolbar--plain' }, search, toggle),
+    h('div', { class: 'fx-toolbar fx-toolbar--plain fx-toolbar--end' }, search, toggle),
     host);
 
   const drawToggle = () => toggle.replaceChildren(...[['board', 'Board'], ['list', 'List']].map(([id, label]) => h('button', {
@@ -73,12 +73,14 @@ export async function renderJobs(main, ui) {
 
   function draw() {
     if (!state.jobs.length) {
+      main.classList.remove('fx-main--board');
       host.replaceChildren(h('div', { class: 'fx-panel fx-empty' },
         h('p', {}, 'No jobs yet. Jobs appear here once the lab system is connected under Integrations.'),
         h('a', { class: 'fx-btn', href: '/invoices/new', onclick: ui.go }, 'Make an invoice by hand')));
       return;
     }
     const shown = state.jobs.filter((job) => matches(job, state.q));
+    main.classList.toggle('fx-main--board', state.layout === 'board');
     host.replaceChildren(state.layout === 'list' ? list(shown) : board(shown));
   }
 

package/server/ui/monitoring.js

@@ -1,5 +1,6 @@
-// Errors and problem reports from the browser, to the installation's own
-// Sentry project (docs/SENTRY.md). Only while the Sentry integration is on:
+// Errors, problem reports and performance traces from the browser, to the
+// installation's own Sentry project (docs/SENTRY.md). Only while the Sentry
+// integration is on:
 // GET /api/monitoring says so and gives the project's public DSN. The SDK
 // comes from Sentry's CDN, pinned and checked against its integrity hash.
 // With the integration off, nothing loads and there is no "Report a problem".
@@ -26,6 +27,36 @@ export function tagNotify(event) {
   event.tags = { ...event.tags, notify: email ? 'yes' : 'no' };
 }
 
+// A path as a pattern: each id in it becomes ":id", so every invoice's page
+// is one name in a trace. The server names its requests the same way when no
+// route matched (server/core/tracing.js).
+const ID_SEGMENT = /^(\d+|[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}|[0-9a-z_-]*\d[0-9a-z_-]{15,})$/i;
+export function routePattern(path) {
+  const bare = String(path ?? '').replace(/[?#].*$/, '');
+  return bare.split('/').map((part) => (ID_SEGMENT.test(part) ? ':id' : part)).join('/');
+}
+
+// What a trace span keeps: timings, the route, the status. Never a query
+// string (a search can hold a name), a header, a cookie, an address or an
+// email. The person's Flow id stays, as on errors. Used here and by the
+// server (server/integrations/sentry/index.js).
+const DROPPED_ATTRIBUTE = /^(http\.(request|response)\.header\.|client\.|network\.(peer|local)\.|url\.(query|fragment)$|user\.(?!id$))/;
+export function scrubSpan(span) {
+  if (!span) return span;
+  // "GET /api/search?q=…" loses its query; a database span's SQL keeps its "?".
+  const request = /^((?:GET|POST|PUT|PATCH|DELETE) \S*?)[?#]\S*/;
+  if (typeof span.name === 'string') span.name = span.name.replace(request, '$1');
+  if (typeof span.description === 'string') span.description = span.description.replace(request, '$1');
+  const attributes = span.attributes ?? span.data;
+  if (attributes) {
+    for (const key of Object.keys(attributes)) {
+      if (DROPPED_ATTRIBUTE.test(key)) delete attributes[key];
+      else if (typeof attributes[key] === 'string' && /(^|\.)url(\.full)?$|^http\.url$/.test(key)) attributes[key] = attributes[key].replace(/[?#].*$/, '');
+    }
+  }
+  return span;
+}
+
 /** Resolves to a function that opens the "Report a problem" form, or null. */
 export async function startMonitoring({ flow, person }) {
   const config = await flow('/api/monitoring');
@@ -51,12 +82,23 @@ export async function startMonitoring({ flow, person }) {
     submitButtonLabel: 'Send report',
     successMessageText: 'Thank you. Your report is sent.',
   })] : [];
+  // Traces: page loads, moves between pages and each click's wait, with the
+  // calls to Flow's server joined to the server's own trace. Only when the
+  // installation set a share above 0 (SENTRY_TRACES_SAMPLE_RATE).
+  const tracesSampleRate = Number(config.tracesSampleRate) || 0;
+  if (tracesSampleRate > 0) {
+    integrations.push(Sentry.browserTracingIntegration({
+      beforeStartSpan: (options) => ({ ...options, name: routePattern(options.name) }),
+    }));
+  }
   Sentry.init({
     dsn: config.dsn,
     environment: config.environment,
     release: config.release ?? undefined,
     sendDefaultPii: false,
     integrations,
+    tracesSampleRate,
+    beforeSendSpan: scrubSpan,
   });
   Sentry.getClient()?.on('beforeSendFeedback', tagNotify);
   // Who reported or met the error, so the lab can follow up.

package/server/ui/routes.js

@@ -20,7 +20,7 @@ const themeDir = join(here, '..', 'theme');
 const logoDir = join(here, 'logos');
 const LOGO_FILES = new Set(['xero.svg', 'seazona.svg', 'sentry.svg']);
 const THEME_FILES = new Set(['themes.js', 'color-contrast.js', 'openclaw-palettes.js', 'font-families.js']);
-const UI_FILES = new Set(['flow.css', 'appearance.js', 'clerk-appearance.js', 'app.js', 'invoicing.js', 'invoice-notes.js', 'invoicing-settings.js', 'automations.js', 'invoice-rules.js', 'line-mappings.js', 'price-list.js', 'jobs.js', 'job-board.js', 'monitoring.js', 'search.js', 'alerts.js', 'flow-mark.svg']);
+const UI_FILES = new Set(['flow.css', 'appearance.js', 'clerk-appearance.js', 'app.js', 'invoicing.js', 'invoice-notes.js', 'invoicing-settings.js', 'automations.js', 'invoice-rules.js', 'line-mappings.js', 'price-list.js', 'custom-fields.js', 'jobs.js', 'job-board.js', 'monitoring.js', 'search.js', 'alerts.js', 'flow-mark.svg']);
 const MAX_AGE = '1h';
 
 // Send one named file from dir. Passing dir as root limits the dotfile check