zz-meridian 0.5.0 → 0.6.0

package/dist/reconcile.js

@@ -6,10 +6,13 @@ import { upsertManagedBlock } from './context.js';
 export const TOOLCHAIN = ['typescript', '@types/node', '@types/react', '@types/react-dom', 'tailwindcss', '@tailwindcss/postcss', 'eslint', 'eslint-config-next', 'vitest', '@vitejs/plugin-react', 'jsdom', '@testing-library/react', '@testing-library/jest-dom'];
 export const MERIDIAN_SCRIPTS = ['typecheck', 'test', 'tokens', 'check', 'contrast', 'gate', 'audit', 'verify', 'brand', 'shot', 'interactions', 'keyboard', 'vitals'];
 const isObj = (v) => typeof v === 'object' && v !== null && !Array.isArray(v);
-/** The minimum version of `x.y.z`, `^x.y.z`, `~x.y.z` or `>=x.y.z`; null for anything else. */
+/**
+ * The minimum version of `x.y.z`, `^x.y.z`, `~x.y.z` or `>=x.y.z`, where a missing minor or patch is 0 (`^24` is
+ * 24.0.0, `~5.9` is 5.9.0); null for anything else.
+ */
 function minimum(spec) {
-    const m = typeof spec === 'string' ? /^(?:\^|~|>=)?(\d+)\.(\d+)\.(\d+)$/.exec(spec.trim()) : null;
-    return m ? [Number(m[1]), Number(m[2]), Number(m[3])] : null;
+    const m = typeof spec === 'string' ? /^(?:\^|~|>=)?(\d+)(?:\.(\d+)(?:\.(\d+))?)?$/.exec(spec.trim()) : null;
+    return m ? [Number(m[1]), Number(m[2] ?? 0), Number(m[3] ?? 0)] : null;
 }
 const compare = (a, b) => a[0] - b[0] || a[1] - b[1] || a[2] - b[2];
 const file = (id, summary, instructions, path) => ({ id, summary, paths: [path], instructions, checks: [] });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-meridian",
-  "version": "0.5.0",
+  "version": "0.6.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,23 @@
 
 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.6.0] · 2026-10-06
+
+### Changed
+
+- **An API key is shown in full once, when it is created.** The keys collection stores each key's `hint` (its prefix and last four characters, `zzm_live_…f601`) and `secretHash` (the secret's SHA-256), never the secret. `createKey` returns the new key with its `secret` for the creation banner, and the table lists every key by its hint, with no Reveal or Copy. Breaking: `ApiKey` has `hint` and `secretHash` in place of `secret`, and `KeysView`'s `createKey` returns `ApiKey & { secret: string }`. A created project's own keys page and fixtures keep the old shape until the team takes the release's versions.
+- **Links are never underlined.** Hover is a colour change and focus is the focus ring every control has. `.link` (accent ink in a sentence) turns `ink` on hover; `.row-link` (a destination in a list) takes `accent-ink`; a Data table's linked row takes the `fill-hover` tint and its title keeps its colour. Before, both classes drew a 1px line across the link's box, which under a link holding a second line read as a rule across its whole width.
+- **Replay sends a failed request again.** On a 5xx or 429 request's page, Replay calls `replayRequest` (`app/(dashboard)/requests/[id]/actions.ts`): it authorizes the write, creates a new request with the same method, route, customer, region and model and a `replayOf` naming the original, and refreshes the request reads. A toast names the new request with Open, and its page links back. It used to toast "Replay queued" and send nothing. The requests collection allows `create` as a page-only operation, so the assistant cannot replay. `arrayCollection` takes `derive`, which works out a row's `derived` fields on every create and change. The request page no longer shows a fixed "API key" it did not know. Breaking: `RequestView` takes `replay`.
+- **A form in an open sheet says why it failed inside the sheet.** A refused invitation reopens the Members sheet with what was typed and a critical Banner, "Invitation not sent", with the reason. A refused key reads "Key not created" at the top of the Create a key sheet. Neither sends a toast over the sheet's own buttons. Refused changes made from a table row still toast.
+
+### Fixed
+
+- **`update` reads a dependency written as `^24` (or `~5.9`) as a version.** It used to call any range without a minor and patch "a specification Meridian cannot compare". Every created project carries `"@types/node": "^24"`, so each update asked the team to replace `^24` with "at least ^24" before it could complete. A missing minor or patch now counts as 0.
+
+### Release
+
+- **The release's timed default verify allows 180 s on the shared GitHub 4-CPU runner.** The same commit measured 111 s on one runner CPU and 152 s on another, so 120 s stopped a release on the draw of the machine. The default verify must still pass in full; 120 s remains the target on an adopter's own machine. The stakeholder's decision.
+
 ## [0.5.0] · 2026-10-06
 
 ### Added

package/payload/app/(dashboard)/keys/README.md

@@ -10,7 +10,7 @@ Status: beta
 |---|---|---|---|
 | Masthead | PageFrame: kicker, "API keys", one sentence, Create key (primary) | One band | Stacked |
 | 1 | Banner (accent), only right after a key is created: "Copy {name} now", the full key in a Copy field, dismissable | Full width | Full width |
-| 2 | Data table: Name with its environment, Key (masked Copy field, from 768px), Scopes (two and "+N", from 1280px), Created by (from 1024px), Created, Last used, and Revoke | Columns | Cards: name and environment, "Created …" and "Used …", Revoke |
+| 2 | Data table: Name with its environment, Key (its hint, `zzm_live_…f601`, in mono, from 768px), Scopes (two and "+N", from 1280px), Created by (from 1024px), Created, Last used, and Revoke | Columns | Cards: name and environment, "Created …" and "Used …", Revoke |
 | Sheet | Create a key: Name (required), Environment (Live or Test), Scopes (checkboxes); Cancel and Create key | From the right, 440px | From the bottom |
 | Dialog | Revoke: "Revoke {name}?", what fails and that it cannot be undone, when it was last used; Cancel and Revoke key (danger) | Centred | Bottom sheet |
 
@@ -22,13 +22,14 @@ Status: beta
 | Default | The collection's keys, in its order |
 | Just created | The accent Banner with the only full view of the secret; a toast "Key created" |
 | Name missing | The Name field's error: "Name the key after what uses it" |
+| Not created | A critical Banner at the top of the open sheet, "Key not created", with the server's reason; the sheet keeps what was typed |
 | Revoked | The row leaves; a toast "Key revoked" |
 | No keys | The first-run empty state with Create key |
 | Never used | "Never" in `ink-3` |
 
 ## Data
 
-The keys come from `collections.keys` (`src/data/collections.ts`), read on every request. Create and Revoke are server actions (`actions.ts`) that call `keys.create` and `keys.remove`, then the view refreshes the route; a rejected action shows a critical toast and changes nothing. The secret is generated on the server and shown once, in the banner. A secret is always masked in the table; Copy copies the real value without revealing it.
+The keys come from `collections.keys` (`src/data/collections.ts`), read on every request. Create and Revoke are server actions (`actions.ts`) that call `keys.create` and `keys.remove`, then the view refreshes the route. A rejected create is said inside the sheet; a rejected revoke shows a critical toast and puts the row back. The secret is generated on the server and returned once, to the banner, which is the only place it is ever shown. The collection stores the key's hint (its prefix and last four characters) and the secret's SHA-256, never the secret, so the table shows the hint and nothing in the browser or the cache can reveal or copy a listed key. To replace a key, create a new one and revoke the old.
 
 ## Embed view
 

package/payload/app/(dashboard)/keys/actions.ts

@@ -1,6 +1,6 @@
 'use server';
 
-import { randomBytes } from 'node:crypto';
+import { createHash, randomBytes } from 'node:crypto';
 import { updateTag } from 'next/cache';
 import { z } from 'zod';
 import { app } from '@/app.config';
@@ -16,14 +16,20 @@ const draft = z.object({
   scopes: z.array(z.enum(SCOPES), { error: 'Choose only the scopes a key can carry.' }).min(1, 'Give the key at least one scope.'),
 });
 
