@arcforgelabs/flow 2026.10.44 → 2026.10.46

package/server/ui/flow.css

@@ -11,6 +11,9 @@
      edge, as ClickUp and HubSpot do; the title, toolbar and content start at
      one place on every page. */
   --fx-gutter: clamp(16px, 2vw, 24px);
+  /* The height of every control in a list's toolbar: chips, view tabs,
+     search, Board/List and the page's button. */
+  --fx-control-h: 32px;
   --fx-line-soft: color-mix(in srgb, var(--t-text) 7%, transparent);
   --fx-hover: color-mix(in srgb, var(--t-text) 5%, transparent);
   --fx-focus: 0 0 0 3px color-mix(in srgb, var(--t-ring) 40%, transparent);
@@ -141,17 +144,16 @@ body:is([data-state="off"], [data-state="error"], [data-state="no-access"]) .fx-
 .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; }
-.fx-nav a, .fx-nav__report {
+.fx-nav a, .fx-nav__report, .fx-nav__more {
   display: flex; align-items: center; gap: 10px;
   padding: 8px 10px; border-radius: var(--t-radius);
   color: var(--t-text); font-weight: 500; font-size: 14px; text-decoration: none; white-space: nowrap;
 }
-.fx-nav a:hover, .fx-nav__report:hover { color: var(--t-strong); background: var(--fx-hover); }
-.fx-nav__report { margin-top: auto; border: 0; background: none; font: inherit; font-weight: 500; font-size: 14px; text-align: left; cursor: pointer; }
+.fx-nav a:hover, .fx-nav__report:hover, .fx-nav__more:hover { color: var(--t-strong); background: var(--fx-hover); }
+.fx-nav__report, .fx-nav__more { border: 0; background: none; font: inherit; font-weight: 500; font-size: 14px; text-align: left; cursor: pointer; }
+.fx-nav__report { margin-top: auto; }
 .fx-nav__report[hidden] { display: none; }
-.fx-nav a[aria-current="page"] { color: var(--t-accent); background: var(--t-accent-bg); font-weight: 650; box-shadow: inset 2px 0 0 var(--t-brand); }
+.fx-nav :is(a, .fx-nav__more)[aria-current="page"] { color: var(--t-accent); background: var(--t-accent-bg); font-weight: 650; box-shadow: inset 2px 0 0 var(--t-brand); }
 .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; }
@@ -166,8 +168,7 @@ body:is([data-state="off"], [data-state="error"], [data-state="no-access"]) .fx-
   .fx-shell[data-folded] .fx-side :is(a, button, #user-button) { cursor: pointer; }
   .fx-shell[data-folded] .fx-side__head { flex-direction: column; gap: 10px; padding: 0 0 14px; }
   .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] :is(.fx-nav a, .fx-nav__report, .fx-nav__more) { 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; }
@@ -422,7 +423,7 @@ a.fx-strong:hover { text-decoration: underline; }
 .fx-toolbar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--fx-line); }
 .fx-tabs { display: flex; gap: 2px; }
 .fx-tabs button { flex: none; }
