@arcforgelabs/flow 2026.10.42 → 2026.10.43

package/server/ui/flow.css

@@ -170,15 +170,30 @@ body:is([data-state="off"], [data-state="error"], [data-state="no-access"]) .fx-
 .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; }
 
-/* Page header: title and one line, then the actions, primary last. */
-.fx-ph { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
-.fx-ph__text { display: grid; gap: 6px; max-width: 64ch; }
+/* Page header: the title only (no line under it), then the actions,
+   primary last. One height on every page, with or without a button. */
+.fx-ph { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 36px; }
+.fx-ph__text { display: flex; align-items: center; gap: 10px; min-width: 0; }
 .fx-title {
   color: var(--t-strong);
-  font: var(--t-display-weight) 28px/1.15 var(--t-display); letter-spacing: -0.015em;
+  font: var(--t-display-weight) 24px/1.15 var(--t-display); letter-spacing: -0.015em;
 }
+.fx-ph__count { color: var(--t-dim); font-size: 14px; font-variant-numeric: tabular-nums; }
+/* A record's facts beside its title (Reconcile: client · date · total). */
 .fx-ph__sub { color: var(--t-dim); }
-.fx-ph__actions { display: flex; gap: 8px; }
+/* A docs link as a "?" icon beside a title (helpLink in app.js). */
+.fx-help { display: inline-flex; vertical-align: middle; margin-left: 2px; padding: 4px; border-radius: var(--t-radius); color: var(--t-dim); }
+.fx-help:hover, .fx-help:focus-visible { background: var(--fx-hover); color: var(--t-strong); }
+.fx-help .fx-lucide { width: 16px; height: 16px; }
+.fx-ph__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+
+/* The tip an icon-only control shows on hover and keyboard focus (tip.js). */
+.fx-tip {
+  position: fixed; top: 0; left: 0; z-index: 1000; max-width: 260px; padding: 4px 8px;
+  border: 1px solid var(--fx-line); border-radius: var(--t-radius); background: var(--t-paper); color: var(--t-strong);
+  font: 500 12px/1.3 var(--t-body); pointer-events: none; white-space: nowrap;
+  box-shadow: var(--t-shadow), 0 4px 12px rgba(0, 0, 0, .12);
+}
 
 /* ── Notices, pills, tags, toasts ──────────────────────────────────────── */
 .fx-notice {
@@ -287,10 +302,12 @@ a.fx-link:hover, a.fx-link:focus-visible { border-color: var(--t-strong); }
 .fx-chip { border: 1px solid var(--fx-line); border-radius: 999px; background: var(--t-paper); color: var(--t-text); }
 .fx-int-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
 .fx-int-bar .fx-search { margin: 0; }
+.fx-int-bar .fx-row { flex: 1 1 auto; flex-wrap: nowrap; justify-content: flex-end; min-width: 0; }
+.fx-int-bar .fx-row .fx-search { flex: 0 1 320px; width: auto; min-width: 0; }
+.fx-int-bar .fx-row .fx-select { flex: none; }
 .fx-int-sections { display: grid; gap: 32px; }
 .fx-int-section-list { display: grid; gap: 16px; }
 .fx-int-heading { color: var(--t-strong); font: 600 19px/1.3 var(--t-body); }
-.fx-int-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
 .fx-int-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
 .fx-int-card {
   display: grid; grid-template-rows: auto 1fr auto; gap: 14px; padding: 18px;
@@ -298,6 +315,7 @@ a.fx-link:hover, a.fx-link:focus-visible { border-color: var(--t-strong); }
   color: var(--t-text); text-decoration: none;
   transition: transform 140ms var(--fx-ease), box-shadow 140ms var(--fx-ease), border-color 140ms var(--fx-ease);
 }
+.fx-int-card--bare { grid-template-rows: auto auto; }
 .fx-int-card:hover, .fx-int-card:focus-visible { transform: translateY(-2px); border-color: var(--t-brd-hi, var(--t-control)); box-shadow: 0 8px 24px rgba(0, 0, 0, .1); }
 .fx-int-card__head { display: flex; align-items: center; gap: 12px; }
 .fx-int-card__head h3 { flex: 1; color: var(--t-strong); font: 650 16px/1.25 var(--t-body); }
@@ -312,6 +330,7 @@ a.fx-link:hover, a.fx-link:focus-visible { border-color: var(--t-strong); }
   display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 10px;
   background: #fff; box-shadow: inset 0 0 0 1px var(--fx-line);
 }
+.fx-logo--icon { background: var(--t-accent-bg); color: var(--t-accent); box-shadow: none; }
 .fx-logo img { width: 28px; height: 28px; object-fit: contain; }
 .fx-logo--lg { width: 52px; height: 52px; }
 .fx-logo--lg img { width: 34px; height: 34px; }
@@ -473,7 +492,8 @@ a.fx-strong:hover { text-decoration: underline; }
 }
 
 /* ── Jobs board ─────────────────────────────────────────────────────────── */
