@arcforgelabs/flow 2026.10.43 → 2026.10.44

package/server/ui/flow.css

@@ -7,6 +7,10 @@
 
 :root {
   --fx-line: color-mix(in srgb, var(--t-text) 12%, transparent);
+  /* The side space of every page. Pages use the whole width with this slim
+     edge, as ClickUp and HubSpot do; the title, toolbar and content start at
+     one place on every page. */
+  --fx-gutter: clamp(16px, 2vw, 24px);
   --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);
@@ -90,6 +94,9 @@ body:is([data-state="off"], [data-state="error"], [data-state="no-access"]) .fx-
 }
 .fx-input:hover, .fx-select:hover { border-color: var(--t-text); }
 .fx-input:focus, .fx-select:focus { outline: none; border-color: var(--t-text); box-shadow: var(--fx-focus); }
+.fx-input[aria-invalid="true"], .fx-select[aria-invalid="true"] {
+  border-color: var(--t-danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-danger) 28%, transparent);
+}
 .fx-select {
   width: auto; min-width: 112px; padding-right: 30px; appearance: none; cursor: pointer;
   background-image: linear-gradient(45deg, transparent 50%, var(--t-dim) 50%), linear-gradient(135deg, var(--t-dim) 50%, transparent 50%);
@@ -167,7 +174,7 @@ body:is([data-state="off"], [data-state="error"], [data-state="no-access"]) .fx-
   .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, .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 { flex: 1; min-width: 0; padding: 32px var(--fx-gutter) 64px; display: grid; gap: 20px; align-content: start; }
 .fx-main:focus { outline: none; box-shadow: none; }
 
 /* Page header: the title only (no line under it), then the actions,
@@ -331,6 +338,25 @@ a.fx-link:hover, a.fx-link:focus-visible { border-color: var(--t-strong); }
   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-tiles { display: grid; gap: 12px; }
+.fx-tiles + .fx-tiles { margin-top: 16px; }
+.fx-tiles__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.fx-tiles__head h2 { color: var(--t-strong); font: 600 15px/1.3 var(--t-body); }
+.fx-tiles__more { display: inline-flex; align-items: center; gap: 4px; color: var(--t-dim); font-size: 13.5px; text-decoration: none; }
+.fx-tiles__more:hover, .fx-tiles__more:focus-visible { color: var(--t-strong); }
+.fx-tiles__more .fx-lucide { width: 15px; height: 15px; }
+.fx-tiles__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
+.fx-tile {
+  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px 12px 12px;
+  border: 1px solid var(--fx-line); border-radius: var(--t-radius-lg); background: var(--t-paper); color: var(--t-text); text-decoration: none;
+  transition: border-color 140ms var(--fx-ease), background-color 140ms var(--fx-ease);
+}
+.fx-tile:hover, .fx-tile:focus-visible { border-color: var(--t-control); background: var(--fx-hover); }
+.fx-tile .fx-logo { width: 48px; height: 48px; border-radius: var(--t-radius); }
+.fx-tile .fx-logo--icon { background: var(--fx-hover); color: var(--t-strong); box-shadow: inset 0 0 0 1px var(--fx-line); }
+.fx-tile h3 { overflow: hidden; color: var(--t-strong); font: 600 14.5px/1.35 var(--t-body); text-overflow: ellipsis; white-space: nowrap; }
+.fx-tile__meta { color: var(--t-dim); font-size: 12.5px; white-space: nowrap; }
+.fx-logo--icon .fx-lucide { width: 22px; height: 22px; }
 .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; }
@@ -407,6 +433,28 @@ 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; }
+.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__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; }
+.fx-views__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fx-views__dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--t-accent); }
+.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 .fx-lucide { width: 14px; height: 14px; }
+.fx-views__end { display: inline-flex; gap: 6px; margin-left: auto; }
+@media (hover: none) { .fx-views__item .fx-cfm__more { opacity: 1; } }
+
 /* 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; }
@@ -492,8 +540,6 @@ a.fx-strong:hover { text-decoration: underline; }
 }
 
 /* ── Jobs board ─────────────────────────────────────────────────────────── */
-/* 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; }
@@ -544,14 +590,16 @@ a.fx-strong:hover { text-decoration: underline; }
 .fx-chipset--on .fx-chip__clear { border-color: var(--t-accent-brd, var(--t-accent)); background: var(--t-accent-bg); color: var(--t-accent); }
 /* Group by, Sort and Filters: rows of selects with a bin at the end, as
    ClickUp lays them out, in Flow's own look. */
-.fx-pop.fx-pop--rows { width: max-content; min-width: 360px; max-width: min(680px, calc(100vw - 16px)); max-height: min(520px, calc(100vh - 32px)); padding: 12px; }
+.fx-pop.fx-pop--rows { width: max-content; min-width: 360px; max-width: min(760px, calc(100vw - 16px)); max-height: min(520px, calc(100vh - 32px)); padding: 12px; }
 .fx-rows__title { margin: 0 0 10px; color: var(--t-strong); font: 600 14px/1.3 var(--t-body); }
 .fx-rows { display: grid; gap: 8px; }
-.fx-rows__row { display: grid; grid-template-columns: 78px minmax(130px, 1fr) minmax(120px, auto) minmax(150px, 1.2fr) 32px; gap: 8px; align-items: center; }
+.fx-rows__row { display: grid; grid-template-columns: 64px minmax(140px, 1fr) minmax(120px, auto) minmax(170px, 1.3fr) 32px; gap: 8px; align-items: start; }
 .fx-rows__row--sort { grid-template-columns: 78px minmax(150px, 1fr) minmax(140px, auto) 32px; }
 .fx-rows__row--group { grid-template-columns: minmax(170px, 1fr) minmax(130px, auto) 32px; }
 .fx-rows .fx-select, .fx-rows .fx-input { width: 100%; min-width: 0; min-height: 32px; font-size: 13px; }
-.fx-rows__lead { color: var(--t-dim); font: 500 13px/1.2 var(--t-body); }
+/* Rows align at the top, so a value on two lines (a date range) keeps the
+   bin beside its first line. */
+.fx-rows__lead { display: flex; align-items: center; min-height: 32px; color: var(--t-dim); font: 500 13px/1.2 var(--t-body); }
 .fx-rows__value { overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
 .fx-rows__gone { grid-column: span 3; color: var(--t-dim); font-size: 13px; font-style: italic; }
 .fx-rows__bin {
@@ -565,13 +613,51 @@ a.fx-strong:hover { text-decoration: underline; }
 .fx-rows__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
 .fx-rows__add { display: inline-flex; align-items: center; gap: 6px; }
 .fx-rows__add .fx-lucide { width: 14px; height: 14px; }
+/* The filter panel's groups, as ClickUp's: each group a shaded box with its
+   own rows and "Add nested filter"; groups stack with And / Or at the left. */
+.fx-fgroup { display: grid; gap: 8px; padding: 10px; border-radius: var(--t-radius-lg); background: var(--fx-hover); }
+.fx-fgroups { display: grid; gap: 8px; }
+.fx-fgroups__row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; align-items: start; }
+.fx-fgroups__row > .fx-rows__lead, .fx-fgroups__row > span { padding-top: 16px; }
+.fx-fgroup__add { justify-self: start; padding: 2px 4px; border: 0; background: none; color: var(--t-dim); font: 500 12.5px/1.3 var(--t-body); cursor: pointer; }
+.fx-fgroup__add:hover, .fx-fgroup__add:focus-visible { color: var(--t-strong); text-decoration: underline; outline: none; }
+.fx-choice { display: inline-flex; align-items: center; gap: 6px; min-width: 0; text-align: left; }
+.fx-choice .fx-lucide { flex: none; width: 14px; height: 14px; color: var(--t-dim); }
+.fx-choice__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fx-rows .fx-rows__join { min-width: 0; width: 100%; padding-left: 8px; font: 600 12px/1 var(--t-data, var(--t-body)); letter-spacing: .04em; }
+.fx-rows__word { font: 600 12px/1 var(--t-data, var(--t-body)); letter-spacing: .04em; padding-left: 9px; }
+.fx-fgroups__row .fx-rows__join { min-width: 0; width: 64px; padding-left: 8px; font: 600 12px/1 var(--t-data, var(--t-body)); letter-spacing: .04em; min-height: 32px; }
+.fx-rows__date { display: flex; flex-wrap: wrap; gap: 6px; overflow: visible; }
+.fx-rows__date > .fx-choice { flex: 1 1 130px; }
+.fx-rows__date .fx-input { width: auto; flex: 1 1 130px; }
+.fx-rows__days { display: inline-flex; flex: 1 1 130px; align-items: center; gap: 6px; }
+.fx-rows__days .fx-input[type="number"] { width: 72px; flex: none; }
+.fx-pop__bar { display: flex; align-items: center; justify-content: space-between; }
+.fx-pop__link { padding: 4px 8px; border: 0; background: none; color: var(--t-accent); font: 500 12.5px/1.3 var(--t-body); cursor: pointer; }
+.fx-pop__link:hover, .fx-pop__link:focus-visible { text-decoration: underline; outline: none; }
 .fx-pop.fx-pop--choices { min-width: 200px; max-width: 300px; padding: 6px; }
+/* A value list row, as ClickUp's: mark (when there is one), name, tick box
+   at the right. No empty space at the left. */
+.fx-pop__item--check { gap: 8px; }
+.fx-pop__item--check .fx-pop__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fx-pop__box { display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; margin-left: auto; border: 1px solid var(--t-control); border-radius: var(--t-radius); color: var(--t-on-primary); }
+.fx-pop__item--check[aria-checked="true"] .fx-pop__box { border-color: var(--t-primary); background: var(--t-primary); }
+.fx-pop__box svg { width: 12px; height: 12px; }
+.fx-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--cf, var(--t-dim)); }
+.fx-dot--stage { --stage: var(--t-accent); background: var(--stage); }
+.fx-dot--stage[data-rank="0"] { --stage: var(--t-mute); }
+.fx-dot--stage[data-rank="3"], .fx-dot--stage[data-rank="4"] { --stage: color-mix(in srgb, var(--t-accent) 45%, var(--t-success)); }
+.fx-dot--stage[data-rank="5"], .fx-dot--stage[data-rank="6"] { --stage: var(--t-success); }
+.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) {
   .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 { grid-column: 1 / -1; }
+  .fx-rows__row > .fx-rows__lead, .fx-rows__row > .fx-select:first-child, .fx-rows__row > .fx-rows__join { grid-column: 1 / -1; }
+  .fx-rows__row > .fx-rows__join { width: 72px; }
+  .fx-fgroups__row { grid-template-columns: minmax(0, 1fr); }
+  .fx-fgroups__row > .fx-rows__lead, .fx-fgroups__row > span { padding-top: 0; }
   .fx-rows__row > .fx-rows__value { grid-column: 1 / 3; }
   .fx-rows__row > .fx-rows__value--none { display: none; }
 }