-/** Creates a key and returns it: the only moment its full secret leaves the server for a banner. */
-export async function createKey(input: z.input<typeof draft>): Promise<ApiKey> {
+/**
+ * Creates a key and returns it with its full secret: the only moment the secret exists outside the caller's own copy.
+ * What is stored is the key's hint (its prefix and last four characters) and the secret's SHA-256, never the secret.
+ */
+export async function createKey(input: z.input<typeof draft>): Promise<ApiKey & { secret: string }> {
   const { name, env, scopes } = draft.parse(input);
   const scope = await resolveAccess();
   if (!(await can(scope, 'keys', 'create'))) throw new AccessDenied();
-  const key = await collectionFor(scope, 'keys').create!({ name, env, scopes, owner: app.user.name, created: clock().toISOString(), lastUsed: null, secret: `zzm_${env}_${randomBytes(16).toString('hex')}` });
+  const secret = `zzm_${env}_${randomBytes(16).toString('hex')}`;
+  const hint = `zzm_${env}_…${secret.slice(-4)}`;
+  const secretHash = createHash('sha256').update(secret).digest('hex');
+  const key = await collectionFor(scope, 'keys').create!({ name, env, scopes, owner: app.user.name, created: clock().toISOString(), lastUsed: null, hint, secretHash });
   updateTag(collectionTag(scope.tenantId, 'keys'));
-  return key;
+  return { ...(key as ApiKey), secret };
 }
 
 export async function revokeKey(id: string): Promise<void> {

package/payload/app/(dashboard)/members/README.md

@@ -25,7 +25,7 @@ The row menu holds Suspend (Reactivate on a suspended member) and Remove.
 | Suspended | The status Badge in `warning` |
 | Name or email missing | The field's error under it; nothing is sent |
 | Changed | The page refreshes from the collection and a toast confirms: "Member suspended", "Member reactivated", "Member removed", "Invitation sent to {email}" |
-| Rejected | A critical toast with the reason; the table does not change |
+| Rejected | The table goes back to what it was. A refused invitation reopens the sheet with what was typed and a critical Banner, "Invitation not sent", with the reason; a refused status change or removal shows a critical toast with the reason |
 | No members | The first-run empty state with Invite member |
 
 ## Data

package/payload/app/(dashboard)/requests/[id]/README.md

@@ -9,7 +9,7 @@ Status: beta
 | Row | Pattern | Console | Mobile |
 |---|---|---|---|
 | Masthead | Detail head: "← Requests", the ID in mono with its status Badge, facts (method and route, latency, customer, when), More actions, Copy as cURL, and Replay as the primary when the request failed (5xx or 429) | One band | Facts wrap; actions on their own row |
-| 1 | Row `2/3`: Request facts (Key value, two columns: received, endpoint, latency, response size, customer linking to their requests, region, API key, cost, and model and tokens only on the routes that call a model; the ID and status are in the head, not repeated) · Trace (one bar per phase on a shared scale: gateway, auth, queue, the route's own work, the response) | Side by side | Stacked |
+| 1 | Row `2/3`: Request facts (Key value, two columns: received, endpoint, latency, response size, customer linking to their requests, region, the request it replays when it is a replay, cost, and model and tokens only on the routes that call a model; the ID and status are in the head, not repeated) · Trace (one bar per phase on a shared scale: gateway, auth, queue, the route's own work, the response) | Side by side | Stacked |
 | 2 | Request body and Response body side by side, each a card with a code block (wrapping, never scrolling sideways) and Copy | 1/2 + 1/2 | Stacked |
 
 ## States
@@ -19,13 +19,15 @@ Status: beta
 | Loading | `loading.tsx`: the facts beside the trace, then two body cards, as skeletons. The id is read inside that boundary |
 | Success | Status `neutral`; the route's own phase (Model, Search, Storage or Parse) in the accent; no primary action |
 | Rate limited, rejected, not found | Status `warning`; the trace ends at the limit, the validation or the lookup phase, in `critical`; tokens and cost read "None, refused"; the response is a short error body |
-| No request body (GET, DELETE) | The Request body card says "No body: a GET carries everything it needs in its address." in a dashed frame; Copy as cURL sends no `-d`; Replay says it runs again without "with the same body" |
+| No request body (GET, DELETE) | The Request body card says "No body: a GET carries everything it needs in its address." in a dashed frame; Copy as cURL sends no `-d` |
 | Failed | Status `critical`; the route's own phase and the error phase in `critical`; Replay is the primary |
+| Replayed | A toast "Replayed: 200 OK" (or 201) naming the new request, with Open; the new request leads the list and its page shows "Replay of" linking back |
+| Replay refused | A critical toast "Not replayed" with the reason; nothing is written |
 | Unknown ID | The page renders the console's Not found screen itself (`MissingPage`, see `app/not-found/README.md`), with `noindex`, rather than throwing `notFound()`, so the screen is in the first HTML |
 
 ## Data
 
-The request from the `requests` collection (`src/data/collections.ts`), queried by id; its trace and payloads from `traceOf()` and `payloadsOf()` in `src/system/fixtures/sample-records.ts`. Phases add up to the request's latency; the axis shows 0, half and the total.
+The request from the `requests` collection (`src/data/collections.ts`), queried by id. Replay is the page's Server Action (`actions.ts`, `replayRequest`): it authorizes, reads the request, and creates a new one with the same method, route, customer, region and model, naming the one it replays, then refreshes the tenant's request reads. A product calls its gateway there with the stored request; the sample's gateway answers a replay of a 5xx or a 429, the only requests that offer Replay, with the route's success. Its its trace and payloads from `traceOf()` and `payloadsOf()` in `src/system/fixtures/sample-records.ts`. Phases add up to the request's latency; the axis shows 0, half and the total.
 
 ## Embed view
 

package/payload/app/(dashboard)/requests/[id]/actions.ts

@@ -0,0 +1,34 @@
+'use server';
+
+import { updateTag } from 'next/cache';
+import { clock } from '@/data/collections';
+import { can, collectionFor, resolveAccess, Unauthenticated } from '@/data/access';
+import { collectionTag } from '@/data/read';
+import type { RequestRow } from '@/data/sample';
+
+export type ReplayResult = { ok: true; id: string; status: number } | { ok: false; error: string };
+
+/**
+ * Sends a logged request again: the same method, route, customer, region and model, as a new request that names the one
+ * it replays. A product calls its gateway here with the stored request; the sample's gateway answers a replay of a
+ * temporary failure (a 5xx or a 429, the only requests that offer Replay) with the route's success. Authorized like any
+ * write, then the tenant's request reads are refreshed.
+ */
+export async function replayRequest(id: string): Promise<ReplayResult> {
+  try {
+    const scope = await resolveAccess();
+    if (!(await can(scope, 'requests', 'create'))) return { ok: false, error: 'You do not have permission to replay requests.' };
+    const requests = collectionFor(scope, 'requests');
+    const original = (await requests.query({ where: [{ field: 'id', op: 'eq', value: id }] })).rows[0] as RequestRow | undefined;
+    if (!original) return { ok: false, error: `No request with id ${id}.` };
+    const status = original.method === 'POST' ? 201 : 200;
+    const replay = await requests.create!({
+      at: clock().toISOString(), method: original.method, route: original.route, status, latency: original.latency,
+      customer: original.customer, region: original.region, bytes: original.bytes, model: original.model, replayOf: original.id,
+    });
+    updateTag(collectionTag(scope.tenantId, 'requests'));
+    return { ok: true, id: String(replay.id), status };
+  } catch (e) {
+    return { ok: false, error: e instanceof Unauthenticated ? 'Sign in again to replay this request.' : e instanceof Error ? e.message : 'The request was not replayed.' };
+  }
+}

package/payload/app/(dashboard)/requests/[id]/page.tsx

@@ -2,6 +2,7 @@ import { read } from '@/data/read';
 import { FEATURED_REQUEST_IDS, traceOf, payloadsOf, type RequestRow } from '@/data/sample';
 import { MissingPage } from '@/views/missing-page';
 import { RequestView } from '@/views/request';
+import { replayRequest } from './actions';
 
 export function generateStaticParams() {
   return FEATURED_REQUEST_IDS.map((id) => ({ id }));
@@ -22,5 +23,5 @@ export default async function RequestPage({ params }: { params: Promise<{ id: st
   const { request: r, observedAt } = await byId(id);
   // Rendered here rather than thrown, so the screen is in the first HTML (see MissingPage).
   if (!r) return <MissingPage />;
-  return <RequestView request={r} trace={traceOf(r)} payloads={payloadsOf(r)} now={observedAt} />;
+  return <RequestView request={r} trace={traceOf(r)} payloads={payloadsOf(r)} now={observedAt} replay={replayRequest} />;
 }

package/payload/app/system/(atlas)/page.tsx

@@ -129,7 +129,7 @@ export default function AtlasHome() {
             <p className="t-kicker">{release.version} · {release.date}</p>
             <p className="t-small mt-4 max-w-[48ch] text-ink-2">{release.summary}</p>
             {changelog ? (
-              <Link href={changelog} className="mt-6 inline-flex items-center gap-1.5 text-sm font-medium text-accent-ink hover:underline">
+              <Link href={changelog} className="mt-6 inline-flex items-center gap-1.5 text-sm font-medium text-accent-ink hover:text-ink">
                 Full changelog <ArrowRight className="size-3.5" />
               </Link>
             ) : null}

package/payload/decisions/0010-the-adopter-contract.md

@@ -94,7 +94,7 @@ this is the reason they agree.
 - HTML caps are `/requests` 150 KiB and `/health` 100 KiB. The stakeholder set them after measurement showed no variant
   kept the page title instant within 130 KiB.
 - Weekly is weekly, release is release, and nothing runs twice. The release gates, each once, on the default verify
-  from a clean `.next` on the GitHub-hosted ubuntu-24.04 4-CPU runner (at most 120 s, with its browser smoke; the gate
+  from a clean `.next` on the GitHub-hosted ubuntu-24.04 4-CPU runner (at most 120 s, raised to 180 s in 0.6.0 because the runner's CPU varies, with its browser smoke; the gate
   and its unit tests run inside it) and on the consumer smoke from the tarball: adopt, create with its default verify,
   and all four published origins updated through finalize. After publishing it checks the registry serves the tested
   tarball (equal sha256) with provenance, and tags last. A weekly workflow runs `verify --full --perf` (the perf part a

package/payload/docs/assistant.md

@@ -93,7 +93,7 @@ Add it to `collections`. For a real store, write the same `Collection` yourself:
 
 Two fields on a collection keep the assistant in bounds:
 
-- `pageOnly`: operations only a page may perform. The assistant never gets a tool for them. In the sample, creating an API key is `pageOnly`, because the secret is shown once, on the page.
+- `pageOnly`: operations only a page may perform. The assistant never gets a tool for them. In the sample, creating an API key is `pageOnly`, because the secret is shown once, on the page, and so is replaying a request, a person's action on its page.
 - `hidden`: fields only a page may see. They are left out of every tool's input and of every query result. The sample hides a key's `secret`.
 
 Per collection the assistant gets `query_<name>`, and `create_<name>`, `update_<name>` and `remove_<name>` for what is allowed and not `pageOnly`. A query takes `where` conditions (`eq`, `ne`, `gt`, `lt`, `contains`, `in`), a `sort` and a `limit`. A field the collection does not have, or hides, is rejected, and a field with no value matches only `ne`. `arrayCollection` parses what is created or changed with the collection's `fields`, so the schema is where a record's rules live (the sample's members need a name and a valid email).

package/payload/docs/benchmark.md

@@ -11,7 +11,7 @@ Meridian held to the bar of award-winning sites (Awwwards, Webby, FWA) and of th
 | Visual hierarchy | Strong | One protagonist per page. Hierarchy ratio (largest text over median) on analytical pages: Overview 6×, Health 6.5×, Requests 4.6×, Analytics 4.6×; standalone screens 7.2–7.8× |
 | Colour | Strong | A night-sky neutral leaning indigo; one accent that is two numbers (hue, chroma), four presets; status trio reserved; six categorical chart slots validated for colour-vision deficiency (worst adjacent ΔE 10.2 light, 8.7 dark). 328 contrast pairs pass in every theme and accent |
 | Motion | Good | Three jobs (arrive, answer, float), four durations, three curves; data arrives once (a line draws, an area reveals, bars grow); nothing loops but a live dot and a skeleton; reduced motion shows the final state at once |
-| Micro-interaction | Good | The rail's pill springs between items; the Segmented thumb slides; a lit edge fades in under the pointer; an underline draws in on row links; the Meridian cursor answers pointer, touch and arrow keys with a readout on every chart and tile. Every control on every page is pressed by `scripts/interactions.ts`, with taps at 390px; none does nothing |
+| Micro-interaction | Good | The rail's pill springs between items; the Segmented thumb slides; a lit edge fades in under the pointer; a linked row takes a hover fill and a link changes colour, never underlined; the Meridian cursor answers pointer, touch and arrow keys with a readout on every chart and tile. Every control on every page is pressed by `scripts/interactions.ts`, with taps at 390px; none does nothing |
 | Responsive | Strong | Zero sideways scroll, zero clipped text and no table wider than its card at 390–1440px on every page (the last was missed until 2026-10-03: see below); tables become card lists under 768px; phone tiles put the sparkline beside the figure; dialogs become bottom sheets |
 | Originality | Strong | The Meridian (one time cursor shared by every chart, tile and the model); three surfaces including MCP Apps with a working host simulator; two operators with consent, provenance and handoff built into components |
 

package/payload/docs/distribution.md

@@ -150,8 +150,7 @@ For 0.5.0 they are:
 | `live-provider` | `src/data/collections.ts` without `src/data/live-actions.ts`, or a dashboard layout with neither `LiveProvider` nor `ConsoleLive` | `live.md`, "The live starters" and "Refreshing": add the five files and the provider |
 | `authorized-endpoints` | `app/api/assistant/route.ts`, or an `actions.ts` Server Action file, without a `resolveAccess` call | `cache.md`, "The assistant route": call `resolveAccess()` first and bring `tools.ts` and `respond.ts` over |
 
-The consumer smoke (`--update`) resolves the nine that touch source on all four published origins, a project adopted and a project created
-with 0.3.0 and with 0.4.0, as `references/update.md` tells an agent: a created origin, whose files are the template's,
+The consumer smoke (`--update`) updates a project adopted and a project created with each published release from 0.3.0 on. It resolves the nine migrations that touch source on the 0.3.0 and 0.4.0 origins, as `references/update.md` tells an agent: a created origin, whose files are the template's,
 takes the release's versions of the affected team-owned files and the files that arrived with them; an adopted origin,
 whose pages are the team's own, makes the minimal edit the instruction names. It then records the resolutions and
 finalizes, so the gate and the build run on the result, and checks the team's own files kept their bytes. A 0.4.0
@@ -204,7 +203,8 @@ Modelled on the release pipeline of the owner's earlier packages, one package in
    `cli/package.json`'s and the tag must be unused.
 2. **Gates** (ubuntu-24.04, 4 CPUs, the reference profile), each run once: the package's own tests (`tests/cli-*`, which
    no adopted or created project has); the template's default `verify` from a clean `.next` through
-   `cli/scripts/release-check.ts`, within 120 s and with its browser smoke (the gate and the template's unit tests run
+   `cli/scripts/release-check.ts`, within 180 s on the shared runner (whose CPU varies: one commit measured 111 s on one
+   and 152 s on another) and with its browser smoke (the gate and the template's unit tests run
    inside it); and the consumer smoke from the built tarball (step 4). The full, perf and recovery suites are never
    run here: they run weekly (below).
 3. **Pack and assert, before anything is irreversible**: `npm pack` in `cli/`, then on the tarball: the bin has its
@@ -214,7 +214,8 @@ Modelled on the release pipeline of the owner's earlier packages, one package in
    - `adopt` into `cli/test/fixture-next-app` (a minimal App Router app with one page and its own stylesheet), then
      install, `tsc --noEmit` and `next build`, all green. This is the test that keeps the Route A list complete.
    - `create` into a clean folder, then its default `pnpm verify`. The smoke quotes the coverage line.
-   - `update` from all four published origins (0.3.0 and 0.4.0, adopted and created) through finalize, as above.
+   - `update` from every published origin since 0.3.0 (adopted and created) through finalize, as above. A 0.5.0 origin
+     reports no migration; a created one with nothing to resolve completes in the update itself.
 5. **Publish** the tarball with `npm` 11.5.1 or newer through trusted publishing (OIDC), with `--provenance`. `pnpm
    publish` does not perform the OIDC exchange.
 6. **The registry's package**: `npx zz-meridian@<version> --version` answers the version, the registry's tarball has the

package/payload/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-meridian-template",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "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/skills/zz-meridian/references/cache.md

@@ -141,7 +141,7 @@ const DEMO: AccessScope = { tenantId: 'demo', subjectId: 'owner', authorizationK
 const DEMO_COLLECTIONS: Record<string, { collection: AnyCollection; ops: readonly Operation[] }> = {
   members: { collection: members, ops: ['read', 'create', 'update', 'remove'] },
   keys: { collection: keys, ops: ['read', 'create', 'remove'] },
-  requests: { collection: requests, ops: ['read'] },
+  requests: { collection: requests, ops: ['read', 'create'] },
 };
 
 export const { resolveAccess, collectionFor, can } = accessFrom({

package/payload/src/components/charts/timeline/README.md

@@ -33,7 +33,7 @@ Leave `from` and `to` out and the span is the items' own extent. A roadmap usual
 | State | Spec |
 |---|---|
 | Rest | as above |
-| Linked | an item with `href` makes its label a link (`row-link`: an underline draws in on hover) |
+| Linked | an item with `href` makes its label a link (`row-link`: it takes the accent on hover, with no underline) |
 | Outside the span | a bar is clipped to the span and the side that continues is squared off (`rounded-l-none` when it started before `from`, `rounded-r-none` when it ends after `to`), so work that runs past the window does not read as work that began at its edge; Today is drawn only when it falls inside |
 
 ## Behaviour

package/payload/src/components/charts/timeline/index.tsx

@@ -115,7 +115,7 @@ export function Timeline({
                 <Fragment key={it.id}>
                   {/* The label is the item's one link: visible, focusable, and read with the table's dates. */}
                   {it.href ? (
-                    <Link href={it.href} title={it.label} className="row-link self-center truncate py-2 pr-3 text-ink-2">{it.label}</Link>
+                    <Link href={it.href} title={it.label} className="row-link self-center truncate py-2 pr-3 text-ink-2 hover:text-accent-ink">{it.label}</Link>
                   ) : (
                     <span aria-hidden className="self-center truncate py-2 pr-3 text-ink-2" title={it.label}>{it.label}</span>
                   )}

package/payload/src/components/patterns/data-table/README.md

@@ -10,7 +10,7 @@ Status: beta
 2. **Title** (optional): `title`, `description` and `actions` as a Card header, when the table is one card among others on a page; a hairline under it when no toolbar follows.
 3. **Toolbar** (optional): a band above the table, `card-pad` horizontal and 14px vertical padding, a `line` divider under it from 768px. It holds a Filter bar.
 4. **Header row**: Table header cells, `surface-sunk`, 36px, `text-xs` 500 `ink-3`. A sortable head is a button with the sort arrow in `accent-ink`.
-5. **Rows**: `row-height` 52px (38px compact), a `line` divider between rows. The title column (`mobile: 'title'`, or the first) is a `.row-link` when the row opens a record.
+5. **Rows**: `row-height` 52px (38px compact), a `line` divider between rows. The title column (`mobile: 'title'`, or the first) is the row's link when the row opens a record. The whole row takes the `fill-hover` tint on hover; the title keeps its colour and is never underlined.
 6. **Selection column** (optional): 40px with a Checkbox; the head's checkbox selects the page and shows indeterminate when part of it is chosen.
 7. **Footer**: Pagination, under a `line` divider, shown only when the rows do not fit on one page.
 8. **Cards, not a second list** (under 768px): the same table's rows lay out as cards — the title and the status on one line, two or three facts under it in `text-xs` `ink-3`, separated by dots. It is the SAME tree: the row becomes a six-column grid and each cell says which part of the card it is (`data-mobile`), so nothing is built twice and no device downloads a tree it cannot show.
@@ -34,7 +34,7 @@ Row height and card padding come from the density: comfortable 52px and 24px, co
 | State | What shows |
 |---|---|
 | Rest | Rows; numeric columns right-aligned in tabular figures |
-| Hover (a linked row) | Row fill `fill-hover` over `dur-hover`; the title's underline draws in |
+| Hover (a linked row) | Row fill `fill-hover` over `dur-hover`; nothing else changes |
 | Selected | Row fill `accent-tint`; the checkbox in `accent` |
 | Focus | The link or the checkbox shows the 2px `accent` ring |
 | Loading | `aria-busy`; up to eight skeleton rows shaped like real ones (a wide bar in the grow column, short bars elsewhere, right-aligned bars in numeric columns) — the same eight rows on a phone, laid out as cards |

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

@@ -294,7 +294,7 @@ 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} className="row-link">{c.cell(r)}</Link> : c.cell(r);
+                      const content = c === titleColumn && href ? <Link href={href}>{c.cell(r)}</Link> : c.cell(r);
                       return (
                         <td key={c.key} data-mobile={role} data-num={c.numeric ? 'num' : c.align === 'right' ? 'true' : undefined} className={cellClass(c) || undefined}>
                           {/* A phone may want other words for the same cell — "Used 1 min ago", not "1 min ago" — so

package/payload/src/components/patterns/filter-bar/index.tsx

@@ -124,7 +124,7 @@ export function FilterBar({
           <span>
             <span className="font-medium text-ink">Set by {setBy}</span> · these filters came from the assistant
           </span>
-          {onClear ? <button type="button" onClick={onClear} className="hit font-medium text-accent-ink hover:underline">Clear</button> : null}
+          {onClear ? <button type="button" onClick={onClear} className="hit font-medium text-accent-ink hover:text-ink">Clear</button> : null}
         </p>
       ) : null}
     </div>

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

@@ -12,7 +12,7 @@ Status: beta
 4. **Code**: inline on `surface-sunk` with a `line` border; a fenced block on `surface-sunk`, `radius-lg`, wrapping instead of scrolling.
 5. **Tables**: inside a `line`-bordered frame, a `surface-sunk` header row, `text-sm` cells.
 6. **Quote**: a 2px `accent` rule on the left, `ink` text.
-7. **Links**: `.link`, in `accent-ink`, underlined on hover; a link out of the product sends no referrer.
+7. **Links**: `.link`, in `accent-ink`, turning `ink` on hover, never underlined; a link out of the product sends no referrer.
 
 ## Composition
 

package/payload/src/components/patterns/shell-tools/index.tsx

@@ -58,7 +58,7 @@ export function AlertsPanel({ alerts, now, read = new Set(), onOpen, onMarkAll }
         <p className="text-sm font-semibold">Alerts</p>
         {unread ? <span className="t-caption">{unread} new</span> : null}
         {unread && onMarkAll ? (
-          <button type="button" onClick={onMarkAll} className="hit ml-auto rounded-xs text-xs font-medium text-accent-ink hover:underline">
+          <button type="button" onClick={onMarkAll} className="hit ml-auto rounded-xs text-xs font-medium text-accent-ink hover:text-ink">
             Mark all read
           </button>
         ) : null}

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

@@ -6,7 +6,7 @@ Status: beta
 
 ## Anatomy
 
-1. **Ancestor**: a link, `ink-2`; its underline draws in on hover and it turns `ink`.
+1. **Ancestor**: a link, `ink-2`; it turns `ink` on hover, with no underline.
 2. **Separator**: a 12px chevron in `ink-3`, decorative.
 3. **Current page**: `ink`, medium, `aria-current="page"`.
 4. **Fold** (more than four levels): a 24px ellipsis button that opens a Menu of the hidden levels.
@@ -27,7 +27,7 @@ Status: beta
 | State | Ancestor |
 |---|---|
 | Rest | `ink-2` |
-| Hover | `ink`, underline draws over `dur-hover` |
+| Hover | `ink` over `dur-hover` |
 | Focus | 2px `accent` outline |
 
 ## Behaviour

package/payload/src/components/ui/card/preview.tsx

@@ -25,7 +25,7 @@ export default function CardPreview() {
               <p className="t-caption mt-2">Resets on 1 November</p>
             </CardBody>
             <CardFooter>
-              <a className="row-link inline-flex items-center gap-1 font-medium text-ink" href="#">Billing <ArrowUpRight className="size-3.5" /></a>
+              <a className="row-link inline-flex items-center gap-1 font-medium text-ink hover:text-accent-ink" href="#">Billing <ArrowUpRight className="size-3.5" /></a>
             </CardFooter>
           </Card>
         </Plane>

package/payload/src/components/ui/copy-field/README.md

@@ -58,6 +58,7 @@ Label the field with what it is: "API key", "Webhook signing secret".
 ## Do and do not
 
 - Do mask every secret by default.
+- Do not list a stored secret at all. An API key is shown in full once, when it is created; afterwards the page shows its hint (the prefix and the last four characters) as plain text, and the server never sends the secret again.
 - Do not offer Copy for something that is not meant to be pasted elsewhere.
 
 ## Implementation

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

@@ -63,7 +63,7 @@ When an agent's approved proposal applies, the toast names the agent: "Rate limi
 ## Do and do not
 
 - Do offer Undo instead of a confirmation dialog when an action can be reversed.
-- Do not use a toast for an error the person must act on; use a Banner or the field's error.
+- Do not use a toast for an error the person must act on; use a Banner or the field's error. A form in an open sheet or dialog that fails shows its error inside the form, at the top, and keeps what was typed: a toast would land on the form's own actions.
 
 ## Implementation
 

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

@@ -54,7 +54,7 @@ export function ToastView({
         {description ? <p className="mt-0.5 text-xs text-ink-2">{description}</p> : null}
       </div>
       {action ? (
-        <button type="button" className="press hit shrink-0 rounded-xs text-sm font-medium text-accent-ink hover:underline" onClick={action.onClick}>
+        <button type="button" className="press hit shrink-0 rounded-xs text-sm font-medium text-accent-ink hover:text-ink" onClick={action.onClick}>
           {action.label}
         </button>
       ) : null}

package/payload/src/data/access.ts

@@ -63,7 +63,7 @@ const DEMO: AccessScope = { tenantId: 'demo', subjectId: 'owner', authorizationK
 const DEMO_COLLECTIONS: Record<string, { collection: AnyCollection; ops: readonly Operation[] }> = {
   members: { collection: members, ops: ['read', 'create', 'update', 'remove'] },
   keys: { collection: keys, ops: ['read', 'create', 'remove'] },
-  requests: { collection: requests, ops: ['read'] },
+  requests: { collection: requests, ops: ['read', 'create'] },
 };
 
 export const { resolveAccess, collectionFor, can } = accessFrom({

package/payload/src/data/collections.ts

@@ -52,7 +52,8 @@ export const keys: Collection<ApiKey, 'id'> = arrayCollection({
   title: (k) => k.name,
   fields: z.object({
     name: z.string(),
-    secret: z.string(),
+    hint: z.string(),
+    secretHash: z.string(),
     owner: z.string(),
     created: z.string(),
     lastUsed: z.string().nullable(),
@@ -62,7 +63,7 @@ export const keys: Collection<ApiKey, 'id'> = arrayCollection({
   rows: API_KEYS,
   allow: ['create', 'remove'],
   pageOnly: ['create'],
-  hidden: ['secret'],
+  hidden: ['secretHash'],
 });
 
 /** A request as the collection holds it: the record plus two values worked out for filtering, never written. `search` is the lower-cased id, route and customer; a page does not carry it (`publicRows`). */
@@ -84,10 +85,14 @@ export const requests: Collection<RequestRecord, 'id'> = arrayCollection({
     region: z.string(),
     bytes: z.number(),
     model: z.string().nullable(),
+    replayOf: z.string().nullable().default(null),
   }),
   derived: ['statusClass', 'search'],
+  derive: (r) => ({ statusClass: statusClass(Number(r.status)), search: `${r.id} ${r.route} ${r.customer}`.toLowerCase() }),
   rows: REQUESTS.map((r) => ({ ...r, statusClass: statusClass(r.status), search: `${r.id} ${r.route} ${r.customer}`.toLowerCase() })),
-  allow: [],
+  // A replay is the one write: a person sending a failed request again from its page, never the assistant.
+  allow: ['create'],
+  pageOnly: ['create'],
 });
 
 export const collections: AnyCollection[] = [members, keys, requests];

package/payload/src/lib/collection.ts

@@ -124,6 +124,8 @@ export function arrayCollection<T extends Record<string, unknown>, K extends key
   description: string;
   fields: z.ZodObject;
   derived?: (keyof T & string)[];
+  /** Works out the `derived` fields of a row from the rest; run on every created and changed row, never written by a caller. */
+  derive?: (row: Record<string, unknown>) => Partial<T>;
   key: K;
   title: (row: T) => string;
   rows: T[];
@@ -197,6 +199,7 @@ export function arrayCollection<T extends Record<string, unknown>, K extends key
   if (allow.includes('create')) {
     c.create = async (input) => {
       const row = { ...def.fields.parse(input), [key]: `${name}_${store().next++}` } as unknown as T;
+      Object.assign(row, def.derive?.(row));
       rows().push(row);
       emit();
       return copy(row);
@@ -206,7 +209,7 @@ export function arrayCollection<T extends Record<string, unknown>, K extends key
     c.update = async (ids, patch) => {
       const set = patchOf(def.fields).parse(patch);
       const hit = pick(ids);
-      for (const r of hit) Object.assign(r, set);
+      for (const r of hit) Object.assign(r, set, def.derive?.({ ...r, ...set }));
       emit();
       return copy(hit);
     };

package/payload/src/styles/base.css

@@ -138,20 +138,16 @@
     clip: rect(0 0 0 0); white-space: nowrap; border: 0;
   }
 
-  /* A link inside a sentence is accent ink with an underline that draws in from the left. */
-  .link {
-    color: var(--accent-ink); text-decoration: none;
-    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
-    transition: background-size var(--dur-hover) var(--ease-out);
-  }
-  .link:hover { background-size: 100% 1px; }
-
-  /* A destination in a list stays ink; the underline draws on hover. */
-  .row-link {
-    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
-    transition: background-size var(--dur-hover) var(--ease-out), color var(--dur-hover);
-  }
-  .row-link:hover { background-size: 100% 1px; color: var(--accent-ink); }
+  /* Links are never underlined: hover is a colour change, and focus is the focus ring every control has.
+     A link inside a sentence is accent ink, and turns ink on hover. */
+  .link { color: var(--accent-ink); text-decoration: none; transition: color var(--dur-hover) var(--ease-out); }
+  .link:hover { color: var(--ink); }
+
+  /* A destination in a list stays ink, and takes the accent on hover. A colour utility on the link (`text-ink`) sits in a
+     later layer and wins over this hover, so such a link also carries `hover:text-accent-ink`. A table row's title is
+     neither: the whole row is the target and takes the hover fill, and its title keeps its colour. */
+  .row-link { transition: color var(--dur-hover) var(--ease-out); }
+  .row-link:hover { color: var(--accent-ink); }
 
   /* A scrolling strip fades out at an edge with more behind it, so a cut-off item reads as "more this way", never as
      broken. The fade follows the strip's own scroll: none at rest when everything fits, none at the end it has reached.

package/payload/src/system/fixtures/sample-records.ts

@@ -95,14 +95,19 @@ export function payloadsOf(r: RequestRow): { request: string | null; response: s
   return { request: request ? JSON.stringify(request, null, 2) : null, response: JSON.stringify(response, null, 2) };
 }
 
-export type ApiKey = { id: string; name: string; secret: string; owner: string; created: string; lastUsed: string | null; scopes: string[]; env: 'live' | 'test' };
+/**
+ * An API key as it is stored: never the secret itself. `hint` is the non-secret part a person recognises the key by (its
+ * prefix and last four characters), and `secretHash` is what a request's key is checked against. The full secret exists
+ * once, in what `createKey` returns.
+ */
+export type ApiKey = { id: string; name: string; hint: string; secretHash: string; owner: string; created: string; lastUsed: string | null; scopes: string[]; env: 'live' | 'test' };
 const ago = (days: number, hours = 0) => new Date(DEMO_NOW.getTime() - days * 86_400_000 - hours * 3_600_000).toISOString();
 export const API_KEYS: ApiKey[] = [
-  { id: 'key_01', name: 'Production backend', secret: 'zzm_live_4f9a2c71e8b04d6f93a1c5e2d7b8f601', owner: 'Maya Chen', created: ago(212), lastUsed: ago(0, 0.02), scopes: ['messages', 'search', 'embeddings'], env: 'live' },
-  { id: 'key_02', name: 'Search indexer', secret: 'zzm_live_9b3e1d55a7c24f08b6e2a9d1c4f7e830', owner: 'Jonas Weber', created: ago(141), lastUsed: ago(0, 0.4), scopes: ['embeddings', 'files'], env: 'live' },
-  { id: 'key_03', name: 'Support assistant', secret: 'zzm_live_2c8d4a96f1e34b7a85d0c3e9b6a2f417', owner: 'Amara Okafor', created: ago(63), lastUsed: ago(0, 3), scopes: ['messages'], env: 'live' },
-  { id: 'key_04', name: 'Staging', secret: 'zzm_test_7e1f3b29c5d84a60b2f9e8c1d3a7b552', owner: 'Jonas Weber', created: ago(30), lastUsed: ago(2), scopes: ['messages', 'search', 'embeddings', 'files', 'webhooks'], env: 'test' },
-  { id: 'key_05', name: 'Load test, October', secret: 'zzm_test_5a0c9e17b3f24d8e91c6a2b7f4d0e389', owner: 'Maya Chen', created: ago(1), lastUsed: null, scopes: ['messages'], env: 'test' },
+  { id: 'key_01', name: 'Production backend', hint: 'zzm_live_…f601', secretHash: 'a70b9eb5972206dad7965842f9c1a020b6fbd671f95ff4d90e04f31440a0767c', owner: 'Maya Chen', created: ago(212), lastUsed: ago(0, 0.02), scopes: ['messages', 'search', 'embeddings'], env: 'live' },
+  { id: 'key_02', name: 'Search indexer', hint: 'zzm_live_…e830', secretHash: 'c5e3a95789cd465edf1a812638689aec44e22c712ddf8aebd143f92db44ec2c9', owner: 'Jonas Weber', created: ago(141), lastUsed: ago(0, 0.4), scopes: ['embeddings', 'files'], env: 'live' },
+  { id: 'key_03', name: 'Support assistant', hint: 'zzm_live_…f417', secretHash: '645516307926d8cf8f1a4ffc7706ff525379e0bd50f143b672b537a1b84a605e', owner: 'Amara Okafor', created: ago(63), lastUsed: ago(0, 3), scopes: ['messages'], env: 'live' },
+  { id: 'key_04', name: 'Staging', hint: 'zzm_test_…b552', secretHash: 'b7caa2d349c1e2bc72d6d1c80e09c7f20a99e1d86580f5b9c058cdc9aaeb784c', owner: 'Jonas Weber', created: ago(30), lastUsed: ago(2), scopes: ['messages', 'search', 'embeddings', 'files', 'webhooks'], env: 'test' },
+  { id: 'key_05', name: 'Load test, October', hint: 'zzm_test_…e389', secretHash: 'cb3e8f7c3409619a25c56b233f885082c1ddfda97d99aa4a60eba6ddca281440', owner: 'Maya Chen', created: ago(1), lastUsed: null, scopes: ['messages'], env: 'test' },
 ];
 
 export type CustomerRecord = (typeof CUSTOMER_ROWS)[number] & { id: string; region: string; since: string; errorRate: number; seats: number };

package/payload/src/system/fixtures/sample.ts

@@ -128,6 +128,8 @@ const REGION_IDS = REGIONS.map((r) => r.label);
 export type RequestRow = {
   id: string; at: string; method: string; route: string; status: number; latency: number;
   customer: string; region: string; bytes: number;
+  /** The request this one replays, when a person sent a failed request again from its page. */
+  replayOf?: string | null;
   /** The model that served it: only /v1/messages and /v1/embeddings call one. */
   model: string | null;
 };

package/payload/src/views/keys.tsx

@@ -29,7 +29,7 @@ type Draft = { name: string; env: 'live' | 'test'; scopes: Scope[] };
 
 /** The server actions arrive as props: the page owns them, the view only calls them and refreshes the route. */
 /** `now` is the read's observation time, so "last used" is never fresher than the data. */
-export function KeysView({ rows, now, createKey, revokeKey }: { rows: ApiKey[]; now: string; createKey: (draft: Draft) => Promise<ApiKey>; revokeKey: (id: string) => Promise<void> }) {
+export function KeysView({ rows, now, createKey, revokeKey }: { rows: ApiKey[]; now: string; createKey: (draft: Draft) => Promise<ApiKey & { secret: string }>; revokeKey: (id: string) => Promise<void> }) {
   const router = useRouter();
   useLive(['keys']);
   const asOf = new Date(now);
@@ -38,11 +38,13 @@ export function KeysView({ rows, now, createKey, revokeKey }: { rows: ApiKey[];
   const [pending, startTransition] = useTransition();
   const [creating, setCreating] = useState(false);
   const [revoking, setRevoking] = useState<ApiKey | null>(null);
-  const [fresh, setFresh] = useState<ApiKey | null>(null);
+  const [fresh, setFresh] = useState<(ApiKey & { secret: string }) | null>(null);
   const [name, setName] = useState('');
   const [env, setEnv] = useState<'live' | 'test'>('live');
   const [scopes, setScopes] = useState<Scope[]>(['messages']);
   const [error, setError] = useState<string | null>(null);
+  /** Why the server did not create the key: said inside the open sheet, never in a toast over its button. */
+  const [createError, setCreateError] = useState<string | null>(null);
 
   /** Runs an action, refreshes the route on success, and shows a critical toast, changing nothing, when it is rejected. */
   const run = (action: () => Promise<void>, failed: string) =>
@@ -57,13 +59,19 @@ export function KeysView({ rows, now, createKey, revokeKey }: { rows: ApiKey[];
 
   const create = () => {
     if (!name.trim()) return setError('Name the key after what uses it: "Billing worker".');
-    run(async () => {
-      const k = await createKey({ name, env, scopes });
-      setFresh(k);
-      setCreating(false);
-      setName(''); setScopes(['messages']); setError(null);
-      toast({ tone: 'positive', title: 'Key created', description: `${k.name} can call ${k.scopes.join(', ')}.` });
-    }, 'Could not create the key');
+    setCreateError(null);
+    startTransition(async () => {
+      try {
+        const k = await createKey({ name, env, scopes });
+        setFresh(k);
+        setCreating(false);
+        setName(''); setScopes(['messages']); setError(null);
+        toast({ tone: 'positive', title: 'Key created', description: `${k.name} can call ${k.scopes.join(', ')}.` });
+        router.refresh();
+      } catch (e) {
+        setCreateError(e instanceof Error ? e.message : 'The key could not be created. Try again.');
+      }
+    });
   };
 
   const columns: Column<ApiKey>[] = [
@@ -76,7 +84,8 @@ export function KeysView({ rows, now, createKey, revokeKey }: { rows: ApiKey[];
         </span>
       ),
     },
-    { key: 'secret', header: 'Key', hideBelow: 'md', cell: (k) => <CopyField value={k.secret} label={`${k.name} key`} secret className="w-60" /> },
+    // The full key is shown once, when it is created; a listed key is known by its hint, which is not a secret.
+    { key: 'hint', header: 'Key', hideBelow: 'md', cell: (k) => <code className="font-mono text-xs text-ink-2">{k.hint}</code> },
     {
       key: 'scopes', header: 'Scopes', hideBelow: 'xl',
       cell: (k) => (
@@ -108,7 +117,7 @@ export function KeysView({ rows, now, createKey, revokeKey }: { rows: ApiKey[];
       kicker={<>{app.name} · {app.workspace}</>}
       title="API keys"
       description={`Keys let your services call ${app.name}. Each one carries only the scopes it needs.`}
-      actions={<Button variant="primary" icon={<Plus />} onClick={() => setCreating(true)}>Create key</Button>}
+      actions={<Button variant="primary" icon={<Plus />} onClick={() => { setCreateError(null); setCreating(true); }}>Create key</Button>}
     >
       <Stack>
         {fresh ? (
@@ -125,7 +134,7 @@ export function KeysView({ rows, now, createKey, revokeKey }: { rows: ApiKey[];
             rows={shown}
             columns={columns}
             rowKey={(k) => k.id}
-            empty={{ title: 'No keys yet', body: `Create a key for each service that calls ${app.name}.`, action: <Button variant="primary" size="sm" icon={<Plus />} onClick={() => setCreating(true)}>Create key</Button> }}
+            empty={{ title: 'No keys yet', body: `Create a key for each service that calls ${app.name}.`, action: <Button variant="primary" size="sm" icon={<Plus />} onClick={() => { setCreateError(null); setCreating(true); }}>Create key</Button> }}
           />
         </Tooltip.Provider>
         <p className="t-caption max-w-[72ch]">Keys never expire. To rotate one, create its replacement, move your services to it, then revoke the old key: requests signed with it fail at once.</p>
@@ -138,6 +147,7 @@ export function KeysView({ rows, now, createKey, revokeKey }: { rows: ApiKey[];
           footer={<><SheetClose asChild><Button variant="ghost">Cancel</Button></SheetClose><Button variant="primary" onClick={create} disabled={pending || scopes.length === 0}>Create key</Button></>}
         >
           <div className="flex flex-col gap-6">
+            {createError ? <Banner tone="critical" title="Key not created">{createError}</Banner> : null}
             <Field label="Name" hint="Name it after what uses it." error={error ?? undefined} required>
               {(p) => <Input {...p} value={name} onChange={(e) => { setName(e.target.value); setError(null); }} placeholder="Billing worker" />}
             </Field>

package/payload/src/views/members.tsx

@@ -7,6 +7,7 @@ import { app } from '@/app.config';
 import { PageFrame, Stack } from '@/components/base/shell';
 import { Avatar } from '@/components/ui/avatar';
 import { Badge } from '@/components/ui/badge';
+import { Banner } from '@/components/ui/banner';
 import { Button } from '@/components/ui/button';
 import { Dialog, DialogClose, DialogContent } from '@/components/ui/dialog';
 import { Field } from '@/components/ui/field';
@@ -56,13 +57,16 @@ export function MembersView({ rows, now, actions }: { rows: Member[]; now: strin
   const [removing, setRemoving] = useState<Member | null>(null);
   const [invite, setInvite] = useState(BLANK);
   const [errors, setErrors] = useState<{ name?: string; email?: string }>({});
+  /** Why the server did not send the last invitation: said inside the sheet it was sent from, never in a toast over it. */
+  const [inviteError, setInviteError] = useState<string | null>(null);
 
   /**
    * Show `optimistic` at once, then run the action for the row `id`. The change stays until the transition ends, which waits for
-   * the refreshed rows; a refusal or a failed request toasts the reason and the table goes back to the rows it was given. A row with an action
-   * in flight takes no second one.
+   * the refreshed rows; on a refusal or a failed request the table goes back to the rows it was given, and the reason is
+   * toasted, or handed to `failed` when the change came from a form that shows its own errors. A row with an action in
+   * flight takes no second one.
    */
-  const act = (id: string, optimistic: Change, action: () => Promise<Result>, done: { title: string; description?: string }, failed?: () => void) => {
+  const act = (id: string, optimistic: Change, action: () => Promise<Result>, done: { title: string; description?: string }, failed?: (reason: string) => void) => {
     if (inFlight.current.has(id)) return;
     inFlight.current.add(id);
     start(async () => {
@@ -71,7 +75,7 @@ export function MembersView({ rows, now, actions }: { rows: Member[]; now: strin
         // A refusal comes back as a reason; an action that never answered (a dropped connection) throws, and is told the same way.
         const r = await action().catch((): Result => ({ ok: false, error: 'The change did not reach the server. Try again.' }));
         if (!r.ok) {
-          failed?.();
+          if (failed) return failed(r.error);
           return toast({ tone: 'critical', title: 'Change not made', description: r.error });
         }
         router.refresh();
@@ -93,7 +97,8 @@ export function MembersView({ rows, now, actions }: { rows: Member[]; now: strin
     const row: Shown = { id: `pending-${tempId.current++}`, name: draft.name.trim(), email: draft.email.trim(), role: draft.role, team: draft.team, status: 'Invited', joined: now.slice(0, 10), lastActive: null, pending: true };
     setInviting(false);
     setInvite(BLANK);
-    act(row.id, { type: 'add', row }, () => actions.invite(draft), { title: `Invitation sent to ${row.email}`, description: `${row.name} joins as ${draft.role} on ${draft.team} when they accept.` }, () => { setInvite(draft); setInviting(true); });
+    setInviteError(null);
+    act(row.id, { type: 'add', row }, () => actions.invite(draft), { title: `Invitation sent to ${row.email}`, description: `${row.name} joins as ${draft.role} on ${draft.team} when they accept.` }, (reason) => { setInvite(draft); setInviteError(reason); setInviting(true); });
   };
 
   const columns: Column<Shown>[] = [
@@ -146,7 +151,7 @@ export function MembersView({ rows, now, actions }: { rows: Member[]; now: strin
       kicker={<>{app.name} · {app.workspace}</>}
       title="Members"
       description="Who is in the workspace, what they can do, and when they last used it."
-      actions={<Button variant="primary" icon={<UserPlus />} onClick={() => setInviting(true)}>Invite member</Button>}
+      actions={<Button variant="primary" icon={<UserPlus />} onClick={() => { setInviteError(null); setInviting(true); }}>Invite member</Button>}
     >
       <Stack>
         <DataTable
@@ -155,7 +160,7 @@ export function MembersView({ rows, now, actions }: { rows: Member[]; now: strin
           rows={shown}
           columns={columns}
           rowKey={(m) => m.id}
-          empty={{ title: 'No members yet', body: `Invite the people who work in ${app.name}.`, action: <Button variant="primary" size="sm" icon={<UserPlus />} onClick={() => setInviting(true)}>Invite member</Button> }}
+          empty={{ title: 'No members yet', body: `Invite the people who work in ${app.name}.`, action: <Button variant="primary" size="sm" icon={<UserPlus />} onClick={() => { setInviteError(null); setInviting(true); }}>Invite member</Button> }}
         />
       </Stack>
 
@@ -166,6 +171,7 @@ export function MembersView({ rows, now, actions }: { rows: Member[]; now: strin
           footer={<><SheetClose asChild><Button variant="ghost">Cancel</Button></SheetClose><Button variant="primary" busy={pending} onClick={send}>Send invitation</Button></>}
         >
           <div className="flex flex-col gap-6">
+            {inviteError ? <Banner tone="critical" title="Invitation not sent">{inviteError}</Banner> : null}
             <Field label="Name" error={errors.name} required>
               {(p) => <Input {...p} value={invite.name} onChange={(e) => { setInvite({ ...invite, name: e.target.value }); setErrors({ ...errors, name: undefined }); }} placeholder="Ana Costa" />}
             </Field>

package/payload/src/views/not-found-address.tsx

@@ -26,7 +26,7 @@ export function MissingAddress({ size = 'display' }: { size?: 'display' | 'quiet
   return (
     <div className="min-w-0">
       <p className={cn('font-mono break-all', size === 'display' ? 'text-xl leading-snug tracking-[-0.01em]' : 'text-sm leading-relaxed')}>
-        <Link href={found} aria-label={`${found}, ${n.label}`} className="row-link text-ink-2">{found}</Link>
+        <Link href={found} aria-label={`${found}, ${n.label}`} className="row-link text-ink-2 hover:text-accent-ink">{found}</Link>
         <span className="border-b-2 border-dashed border-critical pb-px text-ink">{missing}</span>
       </p>
       <p className={cn('text-pretty text-ink-2', size === 'display' ? 't-small mt-4' : 't-caption mt-2.5')}>

package/payload/src/views/overview.tsx

@@ -40,7 +40,7 @@ export function OverviewBody({
   if (series.length === 0) {
     return (
       <Card>
-        <EmptyState title="No requests yet" action={<Link href="/keys" className="row-link inline-flex items-center gap-1 font-medium text-ink">API keys <ArrowRight className="size-3.5" /></Link>} className="py-16">
+        <EmptyState title="No requests yet" action={<Link href="/keys" className="row-link inline-flex items-center gap-1 font-medium text-ink hover:text-accent-ink">API keys <ArrowRight className="size-3.5" /></Link>} className="py-16">
           Traffic, reliability and spend appear here once a key makes its first call.
         </EmptyState>
       </Card>
@@ -121,7 +121,7 @@ export function OverviewBody({
               />
             </CardBody>
             <CardFooter>
-              <Link href="/analytics" className="row-link inline-flex items-center gap-1 font-medium text-ink">
+              <Link href="/analytics" className="row-link inline-flex items-center gap-1 font-medium text-ink hover:text-accent-ink">
                 All endpoints <ArrowRight className="size-3.5" />
               </Link>
             </CardFooter>

package/payload/src/views/request.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import Link from 'next/link';
+import { useTransition } from 'react';
 import { useRouter } from 'next/navigation';
 import { ArrowRight, Copy, Link2, RotateCw, ShieldBan, Terminal } from 'lucide-react';
 import { PageFrame, Row, Stack } from '@/components/base/shell';
@@ -68,10 +69,18 @@ function Code({ body, label }: { body: string; label: string }) {
   );
 }
 
-export function RequestView({ request: r, trace, payloads, now }: { request: RequestRow; trace: Span[]; payloads: { request: string | null; response: string }; now: string }) {
+/** `replay` is the page's Server Action: it sends the request again and answers with the new request, or why not. */
+export function RequestView({ request: r, trace, payloads, now, replay }: { request: RequestRow; trace: Span[]; payloads: { request: string | null; response: string }; now: string; replay: (id: string) => Promise<{ ok: true; id: string; status: number } | { ok: false; error: string }> }) {
   const router = useRouter();
   const usage = usageOf(r);
   const failed = r.status >= 500 || r.status === 429;
+  const [replaying, startReplay] = useTransition();
+  const sendAgain = () => startReplay(async () => {
+    const result = await replay(r.id);
+    if (!result.ok) return toast({ tone: 'critical', title: 'Not replayed', description: result.error });
+    router.refresh();
+    toast({ tone: 'positive', title: `Replayed: ${result.status} ${STATUS_TEXT[result.status] ?? ''}`.trim(), description: `${r.method} ${r.route} ran again as ${result.id}.`, action: { label: 'Open', onClick: () => router.push(`/requests/${result.id}`) } });
+  });
   return (
     <PageFrame
       {...detailHead({
@@ -88,7 +97,7 @@ export function RequestView({ request: r, trace, payloads, now }: { request: Req
         primary: (
           <>
             <Button icon={<Terminal />} onClick={() => { void navigator.clipboard?.writeText(curlOf(r, payloads.request)); toast({ tone: 'positive', title: 'cURL command copied' }); }}>Copy as cURL</Button>
-            {failed ? <Button variant="primary" icon={<RotateCw />} onClick={() => toast({ tone: 'positive', title: 'Replay queued', description: `${r.method} ${r.route} will run again${payloads.request ? ' with the same body' : ''}.` })}>Replay</Button> : null}
+            {failed ? <Button variant="primary" icon={<RotateCw />} busy={replaying} onClick={sendAgain}>Replay</Button> : null}
           </>
         ),
         more: [
@@ -112,7 +121,7 @@ export function RequestView({ request: r, trace, payloads, now }: { request: Req
                   { label: 'Response size', value: formatBytes(r.bytes) },
                   { label: 'Customer', value: <Link href={`/requests?q=${encodeURIComponent(r.customer)}`} className="link">{r.customer}</Link> },
                   { label: 'Region', value: r.region, mono: true },
-                  { label: 'API key', value: 'Production backend' },
+                  ...(r.replayOf ? [{ label: 'Replay of', value: <Link href={`/requests/${r.replayOf}`} className="link font-mono text-xs">{r.replayOf}</Link> }] : []),
                   ...(r.model
                     ? [
                         { label: 'Model', value: r.model, mono: true },
@@ -124,7 +133,7 @@ export function RequestView({ request: r, trace, payloads, now }: { request: Req
               />
             </CardBody>
             <CardFooter>
-              <Link href={`/requests?q=${encodeURIComponent(r.customer)}`} className="row-link inline-flex items-center gap-1 font-medium text-ink">
+              <Link href={`/requests?q=${encodeURIComponent(r.customer)}`} className="row-link inline-flex items-center gap-1 font-medium text-ink hover:text-accent-ink">
                 More from {r.customer} <ArrowRight className="size-3.5" />
               </Link>
             </CardFooter>

package/payload/tests/collection.test.ts

@@ -62,6 +62,18 @@ describe('changes', () => {
     expect((await c.query({})).total).toBe(4);
   });
 
+  test('a created row carries the fields the collection derives from it', async () => {
+    const c = arrayCollection({
+      name: `derived${++n}`, label: 'People', description: 'd', key: 'id', title: (r: Person & { initial: string }) => r.name,
+      fields: z.object({ name: z.string(), team: z.enum(['Support', 'Sales']), seats: z.number(), lastActive: z.string().nullable() }),
+      derived: ['initial'], derive: (r) => ({ initial: String(r.name).slice(0, 1) }),
+      rows: [], allow: ['create'],
+    });
+    const row = await c.create!({ name: 'Jin Park', team: 'Sales', seats: 1, lastActive: null });
+    expect(row.initial).toBe('J');
+    expect((await c.query({ where: [{ field: 'initial', op: 'eq', value: 'J' }] })).total).toBe(1);
+  });
+
   test('update and remove are all-or-nothing', async () => {
     const c = people();
     await expect(c.update!(['p_1', 'nope'], { team: 'Sales' })).rejects.toThrow(/nope/);

package/payload/tests/data-table.test.tsx

@@ -1,5 +1,7 @@
 import { render, screen } from '@testing-library/react';
-import { describe, expect, it } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
+
+vi.mock('next/navigation', () => ({ useRouter: () => ({ push() {}, refresh() {}, replace() {} }), usePathname: () => '/' }));
 import { DataTable, type Column } from '@/components/patterns/data-table';
 
 type Row = { id: string; name: string; status: string; calls: number };
@@ -45,4 +47,10 @@ describe('DataTable', () => {
     expect(screen.getByText('643,000')).toBeInTheDocument();
     expect(screen.getByText('643000 requests')).toBeInTheDocument();
   });
+  it('makes the title of a row that opens a record its link; the row is the hover target and the title has no hover style of its own', () => {
+    render(<DataTable caption="Customers" noun="customers" rows={rows} columns={columns} rowKey={(r) => r.id} rowHref={(r) => `/customers/${r.id}`} />);
+    const link = screen.getAllByRole('link', { name: 'Northwind Labs' })[0];
+    expect(link.getAttribute('href')).toBe('/customers/a');
+    expect(link.className).not.toMatch(/row-link|link|underline/);
+  });
 });

package/payload/tests/keys-actions.test.ts

@@ -3,9 +3,11 @@ import { describe, expect, it, vi } from 'vitest';
 
 vi.mock('next/cache', () => ({ cacheTag: () => {}, cacheLife: () => {}, updateTag: () => {}, revalidateTag: () => {} }));
 
+import { createHash } from 'node:crypto';
 import { createKey } from '../app/(dashboard)/keys/actions';
+import { collectionFor, resolveAccess } from '@/data/access';
 
-const draft = { name: 'Billing worker', env: 'live' as const, scopes: ['messages'] };
+const draft = { name: 'Billing worker', env: 'live' as const, scopes: ['messages' as const] };
 
 describe('createKey validates its scopes on the server', () => {
   it('creates a key with declared scopes', async () => {
@@ -18,3 +20,15 @@ describe('createKey validates its scopes on the server', () => {
     await expect(createKey({ ...draft, scopes: ['messages', 'admin'] as never })).rejects.toThrow(/scope/i);
   });
 });
+
+describe('createKey shows the full secret once', () => {
+  it('returns it to the caller and stores only its hint and its hash', async () => {
+    const created = await createKey(draft);
+    expect(created.secret).toMatch(/^zzm_live_[0-9a-f]{32}$/);
+    const { rows } = await collectionFor(await resolveAccess(), 'keys').query({ where: [{ field: 'id', op: 'eq', value: created.id }] });
+    const stored = rows[0] as Record<string, unknown>;
+    expect(JSON.stringify(stored)).not.toContain(created.secret);
+    expect(stored.hint).toBe(`zzm_live_…${created.secret.slice(-4)}`);
+    expect(stored.secretHash).toBe(createHash('sha256').update(created.secret).digest('hex'));
+  });
+});

package/payload/tests/keys-scopes-view.test.tsx

@@ -9,7 +9,7 @@ import { API_KEYS } from '@/system/fixtures/sample-records';
 
 describe('the Create key sheet', () => {
   it('will not create a key with no scope ticked', async () => {
-    render(<KeysView rows={API_KEYS} now="2026-10-05T09:00:00.000Z" createKey={async () => API_KEYS[0]} revokeKey={async () => {}} />);
+    render(<KeysView rows={API_KEYS} now="2026-10-05T09:00:00.000Z" createKey={async () => ({ ...API_KEYS[0], secret: 'zzm_live_' + '0'.repeat(32) })} revokeKey={async () => {}} />);
     fireEvent.click(screen.getAllByRole('button', { name: 'Create key' })[0]);
     fireEvent.click(await screen.findByRole('checkbox', { name: 'Messages' }));
     const create = screen.getAllByRole('button', { name: 'Create key' }).at(-1) as HTMLButtonElement;

package/payload/tests/keys-secret-view.test.tsx

@@ -0,0 +1,34 @@
+import { act, fireEvent, render, screen, within } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+vi.mock('next/navigation', () => ({ usePathname: () => '/keys', useRouter: () => ({ refresh() {}, push() {}, replace() {} }) }));
+const toasts = vi.hoisted(() => [] as { tone: string; title: string }[]);
+vi.mock('@/components/ui/toast', () => ({ toast: (t: { tone: string; title: string }) => { toasts.push(t); } }));
+vi.stubGlobal('IntersectionObserver', class { observe() {} unobserve() {} disconnect() {} });
+
+import { KeysView } from '@/views/keys';
+import { API_KEYS } from '@/system/fixtures/sample-records';
+
+describe('the key list', () => {
+  it('shows each key by its hint and never carries or reveals a full secret', () => {
+    const { container } = render(<KeysView rows={API_KEYS} now="2026-10-05T09:00:00.000Z" createKey={async () => { throw new Error('unused'); }} revokeKey={async () => {}} />);
+    expect(screen.getAllByText('zzm_live_…f601').length).toBeGreaterThan(0);
+    expect(container.innerHTML).not.toMatch(/zzm_(live|test)_[0-9a-f]{32}/);
+    expect(screen.queryByRole('button', { name: /^Reveal/ })).toBeNull();
+    expect(screen.queryByRole('button', { name: /^Copy .* key$/ })).toBeNull();
+  });
+});
+
+describe('creating a key', () => {
+  it('says why it failed inside the open sheet, not in a toast over it', async () => {
+    render(<KeysView rows={API_KEYS} now="2026-10-05T09:00:00.000Z" createKey={async () => { throw new Error('You do not have permission to create keys.'); }} revokeKey={async () => {}} />);
+    fireEvent.click(screen.getAllByRole('button', { name: 'Create key' })[0]);
+    fireEvent.change(await screen.findByLabelText(/^Name/), { target: { value: 'Billing worker' } });
+    const before = toasts.length;
+    await act(async () => { fireEvent.click(within(screen.getByRole('dialog')).getByRole('button', { name: 'Create key' })); });
+    const alert = within(await screen.findByRole('dialog')).getByRole('alert');
+    expect(alert.textContent).toContain('Key not created');
+    expect(alert.textContent).toContain('You do not have permission to create keys.');
+    expect(toasts.length).toBe(before);
+  });
+});

package/payload/tests/members-optimistic.test.tsx

@@ -23,14 +23,19 @@ async function invite(name: string) {
 }
 
 describe('members, optimistically', () => {
-  it('shows an invitation at once and rolls it back with the reason when it fails', async () => {
+  it('shows an invitation at once, and on a refusal rolls it back and says why inside the reopened sheet, not in a toast', async () => {
     const d = deferred();
     render(<MembersView rows={MEMBERS} now="2026-10-05T09:00:00.000Z" actions={{ invite: () => d.promise, setStatus: async () => ({ ok: true }), remove: async () => ({ ok: true }) }} />);
     await invite('Ana Ruiz');
     expect(await screen.findByText('Ana Ruiz')).toBeTruthy();
+    const before = toasts.length;
     await act(async () => { d.resolve({ ok: false, error: 'There is no seat left on this plan.' }); });
     await waitFor(() => expect(screen.queryByText('Ana Ruiz')).toBeNull());
-    expect(toasts.at(-1)).toMatchObject({ tone: 'critical', title: 'Change not made', description: 'There is no seat left on this plan.' });
+    const alert = within(await screen.findByRole('dialog')).getByRole('alert');
+    expect(alert.textContent).toContain('Invitation not sent');
+    expect(alert.textContent).toContain('There is no seat left on this plan.');
+    expect((screen.getByLabelText(/^Name/) as HTMLInputElement).value).toBe('Ana Ruiz');
+    expect(toasts.length).toBe(before);
   });
   it('rolls back and says so when the action itself fails, as a dropped connection does', async () => {
     let fail!: (e: Error) => void;
@@ -40,7 +45,7 @@ describe('members, optimistically', () => {
     expect(await screen.findByText('Rae Okafor')).toBeTruthy();
     await act(async () => { fail(new Error('Failed to fetch')); });
     await waitFor(() => expect(screen.queryByText('Rae Okafor')).toBeNull());
-    expect(toasts.at(-1)).toMatchObject({ tone: 'critical', title: 'Change not made', description: 'The change did not reach the server. Try again.' });
+    expect(within(await screen.findByRole('dialog')).getByRole('alert').textContent).toContain('The change did not reach the server. Try again.');
     expect((screen.getByLabelText(/^Name/) as HTMLInputElement).value).toBe('Rae Okafor');
   });
   it('keeps a successful invitation once the authoritative rows include it', async () => {
@@ -111,7 +116,7 @@ describe('keys, optimistically', () => {
     let fail!: (e: Error) => void;
     const revokeKey = () => new Promise<void>((_, reject) => { fail = reject; });
     const key = API_KEYS[0];
-    render(<KeysView rows={API_KEYS} now="2026-10-05T09:00:00.000Z" createKey={async () => key} revokeKey={revokeKey} />);
+    render(<KeysView rows={API_KEYS} now="2026-10-05T09:00:00.000Z" createKey={async () => ({ ...key, secret: 'zzm_live_' + '0'.repeat(32) })} revokeKey={revokeKey} />);
     fireEvent.click(screen.getByRole('button', { name: `Revoke ${key.name}` }));
     fireEvent.click(await screen.findByRole('button', { name: 'Revoke key' }));
     await waitFor(() => expect(screen.queryByRole('button', { name: `Revoke ${key.name}` })).toBeNull());

package/payload/tests/request-replay.test.ts

@@ -0,0 +1,35 @@
+// @vitest-environment node
+import { describe, expect, it, vi } from 'vitest';
+
+const invalidated = vi.hoisted(() => [] as string[]);
+vi.mock('next/cache', () => ({ cacheTag: () => {}, cacheLife: () => {}, updateTag: (t: string) => { invalidated.push(t); }, revalidateTag: () => {} }));
+
+import { replayRequest } from '../app/(dashboard)/requests/[id]/actions';
+import { collectionFor, resolveAccess } from '@/data/access';
+import { REQUESTS } from '@/system/fixtures/sample';
+
+const failed = REQUESTS.find((r) => r.status >= 500)!;
+
+describe('replaying a request', () => {
+  it('sends the same request again: a new record, newest, that names the one it replays, and the list is refreshed', async () => {
+    const r = await replayRequest(failed.id);
+    expect(r.ok).toBe(true);
+    if (!r.ok) return;
+    expect(r.id).not.toBe(failed.id);
+    const c = collectionFor(await resolveAccess(), 'requests');
+    const { rows } = await c.query({ where: [{ field: 'id', op: 'eq', value: r.id }] });
+    const replay = rows[0] as Record<string, unknown>;
+    expect(replay).toMatchObject({ method: failed.method, route: failed.route, customer: failed.customer, region: failed.region, replayOf: failed.id, status: r.status });
+    expect(replay.statusClass).toBe('2xx');
+    expect(String(replay.search)).toContain(failed.route.toLowerCase());
+    const newest = await c.query({ sort: { field: 'at', dir: 'desc' }, limit: 1 });
+    expect(newest.rows[0].id).toBe(r.id);
+    expect(invalidated.length).toBeGreaterThan(0);
+  });
+  it('answers a request that does not exist with a reason, and writes nothing', async () => {
+    const c = collectionFor(await resolveAccess(), 'requests');
+    const before = (await c.query({})).total;
+    expect(await replayRequest('req_nope')).toEqual({ ok: false, error: 'No request with id req_nope.' });
+    expect((await c.query({})).total).toBe(before);
+  });
+});

package/payload/tests/request-view-replay.test.tsx

@@ -0,0 +1,36 @@
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+const push = vi.hoisted(() => vi.fn());
+vi.mock('next/navigation', () => ({ usePathname: () => '/requests/x', useRouter: () => ({ refresh() {}, push, replace() {} }) }));
+const toasts = vi.hoisted(() => [] as { tone: string; title: string; description?: string; action?: { label: string; onClick: () => void } }[]);
+vi.mock('@/components/ui/toast', () => ({ toast: (t: (typeof toasts)[number]) => { toasts.push(t); } }));
+
+import { RequestView } from '@/views/request';
+import { REQUESTS } from '@/system/fixtures/sample';
+import { payloadsOf, traceOf } from '@/data/sample';
+
+const failed = REQUESTS.find((r) => r.status >= 500)!;
+const view = (replay: (id: string) => Promise<{ ok: true; id: string; status: number } | { ok: false; error: string }>) =>
+  render(<RequestView request={failed} trace={traceOf(failed)} payloads={payloadsOf(failed)} now="2026-10-05T09:00:00.000Z" replay={replay} />);
+
+describe('Replay on a failed request', () => {
+  it('sends it again and offers the new request', async () => {
+    const replay = vi.fn(async () => ({ ok: true as const, id: 'requests_999', status: 200 }));
+    view(replay);
+    await act(async () => { fireEvent.click(screen.getByRole('button', { name: 'Replay' })); });
+    expect(replay).toHaveBeenCalledWith(failed.id);
+    expect(toasts.at(-1)).toMatchObject({ tone: 'positive', title: 'Replayed: 200 OK' });
+    toasts.at(-1)!.action!.onClick();
+    expect(push).toHaveBeenCalledWith('/requests/requests_999');
+  });
+  it('says why when the replay is refused', async () => {
+    view(async () => ({ ok: false, error: 'You do not have permission to replay requests.' }));
+    await act(async () => { fireEvent.click(screen.getByRole('button', { name: 'Replay' })); });
+    expect(toasts.at(-1)).toMatchObject({ tone: 'critical', title: 'Not replayed', description: 'You do not have permission to replay requests.' });
+  });
+  it('states no API key it does not know', () => {
+    view(async () => ({ ok: false, error: 'unused' }));
+    expect(screen.queryByText('Production backend')).toBeNull();
+  });
+});