-.fx-main--wide { max-width: none; }
+/* Every page shares .fx-main's width; only the board's lanes use the whole window. */
+.fx-main--board { max-width: none; }
 .fx-main > * { min-width: 0; }
 .fx-toolbar--plain { border-bottom: 0; align-items: center; }
 .fx-toolbar--plain .fx-search { margin-bottom: 0; }
@@ -674,7 +694,14 @@ th:hover .fx-th-sort, .fx-th-sort:focus-visible, .fx-th-sort--on { opacity: 1; }
    the activity at the side. It stacks on a phone. */
 .fx-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: var(--t-dim); overflow-wrap: anywhere; }
 .fx-dialog.fx-task { width: min(1040px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; }
-.fx-task__grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; }
+.fx-task__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
+/* No sidecar: the main area takes the room. Review is wider for its table. */
+.fx-task__grid:has(> .fx-sidecar[hidden]) { grid-template-columns: minmax(0, 1fr); }
+.fx-task__grid:has(> .fx-sidecar [data-tab="review"][aria-selected="true"]) { grid-template-columns: minmax(0, 1fr) 400px; }
+.fx-task__side { background: var(--t-s1); }
+.fx-task__tools { display: flex; align-items: center; gap: 4px; }
+.fx-task__tools .fx-lucide { width: 16px; height: 16px; }
+.fx-task__tools [aria-pressed="true"] { background: var(--fx-hover); color: var(--t-strong); }
 .fx-task__main { min-width: 0; padding: 20px 28px 28px; }
 .fx-task__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
 .fx-task__crumb { display: flex; flex-wrap: wrap; gap: 6px; color: var(--t-dim); font-size: 12.5px; }
@@ -689,9 +716,14 @@ th:hover .fx-th-sort, .fx-th-sort:focus-visible, .fx-th-sort--on { opacity: 1; }
 .fx-task__link { color: var(--t-accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--t-accent) 40%, transparent); }
 .fx-task__link:hover { border-bottom-color: currentColor; }
 .fx-task__fix { scroll-margin-top: 16px; margin-top: 22px; border: 1px solid var(--t-warn-brd, var(--t-warn)); border-radius: var(--t-radius); background: var(--t-warn-bg); }
-.fx-task__fix h3, .fx-task__lines h3, .fx-task__activity h3 { margin: 0; color: var(--t-dim); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
+.fx-task__fix h3, .fx-task__lines h3 { margin: 0; color: var(--t-dim); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
 .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 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 9px 14px; border-top: 1px solid var(--fx-line-soft); color: var(--t-strong); font-size: 13.5px; }
+.fx-task__fixrow > strong { font-weight: 600; }
+.fx-task__fixrow > span { flex: 1 1 160px; color: var(--t-text); }
+.fx-task__linkbtn { all: unset; cursor: pointer; color: var(--t-accent); border-bottom: 1px solid color-mix(in srgb, var(--t-accent) 40%, transparent); }
+.fx-task__linkbtn:hover { border-bottom-color: currentColor; }
+.fx-task__linkbtn:focus-visible { box-shadow: var(--fx-focus); }
 .fx-task__fixrow:first-of-type { border-top: 0; }
 .fx-task__choose { scroll-margin-top: 16px; margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--t-warn-brd, var(--t-warn)); border-radius: var(--t-radius); background: var(--t-warn-bg); color: var(--t-strong); font-size: 13.5px; }
 .fx-task__choose > svg { flex: none; width: 20px; height: 20px; color: var(--t-warn); }
@@ -758,8 +790,9 @@ th:hover .fx-th-sort, .fx-th-sort:focus-visible, .fx-th-sort--on { opacity: 1; }
 .fx-task__miss { color: var(--t-warn); }
 .fx-task__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
 .fx-task__actions:empty { display: none; }
-.fx-task__activity { min-width: 0; padding: 24px 20px; border-left: 1px solid var(--fx-line); background: var(--t-s1); }
-.fx-task__activity h3 { margin-bottom: 14px; }
+.fx-task__activity { min-width: 0; }
+/* Review in the sidecar: the change banner, without its own box. */
+.fx-task__review .fx-change { margin: 0; padding: 0; border: 0; background: none; }
 .fx-task__activity ol { margin: 0; padding: 0; list-style: none; }
 .fx-task__activity li { position: relative; padding: 0 0 16px 18px; color: var(--t-text); font-size: 13px; }
 .fx-task__activity li::before { content: ""; position: absolute; left: 3px; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--t-mute); }
@@ -771,7 +804,8 @@ th:hover .fx-th-sort, .fx-th-sort:focus-visible, .fx-th-sort--on { opacity: 1; }
   .fx-task__grid { grid-template-columns: minmax(0, 1fr); }
   .fx-task__main { padding: 16px; }
   .fx-task__fields { grid-template-columns: minmax(0, 1fr); }
