@arcforgelabs/flow 2026.10.30 → 2026.10.32

package/server/ui/clerk-appearance.js

@@ -11,6 +11,9 @@ const gearIcon = {
   '&& > *': { visibility: 'hidden' },
 };
 
+// A small down chevron after the name, as in other apps' account buttons.
+const CHEVRON = `url("data:image/svg+xml,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5L6 7.5L9 4.5"/></svg>')}")`;
+
 // Matches the narrow-screen rule in flow.css, where the sidebar becomes a bar.
 const NARROW = '@media (max-width: 820px)';
 
@@ -88,24 +91,54 @@ export function flowClerkAppearance({ embedded = false, publicSignUp = false } =
       badge: { '&&': { color: dim, background: `color-mix(in srgb, ${text} 5%, transparent)`, borderColor: line } },
       formButtonPrimary: { boxShadow: 'none', textTransform: 'none', fontWeight: 650 },
       socialButtonsBlockButton: controlEdge,
-      // The account button in the sidebar foot is a chip: photo or initial,
-      // then the name (Clerk shows the email when there is no name), clipped
-      // with an ellipsis to fit. The top bar on narrow screens has no room for
-      // the name, so there it is the photo or initial alone.
+      // The account button in the sidebar foot: photo or initial, then the
+      // name (Clerk shows the email when there is no name), clipped with an
+      // ellipsis to fit, then a small chevron. At rest it is plain; on hover,
+      // keyboard focus or while its menu is open it is an outlined pill. The
+      // top bar on narrow screens has no room for the name, so there it is the
+      // photo or initial alone.
       userButtonTrigger: {
         '&&': {
-          width: '100%', minWidth: 0, justifyContent: 'flex-start', padding: '4px 10px 4px 4px', borderRadius: token('--t-radius-lg', '10px'), background: paper, boxShadow: `inset 0 0 0 1px ${line}`,
-          '&:hover': { background: `color-mix(in srgb, ${text} 6%, ${paper})` },
-          [NARROW]: { width: 'auto', padding: 0, borderRadius: '50%', background: 'transparent', boxShadow: 'none', '&:hover': { background: 'transparent' } },
+          width: 'auto', maxWidth: '100%', minWidth: 0, justifyContent: 'flex-start', padding: '4px 8px 4px 4px',
+          borderRadius: token('--t-radius-lg', '10px'), background: 'transparent', boxShadow: 'none',
+          '&:hover, &:focus-visible, &[aria-expanded="true"]': { background: `color-mix(in srgb, ${text} 5%, transparent)`, boxShadow: `inset 0 0 0 1px ${line}` },
+          '&:focus-visible': { boxShadow: `inset 0 0 0 1px ${line}, ${focus}` },
+          [NARROW]: { padding: 0, borderRadius: '50%', '&:hover, &[aria-expanded="true"]': { background: 'transparent', boxShadow: 'none' } },
+        },
+      },
+      userButtonBox: {
+        flexDirection: 'row-reverse', justifyContent: 'flex-end', minWidth: 0, gap: '6px',
+        // The box lays out right to left, so ::before lands after the name.
+        '&::before': {
+          content: '""', flex: 'none', width: '10px', height: '10px', background: dim,
+          mask: `${CHEVRON} center / contain no-repeat`, WebkitMask: `${CHEVRON} center / contain no-repeat`,
         },
+        [NARROW]: { '&::before': { display: 'none' } },
       },
-      userButtonBox: { flexDirection: 'row-reverse', justifyContent: 'flex-end', minWidth: 0, gap: '8px' },
       userButtonOuterIdentifier: {
         minWidth: 0, paddingInlineStart: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
         color: token('--t-strong', text), fontSize: '14px', fontWeight: 600,
         [NARROW]: { display: 'none' },
       },
-      userButtonPopoverCard: { border: `1px solid ${line}`, boxShadow: shadow },
+      // The account menu is as wide as its rows, between 220px and 280px, with
+      // compact rows. A long name or email ends with an ellipsis and does not
+      // make the menu wider.
+      userButtonPopoverCard: {
+        '&&': { width: 'max-content', minWidth: '220px', maxWidth: 'min(280px, calc(100vw - 16px))', border: `1px solid ${line}`, boxShadow: shadow },
+      },
+      userPreview__userButton: { '&&': { padding: '10px 12px', gap: '10px' } },
+      userPreviewAvatarContainer__userButton: { '&&, && .cl-userPreviewAvatarBox': { width: '28px', height: '28px' } },
+      userPreviewTextContainer__userButton: { '&&': { minWidth: 0, overflow: 'hidden' } },
+      userPreviewMainIdentifier__userButton: { '&&': { minWidth: 0, fontSize: '13px' } },
+      userPreviewMainIdentifierText__userButton: { '&&': { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } },
+      userPreviewSecondaryIdentifier__userButton: {
+        '&&': { display: 'block', minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontSize: '12px', color: dim },
+      },
+      userButtonPopoverActionButton: { '&&': { padding: '8px 12px', gap: '10px', fontSize: '13px', color: text } },
+      userButtonPopoverActionButtonIconBox: { '&&': { flex: '0 0 28px', width: '28px' } },
+      userButtonPopoverCustomItemButton: { '&&': { padding: '8px 12px', gap: '10px', fontSize: '13px', color: text } },
+      userButtonPopoverCustomItemButtonIconBox: { '&&': { flex: '0 0 28px', width: '28px' } },
+      userButtonPopoverFooter: { '&&': { minWidth: 0 } },
       userButtonPopoverActionButtonIcon__manageAccount: gearIcon,
       footer: embedded ? { display: 'none' } : undefined,
     },

