@arcforgelabs/flow 2026.10.25 → 2026.10.27

package/server/ui/jobs.js

@@ -0,0 +1,172 @@
+// Jobs (/jobs): every billable job from the lab system, as a board with one
+// column per billing stage, or as a list. A job's stage follows from its
+// evidence (server/core/ledger.js ledgerView), so cards are not dragged: a
+// job moves when its evidence changes, or when someone drafts its invoice
+// here. Data comes from /api/invoicing/jobs (server/api/invoicing.js).
+
+import { formatCents } from '/assets/ui/invoicing.js';
+
+// Board columns, left to right. Held jobs sit with the jobs that need review.
+const STAGES = [
+  { id: 'work', label: 'In work', views: ['in_work'], tone: 'mute' },
+  { id: 'review', label: 'Needs review', views: ['review_required', 'held'], tone: 'warn' },
+  { id: 'pending', label: 'Checking', views: ['pending'], tone: 'mute' },
+  { id: 'ready', label: 'Ready to bill', views: ['ready'], tone: 'info' },
+  { id: 'drafted', label: 'Drafted', views: ['drafted'], tone: 'info' },
+  { id: 'invoiced', label: 'Invoiced', views: ['invoiced'], tone: 'success' },
+  { id: 'paid', label: 'Paid', views: ['paid'], tone: 'success' },
+];
+const STAGE_OF = Object.fromEntries(STAGES.flatMap((stage) => stage.views.map((view) => [view, stage])));
+const LAYOUT_KEY = 'flow_jobs_layout';
+
+const showDate = (iso) => (iso ? new Date(`${iso}T00:00:00`).toLocaleDateString('en-AU', { day: 'numeric', month: 'short' }) : '—');
+
+function readLayout() {
+  try { return localStorage.getItem(LAYOUT_KEY) === 'list' ? 'list' : 'board'; } catch { return 'board'; }
+}
+
+function saveLayout(layout) {
+  try { localStorage.setItem(LAYOUT_KEY, layout); } catch { /* the choice is only a convenience */ }
+}
+
+export async function renderJobs(main, ui) {
+  const { h, flow, pageHeader, notice } = ui;
+  const state = { layout: readLayout(), q: '', jobs: [], canDraft: false };
+  const toggle = h('div', { class: 'fx-seg', role: 'radiogroup', 'aria-label': 'Layout' });
+  const search = h('input', { class: 'fx-input fx-search', type: 'search', placeholder: 'Find a case, client or practitioner', 'aria-label': 'Find a job' });
+  const host = h('div', { class: 'fx-jobs' }, h('div', { class: 'fx-skeleton' }));
+  main.classList.add('fx-main--wide');
+  main.append(
+    pageHeader('Jobs', { subtitle: 'Every billable job from the lab system, by billing stage.' }),
+    h('div', { class: 'fx-toolbar fx-toolbar--plain' }, search, toggle),
+    host);
+
+  const drawToggle = () => toggle.replaceChildren(...[['board', 'Board'], ['list', 'List']].map(([id, label]) => h('button', {
+    type: 'button', role: 'radio', class: 'fx-seg__item', 'aria-checked': String(state.layout === id),
+    onclick: () => { state.layout = id; saveLayout(id); drawToggle(); draw(); },
+  }, label)));
+  drawToggle();
+  search.addEventListener('input', () => { state.q = search.value.trim().toLowerCase(); draw(); });
+
+  const visible = () => (state.q
+    ? state.jobs.filter((job) => [job.caseRef, job.sourceJobRef, job.contactName, job.practitioner, job.invoiceNumber]
+      .some((value) => value && String(value).toLowerCase().includes(state.q)))
+    : state.jobs);
+
+  function draw() {
+    if (!state.jobs.length) {
+      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;
+    }
+    host.replaceChildren(state.layout === 'list' ? list(visible()) : board(visible()));
+  }
+
+  async function load() {
+    try {
+      const [{ jobs }, context] = await Promise.all([flow('/api/invoicing/jobs'), flow('/api/invoicing/context')]);
+      state.jobs = jobs;
+      state.canDraft = context.canIssue;
+    } catch (error) {
+      host.replaceChildren(notice(error.message, 'danger'));
+      return;
+    }
+    draw();
+  }
+
+  function action(job) {
+    if (job.invoiceId) {
+      const href = `/invoices/${job.invoiceId}`;
+      return h('a', { class: 'fx-btn fx-btn--ghost fx-btn--sm', href, onclick: ui.go }, job.invoiceNumber ?? 'Open draft');
+    }
+    // Flow's own stage: a person marks a job ready to invoice, or an
+    // automation does (Settings, Automations).
+    if (job.view === 'in_work') {
+      return h('button', {
+        class: 'fx-btn fx-btn--sm', type: 'button',
+        onclick: async (event) => {
+          event.stopPropagation();
+          event.currentTarget.disabled = true;
+          try {
+            await flow(`/api/invoicing/jobs/${job.id}/ready`, { method: 'POST', body: JSON.stringify({ ready: true }) });
+            ui.toast('Marked ready to invoice.', 'success');
+          } catch (error) {
+            ui.toast(error.message, 'danger');
+          }
+          await load();
+        },
+      }, 'Mark ready');
+    }
+    if (job.view !== 'ready' || !state.canDraft) return null;
+    return h('button', {
+      class: 'fx-btn fx-btn--primary fx-btn--sm', type: 'button',
+      onclick: async (event) => {
+        event.stopPropagation();
+        const button = event.currentTarget;
+        button.disabled = true;
+        try {
+          const { invoice } = await flow(`/api/invoicing/jobs/${job.id}/draft`, { method: 'POST', body: '{}' });
+          ui.toast('Draft invoice made.', 'success');
+          ui.go(`/invoices/${invoice.id}`);
+        } catch (error) {
+          const reasons = error.details?.reasons;
+          ui.toast(reasons?.length ? `Not drafted: ${reasons.join('; ')}.` : error.message, 'danger');
+          button.disabled = false;
+          await load();
+        }
+      },
+    }, 'Draft invoice');
+  }
+
+  function card(job) {
+    const stage = STAGE_OF[job.view];
+    const reasons = ['review', 'pending'].includes(stage?.id) ? job.reasons?.join('; ') : '';
+    const why = reasons ? reasons[0].toUpperCase() + reasons.slice(1) + '.' : null;
+    return h('article', { class: `fx-job${stage?.id === 'review' ? ' fx-job--flag' : ''}` },
+      h('div', { class: 'fx-job__top' },
+        h('span', { class: 'fx-strong' }, job.caseRef ?? job.sourceJobRef),
+        h('span', { class: 'fx-job__amount' }, formatCents(job.totalCents))),
+      h('div', { class: 'fx-job__client' }, job.contactName ?? 'No client'),
+      h('div', { class: 'fx-job__meta' },
+        job.practitioner ? h('span', {}, job.practitioner) : null,
+        h('span', {}, `Shipped ${showDate(job.shippedOn)}`)),
+      why ? h('p', { class: 'fx-job__why' }, why) : null,
+      action(job));
+  }
+
+  function board(jobs) {
+    return h('div', { class: 'fx-board' }, STAGES.map((stage) => {
+      const inStage = jobs.filter((job) => stage.views.includes(job.view));
+      const total = inStage.reduce((sum, job) => sum + (job.totalCents ?? 0), 0);
+      return h('section', { class: 'fx-board__col', 'aria-label': stage.label },
+        h('header', { class: 'fx-board__head' },
+          h('span', { class: 'fx-board__dot', 'data-tone': stage.tone }),
+          h('span', { class: 'fx-strong' }, stage.label),
+          h('span', { class: 'fx-board__count' }, String(inStage.length)),
+          h('span', { class: 'fx-board__sum' }, inStage.length ? formatCents(total) : '')),
+        h('div', { class: 'fx-board__cards' }, inStage.length ? inStage.map(card) : h('p', { class: 'fx-board__none' }, 'None')));
+    }));
+  }
+
+  function list(jobs) {
+    if (!jobs.length) return h('div', { class: 'fx-panel' }, h('p', { class: 'fx-empty' }, 'No job matches that search.'));
+    return h('div', { class: 'fx-panel' }, h('table', { class: 'fx-table' },
+      h('thead', {}, h('tr', {},
+        h('th', {}, 'Case'), h('th', {}, 'Client'), h('th', {}, 'Practitioner'), h('th', {}, 'Shipped'),
+        h('th', {}, 'Stage'), h('th', { class: 'fx-num' }, 'Total'), h('th', { class: 'fx-table__actions' }, h('span', { class: 'fx-sr' }, 'Action')))),
+      h('tbody', {}, jobs.map((job) => {
+        const stage = STAGE_OF[job.view];
+        return h('tr', {},
+          h('td', { class: 'fx-strong' }, job.caseRef ?? job.sourceJobRef),
+          h('td', {}, job.contactName ?? '—'),
+          h('td', { class: 'fx-dim' }, job.practitioner ?? '—'),
+          h('td', { class: 'fx-dim' }, showDate(job.shippedOn)),
+          h('td', {}, h('span', { class: 'fx-status', 'data-tone': stage?.tone ?? 'mute', title: job.reasons?.join('; ') ?? '' }, stage?.label ?? job.view)),
+          h('td', { class: 'fx-num fx-strong' }, formatCents(job.totalCents)),
+          h('td', { class: 'fx-table__actions' }, action(job)));
+      }))));
+  }
+
+  await load();
+}