@@ -610,6 +696,42 @@ th:hover .fx-th-sort, .fx-th-sort:focus-visible, .fx-th-sort--on { opacity: 1; }
 .fx-th-sort .fx-lucide { width: 13px; height: 13px; }
 .fx-th-sort__n { font: 700 10px/1 var(--t-body); }
 @media (hover: none) { .fx-th-sort { opacity: 1; } }
+/* A sized list (columns.js): each column has its width, the table is as
+   wide as its columns (never stretched; space left over stays empty) and
+   scrolls sideways past the page. A head's right
+   edge is a grip that resizes the column; a head drags to move it, and a
+   line shows where it lands. */
+.fx-table-scroll { overflow-x: auto; scrollbar-width: thin; }
+.fx-table.fx-table--sized { table-layout: fixed; }
+.fx-table--sized th, .fx-table--sized td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fx-table--sized th { position: relative; }
+/* Every cell is one line: a long value ends in "…" and the row keeps its
+   height, as HubSpot's. A wrapper in a cell (a client with its warning
+   mark, a stage pill) shrinks its text, never its mark. */
+.fx-table--sized td > * { max-width: 100%; }
+.fx-table--sized .fx-job__cell { display: flex; min-width: 0; }
+.fx-table--sized .fx-job__cell > * { flex: none; }
+.fx-table--sized .fx-job__cell > .fx-strong,
+.fx-table--sized .fx-status { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fx-table--sized .fx-job__cell > .fx-strong { flex: 0 1 auto; }
+.fx-table--sized .fx-th-cell { max-width: 100%; }
+.fx-table--sized .fx-th { overflow: hidden; text-overflow: ellipsis; }
+.fx-th--drag .fx-th { cursor: grab; touch-action: none; }
+.fx-th--drag[data-dragging] { opacity: .5; }
+.fx-th--drag[data-dragging] .fx-th { cursor: grabbing; }
+.fx-table--sized th[data-drop]::after { content: ""; position: absolute; top: 6px; bottom: 6px; width: 2px; border-radius: 1px; background: var(--t-accent); }
+.fx-table--sized th[data-drop="before"]::after { left: 0; }
+.fx-table--sized th[data-drop="after"]::after { right: 0; }
+.fx-th-grip { position: absolute; top: 0; right: 0; bottom: 0; width: 8px; cursor: col-resize; touch-action: none; }
+.fx-th-grip::after { content: ""; position: absolute; top: 25%; bottom: 25%; right: 3px; width: 2px; border-radius: 1px; background: transparent; }
+th:hover > .fx-th-grip::after { background: var(--t-brd-hi); }
+.fx-th-grip:hover::after, .fx-th-grip:focus-visible::after, .fx-table--sized[data-resizing] .fx-th-grip:active::after { background: var(--t-accent); }
+.fx-th-grip:focus-visible { outline: none; }
+.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; }
 .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); }