-  .fx-task__activity { padding: 16px; border-top: 1px solid var(--fx-line); border-left: 0; }
+  .fx-task__grid:has(> .fx-sidecar [data-tab="review"][aria-selected="true"]) { grid-template-columns: minmax(0, 1fr); }
+  .fx-task__side { border-top: 1px solid var(--fx-line); border-left: 0; }
 }
 
 /* ── Dialog ─────────────────────────────────────────────────────────────── */
@@ -898,8 +932,13 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
 }
 .fx-swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--t-paper), 0 0 0 4px var(--t-text); }
-.fx-swatch--default { overflow: hidden; background: var(--t-paper); }
-.fx-swatch--default span { display: block; width: 100%; height: 100%; }
+/* The default accent: a pill that says Default, before the colours. */
+.fx-swatch--default {
+  display: inline-flex; align-items: center; gap: 6px; width: auto; padding: 0 10px 0 4px; border-radius: 999px;
+  background: var(--t-paper); color: var(--t-text); font: 600 12.5px/1 var(--t-body); box-shadow: inset 0 0 0 1px var(--t-control);
+}
+.fx-swatch--default[aria-checked="true"] { box-shadow: inset 0 0 0 1px var(--t-control), 0 0 0 2px var(--t-paper), 0 0 0 4px var(--t-text); }
+.fx-swatch__dot { flex: none; width: 22px; height: 22px; border-radius: 50%; }
 .fx-swatch-custom { display: inline-flex; align-items: center; gap: 8px; color: var(--t-dim); font-size: 13px; font-weight: 600; }
 .fx-swatch-custom input { width: 34px; height: 30px; padding: 0; border: 1px solid var(--t-control); border-radius: var(--t-radius); background: var(--t-paper); cursor: pointer; }
 
@@ -946,7 +985,7 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 /* ── Phones ─────────────────────────────────────────────────────────────── */
 @media (max-width: 640px) {
   .fx-main { padding-top: 20px; }
-  .fx-title { font-size: 24px; }
+  .fx-title { font-size: 22px; }
   .fx-table thead { display: none; }
   .fx-table, .fx-table tbody, .fx-table tr, .fx-table td { display: block; width: 100%; }
   .fx-table tr { padding: 12px 14px; border-bottom: 1px solid var(--fx-line-soft); }
@@ -955,7 +994,6 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
   .fx-table tbody tr:hover td { background: none; }
   .fx-table__actions { text-align: left; }
   .fx-table__actions .fx-row--end { justify-content: flex-start; }
-  .fx-ph__actions, .fx-ph__actions .fx-btn { width: 100%; }
   /* People: the name with its actions (⋯, Approve) on one line, then the
      role select full width, then the status pill when there is one. */
   .fx-people tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 10px; }
@@ -1118,10 +1156,22 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
    in from the right of the manager and leaves the table usable. */
 .fx-cfm__card { position: relative; }
 .fx-cfm__card:has(> .fx-cfs:not([hidden])) { min-height: min(640px, 100vh); }
-.fx-cfs { position: absolute; inset: 0 0 0 auto; z-index: 5; display: flex; width: min(420px, 100%); border-left: 1px solid var(--fx-line); background: var(--t-paper); color: var(--t-text); box-shadow: -16px 0 40px rgba(0, 0, 0, .22); animation: fx-cfs-in .18s var(--fx-ease); }
-.fx-cfs[hidden] { display: none; }
-@keyframes fx-cfs-in { from { transform: translateX(24px); opacity: 0; } }
-@media (prefers-reduced-motion: reduce) { .fx-cfs { animation: none; } }
+/* The shared sidecar (sidecar.js): a right column, or over the page with
+   --over. Tabs are an icon and one word; × closes it. */
+.fx-sidecar { display: flex; flex-direction: column; min-width: 0; border-left: 1px solid var(--fx-line); background: var(--t-paper); color: var(--t-text); }
+.fx-sidecar[hidden] { display: none; }
+.fx-sidecar--over { position: absolute; inset: 0 0 0 auto; z-index: 5; width: min(420px, 100%); box-shadow: -16px 0 40px rgba(0, 0, 0, .22); animation: fx-sidecar-in .18s var(--fx-ease); }
+@keyframes fx-sidecar-in { from { transform: translateX(24px); opacity: 0; } }
+@media (prefers-reduced-motion: reduce) { .fx-sidecar--over { animation: none; } }
+.fx-sidecar__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 0 12px 0 8px; border-bottom: 1px solid var(--fx-line-soft); }
+.fx-sidecar__tabs { display: flex; gap: 2px; min-width: 0; }
+.fx-sidecar__tab { all: unset; cursor: pointer; position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border-radius: var(--t-radius); color: var(--t-dim); font-size: 13px; font-weight: 500; }
+.fx-sidecar__tab .fx-lucide { width: 15px; height: 15px; }
+.fx-sidecar__tab:hover { background: var(--fx-hover); color: var(--t-strong); }
+.fx-sidecar__tab[aria-selected="true"] { background: var(--fx-hover); color: var(--t-strong); }
+.fx-sidecar__tab:focus-visible { box-shadow: var(--fx-focus); }
+.fx-sidecar__mark { width: 6px; height: 6px; border-radius: 50%; background: var(--t-warn); }
+.fx-sidecar__body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; }
 .fx-cfs__form { position: sticky; top: 0; display: flex; flex-direction: column; width: 100%; height: min(100%, 100vh); max-height: 100vh; min-height: 0; }
 .fx-cfs__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--fx-line-soft); }
 .fx-cfs__typename, .fx-cfs__typepick { display: inline-flex; align-items: center; gap: 8px; color: var(--t-text); font-weight: 500; font-size: 14px; }