package/server/ui/logos/seazona.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img"><title>Seazona</title><path fill="#F04037" d="M6 3H26L22 13H21L18 24H22L23 23V27L22 29H8L9 25L11 19V13H7L6 9Z"/></svg>

package/server/ui/logos/sentry.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#362D59"><title>Sentry</title><path d="M13.91 2.505c-.873-1.448-2.972-1.448-3.844 0L6.904 7.92a15.478 15.478 0 0 1 8.53 12.811h-2.221A13.301 13.301 0 0 0 5.784 9.814l-2.926 5.06a7.65 7.65 0 0 1 4.435 5.848H2.194a.365.365 0 0 1-.298-.534l1.413-2.402a5.16 5.16 0 0 0-1.614-.913L.296 19.275a2.182 2.182 0 0 0 .812 2.999 2.24 2.24 0 0 0 1.086.288h6.983a9.322 9.322 0 0 0-3.845-8.318l1.11-1.922a11.47 11.47 0 0 1 4.95 10.24h5.915a17.242 17.242 0 0 0-7.885-15.28l2.244-3.845a.37.37 0 0 1 .504-.13c.255.14 9.75 16.708 9.928 16.9a.365.365 0 0 1-.327.543h-2.287c.029.612.029 1.223 0 1.831h2.297a2.206 2.206 0 0 0 1.922-3.31z"/></svg>