@@ -624,9 +746,41 @@ th:hover .fx-th-sort, .fx-th-sort:focus-visible, .fx-th-sort--on { opacity: 1; }
 .fx-board__head { display: flex; flex: none; align-items: center; gap: 8px; min-width: 0; padding: 2px 4px 4px 2px; }
 .fx-board__sum { flex: none; margin-left: auto; color: var(--t-dim); font-size: 12px; font-variant-numeric: tabular-nums; }
 .fx-board__cards { display: grid; gap: 8px; align-content: start; min-height: 0; max-height: 70vh; padding-right: 2px; overflow-y: auto; scrollbar-width: thin; }
+/* listFrame() in kit.js: the window of a list or board (Jobs, Invoices,
+   Reconcile). Its body scrolls both ways; the foot holds the count. A table
+   or panel inside drops its own frame. On a wide, tall screen the page is
+   the window's height and does not scroll itself: the frame fills it, and
+   on the board each lane scrolls inside itself. */
+.fx-frame { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--fx-line); border-radius: var(--t-radius-lg); background: var(--t-paper); box-shadow: var(--t-shadow); overflow: hidden; }
+.fx-frame__view { display: flex; flex-direction: column; min-height: 0; }
+.fx-frame__body { min-height: 0; overflow: auto; scrollbar-width: thin; }
+/* edgeFade() in kit.js: a soft fade over each edge with more content past
+   it, in the colour under the rows (--fx-fade). */
+.fx-fades { position: relative; --fx-fade: var(--t-paper); }
+.fx-fade { position: absolute; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .15s; }
+.fx-fade[data-edge="top"] { inset: 0 0 auto; height: 24px; background: linear-gradient(to bottom, var(--fx-fade), transparent); }
+.fx-fade[data-edge="bottom"] { inset: auto 0 0; height: 24px; background: linear-gradient(to top, var(--fx-fade), transparent); }
+.fx-fade[data-edge="left"] { inset: 0 auto 0 0; width: 24px; background: linear-gradient(to right, var(--fx-fade), transparent); }
+.fx-fade[data-edge="right"] { inset: 0 0 0 auto; width: 24px; background: linear-gradient(to left, var(--fx-fade), transparent); }
+.fx-fades[data-fade~="top"] > .fx-fade[data-edge="top"], .fx-fades[data-fade~="bottom"] > .fx-fade[data-edge="bottom"],
+.fx-fades[data-fade~="left"] > .fx-fade[data-edge="left"], .fx-fades[data-fade~="right"] > .fx-fade[data-edge="right"] { opacity: 1; }
+.fx-main--board .fx-frame__view { --fx-fade: var(--t-bg); }
+.fx-board__col.fx-fades { --fx-fade: var(--t-s1); }
+.fx-board__col > .fx-fade[data-edge="bottom"] { border-radius: 0 0 var(--t-radius-lg) var(--t-radius-lg); }
+.fx-frame__body .fx-panel { border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
+.fx-frame__body .fx-empty { padding: 24px; }
+.fx-frame .fx-table-scroll { overflow: visible; }
+.fx-frame thead th { position: sticky; top: 0; z-index: 2; }
+.fx-frame__foot { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 6px 12px; border-top: 1px solid var(--fx-line); color: var(--t-dim); font-size: 13px; font-variant-numeric: tabular-nums; }
+.fx-frame__tools { display: flex; align-items: center; gap: 8px; }
+.fx-main--board .fx-frame__body { padding: 12px; background: var(--t-bg); }
 @media (min-width: 821px) and (min-height: 560px) {
-  .fx-main--board { height: 100vh; height: 100dvh; padding: 24px 24px 16px; grid-template-rows: auto auto minmax(0, 1fr); align-content: stretch; }
-  .fx-main--board > .fx-jobs { min-height: 0; }
+  .fx-main--frame { height: 100vh; height: 100dvh; padding-bottom: 16px; display: flex; flex-direction: column; }
+  .fx-main--frame > * { flex: none; }
+  .fx-main--frame > .fx-frame { flex: 1; min-height: 0; }
+  .fx-main--frame .fx-frame__view, .fx-main--frame .fx-frame__body { flex: 1; }
+  .fx-main--board .fx-frame__body { display: flex; overflow: hidden; }
+  .fx-main--board .fx-jobs { flex: 1; min-width: 0; min-height: 0; }
   .fx-main--board .fx-board { height: 100%; overflow-y: hidden; align-items: stretch; }
   .fx-main--board .fx-board__cards { flex: 1; max-height: none; }
 }
@@ -695,9 +849,9 @@ th:hover .fx-th-sort, .fx-th-sort:focus-visible, .fx-th-sort--on { opacity: 1; }
 .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) 300px; }
