zz-meridian 0.19.2 → 0.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-meridian",
-  "version": "0.19.2",
+  "version": "0.20.0",
   "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,27 @@
 
 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.20.0] · 2026-10-20
+
+### New
+
+- **The assistant panel offers the page's questions** ([#69](https://github.com/zhixuan312/zz-meridian/issues/69)). `SharedContext.questions` holds the few questions a person would ask first about what a view shows, in their words. While the thread is empty, the console's assistant offers them under its line, as buttons under "Questions to start with", and pressing one sends it as the person's own. A page that shares none keeps the line alone, and the model is never told them. The sample's Home offers questions only about figures the reader may read.
+- **`ColumnChart` takes `whole`** ([#72](https://github.com/zhixuan312/zz-meridian/issues/72)) for a chart of counts: every level is a whole number, so a top of 1 is ticked 0 and 1, with no unlabelled gridline at 0.5. `niceTicks` and `ticksBetween` in `@/components/charts/scale` take the same as a last argument.
+- **`ActivityEvent.unknown`** ([#68](https://github.com/zhixuan312/zz-meridian/issues/68)) says the record does not hold who acted. The feed draws an empty disc in a dashed hairline instead of initials, so nobody unknown reads as a person, and the line still reads the product's words for them (`actor`, such as "Someone not recorded").
+
+### Changed
+
+- **A toned stacked chart tells two usual parts apart** ([#67](https://github.com/zhixuan312/zz-meridian/issues/67)). Where a part already is the neutral (`tone: 'neutral'`), a part with neither a tone nor a slot, Other among them, is drawn in the quieter `chart-neutral`, where it was `chart-neutral-strong` like the neutral beside it. Other beside categorical slots is unchanged. To keep two usual parts apart, give the one that is the usual case `tone: 'neutral'` and leave the other untoned.
+- **The column drawn last takes the card's padding when the last column is hidden** ([#70](https://github.com/zhixuan312/zz-meridian/issues/70)). The Table padded the last cell of every row, so where the last column's `hideBelow` dropped it, the column drawn last kept `px-4` and its cells ran past the card's padding edge. Head and body cells with `hideBelow` now carry `data-hide-below`, and the Table pads the cell drawn last at each width. A cell you write yourself with `hideBelow` passes it to `TableCell` or `TableHeader`, as before.
+- **A running period with no data reads "So far" where its column is too narrow** ([#71](https://github.com/zhixuan312/zz-meridian/issues/71)). A Column chart labelled it "No data so far" and cut that to "No data…" in a phone's column, which reads as no data. At rest, in a column too narrow for the words, it reads "So far" above the dashed outline; pointed at, in the readout, the announcement and the table it says them whole.
+- **The assistant panel's Clear and Close show their words, and on a phone the sheet is the whole width** (#69). Clear and Close are small ghost buttons with an icon and the word, still named "Clear conversation" and "Close assistant". Below `sm` the sheet covers the page: the 48px strip of cut page words it left beside it is gone. Escape and Close still close it.
+
+## [0.19.3] · 2026-10-19
+
+### Fixed
+
+- **The presses suite finds a control again when its name has gained a live count** ([#66](https://github.com/zhixuan312/zz-meridian/issues/66)). `ShellTools` names its button `Alerts`, then `Alerts, 3 new` once its read answers; on a loaded machine the first load was listed before that read and the fresh load after it, so 0.19.2's find-by-name looked for `Alerts`, waited out the hang bound and reported "was listed but could not be found again". When the exact name is gone, the suite now finds the control by the part of its name before the first comma, and which of the controls that share it it is. Names stay as they are: a count in the accessible name is still how a screen reader hears it.
+
 ## [0.19.2] · 2026-10-19
 
 ### Fixed

package/payload/docs/agents.md

@@ -24,7 +24,7 @@ Every view's state lives in its address: the period, the filters, the sort, the
 
 ### 2. Legible
 
-Every view tells both agents what is on screen in one shared context (decision 0011), and tells them again when that changes: a filter, the period, the day the Meridian points at. "Why did this spike?" then has a referent, and the agent answers about the day the person is looking at, not the one it guessed. The context is the whole state every time: its address and scope, how fresh the data is, what the person points at, each figure with its unit, its change and its definition, what code computed from them (a baseline, a deviation, a share, with the address of its evidence), and what the data cannot say.
+Every view tells both agents what is on screen in one shared context (decision 0011), and tells them again when that changes: a filter, the period, the day the Meridian points at. "Why did this spike?" then has a referent, and the agent answers about the day the person is looking at, not the one it guessed. The context is the whole state every time: its address and scope, how fresh the data is, what the person points at, each figure with its unit, its change and its definition, what code computed from them (a baseline, a deviation, a share, with the address of its evidence), and what the data cannot say. It may also carry `questions`, the few a person would ask first about what the view shows, in their words: the console's assistant offers them while its thread is empty, and they are never in the text a model is told. A view offers only questions about figures the reader may read (Home asks about revenue only for someone who sees it).
 
 **In the system:** a view's context is built by a pure function beside it (`src/views/home-context.ts`) and passed to `useShareView(context)`. In an MCP host that sends `ui/update-model-context`, debounced, once a host is connected; on the console the assistant reads the same context with the person's next question. `contextText` writes it as labelled lines for a model; the structured part mirrors them, but the text stands alone, because a host need not give the model the structured part.
 

package/payload/docs/data-display.md

@@ -36,7 +36,7 @@ Two measures of different size are two charts on one Meridian, not one chart wit
 - **Magnitude**: one hue, light to dark, built from the accent and the surface (the heatmap).
 - **Magnitude by rank**: a Heatmap's step is a cell's share of the largest cell (`max`) unless one outlier would leave every other cell at the lowest step. Then it is ranked (`scale="quantile"`): the cells above zero take five steps of equal count. A step no longer says how much, so the legend's upper end reads the value the top step starts at ("900 or more") in place of "More", and the readout and the hidden table give each cell's exact value.
 - **State**: positive, warning, critical, always with a word or an icon.
-- **Parts of one whole**: one hue. The parts share the accent, mixed into the surface, deepest at the bottom and paler upward (the stacked Trend chart and the stacked Column chart take the same mix), with a 1px hairline of the card between neighbours and at most four parts, the fourth being Other. When the parts are outcomes they carry a tone instead: the usual outcome is neutral (`chart-neutral-strong`), one that needs somebody is warning or critical, the accent never stands beside a tone, and the positive colour is never the usual case. Parts that are identities (teams), or two or more usual outcomes that one neutral would make one, take the categorical slots instead, in order (`series-1` onward, as Identity above), and a part with no slot is neutral. Status colours stay out of such a chart, as the accent stays out of a toned one, since coral and saffron read as a warning beside a real one: a chart with an outcome that needs somebody is a toned chart.
+- **Parts of one whole**: one hue. The parts share the accent, mixed into the surface, deepest at the bottom and paler upward (the stacked Trend chart and the stacked Column chart take the same mix), with a 1px hairline of the card between neighbours and at most four parts, the fourth being Other. When the parts are outcomes they carry a tone instead: the usual outcome is neutral (`chart-neutral-strong`), one that needs somebody is warning or critical, a second usual part beside the neutral one (Other among them) takes no tone and is drawn in the quieter `chart-neutral`, so the two are told apart and Other stays the quietest, the accent never stands beside a tone, and the positive colour is never the usual case. Parts that are identities (teams), or two or more usual outcomes that one neutral would make one, take the categorical slots instead, in order (`series-1` onward, as Identity above), and a part with no slot is neutral. Status colours stay out of such a chart, as the accent stays out of a toned one, since coral and saffron read as a warning beside a real one: a chart with an outcome that needs somebody is a toned chart.
 
 Text never wears a series colour; values and labels stay in ink.
 

package/payload/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-meridian-template",
-  "version": "0.19.2",
+  "version": "0.20.0",
   "private": true,
   "license": "MIT",
   "description": "ZZ Meridian: a dashboard design system and starter. Six layers, from DTCG tokens through four layers of React components to product workspaces, and a Design Atlas, in a light and a dark theme.",

package/payload/scripts/interactions.ts

@@ -46,13 +46,19 @@ const HANG_BOUND_MS = 5000;
 /**
  * The page's controls and how each is named: its accessible name and the roots it sits in. A control is found again by
  * that name (and which of the controls with it), never by its place in the walk: a later load can draw the controls in
- * another order or fewer of them for a while, a table still loading or rows a concurrent write changed (#65).
+ * another order or fewer of them for a while, a table still loading or rows a concurrent write changed (#65). A name that
+ * carries a live part after a comma ("Alerts, 3 new") is found again by the part before it once the exact name is gone (#66).
  */
 const CONTROLS = `
   const deepClosest = (el, sel) => { for (let n = el; n; n = deepParent(n)) if (n.matches(sel)) return n; return null; };
   const vis = (el) => { const r = el.getBoundingClientRect(); const s = getComputedStyle(el); return r.width > 0 && r.height > 0 && s.visibility !== 'hidden' && !deepClosest(el, '[aria-hidden="true"],[inert],.sr-only'); };
   const hosts = (el) => { const out = []; for (let r = el.getRootNode(); r instanceof ShadowRoot; r = r.host.getRootNode()) out.unshift(r.host.localName); return out; };
-  const nameOf = (b) => { const h = hosts(b); return (b.getAttribute('aria-label') || deepText(b) || b.title || '').trim().replace(/\\s+/g, ' ').slice(0, 60) + (h.length ? ' (in ' + h.join(' > ') + ')' : ''); };
+  const label = (b) => (b.getAttribute('aria-label') || deepText(b) || b.title || '').trim().replace(/\\s+/g, ' ').slice(0, 60);
+  const within = (b) => { const h = hosts(b); return h.length ? ' (in ' + h.join(' > ') + ')' : ''; };
+  const nameOf = (b) => label(b) + within(b);
+  // What the control is without what it says about now: the name before its first comma, so "Alerts, 3 new" is still the
+  // "Alerts" listed before the read answered (#66).
+  const keyOf = (b) => label(b).split(',')[0].trim() + within(b);
   // A control already chosen is not pressed: choosing it again changes nothing, which is not a dead control.
   const chosen = (el) => ['aria-pressed', 'aria-checked', 'aria-selected'].some((a) => el.getAttribute(a) === 'true') || el.getAttribute('aria-current') === 'page' || ['on', 'active', 'checked'].includes(el.getAttribute('data-state'));
   const pressable = (every) => every.filter((b) => b.matches('button, [role="button"], [role="tab"], [role="switch"], [role="checkbox"], [role="radio"], [role="menuitem"]'))
@@ -62,13 +68,15 @@ const LIST = `(() => {${CONTROLS}
   const every = deepAll(document.body);
   return {
     controls: pressable(every).map(nameOf),
+    keys: pressable(every).map(keyOf),
     links: every.filter((a) => a.matches('a[href]') && vis(a)).map((a) => a.getAttribute('href')),
   };
 })()`;
 
 /** Scroll the control into view, check nothing covers it, and start counting what changes. */
-const ARM = (name: string, nth: number) => `(() => {${CONTROLS}
-  const el = pressable(deepAll(document.body)).filter((b) => nameOf(b) === ${JSON.stringify(name)})[${nth}]; if (!el) return null;
+const ARM = (name: string, nth: number, key: string, keyNth: number) => `(() => {${CONTROLS}
+  const all = pressable(deepAll(document.body));
+  const el = all.filter((b) => nameOf(b) === ${JSON.stringify(name)})[${nth}] ?? all.filter((b) => keyOf(b) === ${JSON.stringify(key)})[${keyNth}]; if (!el) return null;
   el.scrollIntoView({ block: 'center', inline: 'nearest' });
   const r = el.getBoundingClientRect(), x = r.left + r.width / 2, y = r.top + r.height / 2;
   const hit = document.elementFromPoint(x, y);
@@ -120,8 +128,8 @@ for (const width of WIDTHS) {
   const touch = width < 600;
   for (const route of ROUTES) {
     // The page's late chrome first (scripts/lib/settle.ts): a control that arrives after the list is taken is never pressed, and the count reads as if it had been.
-    const fresh = async () => { await page.open(base + route, { width, theme: 'dark', cookie }); await inject(route); await settle(page); return page.eval<{ controls: string[]; links: string[] }>(LIST); };
-    const { controls, links } = await fresh();
+    const fresh = async () => { await page.open(base + route, { width, theme: 'dark', cookie }); await inject(route); await settle(page); return page.eval<{ controls: string[]; keys: string[]; links: string[] }>(LIST); };
+    const { controls, keys, links } = await fresh();
     // A link is followed as a browser follows it: its href as the page writes it, resolved against the page. Skipping every
     // href that did not start with "/" let a relative link that answered 404 pass (/system/system/contributing).
     for (const href of new Set(links)) {
@@ -133,11 +141,13 @@ for (const width of WIDTHS) {
       if (status >= 400) failures.push(`${route}: link ${href}${path === href ? '' : ` (${path})`} answers ${status}`);
     }
     for (let i = 0; i < controls.length; i++) {
-      // Which of the controls named alike this is, in the order the first load listed them.
+      // Which of the controls named alike this is, in the order the first load listed them; and, for a name that has
+      // changed since (a count that arrived), which of the controls that are the same thing.
       const nth = controls.slice(0, i).filter((c) => c === controls[i]).length;
+      const keyNth = keys.slice(0, i).filter((k) => k === keys[i]).length;
       type Armed = { x: number; y: number; covered?: string } | null;
       // A document replaced since the last read has no helper: that is a page to open again, never a crash (#64).
-      const arm = () => page.eval<Armed>(ARM(controls[i], nth)).catch((): Armed => null);
+      const arm = () => page.eval<Armed>(ARM(controls[i], nth, keys[i], keyNth)).catch((): Armed => null);
       let armed = await arm();
       // Something left open or a toast in the way: start the page again and try once more. A control not drawn yet on the
       // new load (a list still loading) is waited for up to the hang bound before it is called gone.

package/payload/src/components/base/surface/index.tsx

@@ -4,6 +4,7 @@ import { createContext, useContext, useEffect, useMemo, useRef, useState, type R
 import { app } from '@/app.config';
 import { HostBridge, type DisplayMode, type HostContext } from '@/lib/host';
 import { toast } from '@/components/ui/toast';
+import type { SharedContext } from '@/lib/shared-context';
 
 /**
  * Which surface a view is on, and what it may ask of its host. Components read `useSurface()` and never touch the
@@ -26,10 +27,14 @@ export type Surface = {
   openLink: (url: string) => void;
 };
 
-/** The context the console's view on screen last shared, and the path it was shared on (decision 0011). */
-let published: { path: string; text: string } | null = null;
+/** The context the console's view on screen last shared, the path it was shared on and its starter questions (decision 0011). */
+let published: { path: string; text: string; questions?: string[] } | null = null;
+const listeners = new Set<() => void>();
 /** What the console's assistant reads with a question: the shared context of the view on `path`, or `null` when that page shares none. */
 export const sharedContextOn = (path: string): string | null => (published?.path === path ? published.text : null);
+/** The questions the view on `path` offers to start a thread with, for `useSyncExternalStore`; none when it offers none. */
+export const questionsOn = (path: string): string[] | undefined => (published?.path === path ? published.questions : undefined);
+export const onShared = (listener: () => void) => { listeners.add(listener); return () => { listeners.delete(listener); }; };
 
 const CONSOLE: Surface = {
   kind: 'console',
@@ -37,7 +42,10 @@ const CONSOLE: Surface = {
   mode: 'fullscreen',
   host: {},
   expand: (p) => { window.location.href = p; },
-  share: (text) => { published = { path: window.location.pathname, text }; },
+  share: (text, structured) => {
+    published = { path: window.location.pathname, text, questions: (structured as SharedContext | undefined)?.questions };
+    for (const l of listeners) l();
+  },
   openLink: (u) => { window.open(u, '_blank', 'noopener'); },
 };
 

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

@@ -31,7 +31,7 @@ Status: beta
 | Stacked, identities | `parts` with a categorical `color` each: teams, or several usual outcomes (accepted, delivered and abandoned) that one grey would make one. No tone beside them |
 | Running | The last column is a period still in progress, in either form |
 
-**The colour of a part.** Parts with no tone are one whole, so they share the accent, mixed into the surface: deepest at the bottom and paler with each part above, between the theme's `chart-stack-hi` and `chart-stack-lo` (dark 92% to 20%, light 78% to 36%). It is the mix a stacked Trend chart takes, from the same function, so the two read as one family. Once any part names a tone the parts are outcomes: the usual outcome is `neutral` and takes `chart-neutral-strong`, and one that needs somebody takes `warning` or `critical`. A part with no tone among parts that have one is neutral too, so the accent never stands beside a status colour, and the positive colour is never used for the usual case. When the parts are identities (teams), or more than one outcome is usual, give each a categorical slot, `color` 1 to 6 in order, as a Trend series takes one: each draws in `series-<n>`, and a part with no slot (Other among them) is neutral. Keep status colours out of such a chart, as the accent is kept out of a toned one: coral (2) and saffron (5) read as a warning beside a real one. A chart with an outcome that needs somebody is a toned chart.
+**The colour of a part.** Parts with no tone are one whole, so they share the accent, mixed into the surface: deepest at the bottom and paler with each part above, between the theme's `chart-stack-hi` and `chart-stack-lo` (dark 92% to 20%, light 78% to 36%). It is the mix a stacked Trend chart takes, from the same function, so the two read as one family. Once any part names a tone the parts are outcomes: the usual outcome is `neutral` and takes `chart-neutral-strong`, and one that needs somebody takes `warning` or `critical`. A part with no tone among parts that have one is neutral too, so the accent never stands beside a status colour, and the positive colour is never used for the usual case. When a part already is the neutral (`tone: 'neutral'`), a second usual part, Other among them, takes no tone and is drawn in the quieter `chart-neutral`, so the two usual parts are told apart and Other stays the quietest; like the paler parts of one hue, it is not held to 3:1, and the swatch's hairline, the legend and the table carry it. When the parts are identities (teams), or more than one outcome is usual, give each a categorical slot, `color` 1 to 6 in order, as a Trend series takes one: each draws in `series-<n>`, and a part with no slot (Other among them) is neutral. Keep status colours out of such a chart, as the accent is kept out of a toned one: coral (2) and saffron (5) read as a warning beside a real one. A chart with an outcome that needs somebody is a toned chart.
 
 **At most four parts.** Past four, nobody tells the steps of one hue apart. Given more, the fourth drawn is "Other": the sum of the fourth and every later part, in the columns, the legend, the readout and the table alike. Among outcomes it has no tone of its own and is neutral.
 
@@ -43,7 +43,7 @@ Status: beta
 
 **Periods take dates.** A chart whose columns are periods (days, weeks, months) passes `dates`, one ISO date a column, the period's first day. Its labels then thin as dates do and are never cut; passed as categories, "27 Sept" is cut to its column on a phone and reads "27 S…". Outside a Meridian the dates change nothing else.
 
-**Running.** The last column is a period not over yet, such as today or the month so far. It is not a fact like the columns before it, so its fill is drawn at half strength, and a dashed outline, open at the baseline, stands around it. The fill alone would not do: a neutral column at half strength is nearly lost on the card (1.20:1 dark, 1.17:1 light, where a complete one is 1.50:1 and 1.39:1), so the outline, in `ink`, is what keeps the unfinished column a column, while its faded, hollowed body stays plainly weaker than a complete one. Wherever it is read it says "so far": the plain column's value when pointed at, the readout, the announcement and its row of the table. No other column does.
+**Running.** The last column is a period not over yet, such as today or the month so far. It is not a fact like the columns before it, so its fill is drawn at half strength, and a dashed outline, open at the baseline, stands around it. The fill alone would not do: a neutral column at half strength is nearly lost on the card (1.20:1 dark, 1.17:1 light, where a complete one is 1.50:1 and 1.39:1), so the outline, in `ink`, is what keeps the unfinished column a column, while its faded, hollowed body stays plainly weaker than a complete one. Wherever it is read it says "so far": the plain column's value when pointed at, the readout, the announcement and its row of the table. No other column does. A running period with no data reads "No data so far" (the product's `noData`, then "so far"); at rest, where its column is too narrow for those words, as on a phone, it reads "So far" above the dashed outline rather than a word cut short, and the rest say it whole.
 
 ## Sizes
 
@@ -106,6 +106,7 @@ The view shares the highlighted column and the day pointed at through `useShareV
 
 - Category labels are short (drop shared prefixes like `/v1/`); day labels are "27 Sept".
 - The axis takes an axis formatter, `AXIS_FORMATTERS.count` or `AXIS_FORMATTERS.cost` from `@/lib/format`: one that is true at every tick ("1.5K", never "2K" for 1,500). A value formatter that rounds, such as `formatCompact`, is not one. With no `axisFormat` the axis reads as `format` does, which is right only while `format` is exact.
+- A chart of counts passes `whole`: every level is a whole number, so a top of 1 is ticked 0 and 1, with no unlabelled level at 0.5 that no count stands at.
 - `format` must tell neighbouring columns apart, because it writes the value above each: an exact count where the values are in the hundreds and low thousands ("902", "1,124", "1,016"), a compact one from the tens of thousands up ("62K", "108K"). Three columns of different heights that all read "1K" say the chart is wrong.
 - Part labels are short nouns: "Enterprise", "us-east-1", "Failed". The fold is "Other".
 - A running period is "so far", after its label: "03 Oct · so far" in the readout, "03 Oct, so far" in the table.

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

@@ -28,6 +28,8 @@ type Shared = {
   format?: (n: number) => string;
   /** How a period with no data reads, wherever its value would: "No data" unless the product names it otherwise. */
   noData?: string;
+  /** The values are counts: every tick is a whole number, so a top of 1 draws no level at 0.5 (#72). */
+  whole?: boolean;
   /** How a tick reads: an axis formatter, true at every tick (`AXIS_FORMATTERS` in `@/lib/format`). Without one the axis
    * reads as `format` does, which is right only while `format` is exact: one that rounds prints a tick it does not stand at. */
   axisFormat?: (n: number) => string;
@@ -52,6 +54,8 @@ export type ColumnChartProps = Shared & (
  * narrowest column that keeps its value at rest, and the most parts drawn.
  */
 const GAP = 2, THIN = 1, REST = 36, MOST = 4;
+/** About the width of one character of a value at rest (`text-2xs`), in px: enough to tell whether a label fits its column. */
+const CH = 6.5;
 /**
  * The plot widths past which `n` columns stand another pixel apart, up to `GAP`: each is the width at which every
  * column still has `THIN` of its own. A chart with more columns than room closes its gaps before it outgrows its box,
@@ -77,15 +81,18 @@ type Drawn = { key: string; label: string; tone: 'accent' | 'series' | keyof typ
  * drawn is "Other", the sum of the fourth and every later one. Parts with neither a slot nor a tone share the accent,
  * each by its place in the stack. Once any part names a slot or a tone the parts are identities or outcomes: a part
  * with a slot takes it, a part with a tone takes the tone, and one with neither (Other among them) is the neutral, so
- * the accent never stands beside a categorical or a status colour.
+ * the accent never stands beside a categorical or a status colour. Where a part already is the neutral (`tone:
+ * 'neutral'`, a usual outcome beside one that needs somebody), one with neither is the quieter neutral, so the two
+ * usual parts are told apart and Other stays the quietest (#67).
  */
 function stack(columns: StackedColumn[], parts: ColumnPart[]) {
   const fold = parts.length > MOST;
   const listed: ColumnPart[] = fold ? [...parts.slice(0, MOST - 1), { key: 'other', label: 'Other' }] : parts;
   const named = parts.some((p) => p.tone || p.color);
+  const neutralTaken = parts.some((p) => p.tone === 'neutral' && !p.color);
   const drawn: Drawn[] = listed.map((p, k) => (
     p.color ? { key: p.key, label: p.label, tone: 'series', color: SERIES_VAR(p.color) }
-      : named ? { key: p.key, label: p.label, tone: p.tone ?? 'neutral', color: TONES[p.tone ?? 'neutral'] }
+      : named ? { key: p.key, label: p.label, tone: p.tone ?? 'neutral', color: p.tone ? TONES[p.tone] : neutralTaken ? 'var(--chart-neutral)' : TONES.neutral }
         : { key: p.key, label: p.label, tone: 'accent', color: stackPart(k, listed.length) }
   ));
   const bars = columns.map((c): Bar => {
@@ -119,6 +126,7 @@ export function ColumnChart({
   running = false,
   format = count,
   noData = 'No data',
+  whole = false,
   axisFormat,
   height = 200,
   label,
@@ -142,7 +150,7 @@ export function ColumnChart({
   const soFar = running ? n - 1 : -1;
 
   // A period with no data has no height, so the scale is the periods that have one.
-  const ticks = niceTicks(Math.max(1, ...bars.filter((b) => !b.none).map((b) => b.total)), 3);
+  const ticks = niceTicks(Math.max(1, ...bars.filter((b) => !b.none).map((b) => b.total)), 3, whole);
   const top = ticks[ticks.length - 1];
   const af = axisFormat ?? format;
   const left = Math.max(...ticks.map((t) => af(t).length)) * 6.4 + 10;
@@ -217,10 +225,13 @@ export function ColumnChart({
               const pointed = active === i;
               const hot = pointed || (active === null && b.key === highlight);
               const shown = drawn ? drawn.map((p, k) => ({ p, v: b.values[k] ?? 0 })).filter(({ v }) => v > 0) : [];
-              const text = totalOf(b, i);
               const unfinished = i === soFar;
               // Plain, the pointed value is the chart's readout and takes the tooltip's plane; stacked, the panel is.
               const tip = pointed && !drawn;
+              // At rest a label is held to its column. A running period with no data whose words do not fit says "So far",
+              // never "No data…" cut mid-word; the tooltip, the readout, the announcement and the table say it whole (#71).
+              const full = totalOf(b, i);
+              const text = !tip && b.none && unfinished && full.length * CH > column ? 'So far' : full;
               return (
                 <div
                   key={b.key}

package/payload/src/components/charts/column-chart/preview.tsx

@@ -35,6 +35,14 @@ const outcomes: ColumnPart[] = [
   { key: 'server', label: 'Server errors', tone: 'critical' },
 ];
 const byOutcome = [sum(STATUS_MIX.slice(0, 2)), STATUS_MIX[2].value, STATUS_MIX[3].value];
+/** A second usual outcome beside a tone: it takes no tone, so it is the quieter neutral beside the one that is the neutral. */
+const usualBesideTone: ColumnPart[] = [
+  { key: 'answered', label: 'Answered', tone: 'neutral' },
+  { key: 'redirected', label: 'Redirected' },
+  { key: 'client', label: 'Client errors', tone: 'warning' },
+  { key: 'server', label: 'Server errors', tone: 'critical' },
+];
+const byUsualBesideTone = STATUS_MIX.map((m) => m.value);
 /** Two usual outcomes, which one neutral would make one: a categorical slot each, and no status colour beside them. */
 const several: ColumnPart[] = [
   { key: 'answered', label: 'Answered', color: 1 },
@@ -95,6 +103,11 @@ export default function ColumnChartPreview() {
           <ColumnChart label="Requests per day, by how they were answered" format={formatCompact} axisFormat={axis} dates={dates(week)} parts={outcomes} columns={split(week, byOutcome)} />
         </Plane>
       </Specimen>
+      <Specimen label="Two usual outcomes beside a tone" note="Answered is the neutral (tone: 'neutral'); Redirected, also usual, takes no tone and is the quieter neutral, so the two are told apart in the stack and the legend, and Other, when there is one, stays the quietest. Categorical slots stay out, since coral and saffron would read as a warning beside a real one.">
+        <Plane on="surface">
+          <ColumnChart label="Requests per day, by status class" format={formatCompact} axisFormat={axis} dates={dates(week)} parts={usualBesideTone} columns={split(week, byUsualBesideTone)} />
+        </Plane>
+      </Specimen>
       <Specimen label="Several usual outcomes" note="Answered and redirected are both usual, and one grey would make them one: each takes a categorical slot (color 1, 2), in order. Teams, or any parts that are identities rather than shares of one hue, take the slots the same way, and a part with no slot is the neutral. No status colour stands beside the slots: coral and saffron would read as a warning, so a chart with an outcome that needs somebody is the tone chart above.">
         <Plane on="surface">
           <ColumnChart label="Answered requests per day, by how they were answered" format={formatCompact} axisFormat={axis} dates={dates(week)} parts={several} columns={split(week, bySeveral)} />

package/payload/src/components/charts/scale.ts

@@ -1,9 +1,12 @@
 /** Small, dependency-free scale helpers shared by the charts. */
 
-/** A "nice" upper bound and 3 to 5 ticks from 0 to it. */
-export function niceTicks(max: number, count = 4): number[] {
+/**
+ * A "nice" upper bound and 3 to 5 ticks from 0 to it. `whole` keeps every tick a whole number, for a scale of counts:
+ * a top of 1 is ticked 0 and 1, never with a level at 0.5 that no count stands at (#72).
+ */
+export function niceTicks(max: number, count = 4, whole = false): number[] {
   if (max <= 0) return [0, 1];
-  return ticksBetween(0, max, count);
+  return ticksBetween(0, max, count, whole);
 }
 
 /**
@@ -12,12 +15,14 @@ export function niceTicks(max: number, count = 4): number[] {
  * the one thing the chart is about the smallest mark on it. Both ends land on a step, so the lowest level is the floor
  * the plot is drawn to and `ticks[0]` may be read as it. Returns `[0, 1]` like `niceTicks` when there is nothing to show.
  */
-export function ticksBetween(floor: number, max: number, count = 4): number[] {
+export function ticksBetween(floor: number, max: number, count = 4, whole = false): number[] {
   if (max <= 0) return [0, 1];
   const raw = (max - floor) / count;
-  if (!(raw > 0)) return niceTicks(max, count);
+  if (!(raw > 0)) return niceTicks(max, count, whole);
   const mag = 10 ** Math.floor(Math.log10(raw));
-  const step = [1, 2, 2.5, 5, 10].map((m) => m * mag).find((s) => s >= raw) ?? raw;
+  const nice = [1, 2, 2.5, 5, 10].map((m) => m * mag).find((s) => s >= raw) ?? raw;
+  // A whole scale steps by a whole number: at least 1, and 2.5 becomes 5 as the next nice step (2.5 × 10 stays 25).
+  const step = !whole || Number.isInteger(nice) ? nice : nice < 1 ? 1 : [1, 2, 5, 10].map((m) => m * mag).find((s) => s >= nice && Number.isInteger(s)) ?? Math.ceil(nice);
   // How many steps a level is from zero, rounded before it is floored or ceilinged: in binary, 0.7 / 0.1 is 6.999…,
   // and a floor of 70% on a 10% step would otherwise come out as 60% — a whole step of the plot spent on nothing.
   const steps = (n: number) => Math.round(n / step * 1e6) / 1e6;

package/payload/src/components/patterns/activity-feed/README.md

@@ -6,7 +6,7 @@ Status: beta
 
 ## Anatomy
 
-1. **Actor**: a 24px Avatar for a person; a dot in a soft disc for the system (toned when the event is good or needs attention); an Agent mark for an agent.
+1. **Actor**: a 24px Avatar for a person; a dot in a soft disc for the system (toned when the event is good or needs attention); an Agent mark for an agent; an empty disc in a dashed `line-strong` hairline, with no initials, for an actor the record does not hold, so nobody unknown reads as a person.
 2. **Sentence**: the actor (`ink` 500), the verb (`ink-2`) and the object (`ink`), which is a link to its record (`ink` 500, `accent-ink` on hover, a → after it) when it has one; for an agent, "· for Jonas Weber" in `ink-3`.
 3. **Time**: relative (`text-xs`, `ink-3`, tabular), the exact time in its title.
 4. **Thread**: a 1px `line` joining the actors down the list.
@@ -17,7 +17,7 @@ Avatar, Agent mark, and the date formatters, inside a Card with a divided header
 
 ## Data
 
-`ActivityEvent { id, at, actor, via?, verb, object, href?, tone? }`. `via` names the agent when an assistant acted for `actor`. `href` is the object's record: an event about a record opens it, so the feed is never a dead end. `tone` (`positive`, `warning`, `critical`) colours the system's dot only.
+`ActivityEvent { id, at, actor, system?, unknown?, via?, verb, object, href?, tone? }`. `via` names the agent when an assistant acted for `actor`. `unknown` says the record does not hold who acted: `actor` is then the product's words for that ("Someone not recorded"), read in the line as any actor is, beside the empty disc. `href` is the object's record: an event about a record opens it, so the feed is never a dead end. `tone` (`positive`, `warning`, `critical`) colours the system's dot only.
 
 ## States
 

package/payload/src/components/patterns/activity-feed/index.tsx

@@ -5,8 +5,12 @@ import { formatDateTime, formatRelative } from '@/lib/format-date';
 import { Avatar } from '@/components/ui/avatar';
 import { AgentMark } from '@/components/ui/agent-mark';
 
-/** One event: who did what to what, and when. `via` names the agent when an assistant acted for `actor`; `system` marks the product acting on its own; `href` is the object's record, when it has one. */
-export type ActivityEvent = { id: string; at: string; actor: string; system?: boolean; via?: string; verb: string; object: string; href?: string; tone?: 'positive' | 'warning' | 'critical' };
+/**
+ * One event: who did what to what, and when. `via` names the agent when an assistant acted for `actor`; `system` marks the
+ * product acting on its own; `unknown` says the record does not hold who acted, and `actor` is then the words the product
+ * says for that ("Someone not recorded"); `href` is the object's record, when it has one.
+ */
+export type ActivityEvent = { id: string; at: string; actor: string; system?: boolean; unknown?: boolean; via?: string; verb: string; object: string; href?: string; tone?: 'positive' | 'warning' | 'critical' };
 
 const DOT = { positive: 'bg-positive', warning: 'bg-warning', critical: 'bg-critical' } as const;
 
@@ -21,7 +25,7 @@ export function ActivityFeed({ events, now, className }: { events: ActivityEvent
         <li key={e.id} className="relative flex gap-3 pb-4 last:pb-0">
           {i < events.length - 1 ? <span aria-hidden className="absolute top-7 bottom-0 left-3 w-px bg-line" /> : null}
           <span className="relative mt-0.5 shrink-0">
-            {e.via ? <AgentMark size="md" /> : e.system ? <span className="grid size-6 place-items-center rounded-full bg-fill-track"><span className={cn('size-2 rounded-full', e.tone ? DOT[e.tone] : 'bg-ink-3')} /></span> : <Avatar name={e.actor} size="sm" />}
+            {e.via ? <AgentMark size="md" /> : e.system ? <span className="grid size-6 place-items-center rounded-full bg-fill-track"><span className={cn('size-2 rounded-full', e.tone ? DOT[e.tone] : 'bg-ink-3')} /></span> : e.unknown ? <span data-actor-unknown className="block size-6 rounded-full border border-dashed border-line-strong" /> : <Avatar name={e.actor} size="sm" />}
           </span>
           <div className="min-w-0 flex-1 pt-0.5">
             <p className="text-sm text-ink-2">

package/payload/src/components/patterns/activity-feed/preview.tsx

@@ -23,6 +23,7 @@ export default function ActivityFeedPreview() {
             { id: 'w', at: new Date(DEMO_NOW.getTime() - 36 * 60_000).toISOString(), actor: app.name, system: true, verb: 'shifted traffic', object: 'from eu-west-1 to eu-central-1', tone: 'warning' },
             { id: 'a', at: new Date(DEMO_NOW.getTime() - 2.4 * 3600_000).toISOString(), actor: 'Jonas Weber', via: 'Claude', verb: 'raised the rate limit for', object: 'Parallax AI to 2,000 rpm' },
             { id: 's', at: new Date(DEMO_NOW.getTime() - 5.1 * 3600_000).toISOString(), actor: app.name, system: true, verb: 'deployed', object: 'gateway v4.18.2', href: '/releases', tone: 'positive' },
+            { id: 'u', at: new Date(DEMO_NOW.getTime() - 26 * 3600_000).toISOString(), actor: 'Someone not recorded', unknown: true, verb: 'issued a token for', object: 'the staging gateway' },
           ]}
         />
       </Specimen>

package/payload/src/components/patterns/assistant/README.md

@@ -8,7 +8,7 @@ Status: beta
 
 1. **Launcher**: a round 36px button in the top-bar tools with the Agent mark, named "Assistant".
 2. **Panel**: an `aside` named "Assistant", on the `frame` wash with a `line` edge, same as the rail.
-3. **Head**: 56px; the Agent mark, "Assistant" (`t-section`), Clear conversation and Close assistant (ghost icon buttons).
+3. **Head**: 56px; the Agent mark, "Assistant" (`t-section`), "Clear" and "Close" (small ghost buttons, an icon and the word; named "Clear conversation" and "Close assistant", which begin with the words shown).
 4. **Thread**: the messages in order, scrolling inside the panel, kept at the newest. Each question carries a quiet "On <page>" caption above its bubble. A change the assistant wants to make is a Proposal card in the message. A failed turn shows a critical Banner with Retry under the thread.
 5. **Composer**: a Textarea (grows to six rows) and Send (primary, icon only), on a `line` top edge.
 
@@ -29,7 +29,7 @@ Head 56px, composer padding 12px, thread padding 16px, message gap 16px. Launche
 | State | Look |
 |---|---|
 | Closed | Nothing renders; the launcher is `aria-expanded="false"` |
-| Open, empty | One sentence of help, `ink-3`, centred |
+| Open, empty | One sentence of help, `ink-3`, centred; under it, when the page in view shares questions (`SharedContext.questions`), one bordered `surface` button per question, full width, under "Questions to start with". Pressing one sends it as the person's own. A page that shares none keeps the sentence alone |
 | Open, thread | Messages; the thread follows the newest |
 | Thread, several pages | Each question is captioned with the page it was asked on ("On Members") |
 | Error | A critical alert with what happened and Retry; the thread stays |
@@ -60,7 +60,7 @@ The panel enters with no motion of its own yet; the launcher's states ease `colo
 ## Surfaces
 
 - **Console**: from 1024px a third column of the shell at `--assistant-width`; the page narrows by that much.
-- **Mobile** (under 1024px): the same panel as a sheet fixed to the right edge over the page, at most the viewport less 48px.
+- **Mobile** (under 1024px): the same panel as a sheet fixed to the right edge over the page, at most the viewport less 48px; below `sm` (40rem) the whole width, since a strip of cut page words beside it reads as nothing.
 - **Embed**: not applicable; the host is the assistant.
 
 Both are decided by CSS breakpoints, never by measuring the window.

package/payload/src/components/patterns/assistant/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useMemo, useRef, useState, type KeyboardEvent } from 'react';
+import { useEffect, useMemo, useRef, useState, useSyncExternalStore, type KeyboardEvent } from 'react';
 import { usePathname, useRouter } from 'next/navigation';
 import { useChat } from '@ai-sdk/react';
 import { APICallError, DefaultChatTransport, lastAssistantMessageIsCompleteWithApprovalResponses, type UIMessage } from 'ai';
@@ -10,12 +10,11 @@ import { app } from '@/app.config';
 import { AgentMark } from '@/components/ui/agent-mark';
 import { Banner } from '@/components/ui/banner';
 import { Button } from '@/components/ui/button';
-import { IconButton } from '@/components/ui/icon-button';
 import { Proposal, type ProposalChange, type ProposalState } from '@/components/patterns/proposal';
 import { Spinner } from '@/components/ui/spinner';
 import { Textarea } from '@/components/ui/textarea';
 import type { PageContext } from '@/lib/assistant/prompt';
-import { sharedContextOn } from '@/components/base/surface';
+import { onShared, questionsOn, sharedContextOn } from '@/components/base/surface';
 import { pageText } from './page-text';
 import { useThreadScope } from './scope';
 import { AssistantText } from './text';
@@ -88,8 +87,9 @@ function ProposalOf({ message, part, onDecide }: { message: UIMessage; part: Too
 }
 
 /**
- * The panel, drawn from its messages alone: a third column of the shell from 1024px, a sheet over the page below it.
- * Both come from CSS; nothing here measures the window.
+ * The panel, drawn from its messages alone: a third column of the shell from 1024px, a sheet over the page below it,
+ * the whole width of a phone, so no strip of cut page words is left beside it. All of it comes from CSS; nothing here
+ * measures the window.
  */
 export function AssistantPanel({
   messages,
@@ -100,6 +100,7 @@ export function AssistantPanel({
   onClear,
   error,
   onRetry,
+  questions,
   inline,
   className,
 }: {
@@ -114,6 +115,8 @@ export function AssistantPanel({
   /** Said in an alert under the thread, with Retry. */
   error?: string;
   onRetry?: () => void;
+  /** Questions to start the thread with, offered while it is empty: the page in view's (`SharedContext.questions`). */
+  questions?: string[];
   /** Draw in the flow instead of fixed to the viewport edge: for previews. */
   inline?: boolean;
   className?: string;
@@ -152,19 +155,33 @@ export function AssistantPanel({
         'flex h-full min-h-0 flex-col border-l border-line bg-frame backdrop-blur-xl backdrop-saturate-150',
         inline
           ? 'w-(--assistant-width) max-w-full'
-          : 'fixed inset-y-0 right-0 z-(--layer-overlay) w-(--assistant-width) max-w-[calc(100vw-48px)] bg-ground shadow-overlay lg:relative lg:z-auto lg:shrink-0 lg:bg-frame lg:shadow-none',
+          : 'fixed inset-y-0 right-0 z-(--layer-overlay) w-full bg-ground shadow-overlay sm:w-(--assistant-width) sm:max-w-[calc(100vw-48px)] lg:relative lg:z-auto lg:shrink-0 lg:bg-frame lg:shadow-none',
         className,
       )}
     >
       <div className="flex h-14 shrink-0 items-center gap-3 border-b border-line px-4">
         <AgentMark size="md" />
         <h2 className="t-card min-w-0 flex-1 truncate">Assistant</h2>
-        <IconButton label="Clear conversation" icon={<Eraser />} tooltip disabled={messages.length === 0} onClick={onClear} />
-        <IconButton label="Close assistant" icon={<X />} onClick={onClose} className="-mr-2" />
+        {/* Named on screen, not only to a screen reader: the accessible names begin with the words shown. */}
+        <Button size="sm" variant="ghost" icon={<Eraser />} aria-label="Clear conversation" disabled={messages.length === 0} onClick={onClear}>Clear</Button>
+        <Button size="sm" variant="ghost" icon={<X />} aria-label="Close assistant" onClick={onClose} className="-mr-2">Close</Button>
       </div>
       <div ref={thread} className="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto overscroll-contain px-4 py-4">
         {messages.length === 0 ? (
-          <p className="t-small m-auto max-w-[32ch] text-center text-ink-3">Ask about this page: what a figure means, or why it moved.</p>
+          <div data-assistant-empty className="m-auto flex w-full flex-col items-center gap-4">
+            <p className="t-small max-w-[32ch] text-center text-ink-3">Ask about this page: what a figure means, or why it moved.</p>
+            {questions?.length ? (
+              <ul aria-label="Questions to start with" className="flex w-full flex-col gap-2">
+                {questions.map((q) => (
+                  <li key={q}>
+                    <button type="button" disabled={busy} onClick={() => onSend(q)} className="press hit t-small w-full rounded-lg border border-line bg-surface px-3 py-2 text-left text-ink hover:border-line-strong disabled:opacity-45">
+                      {q}
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            ) : null}
+          </div>
         ) : (
           messages.map((m) => (
             <div key={m.id} data-role={m.role} className={cn('flex min-w-0 flex-col gap-1', m.role === 'user' && 'items-end')}>
@@ -247,6 +264,8 @@ export function AssistantColumn({ open, onClose, ask, onAsked }: { open: boolean
     [scope],
   );
   const router = useRouter();
+  // The page in view's starter questions, as its view shares them; a page that offers none keeps the plain empty state.
+  const questions = useSyncExternalStore(onShared, () => questionsOn(path), () => undefined);
   // The error that said the session changed hands since the thread began: the thread is gone, so it offers no Retry.
   const [changedHands, setChangedHands] = useState<Error | null>(null);
   const { messages, setMessages, sendMessage, regenerate, addToolApprovalResponse, status, error } = useChat({
@@ -313,6 +332,7 @@ export function AssistantColumn({ open, onClose, ask, onAsked }: { open: boolean
         setMessages([]);
         forgetThread(localStorage, scope);
       }}
+      questions={questions}
       error={error?.message}
       onRetry={error && error === changedHands ? undefined : () => regenerate()}
     />

package/payload/src/components/patterns/assistant/preview.tsx

@@ -33,8 +33,9 @@ export default function AssistantPreview() {
         <State label="Closed"><AssistantLauncher open={false} onClick={noop} /></State>
         <State label="Open"><AssistantLauncher open onClick={noop} /></State>
       </Specimen>
-      <Specimen label="Panel" note="From 1024px a third column at the assistant width; below it the same panel is a sheet over the page." className="items-start">
+      <Specimen label="Panel" note="From 1024px a third column at the assistant width; below it the same panel is a sheet over the page, the whole width of a phone. Empty, it offers the questions the page in view shares (SharedContext.questions), and only its line where the page shares none." className="items-start">
         <State label="Empty"><AssistantPanel inline messages={[]} onSend={noop} onClose={noop} onDecide={noop} onClear={noop} className="h-120 rounded-lg border" /></State>
+        <State label="Empty, with the page's questions"><AssistantPanel inline messages={[]} questions={['Why did requests change over the last 30 days?', 'What moved revenue over the last 30 days?', 'Is anything on this page out of the ordinary?']} onSend={noop} onClose={noop} onDecide={noop} onClear={noop} className="h-120 rounded-lg border" /></State>
         <State label="A short thread"><AssistantPanel inline messages={thread} onSend={noop} onClose={noop} onDecide={noop} onClear={noop} className="h-120 rounded-lg border" /></State>
         <State label="Across pages"><AssistantPanel inline messages={[...thread, asked('3', 'Which keys are unused?', 'API keys'), say('4', 'assistant', 'Two keys have not been used in 30 days.')]} onSend={noop} onClose={noop} onDecide={noop} onClear={noop} className="h-120 rounded-lg border" /></State>
         <State label="Error"><AssistantPanel inline messages={thread.slice(0, 1)} error="The assistant could not reach its provider. Try again." onRetry={noop} onSend={noop} onClose={noop} onDecide={noop} onClear={noop} className="h-120 rounded-lg border" /></State>

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

@@ -314,7 +314,7 @@ export function DataTable<R>({
                 <tr key={i} className="group/row">
                   {selectable ? <td data-mobile="check"><Skeleton className="size-4" /></td> : null}
                   {columns.map((c, j) => (
-                    <td key={c.key} data-mobile={roleOf(c)} data-num={c.numeric ? 'num' : undefined} className={cellClass({ numeric: c.numeric, hideBelow: c.hideBelow })}>
+                    <td key={c.key} data-mobile={roleOf(c)} data-num={c.numeric ? 'num' : undefined} data-hide-below={c.hideBelow} className={cellClass({ numeric: c.numeric, hideBelow: c.hideBelow })}>
                       <Skeleton className={cn('h-3', c.numeric ? 'ml-auto w-12' : c.grow ? ['w-48', 'w-40', 'w-56'][i % 3] : ['w-20', 'w-16', 'w-24'][(i + j) % 3])} />
                     </td>
                   ))}
@@ -340,7 +340,7 @@ export function DataTable<R>({
                       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} title={c.title ? c.title(r) : c.truncate && (typeof value === 'string' || typeof value === 'number') ? String(value) : undefined} className={cellClass(c) || undefined}>
+                        <td key={c.key} data-mobile={role} data-num={c.numeric ? 'num' : c.align === 'right' ? 'true' : undefined} data-hide-below={c.hideBelow} title={c.title ? c.title(r) : c.truncate && (typeof value === 'string' || typeof value === 'number') ? String(value) : undefined} className={cellClass(c) || undefined}>
                           {/* The dot that separates two facts, on a phone only — the table has a column for each of
                               them, where a dot would be noise. It leads the fact it separates, in that fact's own
                               cell: each fact is a flex item, so a line that runs out of room wraps whole ones and a

package/payload/src/components/ui/table/README.md

@@ -24,7 +24,7 @@ The names follow the HTML elements: `TableHead` is the `thead`, `TableHeader` is
 
 ## Sizes
 
-Column widths follow content. A column whose cells can be cut asks for all the width there is — `grow` on the head for the record's name, and `flexible` on any other head whose cells `truncate` — and takes what no other column needs; two or more of them share it, which is what a table with three long columns (a verification, its release, the reason it failed) needs. Every column that must show its whole value keeps its content width. A cut cell carries the full text in its `title`, or opens the record. Other text columns stay on one line. A flexible column is at least 160px, 256px once the table is 672px wide. `hideBelow` drops a column when the table itself is narrower than `sm` 512, `md` 672, `lg` 896 or `xl` 1152px, on its head and its cells alike.
+Column widths follow content. A column whose cells can be cut asks for all the width there is — `grow` on the head for the record's name, and `flexible` on any other head whose cells `truncate` — and takes what no other column needs; two or more of them share it, which is what a table with three long columns (a verification, its release, the reason it failed) needs. Every column that must show its whole value keeps its content width. A cut cell carries the full text in its `title`, or opens the record. Other text columns stay on one line. A flexible column is at least 160px, 256px once the table is 672px wide. `hideBelow` drops a column when the table itself is narrower than `sm` 512, `md` 672, `lg` 896 or `xl` 1152px, on its head and its cells alike, and marks each `data-hide-below`, so the column drawn last at that width, not the dropped one after it, takes the card's padding on its right.
 
 ## States
 

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

@@ -24,6 +24,11 @@ export function Table({ className, caption, children, ...rest }: HTMLAttributes<
         className={cn(
           'w-full border-separate border-spacing-0 text-sm',
           '[&_tr>*:first-child]:pl-(--card-pad) [&_tr>*:last-child]:pr-(--card-pad)',
+          /* The column drawn last takes the card's padding, whichever columns the table's width hides after it (#70). */
+          '@max-[1152px]:[&_tr>:nth-last-child(1_of_:not([data-hide-below=xl]))]:pr-(--card-pad)',
+          '@max-[896px]:[&_tr>:nth-last-child(1_of_:not([data-hide-below=xl]):not([data-hide-below=lg]))]:pr-(--card-pad)',
+          '@max-[672px]:[&_tr>:nth-last-child(1_of_:not([data-hide-below=xl]):not([data-hide-below=lg]):not([data-hide-below=md]))]:pr-(--card-pad)',
+          '@max-[512px]:[&_tr>:nth-last-child(1_of_:not([data-hide-below]))]:pr-(--card-pad)',
           /* A text column after a right-aligned number gets room to breathe, so "234ms" and "Example Co" read as two facts. */
           '[&_[data-num]+:not([data-num])]:pl-8',
           className,
@@ -88,6 +93,7 @@ export function TableHeader({
     <th
       scope="col"
       data-num={align === 'right' || undefined}
+      data-hide-below={hideBelow}
       aria-sort={sortable ? (sort === 'asc' ? 'ascending' : sort === 'desc' ? 'descending' : 'none') : undefined}
       className={cn(
         'h-9 border-y border-line bg-surface-sunk px-4 text-xs font-medium whitespace-nowrap text-ink-3 first:border-l-0',
@@ -144,6 +150,7 @@ export function TableCell({
   return (
     <td
       data-num={numeric || align === 'right' || undefined}
+      data-hide-below={hideBelow}
       // 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.

package/payload/src/lib/shared-context.ts

@@ -48,6 +48,11 @@ export type SharedContext = {
   insights: Insight[];
   /** What the data cannot say, stated so nobody fills the gap with a guess. */
   unknowns: string[];
+  /**
+   * Questions worth asking first about what the view shows, in the person's words: the console's assistant offers them
+   * while its thread is empty. They are for the person, so they are never in the text a model is told.
+   */
+  questions?: string[];
 };
 
 /** At most `max` items of a list, joined, and how many more there are: a context never grows with the data. */

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

@@ -273,6 +273,13 @@ export function homeContext(data: HomeData, index: number | null = null): Shared
     focus = `${formatDate(d.date)}, a ${wd}: ${count(d.requests)} requests${usual ? ` (${times(d.requests / usual)} the median ${wd})` : ''}; error rate ${formatPercent(errorRate[index], 2)}${ratioAgainst(errorRate[index], medianError, "the period's median")}; latency p95 ${formatDuration(d.p95)}${ratioAgainst(d.p95, medianP95, 'the median')}; revenue ${formatCost(d.revenue)}.`;
   }
 
-  return { view: 'home', title: 'Home', address, scope, freshness: freshnessOf(data.updatedAt, data.now), focus, facts, insights, unknowns };
+  // What a person asks first on Home, only about the figures they may read.
+  const over = period === 'all' ? 'over all time' : `over the ${label}`;
+  const questions = [
+    ...(data.requests ? [`Why did requests change ${over}?`] : []),
+    ...(data.revenue ? [`What moved revenue ${over}?`] : []),
+    'Is anything on this page out of the ordinary?',
+  ];
+  return { view: 'home', title: 'Home', address, scope, freshness: freshnessOf(data.updatedAt, data.now), focus, facts, insights, unknowns, questions };
 }
 

package/payload/tests/activity-feed-unknown.test.tsx

@@ -0,0 +1,22 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { ActivityFeed } from '@/components/patterns/activity-feed';
+
+const now = new Date('2026-10-19T12:00:00Z');
+const at = '2026-10-19T11:00:00Z';
+
+describe('an activity feed event whose actor the record does not hold (#68)', () => {
+  it('draws an empty mark with no initials, and the line reads the product\'s words', () => {
+    const { container } = render(<ActivityFeed events={[{ id: '1', at, actor: 'Someone not recorded', unknown: true, verb: 'issued a token for', object: 'x' }]} now={now} />);
+    const mark = container.querySelector('[data-actor-unknown]');
+    expect(mark).not.toBeNull();
+    expect(mark).toHaveTextContent(/^$/);
+    expect(container.querySelector('li')).not.toHaveTextContent(/\bSN\b/);
+    expect(container.querySelector('p')).toHaveTextContent(/^Someone not recorded issued a token for x$/);
+  });
+  it('still draws a known person\'s initials', () => {
+    const { container } = render(<ActivityFeed events={[{ id: '1', at, actor: 'Ada Lovelace', verb: 'resolved', object: 'x' }]} now={now} />);
+    expect(container.querySelector('[data-actor-unknown]')).toBeNull();
+    expect(container.querySelector('li')).toHaveTextContent(/^AL/);
+  });
+});

package/payload/tests/assistant-questions.test.tsx

@@ -0,0 +1,68 @@
+import { act, fireEvent, render, screen, waitFor, within } from '@testing-library/react';
+import { describe, expect, test, vi } from 'vitest';
+import { Tooltip } from 'radix-ui';
+import type { UIMessage } from 'ai';
+
+vi.mock('next/navigation', () => ({ usePathname: () => '/', useRouter: () => ({ refresh() {}, push() {}, replace() {} }) }));
+import { AppShell, PageFrame } from '@/components/base/shell';
+import { AssistantPanel } from '@/components/patterns/assistant';
+import { useShareView } from '@/components/base/use-share-view';
+import { contextText, type SharedContext } from '@/lib/shared-context';
+
+vi.stubGlobal('IntersectionObserver', class { observe() {} unobserve() {} disconnect() {} });
+
+const QUESTIONS = ['Why did requests change over the last 30 days?', 'Is anything on this page out of the ordinary?'];
+const context: SharedContext = { view: 'home', title: 'Home', address: '/', scope: 'last 30 days', facts: [], insights: [], unknowns: [], questions: QUESTIONS };
+const noop = () => {};
+const panel = (props: Partial<Parameters<typeof AssistantPanel>[0]>) =>
+  render(<Tooltip.Provider><AssistantPanel inline messages={[]} onSend={noop} onClose={noop} onDecide={noop} onClear={noop} {...props} /></Tooltip.Provider>);
+
+describe('the assistant panel\'s starter questions (#69)', () => {
+  test('offers the page\'s questions while the thread is empty, and sends one as the person\'s own when pressed', () => {
+    const onSend = vi.fn();
+    panel({ questions: QUESTIONS, onSend });
+    const list = screen.getByRole('list', { name: 'Questions to start with' });
+    expect(within(list).getAllByRole('button').map((b) => b.textContent)).toEqual(QUESTIONS);
+    fireEvent.click(within(list).getByRole('button', { name: QUESTIONS[1] }));
+    expect(onSend).toHaveBeenCalledWith(QUESTIONS[1]);
+  });
+
+  test('keeps the plain empty state where the page offers none, and offers none once there is a thread', () => {
+    const empty = panel({});
+    expect(screen.getByText(/^Ask about this page: what a figure means, or why it moved\.$/)).toBeInTheDocument();
+    expect(screen.queryByRole('list', { name: 'Questions to start with' })).toBeNull();
+    empty.unmount();
+    const said: UIMessage = { id: '1', role: 'user', parts: [{ type: 'text', text: 'Hello' }] };
+    panel({ questions: QUESTIONS, messages: [said] });
+    expect(screen.queryByRole('list', { name: 'Questions to start with' })).toBeNull();
+  });
+
+  test('names Clear and Close on screen, in names that begin with the words shown', () => {
+    panel({ messages: [{ id: '1', role: 'user', parts: [{ type: 'text', text: 'Hello' }] }] });
+    expect(screen.getByRole('button', { name: 'Clear conversation' })).toHaveTextContent(/^Clear$/);
+    expect(screen.getByRole('button', { name: 'Close assistant' })).toHaveTextContent(/^Close$/);
+  });
+
+  test('never tells the model the questions', () => {
+    expect(contextText(context)).not.toMatch(/out of the ordinary|Why did requests/);
+  });
+
+  test('in the shell, the panel offers the questions the view on screen shares', async () => {
+    function View() {
+      useShareView(context);
+      return <p>Traffic, reliability and spend.</p>;
+    }
+    await act(async () => {
+      render(
+        <Tooltip.Provider>
+          <AppShell rail={null} assistant={Promise.resolve(true)}>
+            <PageFrame title="Home"><View /></PageFrame>
+          </AppShell>
+        </Tooltip.Provider>,
+      );
+    });
+    fireEvent.click(await screen.findByRole('button', { name: 'Assistant' }, { timeout: 10_000 }));
+    const list = await screen.findByRole('list', { name: 'Questions to start with' }, { timeout: 10_000 });
+    await waitFor(() => expect(within(list).getAllByRole('button')).toHaveLength(2));
+  });
+});

package/payload/tests/chart-scale.test.ts

@@ -39,3 +39,17 @@ describe('ticksBetween: the levels a chart is drawn on', () => {
     expect(ticksBetween(0.7, 0, 4)).toEqual([0, 1]);
   });
 });
+
+describe('niceTicks for counts (#72)', () => {
+  it('steps by whole numbers only, so a top of 1 is ticked 0 and 1 and nothing between', () => {
+    expect(niceTicks(1, 3)).toEqual([0, 0.5, 1]);
+    expect(niceTicks(1, 3, true)).toEqual([0, 1]);
+    expect(niceTicks(2, 3, true)).toEqual([0, 1, 2]);
+    expect(niceTicks(7, 3, true)).toEqual([0, 5, 10]);
+    expect(niceTicks(9, 4, true)).toEqual([0, 5, 10]);
+    expect(niceTicks(0, 3, true)).toEqual([0, 1]);
+  });
+  it('leaves a scale of counts that steps by whole numbers already as it was', () => {
+    for (const max of [12, 40, 75, 640, 3_300_438]) expect(niceTicks(max, 3, true)).toEqual(niceTicks(max, 3));
+  });
+});

package/payload/tests/column-chart-running-narrow.test.tsx

@@ -0,0 +1,32 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+// A phone's card: six periods in about 300px leave each column some 45px, room for a value but not for "No data so far".
+vi.mock('@/components/charts/use-size', async () => {
+  const { useRef } = await import('react');
+  return { useSize: () => [useRef(null), { width: 300, height: 0 }] as const };
+});
+
+import { ColumnChart, type Column } from '@/components/charts/column-chart';
+
+const weeks: Column[] = [
+  { key: 'w1', label: '31 Aug', value: 12 },
+  { key: 'w2', label: '7 Sept', value: 9 },
+  { key: 'w3', label: '14 Sept', value: 14 },
+  { key: 'w4', label: '21 Sept', value: 11 },
+  { key: 'w5', label: '28 Sept', value: 10 },
+  { key: 'w6', label: '5 Oct', value: null },
+];
+
+describe('a running period with no data in a narrow column (#71)', () => {
+  it('reads So far at rest, never the words cut short, and says them whole in the table and when pointed at', () => {
+    const { container } = render(<ColumnChart label="Failed calls per 1,000" running columns={weeks} />);
+    const last = container.querySelector<HTMLElement>('[data-column="w6"]')!;
+    expect(last.querySelector('[data-value]')).toHaveTextContent(/^So far$/);
+    const rows = container.querySelectorAll('table tbody tr');
+    expect(rows[5].querySelector('td')).toHaveTextContent(/^No data so far$/);
+    fireEvent.keyDown(screen.getByRole('group', { name: /^Failed calls per 1,000/ }), { key: 'End' });
+    expect(container.querySelector('[aria-live="polite"]')).toHaveTextContent(/^5 Oct: No data so far$/);
+    expect(last.querySelector('[data-value]')).toHaveTextContent(/^No data so far$/);
+  });
+});

package/payload/tests/column-chart-stacked.test.tsx

@@ -171,4 +171,11 @@ describe('a stacked column chart whose parts are identities (#61)', () => {
     const { container } = render(<ColumnChart label="Calls per week, by team" parts={teams} columns={[{ key: 'w1', label: '14 Sept', values: [5, 4, 2] }]} />);
     expect(fill(container, 'o')).toBe('var(--chart-neutral-strong)');
   });
+  it('draws a part with neither beside a part that is the neutral as the quieter neutral, so two usual parts are told apart (#67)', () => {
+    const refusals: ColumnPart[] = [{ key: 'platform', label: 'Platform failed', tone: 'critical' }, { key: 'malformed', label: 'Malformed call', tone: 'warning' }, { key: 'held', label: 'A guardrail held', tone: 'neutral' }, { key: 'other', label: 'Other' }];
+    const { container } = render(<ColumnChart label="Refusals per week, by cause" parts={refusals} columns={[{ key: 'w1', label: '14 Sept', values: [1, 2, 6, 3] }]} />);
+    expect(fill(container, 'held')).toBe('var(--chart-neutral-strong)');
+    expect(fill(container, 'other')).toBe('var(--chart-neutral)');
+    expect(column(container, 'w1').querySelector('[data-part="other"]')).toHaveAttribute('data-tone', 'neutral');
+  });
 });

package/payload/tests/column-chart-whole.test.tsx

@@ -0,0 +1,19 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+vi.mock('@/components/charts/use-size', async () => {
+  const { useRef } = await import('react');
+  return { useSize: () => [useRef(null), { width: 720, height: 0 }] as const };
+});
+
+import { ColumnChart } from '@/components/charts/column-chart';
+
+const ticks = (c: HTMLElement) => [...c.querySelectorAll('[data-tick]')].map((t) => t.textContent);
+
+describe('a column chart of counts (#72)', () => {
+  it('draws whole levels only: a top of 1 is 0 and 1, with no level at 0.5', () => {
+    const columns = [{ key: 'a', label: 'Mon', value: 0 }, { key: 'b', label: 'Tue', value: 1 }];
+    expect(ticks(render(<ColumnChart label="Incidents opened" whole columns={columns} />).container)).toEqual(['0', '1']);
+    expect(ticks(render(<ColumnChart label="Incidents opened, as a rate" columns={columns} />).container)).toEqual(['0', '0.5', '1']);
+  });
+});

package/payload/tests/table-hide-below-pad.test.tsx

@@ -0,0 +1,18 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+
+// jsdom runs no container query, so this holds the half the browser cannot: each dropped cell says when it is dropped,
+// which the Table's padding rule reads to find the column drawn last (#70). The padding itself was measured in a browser.
+describe('a table whose last column drops below a width (#70)', () => {
+  it('marks the dropped column\'s head and cells with the width they drop below', () => {
+    const { container } = render(
+      <Table>
+        <TableHead><TableRow><TableHeader>Name</TableHeader><TableHeader hideBelow="lg">Started</TableHeader></TableRow></TableHead>
+        <TableBody><TableRow><TableCell>Login</TableCell><TableCell hideBelow="lg">4 h ago</TableCell></TableRow></TableBody>
+      </Table>,
+    );
+    expect([...container.querySelectorAll('[data-hide-below]')].map((c) => c.getAttribute('data-hide-below'))).toEqual(['lg', 'lg']);
+    expect(container.querySelector('table')!.className).toContain('@max-[896px]:[&_tr>:nth-last-child(1_of_:not([data-hide-below=xl]):not([data-hide-below=lg]))]:pr-(--card-pad)');
+  });
+});