zz-meridian 0.14.0 → 0.14.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-meridian",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "Bring ZZ Meridian, a dashboard design system, into a Next.js project, or start a new dashboard on it. Copies the files in; nothing depends on this package at runtime.",
   "license": "MIT",
   "type": "module",

package/payload/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 Every release of ZZ Meridian, newest first. Versions follow semver: a removed or renamed token, prop or card is major; a new card, token or variant is minor; a corrected value is a patch. Each entry says what breaks and what to do instead.
 
+## [0.14.1] · 2026-10-12
+
+### Fixed
+
+- **A truncated cell keeps the whole value.** `DataTable`'s `truncate` adds `max-w-0 truncate` and nothing else, and this card's own spec has always said the cell carries the full text in its title — so a cut value was cut everywhere on the page and the whole one was kept nowhere. `TableCell` and `DataTable`'s cells now set that title themselves when the cell is a **value**; a column whose cell draws *more* than its value (an avatar beside a name, a method chip beside a route) passes the new `title: (row) => string`, because a component cannot keep what it cannot see. Measured on the template's own tables: 77 truncating cells across `/members`, `/keys`, `/customers` and `/requests`, every one now carrying its value. Additive: a column without `truncate` is unchanged, and a `title` you pass yourself still wins.
+- **The audit proves it measured the page it asked for.** `MEASURE` never reported the path it was on, and every check it runs — sideways scroll, clipped text, an unnamed control, a heading skip, contrast, target size — is vacuously true of an empty page. A route that never rendered therefore passed, and the run ended with the standard's line over a page nobody had measured. It now reports the path and how many characters the page's own content region holds, and fails a route where either is wrong, **before** any other issue.
+- **The keyboard check waits for the shell's chrome rather than for a duration.** The assistant's launcher enters the tab order when its streamed boundary resolves, so on a loaded machine the forward pass could measure 39 stops against a reverse pass of 40 and report the difference as a page defect. The wait is now anchored to the page's own signal — `[data-assistant-slot]`, in the page from the first byte and `aria-hidden` until the answer is known — bounded, then a few frames of the tab order holding still. With no assistant configured there is nothing to wait for and the check still returns in ~155 ms.
+- **A phone card's title and its badge no longer depend on the column's order.** `title` and `status` shared one `order`, so a table that listed its status column first put the badge on the card's left edge and wrapped the title into the width left over; and a title cell kept its column's centre alignment on a phone. Both are fixed — the title leads, the badge follows, and a fact sits under them.
+- **A count and its word come from one place.** `lib/format.ts` has a new `plural(n, one, other?)`, and the places that wrote their own `=== 1 ?` call it: a strip of one day's data read "over 1 days", a bar list read "1 others", and five more sites were doing the same arithmetic by hand. Additive: a new export, nothing else changed.
+- **A stacked trend's legend keeps its ordering and becomes visible.** A stacked part is the accent faded toward `--surface`, so the palest of four is a whisper — fine as a band beside its neighbours, invisible as a 4px swatch alone on the light card. Every stacked swatch is now drawn on a 6px `ink-3` hairline: 4.66:1 in light, 6.86:1 in dark.
+
+### Changed
+
+- **The craft recipe serves a built app.** `skills/zz-meridian/references/standard.md` prescribed `next dev` for the screenshot pass while line 142 of the same file prescribed `next start` for the audit. Under `next dev` a page's browser-side reads can fail to fire — one adopter produced **194 pictures of the loading state** and every check passed over them, because a skeleton has nothing to clip, nothing unnamed and nothing to contrast. The recipe now builds and serves, and says why.
+- **The chart card states the rule a mark and a fill obey.** `chart-neutral` is a fill (a track, a band behind a mark) and `chart-neutral-strong` is what a mark takes when it is the quiet one; a stacked part's ramp is a rule about *areas that touch each other*, while a legend swatch has to differ from the **ground** behind it. Written with the measurements that produced it.
+
 ## [0.14.0] · 2026-10-11
 
 ### Added

package/payload/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-meridian-template",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "private": true,
   "license": "MIT",
   "description": "ZZ Meridian: a dashboard design system and starter. DTCG tokens, five layers of React components and a Design Atlas, in a light and a dark theme.",

package/payload/scripts/audit.ts