-/* No sidecar: the main area takes the room. Review is wider for its table. */
+/* No sidecar: the main area takes the room. Fix is wider for the change 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__grid:has(> .fx-sidecar [data-tab="fix"][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; }
@@ -715,16 +869,22 @@ th:hover .fx-th-sort, .fx-th-sort:focus-visible, .fx-th-sort--on { opacity: 1; }
 .fx-task__late { color: var(--t-danger) !important; }
 .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 { 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 { 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__lines h3 { margin: 0; color: var(--t-dim); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
+/* What to fix: one toggle chip a problem beside the stage; its problem opens
+   in the sidecar's Fix tab (jobs.js openJob). One layout with or without. */
+.fx-task__stage { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+.fx-task__fixchip { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border: 1px solid var(--t-warn-brd, var(--t-warn)); border-radius: 999px; background: var(--t-warn-bg); color: var(--t-warn); font-size: 12.5px; font-weight: 600; }
+.fx-task__fixchip .fx-lucide { width: 14px; height: 14px; }
+.fx-task__fixchip:hover { border-color: var(--t-warn); }
+.fx-task__fixchip:focus-visible { box-shadow: var(--fx-focus); }
+/* Pressed: its problem is open in the sidecar's Fix tab. */
+.fx-task__fixchip[aria-pressed="true"] { border-color: var(--t-warn); background: var(--t-warn); color: var(--t-paper); }
+.fx-task__fixitem { display: grid; gap: 8px; justify-items: start; font-size: 13.5px; }
+.fx-task__fixitem > strong { color: var(--t-strong); }
+.fx-task__fixitem > p { margin: 0; }
+.fx-task__fixitem > .fx-task__review { justify-self: stretch; }
+.fx-task__fixgo .fx-lucide { width: 14px; height: 14px; }
+.fx-task__fixgo { display: inline-flex; align-items: center; gap: 6px; }
 .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); }
 .fx-task__choose > span { flex: 1 1 200px; }