package/server/ui/flow.css

@@ -113,10 +113,17 @@ body:is([data-state="off"], [data-state="error"], [data-state="no-access"]) .fx-
   display: flex; flex-direction: column; gap: 4px; flex: none;
   width: 232px; height: 100vh; padding: 16px 12px 12px;
   background: var(--t-s1); border-right: 1px solid var(--fx-line);
+  transition: width .18s ease;
 }
 .fx-side__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 0 14px 8px; }
 .fx-side__head .fx-brand { min-width: 0; font-size: 19px; }
 .fx-side__head .fx-mark { width: 26px; height: 26px; }
+/* The sidebar button. Open, it shows the sidebar icon beside the brand.
+   Folded or narrow, the brand is hidden and the button shows the logo, which
+   turns into the sidebar icon on hover or focus (and while the drawer is
+   open), so the two never sit side by side. */
+.fx-toggle__mark { display: none; }
+.fx-toggle__mark .fx-mark { display: block; }
 .fx-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; }
 .fx-nav__group { padding: 16px 10px 6px; 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-nav__group:first-child { padding-top: 4px; }
@@ -132,7 +139,7 @@ body:is([data-state="off"], [data-state="error"], [data-state="no-access"]) .fx-
 .fx-nav__count { margin-left: auto; color: var(--t-dim); font-size: 12px; font-weight: 700; }
 .fx-ico { display: inline-flex; flex: none; }
 .fx-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
-.fx-side__end { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 6px 0; border-top: 1px solid var(--fx-line); }
+.fx-side__end { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 12px 0 0; border-top: 1px solid var(--fx-line); }
 .fx-side__user { display: flex; min-width: 32px; min-height: 32px; align-items: center; }
 /* Clerk replaces the mount's classes with its root box's, so this uses the id. */
 #user-button { flex: 1 1 auto; min-width: 0; }
@@ -141,14 +148,14 @@ body:is([data-state="off"], [data-state="error"], [data-state="no-access"]) .fx-
 @media (min-width: 821px) {
   .fx-shell[data-folded] .fx-side { width: 64px; padding-inline: 10px; }
   .fx-shell[data-folded] .fx-side__head { flex-direction: column; gap: 10px; padding: 0 0 14px; }
-  .fx-shell[data-folded] .fx-brand span { display: none; }
+  .fx-shell[data-folded] .fx-side__head .fx-brand { display: none; }
   .fx-shell[data-folded] .fx-nav__group { height: 1px; margin: 10px 6px; padding: 0; overflow: hidden; background: var(--fx-line); color: transparent; }
   .fx-shell[data-folded] :is(.fx-nav a, .fx-nav__report) { justify-content: center; padding: 9px 0; }
   .fx-shell[data-folded] .fx-nav__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
   .fx-shell[data-folded] .fx-side__end { flex-direction: column; padding: 12px 0 0; }
   .fx-shell[data-folded] #user-button { flex: none; }
   .fx-shell[data-folded] #user-button .cl-userButtonTrigger { width: auto; padding: 0; border-radius: 50%; background: transparent; box-shadow: none; }
-  .fx-shell[data-folded] #user-button .cl-userButtonOuterIdentifier { display: none; }
+  .fx-shell[data-folded] #user-button .cl-userButtonOuterIdentifier, .fx-shell[data-folded] #user-button .cl-userButtonBox::before { display: none; }
 }
 .fx-main { flex: 1; min-width: 0; max-width: 1180px; margin: 0 auto; padding: 32px clamp(16px, 4vw, 48px) 64px; display: grid; gap: 20px; align-content: start; }
 .fx-main:focus { outline: none; box-shadow: none; }
@@ -269,6 +276,7 @@ body:is([data-state="off"], [data-state="error"], [data-state="no-access"]) .fx-
 .fx-int-hero__actions { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
 .fx-int-page__grid { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 32px; align-items: start; }
 .fx-int-page__main { display: grid; gap: 28px; }
+.fx-int-page__main > .fx-alerts { margin: 0; }
 .fx-int-section { display: grid; gap: 14px; padding-top: 20px; border-top: 1px solid var(--fx-line); }
 .fx-int-section__title { color: var(--t-strong); font: 650 17px/1.3 var(--t-body); }
 .fx-int-section .fx-btn { justify-self: start; }
@@ -328,6 +336,25 @@ a.fx-strong:hover { text-decoration: underline; }
 /* Invoices: the Send all ready bar above the Ready list. */
 .fx-sendbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; padding: 12px 16px; border: 1px solid var(--fx-line); border-radius: 8px; background: var(--t-paper); margin-top: 12px; }
 .fx-sendbar[hidden] { display: none; }
+
+/* Quiet alerts (server/ui/alerts.js): one slim line under the page header,
+   only while something on the page needs this person. */
+.fx-alerts { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 6px 6px 6px 14px; border: 1px solid var(--fx-line); border-left: 3px solid var(--t-warn); border-radius: var(--t-radius); background: var(--t-paper); font-size: 14px; }
+.fx-alerts[hidden] { display: none; }
+.fx-alerts[data-tone="danger"] { border-left-color: var(--t-danger); }
+.fx-alerts__text { flex: 1; min-width: 0; margin: 0; color: var(--t-strong); }
+.fx-alerts__money { color: var(--t-dim); }
+.fx-alerts__action { flex: none; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--t-strong); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
+.fx-alerts__more { flex: none; font-size: 12.5px; color: var(--t-dim); white-space: nowrap; }
+.fx-alerts__close { flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--t-radius); background: none; color: var(--t-dim); cursor: pointer; }
+.fx-alerts__close:hover { background: var(--fx-hover); color: var(--t-strong); }
+.fx-alerts__close svg { width: 14px; height: 14px; }
+.fx-alerts__action:focus-visible, .fx-alerts__close:focus-visible { outline: 2px solid var(--t-ring); outline-offset: 2px; }
+@media (max-width: 560px) {
+  .fx-alerts { flex-wrap: wrap; }
+  .fx-alerts__text { flex-basis: calc(100% - 52px); }
+  .fx-alerts__action, .fx-alerts__more { order: 2; }
+}
 .fx-sendbar p { margin: 0; }
 .fx-problem { color: var(--t-danger); }
 .fx-sendbar__actions { display: flex; flex-wrap: wrap; gap: 8px; }
