Polish the live-smoke ledger: grid slots, dark focus ring, system monitor states (#128)

* Keep declared grid column slots when children run short

- gridColumnCount no longer clamps the declared column count to the child count, so a filtered grid's children keep their column-slot width instead of stretching across the freed row
- pin the rule in the widget layout tests and in both soundboard e2e batteries (Zig example + TS port), which search the album grid down to one match and hold the tile at its natural width

* Desaturate the accent focus ring in dark appearance

- canvas.accentOverrides now takes the resolved scheme and derives the dark focus ring at half the accent's HSL saturation (canvas.accentFocusRing), matching the built-in packs' per-scheme ring moves
- the Zig soundboard theme states the same derivation so both authoring tiers land the identical ring; pins in the token tests and both soundboard suites

* Polish the system monitor footer and empty state in both tiers

- label the footer sample time UTC: local rendering would need a journaled tz channel to keep replay byte-identical, so the honest label wins for this sweep
- clear the transient 'terminate request delivered' notice on the next applied sample (failure notes still stick); pinned in both e2e batteries
- hint the top-128-by-CPU search scope in the no-match empty state, derived from the sampler cap

* Note the per-scheme accent ring in the soundboard-ts README

- the theme_accent bullet now names the dark scheme's desaturated focus-ring derivation

* Floor the dark accent ring at 3:1 and harden grid row math

- accentFocusRing's dark step now lifts the desaturated ring's HSL lightness until it holds 3:1 (WCAG non-text) against the default dark background whenever the accent itself cleared that bar, and never below the accent's own contrast when it did not — halving saturation alone dropped #008000 from 3.9:1 to ~2.6:1; a hue-sweep test pins the floor, and the changelog fragment now states the accentOverrides ColorScheme parameter as a deliberate pre-1.0 break with the .light migration line.
- gridRowCount ceil-divides as 1 + (count - 1) / columns so an unclamped huge declared column count no longer overflows the additive form in safe builds; both the layout and intrinsic-size paths already share the helper, and a unit test covers maxInt columns and zero children.

* Floor the accent ring on the lightest adjacent dark tone and finish the grid row sweep

- accentFocusRing's dark floor now measures against the lightest tone controls commonly sit on (house surface_subtle #262626) instead of the background, so rings drawn on cards and muted chrome clear 3:1 too — green's ring rises from ~2.72:1 to 3.49:1 on the dark surface, and the never-invent escape hatch caps at the accent's own contrast against that same reference
- Route intrinsicGridChildrenSize's row count through gridRowCount: the additive ceil-div still panicked when a parent intrinsically measured a nonempty grid with maxInt columns (the earlier fix only covered the placement path)
- Extend the hue sweep to assert 3:1 per adjacent tone across both packs and add the nested-grid intrinsic regression (verified to panic before the fix)

* Gate the transient-note clear on a sample launched after the kill

- A ps sample already in flight when the kill confirmed collected its rows before the signal, so its ps_done must not retire the delivered notice; both cores now bump a sample generation at launch and clear only when an applied sample's generation exceeds the kill_done stamp (pure Msg-driven state, replay-deterministic)
- Pin the race in both batteries: the stale in-flight sample applies with the notice surviving into the rendered footer (kill exit and stale ps exit drained in one batch), and the first sample launched after the kill retires it
- Rework the live kill-note pins to drive real launches through the cadence so delivered-clears and failure-persists keep their semantics under the generation gate

Author: ctate

changelog.d/dark-accent-focus-ring.md

@@ -0,0 +1,2 @@
+fix: **Dark-scheme accent focus rings settle down — and stay visible**: a `theme_accent` (or `canvas.accentOverrides`) now derives its dark-appearance focus ring at half the accent's saturation instead of the raw brand hue, contrast-floored at 3:1 (WCAG non-text) against the lightest dark tone controls commonly sit on (the house muted surface `#262626` — rings draw outside controls, so clearing the lightest adjacent container tone clears the page background and card surface too, in both shipped packs) — desaturation alone can cost a deep accent the bar it cleared (`#008000` fell from 3.9:1 to ~2.6:1 on the background; the floor lifts it back over 3:1 on background and card surface alike) — so the soundboard search field's ring no longer glares neon in dark mode; `canvas.accentFocusRing` exports the derivation so hand-authored token sets (the Zig soundboard's theme) state the identical ring.
+- **Breaking**: `canvas.accentOverrides` now takes the resolved `ColorScheme` alongside the accent — a deliberate break while the toolkit is pre-1.0, so the one function under the natural name states the scheme it layers over; pass `.light` to reproduce the previous output exactly.

changelog.d/grid-declared-column-slots.md

@@ -0,0 +1 @@
+fix: **Grids keep their declared column slots**: children fewer than a grid's declared `columns` now keep the column-slot width and fill the leading slots, instead of stretching across the freed row — a search that narrows the soundboard album grid below its column count leaves image-forward tiles at their natural size.

changelog.d/system-monitor-empty-state-scope.md

@@ -0,0 +1 @@
+improvement: **Search empty state names its scope**: the system monitor's no-match state now says search only sees the top 128 processes by CPU, so a miss on a quiet process reads as scope, not absence (both tiers).

changelog.d/system-monitor-transient-kill-note.md

@@ -0,0 +1 @@
+fix: **"terminate request delivered" retires itself**: the system monitor's delivery notice now clears on the next applied sample instead of sitting in the footer forever; failure notes keep sticking (both tiers).

changelog.d/system-monitor-utc-footer.md

@@ -0,0 +1 @@
+fix: **System monitor footer says UTC**: the sample-time stamp renders from the journaled clock in UTC, and the footer now labels it "UTC" instead of passing it off as local time — local rendering would need a journaled timezone channel to stay replay-byte-identical, so the label is the honest fix (both the Zig example and the TS port).

examples/soundboard-ts/README.md

@@ -29,7 +29,7 @@ The generated wiring detects each channel from an export in `core.ts` (export ex
 - **`envMsgs`** — `NATIVE_SDK_MUSIC_URL_BASE` arrives as one journaled Msg at install: a non-empty base replaces the stream host wholesale, an empty base means local-only (a failed play then shows the "assets not prepared" notice, the Zig original's launch split). The core itself never reads the environment; replay carries the recorded value.
 - **`app.zon .assets.images`** — the committed covers register on the installing frame with id = album id, the `ImageId` the markup avatar bindings reference. The art is JPEG: live hosts decode it through the platform codec; the null test platform's strict PNG-subset decoder refuses it honestly and every cover degrades to initials (which the suite pins).
 - **`chromeMsg`** — window-chrome geometry (the tall hidden-inset titlebar app.zon declares) lands before the first view build: the markup header IS the titlebar — the drag surface, a leading spacer sized to the traffic lights, height matched to the band so its controls share the lights' centerline (the Zig original's treatment).
-- **`app.zon .theme` + `.theme_accent`** — the geist pack under the Zig original's pink accent identity (`#df2670`, theme.zig's pink_800): the wiring layers `canvas.accentOverrides` over the pack — accent + white knockout ink, the focus ring, the seek slider's filled range — and high-contrast requests skip it (accessibility beats brand), the original's tokens_fn rule through the manifest.
+- **`app.zon .theme` + `.theme_accent`** — the geist pack under the Zig original's pink accent identity (`#df2670`, theme.zig's pink_800): the wiring layers `canvas.accentOverrides` over the pack — accent + white knockout ink, the focus ring (raw pink in light, `canvas.accentFocusRing`'s desaturated, contrast-floored step in dark so the ring never glares neon on the dark palette yet keeps the 3:1 non-text bar), the seek slider's filled range — and high-contrast requests skip it (accessibility beats brand), the original's tokens_fn rule through the manifest.
 
 ## Where this port still deliberately differs from the Zig soundboard
 

examples/soundboard/src/tests.zig

@@ -1057,16 +1057,23 @@ test "the system appearance drives the custom tokens live" {
     // palettes, so these assertions follow the one source of truth).
     try testing.expectEqualDeep(theme.light_colors, main.tokensFromModel(&app_state.model).colors);
 
-    // The accent override actually landed: the filled-primary pair, the
-    // focus ring, and the slider's filled range all carry the same pink
-    // step in BOTH schemes — the scrubber is the one slot the pack
-    // states its own hue for, so it is pinned separately from `accent`.
+    // The accent override actually landed: the filled-primary pair and
+    // the slider's filled range carry the same pink step in BOTH
+    // schemes — the scrubber is the one slot the pack states its own
+    // hue for, so it is pinned separately from `accent`.
     const pink = canvas.Color.rgb8(223, 38, 112);
     for ([_]canvas.ColorTokens{ theme.light_colors, theme.dark_colors }) |colors| {
         try testing.expectEqualDeep(pink, colors.accent);
         try testing.expectEqualDeep(canvas.Color.rgb8(255, 255, 255), colors.accent_text);
-        try testing.expectEqualDeep(pink, colors.focus_ring);
     }
+    // The focus ring is stated per scheme: raw pink in light, the
+    // desaturated dark step in dark (canvas.accentFocusRing — the same
+    // derivation the manifest theme_accent channel applies, so the TS
+    // port's ring matches). Full-chroma pink would glare neon on the
+    // dark palette.
+    try testing.expectEqualDeep(pink, theme.light_colors.focus_ring);
+    try testing.expectEqualDeep(canvas.accentFocusRing(pink, .dark), theme.dark_colors.focus_ring);
+    try testing.expect(!std.meta.eql(pink, theme.dark_colors.focus_ring));
     for ([_]native_sdk.ColorScheme{ .light, .dark }) |scheme| {
         try testing.expectEqualDeep(pink, theme.tokens(scheme, false, false).controls.slider.active_background.?);
     }
@@ -1948,6 +1955,39 @@ fn expectChunking(rows: usize, counts: []const usize, first_x: []const f32, colu
     }
 }
 
+test "a search narrowed below the column count keeps natural tile size" {
+    const live = try LiveApp.start(true);
+    defer live.stop();
+
+    // Establish the four-column desktop fit, then search down to ONE
+    // matching album (the last album's title matches "channel" and
+    // nothing else does — see the typed-dispatch search test).
+    try resizeTo(live, main.window_width, main.window_height, 2);
+    const fit = view_mod.gridFit(main.window_width);
+    try testing.expect(fit.columns > 1);
+    try live.dispatch(.{ .search_edit = .{ .insert_text = "channel" } });
+
+    // The lone tile keeps the fit's natural tile width — image-forward
+    // covers never balloon across the freed row — and stays pinned to
+    // the leading content edge, leaving the trailing space empty.
+    var layout = try live.harness.runtime.canvasWidgetLayout(1, main.canvas_label);
+    var tiles: usize = 0;
+    for (layout.nodes) |node| {
+        if (node.widget.kind != .list_item or node.widget.semantics.role != .listitem) continue;
+        tiles += 1;
+        try testing.expectApproxEqAbs(fit.tile_width, node.frame.width, 0.5);
+    }
+    try testing.expectEqual(@as(usize, 1), tiles);
+
+    // Clearing the search restores the full four-wide chunking.
+    try live.dispatch(.{ .search_edit = .clear });
+    var counts: [8]usize = undefined;
+    var first_x: [8]f32 = undefined;
+    layout = try live.harness.runtime.canvasWidgetLayout(1, main.canvas_label);
+    const rows = gridRowCounts(layout, &counts, &first_x);
+    try expectChunking(rows, counts[0..rows], first_x[0..rows], fit.columns);
+}
+
 test "chrome geometry pads the header and matches its height to the tall band" {
     var fx = model_mod.Effects.init(testing.allocator);
     defer fx.deinit();

examples/soundboard/src/theme.zig

@@ -34,21 +34,28 @@ const pink_ink = Color.rgb8(255, 255, 255);
 /// - `colors.focus_ring`: the pack spends its identity hue on focus;
 ///   with the identity moved to pink, the ring follows so focus and
 ///   accent chrome read as one system (pink on the page clears the 3:1
-///   non-text bar in both schemes).
+///   non-text bar in both schemes). The ring is stated PER SCHEME: the
+///   accent itself in light, `canvas.accentFocusRing`'s desaturated,
+///   contrast-floored step in dark — full-chroma pink glares neon
+///   against the dark palette, and the derivation is the same one the
+///   manifest `theme_accent` channel applies, so both authoring tiers
+///   land the identical ring.
 /// - `controls.slider.active_background`: the pack's slider table states
 ///   its own hue for the filled range rather than deriving from the
 ///   accent channel, so the seek scrubber needs the same move stated
 ///   once more or it would keep the pack's stock hue.
-const accent_overrides = canvas.DesignTokenOverrides{
-    .colors = .{
-        .accent = pink_800,
-        .accent_text = pink_ink,
-        .focus_ring = pink_800,
-    },
-    .controls = .{
-        .slider = .{ .active_background = pink_800 },
-    },
-};
+fn accentOverridesFor(color_scheme: canvas.ColorScheme) canvas.DesignTokenOverrides {
+    return .{
+        .colors = .{
+            .accent = pink_800,
+            .accent_text = pink_ink,
+            .focus_ring = canvas.accentFocusRing(pink_800, color_scheme),
+        },
+        .controls = .{
+            .slider = .{ .active_background = pink_800 },
+        },
+    };
+}
 
 pub fn tokens(scheme: native_sdk.ColorScheme, high_contrast: bool, reduce_motion: bool) canvas.DesignTokens {
     const options = canvas.ThemeOptions{
@@ -64,7 +71,7 @@ pub fn tokens(scheme: native_sdk.ColorScheme, high_contrast: bool, reduce_motion
     // layer: white on the pink fill sits at ~4.5:1, well under the
     // loud-contrast bar, so the accent honestly bows out.
     if (high_contrast) return canvas.DesignTokens.theme(options);
-    return canvas.DesignTokens.themeWithOverrides(options, accent_overrides);
+    return canvas.DesignTokens.themeWithOverrides(options, accentOverridesFor(options.color_scheme));
 }
 
 /// The resolved standard-contrast palettes, exported for the suite's

examples/system-monitor-ts/src/app.native

@@ -94,7 +94,10 @@
           <panel padding="24" background="surface" radius="lg" border-color="border" label="No processes match">
             <column gap="6">
               <text>{emptyTitle}</text>
-              <text size="sm" foreground="text_muted">Filter matches command names and pids.</text>
+              <!-- The honest scope hint once samples exist: search only
+                   sees the top-128-by-CPU selection the sampler keeps
+                   (core.ts emptyHint). -->
+              <text size="sm" foreground="text_muted">{emptyHint}</text>
             </column>
           </panel>
         </if>

examples/system-monitor-ts/src/core.ts

@@ -50,6 +50,7 @@ import {
   formatClock,
   intDiv,
   intDivRound,
+  MAX_ROWS,
   pad2,
   parseHostInfo,
   parseMeminfo,
@@ -193,6 +194,24 @@ export interface Model {
   readonly tableScroll: number;
 
   readonly note: Bytes;
+  /// A note that clears itself on the next applied ps sample LAUNCHED
+  /// after it was set (`noteStampGeneration`): the kill path's
+  /// "terminate request delivered" is a moment, not a state — the
+  /// following tick (whose rows are the delivery's visible consequence)
+  /// retires it instead of letting it sit forever.
+  readonly noteClearsOnSample: boolean;
+  /// Generation counter for ps sample LAUNCHES (not applies), bumped in
+  /// `sampling` when the spawns actually issue. Launches never overlap
+  /// (`psInflight` gates them), so the value is stable from a sample's
+  /// launch to its applied ps_done — at apply time it IS the applying
+  /// sample's launch generation. Pure Msg-driven state, no clock
+  /// anywhere near it, so replay walks the same values.
+  readonly sampleGeneration: number;
+  /// The generation current when the transient note was set: the note
+  /// retires only with a sample launched AFTER this stamp. A sample
+  /// already in flight at kill time collected its rows BEFORE the kill,
+  /// so its pre-termination rows must never retire the notice.
+  readonly noteStampGeneration: number;
 
   /// Chrome overlay geometry (tall hidden-inset titlebar) from the
   /// chromeMsg channel: the header leads with a spacer this wide so its
@@ -295,6 +314,9 @@ export const viewUnbound = [
   "sortDescending",
   "pendingKill",
   "note",
+  "noteClearsOnSample",
+  "sampleGeneration",
+  "noteStampGeneration",
 ] as const;
 
 export function initialModel(): [Model, Cmd<Msg>] {
@@ -325,6 +347,9 @@ export function initialModel(): [Model, Cmd<Msg>] {
       pendingKill: null,
       tableScroll: 0,
       note: new Uint8Array(0),
+      noteClearsOnSample: false,
+      sampleGeneration: 0,
+      noteStampGeneration: 0,
       chromeLeading: 0,
       headerHeight: HEADER_NATURAL_HEIGHT,
     },
@@ -472,6 +497,17 @@ export function emptyTitle(model: Model): Bytes {
   return concat3(asciiBytes('No matches for "'), model.search.bytes, asciiBytes('"'));
 }
 
+/// The empty state's second line: the honest scope hint once samples
+/// exist — search only sees the top-MAX_ROWS-by-CPU selection the
+/// sampler keeps, so a miss may simply be a quiet process outside it.
+export function emptyHint(model: Model): Bytes {
+  if (model.samplesTaken === 0) return asciiBytes("Filter matches command names and pids.");
+  return emDashJoin(
+    asciiBytes(`Search sees the top ${MAX_ROWS} processes by CPU`),
+    asciiBytes("filter matches command names and pids."),
+  );
+}
+
 // --------------------------------------------------- derived: status bar
 
 /// The status-bar line: sample facts, then any activity note.
@@ -488,7 +524,7 @@ export function statusLine(model: Model): Bytes {
   } else {
     line = dotJoin(
       asciiBytes(`${model.processCount} processes`),
-      concat2(asciiBytes("sampled at "), formatClock(model.sampledAtDayMs)),
+      concat3(asciiBytes("sampled at "), formatClock(model.sampledAtDayMs), asciiBytes(" UTC")),
     );
     if (model.paused) line = dotJoin(line, asciiBytes("paused"));
     if (model.ticksSkipped > 0) line = dotJoin(line, asciiBytes(`${model.ticksSkipped} ticks skipped`));
@@ -533,8 +569,16 @@ function appliedPsSample(model: Model, sample: PsSample): Model {
     model.procHistory.length >= HISTORY_LEN
       ? [...model.procHistory.slice(1), sample.processCountFloat]
       : [...model.procHistory, sample.processCountFloat];
+  // A transient note ("terminate request delivered") retires with the
+  // first sample LAUNCHED after it — those rows show the delivery's
+  // outcome. A sample already in flight when the note was stamped
+  // collected its rows before the kill, so it applies without retiring
+  // the notice (the generation gate).
+  const retiresNote = model.noteClearsOnSample && model.sampleGeneration > model.noteStampGeneration;
   return {
     ...model,
+    note: retiresNote ? new Uint8Array(0) : model.note,
+    noteClearsOnSample: model.noteClearsOnSample && !retiresNote,
     psInflight: false,
     processCount: sample.processCount,
     uptimeSeconds: sample.uptimeSeconds,
@@ -567,11 +611,29 @@ function appliedMemSample(model: Model, sample: MemSample): Model {
 /// spawn commands themselves are built inline at each return site —
 /// commands live in update's return path only (NS1017).
 function sampling(model: Model): Model {
-  return { ...model, psInflight: true, memInflight: true };
+  return {
+    ...model,
+    psInflight: true,
+    memInflight: true,
+    sampleGeneration: model.sampleGeneration + 1,
+  };
 }
 
 function withNote(model: Model, note: Bytes): Model {
-  return { ...model, note: note };
+  return { ...model, note: note, noteClearsOnSample: false };
+}
+
+/// A `withNote` that retires itself on the next applied ps sample
+/// launched after this moment (see `Model.noteClearsOnSample`). The
+/// generation stamp keeps a sample already in flight — whose rows
+/// predate whatever this note reports — from retiring it early.
+function withTransientNote(model: Model, note: Bytes): Model {
+  return {
+    ...model,
+    note: note,
+    noteClearsOnSample: true,
+    noteStampGeneration: model.sampleGeneration,
+  };
 }
 
 export function update(model: Model, msg: Msg): Model | [Model, Cmd<Msg>] {
@@ -788,7 +850,11 @@ export function update(model: Model, msg: Msg): Model | [Model, Cmd<Msg>] {
       ];
     }
     case "kill_done": {
-      if (msg.code === 0) return withNote(model, asciiBytes("terminate request delivered"));
+      // Transient: the next LAUNCHED sample's rows ARE the outcome, so
+      // the delivery notice retires with them instead of sitting in the
+      // footer forever (a sample already in flight predates the kill
+      // and cannot).
+      if (msg.code === 0) return withTransientNote(model, asciiBytes("terminate request delivered"));
       return withNote(
         model,
         emDashJoin(asciiBytes(`kill failed (code ${msg.code}`), asciiBytes("not your process?)")),