@@ -736,7 +896,6 @@ th:hover .fx-th-sort, .fx-th-sort:focus-visible, .fx-th-sort--on { opacity: 1; }
    invoice opened from Invoices (the pager on top). */
 .fx-rec { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
 .fx-rec .fx-lucide { width: 16px; height: 16px; }
-.fx-rec__gap { max-width: 1180px; }
 .fx-rec__gap .fx-toolbar .fx-rows__title { margin: 0; }
 .fx-rec__gap .fx-ph__actions .fx-btn, .fx-rec__acts .fx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
 .fx-rec__results { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@@ -804,7 +963,7 @@ 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__grid:has(> .fx-sidecar [data-tab="review"][aria-selected="true"]) { grid-template-columns: minmax(0, 1fr); }
+  .fx-task__grid:has(> .fx-sidecar [data-tab="fix"][aria-selected="true"]) { grid-template-columns: minmax(0, 1fr); }
   .fx-task__side { border-top: 1px solid var(--fx-line); border-left: 0; }
 }
 
@@ -945,6 +1104,8 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 /* ── Narrow screens: the sidebar becomes a bar across the top. ──────────── */
 @media (max-width: 820px) {
   .fx-shell { flex-direction: column; }
+  /* In a column, the page takes the full width, not its content's. */
+  .fx-main { width: 100%; }
   .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 { display: none; }
@@ -987,6 +1148,9 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
   .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, .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; }
@@ -1014,7 +1178,7 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
   .fx-table--jobs tr.fx-row-link > td.fx-c-client { grid-area: 1 / 2; }
   .fx-table--jobs tr.fx-row-link > td.fx-c-total { grid-area: 1 / 3; }
   .fx-table--jobs td.fx-c-end { display: none; }
-  .fx-table--jobs tr.fx-row-link > td[data-label]:not(.fx-c-total, .fx-c-stage)::before { content: attr(data-label) " "; color: var(--t-dim); font-size: 12px; }
+  .fx-table--jobs tr.fx-row-link > td[data-label]:not(.fx-c-client, .fx-c-total, .fx-c-stage)::before { content: attr(data-label) " "; color: var(--t-dim); font-size: 12px; }
   .fx-table--jobs tr.fx-table__group { grid-template-columns: 28px minmax(0, 1fr); background: var(--t-s1); }
   .fx-table--jobs tr.fx-table__group > td.fx-tick-cell { grid-row: 1; align-self: center; padding: 0; }
   .fx-table--jobs tr.fx-table__group > td { background: none; }
@@ -1217,7 +1381,7 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-cfs__where .fx-lucide { width: 16px; height: 16px; color: var(--t-dim); }
 .fx-cfs__foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--fx-line-soft); }
 .fx-cfs__delete { color: var(--t-danger); background: color-mix(in srgb, var(--t-danger) 12%, transparent); }