@@ -1129,9 +1179,9 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-cfs__typepick:hover, .fx-cfs__typepick:focus-within { background: var(--fx-hover); }
 .fx-cfs__typepick .fx-lucide { width: 15px; height: 15px; }
 .fx-cfs__type { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
-.fx-cfs__close, .fx-cfs__delete, .fx-cfs__tool { all: unset; cursor: pointer; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; color: var(--t-dim); }
-.fx-cfs__close:hover, .fx-cfs__tool:hover:not(:disabled) { background: var(--fx-hover); color: var(--t-strong); }
-.fx-cfs__close:focus-visible, .fx-cfs__delete:focus-visible, .fx-cfs__tool:focus-visible { box-shadow: var(--fx-focus); }
+.fx-sidecar__close, .fx-cfs__delete, .fx-cfs__tool { all: unset; cursor: pointer; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; color: var(--t-dim); }
+.fx-sidecar__close:hover, .fx-cfs__tool:hover:not(:disabled) { background: var(--fx-hover); color: var(--t-strong); }
+.fx-sidecar__close:focus-visible, .fx-cfs__delete:focus-visible, .fx-cfs__tool:focus-visible { box-shadow: var(--fx-focus); }
 .fx-cfs__body { flex: 1; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 0; }
 .fx-cfs__section { display: grid; gap: 8px; padding: 14px 16px 4px; }
 .fx-cfs__section:last-child { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--fx-line-soft); }
@@ -1250,13 +1300,7 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .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; }
+/* New invoice from a job: a searchable list of jobs with no invoice. */
 .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); }
@@ -1300,12 +1344,6 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-bulk__act[data-tone="danger"] { color: var(--t-danger); }
 .fx-bulk__act[data-tone="danger"]:hover { background: var(--t-danger-bg); }
 .fx-bulk__sep { flex: none; width: 1px; height: 18px; margin: 0 4px; background: var(--fx-line); }
-/* An icon-only action says its name on hover, in a tip above it. */
-.fx-bulk [data-tip]:hover::after, .fx-bulk [data-tip]:focus-visible::after {
-  content: attr(data-tip); position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
-  padding: 4px 8px; border: 1px solid var(--fx-line); border-radius: var(--t-radius); background: var(--t-paper); color: var(--t-strong);
-  font: 500 12px/1.2 var(--t-body); pointer-events: none; box-shadow: var(--t-shadow), 0 4px 12px rgba(0, 0, 0, .12);
-}
 /* More: a compact list, one row per action, like a dropdown. */
 .fx-pop.fx-bulk__more { width: 248px; min-width: 0; padding: 4px; }
 .fx-bulk__search { width: 100%; height: 30px; margin-bottom: 2px; padding: 4px 8px; font-size: 13px; }
@@ -1370,6 +1408,8 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 
 /* A list's own search (view-bar.js findBox): an icon that opens into a box. */
 .fx-find { display: inline-flex; align-items: center; }
+/* On a tab bar the icon sits level with the tab names, not on the line. */
+.fx-toolbar > .fx-find { align-self: center; }
 .fx-find__button { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; }
 .fx-find__button .fx-lucide { width: 15px; height: 15px; }
 .fx-find__input { display: none; width: min(240px, 60vw); height: 32px; padding: 0 10px; }

package/server/ui/invoice-notes.js

@@ -18,9 +18,11 @@ export function sendModeNote(to, sendMode, what = 'each invoice') {
   return text.join(' ');
 }
 