@@ -587,6 +614,7 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-setting__text { display: grid; gap: 3px; min-width: 0; }
 .fx-setting__name { color: var(--t-strong); font: 500 14.5px/1.35 var(--t-body); }
 .fx-setting__hint { margin: 0; color: var(--t-dim); font-size: 13px; line-height: 1.45; }
+.fx-setting[data-tone="danger"] .fx-setting__hint { color: var(--t-danger); }
 .fx-setting__control { display: flex; justify-content: flex-end; min-width: 0; }
 .fx-setting__control > .fx-input, .fx-setting__control > .fx-select, .fx-setting__stack { width: 320px; max-width: 100%; }
 .fx-setting__control .fx-swatches { flex-wrap: nowrap; }
@@ -638,19 +666,41 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
   .fx-shell { flex-direction: column; }
   .fx-side { flex-direction: row; align-items: center; width: auto; height: 60px; padding: 0 12px; border-right: 0; border-bottom: 1px solid var(--fx-line); }
   .fx-side__head { flex-direction: row-reverse; gap: 6px; padding: 0; }
-  .fx-side__head .fx-brand span { display: none; }
-  /* The menu opens as a panel below the bar. */
+  .fx-side__head .fx-brand { display: none; }
+  /* The menu is a drawer: it slides in from the left, below the bar, over
+     a dimmed page. A click on the dimmed page closes it (app.js). */
   .fx-nav {
-    display: none; position: absolute; top: 60px; left: 0; right: 0;
-    max-height: calc(100vh - 60px); padding: 4px 12px 12px;
-    background: var(--t-s1); border-bottom: 1px solid var(--fx-line); box-shadow: var(--t-shadow);
+    position: fixed; top: 60px; bottom: 0; left: 0; z-index: 2;
+    width: min(280px, 85vw); padding: 8px 12px 12px;
+    background: var(--t-s1); border-right: 1px solid var(--fx-line); box-shadow: var(--t-shadow);
+    transform: translateX(-100%); visibility: hidden;
+    transition: transform .2s ease, visibility .2s;
+  }
+  .fx-shell[data-menu-open] .fx-nav { transform: none; visibility: visible; }
+  .fx-shell[data-menu-open]::after {
+    content: ""; position: fixed; inset: 60px 0 0; z-index: 9;
+    background: rgba(0, 0, 0, .32);
   }