-.fx-cfs__delete:hover { background: color-mix(in srgb, var(--t-danger) 22%, transparent); }
+.fx-cfs__delete:hover { background: color-mix(in srgb, var(--t-danger) 28%, transparent); }
 .fx-cfs__delete .fx-lucide { width: 16px; height: 16px; }
 @media (max-width: 720px) {
   .fx-cfm { grid-template-columns: minmax(0, 1fr) 36px 32px; column-gap: 8px; }
@@ -1314,12 +1478,21 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 /* The Invoices list head (invoicing.js): tabs, search and the send bar stay
    at the top while rows scroll up under them; a shadow shows once they do.
    Narrow, the app bar (60px) sits above it. */
-.fx-listhead { position: sticky; top: 0; z-index: 5; margin: -12px calc(-1 * clamp(16px, 4vw, 48px)) 0; padding: 12px clamp(16px, 4vw, 48px) 0; background: var(--t-bg); transition: box-shadow .15s; }
+/* listHead() in kit.js: the toolbar row of every list. One height, with
+   chips, tabs or a Board/List switch in it, so the rows start at one place. */
+.fx-listhead > .fx-toolbar { min-height: 40px; }
+.fx-listhead .fx-toolbar__end { flex: 1 1 auto; }
+.fx-listhead > .fx-toolbar--plain { align-items: center; }
+.fx-listhead[data-sticky] { position: sticky; top: 0; z-index: 5; margin: -12px calc(-1 * var(--fx-gutter)) 0; padding: 12px var(--fx-gutter) 0; background: var(--t-bg); transition: box-shadow .15s; }
 .fx-listhead[data-stuck] { box-shadow: 0 10px 12px -12px rgba(0, 0, 0, .45); }
-.fx-listhead__edge { height: 0; margin-bottom: -20px; }
-@media (max-width: 820px) { .fx-listhead { top: 60px; } }
+/* The edge tells listHead when the rows reach the toolbar. In the page's
+   grid it takes a row and a gap of its own, so the toolbar moves up by both. */
+.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; }
+@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 { position: static; } }
+@media (max-width: 560px) { .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
@@ -1364,7 +1537,7 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 /* Xero › Import (server/ui/xero-import.js): Review compares one fact per row
    with ✓ or ≠ between the sides; the list and history tick rows for the bulk
    bar. */
-.fx-xi { display: flex; flex-direction: column; gap: 16px; min-width: 0; max-width: 980px; }
+.fx-xi { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
 .fx-xi .fx-lucide { width: 16px; height: 16px; }
 .fx-xi__views { display: inline-flex; border: 1px solid var(--fx-line); }
 .fx-xi__view { display: inline-grid; place-items: center; width: 40px; height: 36px; border: 0; background: transparent; color: var(--t-dim); cursor: pointer; }

package/server/ui/invoice-rules.js

@@ -12,10 +12,10 @@ const TEST_LABELS = {
   more_than: 'is more than', at_most: 'is at most', is: 'is', is_not: 'is not', is_one_of: 'is one of',
   is_empty: 'is empty', is_not_empty: 'is not empty', has: 'has', has_not: 'does not have',
   is_not_one_of: 'is not one of', contains: 'contains', does_not_contain: 'does not contain',
-  starts_with: 'starts with', does_not_start_with: 'does not start with', has_number: 'has a number', one_word: 'is one word',
+  starts_with: 'starts with', does_not_start_with: 'does not start with', has_number: 'has a number', number_in_words: 'has a number beside words', one_word: 'is one word',
 };
 const ACTION_LABELS = { wait: 'Wait for a person', skip: 'Never draft', pending: 'Pending, with a note' };
-const NO_VALUE = ['is_empty', 'is_not_empty', 'has_number', 'one_word'];
+const NO_VALUE = ['is_empty', 'is_not_empty', 'has_number', 'number_in_words', 'one_word'];
 const MANY = ['is_one_of', 'is_not_one_of'];
 const TYPED = ['contains', 'does_not_contain', 'starts_with', 'does_not_start_with'];
 
@@ -158,7 +158,7 @@ export function rulesSection(ui, title = 'Rules') {
     // A pending rule's note: what a person must fix. It shows on the draft.
     const note = h('input', {
       class: 'fx-input', maxlength: '200', value: draft?.action.note ?? '', 'aria-label': 'Note',
-      placeholder: 'For example: Put the practitioner in the job, then check the Reference.',
+      placeholder: 'Type a note',
     });
     const noteField = h('div', { class: 'fx-field' }, h('span', { class: 'fx-label' }, 'Note on the draft'), note);
     const showNote = () => { noteField.hidden = action.value !== 'pending'; };

package/server/ui/invoicing-settings.js

@@ -1,5 +1,6 @@
-// Settings, Rules (/invoicing-settings): a card for each part, like the
-// Integrations page, and one page for each (/invoicing-settings/<key>).
+// Settings, Rules (/invoicing-settings): a section of cards for each part,
+// like Claude's Customize 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).
@@ -19,43 +20,65 @@ const SEND_MODES = [
   { value: 'approve_and_email', label: 'Approved and emailed' },
 ];
 
-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.
+// The parts of Rules, each on its own page (/invoicing-settings/<key>).
 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) }) },