package/server/ui/logos/xero.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#13B5EA"><title>Xero</title><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm6.585 14.655c-1.485 0-2.69-1.206-2.69-2.689 0-1.485 1.207-2.691 2.69-2.691 1.485 0 2.69 1.207 2.69 2.691s-1.207 2.689-2.69 2.689zM7.53 14.644c-.099 0-.192-.041-.267-.116l-2.043-2.04-2.052 2.047c-.069.068-.16.108-.258.108-.202 0-.368-.166-.368-.368 0-.099.04-.191.111-.263l2.04-2.05-2.038-2.047c-.075-.069-.113-.162-.113-.261 0-.203.166-.366.368-.366.098 0 .188.037.258.105l2.055 2.048 2.048-2.045c.069-.071.162-.108.26-.108.211 0 .375.165.375.366 0 .098-.029.188-.104.258l-2.056 2.055 2.055 2.051c.068.069.104.16.104.258 0 .202-.165.368-.365.368h-.01zm8.017-4.591c-.796.101-.882.476-.882 1.404v2.787c0 .202-.165.366-.366.366-.203 0-.367-.165-.368-.366v-4.53c0-.204.16-.366.362-.366.166 0 .316.125.346.289.27-.209.6-.317.93-.317h.105c.195 0 .359.165.359.368 0 .201-.164.352-.375.359 0 0-.09 0-.164.008l.053-.002zm-3.091 2.205H8.625c0 .019.003.037.006.057.02.105.045.211.083.31.194.531.765 1.275 1.829 1.29.33-.003.631-.086.9-.229.21-.12.391-.271.525-.428.045-.058.09-.112.12-.168.18-.229.405-.186.54-.083.164.135.18.391.045.57l-.016.016c-.21.27-.435.495-.689.66-.255.164-.525.284-.811.345-.33.09-.645.104-.975.06-1.095-.135-2.01-.93-2.28-2.01-.06-.21-.09-.42-.09-.645 0-.855.421-1.695 1.125-2.205.885-.615 2.085-.66 3-.075.63.405 1.035 1.021 1.185 1.771.075.419-.21.794-.734.81l.068-.046zm6.129-2.223c-1.064 0-1.931.865-1.931 1.931 0 1.064.866 1.931 1.931 1.931s1.931-.867 1.931-1.931c0-1.065-.866-1.933-1.931-1.933v.002zm0 2.595c-.367 0-.666-.297-.666-.666 0-.367.3-.665.666-.665.367 0 .667.299.667.665 0 .369-.3.667-.667.666zm-8.04-2.603c-.91 0-1.672.623-1.886 1.466v.03h3.776c-.203-.855-.973-1.494-1.891-1.494v-.002z"/></svg>