-  .fx-shell[data-menu-open] .fx-nav { display: flex; }
   .fx-nav__report { margin-top: 8px; }
   .fx-side__end { margin-left: auto; padding: 0; border-top: 0; }
   #user-button { flex: none; }
 }
 
+/* Collapsed (folded on wide screens, or narrow): logo at rest, sidebar icon
+   on hover, focus or while open. */
+@media (min-width: 821px) {
+  .fx-shell[data-folded] .fx-toggle__mark { display: block; }
+  .fx-shell[data-folded] .fx-toggle__icon { display: none; }
+  .fx-shell[data-folded] #menu-toggle:is(:hover, :focus-visible) .fx-toggle__mark { display: none; }
+  .fx-shell[data-folded] #menu-toggle:is(:hover, :focus-visible) .fx-toggle__icon { display: inline-flex; }
+}
+@media (max-width: 820px) {
+  .fx-toggle__mark { display: block; }
+  .fx-toggle__icon { display: none; }
+  #menu-toggle:is(:hover, :focus-visible, [aria-expanded="true"]) .fx-toggle__mark { display: none; }
+  #menu-toggle:is(:hover, :focus-visible, [aria-expanded="true"]) .fx-toggle__icon { display: inline-flex; }
+}
+
 /* ── Phones ─────────────────────────────────────────────────────────────── */
 @media (max-width: 640px) {
   .fx-main { padding-top: 20px; }
@@ -688,6 +738,14 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-set__control .fx-input[type="number"] { width: 96px; }
 .fx-set__control .fx-select { min-width: 220px; }
 .fx-set + .fx-set { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--fx-line); }