+  { key: 'invoices', title: 'Invoices', mount: (ui) => rulesSection(ui, 'Invoices') },
+  { key: 'drafts', title: 'Drafts', mount: (ui) => draftsSection(ui) },
+  { key: 'price-codes', title: 'Price codes', mount: (ui) => lineMappingSection(ui) },
 ];
 
+// What a rule does, as its card's mark: Pending, Waits, Never drafted.
+const KIND = {
+  pending: { mark: 'flag' },
+  wait: { mark: 'clock' },
+  skip: { mark: 'ban' },
+};
+const SHOWN = 6;
+
 export function renderInvoicingSettings(main, ui, id) {
-  const { h, flow, notice, pageHeader, tileCard, crumbs } = ui;
+  const { h, flow, notice, pageHeader, tileCard, tileSection, 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(() => {});
+  // The landing is Claude's Customize page: a section for each part, one-line
+  // cards, and "Show all" to the part's own page, a list.
+  const host = h('div', { style: { display: 'grid', gap: '20px' } }, h('div', { class: 'fx-skeleton' }));
+  main.append(pageHeader('Rules'), host);
+  const page = (key) => `/invoicing-settings/${key}`;
+  (async () => {
+    let settings;
+    let labels;
+    let rules;
+    try {
+      [{ settings }, { labels }, { rules }] = await Promise.all([
+        flow('/api/invoicing/settings'), flow('/api/invoicing/line-labels'), flow('/api/invoicing/rules')]);
+    } catch (error) {
+      host.replaceChildren(notice(error.message, 'danger'));
+      return;
     }
-  }
+    const ruleCard = (rule) => tileCard({
+      row: true, href: page('invoices'), mark: (KIND[rule.action.kind] ?? { mark: 'list-checks' }).mark, title: rule.name,
+      meta: rule.enabled ? 'On' : 'Off',
+    });
+    const waiting = labels.filter((l) => l.unmapped > 0).length;
+    host.replaceChildren(
+      tileSection('Invoices', rules.length ? rules.slice(0, SHOWN).map(ruleCard) : [h('p', { class: 'fx-dim' }, 'No rules yet.')],
+        { href: page('invoices'), more: rules.length > SHOWN ? `Show all ${rules.length}` : 'Show all' }),
+      tileSection('Drafts', [
+        tileCard({ row: true, href: page('drafts'), mark: 'calendar-clock', title: 'Payment terms', meta: `${settings.paymentTermsDays} days` }),
+        tileCard({ row: true, href: page('drafts'), mark: 'text-cursor-input', title: 'Reference' }),
+      ], { href: page('drafts') }),
+      tileSection('Price codes', [
+        tileCard({
+          row: true, href: page('price-codes'), mark: 'tag', title: 'Line labels',
+          status: waiting ? { label: `${waiting} wait`, tone: 'warn' } : { label: 'All mapped', tone: 'success' },
+        }),
+      ], { href: page('price-codes') }),
+    );
+  })();
 }
 
 // Payment terms and the Reference template.
@@ -104,7 +127,7 @@ function draftsSection(ui) {
       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}' })),
+        box('referenceTemplate', 'Reference rule', { placeholder: 'Type a reference rule' })),
     ].filter(Boolean));
   })();
   return section;