@@ -72,13 +72,14 @@ const WIDTHS = ATLAS ? [1440, 390] : [2560, 1440, 1024, 768, 390];
 const THEMES = ['dark', 'light'];
 
 type Report = {
+  path: string; text: number;
   sideways: string[]; clipped: string[]; focusless: string[]; unnamed: string[]; unmeasured: string[]; scrollers: string[]; contrast: string[]; targets: string[]; headings: string[];
   sizes: number[]; weights: number[]; radii: number[]; ratio: number;
 };
 
 /** Runs inside the page. Plain JavaScript: it is serialised into the browser. */
 const MEASURE = `(() => {
-  const W = innerWidth, out = { sideways: [], clipped: [], unnamed: [], unmeasured: [], scrollers: [], contrast: [], targets: [], headings: [], sizes: [], weights: [], radii: [], ratio: 0 };
+  const W = innerWidth, out = { path: location.pathname, text: 0, sideways: [], clipped: [], unnamed: [], unmeasured: [], scrollers: [], contrast: [], targets: [], headings: [], sizes: [], weights: [], radii: [], ratio: 0 };
   const label = (el) => (el.tagName.toLowerCase() + (el.id ? '#' + el.id : '') + (el.className && typeof el.className === 'string' ? '.' + el.className.trim().split(/\\s+/).slice(0, 3).join('.') : '')).slice(0, 90);
   /* closest() across open roots and slots: deepParent (injected from scripts/lib/deep.ts) steps through both */
   const deepClosest = (el, sel) => { for (let n = el; n; n = deepParent(n)) if (n.matches(sel)) return n; return null; };
@@ -173,6 +174,12 @@ const MEASURE = `(() => {
   out.ratio = sorted.length ? +(sorted[sorted.length - 1] / sorted[Math.floor(sorted.length / 2)]).toFixed(1) : 0;
   out.sizes = [...new Set(out.sizes)].sort((a, b) => a - b); out.weights = [...new Set(out.weights)].sort(); out.radii = [...new Set(out.radii)].sort((a, b) => a - b);
   out.contrast = [...new Set(out.contrast)].slice(0, 8); out.clipped = [...new Set(out.clipped)].slice(0, 8); out.unnamed = [...new Set(out.unnamed)].slice(0, 8); out.unmeasured = [...new Set(out.unmeasured)].slice(0, 8);
+  // A page that rendered nothing fails every check above without being told to: nothing sideways, nothing clipped, no
+  // unnamed control, no heading to skip, no colour, no target. So what was measured is recorded here — the path the
+  // browser is on, and how many characters the page's own content region holds — and the caller fails a route the
+  // audit never really reached. A loading skeleton holds none: its boxes have no text, its aria-label is an attribute.
+  const content = deepAll(document.body).find((n) => n.matches('[data-scroll-region]')) || document.body;
+  out.text = (content.textContent || '').replace(/\\s+/g, ' ').trim().length;
   return out;
 })()`;
 
@@ -225,6 +232,10 @@ const run = async (route: string, width: number, theme: string, embed: boolean)
   r.focusless = [...new Set(r.focusless)].slice(0, 6);
   const scrollers = r.scrollers.filter((s) => !ALLOWED_SCROLLERS.test(s));
   const issues = [
+    // First, because it is the one that fails in the direction of looking clean: a route that never rendered passes
+    // everything below, and the run would end with the standard's line over a page nobody measured.
+    ...(r.path.replace(/\/$/, '') !== route.replace(/\/$/, '') ? [`the audit measured ${r.path} while asking for ${route} — the route served another page`] : []),
+    ...(r.text < 24 ? [`the page holds ${r.text} characters of text — it rendered nothing, or only its loading state`] : []),
     ...r.sideways.map((x) => 'sideways: ' + x),
     ...r.clipped.map((x) => 'clipped: ' + x),
     ...r.unnamed.map((x) => 'unnamed: ' + x),

package/payload/scripts/keyboard.ts

@@ -118,6 +118,32 @@ const press = async (modifiers: number) => {
 };
 
 const page = await launch();
+
+/**
+ * Wait for the shell's chrome before walking the tab order, anchored to the page's own signal rather than to a duration.
+ * One control arrives late and is announced: the assistant's launcher sits inside a boundary that resolves when the
+ * request's own work does (`app/(dashboard)/layout.tsx` hands `AppShell` a promise, deliberately, so the frame never
+ * blocks). sgds-ac measured what a fixed wait costs: assistant off, 39 stops, pass; assistant on, 41 stops, pass idle and
+ * **fail under load**, a forward pass of 39 against a reverse pass of 40. So the wait is anchored to `[data-assistant-slot]`
+ * — in the page from the first byte, `aria-hidden` until the answer is known — and falls back to quiescence for anything
+ * else late. With no assistant configured there is nothing to wait for, so that is asked once, of the one endpoint that
+ * answers for it, and the wait is then a few frames.
+ */
+const settle = async () => {
+  const hasAssistant = (await page.eval<number>('fetch("/api/assistant", { method: "POST" }).then((r) => r.status).catch(() => 404)')) !== 404;
+  await page.eval(`new Promise((done) => {
+    let last = '', stable = 0, tries = 0;
+    const count = () => deepAll(document.body).filter((el) => el.matches('a[href],button,input,select,textarea,[tabindex]') && !el.hasAttribute('disabled') && el.tabIndex >= 0).length;
+    const slotResolved = () => { const el = deepAll(document.body).find((n) => n.matches('[data-assistant-slot]')); return !el || el.getAttribute('aria-hidden') === null; };
+    const tick = () => {
+      const now = String(count()), ready = !${hasAssistant} || slotResolved();
+      if (ready && now === last) { if (++stable >= 3) return done(+now); } else { stable = 0; last = now; }
+      if (++tries > 140) return done(+now);
+      setTimeout(tick, 50);
+    };
+    tick();
+  })`);
+};
 let failures = 0;
 for (const route of ROUTES) {
   await page.open(base + route, { width: 1440, height: 900, theme: 'dark', wait: 2500, cookie });
@@ -129,6 +155,7 @@ for (const route of ROUTES) {
     page.close();
     process.exit(1);
   }
+  await settle();
   const total = await page.eval<number>(TAG);
   const reached = new Set<string>();
   const order: string[] = [];

package/payload/skills/zz-meridian/references/customize.md

@@ -94,7 +94,7 @@ Rules that make every page look like it belongs:
 - **Charts on one page share one `Meridian`** (wrap the rows in `<Meridian dates={...}>`), so pointing at a day reads it
   everywhere. Two measures of a different size are two charts, never one chart with two axes.
 - **Tables**: mark one column `grow` (the lead), numbers `numeric`, low-value columns `hideBelow`; give `rowHref` so rows
-  open their record. Below 768px a data table becomes a card list by itself.
+  open their record. Below 768px a `DataTable` becomes a card list by itself — a markdown table inside `Prose` does not: it keeps its columns and scrolls sideways, so a document meant to be read on a phone wants a list, not a table.
 - **Every state**: loading (`loading.tsx` with skeletons shaped like the page; read through `read()` so the page is
   in its prerendered shell and the skeleton is rarely seen, since a request-time read waits at least 300 ms behind it:
   `cache.md`), empty (Empty state with the one action), error (`error.tsx`, what failed and Retry).

package/payload/skills/zz-meridian/references/standard.md

@@ -96,13 +96,13 @@ refuses, listing every gap, until these hold.
 
 ### The craft: judged on the renders, with evidence
 
-Look at every view rendered, not at the code. With `node_modules/.bin/next dev --port 3100` running (the port the screenshot and audit
-scripts read; stop it again before `pnpm verify`, which builds in the same folder), run
+Look at every view rendered, not at the code. Serve a production build — `pnpm build`, then `node_modules/.bin/next start --port 3100` (the port the screenshot and audit
+scripts read; stop it again before `pnpm verify`, which builds in the same folder) — and run
 `node scripts/shot.ts <routes> --width 1440,390 --theme dark,light --full`, plus 768 and 2560 where the layout depends on
-width (tables, grids, side panels), and open every PNG in `out/shots/`. A dialog, sheet, menu or popover is shot open:
+width (tables, grids, side panels), and open every PNG in `out/shots/`. **A craft screenshot is evidence only from a built app:** under `next dev` a page's browser-side reads can fail to fire, and the render is then a picture of the loading state — which passes every check, because a skeleton has nothing to clip, nothing unnamed and nothing to contrast. A dialog, sheet, menu or popover is shot open:
 `--press "<the name of the control that opens it>"` (the first visible control with that name; give row actions names
 of their own, "Delete order CR-10425"), repeated for a menu item inside it. With a fake API, every server a render or
-a check reads from is started with its address (`API_URL=<fake> node_modules/.bin/next dev …`), never the `.env` one. `node scripts/audit.ts --routes <routes>` against
+a check reads from is started with its address (`API_URL=<fake> node_modules/.bin/next start …`), never the `.env` one. `node scripts/audit.ts --routes <routes>` against
 the same server ends with "Design metrics at 1440" for each route: the type sizes and weights in use, the radii, and the
 hierarchy ratio (the largest text over the median).
 

package/payload/src/components/charts/bar-list/index.tsx

@@ -1,4 +1,5 @@
 import { cn } from '@/lib/cn';
+import { plural } from '@/lib/format';
 
 export type BarItem = { key: string; label: React.ReactNode; value: number; meta?: React.ReactNode; href?: string };
 
@@ -31,7 +32,7 @@ export function BarList({
   const cut = sorted.length === limit + 1 ? limit + 1 : limit;
   const shown = sorted.slice(0, cut);
   const rest = sorted.slice(cut);
-  if (rest.length) shown.push({ key: '__others', label: `${rest.length} others`, value: rest.reduce((a, b) => a + b.value, 0) });
+  if (rest.length) shown.push({ key: '__others', label: `${rest.length} ${plural(rest.length, 'other')}`, value: rest.reduce((a, b) => a + b.value, 0) });
   const max = Math.max(1, total ?? 0, ...shown.map((i) => i.value));
   return (
     <ul aria-label={label} className={cn('flex flex-col gap-3.5', className)}>

package/payload/src/components/charts/trend-chart/README.md

@@ -27,6 +27,8 @@ Status: beta
 
 Colour: `accent` for the series the page is about; categorical slots 1 to 6 in order for peers; never a status colour unless the series means a status.
 
+**A mark takes the strong quiet; a swatch needs a floor, not just a neighbour.** `chart-neutral` (#D5D7E0 in light) is a *fill* — a track, a band behind a mark — and `chart-neutral-strong` is what a *mark* takes when it is the quiet one, because a mark's job is to be seen against the ground: measured in light, the strong variant is 3.19:1 while the fill is under 3:1 on any light ground, which is how seven bars in a share column came to render blank. A stacked part is the accent faded toward `--surface`, and *that* is a rule about areas that touch each other, where each step only has to differ from its neighbour — a legend swatch has to differ from the ground behind it, and nothing in the ramp's parameters knows that. So every stacked swatch is drawn on a 6px `ink-3` hairline (measured 4.66:1 light, 6.86:1 dark), which keeps the ramp's ordering readable instead of flattening it.
+
 ## Sizes
 
 | Height | Gridlines | Use |

package/payload/src/components/charts/trend-chart/index.tsx

@@ -257,6 +257,11 @@ export function TrendChart({
           {series.map((s, k) => (
             <li key={s.key} className="flex items-center gap-1.5">
               <svg width="14" height="4" className="shrink-0 overflow-visible">
+                {/* Stacked, a part can be the accent at 36% toward the surface — as a 4px line on a light card that is a whisper,
+                    and a swatch is the one mark whose whole job is to be seen. The hairline behind it does that without
+                    flattening the tone ordering, which is the rest of what the legend is telling: measured, the palest of four
+                    parts in light sits at 0.83 alpha, in dark at 0.69. */}
+                {stacked ? <line x1="1" x2="13" y1="2" y2="2" stroke="var(--ink-3)" strokeWidth={6} strokeLinecap="round" /> : null}
                 <line x1="1" x2="13" y1="2" y2="2" stroke={colorOf(s, k)} strokeWidth={stacked ? 4 : 2} strokeLinecap="round" strokeDasharray={s.kind === 'dashed' ? '2 3' : undefined} />
               </svg>
               {s.label}

package/payload/src/components/charts/uptime-bars/index.tsx

@@ -3,6 +3,7 @@
 import { useId, useState } from 'react';
 import { cn } from '@/lib/cn';
 import { formatDate } from '@/lib/format-date';
+import { plural } from '@/lib/format';
 
 export type DayState = 'operational' | 'degraded' | 'outage' | 'none';
 /* Healthy days are the baseline, one quiet rect across the period, so the eye lands on the days something happened.
@@ -101,7 +102,7 @@ export function UptimeBars({
       ) : null}
       <p className="sr-only" aria-live="polite">{hover !== null ? `${formatDate(dateOf(hover))}: ${WORD[shown[hover]]}` : ''}</p>
       <p id={summaryId} className="sr-only">
-        {`${label}: ${pct(uptime)} ${measure} over ${shown.length} days, ${formatDate(dateOf(0))} to ${formatDate(dateOf(shown.length - 1))}.`}
+        {`${label}: ${pct(uptime)} ${measure} over ${shown.length} ${plural(shown.length, 'day')}, ${formatDate(dateOf(0))} to ${formatDate(dateOf(shown.length - 1))}.`}
         {marked.length === 0 ? ' No incidents.' : marked.map(({ d, i }) => ` ${formatDate(dateOf(i))}: ${WORD[d]}.`).join('')}
       </p>
     </figure>

package/payload/src/components/patterns/data-table/index.tsx

@@ -26,6 +26,12 @@ export type Column<R> = {
   numeric?: boolean;
   muted?: boolean;
   truncate?: boolean;
+  /**
+   * The whole value, for a cell that draws *more* than it: an avatar beside a name, a method chip beside a route. A cell
+   * that is a plain value needs none — the component titles it from the value itself, because a value it can see is a
+   * value it can keep. A cell it cannot see (a node) it cannot keep, which is what this is for.
+   */
+  title?: (row: R) => string;
   /** Drop the column below this width (the least important columns go first). */
   hideBelow?: Breakpoint;
   /** The one column that takes the remaining width: the record's name. */
@@ -97,8 +103,11 @@ const PHONE_CELLS = '@max-[640px]:[&_td:not([data-mobile=hidden])]:!h-auto @max-
  * card's own rule is the role, not the width. */
 const PHONE_ROLES = [
   '@max-[640px]:[&_td[data-mobile=check]]:order-0 @max-[640px]:[&_td[data-mobile=check]]:mr-1.5',
-  '@max-[640px]:[&_td[data-mobile=title]]:order-1 @max-[640px]:[&_td[data-mobile=title]]:flex-1 @max-[640px]:[&_td[data-mobile=title]]:font-medium',
-  '@max-[640px]:[&_td[data-mobile=status]]:order-1 @max-[640px]:[&_td[data-mobile=status]]:ml-auto @max-[640px]:[&_td[data-mobile=status]]:shrink-0',
+  '@max-[640px]:[&_td[data-mobile=title]]:order-1 @max-[640px]:[&_td[data-mobile=title]]:flex-1 @max-[640px]:[&_td[data-mobile=title]]:font-medium @max-[640px]:[&_td[data-mobile=title]]:!text-left',
+  // The badge sits beside the title, never before it: with the same `order` the column order decided which of the two took
+  // the card's left edge, so a table that listed a status column before its title wrapped the title into the width the
+  // badge left it. `check` stays ahead of both, and a fact follows them.
+  '@max-[640px]:[&_td[data-mobile=status]]:order-2 @max-[640px]:[&_td[data-mobile=status]]:ml-auto @max-[640px]:[&_td[data-mobile=status]]:shrink-0',
   // Facts flow on the second line, left to right whatever their column's alignment, each whole; one longer than the
   // card ends in an ellipsis.
   // A fact is a flex row of its content and its dot, so the dot stays beside it whatever element the cell renders.
@@ -308,9 +317,13 @@ export function DataTable<R>({
                       const role = roleOf(c);
                       // The title is the row's link wherever it is shown, phone included: the whole card takes the
                       // pointer too (the row's own click), but the link is what a keyboard and a screen reader follow.
-                      const content = c === titleColumn && href ? <Link href={href}>{c.cell(r)}</Link> : c.cell(r);
+                      // The value is called once: it is both what we draw and what the title carries when the column
+                      // truncates. A cut value is cut everywhere on the page — a slug's tail is the part that identifies
+                      // it — and this card's own spec has said so since before the component did it.
+                      const value = c.cell(r);
+                      const content = c === titleColumn && href ? <Link href={href}>{value}</Link> : value;
                       return (
-                        <td key={c.key} data-mobile={role} data-num={c.numeric ? 'num' : c.align === 'right' ? 'true' : undefined} className={cellClass(c) || undefined}>
+                        <td key={c.key} data-mobile={role} data-num={c.numeric ? 'num' : c.align === 'right' ? 'true' : undefined} title={c.title ? c.title(r) : c.truncate && (typeof value === 'string' || typeof value === 'number') ? String(value) : undefined} className={cellClass(c) || undefined}>
                           {/* A phone may want other words for the same cell — "Used 1 min ago", not "1 min ago" — so
                               both are rendered and one is hidden: a few words each, never a second copy of the row. */}
                           {c.mobileCell ? (

package/payload/src/components/patterns/status-list/index.tsx

@@ -6,6 +6,7 @@ import { StatusDot } from '@/components/ui/status-dot';
 import type { Tone } from '@/components/ui/badge';
 import { UptimeBars } from '@/components/charts/uptime-bars';
 import { summarise, SERVICE_NOUN, type Noun } from './summarise';
+import { plural } from '@/lib/format';
 
 export { summarise };
 
@@ -67,7 +68,7 @@ export function StatusList({
         <div role="status" className="flex items-center gap-3 border-b border-line px-(--card-pad) py-4">
           <StatusDot tone={head.tone} live={s.status !== 'operational'} className="size-2.5" />
           <p className={cn('text-md font-semibold tracking-[-0.012em]', s.status === 'operational' ? 'text-ink' : head.ink)}>{s.text}</p>
-          <p className="t-caption ml-auto hidden @md:block">{services.length} {services.length === 1 ? noun.one : noun.other}</p>
+          <p className="t-caption ml-auto hidden @md:block">{services.length} {plural(services.length, noun.one, noun.other)}</p>
         </div>
       ) : null}
       <ul className={ROWS}>

package/payload/src/components/patterns/status-list/summarise.ts

@@ -1,4 +1,5 @@
 import type { Service, ServiceStatus } from '@/components/patterns/status-list';
+import { plural } from '@/lib/format';
 
 export type Noun = { one: string; other: string };
 export const SERVICE_NOUN: Noun = { one: 'service', other: 'services' };
@@ -7,8 +8,8 @@ export const SERVICE_NOUN: Noun = { one: 'service', other: 'services' };
 export function summarise(services: Service[], noun: Noun = SERVICE_NOUN) {
   const down = services.filter((s) => s.status === 'outage').length;
   const degraded = services.filter((s) => s.status === 'degraded').length;
-  if (down) return { status: 'outage' as const, text: `${down} ${down === 1 ? `${noun.one} is` : `${noun.other} are`} down` };
-  if (degraded) return { status: 'degraded' as const, text: `${degraded} ${degraded === 1 ? noun.one : noun.other} degraded` };
+  if (down) return { status: 'outage' as const, text: `${down} ${plural(down, `${noun.one} is`, `${noun.other} are`)} down` };
+  if (degraded) return { status: 'degraded' as const, text: `${degraded} ${plural(degraded, noun.one, noun.other)} degraded` };
   return { status: 'operational' as const, text: `All ${noun.other} operational` };
 }
 

package/payload/src/components/ui/table/index.tsx

@@ -132,6 +132,10 @@ export function TableCell({
   return (
     <td
       data-num={numeric || align === 'right' || undefined}
+      // A cut value is cut everywhere on the page, and this README has always said the cell carries the whole one in its
+      // title. The component does it now for a cell that is a value, rather than each page remembering; a cell that is a
+      // node is its author's, and a `title` passed in wins over this one because the spread comes after.
+      title={truncate && (typeof children === 'string' || typeof children === 'number') ? String(children) : undefined}
       className={cn(
         'h-(--row-height) px-4 align-middle',
         ALIGN[align ?? (numeric ? 'right' : 'left')],

package/payload/src/lib/format.ts

@@ -12,6 +12,13 @@ import { app } from '@/app.config';
 /** The symbol for `app.currency`: $, €, £, ¥; the narrow symbol, so SGD reads $1,234, not SGD1,234. */
 const CURRENCY = new Intl.NumberFormat('en-US', { style: 'currency', currency: app.currency, currencyDisplay: 'narrowSymbol' }).formatToParts(0).find((p) => p.type === 'currency')?.value ?? app.currency;
 
+/** A count with its word: 1 day, 2 days; 1 key has, 3 keys have. `other` is for the words that do not take an `s`.
+ *  It lives here for the reason the header gives: a count reads the same in a tile, a table cell, a tooltip and an
+ *  aria-label, and the ten places that wrote their own `=== 1 ?` are how two of them came to say "1 days" and "1 others". */
+export function plural(n: number, one: string, other?: string): string {
+  return n === 1 ? one : (other ?? `${one}s`);
+}
+
 /** Built once: an Intl formatter costs far more to construct than to use, and a table formats a figure per cell. */
 const INT = new Intl.NumberFormat('en-US');
 const CENTS = new Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });

package/payload/src/system/sample-cells.tsx

@@ -53,6 +53,9 @@ export const requestColumns: Column<RequestRow>[] = [
   {
     key: 'request', header: 'Request', grow: true, truncate: true, mobile: 'title',
     cell: (r) => <RouteCell method={r.method} route={r.route} />,
+    // The chip and the route are a node, so the cell cannot title itself: without this the one column this table
+    // truncates cut the value and kept it nowhere. The two columns beside it had remembered; this one had not.
+    title: (r) => `${r.method} ${r.route}`,
     sortValue: (r) => r.route,
   },
   { key: 'status', header: 'Status', mobile: 'status', cell: (r) => <StatusBadge status={r.status} />, sortValue: (r) => r.status },

package/payload/src/views/customers.tsx

@@ -28,7 +28,7 @@ const STATUS_LABEL = { active: 'Active', trial: 'Trial', 'past due': 'Past due'
 
 const columns: Column<CustomerRecord>[] = [
   {
-    key: 'name', header: 'Customer', grow: true, truncate: true, mobile: 'title', sortValue: (c) => c.name,
+    key: 'name', header: 'Customer', grow: true, truncate: true, mobile: 'title', sortValue: (c) => c.name, title: (c) => c.name,
     cell: (c) => (
       <span className="flex min-w-0 items-center gap-3">
         <Avatar name={c.name} size="sm" />

package/payload/src/views/keys-context.ts

@@ -3,6 +3,7 @@
  * unused. A key's secret, and its hash, are never in it: the secret is shown once, on this page, and nowhere else.
  */
 import type { ApiKey } from '@/data/sample';
+import { plural } from '@/lib/format';
 import { formatDate } from '@/lib/format-date';
 import { listed, type Insight, type SharedContext } from '@/lib/shared-context';
 
@@ -16,7 +17,7 @@ export function keysContext(rows: ApiKey[], now: string, scopes: readonly string
   const live = rows.filter((k) => k.env === 'live');
   const insights: Insight[] = [];
   const idle = live.filter((k) => (unused(k) ?? Infinity) >= UNUSED_DAYS);
-  if (idle.length) insights.push({ text: `${idle.length} live ${idle.length === 1 ? 'key has' : 'keys have'} not been used for ${UNUSED_DAYS} days or more: ${idle.map((k) => `${k.name} (${k.lastUsed ? `${unused(k)} days` : 'never used'}, owner ${k.owner})`).join(', ')}.` });
+  if (idle.length) insights.push({ text: `${idle.length} live ${plural(idle.length, 'key has', 'keys have')} not been used for ${UNUSED_DAYS} days or more: ${idle.map((k) => `${k.name} (${k.lastUsed ? `${unused(k)} days` : 'never used'}, owner ${k.owner})`).join(', ')}.` });
   const broad = live.filter((k) => scopes.every((s) => k.scopes.includes(s)));
   if (broad.length) insights.push({ text: `${broad.map((k) => k.name).join(', ')} ${broad.length === 1 ? 'is a live key' : 'are live keys'} with every scope; a narrower key limits what a leak can reach.` });
   const owners = new Map<string, number>();

package/payload/src/views/keys.tsx

@@ -86,7 +86,7 @@ export function KeysView({ rows, now, createKey, revokeKey, may = { create: true
   };
   const columns: Column<ApiKey>[] = [
     {
-      key: 'name', header: 'Name', grow: true, truncate: true, mobile: 'title', sortValue: (k) => k.name,
+      key: 'name', header: 'Name', grow: true, truncate: true, mobile: 'title', sortValue: (k) => k.name, title: (k) => k.name,
       cell: (k) => (
         <span className="flex min-w-0 items-center gap-2.5">
           <span className="truncate font-medium">{k.name}</span>

package/payload/src/views/members-context.ts

@@ -3,6 +3,7 @@
  * agents read it.
  */
 import type { Member } from '@/data/sample';
+import { plural } from '@/lib/format';
 import { ADD_ONS, GRANTS, MAIN_ROLES, roleLabel, whoCan } from '@/data/roles';
 import type { Grant } from '@/lib/collection';
 import { formatDate } from '@/lib/format-date';
@@ -37,8 +38,8 @@ export function membersContext(rows: Member[], now: string): SharedContext {
   const mayChange = whoCan('members:update');
   const admins = active.filter((m) => mayChange.includes(m.role));
   const insights: Insight[] = [];
-  if (quiet.length) insights.push({ text: `${quiet.length} active ${quiet.length === 1 ? 'member has' : 'members have'} not been seen for ${QUIET_DAYS} days or more: ${listed(quiet, (m) => `${m.name} (${m.role}, ${m.team}, ${idle(m)} days)`, 'query_members finds them', 10)}.` });
-  if (invited.length) insights.push({ text: `${invited.length} ${invited.length === 1 ? 'invitation is' : 'invitations are'} unanswered: ${listed(invited, (m) => `${m.name}, invited ${formatDate(m.joined)}`, 'query_members finds them', 10)}.` });
+  if (quiet.length) insights.push({ text: `${quiet.length} active ${plural(quiet.length, 'member has', 'members have')} not been seen for ${QUIET_DAYS} days or more: ${listed(quiet, (m) => `${m.name} (${m.role}, ${m.team}, ${idle(m)} days)`, 'query_members finds them', 10)}.` });
+  if (invited.length) insights.push({ text: `${invited.length} ${plural(invited.length, 'invitation is', 'invitations are')} unanswered: ${listed(invited, (m) => `${m.name}, invited ${formatDate(m.joined)}`, 'query_members finds them', 10)}.` });
   insights.push({ text: `${admins.length} of ${active.length} active members can change the workspace (${mayChange.join(' or ')}): ${listed(admins, (m) => m.name, 'query_members finds them', 10)}.` });
   return {
     view: 'members',

package/payload/src/views/members.tsx

@@ -199,7 +199,7 @@ export function MembersView({ rows, now, actions, access, roles }: { rows: Membe
 
   const columns: Column<Shown>[] = [
     {
-      key: 'name', header: 'Name', grow: true, truncate: true, mobile: 'title', sortValue: (m) => m.name,
+      key: 'name', header: 'Name', grow: true, truncate: true, mobile: 'title', sortValue: (m) => m.name, title: (m) => m.name,
       cell: (m) => (
         <span className="flex min-w-0 items-center gap-3">
           <Avatar name={m.name} size="sm" />

package/payload/tests/plural.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, it } from 'vitest';
+import { plural } from '@/lib/format';
+import { summarise } from '@/components/patterns/status-list/summarise';
+
+/** A count is a count: one of anything reads as one, whichever place writes the sentence. */
+describe('a count and its word', () => {
+  it('takes the singular for one and the plural otherwise', () => {
+    expect(plural(0, 'day')).toBe('days');
+    expect(plural(1, 'day')).toBe('day');
+    expect(plural(2, 'day')).toBe('days');
+    expect(plural(1, 'key has', 'keys have')).toBe('key has');
+    expect(plural(4, 'key has', 'keys have')).toBe('keys have');
+  });
+
+  it('reads as one in the line a reader takes away, not "1 services are down"', () => {
+    const one = [{ name: 'Edge gateway', description: '', status: 'outage' as const, uptime: 0.99, latency: 38, days: [] }];
+    expect(summarise(one).text).toBe('1 service is down');
+    expect(summarise([...one, { ...one[0], name: 'Files' }]).text).toBe('2 services are down');
+  });
+});

package/payload/tests/truncate.test.tsx

@@ -0,0 +1,52 @@
+import type { ReactNode } from 'react';
+import { describe, expect, it } from 'vitest';
+import { render } from '@testing-library/react';
+import { Table, TableBody, TableCell, TableRow } from '@/components/ui/table';
+
+/** A truncated cell keeps the whole value: `truncate` cuts what is drawn, never what can be read. */
+describe('a truncated cell', () => {
+  const td = (node: ReactNode) =>
+    render(
+      <Table>
+        <TableBody>
+          <TableRow>
+            <TableCell truncate>{node}</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>,
+    ).container.querySelector('td')!;
+
+  it('carries the full value in its title', () => {
+    expect(td('/v1/messages/with/a/long/tail').getAttribute('title')).toBe('/v1/messages/with/a/long/tail');
+    expect(td(612).getAttribute('title')).toBe('612');
+  });
+
+  it('leaves a cell its author crafted, and a title the caller passed wins', () => {
+    expect(td(<span title="its own">a node</span>).getAttribute('title')).toBeNull();
+    const own = render(
+      <Table>
+        <TableBody>
+          <TableRow>
+            <TableCell truncate title="mine">
+              /v1/messages
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>,
+    ).container.querySelector('td')!;
+    expect(own.getAttribute('title')).toBe('mine');
+  });
+
+  it('adds nothing when the column does not truncate', () => {
+    const plain = render(
+      <Table>
+        <TableBody>
+          <TableRow>
+            <TableCell>/v1/messages</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>,
+    ).container.querySelector('td')!;
+    expect(plain.getAttribute('title')).toBeNull();
+  });
+});