package/server/ui/monitoring.js

@@ -0,0 +1,53 @@
+// Errors and problem reports 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 the report button stays hidden.
+
+function loadScript({ src, integrity }) {
+  return new Promise((resolve, reject) => {
+    const script = document.createElement('script');
+    script.src = src;
+    script.integrity = integrity;
+    script.crossOrigin = 'anonymous';
+    script.onload = resolve;
+    script.onerror = () => reject(new Error('The Sentry SDK could not load.'));
+    document.head.append(script);
+  });
+}
+
+export async function startMonitoring({ flow, person, button }) {
+  const config = await flow('/api/monitoring');
+  if (!config.on || config.service !== 'sentry') return;
+  await loadScript(config.script);
+  const Sentry = window.Sentry;
+  const integrations = config.feedback ? [Sentry.feedbackIntegration({
+    autoInject: false,
+    // The form's colours and font come from flow.css (#sentry-feedback), so
+    // it follows each person's theme and mode, even when they change it.
+    colorScheme: 'light',
+    showBranding: false,
+    // Flow already knows who is signed in (setUser below).
+    showName: false,
+    enableScreenshot: true,
+    triggerLabel: 'Report a problem',
+    formTitle: 'Report a problem',
+    messageLabel: 'What went wrong?',
+    messagePlaceholder: 'What you did, what you expected, and what happened.',
+    submitButtonLabel: 'Send report',
+    successMessageText: 'Thank you. Your report is sent.',
+  })] : [];
+  Sentry.init({
+    dsn: config.dsn,
+    environment: config.environment,
+    release: config.release ?? undefined,
+    sendDefaultPii: false,
+    integrations,
+  });
+  // Who reported or met the error, so the lab can follow up.
+  Sentry.setUser({ id: person.id, email: person.email });
+  if (config.feedback) {
+    Sentry.getFeedback()?.attachTo(button);
+    button.hidden = false;
+  }
+}

package/server/ui/routes.js

@@ -17,8 +17,10 @@ import { themeStylesheet } from '../theme/themes.js';
 const require = createRequire(import.meta.url);
 const here = dirname(fileURLToPath(import.meta.url));
 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', 'flow-mark.svg']);
+const UI_FILES = new Set(['flow.css', 'appearance.js', 'clerk-appearance.js', 'app.js', 'invoicing.js', 'invoicing-settings.js', 'automations.js', 'invoice-rules.js', 'jobs.js', 'monitoring.js', 'flow-mark.svg']);
 const MAX_AGE = '1h';
 
 // Send one named file from dir. Passing dir as root limits the dotfile check
@@ -44,6 +46,8 @@ export function createUiAssetsRouter({ rateLimitPerMinute = 600 } = {}) {
   };
   router.get('/assets/theme/:file', sendFrom(themeDir, THEME_FILES));
   router.get('/assets/ui/:file', sendFrom(here, UI_FILES));
+  // Each integration's logo, the maker's own mark (Integrations).
+  router.get('/assets/ui/logos/:file', sendFrom(logoDir, LOGO_FILES));
 
   for (const name of FONT_PACKAGES) {
     const dir = dirname(require.resolve(`@fontsource-variable/${name}/LICENSE`));