+/* Price list (price-list.js): a code's price and its systems' chips. */
+.fx-price__hint { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
+.fx-price__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
+.fx-price__head .fx-search { margin: 0; }
+@media (max-width: 560px) { .fx-price__head .fx-search { width: 100%; } }
+.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; } }
 /* 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; }
@@ -749,3 +807,14 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
   color-scheme: light;
 }
 [data-mode="dark"] #sentry-feedback { --interactive-filter: brightness(150%); color-scheme: dark; }
+
+/* The bar above one invoice: Back, its place in the list, previous and next.
+   Quiet: no frame, dim text, round icon buttons. */
+.fx-pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; min-height: 32px; }
+.fx-pager__back { justify-self: start; background: none; border: 0; padding: 4px 0; color: var(--t-dim); font: inherit; font-size: 13.5px; cursor: pointer; transition: color 120ms var(--fx-ease); }
+.fx-pager__back:hover, .fx-pager__back:focus-visible { color: var(--t-strong); }
+.fx-pager__count { grid-column: 2; color: var(--t-dim); font-size: 13px; font-variant-numeric: tabular-nums; }
+.fx-pager__steps { grid-column: 3; justify-self: end; display: flex; gap: 4px; }
+.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; }

package/server/ui/invoice-notes.js

@@ -0,0 +1,26 @@
+// The notes on the Invoices page and on one invoice (invoicing.js). One fact
+// per sentence; they follow the accounting integration's settings. Kept apart
+// so tests can load them without a browser.
+
+// What happens to a ready invoice in the accounting system, one fact per
+// sentence. It follows the integration's settings: its connection, whether it
+// takes writes, and the send mode on its page. `what` names the invoices:
+// "each invoice" on the list, "this invoice" on one invoice.
+export function sendModeNote(to, sendMode, what = 'each invoice') {
+  if (!to) return 'No accounting system is on. Flow keeps each invoice here only.';
+  if (sendMode && !sendMode.connected) return `${to} is not connected. Connect it in Integrations before you send.`;
+  if (sendMode && !sendMode.writesAllowed) return `${to} does not take invoices from Flow yet. Turn this on in Integrations, ${to}.`;
+  const text = sendMode?.mode === 'approve_and_email'
+    ? [`Flow sends ${what} to ${to} as approved.`, `${to} emails it to the customer at once.`]
+    : [`Flow sends ${what} to ${to} as a draft.`, `You approve and send it in ${to}.`];
+  const others = sendMode?.otherCustomers ?? 0;
+  if (others) text.push(`${others} ${others === 1 ? 'customer has' : 'customers have'} a different setting.`);
+  return text.join(' ');
+}
+
+// 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}.`;
+  return sendModeNote(to, invoice?.sendMode, 'this invoice');
+}

package/server/ui/invoicing-settings.js

@@ -23,7 +23,7 @@ const SEND_MODES = [
 export async function renderInvoicingSettings(main, ui) {
   const { h, flow, toast, notice, pageHeader, me } = ui;
   const host = h('div', { class: 'fx-card', style: { padding: '8px 20px 16px' } }, h('div', { class: 'fx-skeleton' }));
-  main.append(pageHeader('Invoicing', { subtitle: 'How Flow drafts invoices. No integration needed.' }), host);
+  main.append(pageHeader('Invoice rules', { subtitle: 'The rules Flow uses to draft each invoice.' }), host);
   let body;
   try {
     body = await flow('/api/invoicing/settings');
@@ -66,7 +66,9 @@ export async function renderInvoicingSettings(main, ui) {
   host.replaceChildren(...[
     disabled ? notice('Only an owner or admin can change these.', 'info') : null,
     section('Drafts',
-      row('Payment terms', 'Days from invoice to due date.', days('paymentTermsDays', 'Payment terms in days'))),
+      row('Payment terms', 'Days from invoice to due date.', days('paymentTermsDays', 'Payment terms in days')),
+      row('Reference', 'The Reference on each invoice. Use {practitioner} and {patient}.',
+        box('referenceTemplate', 'Reference rule', { placeholder: '{practitioner} - {patient}' }))),
     lineMappingSection(ui),
     automationSection(ui, 'invoicing', 'Automations'),
     rulesSection(ui),