-// The line under a draft's title, one fact per sentence.
-export function draftNote(to, invoice, ready) {
-  if (!to) return ready ? 'It has no problem. Approve gives it a number.' : 'Fix the problem, then approve it.';
-  if (!ready) return `Fix the problem, then send it to ${to}.`;
-  return sendModeNote(to, invoice?.sendMode, 'this invoice');
+// A warning above a draft, only when its Send cannot work: the accounting
+// system is off or takes no invoices. Otherwise nothing: the problems show
+// on their own, and the Send dialog says what Send does.
+export function draftNote(to, invoice) {
+  const sendMode = invoice?.sendMode;
+  if (!to || !sendMode || (sendMode.connected && sendMode.writesAllowed)) return null;
+  return sendModeNote(to, sendMode);
 }

package/server/ui/invoicing-settings.js

@@ -1,15 +1,14 @@
-// Settings, Invoicing (/invoicing-settings): payment terms, the draft
-// automation, and the lab's own rules a ready job passes before Flow drafts
-// its invoice (invoice-rules.js, docs/INVOICE_RULES.md). Invoicing needs no integration: how an invoice
-// goes to Xero is on the Xero integration page (sendModeSection).
-// Draft when ready is an automation (server/core/automations.js); the
-// Seazona integration page holds the rule that marks a job ready.
-// One row for each setting: its name, one short line, and its control. A
-// change saves at once. Everyone can read them; an owner or admin changes
-// them. The full rules are in docs/INVOICING_RULES.md. app.js passes in its
-// shared pieces as `ui`.
+// Settings, Rules (/invoicing-settings): a card for each part, like the
+// Integrations page, and one page for each (/invoicing-settings/<key>).
+// Drafts holds payment terms and the Reference; Price codes the lines with no
+// price item (line-mappings.js); Invoices the checks a ready job passes
+// before Flow drafts its invoice (invoice-rules.js, docs/INVOICE_RULES.md).
+// Automations have their own page (automations.js).
+// How an invoice goes to Xero is on the Xero integration page
+// (sendModeSection). A change saves at once. Everyone can read them; an owner
+// or admin changes them. The full rules are in docs/INVOICING_RULES.md.
+// app.js passes in its shared pieces as `ui`.
 
-import { automationSection } from '/assets/ui/automations.js';
 import { rulesSection } from '/assets/ui/invoice-rules.js';
 import { lineMappingSection } from '/assets/ui/line-mappings.js';
 
@@ -20,19 +19,51 @@ const SEND_MODES = [
   { value: 'approve_and_email', label: 'Approved and emailed' },
 ];
 
-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('Invoice rules', { subtitle: 'The rules Flow uses to draft each invoice.' }), host);
-  let body;
-  try {
-    body = await flow('/api/invoicing/settings');
-  } catch (error) {
-    host.replaceChildren(notice(error.message, 'danger'));
+const onCount = (list) => ({ label: `${list.filter((x) => x.enabled).length} on`, tone: list.some((x) => x.enabled) ? 'success' : 'mute' });
+
+// Each card: its page, its mark, and its state once the data is in. No
+// blurb: the name and the state say enough.
+const PARTS = [
+  { key: 'drafts', title: 'Drafts', mark: 'draft', mount: (ui) => draftsSection(ui) },
+  { key: 'price-codes', title: 'Price codes', mark: 'tag', mount: (ui) => lineMappingSection(ui),
+    summary: async (flow) => {
+      const { labels } = await flow('/api/invoicing/line-labels');
+      const waiting = labels.filter((l) => l.unmapped > 0).length;
+      return waiting ? { status: { label: `${waiting} wait`, tone: 'warn' }, action: 'Fix' } : { status: { label: 'All mapped', tone: 'success' } };
+    } },
+  { key: 'invoices', title: 'Invoices', mark: 'rules', mount: (ui) => rulesSection(ui, 'Invoices'),
+    summary: async (flow) => ({ status: onCount((await flow('/api/invoicing/rules')).rules) }) },
+];
+
+export function renderInvoicingSettings(main, ui, id) {
+  const { h, flow, notice, pageHeader, tileCard, crumbs } = ui;
+  if (id) {
+    const part = PARTS.find((p) => p.key === id);
+    main.append(crumbs(['/invoicing-settings', 'Rules'], part?.title ?? 'Not found'),
+      part ? h('div', { class: 'fx-card', style: { padding: '8px 20px 16px' } }, part.mount(ui)) : notice('No such part of Rules.', 'danger'));
     return;
   }
+  const grid = h('div', { class: 'fx-int-grid' });
+  main.append(pageHeader('Rules'), grid);
+  // Each card shows at once and fills in its state when its data comes back.
+  for (const part of PARTS) {
+    const href = `/invoicing-settings/${part.key}`;
+    const slot = tileCard({ href, mark: part.mark, title: part.title });
+    grid.append(slot);
+    if (part.summary) {
+      part.summary(flow)
+        .then((more) => slot.replaceWith(tileCard({ href, mark: part.mark, title: part.title, ...more })))
+        .catch(() => {});
+    }
+  }
+}
+
+// Payment terms and the Reference template.
+function draftsSection(ui) {
+  const { h, flow, toast, notice, me } = ui;
   const disabled = !['owner', 'admin'].includes(me?.person.role);
-  let saved = body.settings;
+  const section = h('section', { class: 'fx-set' }, h('h2', { class: 'fx-set__title' }, 'Drafts'), h('div', { class: 'fx-skeleton' }));
+  let saved;
 
   async function save(changes, control) {
     control.disabled = true;
@@ -60,19 +91,23 @@ export async function renderInvoicingSettings(main, ui) {
     });
     return input;
   };
-  const days = (key, label) => box(key, label, { type: 'number', read: Number });
 
-  const section = (title, ...rows) => h('section', { class: 'fx-set' }, h('h2', { class: 'fx-set__title' }, title), ...rows);
-  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')),
+  (async () => {
+    try {
+      saved = (await flow('/api/invoicing/settings')).settings;
+    } catch (error) {
+      section.replaceChildren(h('h2', { class: 'fx-set__title' }, 'Drafts'), notice(error.message, 'danger'));
+      return;
+    }
+    section.replaceChildren(...[
+      h('h2', { class: 'fx-set__title' }, 'Drafts'),
+      disabled ? notice('Only an owner or admin can change these.', 'info') : null,
+      row('Payment terms', 'Days from invoice to due date.', box('paymentTermsDays', 'Payment terms in days', { type: 'number', read: Number })),
       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),
-  ].filter(Boolean));
+        box('referenceTemplate', 'Reference rule', { placeholder: '{practitioner} - {patient}' })),
+    ].filter(Boolean));
+  })();
+  return section;
 }
 
 // The Xero integration page's "Sending" section: how a checked invoice goes to