-@media (max-width: 640px) { .fx-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; } }
+@media (max-width: 639px) { .fx-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; } }
 .fx-tabs button {
   display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: -1px;
   border: 0; border-bottom: 2px solid transparent; background: transparent; cursor: pointer;
@@ -433,14 +434,17 @@ a.fx-strong:hover { text-decoration: underline; }
 .fx-tabs__count { padding: 0 7px; border-radius: 999px; background: var(--fx-hover); color: var(--t-dim); font-size: 12px; line-height: 20px; }
 .fx-tabs button[data-tone="danger"] .fx-tabs__count { background: var(--t-danger-bg); color: var(--t-danger); }
 
-/* Saved views (saved-views.js): the row of named view tabs over a list, as
-   ClickUp's. The chosen tab is underlined; its ⋯ shows on hover and when
-   chosen. Save and Revert sit at the right while the list differs. */
-.fx-views { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; min-height: 32px; margin-bottom: -8px; }
+/* Saved views (saved-views.js): named view tabs in the toolbar, at the
+   right of Group, Sort and Filter (listHead's tools). The chosen tab is a
+   filled pill; its ⋯ shows on hover and when chosen. Save and Revert follow
+   while the list differs. */
+.fx-toolbar__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
+.fx-views { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
 .fx-views:empty { display: none; }
-.fx-views__item { display: inline-flex; align-items: center; border-bottom: 2px solid transparent; }
-.fx-views__item[data-on="true"] { border-bottom-color: var(--t-brand); }
-.fx-views__tab { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; padding: 6px 4px 6px 8px; border: 0; background: none; color: var(--t-dim); font: 600 13px var(--t-body); cursor: pointer; }
+.fx-views__item { display: inline-flex; align-items: center; border-radius: 999px; }
+.fx-views__item:hover { background: var(--fx-hover); }
+.fx-views__item[data-on="true"] { background: var(--t-accent-bg); }
+.fx-views__tab { display: inline-flex; align-items: center; gap: 6px; max-width: 180px; padding: 6px 4px 6px 10px; border-radius: 999px; border: 0; background: none; color: var(--t-dim); font: 600 13px var(--t-body); cursor: pointer; }
 .fx-views__tab:hover, .fx-views__item[data-on="true"] .fx-views__tab { color: var(--t-strong); }
 .fx-views__tab:focus-visible { outline: 2px solid var(--t-ring, var(--t-accent)); outline-offset: 1px; }
 .fx-views__tab .fx-lucide { width: 14px; height: 14px; flex: none; }
@@ -449,11 +453,18 @@ a.fx-strong:hover { text-decoration: underline; }
 .fx-views__item .fx-cfm__more { width: 22px; height: 22px; opacity: 0; }
 .fx-views__item:hover .fx-cfm__more, .fx-views__item[data-on="true"] .fx-cfm__more, .fx-views__item .fx-cfm__more[aria-expanded="true"], .fx-views__item .fx-cfm__more:focus-visible { opacity: 1; }
 .fx-views__item .fx-cfm__more .fx-lucide { width: 14px; height: 14px; }
-.fx-views__add { display: inline-flex; align-items: center; gap: 4px; padding: 6px 8px; border: 0; background: none; color: var(--t-dim); font: 500 13px var(--t-body); cursor: pointer; }
-.fx-views__add:hover { color: var(--t-strong); }
+.fx-views__add { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 4px 9px; border: 0; border-radius: 999px; background: none; color: var(--t-dim); font: 600 13px/1.2 var(--t-body); cursor: pointer; }
+.fx-views__add:hover { background: var(--fx-hover); color: var(--t-strong); }
+.fx-views__add:focus-visible { outline: 2px solid var(--t-ring, var(--t-accent)); outline-offset: 2px; }
 .fx-views__add .fx-lucide { width: 14px; height: 14px; }
-.fx-views__end { display: inline-flex; gap: 6px; margin-left: auto; }
+.fx-views__end { display: inline-flex; gap: 6px; margin-left: 4px; }
 @media (hover: none) { .fx-views__item .fx-cfm__more { opacity: 1; } }
+/* A phone keeps the tools on one row of their own that scrolls sideways. */
+@media (max-width: 639px) {
+  .fx-toolbar__tools { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
+  .fx-toolbar__tools > *, .fx-views { flex: none; flex-wrap: nowrap; }
+  .fx-toolbar__end:has(> .fx-toolbar__tools) { flex-wrap: wrap; row-gap: 8px; }
+}
 
 /* Quiet alerts (server/ui/alerts.js): one slim line under the page header,
    only while something on the page needs this person. */
@@ -468,7 +479,7 @@ a.fx-strong:hover { text-decoration: underline; }
 .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) {
+@media (max-width: 639px) {
   .fx-alerts { flex-wrap: wrap; }
   .fx-alerts__text { flex-basis: calc(100% - 52px); }
   .fx-alerts__action, .fx-alerts__more { order: 2; }
@@ -651,7 +662,7 @@ a.fx-strong:hover { text-decoration: underline; }
 .fx-dot--stage[data-rank="7"] { --stage: var(--t-dim); }
 .fx-pop--choices .fx-input { min-height: 32px; margin-bottom: 4px; font-size: 13px; }
 .fx-pop__end { display: inline-grid; margin-left: auto; color: var(--t-accent); }
-@media (max-width: 640px) {
+@media (max-width: 639px) {
   .fx-pop.fx-pop--rows { min-width: 0; width: calc(100vw - 16px); }
   .fx-rows__row, .fx-rows__row--sort { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px; }
   .fx-rows__row > .fx-rows__lead, .fx-rows__row > .fx-select:first-child, .fx-rows__row > .fx-rows__join { grid-column: 1 / -1; }
@@ -730,18 +741,21 @@ th:hover > .fx-th-grip::after { background: var(--t-brd-hi); }
 .fx-table--sized[data-resizing] { cursor: col-resize; user-select: none; }
 .fx-table--sized .fx-tick-cell, .fx-table--sized .fx-th-add, .fx-table--sized .fx-c-end { overflow: visible; text-overflow: clip; }
 .fx-table--sized .fx-tick-cell { padding-right: 0; }
-/* + stays at the right edge while the table scrolls sideways. */
-.fx-table--sized .fx-th-add { position: sticky; right: 0; z-index: 1; padding-left: 0; padding-right: 12px; }
+/* The end column fills the row after the last column (columns.js), as
+   HubSpot's; + sits at its right edge and stays there while the table
+   scrolls sideways. */
+.fx-table--sized .fx-th-add { position: sticky; right: 0; z-index: 1; padding-left: 0; padding-right: 12px; text-align: right; }
 .fx-avatar--sm { width: 24px; height: 24px; font-size: 10px; }
 .fx-c-date time { font-variant-numeric: tabular-nums; }
 .fx-stage[data-rank="plain"] { --stage: var(--t-dim); }
-/* The board is one row of lanes (one per group), each about a phone wide.
-   Lanes share the width when they fit; more lanes scroll sideways inside
-   the board, never as a second row. On a wide, tall screen the board fills
+/* The board is one row of lanes (one per group), each a fixed phone width
+   (--fx-lane), as HubSpot's: lanes never stretch to fill a wide screen, so
+   the space past the last lane stays empty. More lanes scroll sideways
+   inside the board, never as a second row. On a wide, tall screen the board fills
    the page down to its bottom edge, the page itself does not scroll, and
    each lane scrolls inside itself (jobs.js sets fx-main--board while the
    board shows). */
-.fx-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(min(85vw, 272px), 1fr); gap: 12px; align-items: start; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: 4px; }
+.fx-board { --fx-lane: min(85vw, 272px); display: grid; grid-auto-flow: column; grid-auto-columns: var(--fx-lane); justify-content: start; gap: 12px; align-items: start; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: 4px; }
 .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; }
@@ -1022,13 +1036,27 @@ th:hover > .fx-th-grip::after { background: var(--t-brd-hi); }
   .fx-auth__title { font-size: 26px; max-width: none; }
 }
 
-/* A one-message page (sign-in off, an error, no access, Xero's return). */
+/* A one-message page (sign-in off, an error, no access, an OAuth return). */
 .fx-message, .fx-centre .fx-message { min-height: 100vh; place-content: center; justify-items: center; gap: 20px; padding: 32px 16px; }
 .fx-centre .fx-message { display: grid; }
 .fx-message__card { display: grid; gap: 12px; width: min(460px, 100%); padding: 28px; }
 .fx-message__card[data-tone="success"] { border-top: 3px solid var(--t-success); }
 .fx-message__card[data-tone="danger"] { border-top: 3px solid var(--t-danger); }
 .fx-message__card .fx-btn { justify-self: start; }
+.fx-message__marks {
+  display: flex; align-items: center; gap: 10px; margin-bottom: 4px;
+}
+.fx-message__marks--solo { justify-content: flex-start; }
+.fx-message__flow .fx-mark { width: 34px; height: 34px; display: block; }
+.fx-message__plus { color: var(--t-dim); font: 600 18px/1 var(--t-body); }
+.fx-message__result {
+  display: grid; place-items: center; width: 28px; height: 28px; margin-left: 4px;
+  border-radius: 50%; color: var(--t-success); background: var(--t-success-bg);
+}
+.fx-message__result[data-tone="danger"] { color: var(--t-danger); background: var(--t-danger-bg); }
+.fx-message__result .fx-lucide { width: 16px; height: 16px; }
+.fx-message__status { margin: 0; }
+.fx-message__return { margin: 0; color: var(--t-dim); font-size: 13.5px; }
 
 .fx-loading { display: none; min-height: 100vh; place-content: center; gap: 12px; color: var(--t-dim); }
 body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
@@ -1057,7 +1085,7 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-setting__value { font-size: 12.5px; color: var(--t-strong); overflow-wrap: anywhere; text-align: right; }
 .fx-setting--wide { grid-template-columns: minmax(0, 1fr); }
 .fx-setting--wide .fx-setting__control { display: block; }
-@media (max-width: 640px) {
+@media (max-width: 639px) {
   .fx-setting { grid-template-columns: minmax(0, 1fr); }
   .fx-setting__control { justify-content: flex-start; }
   .fx-setting__stack { justify-items: start; }
@@ -1144,13 +1172,14 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 }
 
 /* ── Phones ─────────────────────────────────────────────────────────────── */
-@media (max-width: 640px) {
+@media (max-width: 639px) {
   .fx-main { padding-top: 20px; }
   .fx-title { font-size: 22px; }
   .fx-table thead { display: none; }
   .fx-table.fx-table--sized { width: 100% !important; min-width: 0; table-layout: auto; }
   .fx-table--sized td { white-space: normal; }
   .fx-table--sized colgroup { display: none; }
+  .fx-table--sized td.fx-c-end { 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); }
   .fx-table td { padding: 4px 0; border: 0; }
@@ -1210,8 +1239,7 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-price { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
 .fx-price__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 16px; }
 .fx-price__head .fx-search { margin: 0 0 6px; width: 260px; }
-@media (max-width: 560px) { .fx-price__head .fx-search { width: 100%; } }
-.fx-price__scroll { overflow-x: auto; border: 1px solid var(--fx-line); background: var(--t-paper); }
+@media (max-width: 639px) { .fx-price__head .fx-search { width: 100%; } }
 .fx-price__table th { position: sticky; top: 0; z-index: 1; }
 .fx-price__table td { padding-top: 9px; padding-bottom: 9px; }
 .fx-price__table td.fx-num, .fx-price__table th.fx-num { text-align: right; white-space: nowrap; }
@@ -1404,10 +1432,10 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-rule__value { display: flex; gap: 6px; align-items: center; min-width: 0; }
 .fx-rule__many { display: grid; gap: 2px; max-height: 160px; overflow: auto; padding: 4px 8px; border: 1px solid var(--fx-line); border-radius: 8px; width: 100%; }
 .fx-rule__delete { justify-self: start; color: var(--t-danger); }
-@media (max-width: 640px) {
+@media (max-width: 639px) {
   .fx-rule__condition { grid-template-columns: minmax(0, 1fr); }
 }
-@media (max-width: 560px) {
+@media (max-width: 639px) {
   .fx-set__row { gap: 12px; }
   .fx-set__control .fx-input { width: 140px; }
   .fx-set__control .fx-input[type="number"] { width: 72px; }
@@ -1415,7 +1443,7 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 }
 .fx-multi { position: relative; width: 220px; max-width: 100%; }
 .fx-multi__summary { display: flex; align-items: center; list-style: none; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-@media (max-width: 600px) { .fx-multi { width: 150px; } }
+@media (max-width: 639px) { .fx-multi { width: 150px; } }
 .fx-multi__summary::-webkit-details-marker { display: none; }
 .fx-multi__list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; display: grid; gap: 2px; min-width: 100%; max-height: 280px; overflow-y: auto; padding: 6px; background: var(--t-paper); border: 1px solid var(--fx-line); border-radius: var(--t-radius-lg); box-shadow: var(--t-shadow); }
 .fx-multi__option { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px; cursor: pointer; white-space: nowrap; }
@@ -1464,6 +1492,19 @@ 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; }
 
+/* The pages of a long list, in the list window's foot bar (pager.js):
+   rows per page, the range, numbered pages. The page shown is filled. */
+.fx-pages { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; color: var(--t-dim); font-size: 13px; font-variant-numeric: tabular-nums; }
+.fx-pages__rows { display: inline-flex; align-items: center; gap: 6px; }
+.fx-pages__size { width: 76px; min-height: 28px; padding-block: 2px; font-size: 13px; }
+.fx-pages__range { color: var(--t-text); }
+.fx-pages__steps { display: inline-flex; align-items: center; gap: 4px; }
+.fx-pages__step, .fx-pages__num { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border: 1px solid var(--fx-line-soft); border-radius: 999px; background: transparent; color: var(--t-text); font: inherit; cursor: pointer; transition: background 120ms var(--fx-ease), border-color 120ms var(--fx-ease); }
+.fx-pages__step:hover:not(:disabled), .fx-pages__num:hover:not([aria-current]) { background: var(--fx-hover); border-color: var(--fx-line); }
+.fx-pages__step:disabled { opacity: 0.35; cursor: default; }
+.fx-pages__num[aria-current="page"] { background: var(--t-primary); border-color: var(--t-primary); color: var(--t-on-primary); cursor: default; }
+.fx-pages__gap { min-width: 16px; text-align: center; color: var(--t-mute); }
+
 /* 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; }
@@ -1490,9 +1531,19 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-listhead__edge { height: 0; }
 .fx-listhead__edge + .fx-listhead[data-sticky] { margin-top: -32px; }
 .fx-listhead > .fx-toolbar > .fx-tabs button { padding-block: 9px; }
+/* Every control in the toolbar is one height (--fx-control-h). Under a
+   tab line, the controls keep 8px clear of the line; only the tabs sit on it. */
+.fx-listhead .fx-toolbar :is(.fx-btn, .fx-chip, .fx-views__add, .fx-views__tab) { min-height: var(--fx-control-h); }
+.fx-listhead .fx-toolbar .fx-btn:not(.fx-btn--sm) { padding-block: 0; font-size: 14px; }
+.fx-listhead .fx-toolbar :is(.fx-btn, .fx-chip) { height: var(--fx-control-h); }
+.fx-listhead .fx-toolbar .fx-find__button { width: var(--fx-control-h); height: var(--fx-control-h); }
+.fx-listhead .fx-toolbar .fx-find__input { height: var(--fx-control-h); }
+.fx-listhead .fx-toolbar .fx-seg { padding: 2px; }
+.fx-listhead .fx-toolbar .fx-seg__item { min-height: calc(var(--fx-control-h) - 4px); }
+.fx-listhead > .fx-toolbar:not(.fx-toolbar--plain) > :not(.fx-tabs) { margin-bottom: 8px; }
 @media (max-width: 820px) { .fx-listhead[data-sticky] { top: 60px; } }
 /* On a phone the head would hide too many rows: it scrolls away. */
-@media (max-width: 560px) { .fx-listhead[data-sticky] { position: static; } }
+@media (max-width: 639px) { .fx-listhead[data-sticky] { position: static; } }
 
 /* The bulk action bar (bulk-bar.js): floats at the foot while rows are
    ticked. "N selected ×", then icon actions in groups, then More. It takes
@@ -1526,7 +1577,7 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-bulk__grid { display: grid; }
 .fx-bulk__grid .fx-pop__item[data-tone="danger"] { color: var(--t-danger); }
 .fx-bulk__none { margin: 8px 10px; color: var(--t-dim); font-size: 13.5px; }
-@media (max-width: 560px) {
+@media (max-width: 639px) {
   .fx-bulk { bottom: 10px; padding: 4px; }
   .fx-bulk__count { margin-right: 2px; padding-left: 8px; }
   .fx-bulk__act { padding: 7px 6px; }
@@ -1588,3 +1639,63 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-find__input { display: none; width: min(240px, 60vw); height: 32px; padding: 0 10px; }
 .fx-find--open .fx-find__input { display: block; }
 .fx-find--open .fx-find__button { display: none; }
+
+/* Xero usage on the Xero card (server/ui/xero-usage.js). Colours are tokens. */
+.fx-xero-orgs { display: grid; gap: 18px; }
+.fx-xero-org { display: grid; gap: 12px; }
+.fx-xu { display: grid; gap: 14px; }
+.fx-xu__top { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
+.fx-xu__chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
+.fx-xu-ring { position: relative; width: 112px; height: 112px; flex: none; }
+.fx-xu-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
+.fx-xu-ring__track { fill: none; stroke: var(--fx-line); stroke-width: 3; }
+.fx-xu-ring__used { fill: none; stroke: var(--t-accent); stroke-width: 3; stroke-linecap: round; }
+.fx-xu[data-tone="warn"] .fx-xu-ring__used { stroke: var(--t-warn); }
+.fx-xu[data-tone="danger"] .fx-xu-ring__used { stroke: var(--t-danger); }
+.fx-xu-ring__label { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 2px; }
+.fx-xu-ring__num { color: var(--t-strong); font: 650 22px/1 var(--t-body); font-variant-numeric: tabular-nums; }
+.fx-xu-ring__of { color: var(--t-dim); font-size: 12px; font-variant-numeric: tabular-nums; }
+.fx-xu__fold { display: grid; gap: 12px; padding: 12px 14px; border: 1px solid var(--fx-line); border-radius: var(--t-radius-lg); background: var(--t-paper); }
+.fx-xu__fold summary { cursor: pointer; color: var(--t-strong); font-weight: 650; }
+.fx-xu__fold summary:focus-visible { outline: 2px solid var(--t-ring, var(--t-accent)); outline-offset: 2px; }
+.fx-xu-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; }
+.fx-xu-legend span { display: inline-flex; align-items: center; gap: 6px; color: var(--t-dim); font-size: 12.5px; }
+.fx-xu-legend i, .fx-xu-lane { display: inline-block; }
+.fx-xu-legend i { width: 8px; height: 8px; border-radius: 2px; }
+.fx-xu-hours { display: flex; align-items: flex-end; gap: 3px; height: 88px; }
+.fx-xu-hour { flex: 1; min-width: 0; height: 100%; display: flex; align-items: flex-end; }
+.fx-xu-hour__stack { display: flex; flex-direction: column-reverse; width: 100%; height: var(--h, 0%); border-radius: 2px 2px 0 0; overflow: hidden; }
+.fx-xu-hour__stack i { display: block; width: 100%; height: var(--part, 0%); }
+.fx-xu-lane[data-lane="writes"] { background: var(--t-accent); }
+.fx-xu-lane[data-lane="sync"] { background: var(--t-success); }
+.fx-xu-lane[data-lane="reads"] { background: var(--t-warn); }
+.fx-xu-lane[data-lane="other"] { background: color-mix(in srgb, var(--t-text) 35%, var(--t-bg)); }
+.fx-xu-budget { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--fx-hover); }
+.fx-xu-budget i { flex: none; width: var(--part, 0%); height: 100%; }
+.fx-xu-dots { display: flex; flex-wrap: wrap; gap: 12px 16px; }
+.fx-xu-dot { display: inline-flex; align-items: center; gap: 6px; color: var(--t-dim); font-size: 12.5px; }
+.fx-xu-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--t-dim); }
+.fx-xu-dot[data-tone="success"]::before { background: var(--t-success); }
+.fx-xu-dot[data-tone="warn"]::before { background: var(--t-warn); }
+.fx-xu-dot[data-tone="danger"]::before { background: var(--t-danger); }
+.fx-xu-days { position: relative; display: flex; align-items: stretch; gap: 8px; height: 108px; }
+.fx-xu-days__line { position: absolute; left: 0; right: 0; bottom: calc(16px + (100% - 20px) * var(--warn, 0.7)); height: 0; border-top: 1px dashed var(--t-warn); pointer-events: none; }
+.fx-xu-day { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
+.fx-xu-day__bar { flex: 1; display: flex; align-items: flex-end; justify-content: center; width: 100%; }
+.fx-xu-day b { display: block; width: 70%; max-width: 28px; height: var(--h, 0%); border-radius: 3px 3px 0 0; background: var(--t-accent); }
+.fx-xu-day[data-warning="true"] b { background: var(--t-warn); }
+.fx-xu-day[data-over="true"] b { background: var(--t-danger); }
+.fx-xu-day > span:last-child { color: var(--t-dim); font-size: 11px; font-variant-numeric: tabular-nums; }
+.fx-xu-rows { display: grid; gap: 6px; }
+.fx-xu-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
+.fx-xu-row span { color: var(--t-text); }
+.fx-xu-row b { color: var(--t-strong); font-weight: 650; font-variant-numeric: tabular-nums; }
+.fx-xu .fx-notice { margin-top: 4px; }
+@media (max-width: 639px) {
+  .fx-xu__top { gap: 14px; }
+  .fx-xu-ring { width: 96px; height: 96px; }
+  .fx-xu-ring__num { font-size: 20px; }
+  .fx-xu-hours { overflow-x: auto; }
+  .fx-xu-hour { flex: none; width: 10px; }
+  .fx-xu__fold { padding: 12px; }
+}

package/server/ui/invoicing.js

@@ -10,9 +10,10 @@ 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 { jobChangeReview } from '/assets/ui/job-change.js';
-import { columnTable, rowCells, viewSaver } from '/assets/ui/columns.js';
-import { filterJobs, INVOICE_COLUMNS, normaliseListView } from '/assets/ui/job-view.js';
-import { INVOICE_FILTER_FIELDS, normaliseInvoicesView } from '/assets/ui/list-views.js';
+import { columnTable, dateCell, fieldColumn, rowCells, viewSaver } from '/assets/ui/columns.js';
+import { fieldGroup, filterCount, filterJobs, INVOICE_COLUMNS, invoiceColumnsView } from '/assets/ui/job-view.js';
+import { INVOICE_FILTER_FIELDS, invoiceFilterKind, invoiceValue, normaliseInvoicesView } from '/assets/ui/list-views.js';
+import { listPager, PAGE_SIZES } from '/assets/ui/pager.js';
 import { savedViews } from '/assets/ui/saved-views.js';
 import { findBox, today, viewBar } from '/assets/ui/view-bar.js';
 
@@ -114,28 +115,25 @@ const showDate = (iso) => (iso ? new Date(`${iso}T00:00:00`).toLocaleDateString(
 
 // ── The list ───────────────────────────────────────────────────────────────
 
-// The filter's fields: list-views.js (the server checks saved views with them).
+// The filter's fields and rules: list-views.js. The server checks saved
+// views with them and filters every invoice of a tab (GET /invoices).
 const FILTER_FIELDS = INVOICE_FILTER_FIELDS;
 const PROBLEM_OPS = { yes: 'Has one', no: 'Has none' };
 const FILTER_KEY = 'flow_invoice_filters';
-const filterKind = (field) => FILTER_FIELDS[field]?.kind ?? null;
-
-// An invoice's value for a filter field, as the filter compares it.
-export function invoiceValue(invoice, field) {
-  switch (field) {
-    case 'client': return invoice.contactName ?? null;
-    case 'number': return invoice.number ?? null;
-    case 'reference': return invoice.reference ?? null;
-    case 'date': return invoice.issueDate ?? invoice.createdAt?.slice(0, 10) ?? null;
-    case 'total': return invoice.totalCents == null ? null : invoice.totalCents / 100;
-    case 'problem': return (invoice.problems?.length ?? 0) > 0;
-    default: return null;
-  }
-}
+const SIZE_KEY = 'flow_invoice_page_size';
+const filterKind = invoiceFilterKind;
+export { invoiceValue };
 
 // The invoices a filter view keeps.
 export const keptInvoices = (invoices, view, now = today()) => filterJobs(invoices, view, { valueOf: invoiceValue, kindOf: filterKind, today: now });
 
+// Rows per page, kept on this device.
+function readSize() {
+  let size = null;
+  try { size = Number(localStorage.getItem(SIZE_KEY)); } catch { /* none kept */ }
+  return PAGE_SIZES.includes(size) ? size : 100;
+}
+
 function readFilters() {
   try { return normaliseInvoicesView(JSON.parse(localStorage.getItem(FILTER_KEY))); } catch { return normaliseInvoicesView(null); }
 }
@@ -149,21 +147,27 @@ export async function renderInvoiceList(main, ui) {
   sessionStorage.removeItem(NAV_BACK);
   const state = {
     status: TABS.some(([id]) => id === saved) ? saved : 'ready', q: returning ? back?.q ?? '' : '', ticked: new Set(), view: readFilters(),
-    columns: normaliseListView(ui.me?.views?.invoices, INVOICE_COLUMNS),
+    // The page of rows shown: the server filters and cuts it (GET /invoices).
+    offset: returning ? back?.offset ?? 0 : 0, limit: readSize(),
+    columns: invoiceColumnsView(ui.me?.views?.invoices),
+    // The lab's custom fields, their job values and the people a person
+    // field names (GET /api/custom-fields): columns a person can add.
+    fields: [], values: new Map(), people: [],
   };
   // The list's columns: resize, move, hide, kept with the account. A tab
-  // has some of them (`available`, set as it draws).
+  // has some of them (`available`, set as it draws), each with its label.
   let available = Object.keys(INVOICE_COLUMNS);
+  const labelOf = (id) => INVOICE_COLUMNS[id] ?? state.fields.find((f) => fieldGroup(f.id) === id)?.name ?? id;
   const saveColumns = viewSaver(ui, 'invoices');
   const heads = columnTable(h, {
     order: () => state.columns.columns,
     widths: () => state.columns.widths,
     change: (patch) => {
-      state.columns = normaliseListView({ ...state.columns, ...patch }, INVOICE_COLUMNS);
+      state.columns = invoiceColumnsView({ ...state.columns, ...patch });
       saveColumns(state.columns);
       if (raw) draw(raw);
     },
-    hidden: () => available.filter((id) => !state.columns.columns.includes(id)).map((id) => ({ id, label: INVOICE_COLUMNS[id] })),
+    hidden: () => available.filter((id) => !state.columns.columns.includes(id)).map((id) => ({ id, label: labelOf(id) })),
   });
   const tabs = h('div', { class: 'fx-tabs', role: 'tablist' });
   let timer;
@@ -171,17 +175,18 @@ export async function renderInvoiceList(main, ui) {
     label: 'Find a number, client or reference', value: state.q,
     oninput: (words) => {
       clearTimeout(timer);
-      timer = setTimeout(() => { state.q = words.trim(); load(); }, 200);
+      timer = setTimeout(() => { state.q = words.trim(); state.offset = 0; load(); }, 200);
     },
   });
   // The Filter chip: the same panel as on Jobs and Reconcile (view-bar.js).
-  // It filters the rows of the tab shown, on this device.
-  // A change to the filter: kept in this browser, and drawn.
+  // The server filters every invoice of the tab shown.
+  // A change to the filter: kept in this browser, and the first page loads.
   function setView(patch) {
     state.view = normaliseInvoicesView({ ...state.view, ...patch });
     try { localStorage.setItem(FILTER_KEY, JSON.stringify(state.view)); } catch { /* the page still works, it forgets */ }
     views.draw();
-    if (raw) draw(raw);
+    state.offset = 0;
+    if (raw) load();
   }
   // The person's named views (saved-views.js): their default opens on a
   // new visit.
@@ -189,12 +194,11 @@ export async function renderInvoiceList(main, ui) {
   const opening = views.opening();
   if (opening) state.view = normaliseInvoicesView(opening);
   views.draw();
-  const labels = (list) => [...new Set(list.filter(Boolean))].sort((a, b) => a.localeCompare(b)).map((v) => ({ value: v, label: v }));
   const filterMenu = viewBar(h).filterMenu({
     fields: () => Object.entries(FILTER_FIELDS).map(([value, f]) => ({ value, label: f.label, icon: f.icon })),
     kindOf: filterKind,
     opsOf: (field) => (field === 'problem' ? PROBLEM_OPS : null),
-    choicesOf: (field) => (field === 'client' ? labels((raw?.invoices ?? []).map((i) => i.contactName)) : []),
+    choicesOf: (field) => (field === 'client' ? (raw?.clients ?? []).map((v) => ({ value: v, label: v })) : []),
     view: () => state.view,
     change: setView,
     first: 'client',
@@ -203,20 +207,42 @@ export async function renderInvoiceList(main, ui) {
   const controls = h('div', { class: 'fx-viewbar', role: 'group', 'aria-label': 'Filter' }, ...filterMenu.node);
   const host = h('div', { class: 'fx-panel' }, h('div', { class: 'fx-skeleton' }));
   const bulk = bulkBar(ui);
-  const context = await flow('/api/invoicing/context').catch(() => ({ canIssue: false }));
+  // The pages, in the foot under the rows (pager.js).
+  const pager = listPager(h, {
+    label: 'Invoice pages',
+    change: ({ offset, limit }) => {
+      if (limit !== state.limit) { try { localStorage.setItem(SIZE_KEY, String(limit)); } catch { /* it forgets */ } }
+      Object.assign(state, { offset, limit });
+      state.ticked.clear();
+      // A new page opens at its first row.
+      frame.body.scrollTop = 0;
+      load();
+    },
+  });
+  // Custom fields are extra: the list still shows without them.
+  const [context, fields, values] = await Promise.all([
+    flow('/api/invoicing/context').catch(() => ({ canIssue: false })),
+    flow('/api/custom-fields').catch(() => null), flow('/api/custom-fields/values').catch(() => null),
+  ]);
+  state.fields = fields?.fields ?? [];
+  state.people = fields?.people ?? [];
+  const valueKey = (job, fieldId) => `${job.sourceSystem}\u0000${job.sourceJobRef}\u0000${fieldId}`;
+  state.values = new Map((values?.values ?? []).map((v) => [valueKey(v, v.fieldId), v.value]));
   let body = null;
   let raw = null;
-  const openTab = (id) => { state.status = id; state.ticked.clear(); sessionStorage.setItem('flow_invoice_tab', id); load(); };
+  const openTab = (id) => { state.status = id; state.offset = 0; state.ticked.clear(); sessionStorage.setItem('flow_invoice_tab', id); load(); };
   const alerts = alertStrip(ui, 'invoices', { onTab: openTab });
   // The tabs and search stay at the top while the rows scroll up under them;
   // the bulk bar floats at the foot (ClickUp's layout). Sending is a bulk
   // action: tick rows (the head tick takes every row shown), then Send.
   const head = listHead('Invoices', {
     actions: [h('a', { class: 'fx-btn fx-btn--primary', href: '/invoices/new', onclick: go }, 'New invoice')],
-    views: views.element, start: tabs, end: [controls, find.element], line: true, sticky: true,
+    views: views.element, start: tabs, controls, controlsAt: 'end', end: find.element, line: true, sticky: true,
   });
   const [title, ...top] = head.nodes;
   const frame = listFrame(main, host);
+  // The pages sit in the window's foot bar, beside the count.
+  frame.tools.append(pager.element);
   main.append(title, alerts.element, ...top, frame.element, bulk.element);
 
   const plural = (n, one, many) => `${n} ${n === 1 ? one : many}`;
@@ -373,7 +399,11 @@ export async function renderInvoiceList(main, ui) {
   const seen = new Map();
   let asked = 0;
   async function load() {
-    const query = new URLSearchParams({ status: state.status, ...(state.q ? { q: state.q } : {}) });
+    const query = new URLSearchParams({
+      status: state.status, offset: String(state.offset), limit: String(state.limit), today: today(),
+      ...(state.q ? { q: state.q } : {}),
+      ...(filterCount(state.view, filterKind) ? { filter: JSON.stringify(state.view) } : {}),
+    });
     const key = String(query);
     const mine = ++asked;
     if (seen.has(key)) {
@@ -414,14 +444,22 @@ export async function renderInvoiceList(main, ui) {
   async function draw(answer) {
     raw = answer;
     filterMenu.draw();
-    body = { ...answer, invoices: keptInvoices(answer.invoices, state.view) };
+    body = answer;
+    // A page past the end (rows went to another tab): show the last one.
+    if (!answer.invoices.length && answer.total && answer.offset) {
+      state.offset = Math.max(0, Math.floor((answer.total - 1) / state.limit) * state.limit);
+      load();
+      return;
+    }
+    pager.draw({ offset: answer.offset ?? 0, limit: answer.limit ?? state.limit, total: answer.total ?? answer.invoices.length });
     const shown = new Set(body.invoices.map((i) => i.id));
-    frame.count(plural(body.invoices.length, 'invoice', 'invoices'));
+    const total = answer.total ?? body.invoices.length;
+    frame.count(`${total.toLocaleString('en-AU')} ${total === 1 ? 'invoice' : 'invoices'}${total ? ` · ${formatCents(answer.totalCents ?? 0)}` : ''}`);
     for (const id of state.ticked) if (!shown.has(id)) state.ticked.delete(id);
     drawTabs(body.counts);
     drawBar();
     if (!body.invoices.length) {
-      host.replaceChildren(h('p', { class: 'fx-empty' }, answer.invoices.length
+      host.replaceChildren(h('p', { class: 'fx-empty' }, filterCount(state.view, filterKind)
         ? 'No invoice in this tab passes the filter.'
         : state.q
         ? 'No invoice matches that search.'
@@ -429,7 +467,7 @@ export async function renderInvoiceList(main, ui) {
       return;
     }
     // 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) });
+    saveNav({ tab: state.status, q: state.q, offset: state.offset, ids: body.invoices.map((i) => i.id) });
     const open = (href) => { saveNav({ ...readNav(), scrollY: window.scrollY, frameY: frame.body.scrollTop }); go(href); };
     const link = (href, label) => h('a', { class: 'fx-strong', href, onclick: (event) => { event.preventDefault(); event.stopPropagation(); open(href); } }, label);
     const showProblem = state.status === 'pending';
@@ -487,13 +525,24 @@ export async function renderInvoiceList(main, ui) {
       reference: showProblem
         ? { label: 'Problem', kind: 'text', cell: problemCell }
         : { kind: 'text', className: 'fx-dim', cell: (i) => i.reference ?? '—' },
-      date: { label: created ? 'Created' : 'Date', kind: 'date', className: 'fx-dim', cell: (i) => showDate(i.issueDate ?? i.createdAt?.slice(0, 10)) },
+      date: { label: created ? 'Created' : 'Date', kind: 'date', className: 'fx-dim', cell: (i) => dateCell(h, i.issueDate ?? i.createdAt?.slice(0, 10)) },
+      due: { kind: 'date', className: 'fx-dim', cell: (i) => dateCell(h, i.dueDate) },
       total: { kind: 'total', num: true, className: 'fx-strong', cell: (i) => formatCents(i.totalCents) },
       status: { kind: 'status', className: 'fx-status-cell', cell: statusCell },
       linked: linked ? { kind: 'link', cell: linkCell } : null,
+      // The invoice's job (from the work system): its case, practitioner and
+      // the day it shipped.
+      case: { kind: 'case', className: 'fx-dim', cell: (i) => (i.job ? caseNumber(i.job) ?? '—' : '—') },
+      practitioner: { kind: 'text', className: 'fx-dim', cell: (i) => i.job?.practitioner ?? '—' },
+      shipped: { kind: 'date', className: 'fx-dim', cell: (i) => dateCell(h, i.job?.shippedOn ?? null) },
     };
+    // Each custom field is a column too: the value of the invoice's job.
+    for (const field of state.fields) {
+      const id = fieldGroup(field.id);
+      ALL[id] = fieldColumn(h, field, { id, valueOf: (i) => (i.job ? state.values.get(valueKey(i.job, field.id)) ?? null : null), people: state.people });
+    }
     available = Object.keys(ALL).filter((id) => ALL[id]);
-    const columns = state.columns.columns.filter((id) => ALL[id]).map((id) => ({ id, label: INVOICE_COLUMNS[id], ...ALL[id] }));
+    const columns = state.columns.columns.filter((id) => ALL[id]).map((id) => ({ id, label: labelOf(id), ...ALL[id] }));
     host.replaceChildren(heads.table({
       className: 'fx-table--rows',
       columns,