@@ -82,11 +117,10 @@ export function sendModeSection(ui) {
   const disabled = !['owner', 'admin'].includes(me?.person.role);
   const select = h('select', { class: 'fx-select', 'aria-label': 'Send to Xero as', disabled },
     SEND_MODES.map((m) => h('option', { value: m.value }, m.label)));
-  const section = h('section', { class: 'fx-set' }, h('h2', { class: 'fx-set__title' }, 'Sending'),
+  const section = h('section', { class: 'fx-set' }, ui.sectionTitle('Sending', { href: DOCS, label: 'How sending works' }),
     h('div', { class: 'fx-set__row' },
       h('div', { class: 'fx-set__text' }, h('span', { class: 'fx-set__name' }, 'Send to Xero as'), h('span', { class: 'fx-set__hint' }, 'Draft: approve in Xero. Approved: Xero emails it.')),
-      h('div', { class: 'fx-set__control' }, select)),
-    h('p', { class: 'fx-dim', style: { margin: '8px 0 0' } }, h('a', { href: DOCS, target: '_blank', rel: 'noopener' }, 'How sending works')));
+      h('div', { class: 'fx-set__control' }, select)));
   let saved = null;
   (async () => {
     try {

package/server/ui/invoicing.js

@@ -9,7 +9,7 @@ import { alertStrip } from '/assets/ui/alerts.js';
 import { bulkBar } from '/assets/ui/bulk-bar.js';
 import { draftNote, sendModeNote } from '/assets/ui/invoice-notes.js';
 import { caseNumber } from '/assets/ui/job-board.js';
-import { jobChangeBanner } from '/assets/ui/job-change.js';
+import { jobChangeReview } from '/assets/ui/job-change.js';
 import { findBox } from '/assets/ui/view-bar.js';
 
 // The tabs, left to right (server/api/invoicing.js, TABS): Pending (a
@@ -836,15 +836,12 @@ function draftView(invoice, ui, context, redraw) {
   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;
+  // A new invoice can start from a job that has no invoice yet: a button in
+  // the header. 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('button', { class: 'fx-btn fx-btn--ghost', type: 'button', onclick: () => pickJob(ui) }, 'From a job') : null;
 
   // A draft with no problem is in Ready by itself; one with a problem is
   // Pending. A changed job is fixed at its source or accepted here.
@@ -853,47 +850,18 @@ function draftView(invoice, ui, context, redraw) {
   // changed. Other problems stay one line.
   const otherProblems = (invoice?.problems ?? []).filter((p) => !(jobChange && p.code === 'job_review'));
   const problems = [
-    jobChange ? jobChangeBanner(ui, jobChange, {
-      money: formatCents,
-      // Accepting changes the draft for the business: owners and admins only.
-      onAccept: !context.canIssue ? null : async () => {
-        const system = jobChange.systemName;
-        const lost = [jobChange.outcome === 'conflict' ? 'Your own line changes here are replaced.' : null, changed() ? 'Unsaved changes are lost.' : null].filter(Boolean);
-        if (lost.length) {
-          const ok = await ui.dialog({ title: 'Accept change?', body: h('p', {}, lost.join(' ')), confirm: 'Accept change' });
-          if (!ok) return;
-        }
-        try {
-          const res = await flow(`/api/invoicing/jobs/${jobChange.jobId}/use-new-lines`, { method: 'POST', body: JSON.stringify({ accept: true }) });
-          toast(`Matches ${system}.${res.invoice.view === 'ready' ? ' In Ready.' : ''}`, 'success');
-          redraw(res.invoice);
-        } catch (error) {
-          toast(error.message, 'danger');
-        }
-      },
-      // Reads this one job from the work system again, then every check runs.
-      onRecheck: async () => {
-        try {
-          const res = await flow(`/api/invoicing/jobs/${jobChange.jobId}/recheck`, { method: 'POST', body: '{}' });
-          toast(res.invoice?.jobChange ? `Still changed in ${jobChange.systemName}.` : 'Fixed. It matches now.', res.invoice?.jobChange ? 'danger' : 'success');
-          if (res.invoice) redraw(res.invoice);
-        } catch (error) {
-          toast(error.message, 'danger');
-        }
-      },
-    }) : null,
+    // Accepting changes the draft for the business: owners and admins only.
+    jobChange ? jobChangeReview(ui, jobChange, { money: formatCents, canAccept: context.canIssue, unsaved: changed, done: redraw }) : null,
     otherProblems.length ? notice(otherProblems.map((p) => p.message).join(' '), 'danger', 'Problem.') : null,
   ];
 
   return [
     navBar(ui, invoice),
-    h('header', { class: 'fx-ph' },
-      h('div', { class: 'fx-ph__text' },
-        h('h1', { class: 'fx-title' }, isNew ? 'New invoice' : ready ? 'Ready invoice' : 'Pending invoice'),
-        h('p', { class: 'fx-ph__sub' }, draftNote(to, invoice, ready))),
-      h('div', { class: 'fx-ph__actions' }, isNew ? null : previewButton(ui, invoice.id, 'Shows the saved invoice.'), saveButton, sendButton ?? issueButton)),
+    ui.pageHeader(isNew ? 'New invoice' : ready ? 'Ready invoice' : 'Pending invoice', {
+      actions: [fromJob, isNew ? null : previewButton(ui, invoice.id, 'Shows the saved invoice.'), saveButton, sendButton ?? issueButton].filter(Boolean),
+    }),
+    draftNote(to, invoice) ? ui.notice(draftNote(to, invoice), 'warn') : null,
     ...problems,
-    fromJob,
     h('div', { class: 'fx-invoice__grid' },
       h('div', { class: 'fx-invoice__main' },
         h('section', { class: 'fx-card fx-invoice__head' },
@@ -999,10 +967,8 @@ function issuedView(invoice, ui, context, redraw) {
     navBar(ui, invoice),
     h('header', { class: 'fx-ph' },
       h('div', { class: 'fx-ph__text' },
-        h('div', { class: 'fx-row' },
-          h('h1', { class: 'fx-title' }, invoice.number),
-          h('span', { class: 'fx-status', 'data-tone': TAB_TONE[invoice.tab] }, TAB_LABEL[invoice.tab] ?? 'Approved')),
-        h('p', { class: 'fx-ph__sub' }, `${invoice.contact?.name ?? ''} · ${showDate(invoice.issueDate)}`)),
+        h('h1', { class: 'fx-title' }, invoice.number),
+        h('span', { class: 'fx-status', 'data-tone': TAB_TONE[invoice.tab] }, TAB_LABEL[invoice.tab] ?? 'Approved')),
       h('div', { class: 'fx-ph__actions' }, actions, previewButton(ui, invoice.id), send)),
     h('div', { class: 'fx-invoice__grid' },
       h('div', { class: 'fx-invoice__main' },
@@ -1072,7 +1038,7 @@ function xeroCard(invoice, ui, context, status, reload) {
 }
 
 // Send to Xero (POST /api/xero/invoices/push). The customer's send mode
-// (Settings, Invoice rules) decides what Xero gets: a draft that a person approves
+// (Settings, Rules) decides what Xero gets: a draft that a person approves
 // there, or an approved invoice that Xero emails to the customer.
 function sendToXero(invoice, ui, context) {
   const { h, flow, toast } = ui;

package/server/ui/job-board.js

@@ -93,7 +93,10 @@ function reasonFix(reason) {
   if (reason === 'the work system report is out of date') {
     return { label: 'Out of date', text: 'Flow has no news of this job from the work system for more than a day.', todo: 'Check the work system under Settings, Integrations.', go: 'integrations' };
   }
-  if (reason === 'the job changed after its invoice was made') return fix('Job changed', 'Open the invoice to see what changed. Fix the job in the work system, or adopt its changes on the draft.', 'invoice');
+  // Review opens the job's own sidecar: what changed, and Accept change.
+  if (reason === 'the job changed after its invoice was made') {
+    return { label: 'Job changed', text: 'Changed after the draft was made.', todo: 'Fix it in the work system, or accept the change.', go: 'review' };
+  }
   if (reason === 'the job status moved back after its invoice was made') return fix('Status moved back', 'Check the job in the work system. Void or hold its invoice if the work is not done.', 'work');
   if (/deleted in /i.test(reason)) return fix('Deleted', 'Check the job in the work system. Void its invoice if it has one.', 'work');
   // The matcher found invoices that may be this job's, but no exact link.
@@ -134,27 +137,36 @@ function draftFix(problem) {
 }
 
 // Where a fix's link goes: Flow's invoice, the job in the work system, a
-// Flow settings page, or `choose`: Make invoice and Link invoice buttons
-// (jobs.js draws them).
-export const GO = ['invoice', 'work', 'price-list', 'invoicing-settings', 'integrations', 'choose'];
+// Flow settings page, `review`: the job's Review sidecar, or `choose`: Make
+// invoice and Link invoice buttons (jobs.js draws them).
+export const GO = ['invoice', 'work', 'price-list', 'invoicing-settings', 'integrations', 'review', 'choose'];
 
 // What a person must fix on a job, in order: [{ label, text, todo, go }];
 // `todo` is null when the buttons are the instruction.
-// Empty unless invoiceStage is Problem.
+// Empty unless invoiceStage is Problem. One fact is one fix: a job in review
+// already says why, so its draft's copy of that hold (sending.js,
+// `job_review`) is left out, and two fixes with the same words show once.
 export function fixes(o) {
   if (invoiceStage(o) !== 'problem') return [];
   const found = [];
   if (PROBLEM_VIEWS.includes(o.view)) found.push(...(o.reasons ?? []).map((r) => reasonFix(r)));
   if (o.view === 'ready') {
     found.push(...(o.waitingFor ?? []).filter(isRule).map((r) => ({
-      label: 'Stopped by a rule', text: sentence(r), todo: 'Draft the invoice here, or change the rule under Settings, Invoice rules.', go: 'invoicing-settings',
+      label: 'Stopped by a rule', text: sentence(r), todo: 'Draft the invoice here, or change the rule under Settings, Rules.', go: 'invoicing-settings',
     })));
   }
   if (o.invoiceStatus === 'void') {
     found.push({ label: 'Invoice void', text: 'The invoice for this job is void.', todo: 'Make a new invoice, or close the job.', go: 'invoice' });
   }
-  found.push(...(o.invoiceProblems ?? []).map((p) => draftFix(p)));
-  return found;
+  const held = o.view === 'review_required' && o.holdState === 'review';
+  found.push(...(o.invoiceProblems ?? []).filter((p) => !(held && p.code === 'job_review')).map((p) => draftFix(p)));
+  const seen = new Set();
+  return found.filter((f) => {
+    const key = `${f.label}\u0000${f.text}`;
+    if (seen.has(key)) return false;
+    seen.add(key);
+    return true;
+  });
 }
 
 // The short words for a job's problems: the first label, and "+N" for more.

package/server/ui/job-change.js

@@ -87,3 +87,39 @@ export function jobChangeBanner(ui, change, { money, onAccept = null, onRecheck
       body)) : null,
     more);
 }
+
+// The banner with Accept change and the recheck wired, for the invoice page
+// and a job's Review sidecar (jobs.js). `canAccept`: the person may change
+// drafts (owners and admins). `unsaved()`: edits on the page that Accept
+// would lose. `done(invoice)` hears the invoice after Accept or a recheck.
+export function jobChangeReview(ui, change, { money, canAccept = false, unsaved = () => false, done = () => {} }) {
+  const { h, flow, toast } = ui;
+  const system = change.systemName;
+  return jobChangeBanner(ui, change, {
+    money,
+    onAccept: !canAccept ? null : async () => {
+      const lost = [change.outcome === 'conflict' ? 'Your own line changes here are replaced.' : null, unsaved() ? 'Unsaved changes are lost.' : null].filter(Boolean);
+      if (lost.length) {
+        const ok = await ui.dialog({ title: 'Accept change?', body: h('p', {}, lost.join(' ')), confirm: 'Accept change' });
+        if (!ok) return;
+      }
+      try {
+        const res = await flow(`/api/invoicing/jobs/${change.jobId}/use-new-lines`, { method: 'POST', body: JSON.stringify({ accept: true }) });
+        toast(`Matches ${system}.${res.invoice.view === 'ready' ? ' In Ready.' : ''}`, 'success');
+        await done(res.invoice);
+      } catch (error) {
+        toast(error.message, 'danger');
+      }
+    },
+    // Reads this one job from the work system again, then every check runs.
+    onRecheck: async () => {
+      try {
+        const res = await flow(`/api/invoicing/jobs/${change.jobId}/recheck`, { method: 'POST', body: '{}' });
+        toast(res.invoice?.jobChange ? `Still changed in ${system}.` : 'Fixed. It matches now.', res.invoice?.jobChange ? 'danger' : 'success');
+        if (res.invoice) await done(res.invoice);
+      } catch (error) {
+        toast(error.message, 'danger');
+      }
+    },
+  });
+}