diff --git a/.gitignore b/.gitignore
index 85a837aa1..619844655 100644
--- a/.gitignore
+++ b/.gitignore
@@ -47,5 +47,6 @@ packages/core/node_modules/
 # The CLI-materialized editor copy of @native-sdk/core inside the TS example
 # apps (node_modules is editor surface, never source — the same entry the
 # TS scaffold writes into a new app's .gitignore)
-examples/soundboard-ts/node_modules/
-examples/system-monitor-ts/node_modules/
+examples/soundboard/node_modules/
+examples/system-monitor/node_modules/
+examples/habits/node_modules/
diff --git a/README.md b/README.md
index 938bf6813..2133f8f47 100644
--- a/README.md
+++ b/README.md
@@ -53,8 +53,8 @@ App cores use a checked TypeScript subset and compile to native code. To write a
 The Soundboard example rendered by the Native SDK engine. More apps are in [examples/](./examples):
 
 - [Chatbot](./examples/chatbot): streaming responses, text editing, and TypeScript effects.
-- [Soundboard](./examples/soundboard-ts): audio playback, search, assets, and context menus.
-- [System monitor](./examples/system-monitor-ts): subprocess effects, tables, charts, and timers.
+- [Soundboard](./examples/soundboard): audio playback, search, assets, and context menus.
+- [System monitor](./examples/system-monitor): subprocess effects, tables, charts, and timers.
 - [Calculator](./examples/calculator): markup, keyboard input, and theming.
 
 See the [example catalog](./examples/README.md) for additional apps and their authoring languages.
diff --git a/build.zig b/build.zig
index 220615034..870192d5e 100644
--- a/build.zig
+++ b/build.zig
@@ -1219,6 +1219,26 @@ pub fn build(b: *std.Build) void {
         native_driver_step.dependOn(&text_policy_driver_run.step);
         ts_core_e2e_step.dependOn(&text_policy_driver_run.step);
         test_step.dependOn(&text_policy_driver_run.step);
+        const habits_reference_run = managedExampleRun(b, host_cli_exe, &.{ "test", "-Dplatform=null" });
+        habits_reference_run.setCwd(b.path("examples/habits"));
+        habits_reference_run.has_side_effects = true;
+        habits_reference_run.setEnvironmentVariable("NATIVE_SDK_TEST_VIEW_BACKEND", "zig");
+        habits_reference_run.setEnvironmentVariable("NATIVE_SDK_TEST_VIEW_REFERENCE", b.pathFromRoot(".zig-cache/habits-view-reference"));
+        _ = habits_reference_run.captureStdOut(.{});
+        _ = habits_reference_run.captureStdErr(.{});
+        const habits_driver_run = managedExampleRun(b, host_cli_exe, &.{ "test", "-Dplatform=null", "-Dtypescript-view=true" });
+        habits_driver_run.setCwd(b.path("examples/habits"));
+        habits_driver_run.has_side_effects = true;
+        habits_driver_run.setEnvironmentVariable("NATIVE_SDK_TEST_VIEW_BACKEND", "typescript");
+        habits_driver_run.setEnvironmentVariable("NATIVE_SDK_TEST_VIEW_REFERENCE", b.pathFromRoot(".zig-cache/habits-view-reference"));
+        _ = habits_driver_run.captureStdOut(.{});
+        _ = habits_driver_run.captureStdErr(.{});
+        habits_driver_run.step.dependOn(&habits_reference_run.step);
+        native_driver_step.dependOn(&habits_driver_run.step);
+        ts_core_e2e_step.dependOn(&habits_driver_run.step);
+        test_step.dependOn(&habits_driver_run.step);
+        b.step("test-habits", "Compare complete Habits snapshots and replay across view backends").dependOn(&habits_driver_run.step);
+
         const code_workbench_reference_run = managedExampleRun(b, host_cli_exe, &.{ "test", "-Dplatform=null" });
         code_workbench_reference_run.setCwd(b.path("examples/code-workbench"));
         code_workbench_reference_run.has_side_effects = true;
@@ -1252,8 +1272,14 @@ pub fn build(b: *std.Build) void {
         const persist_e2e_run = b.addRunArtifact(ts_core_artifacts.persist);
         const markup_e2e_run = b.addRunArtifact(ts_core_artifacts.markup);
         const kanban_e2e_run = b.addRunArtifact(ts_core_artifacts.kanban);
+        const habits_e2e_run = b.addRunArtifact(ts_core_artifacts.habits);
+        addTestStep(b, "test-ts-habits-e2e", "Compare compiled Habits with the native behavior reference", ts_core_artifacts.habits);
+        ts_core_e2e_step.dependOn(&habits_e2e_run.step);
+        test_step.dependOn(&habits_e2e_run.step);
         const soundboard_e2e_run = b.addRunArtifact(ts_core_artifacts.soundboard);
         const monitor_e2e_run = b.addRunArtifact(ts_core_artifacts.system_monitor);
+        addTestStep(b, "test-ts-soundboard-e2e", "Run the compiled Soundboard application battery", ts_core_artifacts.soundboard);
+        addTestStep(b, "test-ts-system-monitor-e2e", "Run the compiled System Monitor application battery", ts_core_artifacts.system_monitor);
         const scaffold_ide_e2e_run = b.addRunArtifact(ts_core_artifacts.scaffold_ide);
         // The suite scaffolds and typechecks real trees under .zig-cache;
         // no build inputs/outputs to hash, so always run it.
@@ -1269,6 +1295,7 @@ pub fn build(b: *std.Build) void {
         ts_core_e2e_step.dependOn(&surface_layout_run.step);
         test_step.dependOn(&surface_layout_run.step);
         const services_e2e_run = b.addRunArtifact(ts_core_artifacts.services);
+        addTestStep(b, "test-ts-services-journal", "Verify devhost recordings replay through the packaged service carrier", filteredTestArtifact(b, ts_core_artifacts.services.root_module, "ts-services-journal-tests", &.{"a devhost-recorded service session"}));
         const markup_components_e2e_step = b.step("test-ts-markup-components-e2e", "Run root component-file compiled, interpreter, automation, and replay coverage");
         markup_components_e2e_step.dependOn(&markup_e2e_run.step);
         markup_components_e2e_step.dependOn(&kanban_e2e_run.step);
@@ -2279,6 +2306,9 @@ pub fn build(b: *std.Build) void {
     addTestStep(b, "test-app-runner-window-placement", "Run app-runner window placement decision tests", app_runner_window_placement_tests);
     addTestStep(b, "test-canvas", "Run canvas display list tests", canvas_tests);
     addTestStep(b, "test-desktop", "Run Native SDK framework tests", desktop_tests);
+    addTestStep(b, "test-session-replay", "Run complete session codecs, recording, and replay tests", filteredTestArtifact(b, desktop_mod, "session-replay-tests", &.{
+        "runtime.session_journal.test", "runtime.session_record.test", "runtime.session_tests.test", "runtime.session_replay.test",
+    }));
     for (desktop_test_shard_specs, desktop_test_shards) |spec, shard_tests| {
         addTestStep(b, b.fmt("test-desktop-{s}", .{spec.name}), spec.description, shard_tests);
     }
@@ -2437,7 +2467,6 @@ pub fn build(b: *std.Build) void {
         addExampleTestStep(b, host_cli_exe, native_examples_step, "test-example-habits", "Run markup habits example tests", "examples/habits", .managed),
         addExampleTestStep(b, host_cli_exe, native_examples_step, "test-example-soundboard", "Run soundboard example tests", "examples/soundboard", .managed),
         addExampleTestStep(b, host_cli_exe, native_examples_step, "test-example-video-player", "Run video player example tests", "examples/video-player", .managed),
-        addExampleTestStep(b, host_cli_exe, native_examples_step, "test-example-soundboard-ts", "Run soundboard-ts example tests", "examples/soundboard-ts", .managed),
         addExampleTestStep(b, host_cli_exe, native_examples_step, "test-example-voice-memo", "Run voice memo example tests", "examples/voice-memo", .managed),
         addExampleTestStep(b, host_cli_exe, native_examples_step, "test-example-deck", "Run deck example tests", "examples/deck", .managed),
         addExampleTestStep(b, host_cli_exe, native_examples_step, "test-example-markdown-viewer", "Run markdown viewer example tests", "examples/markdown-viewer", .managed),
@@ -2448,7 +2477,6 @@ pub fn build(b: *std.Build) void {
         addExampleTestStep(b, host_cli_exe, native_examples_step, "test-example-system-monitor", "Run system monitor example tests", "examples/system-monitor", .managed),
         addExampleTestStep(b, host_cli_exe, native_examples_step, "test-example-terminal", "Run terminal example tests", "examples/terminal", .owned),
         addExampleTestStep(b, host_cli_exe, native_examples_step, "test-example-workbench", "Run workbench example tests", "examples/workbench", .owned),
-        addExampleTestStep(b, host_cli_exe, native_examples_step, "test-example-system-monitor-ts", "Run system-monitor-ts example tests", "examples/system-monitor-ts", .managed),
         addExampleTestStep(b, host_cli_exe, native_examples_step, "test-example-effects-probe", "Run effects probe example tests", "examples/effects-probe", .managed),
         addExampleTestStep(b, host_cli_exe, native_examples_step, "test-example-channel-monitor", "Run channel monitor example tests", "examples/channel-monitor", .managed),
         addExampleTestStep(b, host_cli_exe, native_examples_step, "test-example-menu-bar", "Run menu-bar lifecycle example tests", "examples/menu-bar", .managed),
@@ -3930,7 +3958,7 @@ fn testArtifact(b: *std.Build, mod: *std.Build.Module) *std.Build.Step.Compile {
 }
 
 /// The two transpiled-core end-to-end test binaries: the host/markup
-/// fixture suite (tests/ts-core) and the soundboard-ts example suite —
+/// fixture suite (tests/ts-core) and the soundboard example suite —
 /// the launch-gate port driven as a REAL app (its committed core, its
 /// shipping markup). Each runs the @native-sdk/core transpiler (node)
 /// over the TS core at build time, pairs the emitted core with its rt
@@ -3948,6 +3976,7 @@ const TsCoreE2eArtifacts = struct {
     /// — every fixture battery links exactly its own core.
     markup: *std.Build.Step.Compile,
     kanban: *std.Build.Step.Compile,
+    habits: *std.Build.Step.Compile,
     soundboard: *std.Build.Step.Compile,
     system_monitor: *std.Build.Step.Compile,
     /// The stock-IDE contract: a fresh scaffold (and the committed TS
@@ -4139,19 +4168,35 @@ fn tsCoreE2eArtifact(
     kanban_mod.addImport("native_sdk", desktop_mod);
     kanban_mod.addImport("ts_kanban_core", kanban_core_mod);
 
-    // The soundboard-ts example's core and markup, tested as one app:
+    const habits_fixture = externalCoreFixtureModule(b, target, optimize, node, corewire_exe, .{
+        .entry = "examples/habits/src/core.ts",
+        .src_dir = b.path("examples/habits/src"),
+        .name = "habits_core",
+        .typescript_view = true,
+    });
+    const habits_stage = b.addWriteFiles();
+    const habits_root = habits_stage.addCopyFile(b.path("tests/ts-core/habits_e2e_tests.zig"), "habits_e2e_tests.zig");
+    _ = habits_stage.addCopyFile(b.path("tests/ts-core/habits_reference.zig"), "habits_reference.zig");
+    _ = habits_stage.addCopyFile(b.path("tests/ts-core/habits_reference_tests.zig"), "habits_reference_tests.zig");
+    _ = habits_stage.addCopyFile(b.path("tests/ts-core/habits_reference.native"), "habits_reference.native");
+    _ = habits_stage.addCopyFile(b.path("examples/habits/src/app.native"), "app.native");
+    const habits_mod = b.createModule(.{ .root_source_file = habits_root, .target = target, .optimize = optimize });
+    habits_mod.addImport("native_sdk", desktop_mod);
+    habits_mod.addImport("ts_habits_core", habits_fixture.module);
+
+    // The soundboard example's core and markup, tested as one app:
     // the test root stages beside a copy of the example's app.native so
     // the compiled markup engine builds the SHIPPING view over the
     // core's model.
     const soundboard_fixture = externalCoreFixtureModule(b, target, optimize, node, corewire_exe, .{
-        .entry = "examples/soundboard-ts/src/core.ts",
-        .src_dir = b.path("examples/soundboard-ts/src"),
+        .entry = "examples/soundboard/src/core.ts",
+        .src_dir = b.path("examples/soundboard/src"),
         .name = "soundboard_core",
     });
     const soundboard_core_mod = soundboard_fixture.module;
     const soundboard_stage = b.addWriteFiles();
     const soundboard_root = soundboard_stage.addCopyFile(b.path("tests/ts-core/soundboard_e2e_tests.zig"), "soundboard_e2e_tests.zig");
-    _ = soundboard_stage.addCopyFile(b.path("examples/soundboard-ts/src/app.native"), "app.native");
+    _ = soundboard_stage.addCopyFile(b.path("examples/soundboard/src/app.native"), "app.native");
     const soundboard_mod = b.createModule(.{
         .root_source_file = soundboard_root,
         .target = target,
@@ -4160,20 +4205,20 @@ fn tsCoreE2eArtifact(
     soundboard_mod.addImport("native_sdk", desktop_mod);
     soundboard_mod.addImport("ts_soundboard_core", soundboard_core_mod);
 
-    // The system-monitor-ts example's core and markup, tested the same
+    // The system-monitor example's core and markup, tested the same
     // way — plus the ORIGINAL Zig example's committed sampler captures,
     // staged as fixtures so both ports parse the same recorded truth.
     const monitor_fixture = externalCoreFixtureModule(b, target, optimize, node, corewire_exe, .{
-        .entry = "examples/system-monitor-ts/src/core.ts",
-        .src_dir = b.path("examples/system-monitor-ts/src"),
+        .entry = "examples/system-monitor/src/core.ts",
+        .src_dir = b.path("examples/system-monitor/src"),
         .name = "system_monitor_core",
     });
     const monitor_core_mod = monitor_fixture.module;
     const monitor_stage = b.addWriteFiles();
     const monitor_root = monitor_stage.addCopyFile(b.path("tests/ts-core/system_monitor_e2e_tests.zig"), "system_monitor_e2e_tests.zig");
-    _ = monitor_stage.addCopyFile(b.path("examples/system-monitor-ts/src/app.native"), "app.native");
-    _ = monitor_stage.addCopyFile(b.path("examples/system-monitor-ts/src/windows/settings.native"), "settings.native");
-    _ = monitor_stage.addCopyFile(b.path("examples/system-monitor-ts/src/windows/components/sampling.native"), "components/sampling.native");
+    _ = monitor_stage.addCopyFile(b.path("examples/system-monitor/src/app.native"), "app.native");
+    _ = monitor_stage.addCopyFile(b.path("examples/system-monitor/src/windows/settings.native"), "settings.native");
+    _ = monitor_stage.addCopyFile(b.path("examples/system-monitor/src/windows/components/sampling.native"), "components/sampling.native");
     _ = monitor_stage.addCopyFile(b.path("examples/system-monitor/src/fixtures/sysctl.txt"), "fixtures/sysctl.txt");
     _ = monitor_stage.addCopyFile(b.path("examples/system-monitor/src/fixtures/ps.txt"), "fixtures/ps.txt");
     _ = monitor_stage.addCopyFile(b.path("examples/system-monitor/src/fixtures/vm_stat.txt"), "fixtures/vm_stat.txt");
@@ -4488,6 +4533,7 @@ fn tsCoreE2eArtifact(
         .persist = filteredTestArtifact(b, persist_mod, "ts-persist-e2e-tests", &.{}),
         .markup = filteredTestArtifact(b, markup_e2e_mod, "ts-markup-e2e-tests", &.{}),
         .kanban = filteredTestArtifact(b, kanban_mod, "ts-kanban-e2e-tests", &.{}),
+        .habits = filteredTestArtifact(b, habits_mod, "ts-habits-e2e-tests", &.{}),
         .soundboard = filteredTestArtifact(b, soundboard_mod, "ts-soundboard-e2e-tests", &.{}),
         .system_monitor = filteredTestArtifact(b, monitor_mod, "ts-system-monitor-e2e-tests", &.{}),
         .scaffold_ide = filteredTestArtifact(b, scaffold_ide_mod, "ts-scaffold-ide-e2e-tests", &.{}),
diff --git a/docs/content/docs/app-model.mdx b/docs/content/docs/app-model.mdx
index 9df87d176..a8e65383d 100644
--- a/docs/content/docs/app-model.mdx
+++ b/docs/content/docs/app-model.mdx
@@ -154,7 +154,7 @@ pub fn rootView(ui: *Ui, model: *const Model) Ui.Node {
 // options: .view = rootView,
 ```
 
-`examples/calculator` is the smallest live reference (`CompiledKeypadView.build(ui, model)` inside a hand-written root); `system-monitor`, `soundboard`, and `deck` use the same shape. Widget ids, handlers, and dispatch are identical to a pure-markup tree, so tests and automation address the fragment's widgets the usual way.
+`examples/calculator` is the smallest live reference (`CompiledKeypadView.build(ui, model)` inside a hand-written root); `deck` uses the same shape. Widget ids, handlers, and dispatch are identical to a pure-markup tree, so tests and automation address the fragment's widgets the usual way.
 
 A Zig-root app keeps dev-time hot reload for its embedded fragments too: build with `UiAppWithFeatures(Model, Msg, .{ .runtime_markup = dev_markup_reload })` and pass `.markup = .{ .source = ..., .watch_path = "src/header.native", .io = init.io }` gated on `builtin.mode == .Debug` (`null` otherwise) — the wiring in `examples/notes`. Debug builds then reload edits to the watched file in place; release builds compile the runtime engine out entirely.
 
diff --git a/docs/content/docs/components/slider.mdx b/docs/content/docs/components/slider.mdx
index 5f5a12e2c..100404eb1 100644
--- a/docs/content/docs/components/slider.mdx
+++ b/docs/content/docs/components/slider.mdx
@@ -21,7 +21,7 @@ For controlled state, store the fraction in `update` and bind it back to `value`
 </column>
 ```
 
-With a one-number float arm — `{ kind: "volume_changed"; fraction: number }` in a TypeScript core, `volume_changed: f32` in a Zig core — the arm receives the applied fraction directly (the `examples/soundboard-ts` seek bar is the live pattern):
+With a one-number float arm — `{ kind: "volume_changed"; fraction: number }` in a TypeScript core, `volume_changed: f32` in a Zig core — the arm receives the applied fraction directly (the `examples/soundboard` seek bar is the live pattern):
 
 <CodeToggle>
 
diff --git a/docs/content/docs/native-ui.mdx b/docs/content/docs/native-ui.mdx
index bb06b668a..072e482da 100644
--- a/docs/content/docs/native-ui.mdx
+++ b/docs/content/docs/native-ui.mdx
@@ -651,7 +651,7 @@ For timestamps, the facade owns the clocks (Zig 0.16 puts `std.time` behind `std
 
 ## Secondary windows
 
-In a default TypeScript app, export `windows(model): readonly WindowDescriptor[]` and put each possible window's markup at `src/windows/<label>.native`; the generated launcher compiles those files, maps descriptor labels to them, and includes shared components they import from nested paths under `src/windows/`. The main `src/app.native` view can import components anywhere under `src/`. Construct descriptors with `windowDescriptor`. `restorePolicy: "center_on_primary"` centers a fresh descriptor with no `x`/`y` on macOS; Windows and Linux currently keep their native default placement. The default policy is `"clamp_to_visible_screen"`. `closePolicy: "quit"` routes `onCloseCommand` through `commandMsg`; `"hide"` retains the window and dispatches no close command. `titlebar` includes `"chromeless"` for fully skinned windows. `examples/system-monitor-ts` is the complete default-path reference.
+In a default TypeScript app, export `windows(model): readonly WindowDescriptor[]` and put each possible window's markup at `src/windows/<label>.native`; the generated launcher compiles those files, maps descriptor labels to them, and includes shared components they import from nested paths under `src/windows/`. The main `src/app.native` view can import components anywhere under `src/`. Construct descriptors with `windowDescriptor`. `restorePolicy: "center_on_primary"` centers a fresh descriptor with no `x`/`y` on macOS; Windows and Linux currently keep their native default placement. The default policy is `"clamp_to_visible_screen"`. `closePolicy: "quit"` routes `onCloseCommand` through `commandMsg`; `"hide"` retains the window and dispatches no close command. `titlebar` includes `"chromeless"` for fully skinned windows. `examples/system-monitor` is the complete default-path reference.
 
 In Zig cores and custom wiring, windows are model-declared exactly like the tray: `Options.windows_fn` returns the window descriptors that should exist right now (presence IS liveness), and `Options.window_view` builds each declared window's whole canvas tree, keyed by the descriptor's window label. After every dispatched Msg the runtime reconciles: windows the model started declaring are created (a source-less native window wearing one `gpu_surface` view with the descriptor's `canvas_label`, inheriting the main canvas's gpu options), windows it stopped declaring close, and every open window's view rebuilds from the same model — a theme picked in the settings window restyles the main window on the same dispatch. There is no `visible` flag: transient visibility is host state changed through `hideWindow`/`showWindow` or a `.hide` close policy; stop declaring a window to really close it and release its retained views.
 
diff --git a/docs/content/docs/typescript/index.mdx b/docs/content/docs/typescript/index.mdx
index 31aebb4a3..60d398929 100644
--- a/docs/content/docs/typescript/index.mdx
+++ b/docs/content/docs/typescript/index.mdx
@@ -534,7 +534,7 @@ Export `windows(model): readonly WindowDescriptor[]` to derive the live secondar
 
 The main `src/app.native` view can import component files anywhere under `src/`, with `src/components/` as the convention. The generated launcher embeds every other `.native` source and watches the imported closure, so the same imports work in development, release builds, and mobile builds. Secondary-window roots remain narrower: they import within `src/windows/`.
 
-`closePolicy` accepts `"quit"` (the default) or `"hide"`. A `"quit"` user close routes `onCloseCommand` through `commandMsg`, where the app maps it to the Msg that clears its open flag. A `"hide"` close retains the same native window and view and dispatches no close command; `Cmd.showWindow(label)` reveals it. Model-declared secondary windows are desktop-only. See `examples/system-monitor-ts`.
+`closePolicy` accepts `"quit"` (the default) or `"hide"`. A `"quit"` user close routes `onCloseCommand` through `commandMsg`, where the app maps it to the Msg that clears its open flag. A `"hide"` close retains the same native window and view and dispatches no close command; `Cmd.showWindow(label)` reveals it. Model-declared secondary windows are desktop-only. See `examples/system-monitor`.
 
 `restorePolicy` accepts `"clamp_to_visible_screen"` (the default) or `"center_on_primary"`. Model-declared windows do not restore persisted frames. On macOS, `"center_on_primary"` centers a fresh descriptor with no authored `x`/`y`; Windows and Linux currently keep their native default placement.
 
diff --git a/docs/content/docs/typescript/packages.mdx b/docs/content/docs/typescript/packages.mdx
index fa20287bc..ef5706e7d 100644
--- a/docs/content/docs/typescript/packages.mdx
+++ b/docs/content/docs/typescript/packages.mdx
@@ -171,7 +171,7 @@ case "render":
   ];
 ```
 
-Cancellation (`Cmd.cancel("render")`), the exit code on the `exit` arm, and machine-readable failure reasons all follow the standard effect contract — see [the streaming ops](/docs/typescript#effects-are-cmd-data). `examples/system-monitor-ts` is the reference for the collect shape: spawn a tool, parse its whole output in the core.
+Cancellation (`Cmd.cancel("render")`), the exit code on the `exit` arm, and machine-readable failure reasons all follow the standard effect contract — see [the streaming ops](/docs/typescript#effects-are-cmd-data). `examples/system-monitor` is the reference for the collect shape: spawn a tool, parse its whole output in the core.
 
 ## Pure utilities
 
diff --git a/docs/package.json b/docs/package.json
index d5f979c1e..c253d26c0 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -8,7 +8,7 @@
     "dev": "next dev",
     "build": "fumadocs-mdx && next build",
     "start": "next start",
-    "typecheck": "fumadocs-mdx && next typegen && tsc --noEmit",
+    "typecheck": "next typegen && fumadocs-mdx && tsc --noEmit",
     "check": "node scripts/check-app-schema.mjs && pnpm typecheck && pnpm build && node scripts/check-doc-routes.mjs && node scripts/check-code-toggle.mjs && node scripts/check-wasm-preview.mjs",
     "postinstall": "fumadocs-mdx"
   },
diff --git a/examples/README.md b/examples/README.md
index 4f4b3cc9d..a6b1c8e08 100644
--- a/examples/README.md
+++ b/examples/README.md
@@ -1,6 +1,6 @@
 # Native SDK Examples
 
-Most examples here are zero-config apps: `app.zon` + `src/` (+ `assets/`) and nothing else. The `native` CLI owns their build — run any of them straight from its directory:
+Most examples here are zero-config apps: `app.json` or `app.zon` + `src/` (+ `assets/`) and nothing else. The `native` CLI owns their build — run any of them straight from its directory:
 
 ```sh
 native dev     # build and run with hot reload
@@ -8,11 +8,11 @@ native test    # run the app's test suite
 native build   # produce a ReleaseFast binary in zig-out/bin/
 ```
 
-(In this repository the CLI is `zig-out/bin/native`, built by `zig build` at the root.) A handful of examples own a `build.zig` because they genuinely outgrow the generated graph — each one's build file opens with the reason.
+(In this repository the CLI is `zig-out/bin/native`, built by `zig build` at the root.) A handful of examples own a `build.zig` because they outgrow the generated graph — each one's build file opens with the reason.
 
 ## Start here: TypeScript + Native markup
 
-TypeScript is the primary app-authoring language. A new `native init my_app` project has `src/core.ts`, `src/app.native`, and `app.zon`; the core compiles ahead of time to native code, so no JS runtime ships in the app. These examples are the clearest substantial references for that path:
+TypeScript is the primary app-authoring language. A new `native init my_app` project has `src/core.ts`, `src/app.native`, and `app.json`; the core compiles ahead of time to native code, so no JS runtime ships in the app. These examples are the clearest substantial references for that path:
 
 | Example | Shows |
 | --- | --- |
@@ -20,30 +20,28 @@ TypeScript is the primary app-authoring language. A new `native init my_app` pro
 | `service-feed-reader` | The complete services loop: `Cmd.fetch`, a parsing service reached through the generated `@native-sdk/services` client, shared record shapes, and recorded replay without the service. |
 | `relational-notes` | Append-only SQLite migrations, build-time checked SQL, generated typed transactions and page decoders, FTS5, and live queries. |
 | `gpu-components` | Isolated interactive Native UI specimens, disclosure trees, anchored menus, and controlled component state. |
-| `soundboard-ts` | Full music player: audio effects, timers, search, assets, native context menus, and adaptive markup. |
-| `system-monitor-ts` | Subprocess effects, timers, parsing, tables, charts, controlled scroll, and confirmation flows. |
+| `habits` | Small habit tracker: stable row keys, streaks, active filtering, chrome geometry, and recorded replay. |
+| `kanban` | Keyed boards, drag interactions, avatars, controlled scrolling, and file drops. |
+| `menu-bar` | Status-item lifecycle, native menus, window hiding and reopening, and typed commands. |
+| `soundboard` | Full music player: audio effects, timers, search, assets, native context menus, and adaptive markup. |
+| `system-monitor` | Subprocess effects, timers, parsing, tables, charts, controlled scroll, and confirmation flows. |
 
-The `-ts` suffix is historical: `soundboard-ts` and `system-monitor-ts` distinguish ports from older Zig originals in the same catalog. Chatbot was introduced as a TypeScript-only example and follows the unsuffixed default. New TypeScript apps need no suffix because TypeScript is the default. Many unsuffixed showcase apps predate that default and still use `src/main.zig`; use them for their feature or visual patterns, not as evidence that new app logic should be Zig.
+Soundboard and System Monitor use the canonical unsuffixed folders. Their TypeScript cores and Native markup replace the earlier duplicate Zig implementations. New TypeScript apps need no language suffix.
 
 ## Earlier native-rendered showcase apps (Zig cores)
 
 | Example | Shows |
 | --- | --- |
-| `habits` | The smallest markup app: one `.native` view, a plain-form Model/Msg/update. |
 | `calculator` | A complete small app: markup keypad, text-field keyboard path, chrome shortcuts, theming. |
 | `notes` | Persistence through the effects channel: debounced writes, restore on boot, dialogs, search. |
-| `kanban` | Builder-view boards with drag interactions. |
 | `feed` | Windowed 100k-row list virtualization with runtime-owned scrolling. |
-| `soundboard` | Album grid with decoded cover art, context menus, timers, and a custom theme. |
 | `deck` | Two model-declared windows and a dense track ledger. |
 | `markdown-viewer` | Real file I/O through effects, hidden-inset titlebar retrofit, preview + editor. |
 | `code-editor` | Platform folder picker, bounded filesystem tree, and syntax-highlighted source editor. |
-| `system-monitor` | Live process sampling, confirmation dialogs, a settings window. |
 | `gpu-surface` | A Metal-backed GPU surface composed beside native controls and WebView content. |
 | `gpu-dashboard` | Native chrome, a GPU surface, and a retained canvas display list. |
 | `canvas-preview` | Canvas + WebView in one window, panes snapped to canvas anchors, a status item. |
 | `effects-probe` | The effect system live: spawn/fetch/file effects, cancellation, worker wakes. |
-| `menu-bar` | The menu-bar app lifecycle: `close_policy = "hide"`, a status item whose Open/Quit rows drive `fx.showWindow`/`fx.quitApp`, Dock reopen. |
 
 ## Examples that own their build
 
@@ -62,4 +60,4 @@ The `-ts` suffix is historical: `soundboard-ts` and `system-monitor-ts` distingu
 
 `mobile-shell`, `ios`, and `android` are mobile host projects (Xcode/Gradle shells plus shared `app.zon` metadata) rather than desktop app directories.
 
-Start with `native init` for a small TypeScript + Native markup app, then use `chatbot`, `gpu-components`, `soundboard-ts`, or `system-monitor-ts` according to the feature you need. Use `habits` when you specifically want the smallest Zig-core equivalent, `hello` for the lower-level WebView path, `webview` for native commands or WebView policy, `capabilities` for guarded OS services, and `gpu-surface` or `gpu-dashboard` for custom-rendered or retained-canvas panes.
+Start with `native init` for a small TypeScript + Native markup app, then use `chatbot`, `gpu-components`, `soundboard`, or `system-monitor` according to the feature you need. Use `habits` for a small TypeScript app, `hello` for the lower-level WebView path, `webview` for native commands or WebView policy, `capabilities` for guarded OS services, and `gpu-surface` or `gpu-dashboard` for custom-rendered or retained-canvas panes.
diff --git a/examples/habits/README.md b/examples/habits/README.md
new file mode 100644
index 000000000..7b6fa4685
--- /dev/null
+++ b/examples/habits/README.md
@@ -0,0 +1,5 @@
+# Habits
+
+A small habit tracker authored in TypeScript and Native markup. Run `native dev` from this directory to add habits, increment streaks, and switch between all and active habits. The 64-habit limit, stable row identities, summary text, and tall titlebar layout are preserved from the original app.
+
+`src/core.ts` owns state and updates, `src/app.native` owns the view, and `app.zon` declares the native window. `native test` runs compiled-app interactions, keyboard navigation, filtering, and replay. The SDK also compares the core and view with the native behavior reference in `tests/ts-core`.
diff --git a/examples/soundboard-ts/package.json b/examples/habits/package.json
similarity index 90%
rename from examples/soundboard-ts/package.json
rename to examples/habits/package.json
index af88b0069..0048787c6 100644
--- a/examples/soundboard-ts/package.json
+++ b/examples/habits/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "soundboard-ts",
+  "name": "habits",
   "private": true,
   "description": "Editor and versioning surface only: stock TypeScript tooling resolves @native-sdk/core from here. The native CLI never reads it and builds with node_modules absent.",
   "dependencies": {
diff --git a/examples/habits/src/app.native b/examples/habits/src/app.native
new file mode 100644
index 000000000..6203db74c
--- /dev/null
+++ b/examples/habits/src/app.native
@@ -0,0 +1,44 @@
+<!-- The habit tracker view. Embedded into the binary and hot-reloaded in
+     dev: edit this file while the app runs and the window updates without
+     losing streak state. -->
+<column background="background">
+  <!-- The header IS the titlebar (tall hidden-inset chrome): it is the
+       window's drag surface, leads with a spacer sized to the traffic
+       lights via chromeMsg, and matches its height to the titlebar band
+       so its controls and the lights share a centerline. -->
+  <!-- Band contents: the one primary action holds the trailing corner;
+       the rest of the band stays bare drag surface. -->
+  <row height="{header_height}" padding="12" gap="10" cross="center" background="surface" window-drag="true" label="Habits header">
+    <spacer width="{chrome_leading}" />
+    <spacer grow="1" />
+    <button variant="primary" on-press="add">New habit</button>
+  </row>
+  <separator />
+  <column grow="1" gap="12" padding="16">
+    <!-- Single selection is radio semantics: the group renders selection
+         from {f == filter} equalities, each radio's on-toggle sets the
+         model field, and the visible label is element content. -->
+    <radio-group gap="8" label="Filter">
+      <for each="filters" as="f">
+        <radio checked="{f == filter}" on-toggle="set_filter:{f}">{f}</radio>
+      </for>
+    </radio-group>
+    <if test="{habit_count > 0}">
+      <scroll grow="1">
+        <column gap="2">
+          <for each="visible" key="id" as="h">
+            <row global-key="{h.id}" gap="8" padding="6" cross="center" role="listitem" label="{h.name}">
+              <text grow="1">{h.name}</text>
+              <text>{h.streak} days</text>
+              <button size="sm" on-press="done:{h.id}">Done today</button>
+            </row>
+          </for>
+        </column>
+      </scroll>
+    </if>
+    <else>
+      <alert text="No habits yet - add your first habit." grow="1" />
+    </else>
+  </column>
+  <status-bar>{summaryLine}</status-bar>
+</column>
diff --git a/examples/habits/src/core.ts b/examples/habits/src/core.ts
new file mode 100644
index 000000000..0cf7feadb
--- /dev/null
+++ b/examples/habits/src/core.ts
@@ -0,0 +1,66 @@
+import { asciiBytes, utf8Bytes } from "@native-sdk/core";
+import { type ChromeInsets, type ChromeButtons } from "@native-sdk/core/events";
+
+export type Filter = "all" | "active";
+export interface Habit {
+  readonly id: number;
+  readonly name: Uint8Array;
+  readonly streak: number;
+}
+export interface Model {
+  readonly habits: readonly Habit[];
+  readonly next_id: number;
+  readonly filter: Filter;
+  readonly chrome_leading: number;
+  readonly header_height: number;
+}
+export type Msg =
+  | { readonly kind: "add" }
+  | { readonly kind: "done"; readonly id: number }
+  | { readonly kind: "set_filter"; readonly filter: Filter }
+  | { readonly kind: "chrome_changed"; readonly insets: ChromeInsets; readonly buttons: ChromeButtons; readonly tabsProjected: boolean };
+export const chromeMsg = "chrome_changed";
+
+export function initialModel(): Model {
+  return {
+    habits: [
+      { id: 1, name: asciiBytes("Meditate"), streak: 12 },
+      { id: 2, name: asciiBytes("Exercise"), streak: 0 },
+      { id: 3, name: asciiBytes("Read 20 pages"), streak: 9 },
+    ],
+    next_id: 4, filter: "all", chrome_leading: 0, header_height: 52,
+  };
+}
+export function update(model: Model, msg: Msg): Model {
+  switch (msg.kind) {
+    case "add": {
+      if (model.habits.length >= 64) return model;
+      const habits: Habit[] = [];
+      for (const habit of model.habits) habits.push(habit);
+      habits.push({ id: model.next_id, name: utf8Bytes(`Habit ${model.next_id}`), streak: 0 });
+      return { ...model, habits, next_id: (model.next_id + 1) >>> 0 };
+    }
+    case "done": {
+      const habits: Habit[] = [];
+      for (const habit of model.habits) habits.push(habit.id === msg.id ? { id: habit.id, name: habit.name, streak: (habit.streak + 1) >>> 0 } : habit);
+      return { ...model, habits };
+    }
+    case "set_filter": return { ...model, filter: msg.filter };
+    case "chrome_changed": return { ...model, chrome_leading: msg.insets.left, header_height: Math.max(52, msg.insets.top) };
+  }
+}
+export function filters(_model: Model): readonly Filter[] { return ["all", "active"]; }
+export function habit_count(model: Model): number { return model.habits.length; }
+export function visible(model: Model): readonly Habit[] {
+  const habits: Habit[] = [];
+  for (const habit of model.habits) if (model.filter === "all" || habit.streak > 0) habits.push(habit);
+  return habits;
+}
+export function totalDays(model: Model): number {
+  let total = 0;
+  for (const habit of model.habits) total += habit.streak;
+  return total;
+}
+export function summaryLine(model: Model): Uint8Array {
+  return utf8Bytes(`${model.habits.length} habits · ${totalDays(model)} total days`);
+}
diff --git a/examples/habits/tests/view.test.ts b/examples/habits/tests/view.test.ts
new file mode 100644
index 000000000..2ef0d85cf
--- /dev/null
+++ b/examples/habits/tests/view.test.ts
@@ -0,0 +1,63 @@
+import assert from "node:assert/strict";
+import { mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import test from "node:test";
+import { dirname } from "node:path";
+import { NativeApp, findWidget, type NativeSnapshot, type NativeWidget } from "@native-sdk/core/testing";
+
+const rows = (s: NativeSnapshot) => s.widgets.filter(w => w.role === "listitem");
+const button = (s: NativeSnapshot, name: string) => findWidget(s, { role: "button", name });
+const done = (s: NativeSnapshot, row: NativeWidget) => s.widgets.find(w => w.role === "button" && w.name === "Done today" && w.bounds.y >= row.bounds.y && w.bounds.y < row.bounds.y + row.bounds.height)!;
+function compare(name: string, values: NativeSnapshot[]) {
+  const reference = process.env.NATIVE_SDK_TEST_VIEW_REFERENCE;
+  if (!reference) return;
+  const snapshots = values.map(({ viewBackend, ...s }) => s);
+  if (process.env.NATIVE_SDK_TEST_VIEW_BACKEND === "zig") {
+    mkdirSync(dirname(reference), { recursive: true });
+    writeFileSync(`${reference}.${name}.json`, JSON.stringify(snapshots));
+  }
+  else assert.deepEqual(snapshots, JSON.parse(readFileSync(`${reference}.${name}.json`, "utf8")), "complete snapshots must match the native view");
+}
+
+test("Habits preserves streaks, keyed filtering, keyboard navigation, capacity and complete replay", async () => {
+  const app = await NativeApp.start({ width: 720, height: 520 });
+  try {
+    let s = await app.snapshot(); const snapshots = [s];
+    if (process.env.NATIVE_SDK_TEST_VIEW_BACKEND) assert.equal(s.viewBackend, process.env.NATIVE_SDK_TEST_VIEW_BACKEND);
+    const save = (value: NativeSnapshot) => { s = value; snapshots.push(s); };
+    assert.deepEqual(rows(s).map(w => w.name), ["Meditate", "Exercise", "Read 20 pages"]);
+    assert.ok(s.widgets.some(w => w.name === "3 habits · 21 total days"));
+    const original = rows(s).map(w => w.id), meditate = rows(s)[0]!;
+    const originalDone = done(s, meditate).id;
+    save(await app.click(button(s, "New habit")));
+    assert.equal(rows(s).length, 4); assert.equal(rows(s)[3]!.name, "Habit 4");
+    save(await app.click(done(s, rows(s)[0]!)));
+    assert.equal((s.model.habits as unknown as { streak: number }[])[0]!.streak, 13);
+    assert.ok(s.widgets.some(w => w.name === "4 habits · 22 total days"));
+    save(await app.click(findWidget(s, { role: "radio", name: "active" })));
+    assert.deepEqual(rows(s).map(w => w.id), [original[0], original[2]]);
+    assert.equal(done(s, rows(s)[0]!).id, originalDone);
+    save(await app.click(done(s, rows(s)[0]!)));
+    assert.equal((s.model.habits as unknown as { streak: number }[])[0]!.streak, 14);
+    save(await app.click(findWidget(s, { role: "radio", name: "all" })));
+    assert.deepEqual(rows(s).slice(0, 3).map(w => w.id), original);
+    const view = button(s, "New habit").view;
+    await app.action(button(s, "New habit"), "focus");
+    save(await app.key(view, "enter")); assert.equal(rows(s).length, 5);
+    save(await app.key(view, "tab")); assert.equal(findWidget(s, { role: "radio", name: "all" }).focused, true);
+    save(await app.key(view, "arrowright")); assert.equal(s.model.filter, "active");
+    save(await app.key(view, "arrowleft")); assert.equal(s.model.filter, "all");
+    for (let i = 5; i < 64; i++) save(await app.click(button(s, "New habit")));
+    assert.equal((s.model.habits as unknown as unknown[]).length, 64); assert.equal(s.model.next_id, 65);
+    const full = s.model;
+    save(await app.click(button(s, "New habit"))); assert.deepEqual(s.model, full);
+    assert.equal(done(s, rows(s)[0]!).id, originalDone);
+    const recorded = s;
+    const replay = await app.verifyReplay();
+    assert.ok(replay.events > 0 && replay.checkpoints > 0);
+    assert.deepEqual(replay.snapshot.model, recorded.model);
+    assert.deepEqual(replay.snapshot.widgets, recorded.widgets);
+    assert.deepEqual(replay.snapshot.effects, recorded.effects);
+    assert.equal(replay.snapshot.fingerprint, recorded.fingerprint);
+    save(replay.snapshot); compare("session", snapshots);
+  } finally { await app.close(); }
+});
diff --git a/examples/soundboard-ts/tsconfig.json b/examples/habits/tsconfig.json
similarity index 100%
rename from examples/soundboard-ts/tsconfig.json
rename to examples/habits/tsconfig.json
diff --git a/examples/soundboard-ts/README.md b/examples/soundboard-ts/README.md
deleted file mode 100644
index adbec515f..000000000
--- a/examples/soundboard-ts/README.md
+++ /dev/null
@@ -1,44 +0,0 @@
-# Native SDK soundboard-ts example
-
-The soundboard music library authored entirely in **TypeScript + Native markup** — the launch-bar port of `examples/soundboard`. Zero Zig: the logic tier is the app-core subset under `src/`, compiled to native code at build time; `src/app.native` is the whole view tier and `app.zon` the manifest plus the committed cover assets. The build detects `src/core.ts` in the tree and stages the wiring itself; no JS runtime ships in the binary.
-
-The core is a multi-module reference split of the app-core subset's import-graph support:
-
-- `src/core.ts` — the entry module: Model, Msg, update, subscriptions, the wiring channels, and every exported binding helper (the app's public face — markup and node both see exactly its exports).
-- `src/library.ts` — the committed music catalog tables and the pure catalog/presentation helpers over them.
-- `src/player.ts` — the pure playback state machine (track starts, queue advance, the launch-override stream rule); type-imports `Model` from the entry (the legal back-edge shape).
-- `@native-sdk/core/text` — the SDK's byte-splice text engine, compiled in for the search field's caret/selection/IME fidelity.
-
-Everything the Zig soundboard's core does is here: the committed music catalog (the same `music_manifest.zon` data, flattened into rodata tables), REAL audio playback through `Cmd.audioPlay` with the engine's source cascade (prepared local file first, the hosted URL as the streaming fallback, size-verified against the manifest's per-track bytes and cached under the platform caches directory), play/pause/prev/next with album wrap, scrub-to-seek on the transport slider, the play-next queue with its context-menu entry, Copy Title onto the clipboard, live search over albums/artists/titles through the full byte-splice text engine, the duration rule (the platform player's estimate never replaces the manifest's measured total), the never-rewind rendered clock, the honest degraded states (stream notice, buffering line, and the local-only assets notice under an empty `NATIVE_SDK_MUSIC_URL_BASE`), registered album covers, the width-adaptive album grid, and the media-key fallback.
-
-```sh
-native dev                                  # run the real app
-native dev --core --script dev-script.ndjson  # the core-logic loop under node - no renderer
-native check                                # subset-check the core's import graph + markup + app.zon
-native test -Dplatform=null                 # the hermetic suite
-```
-
-The end-to-end proof battery lives in the SDK repo (`tests/ts-core/soundboard_e2e_tests.zig`, run by `zig build test-ts-core-e2e`): it drives this example's real core and shipping markup headlessly through playback, scrub-to-seek, auto-advance, the queue, controlled scroll, the wiring channels (frame width, keys, chrome, covers, the env override), search, clipboard, record→replay, a dispatch-latency budget, the transport bar's layout across a rebuild storm, the theme accent, and the quiet-tile hover posture. An env-gated `PARITY_SHOTS` test in the same suite renders the side-by-side proof states (grid, album detail, songs at two widths) through the deterministic reference renderer for pixel comparison against the Zig original.
-
-## The wiring channels this port uses
-
-The generated wiring detects each channel from an export in `core.ts` (export exists → wired) or from `app.zon`:
-
-- **`frameMsg(model, frame)`** — presented-frame widths land in the model, and `gridColumns` re-derives the Zig original's width→columns rule (232pt tile floor, 24pt padding, 12pt gap) on every rebuild. The core returns `null` for same-width frames, so the idle law holds.
-- **`keyMsg(key)`** — the app-level key fallback: Space toggles the transport, the left/right arrows are previous/next track. The runtime's precedence rule applies first, so the search field keeps typing and a focused slider keeps its arrows.
-- **`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 (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
-
-Every remaining divergence is a decided posture, listed here on purpose. The former titlebar, grid-spacing, hover-wash, selected-row, and accent rows are CLOSED: the port now adopts the original's hidden-inset titlebar through the chromeMsg channel, sizes the album rack with the original's exact width rule, keeps image-forward tiles quiet on hover (`quiet-hover`), wears the inverted accent register on the loaded row, and takes the original's pink accent through `app.zon`'s `theme_accent`.
-
-- **No volume control — resolved for 1:1, decision flagged.** The Zig original ships no volume UI, so the port's stepper (model state, Msg arms, the player-module ladder) was REMOVED in one revertable commit; the engine's `audioSetVolume` verb stays proven by the SDK repo's host e2e fixture. FLAG: the other resolution — adding volume to the Zig original instead — reverts that one commit and restores a proven implementation.
-- **The rendered clock ticks at 250ms, not per frame.** Decided: the declarative `Sub.timer` that exists exactly while audio moves is the TS-idiomatic clock (the same motion gating as the original's `on_frame` clock, corrected by the player's position events under the same never-rewind rule). The frame channel is wired for the grid's width, but a per-frame clock arm would trade the idle-law simplicity of the timer for imperceptible smoothness on a text clock.
-- **Press plays.** This TypeScript variant keeps the touch convention — one press plays — while Native markup also supports the desktop `on-press` select + `on-double-press` play pairing. The arrow-key selection register goes with the one-press design; since the original's play gesture also selects, the LOADED row wears the same inverted accent register in both apps, and the two are visually 1:1 after any play.
-- **Cover corners: 8/10pt vs the radius tokens' 6pt.** The original rounds tile covers at 8pt and the detail cover at 10pt through numeric builder radii; markup's `radius` attribute deliberately takes radius TOKENS only, and the geist pack's sm/md/lg all resolve to 6pt. Kept on the token discipline for now — a per-value radius (or richer style-token bindings) is the flagged follow-up; the pixel cost is a 2–4pt corner difference on cover art.
-- **The bar's listening mark is the built-in `music` icon, not `app:waveform`.** The original registers its own waveform SVG through Zig (`registerAppIcons`); the generated wiring has no app-icon manifest channel yet — the flagged follow-up (an `app.zon` icons surface beside `.assets.images`).
-- **Copy Title is fire-and-forget.** `Cmd.clipboardWrite` has no result routing, so the model counts requests, not confirmed copies.
-- **Desktop only.** TypeScript cores build desktop apps today; the compact phone shell is the Zig original's.
diff --git a/examples/soundboard-ts/app.zon b/examples/soundboard-ts/app.zon
deleted file mode 100644
index 3c0483261..000000000
--- a/examples/soundboard-ts/app.zon
+++ /dev/null
@@ -1,75 +0,0 @@
-.{
-    .id = "dev.native_sdk.soundboard_ts",
-    .name = "soundboard-ts",
-    .display_name = "Soundboard TS",
-    .description = "The soundboard music library authored entirely in TypeScript + Native markup.",
-    .version = "0.1.0",
-    .platforms = .{"macos"},
-    // The clipboard permission covers the Copy Title context action
-    // (Cmd.clipboardWrite); audio playback rides the platform audio
-    // service and needs no bridge permission.
-    .permissions = .{ "view", "clipboard" },
-    .capabilities = .{ "native_views", "gpu_surfaces" },
-    // The same built-in pack the Zig soundboard's tokens resolve. A TS app
-    // owns no tokens_fn, so this manifest channel IS the theme: the stock
-    // tokens compose the pack with the live system appearance (light/dark
-    // follows the OS with no core code).
-    .theme = "geist",
-    // The Zig original's one brand statement (theme.zig's pink_800,
-    // hsl(336, 74%, 51%)), stated through the manifest accent channel:
-    // the wiring layers the accent identity over the pack — accent +
-    // white knockout ink, the focus ring, and the seek slider's filled
-    // range — and high-contrast requests skip it (accessibility beats
-    // brand), exactly the original's tokens_fn rule.
-    .theme_accent = "#df2670",
-    // The committed album covers, read once at launch and registered on
-    // the installing frame (the generated wiring's asset channel): the id
-    // IS the `ImageId` the markup avatar bindings reference — album ids
-    // here, mirroring the Zig original's registration. JPEG decodes
-    // through the platform codec; codec-less hosts (the null test
-    // platform) skip honestly and every cover keeps its initials.
-    .assets = .{
-        .images = .{
-            .{ .id = 1, .path = "assets/art/exit-signs.jpg" },
-            .{ .id = 2, .path = "assets/art/blue-season.jpg" },
-            .{ .id = 3, .path = "assets/art/second-nature.jpg" },
-            .{ .id = 4, .path = "assets/art/no-good-way-out.jpg" },
-            .{ .id = 5, .path = "assets/art/glass-flowers.jpg" },
-            .{ .id = 6, .path = "assets/art/night-bloom.jpg" },
-            .{ .id = 7, .path = "assets/art/motion-picture.jpg" },
-            .{ .id = 8, .path = "assets/art/channel-surfing.jpg" },
-        },
-    },
-    .shell = .{
-        .windows = .{
-            .{
-                .label = "main",
-                .title = "Native SDK Soundboard TS",
-                .width = 1080,
-                .height = 720,
-                // The same floor the Zig original's layout audit sweep
-                // proves clean (header, four-column album rack, and the
-                // now-playing bar): the window stops resizing here
-                // instead of clipping the grid.
-                .min_width = 1056,
-                .min_height = 600,
-                .restore_policy = "center_on_primary",
-                // Tall hidden-inset titlebar, the Zig original's window
-                // chrome: the markup header is the drag surface and pads
-                // past the traffic lights via the core's chromeMsg
-                // channel.
-                .titlebar = "hidden_inset_tall",
-                .views = .{
-                    .{ .label = "soundboard-canvas", .kind = "gpu_surface", .fill = true, .role = "Music library canvas", .accessibility_label = "Soundboard music library", .gpu_backend = "metal", .gpu_pixel_format = "bgra8_unorm", .gpu_present_mode = "timer", .gpu_alpha_mode = "opaque", .gpu_color_space = "srgb", .gpu_vsync = true },
-                },
-            },
-        },
-    },
-    .security = .{
-        .navigation = .{
-            .allowed_origins = .{ "zero://app", "zero://inline" },
-            .external_links = .{ .action = "deny" },
-        },
-    },
-    .web_engine = "system",
-}
diff --git a/examples/soundboard/.vscode/settings.json b/examples/soundboard/.vscode/settings.json
deleted file mode 100644
index ff05c91e9..000000000
--- a/examples/soundboard/.vscode/settings.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-    "files.associations": { "*.native": "html" }
-}
diff --git a/examples/soundboard/README.md b/examples/soundboard/README.md
index 7ef2f17e2..b2e3b883a 100644
--- a/examples/soundboard/README.md
+++ b/examples/soundboard/README.md
@@ -1,62 +1,44 @@
 # Native SDK soundboard example
 
-A music-library browser built to showcase native-rendered Native SDK UI: an album grid with real cover art through the runtime image pipeline, track lists with native context menus, a now-playing bar with real audio playback, transport controls and a live seek slider, and search with the field's built-in clear affordance. The custom light/dark theme follows the system appearance live — there is no in-window theme control.
+The soundboard music library authored entirely in **TypeScript + Native markup**. Zero Zig: the logic tier is the app-core subset under `src/`, compiled to native code at build time; `src/app.native` is the whole view tier and `app.zon` the manifest plus the committed cover assets. The build detects `src/core.ts` in the tree and stages the wiring itself; no JS runtime ships in the binary.
 
-**The catalog is real data.** `src/music_manifest.zon` is a committed manifest generated by `tools/prepare-example-music.sh`; the model imports it as a typed value and flattens the albums and tracks at comptime. Albums carry a variable number of tracks, so each album records where its run starts and how long it is — nothing assumes a fixed stride.
+The core is a multi-module reference split of the app-core subset's import-graph support:
 
-**Playback is real audio.** Pressing play issues `fx.playAudio` for the track's file through the runtime audio effect family; the load acknowledgment, coarse position ticks, the one completion at natural end, and failures all arrive as typed messages through the ordinary update path. Positions are the player's real clock; the player's own duration reports are estimates for this catalog (the prepare script strips the seek header, so a decoder can only extrapolate from bitrate — a mid-stream guess can be minutes off) and never replace the manifest's measured duration, so the transport's total always matches the track list. The scrubber moves every frame, not every tick: while playing, `on_frame` feeds the model a frame clock that advances the rendered position between the ~500 ms position ticks (ticks correct it, never rewinding it mid-motion), and the loop starves itself the moment playback stops — pause, and zero frames present. The audio files themselves are gitignored, but nothing needs preparing to try this: the committed manifest carries a hosted `.url_base`, so a fresh clone streams every track on demand (next paragraph). `tools/prepare-example-music.sh` is the path for offline local files and for regenerating or self-hosting the catalog: it prepares the mp3s under `assets/music/` from a source library and rewrites the manifest (local files always win over the stream). With streaming explicitly disabled (`NATIVE_SDK_MUSIC_URL_BASE` set empty) and no local files, a play attempt degrades honestly: the now-playing bar shows "music assets not prepared — run tools/prepare-example-music.sh", browsing keeps working fully, and the deterministic test suite passes with no audio files present.
+- `src/core.ts` — the entry module: Model, Msg, update, subscriptions, the wiring channels, and every exported binding helper (the app's public face — markup and node both see exactly its exports).
+- `src/library.ts` — the committed music catalog tables and the pure catalog/presentation helpers over them.
+- `src/player.ts` — the pure playback state machine (track starts, queue advance, the launch-override stream rule); type-imports `Model` from the entry (the legal back-edge shape).
+- `@native-sdk/core/text` — the SDK's byte-splice text engine, compiled in for the search field's caret/selection/IME fidelity.
 
-**Tracks stream on demand out of the box.** The committed manifest's `.url_base` points at the hosted mirror of the prepared catalog — the exact bytes the prepare script writes — and `NATIVE_SDK_MUSIC_URL_BASE` overrides it at launch (a locally served pack works: `python3 -m http.server` over `assets/music/`'s parent; set it empty to disable streaming entirely). A missing local file streams the track instead of failing: playback starts while the bytes are still arriving (the artist line reads "buffering…" while the stream stalls — an honest state distinct from playing), and the same bytes fill a local cache so the next play of that track is local and instant. The cache lives at `~/Library/Caches/soundboard/audio/` (the platform caches convention), keyed by URL hash and size-verified against the manifest's per-track `.bytes` — a partial or stale entry never plays; delete that directory to clear the cache. Offline with a cold cache, the bar says "stream unavailable — check the connection and try again" instead of blaming the prepare script.
-
-## Authoring split (markup-first, two shells)
-
-One codebase carries two shells: the content pieces are shared functions and fragments, and the root view switches the composition on the model's form factor: the HOST-REPORTED size class when one arrived over the window-chrome channel (the iOS host reports its horizontal size class there), with the width derivation as the fallback (compact strictly below the desktop window's 1056pt min content width — the floor the desktop layout audit proves clean). The host report landed inside `Model.formFactor` without reshaping any view, exactly as designed.
-
-- **Shared content** (`src/view.zig`) — the album tile, the adaptive grid body and its width→columns rule (each shell states its own tile minimum), the track row (content shared, gestures per shell), the album detail cover and heading block, section headings, the empty state, and the compiled `album_title.native` fragment. The now-playing metadata (`nowPlayingTitle`/`nowPlayingArtist`/`nowPlayingCover`/`playPauseIcon`) is shared at the model level: the desktop markup bar and the compact mini bar bind the same functions, so the status surface (assets notice, stream notice, buffering) reads identically in both shells.
-- **Desktop shell** — `src/header.native` (the flush `<button-group>` switcher, the search field, the window-drag titlebar band padded past the OS window controls via `on_chrome`) and `src/nowplaying.native` (circular cover, title/artist, prev/play/next, seek slider, time labels, queue badge), composed around the shared content. Desktop gestures: click selects, double-click/Enter plays, right/ctrl-click opens the native context menus.
-- **Compact shell** (`src/view.zig`, Zig — shell branching is Zig's job; the closed markup grammar has no conditionals) — a single-column phone composition: a stacked touch header (the same switcher and search binding at lg control size, search on its own full-width row), the albums grid at a 150pt tile floor (two columns on mainstream phone widths), the album detail as a full-surface page with model-driven back navigation, and a now-playing MINI BAR (cover thumb, title/artist, play/pause) that stays visible whenever a track is loaded or a playback notice needs a surface. Touch gestures: one tap plays a row; no hover affordances, no double-tap, no context menus (the phone hosts model no long-press), no window-drag regions. The shell pads all four safe-area edges from the window-chrome channel (`on_chrome` — the iOS host republishes the safe areas there), so content clears the Dynamic Island and the home indicator.
-- `src/model.zig` — the typed manifest import and its comptime flattening, playback/search/queue/appearance state, the controlled scroll offsets (each region's `on_scroll` stores the applied offset and the view echoes it back, so a rebuild mid-gesture never resets a list), the form-factor rule, and `update`. Both shells read one model and one Msg set, so the same Msg journal replays deterministically into either shell (pinned by a test).
-- `src/theme.zig` — the Geist pack with the accent moved to the pack's pink scale (one brand decision layered through `DesignTokenOverrides`); high-contrast requests take the pack's own loud register untouched and reduce-motion zeroes the motion tokens.
-
-`src/main.zig` carries both entries: `main` runs the desktop scene (window constants, tall hidden-inset titlebar), and `initModel`/`mobileOptions` compile the same app into the mobile embed library (`native dev --target ios`) on the canonical full-screen mobile scene — no desktop window constant constrains the phone, and the mobile boot model seeds a phone-portrait canvas width so the installing frame already composes the compact shell.
-
-All `.native` files compile at comptime (`canvas.CompiledMarkupView`); the test suite additionally builds the header and now-playing bars through the runtime interpreter and asserts engine parity.
-
-## Cover art
-
-The committed covers in `src/art/` are 512px JPEGs, one per album, named by the manifest's `art` slots and embedded at comptime. Live macOS decodes them through the platform codec seam; the null platform's strict test decoder speaks only the deterministic PNG subset, so under `-Dplatform=null` registration fails and every album degrades to its initials fallback — the honest codec-less-host state the suite pins. `init_fx` registers the covers at boot; a failed decode leaves that album on initials, never a broken boot.
-
-## Fixed capacities
-
-- The manifest's albums and tracks, flattened at comptime (variable tracks per album).
-- One registered cover image per album, of the runtime's 16 image slots.
-- 16-entry play-next queue; a full queue drops the request and counts it.
-- 48-byte search buffer.
-- Two context-menu items per track row: the all-songs list mounts every catalog track as a row, comfortably inside the 512-item per-view budget.
-- The widget tree peaks in the all-songs list (one row per catalog track), held under 768 nodes of the 1024 per-view budget by a test.
-
-## Run
+Everything the Zig soundboard's core does is here: the committed music catalog (the same `music_manifest.zon` data, flattened into rodata tables), REAL audio playback through `Cmd.audioPlay` with the engine's source cascade (prepared local file first, the hosted URL as the streaming fallback, size-verified against the manifest's per-track bytes and cached under the platform caches directory), play/pause/prev/next with album wrap, scrub-to-seek on the transport slider, the play-next queue with its context-menu entry, Copy Title onto the clipboard, live search over albums/artists/titles through the full byte-splice text engine, the duration rule (the platform player's estimate never replaces the manifest's measured total), the never-rewind rendered clock, the honest degraded states (stream notice, buffering line, and the local-only assets notice under an empty `NATIVE_SDK_MUSIC_URL_BASE`), registered album covers, the width-adaptive album grid, and the media-key fallback.
 
 ```sh
-native dev
+native dev                                  # run the real app
+native dev --core --script dev-script.ndjson  # the core-logic loop under node - no renderer
+native check                                # subset-check the core's import graph + markup + app.zon
+native test -Dplatform=null                 # the hermetic suite
 ```
 
-That is the whole setup: tracks stream from the hosted catalog and cache locally on first play. To play from local files instead (offline, or your own catalog), run `tools/prepare-example-music.sh` from the repo root — it prepares the gitignored mp3s under `assets/music/` from a source library, and local files always win over the stream.
+The end-to-end proof battery lives in the SDK repo (`tests/ts-core/soundboard_e2e_tests.zig`, run by `zig build test-ts-core-e2e`): it drives this example's real core and shipping markup headlessly through playback, scrub-to-seek, auto-advance, the queue, controlled scroll, the wiring channels (frame width, keys, chrome, covers, the env override), search, clipboard, record→replay, a dispatch-latency budget, the transport bar's layout across a rebuild storm, the theme accent, and the quiet-tile hover posture. An env-gated `PARITY_SHOTS` test in the same suite renders the side-by-side proof states (grid, album detail, songs at two widths) through the deterministic reference renderer for pixel comparison against the Zig original.
 
-Right/ctrl-click a track row for the native context menu; Copy Title pipes the title through `pbcopy`. The theme follows the system appearance live — flip the OS to dark and the studio palette follows.
+## The wiring channels this port uses
 
-Track rows follow the desktop list convention: a single click SELECTS a row (the accent-filled selection), a double click plays it. `Up`/`Down` move the selection — never playback, and never the focus ring (outlines belong to Tab) — and `Enter` plays the selected track. `Space` toggles play/pause from anywhere — the media-app convention, carried by the app-level key fallback (`on_key`). A RING-focused widget wins first: space on a tabbed-to track row selects it, Enter plays it, a focused header segment switches, and a focused search field keeps typing spaces (the text-entry exception is structural, by widget kind); a quietly focused row — the state a click leaves behind — stays transparent, so clicking around the library never re-aims the spacebar.
+The generated wiring detects each channel from an export in `core.ts` (export exists → wired) or from `app.zon`:
 
-Run the deterministic suite (dispatch and playback through the fake effects executor, the cover decode/register/draw path, theming, markup engine parity, layout budgets — hermetic, no audio files needed):
+- **`frameMsg(model, frame)`** — presented-frame widths land in the model, and `gridColumns` re-derives the Zig original's width→columns rule (232pt tile floor, 24pt padding, 12pt gap) on every rebuild. The core returns `null` for same-width frames, so the idle law holds.
+- **`keyMsg(key)`** — the app-level key fallback: Space toggles the transport, the left/right arrows are previous/next track. The runtime's precedence rule applies first, so the search field keeps typing and a focused slider keeps its arrows.
+- **`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 (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.
 
-```sh
-native test -Dplatform=null
-```
+## Where this port still deliberately differs from the Zig soundboard
 
-Verify live through the automation harness:
+Every remaining divergence is a decided posture, listed here on purpose. The former titlebar, grid-spacing, hover-wash, selected-row, and accent rows are CLOSED: the port now adopts the original's hidden-inset titlebar through the chromeMsg channel, sizes the album rack with the original's exact width rule, keeps image-forward tiles quiet on hover (`quiet-hover`), wears the inverted accent register on the loaded row, and takes the original's pink accent through `app.zon`'s `theme_accent`.
 
-```sh
-native build -Dautomation=true
-./zig-out/bin/soundboard &
-native automate assert 'gpu_nonblank=true' 'role=listitem name="Exit Signs by Harbor Sleep"' 'role=button name="Play or pause"'
-```
+- **No volume control — resolved for 1:1, decision flagged.** The Zig original ships no volume UI, so the port's stepper (model state, Msg arms, the player-module ladder) was REMOVED in one revertable commit; the engine's `audioSetVolume` verb stays proven by the SDK repo's host e2e fixture. FLAG: the other resolution — adding volume to the Zig original instead — reverts that one commit and restores a proven implementation.
+- **The rendered clock ticks at 250ms, not per frame.** Decided: the declarative `Sub.timer` that exists exactly while audio moves is the TS-idiomatic clock (the same motion gating as the original's `on_frame` clock, corrected by the player's position events under the same never-rewind rule). The frame channel is wired for the grid's width, but a per-frame clock arm would trade the idle-law simplicity of the timer for imperceptible smoothness on a text clock.
+- **Press plays.** This TypeScript variant keeps the touch convention — one press plays — while Native markup also supports the desktop `on-press` select + `on-double-press` play pairing. The arrow-key selection register goes with the one-press design; since the original's play gesture also selects, the LOADED row wears the same inverted accent register in both apps, and the two are visually 1:1 after any play.
+- **Cover corners: 8/10pt vs the radius tokens' 6pt.** The original rounds tile covers at 8pt and the detail cover at 10pt through numeric builder radii; markup's `radius` attribute deliberately takes radius TOKENS only, and the geist pack's sm/md/lg all resolve to 6pt. Kept on the token discipline for now — a per-value radius (or richer style-token bindings) is the flagged follow-up; the pixel cost is a 2–4pt corner difference on cover art.
+- **The bar's listening mark is the built-in `music` icon, not `app:waveform`.** The original registers its own waveform SVG through Zig (`registerAppIcons`); the generated wiring has no app-icon manifest channel yet — the flagged follow-up (an `app.zon` icons surface beside `.assets.images`).
+- **Copy Title is fire-and-forget.** `Cmd.clipboardWrite` has no result routing, so the model counts requests, not confirmed copies.
+- **Desktop only.** TypeScript cores build desktop apps today; the compact phone shell is the Zig original's.
diff --git a/examples/soundboard/app.zon b/examples/soundboard/app.zon
index 79719f87d..e01a58434 100644
--- a/examples/soundboard/app.zon
+++ b/examples/soundboard/app.zon
@@ -2,16 +2,44 @@
     .id = "dev.native_sdk.soundboard",
     .name = "soundboard",
     .display_name = "Soundboard",
-    .description = "A native music library: albums, songs, search, and a playback bar.",
+    .description = "The soundboard music library authored entirely in TypeScript + Native markup.",
     .version = "0.1.0",
     .platforms = .{"macos"},
-    .permissions = .{ "view", "command" },
+    // The clipboard permission covers the Copy Title context action
+    // (Cmd.clipboardWrite); audio playback rides the platform audio
+    // service and needs no bridge permission.
+    .permissions = .{ "view", "clipboard" },
     .capabilities = .{ "native_views", "gpu_surfaces" },
-    // The built-in pack the app's tokens resolve (theme.zig states the
-    // same choice through `ThemeOptions.pack` — the app owns its tokens
-    // via `tokens_fn`, so this channel is the manifest's statement of
-    // record, validated by `native check` against the known pack names).
+    // The same built-in pack the Zig soundboard's tokens resolve. A TS app
+    // owns no tokens_fn, so this manifest channel IS the theme: the stock
+    // tokens compose the pack with the live system appearance (light/dark
+    // follows the OS with no core code).
     .theme = "geist",
+    // The Zig original's one brand statement (theme.zig's pink_800,
+    // hsl(336, 74%, 51%)), stated through the manifest accent channel:
+    // the wiring layers the accent identity over the pack — accent +
+    // white knockout ink, the focus ring, and the seek slider's filled
+    // range — and high-contrast requests skip it (accessibility beats
+    // brand), exactly the original's tokens_fn rule.
+    .theme_accent = "#df2670",
+    // The committed album covers, read once at launch and registered on
+    // the installing frame (the generated wiring's asset channel): the id
+    // IS the `ImageId` the markup avatar bindings reference — album ids
+    // here, mirroring the Zig original's registration. JPEG decodes
+    // through the platform codec; codec-less hosts (the null test
+    // platform) skip honestly and every cover keeps its initials.
+    .assets = .{
+        .images = .{
+            .{ .id = 1, .path = "assets/art/exit-signs.jpg" },
+            .{ .id = 2, .path = "assets/art/blue-season.jpg" },
+            .{ .id = 3, .path = "assets/art/second-nature.jpg" },
+            .{ .id = 4, .path = "assets/art/no-good-way-out.jpg" },
+            .{ .id = 5, .path = "assets/art/glass-flowers.jpg" },
+            .{ .id = 6, .path = "assets/art/night-bloom.jpg" },
+            .{ .id = 7, .path = "assets/art/motion-picture.jpg" },
+            .{ .id = 8, .path = "assets/art/channel-surfing.jpg" },
+        },
+    },
     .shell = .{
         .windows = .{
             .{
@@ -19,13 +47,17 @@
                 .title = "Native SDK Soundboard",
                 .width = 1080,
                 .height = 720,
-                // The floor the layout audit sweep proves clean (the
-                // fixed four-column album rack plus header and
+                // The same floor the Zig original's layout audit sweep
+                // proves clean (header, four-column album rack, and the
                 // now-playing bar): the window stops resizing here
                 // instead of clipping the grid.
                 .min_width = 1056,
                 .min_height = 600,
                 .restore_policy = "center_on_primary",
+                // Tall hidden-inset titlebar, the Zig original's window
+                // chrome: the markup header is the drag surface and pads
+                // past the traffic lights via the core's chromeMsg
+                // channel.
                 .titlebar = "hidden_inset_tall",
                 .views = .{
                     .{ .label = "soundboard-canvas", .kind = "gpu_surface", .fill = true, .role = "Music library canvas", .accessibility_label = "Soundboard music library", .gpu_backend = "metal", .gpu_pixel_format = "bgra8_unorm", .gpu_present_mode = "timer", .gpu_alpha_mode = "opaque", .gpu_color_space = "srgb", .gpu_vsync = true },
@@ -40,5 +72,4 @@
         },
     },
     .web_engine = "system",
-    .cef = .{ .dir = "third_party/cef/macos", .auto_install = false },
 }
diff --git a/examples/soundboard-ts/assets/art/blue-season.jpg b/examples/soundboard/assets/art/blue-season.jpg
similarity index 100%
rename from examples/soundboard-ts/assets/art/blue-season.jpg
rename to examples/soundboard/assets/art/blue-season.jpg
diff --git a/examples/soundboard-ts/assets/art/channel-surfing.jpg b/examples/soundboard/assets/art/channel-surfing.jpg
similarity index 100%
rename from examples/soundboard-ts/assets/art/channel-surfing.jpg
rename to examples/soundboard/assets/art/channel-surfing.jpg
diff --git a/examples/soundboard-ts/assets/art/exit-signs.jpg b/examples/soundboard/assets/art/exit-signs.jpg
similarity index 100%
rename from examples/soundboard-ts/assets/art/exit-signs.jpg
rename to examples/soundboard/assets/art/exit-signs.jpg
diff --git a/examples/soundboard-ts/assets/art/glass-flowers.jpg b/examples/soundboard/assets/art/glass-flowers.jpg
similarity index 100%
rename from examples/soundboard-ts/assets/art/glass-flowers.jpg
rename to examples/soundboard/assets/art/glass-flowers.jpg
diff --git a/examples/soundboard-ts/assets/art/motion-picture.jpg b/examples/soundboard/assets/art/motion-picture.jpg
similarity index 100%
rename from examples/soundboard-ts/assets/art/motion-picture.jpg
rename to examples/soundboard/assets/art/motion-picture.jpg
diff --git a/examples/soundboard-ts/assets/art/night-bloom.jpg b/examples/soundboard/assets/art/night-bloom.jpg
similarity index 100%
rename from examples/soundboard-ts/assets/art/night-bloom.jpg
rename to examples/soundboard/assets/art/night-bloom.jpg
diff --git a/examples/soundboard-ts/assets/art/no-good-way-out.jpg b/examples/soundboard/assets/art/no-good-way-out.jpg
similarity index 100%
rename from examples/soundboard-ts/assets/art/no-good-way-out.jpg
rename to examples/soundboard/assets/art/no-good-way-out.jpg
diff --git a/examples/soundboard-ts/assets/art/second-nature.jpg b/examples/soundboard/assets/art/second-nature.jpg
similarity index 100%
rename from examples/soundboard-ts/assets/art/second-nature.jpg
rename to examples/soundboard/assets/art/second-nature.jpg
diff --git a/examples/soundboard-ts/dev-script.ndjson b/examples/soundboard/dev-script.ndjson
similarity index 100%
rename from examples/soundboard-ts/dev-script.ndjson
rename to examples/soundboard/dev-script.ndjson
diff --git a/examples/system-monitor-ts/package.json b/examples/soundboard/package.json
similarity index 89%
rename from examples/system-monitor-ts/package.json
rename to examples/soundboard/package.json
index fd9801412..07af7eece 100644
--- a/examples/system-monitor-ts/package.json
+++ b/examples/soundboard/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "system-monitor-ts",
+  "name": "soundboard",
   "private": true,
   "description": "Editor and versioning surface only: stock TypeScript tooling resolves @native-sdk/core from here. The native CLI never reads it and builds with node_modules absent.",
   "dependencies": {
diff --git a/examples/soundboard/src/album_title.native b/examples/soundboard/src/album_title.native
deleted file mode 100644
index 8b99289fc..000000000
--- a/examples/soundboard/src/album_title.native
+++ /dev/null
@@ -1,8 +0,0 @@
-<!-- The album detail page's heading: a markup SPAN PARAGRAPH whose one
-     bold run scales to 1.9x the body size — the same TextSpan channels
-     the Zig builder used before span scale reached markup. Compiled at
-     comptime (canvas.CompiledMarkupView) like the header and now-playing
-     fragments and composed as an ordinary child of the Zig detail
-     column; the label mirrors the visible title so assistive tech
-     announces the heading by name. -->
-<text label="{openAlbumTitle}"><span weight="bold" scale="1.9">{openAlbumTitle}</span></text>
diff --git a/examples/soundboard-ts/src/app.native b/examples/soundboard/src/app.native
similarity index 100%
rename from examples/soundboard-ts/src/app.native
rename to examples/soundboard/src/app.native
diff --git a/examples/soundboard/src/art/blue-season.jpg b/examples/soundboard/src/art/blue-season.jpg
deleted file mode 100644
index 850f92178..000000000
Binary files a/examples/soundboard/src/art/blue-season.jpg and /dev/null differ
diff --git a/examples/soundboard/src/art/channel-surfing.jpg b/examples/soundboard/src/art/channel-surfing.jpg
deleted file mode 100644
index af6b98987..000000000
Binary files a/examples/soundboard/src/art/channel-surfing.jpg and /dev/null differ
diff --git a/examples/soundboard/src/art/exit-signs.jpg b/examples/soundboard/src/art/exit-signs.jpg
deleted file mode 100644
index d7d2d6237..000000000
Binary files a/examples/soundboard/src/art/exit-signs.jpg and /dev/null differ
diff --git a/examples/soundboard/src/art/glass-flowers.jpg b/examples/soundboard/src/art/glass-flowers.jpg
deleted file mode 100644
index c0b15917b..000000000
Binary files a/examples/soundboard/src/art/glass-flowers.jpg and /dev/null differ
diff --git a/examples/soundboard/src/art/motion-picture.jpg b/examples/soundboard/src/art/motion-picture.jpg
deleted file mode 100644
index 6d8db8af8..000000000
Binary files a/examples/soundboard/src/art/motion-picture.jpg and /dev/null differ
diff --git a/examples/soundboard/src/art/night-bloom.jpg b/examples/soundboard/src/art/night-bloom.jpg
deleted file mode 100644
index 41ed7018b..000000000
Binary files a/examples/soundboard/src/art/night-bloom.jpg and /dev/null differ
diff --git a/examples/soundboard/src/art/no-good-way-out.jpg b/examples/soundboard/src/art/no-good-way-out.jpg
deleted file mode 100644
index a59211aea..000000000
Binary files a/examples/soundboard/src/art/no-good-way-out.jpg and /dev/null differ
diff --git a/examples/soundboard/src/art/second-nature.jpg b/examples/soundboard/src/art/second-nature.jpg
deleted file mode 100644
index 1097f7f8b..000000000
Binary files a/examples/soundboard/src/art/second-nature.jpg and /dev/null differ
diff --git a/examples/soundboard-ts/src/core.ts b/examples/soundboard/src/core.ts
similarity index 99%
rename from examples/soundboard-ts/src/core.ts
rename to examples/soundboard/src/core.ts
index eb2ddce72..bd7d3f7d3 100644
--- a/examples/soundboard-ts/src/core.ts
+++ b/examples/soundboard/src/core.ts
@@ -1,4 +1,4 @@
-// soundboard-ts core: the soundboard's whole logic tier in the TypeScript
+// soundboard core: the soundboard's whole logic tier in the TypeScript
 // app-core subset — playback through the audio Cmd stream, search, the
 // play-next queue, and the clipboard copy. Zero Zig in this tree: the build
 // transpiles this module and its imports, src/app.native is the whole view,
diff --git a/examples/soundboard/src/header.native b/examples/soundboard/src/header.native
deleted file mode 100644
index dd6f6247d..000000000
--- a/examples/soundboard/src/header.native
+++ /dev/null
@@ -1,39 +0,0 @@
-<!-- The soundboard header bar: the library switcher and search. Compiled
-     at comptime (canvas.CompiledMarkupView) and composed under the Zig
-     root view next to the Zig-only sections (album grid, track rows) the
-     closed markup grammar cannot express. The app follows the system
-     appearance (on_appearance); there is no in-window theme control.
-     The Albums/Songs switcher is a flush BUTTON GROUP (gap 0 attaches
-     the segments into one bar with shared seams); each segment stays an
-     ordinary button whose selected binding fills the active choice with
-     the accent, so the pair still reads as an exclusive choice. The
-     search field carries the built-in trailing clear affordance whenever
-     it holds text — no external Clear button. -->
-<column>
-  <!-- The header IS the titlebar (tall hidden-inset chrome): it is the
-       window's drag surface, leads with a spacer sized to the traffic
-       lights via on_chrome, and matches its height to the titlebar band
-       so its controls and the lights share a centerline. -->
-  <row height="{header_height}" padding="12" gap="12" cross="center" background="surface" window-drag="true" label="Soundboard header">
-    <spacer width="{chrome_leading}" />
-    <!-- Band contents: only working controls — the library switcher
-         leads after the window controls, search holds the trailing
-         corner, and the stretch between them stays bare drag surface. -->
-    <!-- Default-variant segments on purpose: the default register is
-         the one whose persistent `selected` state takes the accent fill
-         (outline/ghost show currency through chrome alone, which reads
-         as nothing in a two-segment switcher). -->
-    <button-group>
-      <button size="sm" selected="{albumsShowing}" on-press="show_albums">Albums</button>
-      <button size="sm" selected="{songsShowing}" on-press="show_songs">Songs</button>
-    </button-group>
-    <spacer grow="1" />
-    <!-- One size register per row: search matches the sm tab buttons so
-         the band's controls share one height. -->
-    <search-field size="sm" text="{search}" placeholder="Search albums, artists, songs…" width="280" on-input="search_edit" label="Search library" />
-    <!-- The leading spacer's trailing twin: zero on macOS, sized to the
-         min/max/close cluster on Windows so search clears the buttons. -->
-    <spacer width="{chrome_trailing}" />
-  </row>
-  <separator />
-</column>
diff --git a/examples/soundboard/src/icons/albums.svg b/examples/soundboard/src/icons/albums.svg
deleted file mode 100644
index bf7ccd7b9..000000000
--- a/examples/soundboard/src/icons/albums.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/></svg>
diff --git a/examples/soundboard/src/icons/waveform.svg b/examples/soundboard/src/icons/waveform.svg
deleted file mode 100644
index 062d3f306..000000000
--- a/examples/soundboard/src/icons/waveform.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="10" x2="4" y2="14"/><line x1="8" y1="7" x2="8" y2="17"/><line x1="12" y1="4" x2="12" y2="20"/><line x1="16" y1="7" x2="16" y2="17"/><line x1="20" y1="10" x2="20" y2="14"/></svg>
diff --git a/examples/soundboard-ts/src/library.ts b/examples/soundboard/src/library.ts
similarity index 99%
rename from examples/soundboard-ts/src/library.ts
rename to examples/soundboard/src/library.ts
index 655ea7288..4bded7bd6 100644
--- a/examples/soundboard-ts/src/library.ts
+++ b/examples/soundboard/src/library.ts
@@ -1,4 +1,4 @@
-// soundboard-ts library module: the committed music catalog and the pure
+// soundboard library module: the committed music catalog and the pure
 // catalog/presentation helpers over it — the data half of the core, one
 // import away from core.ts. The catalog is the same real data the Zig
 // soundboard ships (examples/soundboard/src/music_manifest.zon), flattened
diff --git a/examples/soundboard/src/main.zig b/examples/soundboard/src/main.zig
deleted file mode 100644
index 3b9e193f1..000000000
--- a/examples/soundboard/src/main.zig
+++ /dev/null
@@ -1,503 +0,0 @@
-//! soundboard: a music-library browser showcasing native-rendered
-//! Native SDK UI — the committed music catalog with real cover art
-//! through the runtime image pipeline, track lists with native context
-//! menus, a now-playing bar with REAL audio playback through the runtime
-//! audio effect family, search, and a custom light/dark theme.
-//!
-//! Authoring split (markup-first, two shells): the header and
-//! now-playing bars are `.native` views compiled at comptime; the album
-//! grid, album detail, and track rows are Zig views because they need
-//! what the closed markup grammar deliberately excludes — square cover
-//! images, grid column counts, scaled paragraph headings, and per-row
-//! native context menus. `src/view.zig` composes both kinds under one
-//! root — the DESKTOP shell — and recomposes the same shared content
-//! pieces into a COMPACT shell for phone-class surfaces (the root view
-//! switches on the model's form factor: host-reported size class when
-//! present, width-derived as the fallback). Widget identity,
-//! dispatch, and theming behave exactly as in a single-source view in
-//! both shells.
-
-const std = @import("std");
-const builtin = @import("builtin");
-const runner = @import("runner");
-const native_sdk = @import("native_sdk");
-
-pub const panic = std.debug.FullPanic(native_sdk.debug.capturePanic);
-
-const canvas = native_sdk.canvas;
-const geometry = native_sdk.geometry;
-
-const model_mod = @import("model.zig");
-const theme = @import("theme.zig");
-const view_mod = @import("view.zig");
-
-pub const Model = model_mod.Model;
-pub const Msg = model_mod.Msg;
-pub const update = model_mod.update;
-pub const rootView = view_mod.rootView;
-
-pub const canvas_label = "soundboard-canvas";
-pub const window_width: f32 = 1080;
-pub const window_height: f32 = 720;
-/// Content min-size floor the window enforces: the smallest size where
-/// the header, album grid, and now-playing rail lay out without clipping
-/// or overlap — proven by the layout audit sweep in tests.zig, which
-/// sweeps from exactly this floor. The model owns the value because it
-/// doubles as the pre-first-frame `canvas_width` default the adaptive
-/// album grid derives from.
-pub const window_min_width: f32 = model_mod.min_canvas_width;
-pub const window_min_height: f32 = 600;
-
-const app_permissions = [_][]const u8{ native_sdk.security.permission_command, native_sdk.security.permission_view };
-const shell_views = [_]native_sdk.ShellView{
-    .{ .label = canvas_label, .kind = .gpu_surface, .fill = true, .role = "Music library canvas", .accessibility_label = "Soundboard music library", .gpu_backend = .metal, .gpu_pixel_format = .bgra8_unorm, .gpu_present_mode = .timer, .gpu_alpha_mode = .@"opaque", .gpu_color_space = .srgb, .gpu_vsync = true },
-};
-const shell_windows = [_]native_sdk.ShellWindow{.{
-    .label = "main",
-    .title = "Native SDK Soundboard",
-    .width = window_width,
-    .height = window_height,
-    .min_width = window_min_width,
-    .min_height = window_min_height,
-    // Tall hidden-inset titlebar (declared in app.zon too, which threads
-    // it through the STARTUP window create): the header bar IS the
-    // titlebar — it pads its leading edge past the traffic lights via
-    // `on_chrome` and is the window's drag surface (`window-drag` in
-    // header.native).
-    .titlebar = .hidden_inset_tall,
-    .views = &shell_views,
-}};
-pub const shell_scene: native_sdk.ShellConfig = .{ .windows = &shell_windows };
-
-// -------------------------------------------------------------- app icons
-
-/// The app's own vector icon, parsed at comptime from the common
-/// stroke-icon dialect (24x24, stroke-width 2, currentColor). Lives
-/// under src/ so `@embedFile` reaches it from the module root (and the
-/// contract's source hash covers icon changes-adjacent code).
-const waveform_icon = canvas.svg_icon.parseComptime(@embedFile("icons/waveform.svg"));
-
-/// The album-grid glyph for the declared mobile tab bar (a 2x2 tile
-/// grid): tab icons come from the registered app-icon vocabulary, so
-/// the projected native bar tints the app's own artwork.
-const albums_icon = canvas.svg_icon.parseComptime(@embedFile("icons/albums.svg"));
-
-/// The registered icon table: ONE declaration feeds boot-time
-/// registration (`registerIcons`, called from main and the test
-/// harness) AND the model contract's `app_icons` list (the emit step
-/// reflects this decl), so markup `app:<name>` references are verified
-/// by `native check` against exactly what the app registers.
-pub const app_icons = [_]canvas.icons.Entry{
-    .{ .name = "waveform", .icon = &waveform_icon },
-    .{ .name = "albums", .icon = &albums_icon },
-};
-
-/// Install the app icon table; once, before views build (main does it
-/// first thing, and the tests' harness setup mirrors it).
-pub fn registerIcons() void {
-    canvas.icons.registerAppIcons(&app_icons);
-}
-
-// ------------------------------------------------------------------ covers
-
-/// The committed album art, embedded at comptime from the paths the
-/// music manifest names (relative to src/, like the manifest says).
-/// Index = album id - 1; the registered `ImageId` equals the album id.
-/// Albums whose manifest slot is null carry no bytes and simply keep
-/// their initials fallback.
-pub const cover_bytes: [model_mod.albums.len]?[]const u8 = blk: {
-    var out: [model_mod.albums.len]?[]const u8 = undefined;
-    for (model_mod.albums, 0..) |album, index| {
-        out[index] = if (album.art) |art_path| @embedFile(art_path) else null;
-    }
-    break :blk out;
-};
-
-/// Boot effect: decode and register every committed cover. Registration
-/// is synchronous on the effects channel; ids reach the model only on
-/// success, so a failed decode leaves that album on its initials
-/// fallback — a bad asset can never break presentation. The art is JPEG:
-/// live macOS decodes it through the platform codec, while the null
-/// platform's strict test decoder (a PNG subset) cannot — under tests
-/// every album degrades to initials honestly, which the suite pins.
-pub fn boot(model: *Model, fx: *model_mod.Effects) void {
-    for (cover_bytes, 1..) |maybe_bytes, album_id| {
-        const bytes = maybe_bytes orelse continue;
-        _ = fx.registerImageBytes(@intCast(album_id), bytes) catch continue;
-        model.covers[album_id - 1] = @intCast(album_id);
-    }
-}
-
-// -------------------------------------------------------------------- app
-
-pub const SoundboardApp = native_sdk.UiApp(Model, Msg);
-
-pub fn soundboardOptions() SoundboardApp.Options {
-    return .{
-        .name = "soundboard",
-        .scene = shell_scene,
-        .canvas_label = canvas_label,
-        .update_fx = update,
-        .view = rootView,
-        .init_fx = boot,
-        .tokens_fn = tokensFromModel,
-        .on_appearance = onAppearance,
-        .on_chrome = onChrome,
-        .on_key = onKey,
-        .on_frame = onFrame,
-        .animations = animations,
-        .sync = sync,
-    };
-}
-
-/// The media-app keyboard conventions, all through the app-level key
-/// FALLBACK (`on_key`), so the framework's precedence rule applies
-/// before any of them fire: a RING-focused widget consumes its own keys
-/// (a tabbed-to row selects on Space and plays on Enter, a slider takes
-/// the arrows), and a focused editable field keeps typing — the
-/// text-entry exception is structural (checked by widget kind in the
-/// runtime), so the header's search field blocks all of these without
-/// this function knowing it exists. A QUIETLY focused track row (the
-/// state a click leaves behind) is transparent to keys by the
-/// framework's quiet-list-row rule, so after clicking around the
-/// library these still work app-wide:
-///   - SPACE toggles the transport;
-///   - Up/Down ARROWS move the SELECTION (the accent row), never
-///     playback and never the focus ring — outlines belong to Tab;
-///   - ENTER plays the selected track (pause toggle when it is the
-///     loaded one).
-pub fn onKey(keyboard: canvas.WidgetKeyboardEvent) ?Msg {
-    if (keyboard.modifiers.hasNavigationModifier() or keyboard.modifiers.shift) return null;
-    if (std.ascii.eqlIgnoreCase(keyboard.key, "space")) return .toggle_play;
-    if (std.ascii.eqlIgnoreCase(keyboard.key, "arrowdown")) return .select_next;
-    if (std.ascii.eqlIgnoreCase(keyboard.key, "arrowup")) return .select_previous;
-    if (std.ascii.eqlIgnoreCase(keyboard.key, "enter")) return .play_selected;
-    return null;
-}
-
-/// Chrome overlay geometry flows into the model (tall hidden-inset
-/// titlebar): delivered before the first view build and again when it
-/// changes — entering fullscreen hides the traffic lights and this goes
-/// to zero.
-pub fn onChrome(chrome: native_sdk.WindowChrome) ?Msg {
-    return .{ .chrome_changed = chrome };
-}
-
-/// Design tokens derive from the model's theme preference plus the
-/// OS-reported appearance (scheme, contrast, reduced motion).
-pub fn tokensFromModel(model: *const Model) canvas.DesignTokens {
-    return theme.tokens(model.colorScheme(), model.appearance.high_contrast, model.appearance.reduce_motion);
-}
-
-/// System appearance changes land in the model so `tokens_fn` re-derives;
-/// the `auto` theme preference follows them live.
-fn onAppearance(appearance: native_sdk.Appearance) ?Msg {
-    return Msg{ .set_appearance = appearance };
-}
-
-/// The per-frame hook carries two channels, both gated so the idle law
-/// holds (an idle app presents zero frames):
-///
-/// 1. The album grid's width channel: a WIDTH CHANGE (a live window
-///    resize, fullscreen) dispatches into the model so the grid
-///    re-derives its column count on the very next rebuild. The
-///    one-frame lag is inherent and invisible: the resize-triggered
-///    rebuild still lays out with the previous width, then the frame it
-///    presents delivers the new one and the corrected grid is on screen
-///    a frame later.
-///
-/// 2. The smooth-scrubber frame clock, WHILE PLAYING ONLY: each
-///    presented frame's timestamp advances the rendered playback clock
-///    (`advanceRenderedClock`), whose changed scrubber presents the
-///    next frame — the dispatch loop sustains itself exactly as long as
-///    audio moves. Pause, stop, buffering, or idle return null, the
-///    display list stops changing, and the frame channel starves on its
-///    own: zero frames while nothing moves, with no arming flag to
-///    forget to clear.
-pub fn onFrame(model: *const Model, frame: native_sdk.platform.GpuFrame) ?Msg {
-    if (frame.size.width != model.canvas_width) {
-        return Msg{ .canvas_resized = frame.size.width };
-    }
-    if (model.playing and model.now != null and !model.buffering) {
-        return Msg{ .frame_clock = .{ .timestamp_ns = frame.timestamp_ns, .interval_ns = frame.frame_interval_ns } };
-    }
-    return null;
-}
-
-/// The runtime owns transient slider state (`.change` carries no value);
-/// mirror the seek slider's reconciled value into the model before each
-/// update so the `.seeked` arm reads the position the user dragged to.
-fn sync(model: *Model, layout: canvas.WidgetLayoutTree) void {
-    for (layout.nodes) |node| {
-        if (node.widget.kind == .slider) model.seek_fraction = node.widget.value;
-    }
-}
-
-// ------------------------------------------------------------- animations
-
-/// Subtle track-change motion: the now-playing title and cover fade/slide
-/// in for a ~240 ms window after a track starts. The window is gated on
-/// the PLAYBACK clock (`elapsed_ms`, which restarts on every track
-/// change and advances with the player's position events), so later
-/// rebuilds do not restart it and the same Msg sequence replays the same
-/// animation set — no live clock read anywhere; reduce-motion zeroes the
-/// durations through the theme.
-const motion_window_ms: u32 = 240;
-
-pub fn animations(model: *const Model, tree: *const SoundboardApp.Ui.Tree, start_ns: u64, out: []canvas.CanvasRenderAnimation) usize {
-    if (model.now == null) return 0;
-    if (model.elapsed_ms > motion_window_ms) return 0;
-    const motion = tokensFromModel(model).motion;
-
-    var count: usize = 0;
-    if (findByLabel(tree.root, "Now playing title")) |title| {
-        count += slideIn(motion, title.id, text_slot, start_ns, out[count..]);
-    }
-    if (findByLabel(tree.root, "Now playing cover")) |cover| {
-        count += slideIn(motion, cover.id, fill_slot, start_ns, out[count..]);
-        count += slideIn(motion, cover.id, image_slot, start_ns, out[count..]);
-    }
-    return count;
-}
-
-// Widget display-list part slots (`canvas.widgetCommandPartId`).
-const fill_slot: canvas.ObjectId = 1;
-const image_slot: canvas.ObjectId = 3;
-const text_slot: canvas.ObjectId = 4;
-
-fn slideIn(motion: anytype, widget_id: canvas.ObjectId, slot: canvas.ObjectId, start_ns: u64, out: []canvas.CanvasRenderAnimation) usize {
-    if (out.len == 0) return 0;
-    out[0] = motion.animation(.{
-        .id = canvas.widgetCommandPartId(.{ .widget_id = widget_id, .slot = slot }),
-        .start_ns = start_ns,
-        .duration = .fast,
-        .from_opacity = 0.3,
-        .to_opacity = 1,
-        .from_transform = canvas.Affine.translate(0, 5),
-        .to_transform = canvas.Affine.identity(),
-    });
-    return 1;
-}
-
-fn findByLabel(widget: canvas.Widget, label: []const u8) ?canvas.Widget {
-    if (std.mem.eql(u8, widget.semantics.label, label)) return widget;
-    for (widget.children) |child| {
-        if (findByLabel(child, label)) |found| return found;
-    }
-    return null;
-}
-
-// ----------------------------------------------------------------- mobile
-
-/// Mobile embed seam: the same Model/Msg/update/view compiled into the
-/// embed static library (`zig build lib`, which `native dev --target
-/// ios` drives) with the canonical single-surface mobile scene. The
-/// desktop window constants above — size, min size, the tall titlebar —
-/// belong to the DESKTOP scene only: the mobile scene is the full-screen
-/// surface the host owns, so nothing here constrains the phone. The
-/// model seeds its pre-first-frame canvas width at a phone-portrait
-/// value so the installing frame already composes the compact shell; the
-/// first presented frame corrects it, exactly like the desktop seed.
-pub fn initModel() Model {
-    // The mobile host has no main(): the icon table installs here, once,
-    // before any view builds (registration is idempotent — one static
-    // table — so the test harness's own install never conflicts).
-    registerIcons();
-    var model: Model = .{ .canvas_width = model_mod.compact_seed_canvas_width };
-    // Streaming configuration, resolved once at boot exactly like the
-    // desktop main() below — replay's deterministic-init contract holds
-    // on phones too: no env read ever happens inside update. Without
-    // this, every `fx.playAudio` would carry an empty cache_path and a
-    // streamed track would re-download on every single play; with it,
-    // the platform cache-fill installs the verified bytes under the
-    // resolved directory's audio/ child and the next play is local.
-    if (embedEnvValue("NATIVE_SDK_MUSIC_URL_BASE")) |base| model.setUrlBase(base);
-    var cache_dir_buffer: [model_mod.max_cache_dir]u8 = undefined;
-    const cache_dir = native_sdk.app_dirs.resolveOne(
-        .{ .name = "soundboard" },
-        native_sdk.app_dirs.currentPlatform(),
-        embedEnv(),
-        .cache,
-        &cache_dir_buffer,
-    ) catch "";
-    model.setCacheDir(cache_dir);
-    return model;
-}
-
-/// The embed entry's environment for directory resolution: there is no
-/// `std.process.Init` on this path (the host library calls `initModel()`
-/// directly), so instead of `native_sdk.debug.envFromMap` over an owned
-/// env map the values come from the process environment through libc.
-/// Both phone platforms publish the app's directory namespace there
-/// before any app code runs — iOS processes get HOME (the sandbox
-/// container root) and TMPDIR from the OS itself, and the toolkit's
-/// Android host exports HOME (the app data directory) and TMPDIR (its
-/// cache/ child) in its activity's onCreate — and HOME/TMPDIR are the
-/// only keys the phone resolvers read, so the desktop-only keys stay
-/// null. A build that cannot reach `getenv` (see `embed_env_readable`)
-/// has no environment to read: resolution fails honestly and the cache
-/// stays disabled ("" — streaming still plays, each play just
-/// re-downloads).
-fn embedEnv() native_sdk.app_dirs.Env {
-    return .{
-        .home = embedEnvValue("HOME"),
-        .tmpdir = embedEnvValue("TMPDIR"),
-    };
-}
-
-/// Whether this compilation can emit a `getenv` call at all. The embed
-/// static library declares no libc of its own (the Android slice
-/// cross-compiles pure-Zig, without an NDK sysroot, so `std.c` symbols
-/// are refused at compile time and `link_libc` is false) — but on the
-/// phone targets the enclosing host process always links the system C
-/// runtime (iOS apps link it unconditionally; the Android static lib
-/// lands inside the host .so, which links bionic), so a plain extern
-/// reference below resolves at the host link and the read is safe.
-/// Everywhere else the call is emitted only when libc is actually
-/// linked, so a libc-less desktop test build still links.
-const embed_env_readable = builtin.link_libc or
-    builtin.os.tag == .ios or
-    (@hasField(@TypeOf(builtin.abi), "android") and builtin.abi == .android);
-
-/// libc's environment lookup, declared as a bare external symbol (not
-/// through `std.c`, whose declarations demand a declared libc
-/// dependency): the symbol stays unreferenced unless
-/// `embed_env_readable` holds, and where it holds the final link always
-/// carries the C runtime that defines it.
-extern fn getenv(name: [*:0]const u8) ?[*:0]u8;
-
-/// One env read on the embed path (gated, see `embed_env_readable`). A
-/// set but empty value comes back as "" — exactly what an env map's
-/// `get` reports — so set-empty semantics (an empty URL base disables
-/// streaming) match the desktop launch path.
-fn embedEnvValue(name: [*:0]const u8) ?[]const u8 {
-    if (comptime !embed_env_readable) return null;
-    const value = getenv(name) orelse return null;
-    return std.mem.span(value);
-}
-
-/// Declared platform chrome for the mobile scene: the Albums/Songs
-/// navigation as a REAL system tab bar (the canonical music-app shape).
-/// The ids are command ids — a projected tap dispatches them through
-/// `onCommand` into the same `show_albums`/`show_songs` Msgs the
-/// in-canvas switcher sends, and `selectedTab` mirrors `model.tab` back
-/// so the bar always projects the model. No primary floating action on
-/// purpose: the transport lives in the mini player bar, and a floating
-/// play control would project playback twice.
-const mobile_tab_albums_command = "tabs.albums";
-const mobile_tab_songs_command = "tabs.songs";
-
-/// The platform back command: a completed edge-swipe-back on the album
-/// detail dispatches this id, which maps onto the exact `close_album`
-/// Msg the in-canvas back button sends — the gesture and the button are
-/// indistinguishable in the journal. A cancelled swipe dispatches
-/// nothing.
-const mobile_nav_back_command = "nav.back";
-
-const mobile_chrome_tabs = [_]native_sdk.ShellTab{
-    .{ .id = mobile_tab_albums_command, .label = "Albums", .icon = "app:albums" },
-    .{ .id = mobile_tab_songs_command, .label = "Songs", .icon = "music" },
-};
-
-/// The canonical single-surface mobile scene plus the declared chrome.
-const mobile_scene: native_sdk.ShellConfig = .{
-    .windows = native_sdk.embed.mobile_shell_scene.windows,
-    .chrome = .{ .tabs = &mobile_chrome_tabs },
-};
-
-/// Projected chrome taps arrive as command events with the declared
-/// tab ids; they map onto the exact Msgs the canvas switcher dispatches,
-/// so the two entry points are indistinguishable in the journal.
-pub fn onCommand(name: []const u8) ?Msg {
-    if (std.mem.eql(u8, name, mobile_tab_albums_command)) return .show_albums;
-    if (std.mem.eql(u8, name, mobile_tab_songs_command)) return .show_songs;
-    if (std.mem.eql(u8, name, mobile_nav_back_command)) return .close_album;
-    return null;
-}
-
-/// The model's selected tab as its declared command id — the projection
-/// the native bar mirrors (an open album detail is still the Albums
-/// tab, exactly like the in-canvas switcher's selected state).
-pub fn selectedTab(model: *const Model) []const u8 {
-    return switch (model.tab) {
-        .albums => mobile_tab_albums_command,
-        .songs => mobile_tab_songs_command,
-    };
-}
-
-/// The model's navigation depth — the projection a host presents REAL
-/// push/pop transitions from (album grid -> album detail pushes; back
-/// pops). Depth follows the VISIBLE page stack, so an open album counts
-/// only while the Albums tab shows it: switching to Songs with a detail
-/// open is a lateral tab change (the host reconciles with no
-/// transition), exactly like switching back. Presentation only — the
-/// state is `model.open_album`, owned by update.
-pub fn navigationDepth(model: *const Model) usize {
-    return if (model.tab == .albums and model.open_album != null) 1 else 0;
-}
-
-pub fn mobileOptions() SoundboardApp.Options {
-    return .{
-        .name = "soundboard",
-        .scene = mobile_scene,
-        .canvas_label = native_sdk.embed.mobile_gpu_surface_label,
-        .update_fx = update,
-        .view = rootView,
-        .init_fx = boot,
-        .tokens_fn = tokensFromModel,
-        .on_appearance = onAppearance,
-        .on_chrome = onChrome,
-        .on_command = onCommand,
-        .selected_tab_fn = selectedTab,
-        .navigation_depth_fn = navigationDepth,
-        .navigation_back_command = mobile_nav_back_command,
-        .on_key = onKey,
-        .on_frame = onFrame,
-        .animations = animations,
-        .sync = sync,
-    };
-}
-
-// ------------------------------------------------------------------- main
-
-pub fn main(init: std.process.Init) !void {
-    registerIcons();
-    // Streaming configuration, resolved once at launch: the env URL
-    // base overrides the manifest's committed one (so a locally served
-    // pack needs no re-prepare), and the platform caches directory
-    // (~/Library/Caches/soundboard on macOS, XDG cache on Linux) hosts
-    // the track cache in its audio/ child — delete that directory to
-    // clear the cache. Both land in the INITIAL model, so replay's
-    // deterministic-init contract holds: no env read ever happens
-    // inside update.
-    var model: Model = .{};
-    if (init.environ_map.get("NATIVE_SDK_MUSIC_URL_BASE")) |base| model.setUrlBase(base);
-    var cache_dir_buffer: [model_mod.max_cache_dir]u8 = undefined;
-    const cache_dir = native_sdk.app_dirs.resolveOne(
-        .{ .name = "soundboard" },
-        native_sdk.app_dirs.currentPlatform(),
-        native_sdk.debug.envFromMap(init.environ_map),
-        .cache,
-        &cache_dir_buffer,
-    ) catch "";
-    model.setCacheDir(cache_dir);
-    const app_state = try std.heap.page_allocator.create(SoundboardApp);
-    defer std.heap.page_allocator.destroy(app_state);
-    app_state.* = SoundboardApp.init(std.heap.page_allocator, model, soundboardOptions());
-    defer app_state.deinit();
-    try runner.runWithOptions(app_state.app(), .{
-        .app_name = "soundboard",
-        .window_title = "Native SDK Soundboard",
-        .bundle_id = "dev.native_sdk.soundboard",
-        .default_frame = geometry.RectF.init(0, 0, window_width, window_height),
-        .js_window_api = false,
-        .security = .{
-            .permissions = &app_permissions,
-            .navigation = .{ .allowed_origins = &.{ "zero://inline", "zero://app" } },
-        },
-    }, init);
-}
-
-test {
-    _ = @import("tests.zig");
-}
diff --git a/examples/soundboard/src/model.zig b/examples/soundboard/src/model.zig
deleted file mode 100644
index 3ae74ef8a..000000000
--- a/examples/soundboard/src/model.zig
+++ /dev/null
@@ -1,1214 +0,0 @@
-//! soundboard model: the committed music catalog plus the playback,
-//! search, navigation, and theming state the views bind to.
-//!
-//! The library is REAL data: `music_manifest.zon` (generated by
-//! tools/prepare-example-music.sh and committed) is imported as a typed
-//! value and flattened at comptime into the album/track tables below.
-//! Albums carry a variable number of tracks, so each album records where
-//! its run of tracks starts and how long it is — nothing here assumes a
-//! fixed per-album stride.
-//!
-//! Playback is REAL audio through the runtime audio effect family:
-//! pressing play issues `fx.playAudio` for the track's file and every
-//! report — the load acknowledgment, coarse position ticks (with the
-//! stream's honest buffering flag), the one completion at natural end,
-//! failures — arrives as an `.audio_event` Msg through the ordinary
-//! update path. Positions are the player's real clock and drive the
-//! elapsed display; the player's DURATION reports are estimates for
-//! this catalog and never replace the manifest total (the duration
-//! rule, documented on `handleAudioEvent`). The audio files themselves are
-//! gitignored (the prepare script produces them), and sources resolve
-//! in a fixed order: the prepared LOCAL file, then a verified CACHE
-//! entry, then a progressive STREAM from the catalog's URL base that
-//! fills the cache for next time. The committed manifest ships a hosted
-//! URL base, so a fresh clone streams on demand with zero setup; only
-//! with the base explicitly cleared (NATIVE_SDK_MUSIC_URL_BASE set
-//! empty) does a missing file surface as the honest "assets not
-//! prepared" notice. With a base configured, a `.failed` means the
-//! stream itself died (offline with a cold cache) and the notice says
-//! so instead — browsing the catalog never needs the mp3s.
-//!
-//! Everything the views show that is computable — filtered lists,
-//! progress fractions, time labels — is derived per rebuild into the
-//! build arena, never stored.
-//!
-//! Fixed capacities (loud by design, documented in the README):
-//!   - the manifest's albums and tracks (comptime-flattened)
-//!   - one registered cover image per album (of the runtime's 16 slots)
-//!   - 16-entry play-next queue (a full queue drops the request, noted
-//!     in `queue_dropped` so the UI could surface it)
-//!   - 48-byte search buffer
-
-const std = @import("std");
-const native_sdk = @import("native_sdk");
-
-const canvas = native_sdk.canvas;
-
-pub const Effects = native_sdk.Effects(Msg);
-
-// ------------------------------------------------------------------ library
-
-/// The manifest's shape, typed so the zon import is checked field by
-/// field at comptime — a drifted manifest is a compile error, not a
-/// runtime surprise.
-pub const ManifestTrack = struct { title: []const u8, file: []const u8, duration_ms: u32, bytes: u64 };
-pub const ManifestAlbum = struct { artist: []const u8, title: []const u8, year: u16, art: ?[]const u8, tracks: []const ManifestTrack };
-pub const Catalog = struct { version: u32, url_base: ?[]const u8, albums: []const ManifestAlbum };
-
-/// The committed catalog. Track `file` paths are relative to assets/;
-/// album `art` paths are relative to src/ (the committed covers).
-pub const catalog: Catalog = @import("music_manifest.zon");
-
-pub const Album = struct {
-    /// 1-based id; the registered cover `ImageId` matches it.
-    id: u8,
-    title: []const u8,
-    artist: []const u8,
-    year: u16,
-    /// Cover fallback initials while the image is unregistered, derived
-    /// from the album title at comptime.
-    initials: []const u8,
-    /// Committed cover path relative to src/, or null when the album
-    /// shipped without art (initials stay, never a broken image).
-    art: ?[]const u8,
-    /// This album's run inside the flattened `tracks` table. Albums have
-    /// VARIABLE track counts, so slicing is the only honest lookup — no
-    /// fixed stride exists.
-    track_start: u8,
-    track_count: u8,
-};
-
-pub const Track = struct {
-    /// 1-based id, unique across the library (also the audio effect key).
-    id: u8,
-    album: u8,
-    /// 1-based position within the album.
-    number: u8,
-    title: []const u8,
-    /// Playback path relative to the example root ("assets/" + the
-    /// manifest's file), concatenated at comptime.
-    path: []const u8,
-    /// The manifest's relative file path ("music/<album>/<track>.mp3"),
-    /// doubling as the track's URL path under the streaming base.
-    file: []const u8,
-    /// The manifest's duration, MEASURED from the intact source file by
-    /// the prepare script — the total every surface displays and the
-    /// seek math uses. The platform player's self-reported duration
-    /// never replaces it: see `handleAudioEvent` for why that number is
-    /// an estimate for this catalog.
-    duration_ms: u32,
-    /// The prepared file's exact byte size — the cache integrity gate
-    /// for streamed plays (a cache entry whose size disagrees never
-    /// plays; it is discarded and re-streamed).
-    bytes: u64,
-};
-
-/// First letters of the title's first two words, uppercased — the cover
-/// fallback the avatar shows while no image is registered.
-fn initialsOf(comptime title: []const u8) []const u8 {
-    comptime {
-        var out: []const u8 = "";
-        var word_start = true;
-        for (title) |char| {
-            if (char == ' ') {
-                word_start = true;
-                continue;
-            }
-            if (word_start and out.len < 2) out = out ++ &[_]u8{std.ascii.toUpper(char)};
-            word_start = false;
-        }
-        return out;
-    }
-}
-
-const total_tracks = blk: {
-    var count: usize = 0;
-    for (catalog.albums) |album| count += album.tracks.len;
-    break :blk count;
-};
-
-/// The album table, flattened from the manifest at comptime with
-/// sequential 1-based ids and each album's track run recorded.
-pub const albums = blk: {
-    var out: [catalog.albums.len]Album = undefined;
-    var track_start: usize = 0;
-    for (catalog.albums, 0..) |album, index| {
-        out[index] = .{
-            .id = index + 1,
-            .title = album.title,
-            .artist = album.artist,
-            .year = album.year,
-            .initials = initialsOf(album.title),
-            .art = album.art,
-            .track_start = track_start,
-            .track_count = album.tracks.len,
-        };
-        track_start += album.tracks.len;
-    }
-    break :blk out;
-};
-
-/// The flattened track table: album order, sequential 1-based ids, and
-/// each track's ready-to-play path baked at comptime.
-pub const tracks = blk: {
-    var out: [total_tracks]Track = undefined;
-    var index: usize = 0;
-    for (catalog.albums, 0..) |album, album_index| {
-        for (album.tracks, 0..) |track, position| {
-            out[index] = .{
-                .id = index + 1,
-                .album = album_index + 1,
-                .number = position + 1,
-                .title = track.title,
-                .path = "assets/" ++ track.file,
-                .file = track.file,
-                .duration_ms = track.duration_ms,
-                .bytes = track.bytes,
-            };
-            index += 1;
-        }
-    }
-    break :blk out;
-};
-
-pub fn albumById(id: u8) *const Album {
-    return &albums[id - 1];
-}
-
-pub fn trackById(id: u8) *const Track {
-    return &tracks[id - 1];
-}
-
-pub fn albumTracks(album_id: u8) []const Track {
-    const album = albumById(album_id);
-    const start: usize = album.track_start;
-    return tracks[start .. start + album.track_count];
-}
-
-// -------------------------------------------------------------- capacities
-
-pub const max_queue = 16;
-pub const max_search = 48;
-/// The header bar's natural height, and the floor `header_height` falls
-/// back to when no titlebar band overlays the content (fullscreen,
-/// standard chrome, tests). Matches the tall hidden-inset band the
-/// system reports through `on_chrome` — the band must not be taller
-/// than the OS band, or the header's controls center below the traffic
-/// lights the system centers within its own band.
-pub const header_natural_height: f32 = 52;
-/// The window's content min-width floor (main.zig declares it on the
-/// shell window) and the default `canvas_width` before the first
-/// presented frame reports the real surface size. Defaulting to the
-/// FLOOR is deliberate: a tree built before any frame arrives (boot,
-/// tree-level tests, the layout audit's smallest swept size) derives an
-/// album grid that fits the narrowest window the shell allows — it can
-/// underfill a wider surface for one frame, never overflow a narrow one.
-pub const min_canvas_width: f32 = 1056;
-
-/// The pre-first-frame `canvas_width` the MOBILE entry seeds instead
-/// (main.zig's `initModel`): a mainstream phone-portrait width, so the
-/// installing frame on a phone already composes the compact shell — the
-/// full-screen mobile host has no window min-width to seed from, and
-/// seeding the desktop floor would flash a desktop tree onto a 390pt
-/// surface for one frame. The first presented frame corrects the value
-/// exactly like the desktop seed; only the boot frame reads it.
-pub const compact_seed_canvas_width: f32 = 390;
-
-/// Which shell the root view composes. The two shells share every
-/// content piece (tiles, rows, headings, the now-playing bindings) and
-/// differ only in composition: `regular` is the desktop shape (wide
-/// header bar, adaptive multi-column grid, full transport rail),
-/// `compact` the phone shape (stacked touch header, mini player,
-/// safe-area padding).
-pub const FormFactor = enum { compact, regular };
-
-/// Effect keys, model-owned identity (effect-key style). Audio playback
-/// keys are the track ids themselves — one key namespace per channel.
-pub const copy_key: u64 = 2;
-
-/// The honest degraded state when a track's file cannot load AND no
-/// URL base is configured to stream it (the audio assets are
-/// gitignored; the prepare script produces them). Reachable only with
-/// streaming explicitly disabled — the committed manifest ships a
-/// hosted URL base — but when it is, the now-playing bar shows both
-/// lines so the user knows exactly what to run — never a crash, never
-/// silence, and the catalog browses fine.
-pub const assets_missing_title = "music assets not prepared";
-pub const assets_missing_hint = "run tools/prepare-example-music.sh";
-
-/// The honest degraded state when a STREAM fails (a URL base is
-/// configured, the local file was absent, and the network let the
-/// playback down — offline with a cold cache, a dead host, a mid-flight
-/// drop). Distinct from the assets notice on purpose: the remedy is
-/// different.
-pub const stream_failed_title = "stream unavailable";
-pub const stream_failed_hint = "check the connection and try again";
-
-/// The artist line while a stream is stalled waiting for bytes — the
-/// honest state between "playing" and "paused" that only URL sources
-/// have.
-pub const buffering_hint = "buffering…";
-
-/// Streaming configuration bounds: the URL base (manifest `.url_base`,
-/// overridable with NATIVE_SDK_MUSIC_URL_BASE at launch) and the
-/// platform cache directory resolved in main. Longer values are
-/// REFUSED whole at set time, never truncated — a truncated URL would
-/// stream garbage politely.
-pub const max_url_base = 256;
-pub const max_cache_dir = 512;
-
-/// The manifest's committed streaming base ("" when null): the model
-/// default the env override replaces at launch.
-pub const manifest_url_base: []const u8 = catalog.url_base orelse "";
-
-// ------------------------------------------------------------------- model
-
-pub const Tab = enum { albums, songs };
-
-/// One presented frame's clock, delivered through `on_frame` WHILE
-/// PLAYING ONLY (main.zig gates it): the timestamp advances the rendered
-/// playback clock between the player's coarse position ticks, and the
-/// display's frame interval bounds the advance when frames were
-/// irregular (occlusion, a resume after pause), so a stale gap can never
-/// lurch the scrubber.
-pub const FrameClock = struct {
-    timestamp_ns: u64,
-    interval_ns: u64,
-};
-
-/// How far the rendered clock may run AHEAD of a player position tick
-/// before the disagreement stops being interpolation drift and gets
-/// snapped. Drift per 500 ms tick is a few milliseconds; anything past a
-/// full tick means reality changed (an external seek, a stall the
-/// buffering flag has not reported yet), and honesty beats smoothness.
-const position_snap_slack_ms: u32 = 600;
-
-pub const Msg = union(enum) {
-    show_albums,
-    show_songs,
-    set_appearance: native_sdk.Appearance,
-    /// Chrome overlay geometry (tall hidden-inset titlebar): the header
-    /// pads its leading edge past the traffic lights and matches its
-    /// height to the titlebar band. Delivered through `on_chrome`.
-    chrome_changed: native_sdk.WindowChrome,
-    /// The canvas surface width, mirrored from presented frames through
-    /// `on_frame` (main.zig emits it only when the width actually
-    /// changed; unchanged-width frames instead carry the playback frame
-    /// clock while audio moves, and nothing at all otherwise). The album
-    /// grid derives its column count from this — the layout system's
-    /// grid takes a FIXED column count and rows/columns never
-    /// flow-wrap, so adapting to the window is the model's job: track
-    /// the width, chunk in the view.
-    canvas_resized: f32,
-    search_edit: canvas.TextInputEvent,
-    open_album: u8,
-    close_album,
-    play_album: u8,
-    play_track: u8,
-    /// Single click (and Space activation) on a track row: SELECTION
-    /// only — playback needs the double click, Enter, or the transport.
-    select_track: u8,
-    /// Arrow keys through the app-level key fallback: the selection
-    /// walks the track list on screen, clamped at its ends, without
-    /// touching playback.
-    select_next,
-    select_previous,
-    /// Enter through the app-level key fallback: play the selected
-    /// track (toggling pause when it is already the loaded one).
-    play_selected,
-    /// One presented frame while playing (`on_frame` gates it): advances
-    /// the rendered playback clock so the scrubber moves every frame,
-    /// not every 500 ms position tick.
-    frame_clock: FrameClock,
-    toggle_play,
-    next_track,
-    prev_track,
-    /// Seek slider changed; the reconciled value arrives through the
-    /// `sync` hook (`seek_fraction`) before this message is applied.
-    seeked,
-    /// Every audio playback report: the load acknowledgment, position
-    /// ticks, the one completion, and failures. Plain data — safe to
-    /// read whole in update.
-    audio_event: native_sdk.EffectAudio,
-    /// Controlled scroll: each region's applied offset lands here and the
-    /// view echoes it back, so a rebuild mid-gesture can never reset it.
-    grid_scrolled: canvas.ScrollState,
-    detail_scrolled: canvas.ScrollState,
-    songs_scrolled: canvas.ScrollState,
-    /// The detail page's "From the collection" shelf — a HORIZONTAL
-    /// scroll region, so its controlled echo rides the state's
-    /// `offset_x` into `value_x` (the sideways twin of the offsets
-    /// above).
-    shelf_scrolled: canvas.ScrollState,
-    /// Context menu: queue a track to play after the current one.
-    queue_track: u8,
-    /// Context menu: copy the track title to the clipboard via `pbcopy`
-    /// (the effects channel has no clipboard call today).
-    copy_title: u8,
-    copied: native_sdk.EffectExit,
-
-    /// Zig-only dispatch: the Zig-built views (album grid, track rows,
-    /// context menus), the app-level key fallback, and the runtime
-    /// channels (appearance, chrome, frames, audio, scroll echoes,
-    /// process exits) send these — never a markup on-* event — so the
-    /// dead-state lint must not ask for one.
-    pub const view_unbound = .{
-        "set_appearance",  "chrome_changed", "canvas_resized",
-        "open_album",      "close_album",    "play_album",
-        "play_track",      "select_track",   "select_next",
-        "select_previous", "play_selected",  "frame_clock",
-        "audio_event",     "grid_scrolled",  "detail_scrolled",
-        "songs_scrolled",  "shelf_scrolled", "queue_track",
-        "copy_title",      "copied",
-    };
-};
-
-pub const Model = struct {
-    // Source-of-truth state only; everything else is derived per rebuild.
-    tab: Tab = .albums,
-    appearance: native_sdk.Appearance = .{},
-    open_album: ?u8 = null,
-    /// Controlled scroll offsets (album grid, album detail, all songs):
-    /// the model observes the applied offset and echoes it back.
-    grid_scroll: f32 = 0,
-    detail_scroll: f32 = 0,
-    /// The detail page's album shelf, HORIZONTAL: the echoed `offset_x`
-    /// the view binds back as `value_x`.
-    shelf_scroll_x: f32 = 0,
-    /// Chrome overlay geometry from `on_chrome` (tall hidden-inset
-    /// titlebar): the header leads with a spacer this wide so its
-    /// controls clear the traffic lights, and matches its height to the
-    /// titlebar band. Both fall back to the natural header when no band
-    /// overlays the content (fullscreen, standard chrome, tests).
-    chrome_leading: f32 = 0,
-    /// The trailing twin: how far OS window controls overlay the
-    /// header's END (Windows delivers the min/max/close cluster here;
-    /// macOS reports zero). The header closes with a spacer this wide
-    /// so the search field clears the caption buttons.
-    chrome_trailing: f32 = 0,
-    /// The chrome band heights at the surface's TOP and BOTTOM edges,
-    /// stored raw (no header floor applied). On phones the window-chrome
-    /// channel carries the SAFE AREAS — status bar / Dynamic Island
-    /// above, home indicator below — and the compact shell pads exactly
-    /// these so content never sits under either. The desktop shell reads
-    /// the floored `header_height` derivation below instead and has no
-    /// bottom band to clear, so these stay untouched there.
-    chrome_top: f32 = 0,
-    chrome_bottom: f32 = 0,
-    /// The host-reported form factor from the window-chrome channel
-    /// (`chrome_changed`), null until a host reports one. When present
-    /// it OWNS the shell switch (`formFactor` below) and the width
-    /// derivation becomes the fallback for hosts that never report —
-    /// desktop windows, tests, older hosts. Sticky by design: a host
-    /// that reported once keeps its last report (an explicit `.unknown`
-    /// never arrives as a Msg payload worth erasing state over).
-    host_form_factor: ?FormFactor = null,
-    /// True while the host projects the declared chrome tabs as a REAL
-    /// native tab bar (`chrome_changed` carries the flag). The compact
-    /// header yields its in-canvas Albums/Songs switcher while set —
-    /// one tab affordance on screen, the system's — and keeps it
-    /// everywhere the declaration is inert.
-    native_tabs: bool = false,
-    header_height: f32 = header_natural_height,
-    /// The live canvas width, from `canvas_resized`. Seeds at the window
-    /// min-width floor (see `min_canvas_width`) so pre-first-frame trees
-    /// fit the narrowest window; the first presented frame corrects it.
-    canvas_width: f32 = min_canvas_width,
-    songs_scroll: f32 = 0,
-    now: ?u8 = null, // playing track id
-    /// The SELECTED track id — the inverted accent row in track lists.
-    /// Distinct from `now` on purpose: single click / arrows move the
-    /// selection, only a double click, Enter, or the transport moves
-    /// playback. Starting a track selects it too (the playing row is the
-    /// current row), but selecting never plays.
-    selected: ?u8 = null,
-    playing: bool = false,
-    /// The RENDERED playback clock (labels, scrubber, the motion window).
-    /// While playing it advances every presented frame (`frame_clock`,
-    /// bounded per-frame steps) and the player's coarse position ticks
-    /// correct it: forward corrections apply, small backward ones hold
-    /// flat (the bar never visibly rewinds mid-play), and only a
-    /// past-slack disagreement snaps. Paused, buffering, and seeking
-    /// snap exactly — interpolation exists only where there is motion.
-    elapsed_ms: u32 = 0,
-    /// The last `frame_clock` timestamp, the delta base for the rendered
-    /// clock. Never reset: a stale gap (pause, occlusion, boot) is
-    /// bounded by the frame-interval clamp in `advanceRenderedClock`.
-    frame_ns: u64 = 0,
-    /// The loaded track's TOTAL for display and seek math: the manifest
-    /// duration, the same number the track lists render — the two
-    /// surfaces must agree. The platform's self-reported duration never
-    /// replaces a nonzero manifest value (it is an estimate for this
-    /// catalog — see `handleAudioEvent`); only a track the manifest
-    /// carries no duration for adopts the platform's report, since an
-    /// estimated scrubber beats a dead one.
-    now_duration_ms: u32 = 0,
-    /// The platform player's own duration report, mirrored verbatim
-    /// from the audio events: observable state for tests and debugging,
-    /// and the fallback total above — never the displayed number while
-    /// the manifest has one.
-    platform_duration_ms: u32 = 0,
-    /// A track's file failed to load (the gitignored audio assets are
-    /// not prepared, no URL base is configured, or the platform has no
-    /// audio playback): playback is cleared and the now-playing bar
-    /// shows the prepare hint instead.
-    assets_missing: bool = false,
-    /// A STREAM failed (a URL base is configured and the network let
-    /// the playback down): playback is cleared and the now-playing bar
-    /// shows the connection hint instead of the prepare hint.
-    stream_failed: bool = false,
-    /// The stream is stalled waiting for network bytes — mirrored from
-    /// the audio events' buffering flag so the bar can show the honest
-    /// third state between playing and paused. Local files never set it.
-    buffering: bool = false,
-    /// The streaming URL base: the manifest's committed value (the
-    /// hosted catalog mirror, so streaming works out of the box) until
-    /// main overrides it from NATIVE_SDK_MUSIC_URL_BASE. Empty means
-    /// local-only playback (the variable set empty disables streaming).
-    url_base_buffer: [max_url_base]u8 = blk: {
-        var buffer: [max_url_base]u8 = @splat(0);
-        @memcpy(buffer[0..manifest_url_base.len], manifest_url_base);
-        break :blk buffer;
-    },
-    url_base_len: usize = manifest_url_base.len,
-    /// The platform caches directory for this app (app_dirs `.cache`),
-    /// resolved in main; the track cache lives in its audio/ child.
-    /// Empty (tests, resolution failure) disables the cache — streams
-    /// still play, they just never persist.
-    cache_dir_buffer: [max_cache_dir]u8 = @splat(0),
-    cache_dir_len: usize = 0,
-    queue: [max_queue]u8 = @splat(0),
-    queue_len: usize = 0,
-    queue_dropped: u32 = 0,
-    search_buffer: canvas.TextBuffer(max_search) = .{},
-    /// Seek slider value, mirrored from the runtime through `sync`.
-    seek_fraction: f32 = 0,
-    /// Registered cover ImageIds, index = album id - 1; 0 while the
-    /// decode/registration has not succeeded (avatars fall back to
-    /// initials, so a failed decode can never break the UI).
-    covers: [albums.len]canvas.ImageId = @splat(0),
-    /// Copy-to-clipboard bookkeeping: how many pbcopy spawns finished ok.
-    copies_done: u32 = 0,
-    copy_failed: bool = false,
-
-    /// Read by the ZIG-BUILT views (grid, detail, track rows), update
-    /// logic, or main's launch wiring — never bound in markup — so
-    /// opting them out keeps `native check`'s dead-state lint quiet
-    /// without weakening it for real drift. The markup fragments bind
-    /// the derived fns (`nowPlayingTitle`, `playPauseIcon`,
-    /// `progressFraction`, ...) instead of these backing stores.
-    pub const view_unbound = .{
-        "tab",             "open_album",           "grid_scroll",
-        "detail_scroll",   "shelf_scroll_x",       "canvas_width",
-        "songs_scroll",    "now",                  "selected",
-        "playing",         "elapsed_ms",           "frame_ns",
-        "now_duration_ms", "platform_duration_ms", "assets_missing",
-        "stream_failed",   "buffering",            "url_base_len",
-        "cache_dir_len",   "queue_dropped",        "seek_fraction",
-        "copies_done",     "copy_failed",          "appearance",
-        "search_buffer",   "url_base_buffer",      "cache_dir_buffer",
-        "queue",           "covers",               "chrome_top",
-        "chrome_bottom",   "host_form_factor",     "native_tabs",
-        "urlBase",         "cacheDir",             "streamingConfigured",
-        "searching",       "colorScheme",          "hasNowPlaying",
-        "playingAlbum",    "visibleAlbums",        "visibleTracks",
-        "miniBarVisible",  "formFactor",           "otherAlbums",
-    };
-
-    // ------------------------------------------------------------- queries
-
-    pub fn search(model: *const Model) []const u8 {
-        return model.search_buffer.text();
-    }
-
-    pub fn urlBase(model: *const Model) []const u8 {
-        return model.url_base_buffer[0..model.url_base_len];
-    }
-
-    pub fn cacheDir(model: *const Model) []const u8 {
-        return model.cache_dir_buffer[0..model.cache_dir_len];
-    }
-
-    /// Whether tracks can stream on demand: a URL base is configured
-    /// (manifest or env). This is what turns the "assets not prepared"
-    /// story into "streams on demand".
-    pub fn streamingConfigured(model: *const Model) bool {
-        return model.url_base_len > 0;
-    }
-
-    /// Install the streaming base (launch-time: env override or the
-    /// manifest default). A trailing slash is trimmed so URL assembly
-    /// is uniform; an over-long value is refused whole — a truncated
-    /// base would stream garbage politely.
-    pub fn setUrlBase(model: *Model, base: []const u8) void {
-        const trimmed = std.mem.trimEnd(u8, base, "/");
-        if (trimmed.len > max_url_base) return;
-        @memcpy(model.url_base_buffer[0..trimmed.len], trimmed);
-        model.url_base_len = trimmed.len;
-    }
-
-    /// Install the platform cache directory (launch-time). Over-long
-    /// values are refused whole, leaving the cache disabled — honest
-    /// degrade, streams still play.
-    pub fn setCacheDir(model: *Model, dir: []const u8) void {
-        if (dir.len > max_cache_dir) return;
-        @memcpy(model.cache_dir_buffer[0..dir.len], dir);
-        model.cache_dir_len = dir.len;
-    }
-
-    pub fn searching(model: *const Model) bool {
-        return model.search().len > 0;
-    }
-
-    pub fn albumsShowing(model: *const Model) bool {
-        return model.tab == .albums;
-    }
-
-    pub fn songsShowing(model: *const Model) bool {
-        return model.tab == .songs;
-    }
-
-    pub fn colorScheme(model: *const Model) native_sdk.ColorScheme {
-        return model.appearance.color_scheme;
-    }
-
-    pub fn coverFor(model: *const Model, album_id: u8) canvas.ImageId {
-        return model.covers[album_id - 1];
-    }
-
-    pub fn nowTrack(model: *const Model) ?*const Track {
-        const id = model.now orelse return null;
-        return trackById(id);
-    }
-
-    /// The open album's title, for the detail page's markup heading
-    /// (album_title.native binds it). Total over the model on purpose —
-    /// markup bindings resolve on every rebuild — so it answers "" when
-    /// no album is open (the grid page, where the fragment is not
-    /// composed).
-    pub fn openAlbumTitle(model: *const Model) []const u8 {
-        const id = model.open_album orelse return "";
-        return albumById(id).title;
-    }
-
-    pub fn hasNowPlaying(model: *const Model) bool {
-        return model.now != null;
-    }
-
-    /// The shell rule: the HOST-REPORTED form factor owns the switch
-    /// when a host has reported one (the window-chrome channel carries
-    /// it, so it arrived as a Msg and replays with the journal); the
-    /// width rule below is the fallback for hosts that never report —
-    /// desktop windows, tests, older hosts.
-    ///
-    /// The width fallback, one strict comparison with no hysteresis:
-    /// COMPACT strictly below the desktop shell's proven min content
-    /// width (`min_canvas_width` — the floor the desktop layout audit
-    /// sweeps from), the desktop shell at the floor and above. The
-    /// boundary is honest by construction: every narrower surface is one
-    /// the desktop composition has never been proven clean on (desktop
-    /// windows enforce the floor, so only phone-class surfaces ever
-    /// report less), and exactly AT the floor the audit proves the
-    /// desktop shell clean. Both inputs are per-frame model state, so
-    /// the same Msg sequence always lands the same shell.
-    pub fn formFactor(model: *const Model) FormFactor {
-        if (model.host_form_factor) |host| return host;
-        return if (model.canvas_width < min_canvas_width) .compact else .regular;
-    }
-
-    /// Whether the compact shell's mini player is on screen: a track is
-    /// loaded (playing OR paused — the bar must not vanish on pause), or
-    /// a degraded playback notice needs a surface to read on (a failed
-    /// load clears `now`, and the notice would otherwise be invisible on
-    /// a phone with no persistent transport rail).
-    pub fn miniBarVisible(model: *const Model) bool {
-        return model.now != null or model.assets_missing or model.stream_failed;
-    }
-
-    pub fn idle(model: *const Model) bool {
-        return model.now == null;
-    }
-
-    /// Data-driven icon choice for the transport's primary button: the
-    /// markup binds `icon="{playPauseIcon}"`, so ONE button swaps its
-    /// glyph with playback state - no if/else arms, no shared key to
-    /// keep its identity stable.
-    pub fn playPauseIcon(model: *const Model) []const u8 {
-        return if (model.playing) "pause" else "play";
-    }
-
-    pub fn nowPlayingCover(model: *const Model) canvas.ImageId {
-        const track = model.nowTrack() orelse return 0;
-        return model.coverFor(track.album);
-    }
-
-    pub fn nowPlayingInitials(model: *const Model) []const u8 {
-        const track = model.nowTrack() orelse return "--";
-        return albumById(track.album).initials;
-    }
-
-    /// The bar's first line doubles as the status line: the honest
-    /// assets-not-prepared notice replaces the track title after a load
-    /// failure, so the user is told what to run instead of hearing
-    /// nothing.
-    pub fn nowPlayingTitle(model: *const Model) []const u8 {
-        if (model.stream_failed) return stream_failed_title;
-        if (model.assets_missing) return assets_missing_title;
-        const track = model.nowTrack() orelse return "Nothing playing";
-        return track.title;
-    }
-
-    pub fn nowPlayingArtist(model: *const Model) []const u8 {
-        if (model.stream_failed) return stream_failed_hint;
-        if (model.assets_missing) return assets_missing_hint;
-        const track = model.nowTrack() orelse return "Pick an album or a song to start";
-        // The honest third state: a stalled stream is not paused, but
-        // nothing is coming out of the speakers either — say so where
-        // the artist normally reads.
-        if (model.buffering) return buffering_hint;
-        return albumById(track.album).artist;
-    }
-
-    pub fn progressFraction(model: *const Model) f32 {
-        if (model.now == null or model.now_duration_ms == 0) return 0;
-        const fraction = @as(f32, @floatFromInt(model.elapsed_ms)) / @as(f32, @floatFromInt(model.now_duration_ms));
-        return std.math.clamp(fraction, 0, 1);
-    }
-
-    pub fn elapsedLabel(model: *const Model, arena: std.mem.Allocator) []const u8 {
-        if (model.now == null) return "-:--";
-        return formatMs(arena, model.elapsed_ms);
-    }
-
-    pub fn durationLabel(model: *const Model, arena: std.mem.Allocator) []const u8 {
-        if (model.now == null) return "-:--";
-        return formatMs(arena, model.now_duration_ms);
-    }
-
-    /// Albums matching the search query, derived into the build arena.
-    /// Every album EXCEPT `exclude`, in catalog order and unfiltered —
-    /// the detail page's "From the collection" shelf browses the whole
-    /// catalog sideways, whatever the search field holds.
-    pub fn otherAlbums(model: *const Model, arena: std.mem.Allocator, exclude: u8) []const AlbumCell {
-        const out = arena.alloc(AlbumCell, albums.len) catch return &.{};
-        var count: usize = 0;
-        for (&albums) |*album| {
-            if (album.id == exclude) continue;
-            out[count] = .{
-                .id = album.id,
-                .title = album.title,
-                .artist = album.artist,
-                .initials = album.initials,
-                .cover = model.coverFor(album.id),
-                .playing = model.playingAlbum() == album.id,
-            };
-            count += 1;
-        }
-        return out[0..count];
-    }
-
-    pub fn visibleAlbums(model: *const Model, arena: std.mem.Allocator) []const AlbumCell {
-        const out = arena.alloc(AlbumCell, albums.len) catch return &.{};
-        var count: usize = 0;
-        for (&albums) |*album| {
-            if (!model.albumMatches(album)) continue;
-            out[count] = .{
-                .id = album.id,
-                .title = album.title,
-                .artist = album.artist,
-                .initials = album.initials,
-                .cover = model.coverFor(album.id),
-                .playing = model.playingAlbum() == album.id,
-            };
-            count += 1;
-        }
-        return out[0..count];
-    }
-
-    /// Library tracks matching the search query (title, artist, or album),
-    /// derived into the build arena.
-    pub fn visibleTracks(model: *const Model, arena: std.mem.Allocator) []const TrackRow {
-        const out = arena.alloc(TrackRow, tracks.len) catch return &.{};
-        var count: usize = 0;
-        for (&tracks) |*track| {
-            if (!model.trackMatches(track)) continue;
-            out[count] = model.trackRow(arena, track, .with_album);
-            count += 1;
-        }
-        return out[0..count];
-    }
-
-    /// One album's tracks for the detail view (never search-filtered: the
-    /// detail page is the whole record).
-    pub fn albumTrackRows(model: *const Model, arena: std.mem.Allocator, album_id: u8) []const TrackRow {
-        const album_tracks = albumTracks(album_id);
-        const out = arena.alloc(TrackRow, album_tracks.len) catch return &.{};
-        for (album_tracks, 0..) |*track, index| {
-            out[index] = model.trackRow(arena, track, .number_only);
-        }
-        return out;
-    }
-
-    pub fn playingAlbum(model: *const Model) u8 {
-        const track = model.nowTrack() orelse return 0;
-        return if (model.playing) track.album else 0;
-    }
-
-    fn albumMatches(model: *const Model, album: *const Album) bool {
-        const query = model.search();
-        if (query.len == 0) return true;
-        return containsIgnoreCase(album.title, query) or containsIgnoreCase(album.artist, query);
-    }
-
-    fn trackMatches(model: *const Model, track: *const Track) bool {
-        const query = model.search();
-        if (query.len == 0) return true;
-        const album = albumById(track.album);
-        return containsIgnoreCase(track.title, query) or
-            containsIgnoreCase(album.artist, query) or
-            containsIgnoreCase(album.title, query);
-    }
-
-    const TrackRowStyle = enum { with_album, number_only };
-
-    fn trackRow(model: *const Model, arena: std.mem.Allocator, track: *const Track, style: TrackRowStyle) TrackRow {
-        const album = albumById(track.album);
-        return .{
-            .id = track.id,
-            .number = std.fmt.allocPrint(arena, "{d}", .{track.number}) catch "",
-            .title = track.title,
-            .subtitle = switch (style) {
-                .with_album => std.fmt.allocPrint(arena, "{s} — {s}", .{ album.artist, album.title }) catch "",
-                .number_only => "",
-            },
-            .duration = formatMs(arena, track.duration_ms),
-            .now = model.now == track.id,
-            .playing = model.now == track.id and model.playing,
-            .selected = model.selected == track.id,
-            .queued = model.isQueued(track.id),
-        };
-    }
-
-    fn isQueued(model: *const Model, track_id: u8) bool {
-        for (model.queue[0..model.queue_len]) |queued| {
-            if (queued == track_id) return true;
-        }
-        return false;
-    }
-
-    // ------------------------------------------------------------ mutation
-
-    fn pushQueue(model: *Model, track_id: u8) void {
-        if (model.isQueued(track_id)) return;
-        if (model.queue_len >= max_queue) {
-            model.queue_dropped += 1;
-            return;
-        }
-        model.queue[model.queue_len] = track_id;
-        model.queue_len += 1;
-    }
-
-    fn popQueue(model: *Model) ?u8 {
-        if (model.queue_len == 0) return null;
-        const next = model.queue[0];
-        for (model.queue[1..model.queue_len], 0..) |moved, slot| {
-            model.queue[slot] = moved;
-        }
-        model.queue_len -= 1;
-        return next;
-    }
-};
-
-pub const AlbumCell = struct {
-    id: u8,
-    title: []const u8,
-    artist: []const u8,
-    initials: []const u8,
-    cover: canvas.ImageId,
-    playing: bool,
-};
-
-pub const TrackRow = struct {
-    id: u8,
-    number: []const u8,
-    title: []const u8,
-    subtitle: []const u8,
-    duration: []const u8,
-    /// This track is loaded in the now-playing bar (playing or paused).
-    now: bool,
-    playing: bool,
-    /// This track is the SELECTION (accent row) — see `Model.selected`.
-    selected: bool,
-    queued: bool,
-};
-
-fn formatMs(arena: std.mem.Allocator, ms: u32) []const u8 {
-    const total_seconds = ms / 1000;
-    return std.fmt.allocPrint(arena, "{d}:{d:0>2}", .{ total_seconds / 60, total_seconds % 60 }) catch "";
-}
-
-fn containsIgnoreCase(haystack: []const u8, needle: []const u8) bool {
-    if (needle.len == 0) return true;
-    if (needle.len > haystack.len) return false;
-    var index: usize = 0;
-    while (index + needle.len <= haystack.len) : (index += 1) {
-        if (std.ascii.eqlIgnoreCase(haystack[index .. index + needle.len], needle)) return true;
-    }
-    return false;
-}
-
-// ------------------------------------------------------------------ update
-
-pub fn update(model: *Model, msg: Msg, fx: *Effects) void {
-    switch (msg) {
-        .show_albums => model.tab = .albums,
-        .show_songs => model.tab = .songs,
-        .set_appearance => |appearance| model.appearance = appearance,
-        .chrome_changed => |chrome| {
-            // Pad whichever edge the platform puts its window controls
-            // on (macOS: traffic lights leading; Windows: min/max/close
-            // trailing) — the unused edge arrives as an honest zero.
-            model.chrome_leading = chrome.insets.left;
-            model.chrome_trailing = chrome.insets.right;
-            // The raw top/bottom bands, for the compact shell's
-            // safe-area padding: on phones the same channel carries the
-            // status bar / Dynamic Island above and the home indicator
-            // below, and the compact shell pads exactly these.
-            model.chrome_top = chrome.insets.top;
-            model.chrome_bottom = chrome.insets.bottom;
-            // Match the header to the titlebar band so its centered
-            // controls share the traffic lights' centerline; the natural
-            // height is the floor when no band overlays the content.
-            model.header_height = @max(header_natural_height, chrome.insets.top);
-            // Host-reported form factor: adopt when the host says one
-            // (sticky — see the field), leave the width fallback in
-            // charge when it never does.
-            switch (chrome.form_factor) {
-                .compact => model.host_form_factor = .compact,
-                .regular => model.host_form_factor = .regular,
-                .unknown => {},
-            }
-            // Whether a native bar owns the tab affordance right now:
-            // the compact header's switcher yields exactly while it is
-            // projected.
-            model.native_tabs = chrome.tabs_projected;
-        },
-        .canvas_resized => |width| model.canvas_width = width,
-        .search_edit => |edit| model.search_buffer.apply(edit),
-        .grid_scrolled => |state| model.grid_scroll = state.offset_y,
-        .detail_scrolled => |state| model.detail_scroll = state.offset_y,
-        .songs_scrolled => |state| model.songs_scroll = state.offset_y,
-        .shelf_scrolled => |state| model.shelf_scroll_x = state.offset_x,
-        .open_album => |id| {
-            model.open_album = id;
-            model.tab = .albums;
-            // A fresh record opens at its top, with its shelf at the
-            // leading edge.
-            model.detail_scroll = 0;
-            model.shelf_scroll_x = 0;
-        },
-        .close_album => model.open_album = null,
-        .play_album => |id| startTrack(model, fx, albumTracks(id)[0].id),
-        .play_track => |id| playOrToggle(model, fx, id),
-        .select_track => |id| model.selected = id,
-        .select_next => moveSelection(model, .next),
-        .select_previous => moveSelection(model, .previous),
-        .play_selected => {
-            if (model.selected) |id| playOrToggle(model, fx, id);
-        },
-        .frame_clock => |frame| advanceRenderedClock(model, frame),
-        .toggle_play => {
-            if (model.now == null) {
-                startTrack(model, fx, tracks[0].id);
-            } else {
-                setPlaying(model, fx, !model.playing);
-            }
-        },
-        .next_track => advance(model, fx),
-        .prev_track => previous(model, fx),
-        .seeked => {
-            if (model.now != null) {
-                const duration: f32 = @floatFromInt(model.now_duration_ms);
-                const target: u32 = @intFromFloat(std.math.clamp(model.seek_fraction, 0, 1) * duration);
-                // Optimistic mirror for the labels; the platform seek has
-                // no echo — the next position tick reports from there.
-                model.elapsed_ms = target;
-                fx.seekAudio(target);
-            }
-        },
-        .audio_event => |event| handleAudioEvent(model, fx, event),
-        .queue_track => |id| model.pushQueue(id),
-        .copy_title => |id| fx.spawn(.{
-            .key = copy_key,
-            .argv = &.{"/usr/bin/pbcopy"},
-            .stdin = trackById(id).title,
-            .on_exit = Effects.exitMsg(.copied),
-        }),
-        .copied => |exit| {
-            if (exit.reason == .exited and exit.code == 0) {
-                model.copies_done += 1;
-                model.copy_failed = false;
-            } else {
-                model.copy_failed = true;
-            }
-        },
-    }
-}
-
-/// Every playback report flows through here. The audio key is the track
-/// id, so a straggler for a track the model no longer plays is dropped
-/// by identity — never misattributed to the current one.
-///
-/// THE DURATION RULE. Events carry the platform player's own duration
-/// readout, and for this catalog that number is an ESTIMATE, never the
-/// truth: the prepare script strips the seek header from every prepared
-/// file (nothing of the source encoder may survive the strip), so a
-/// decoder can only extrapolate the length from the bitrate it has seen
-/// — a progressive stream's early guess has measured minutes wrong, and
-/// even a fully local file reads seconds long and wobbles between
-/// ticks. The manifest duration was measured from the intact SOURCE
-/// file and matches a full decode exactly, so `now_duration_ms` (the
-/// displayed total, the scrubber's denominator, the seek target's
-/// scale) keeps the manifest value and the platform's report only lands
-/// in `platform_duration_ms` — adopted as the total solely when the
-/// manifest carries no duration at all. Positions are different:
-/// position ticks are the player's REAL clock and stay authoritative.
-fn handleAudioEvent(model: *Model, fx: *Effects, event: native_sdk.EffectAudio) void {
-    const now = model.now orelse return;
-    if (event.key != now) return;
-    switch (event.kind) {
-        .loaded => {
-            adoptPlatformDuration(model, event.duration_ms);
-            model.elapsed_ms = @intCast(event.position_ms);
-            model.playing = event.playing;
-            model.buffering = event.buffering;
-        },
-        .position => {
-            const position: u32 = @intCast(event.position_ms);
-            adoptPlatformDuration(model, event.duration_ms);
-            // The stream's honest stall flag rides every tick; local
-            // files always report false.
-            model.buffering = event.buffering;
-            // The coarse tick CORRECTS the frame-advanced rendered
-            // clock. In motion, forward corrections apply and small
-            // backward ones hold flat — the bar must never visibly
-            // rewind because our frames ran a few ms ahead of the
-            // player — while a past-slack disagreement is a real
-            // desync (an external seek, an unreported stall) and
-            // snaps. With no motion (paused, buffering) the tick is
-            // simply the truth.
-            if (model.playing and !model.buffering) {
-                if (position > model.elapsed_ms or model.elapsed_ms - position > position_snap_slack_ms) {
-                    model.elapsed_ms = position;
-                }
-            } else {
-                model.elapsed_ms = position;
-            }
-        },
-        // Real band-magnitude reports from hosts that analyze their own
-        // playback. The soundboard draws no analyzer — its identity is
-        // the clean catalog, not phosphor glass — so the reports are
-        // consciously ignored (the deck is the surface that adopts
-        // them).
-        .spectrum => {},
-        .completed => advance(model, fx),
-        .failed, .rejected => {
-            // Playback could not run. With a URL base configured the
-            // local-file miss would have streamed, so a failure here
-            // means the NETWORK let the playback down (offline with a
-            // cold cache, a dead host, a mid-flight drop); without one
-            // it means the gitignored assets are not prepared (or the
-            // host has no audio playback). Two notices, two remedies —
-            // and the catalog keeps browsing fine either way.
-            if (model.streamingConfigured()) {
-                model.stream_failed = true;
-            } else {
-                model.assets_missing = true;
-            }
-            model.now = null;
-            model.playing = false;
-            model.buffering = false;
-            model.elapsed_ms = 0;
-            model.now_duration_ms = 0;
-            model.platform_duration_ms = 0;
-        },
-    }
-}
-
-/// Mirror the platform's duration report, and adopt it as the displayed
-/// total ONLY when the manifest gave none (see the duration rule on
-/// `handleAudioEvent`).
-fn adoptPlatformDuration(model: *Model, reported_ms: u64) void {
-    if (reported_ms == 0) return;
-    const clamped: u32 = @intCast(@min(reported_ms, std.math.maxInt(u32)));
-    model.platform_duration_ms = clamped;
-    if (model.now_duration_ms == 0) model.now_duration_ms = clamped;
-}
-
-/// The play gesture on a specific track (double click, Enter, context
-/// paths): a different track starts fresh, the loaded one toggles
-/// play/pause in place. Either way the track becomes the selection —
-/// the playing row is the current row.
-fn playOrToggle(model: *Model, fx: *Effects, track_id: u8) void {
-    model.selected = track_id;
-    if (model.now == track_id) {
-        setPlaying(model, fx, !model.playing);
-    } else {
-        startTrack(model, fx, track_id);
-    }
-}
-
-const SelectionStep = enum { previous, next };
-
-/// Whether a track sits in the track list currently on screen — the
-/// domain the arrow-key selection walks. Songs tab: the search-filtered
-/// library (the same predicate `visibleTracks` renders). Album detail:
-/// the whole record, never filtered (matching `albumTrackRows`). The
-/// album GRID shows no track list, so arrows move nothing there.
-fn trackInCurrentList(model: *const Model, track: *const Track) bool {
-    return switch (model.tab) {
-        .songs => model.trackMatches(track),
-        .albums => if (model.open_album) |album_id| track.album == album_id else false,
-    };
-}
-
-/// Move the selection one row up or down the visible track list,
-/// clamped at the ends (no wrap — arrows at an edge hold, they never
-/// teleport). No selection yet (or one filtered out of view): down
-/// enters at the top, up at the bottom. One pass over the flattened
-/// track table, which IS view order for both list shapes.
-fn moveSelection(model: *Model, step: SelectionStep) void {
-    var first: ?u8 = null;
-    var last: ?u8 = null;
-    var before: ?u8 = null;
-    var after: ?u8 = null;
-    var seen_selected = false;
-    for (&tracks) |*track| {
-        if (!trackInCurrentList(model, track)) continue;
-        if (first == null) first = track.id;
-        last = track.id;
-        if (model.selected == track.id) {
-            seen_selected = true;
-        } else if (!seen_selected) {
-            before = track.id;
-        } else if (after == null) {
-            after = track.id;
-        }
-    }
-    const target: ?u8 = switch (step) {
-        .next => if (seen_selected) (after orelse model.selected) else first,
-        .previous => if (seen_selected) (before orelse model.selected) else last,
-    };
-    if (target) |id| model.selected = id;
-}
-
-/// One presented frame while playing: advance the rendered clock by the
-/// real frame delta, clamped to a few display intervals so a stale gap
-/// (resume after pause, an occluded window, boot) steps gently instead
-/// of lurching, and capped at the duration. Motion-gated twice — the
-/// `on_frame` hook only emits the Msg while playing, and this re-checks
-/// so a replayed journal straddling a pause boundary stays exact.
-fn advanceRenderedClock(model: *Model, frame: FrameClock) void {
-    const last = model.frame_ns;
-    model.frame_ns = frame.timestamp_ns;
-    if (!model.playing or model.now == null or model.buffering) return;
-    const interval: u64 = if (frame.interval_ns > 0) frame.interval_ns else std.time.ns_per_s / 60;
-    const delta_ns: u64 = if (last == 0 or frame.timestamp_ns <= last)
-        interval
-    else
-        @min(frame.timestamp_ns - last, interval * 4);
-    const advanced = @as(u64, model.elapsed_ms) + delta_ns / std.time.ns_per_ms;
-    const limit: u64 = if (model.now_duration_ms > 0) model.now_duration_ms else advanced;
-    model.elapsed_ms = @intCast(@min(advanced, limit));
-}
-
-fn startTrack(model: *Model, fx: *Effects, track_id: u8) void {
-    const track = trackById(track_id);
-    model.now = track_id;
-    // Starting a track selects it: the playing row is the current row
-    // for the arrow keys and the inverted accent register alike.
-    model.selected = track_id;
-    // `elapsed_ms` restarts here and advances with frame-clock messages
-    // corrected by position events — it is also the motion clock for
-    // the now-playing slide-in window, so animation gating replays
-    // deterministically (no live clock read anywhere).
-    model.elapsed_ms = 0;
-    // The manifest's measured duration is the total for the whole
-    // playback — the same number the track lists render, so the two
-    // surfaces agree by construction (the duration rule on
-    // `handleAudioEvent`). The platform's estimate mirror restarts too.
-    model.now_duration_ms = track.duration_ms;
-    model.platform_duration_ms = 0;
-    // A fresh attempt clears the degraded notices; if the source is
-    // still unplayable the `.failed` event raises the right one again.
-    model.assets_missing = false;
-    model.stream_failed = false;
-    model.buffering = false;
-    model.playing = true;
-    // The source cascade rides ONE playAudio call: the prepared local
-    // file first, then (URL base configured) the track's URL — where
-    // the platform plays a verified cache entry locally or streams
-    // progressively while filling the cache, keyed by the URL's hash
-    // under the platform caches directory. `expected_bytes` is the
-    // manifest's prepared size, the integrity gate that keeps partial
-    // or stale cache entries from ever playing. The strings are copied
-    // at call time, so stack buffers are fine here.
-    var url_buffer: [max_url_base + 512]u8 = undefined;
-    var url: []const u8 = "";
-    if (model.streamingConfigured()) {
-        url = std.fmt.bufPrint(&url_buffer, "{s}/{s}", .{ model.urlBase(), track.file }) catch "";
-    }
-    var cache_buffer: [max_cache_dir + 128]u8 = undefined;
-    var cache_path: []const u8 = "";
-    if (url.len > 0 and model.cacheDir().len > 0) {
-        cache_path = native_sdk.audioCachePath(&cache_buffer, model.cacheDir(), url) catch "";
-    }
-    // One player total: a new playAudio replaces whatever played before,
-    // and the track id keys every event back to this playback.
-    fx.playAudio(.{
-        .key = track_id,
-        .path = track.path,
-        .url = url,
-        .cache_path = cache_path,
-        .expected_bytes = track.bytes,
-        .on_event = Effects.audioMsg(.audio_event),
-    });
-}
-
-/// Play/pause drive the platform player in place; the optimistic flag
-/// keeps the transport responsive and the next audio event confirms it.
-fn setPlaying(model: *Model, fx: *Effects, playing: bool) void {
-    model.playing = playing;
-    if (playing) {
-        fx.resumeAudio();
-    } else {
-        fx.pauseAudio();
-    }
-}
-
-/// The play-next queue wins; otherwise the next track in the same album,
-/// wrapping at the end of the record.
-fn advance(model: *Model, fx: *Effects) void {
-    if (model.popQueue()) |queued| {
-        startTrack(model, fx, queued);
-        return;
-    }
-    const track = model.nowTrack() orelse return;
-    const album_tracks = albumTracks(track.album);
-    const next_index = @as(usize, track.number) % album_tracks.len;
-    startTrack(model, fx, album_tracks[next_index].id);
-}
-
-/// Restart the current track when it is a few seconds in; otherwise the
-/// previous track in the album, wrapping backwards.
-fn previous(model: *Model, fx: *Effects) void {
-    const track = model.nowTrack() orelse return;
-    if (model.elapsed_ms > 3000) {
-        model.elapsed_ms = 0;
-        fx.seekAudio(0);
-        return;
-    }
-    const album_tracks = albumTracks(track.album);
-    const prev_index = (@as(usize, track.number) + album_tracks.len - 2) % album_tracks.len;
-    startTrack(model, fx, album_tracks[prev_index].id);
-}
diff --git a/examples/soundboard/src/nowplaying.native b/examples/soundboard/src/nowplaying.native
deleted file mode 100644
index bfc9e5358..000000000
--- a/examples/soundboard/src/nowplaying.native
+++ /dev/null
@@ -1,48 +0,0 @@
-<!-- The now-playing transport bar. The circular cover is the one image
-     binding markup carries (the avatar's u64 ImageId); progress is a seek
-     slider whose reconciled value reaches update through the sync hook.
-     Playback is REAL audio through the runtime audio effect family; the
-     player's position events advance the elapsed label and the slider —
-     see model.zig. The title/artist lines double as the status surface:
-     a failed load swaps in the assets-not-prepared notice so the user
-     knows to run the prepare script.
-     The transport is icon-only buttons via the button icon attribute:
-     the icon is part of the button's own rendering, so each control is
-     ONE hit target whose icon follows the enabled/disabled tint (no
-     overlay stacking, no duplicated handlers). All three transport
-     buttons share ONE register (sm ghost) — the play/pause control is
-     not a filled-accent standout; it reads as a peer of prev/next. It
-     binds its icon to the model (icon="{playPauseIcon}"), so one button
-     swaps its glyph with playback state - no if/else arms, no shared
-     key. The waveform mark TRAILS the title (a listening indicator, not
-     a leading bullet) and is the app's OWN registered vector icon
-     reached through the app: namespace (see app_icons in main.zig);
-     native check verifies the name against the model contract. -->
-<column>
-  <separator />
-  <row height="76" padding="12" gap="14" cross="center" background="surface" label="Now playing bar">
-    <avatar image="{nowPlayingCover}" width="52" height="52" label="Now playing cover">{nowPlayingInitials}</avatar>
-    <column width="220" gap="2">
-      <row gap="6" cross="center">
-        <text label="Now playing title">{nowPlayingTitle}</text>
-        <icon name="app:waveform" width="14" height="14" foreground="text_muted" />
-      </row>
-      <text size="sm" foreground="text_muted">{nowPlayingArtist}</text>
-    </column>
-    <row gap="6" cross="center">
-      <button size="sm" variant="ghost" icon="skip-back" disabled="{idle}" on-press="prev_track" label="Previous track"></button>
-      <button size="sm" variant="ghost" icon="{playPauseIcon}" on-press="toggle_play" label="Play or pause"></button>
-      <button size="sm" variant="ghost" icon="skip-forward" disabled="{idle}" on-press="next_track" label="Next track"></button>
-    </row>
-    <!-- Fixed time columns: a stamp like "1:22" must never ellipsize
-         into "1…", so the explicit clip keeps the format; the width
-         covers the widest stamp with the layout audit's long-content
-         slack, since clip means any hidden glyph is silent. -->
-    <text size="sm" foreground="text_muted" width="46" wrap="false" overflow="clip">{elapsedLabel}</text>
-    <slider grow="1" value="{progressFraction}" disabled="{idle}" on-change="seeked" label="Seek" />
-    <text size="sm" foreground="text_muted" width="46" wrap="false" overflow="clip">{durationLabel}</text>
-    <if test="{queue_len > 0}">
-      <badge variant="secondary">{queue_len} queued</badge>
-    </if>
-  </row>
-</column>
diff --git a/examples/soundboard-ts/src/player.ts b/examples/soundboard/src/player.ts
similarity index 98%
rename from examples/soundboard-ts/src/player.ts
rename to examples/soundboard/src/player.ts
index 907fe010a..9c1d625be 100644
--- a/examples/soundboard-ts/src/player.ts
+++ b/examples/soundboard/src/player.ts
@@ -1,4 +1,4 @@
-// soundboard-ts player module: the pure playback state machine — track
+// soundboard player module: the pure playback state machine — track
 // starts, queue advance, and the launch-override stream URL rule. Everything here takes the committed Model in and returns the
 // next value out; the audioPlay/pause/seek COMMANDS themselves are built
 // inline in core.ts's update returns (commands live in update's return
diff --git a/examples/soundboard/src/tests.zig b/examples/soundboard/src/tests.zig
deleted file mode 100644
index b7b042dd6..000000000
--- a/examples/soundboard/src/tests.zig
+++ /dev/null
@@ -1,2678 +0,0 @@
-//! soundboard tests: typed dispatch through the composed tree (markup +
-//! Zig sections), real audio playback driven through the fake effects
-//! executor (playback requests, fed audio events, the pbcopy spawn), the
-//! cover decode -> register -> draw path through the null platform's
-//! strict decoder, theming, and engine parity for the markup sections.
-//! Every content assertion derives from the imported music manifest —
-//! no literal titles, ids, or counts — so the suite follows the catalog.
-
-const std = @import("std");
-const native_sdk = @import("native_sdk");
-const main = @import("main.zig");
-const model_mod = @import("model.zig");
-const theme = @import("theme.zig");
-const view_mod = @import("view.zig");
-
-const canvas = native_sdk.canvas;
-const geometry = native_sdk.geometry;
-const testing = std.testing;
-
-const Model = main.Model;
-const Msg = main.Msg;
-const Ui = view_mod.Ui;
-const App = main.SoundboardApp;
-
-// ------------------------------------------------------------- tree utils
-
-fn buildTree(arena: std.mem.Allocator, model: *const Model) !Ui.Tree {
-    // Tree tests build views like the live app: with the app icon table
-    // installed (registration is idempotent - one static table).
-    main.registerIcons();
-    var ui = Ui.init(arena);
-    return ui.finalizeWithTokens(view_mod.rootView(&ui, model), main.tokensFromModel(model));
-}
-
-fn findByText(widget: canvas.Widget, kind: canvas.WidgetKind, text: []const u8) ?canvas.Widget {
-    if (widget.kind == kind and std.mem.eql(u8, widget.text, text)) return widget;
-    for (widget.children) |child| {
-        if (findByText(child, kind, text)) |found| return found;
-    }
-    return null;
-}
-
-fn findByKind(widget: canvas.Widget, kind: canvas.WidgetKind) ?canvas.Widget {
-    if (widget.kind == kind) return widget;
-    for (widget.children) |child| {
-        if (findByKind(child, kind)) |found| return found;
-    }
-    return null;
-}
-
-fn findByLabel(widget: canvas.Widget, label: []const u8) ?canvas.Widget {
-    if (std.mem.eql(u8, widget.semantics.label, label)) return widget;
-    for (widget.children) |child| {
-        if (findByLabel(child, label)) |found| return found;
-    }
-    return null;
-}
-
-fn countListItems(widget: canvas.Widget) usize {
-    var total: usize = 0;
-    if (widget.semantics.role == .listitem) total += 1;
-    for (widget.children) |child| total += countListItems(child);
-    return total;
-}
-
-/// Update with a throwaway effects channel for tree-level tests that do
-/// not assert on effect requests.
-fn apply(model: *Model, msg: Msg) void {
-    var fx = model_mod.Effects.init(testing.allocator);
-    defer fx.deinit();
-    fx.executor = .fake;
-    main.update(model, msg, &fx);
-}
-
-// -------------------------------------------------------------- app utils
-
-const surface_size = geometry.SizeF.init(main.window_width, main.window_height);
-
-const LiveApp = struct {
-    harness: *native_sdk.TestHarness(),
-    app_state: *App,
-    size: geometry.SizeF,
-
-    fn start(image_decode: bool) !LiveApp {
-        return startSized(image_decode, surface_size);
-    }
-
-    /// Start against an explicit surface size — the compact-shell tests
-    /// run the same app on a phone-sized surface.
-    fn startSized(image_decode: bool, size: geometry.SizeF) !LiveApp {
-        // The same boot-time act main performs: install the app icon
-        // table before any view builds, so app: markup references
-        // resolve here exactly like in the shipped app.
-        main.registerIcons();
-        const harness = try native_sdk.TestHarness().create(testing.allocator, .{ .size = size });
-        errdefer harness.destroy(testing.allocator);
-        harness.null_platform.gpu_surfaces = true;
-        harness.null_platform.image_decode = image_decode;
-
-        const app_state = try testing.allocator.create(App);
-        errdefer testing.allocator.destroy(app_state);
-        app_state.* = App.init(std.heap.page_allocator, .{}, main.soundboardOptions());
-        app_state.effects.executor = .fake;
-        try harness.start(app_state.app());
-        try harness.runtime.dispatchPlatformEvent(app_state.app(), .{ .gpu_surface_frame = .{
-            .label = main.canvas_label,
-            .size = size,
-            .scale_factor = 1,
-            .frame_index = 1,
-            .timestamp_ns = 1_000_000,
-            .nonblank = true,
-        } });
-        return .{ .harness = harness, .app_state = app_state, .size = size };
-    }
-
-    fn stop(self: LiveApp) void {
-        self.app_state.deinit();
-        testing.allocator.destroy(self.app_state);
-        self.harness.destroy(testing.allocator);
-    }
-
-    fn dispatch(self: LiveApp, msg: Msg) !void {
-        try self.app_state.dispatch(&self.harness.runtime, 1, msg);
-    }
-
-    fn wake(self: LiveApp) !void {
-        try self.harness.runtime.dispatchPlatformEvent(self.app_state.app(), .wake);
-    }
-
-    /// One raw key_down through the REAL gpu input path — the same event
-    /// a physical key press produces (key name plus the inserted text,
-    /// when the key types one).
-    fn keyDown(self: LiveApp, name: []const u8, text: []const u8) !void {
-        try self.harness.runtime.dispatchPlatformEvent(self.app_state.app(), .{ .gpu_surface_input = .{
-            .label = main.canvas_label,
-            .kind = .key_down,
-            .key = name,
-            .text = text,
-        } });
-    }
-
-    /// Resolve a live widget id by kind plus semantics label (falling
-    /// back to the widget's text when the label is empty, the way tab
-    /// segments carry only text). Ids can change across rebuilds:
-    /// re-resolve after each dispatch.
-    fn widgetIdByLabel(self: LiveApp, kind: canvas.WidgetKind, label: []const u8) !canvas.ObjectId {
-        const layout = try self.harness.runtime.canvasWidgetLayout(1, main.canvas_label);
-        for (layout.nodes) |node| {
-            if (node.widget.kind != kind) continue;
-            if (std.mem.eql(u8, node.widget.semantics.label, label)) return node.widget.id;
-            if (node.widget.semantics.label.len == 0 and std.mem.eql(u8, node.widget.text, label)) return node.widget.id;
-        }
-        return error.WidgetNotFound;
-    }
-
-    /// Move keyboard focus onto a widget through the automation verb —
-    /// what `native automate widget-action <view> <id> focus` does.
-    /// This is QUIET focus (the pointer/programmatic contract, no ring):
-    /// on a plain list row the runtime treats it as transparent to keys.
-    fn focusWidget(self: LiveApp, id: canvas.ObjectId) !void {
-        var command_buffer: [96]u8 = undefined;
-        const line = try std.fmt.bufPrint(&command_buffer, "widget-action {s} {d} focus", .{ main.canvas_label, id });
-        try self.harness.runtime.dispatchAutomationCommand(self.app_state.app(), line);
-    }
-
-    /// Escalate focus to the RING register — the state a Tab landing
-    /// produces (focused AND focus-visible). Tests pin ring-vs-quiet
-    /// behavior with this instead of scripting a whole Tab walk to the
-    /// target, which would re-pin the tab order as a side effect.
-    fn focusWidgetRing(self: LiveApp, id: canvas.ObjectId) !void {
-        try self.focusWidget(id);
-        for (self.harness.runtime.views[0..self.harness.runtime.view_count]) |*view| {
-            if (std.mem.eql(u8, view.label, main.canvas_label)) view.canvas_widget_focus_visible_id = id;
-        }
-    }
-
-    /// The canvas view's focus-visible id (0 = no ring anywhere) — the
-    /// assertion surface for "arrows never dress rows in the ring".
-    fn focusVisibleId(self: LiveApp) canvas.ObjectId {
-        for (self.harness.runtime.views[0..self.harness.runtime.view_count]) |*view| {
-            if (std.mem.eql(u8, view.label, main.canvas_label)) return view.canvas_widget_focus_visible_id;
-        }
-        return 0;
-    }
-
-    /// One raw pointer event through the real gpu input path, WITH a
-    /// timestamp: the runtime derives multi-click counts from stamped
-    /// downs (zero timestamps honestly never chain), so double-click
-    /// tests must stamp like a real host does.
-    fn pointer(self: LiveApp, kind: native_sdk.platform.GpuSurfaceInputKind, x: f32, y: f32, timestamp_ns: u64) !void {
-        try self.harness.runtime.dispatchPlatformEvent(self.app_state.app(), .{ .gpu_surface_input = .{
-            .window_id = 1,
-            .label = main.canvas_label,
-            .kind = kind,
-            .timestamp_ns = timestamp_ns,
-            .x = x,
-            .y = y,
-        } });
-    }
-
-    /// A stamped click (down + up) at a point.
-    fn click(self: LiveApp, x: f32, y: f32, timestamp_ns: u64) !void {
-        try self.pointer(.pointer_down, x, y, timestamp_ns);
-        try self.pointer(.pointer_up, x, y, timestamp_ns + 10 * std.time.ns_per_ms);
-    }
-
-    /// A live widget's laid-out frame by kind + label (label falls back
-    /// to text, like `widgetIdByLabel`).
-    fn widgetFrameByLabel(self: LiveApp, kind: canvas.WidgetKind, label: []const u8) !geometry.RectF {
-        const layout = try self.harness.runtime.canvasWidgetLayout(1, main.canvas_label);
-        for (layout.nodes) |node| {
-            if (node.widget.kind != kind) continue;
-            if (std.mem.eql(u8, node.widget.semantics.label, label) or
-                (node.widget.semantics.label.len == 0 and std.mem.eql(u8, node.widget.text, label)))
-            {
-                return node.frame.normalized();
-            }
-        }
-        return error.WidgetNotFound;
-    }
-};
-
-// ------------------------------------------------------------------ tests
-
-test "the committed art is JPEG: the strict decoder degrades boot to initials" {
-    // The real covers decode live through the platform codec seam
-    // (macOS opens JPEG), but the null platform's strict test decoder
-    // speaks only the deterministic PNG subset — so under tests boot
-    // registers NOTHING and every album keeps its initials fallback.
-    // That is the honest codec-less-host state, pinned here with the
-    // decoder ON; the next test pins the same degrade with it off.
-    const live = try LiveApp.start(true);
-    defer live.stop();
-
-    try testing.expectEqual(@as(usize, 0), live.harness.runtime.registeredCanvasImageCount());
-    for (live.app_state.model.covers) |cover| {
-        try testing.expectEqual(@as(canvas.ImageId, 0), cover);
-    }
-
-    // Boot survived and the grid still renders one avatar per album
-    // (initials render at id 0), so a codec gap can never break the UI.
-    const layout = try live.harness.runtime.canvasWidgetLayout(1, main.canvas_label);
-    var avatars: usize = 0;
-    for (layout.nodes) |node| {
-        if (node.widget.kind == .avatar) avatars += 1;
-    }
-    try testing.expect(avatars >= model_mod.albums.len);
-}
-
-test "a codec-less platform degrades to initials, never a broken boot" {
-    const live = try LiveApp.start(false);
-    defer live.stop();
-
-    try testing.expectEqual(@as(usize, 0), live.harness.runtime.registeredCanvasImageCount());
-    for (live.app_state.model.covers) |cover| {
-        try testing.expectEqual(@as(canvas.ImageId, 0), cover);
-    }
-    // Avatars still render (initials fallback), so the grid stays whole.
-    const layout = try live.harness.runtime.canvasWidgetLayout(1, main.canvas_label);
-    var avatars: usize = 0;
-    for (layout.nodes) |node| {
-        if (node.widget.kind == .avatar) avatars += 1;
-    }
-    try testing.expect(avatars >= model_mod.albums.len);
-}
-
-test "play, pause, and seek drive the real audio effect" {
-    const live = try LiveApp.start(true);
-    defer live.stop();
-    const app_state = live.app_state;
-    const fx = &app_state.effects;
-    const track = model_mod.trackById(1);
-
-    // Play: the fake executor records the playback request whole — the
-    // track id keys it and the path is the comptime-built assets path.
-    try live.dispatch(.{ .play_track = track.id });
-    try testing.expect(app_state.model.playing);
-    try testing.expectEqual(@as(?u8, track.id), app_state.model.now);
-    const request = fx.pendingAudio().?;
-    try testing.expectEqual(@as(u64, track.id), request.key);
-    try testing.expectEqualStrings(track.path, request.path);
-    try testing.expect(request.playing);
-
-    // The manifest duration is the displayed total for the whole
-    // playback; the platform's `.loaded` report is an estimate for this
-    // catalog (the prepared files ship without a seek header) and only
-    // lands in the mirror — the duration rule on `handleAudioEvent`.
-    try testing.expectEqual(track.duration_ms, app_state.model.now_duration_ms);
-    const decoded_ms: u64 = @as(u64, track.duration_ms) + 240;
-    try fx.feedAudioEvent(.loaded, 0, decoded_ms, true);
-    try live.wake();
-    try testing.expectEqual(track.duration_ms, app_state.model.now_duration_ms);
-    try testing.expectEqual(@as(u32, @intCast(decoded_ms)), app_state.model.platform_duration_ms);
-
-    // Position ticks advance the elapsed clock and its rendered label.
-    try fx.feedAudioEvent(.position, 61_000, decoded_ms, true);
-    try live.wake();
-    try testing.expectEqual(@as(u32, 61_000), app_state.model.elapsed_ms);
-    var arena_state = std.heap.ArenaAllocator.init(testing.allocator);
-    defer arena_state.deinit();
-    try testing.expectEqualStrings("1:01", app_state.model.elapsedLabel(arena_state.allocator()));
-
-    // Pause and resume drive the single player in place — the snapshot
-    // mirrors what the platform was told.
-    try live.dispatch(.toggle_play);
-    try testing.expect(!app_state.model.playing);
-    try testing.expect(!fx.audioSnapshot().playing);
-    try live.dispatch(.toggle_play);
-    try testing.expect(app_state.model.playing);
-    try testing.expect(fx.audioSnapshot().playing);
-
-    // Seek through the real path: a semantic increment steps the
-    // runtime's slider, `on-change` dispatches `.seeked`, the sync hook
-    // mirrors the reconciled value into the model, and update forwards
-    // the target to the player.
-    const slider = findByKind(app_state.tree.?.root, .slider).?;
-    var command_buffer: [96]u8 = undefined;
-    const step = try std.fmt.bufPrint(&command_buffer, "widget-action {s} {d} increment", .{ main.canvas_label, slider.id });
-    try live.harness.runtime.dispatchAutomationCommand(app_state.app(), step);
-    try testing.expect(app_state.model.seek_fraction > 0);
-    const duration: f32 = @floatFromInt(app_state.model.now_duration_ms);
-    const expected = app_state.model.seek_fraction * duration;
-    try testing.expectApproxEqAbs(expected, @as(f32, @floatFromInt(app_state.model.elapsed_ms)), 1);
-    try testing.expectEqual(@as(u64, app_state.model.elapsed_ms), fx.audioSnapshot().position_ms);
-
-    // The next position tick reports from the seeked position; the model
-    // follows the platform's clock.
-    const after_seek = fx.audioSnapshot().position_ms + 500;
-    try fx.feedAudioEvent(.position, after_seek, decoded_ms, true);
-    try live.wake();
-    try testing.expectEqual(@as(u32, @intCast(after_seek)), app_state.model.elapsed_ms);
-}
-
-test "a rail click on the seek bar jumps playback; a drag keeps scrubbing" {
-    // Regression: the engine's slider pointer path applied the value as
-    // a visual echo but never dispatched `on-change`, so clicking the
-    // track-progress rail moved the thumb on screen while `.seeked`
-    // never fired — no seekAudio, and the next position tick snapped
-    // the bar back. This drives the REAL pointer pipeline: platform
-    // pointer input on the rail -> the runtime jumps the thumb to the
-    // pressed point -> `on-change` dispatches `.seeked` -> the sync
-    // hook mirrors the fraction -> update forwards the target to the
-    // player.
-    const live = try LiveApp.start(true);
-    defer live.stop();
-    const app_state = live.app_state;
-    const fx = &app_state.effects;
-    const track = model_mod.trackById(1);
-
-    try live.dispatch(.{ .play_track = track.id });
-    const duration_ms: u64 = track.duration_ms;
-    try fx.feedAudioEvent(.loaded, 0, duration_ms, true);
-    try live.wake();
-
-    // The seek slider's laid-out rail, from the runtime's live layout.
-    const rail = blk: {
-        const layout = try live.harness.runtime.canvasWidgetLayout(1, main.canvas_label);
-        for (layout.nodes) |node| {
-            if (node.widget.kind == .slider) break :blk node.frame.normalized();
-        }
-        return error.TestUnexpectedResult;
-    };
-    const rail_y = rail.y + rail.height / 2;
-
-    // Click 4/5 along the rail: playback jumps there in one press.
-    try live.harness.runtime.dispatchPlatformEvent(app_state.app(), .{ .gpu_surface_input = .{
-        .window_id = 1,
-        .label = main.canvas_label,
-        .kind = .pointer_down,
-        .x = rail.x + rail.width * 0.8,
-        .y = rail_y,
-    } });
-    try testing.expectApproxEqAbs(@as(f32, 0.8), app_state.model.seek_fraction, 0.001);
-    const duration: f32 = @floatFromInt(app_state.model.now_duration_ms);
-    try testing.expectApproxEqAbs(app_state.model.seek_fraction * duration, @as(f32, @floatFromInt(app_state.model.elapsed_ms)), 1);
-    try testing.expectEqual(@as(u64, app_state.model.elapsed_ms), fx.audioSnapshot().position_ms);
-
-    // Keep the press and drag back to 2/5: the scrub follows live, the
-    // player seeking with every step.
-    try live.harness.runtime.dispatchPlatformEvent(app_state.app(), .{ .gpu_surface_input = .{
-        .window_id = 1,
-        .label = main.canvas_label,
-        .kind = .pointer_drag,
-        .x = rail.x + rail.width * 0.4,
-        .y = rail_y,
-    } });
-    try live.harness.runtime.dispatchPlatformEvent(app_state.app(), .{ .gpu_surface_input = .{
-        .window_id = 1,
-        .label = main.canvas_label,
-        .kind = .pointer_up,
-        .x = rail.x + rail.width * 0.4,
-        .y = rail_y,
-    } });
-    try testing.expectApproxEqAbs(@as(f32, 0.4), app_state.model.seek_fraction, 0.001);
-    try testing.expectEqual(@as(u64, app_state.model.elapsed_ms), fx.audioSnapshot().position_ms);
-
-    // The next position tick reports from the seeked position, and the
-    // RENDERED slider value (the played/remaining split) agrees with it
-    // — seeking never desyncs the visual from the clock.
-    const after_seek = fx.audioSnapshot().position_ms + 500;
-    try fx.feedAudioEvent(.position, after_seek, duration_ms, true);
-    try live.wake();
-    try testing.expectEqual(@as(u32, @intCast(after_seek)), app_state.model.elapsed_ms);
-    const layout = try live.harness.runtime.canvasWidgetLayout(1, main.canvas_label);
-    var slider_value: ?f32 = null;
-    for (layout.nodes) |node| {
-        if (node.widget.kind == .slider) slider_value = node.widget.value;
-    }
-    const expected_fraction = @as(f32, @floatFromInt(after_seek)) / duration;
-    try testing.expectApproxEqAbs(expected_fraction, slider_value.?, 0.0001);
-}
-
-test "the seek bar's rendered value advances with position events" {
-    // Regression: the slider reconcile used to retain its runtime value
-    // unconditionally, so the model-driven `value="{progressFraction}"`
-    // binding froze at 0 after mount - elapsed time ticked, the bar did
-    // not. The reconcile now follows the source when it moves.
-    const live = try LiveApp.start(true);
-    defer live.stop();
-    const app_state = live.app_state;
-    const fx = &app_state.effects;
-    const track = model_mod.trackById(1);
-
-    try live.dispatch(.{ .play_track = track.id });
-    const duration_ms: u64 = track.duration_ms;
-    try fx.feedAudioEvent(.loaded, 0, duration_ms, true);
-    try live.wake();
-
-    // Four position events through the fake effects executor: elapsed
-    // and the RENDERED slider value advance in lockstep.
-    const duration: f32 = @floatFromInt(duration_ms);
-    for (1..5) |ticks| {
-        const position_ms: u64 = @intCast(500 * ticks);
-        try fx.feedAudioEvent(.position, position_ms, duration_ms, true);
-        try live.wake();
-        try testing.expectEqual(@as(u32, @intCast(position_ms)), app_state.model.elapsed_ms);
-
-        const layout = try live.harness.runtime.canvasWidgetLayout(1, main.canvas_label);
-        var slider_value: ?f32 = null;
-        for (layout.nodes) |node| {
-            if (node.widget.kind == .slider) slider_value = node.widget.value;
-        }
-        const expected_fraction = @as(f32, @floatFromInt(position_ms)) / duration;
-        try testing.expectApproxEqAbs(expected_fraction, slider_value.?, 0.0001);
-    }
-}
-
-test "a divergent platform duration never moves the displayed total off the manifest" {
-    // Regression: the transport bar used to adopt the platform player's
-    // duration report as its total while the track lists rendered the
-    // manifest value, so the same track showed two different lengths at
-    // once. The platform's number is an ESTIMATE for this catalog (the
-    // prepared files ship without a seek header, so a decoder can only
-    // extrapolate from bitrate — a progressive stream's early guess has
-    // measured minutes wrong, and even local playback reads seconds
-    // long). The duration rule on `handleAudioEvent`: the manifest total
-    // drives every display and the seek scale; the platform's report is
-    // mirrored, never displayed while the manifest has a value.
-    const live = try LiveApp.start(true);
-    defer live.stop();
-    const app_state = live.app_state;
-    const fx = &app_state.effects;
-    const track = model_mod.trackById(1);
-
-    try live.dispatch(.{ .play_track = track.id });
-
-    // A wildly high estimate — the mid-stream guess class of error.
-    const estimate_ms: u64 = @as(u64, track.duration_ms) + 104_000;
-    try fx.feedAudioEvent(.loaded, 0, estimate_ms, true);
-    try live.wake();
-    try fx.feedAudioEvent(.position, 30_000, estimate_ms, true);
-    try live.wake();
-
-    // The displayed total stays the manifest value through the load and
-    // every tick; the estimate is observable in the mirror only.
-    try testing.expectEqual(track.duration_ms, app_state.model.now_duration_ms);
-    try testing.expectEqual(@as(u32, @intCast(estimate_ms)), app_state.model.platform_duration_ms);
-
-    // The two surfaces agree: the transport's total label is the exact
-    // string the track list renders for the same track.
-    var arena_state = std.heap.ArenaAllocator.init(testing.allocator);
-    defer arena_state.deinit();
-    const arena = arena_state.allocator();
-    const rows = app_state.model.albumTrackRows(arena, track.album);
-    try testing.expectEqual(track.id, rows[0].id);
-    try testing.expectEqualStrings(rows[0].duration, app_state.model.durationLabel(arena));
-
-    // The scrubber fraction is elapsed over the MANIFEST total — sane,
-    // not shrunk by the inflated estimate.
-    const manifest_total: f32 = @floatFromInt(track.duration_ms);
-    const expected_fraction = 30_000.0 / manifest_total;
-    try testing.expectApproxEqAbs(expected_fraction, app_state.model.progressFraction(), 0.0001);
-
-    // A seek lands where the user pointed on the displayed timeline:
-    // the platform target is fraction times the manifest total, the
-    // same scale the scrubber renders.
-    const slider = findByKind(app_state.tree.?.root, .slider).?;
-    var command_buffer: [96]u8 = undefined;
-    const step = try std.fmt.bufPrint(&command_buffer, "widget-action {s} {d} increment", .{ main.canvas_label, slider.id });
-    try live.harness.runtime.dispatchAutomationCommand(app_state.app(), step);
-    try testing.expect(app_state.model.seek_fraction > 0);
-    const expected_target = app_state.model.seek_fraction * manifest_total;
-    try testing.expectApproxEqAbs(expected_target, @as(f32, @floatFromInt(app_state.model.elapsed_ms)), 1);
-    try testing.expectEqual(@as(u64, app_state.model.elapsed_ms), fx.audioSnapshot().position_ms);
-
-    // Restarting a track resets the mirror with the rest of the
-    // playback state.
-    try live.dispatch(.{ .play_track = track.id + 1 });
-    try testing.expectEqual(@as(u32, 0), app_state.model.platform_duration_ms);
-    try testing.expectEqual(model_mod.trackById(track.id + 1).duration_ms, app_state.model.now_duration_ms);
-}
-
-test "space is the app-wide transport key; ring focus outranks it, quiet rows do not" {
-    // The media-app convention, pinned end-to-end through the raw key
-    // path (the exact gpu input events a physical spacebar produces).
-    // The precedence rule under test, in order:
-    //   1. a RING-focused interactive widget consumes space for its OWN
-    //      activation (a tabbed-to track row selects, a header segment
-    //      switches) — and Enter on a ring-focused row is the row's
-    //      primary action: it plays;
-    //   2. a QUIETLY focused plain list row (the state a click leaves
-    //      behind) is transparent: space stays the transport toggle —
-    //      clicking around a music library must never re-aim the
-    //      spacebar;
-    //   3. a focused editable field keeps typing — structural, by
-    //      widget kind, so any future text field inherits it;
-    //   4. otherwise — nothing focused, a slider, a bare scroll region —
-    //      space falls through to the app-level transport toggle.
-    const live = try LiveApp.start(true);
-    defer live.stop();
-    const app_state = live.app_state;
-
-    // (4) From idle with NOTHING focused: space starts the catalog's
-    // first track through the fallback — no widget was involved.
-    try live.keyDown("space", " ");
-    try testing.expect(app_state.model.playing);
-    try testing.expectEqual(@as(?u8, model_mod.tracks[0].id), app_state.model.now);
-
-    // ... and the next bare space pauses in place.
-    try live.keyDown("space", " ");
-    try testing.expect(!app_state.model.playing);
-
-    // (2) QUIET focus on a DIFFERENT track row (what clicking it leaves
-    // behind): space is still the transport — it RESUMES the loaded
-    // track instead of playing the focused row, and the selection does
-    // not move either.
-    try live.dispatch(.show_songs);
-    const other = &model_mod.tracks[2];
-    try live.focusWidget(try live.widgetIdByLabel(.list_item, other.title));
-    try live.keyDown("space", " ");
-    try testing.expect(app_state.model.playing);
-    try testing.expectEqual(@as(?u8, model_mod.tracks[0].id), app_state.model.now);
-
-    // (1) RING focus on that row (the Tab contract): space activates
-    // the row — it SELECTS, playback untouched — and Enter plays it.
-    try live.focusWidgetRing(try live.widgetIdByLabel(.list_item, other.title));
-    try live.keyDown("space", " ");
-    try testing.expectEqual(@as(?u8, other.id), app_state.model.selected);
-    try testing.expectEqual(@as(?u8, model_mod.tracks[0].id), app_state.model.now);
-    try live.keyDown("enter", "");
-    try testing.expectEqual(@as(?u8, other.id), app_state.model.now);
-    try testing.expect(app_state.model.playing);
-
-    // (1) Focus the header's Albums segment (a button-group button):
-    // buttons keep their activation even under quiet focus — space
-    // switches the tab and the transport does not move.
-    try live.focusWidget(try live.widgetIdByLabel(.button, "Albums"));
-    try live.keyDown("space", " ");
-    try testing.expectEqual(model_mod.Tab.albums, app_state.model.tab);
-    try testing.expect(app_state.model.playing);
-
-    // (3) Focus the search field: a space keystroke is TYPING — the
-    // character lands in the query and playback is untouched. The
-    // exception is structural (widget kind), so it needs no per-field
-    // wiring in the app.
-    try live.focusWidget(try live.widgetIdByLabel(.search_field, "Search library"));
-    try live.keyDown("space", " ");
-    try testing.expectEqualStrings(" ", app_state.model.search());
-    try testing.expect(app_state.model.playing);
-    try testing.expectEqual(@as(?u8, other.id), app_state.model.now);
-    try live.dispatch(.{ .search_edit = .clear });
-
-    // (4) Focus the seek slider: space is not one of the slider's keys
-    // (arrows step, home/end jump), so it falls through and pauses.
-    try live.focusWidget(try live.widgetIdByLabel(.slider, "Seek"));
-    try live.keyDown("space", " ");
-    try testing.expect(!app_state.model.playing);
-
-    // (4) Focus the album grid's scroll region: space is not a scroll
-    // key either (arrows and page keys are), so it resumes from there
-    // too — "anywhere" includes plain content focus.
-    try live.focusWidget(try live.widgetIdByLabel(.scroll_view, "Album grid"));
-    try live.keyDown("space", " ");
-    try testing.expect(app_state.model.playing);
-}
-
-test "controlled scroll: the album grid keeps its offset through playback rebuilds" {
-    // The scroll regions are CONTROLLED: on_scroll stores the applied
-    // offset and value echoes it back, so a rebuild mid-scroll (a
-    // playback position event) can never restore an unechoed offset -
-    // and on macOS an id churn cannot make the native scroll driver snap
-    // the OS scroller back to the source offset.
-    const live = try LiveApp.start(true);
-    defer live.stop();
-    const app_state = live.app_state;
-
-    try live.dispatch(.{ .play_track = 1 });
-
-    // Wheel the album grid down through the real input path.
-    try live.harness.runtime.dispatchPlatformEvent(app_state.app(), .{ .gpu_surface_input = .{
-        .window_id = 1,
-        .label = main.canvas_label,
-        .kind = .scroll,
-        .x = main.window_width / 2,
-        .y = main.window_height / 2,
-        .delta_y = 180,
-    } });
-    try testing.expect(app_state.model.grid_scroll > 0);
-    const scrolled_offset = app_state.model.grid_scroll;
-
-    // A playback position event rebuilds the whole tree; the grid must
-    // hold.
-    try app_state.effects.feedAudioEvent(.position, 500, 0, true);
-    try live.wake();
-    const layout = try live.harness.runtime.canvasWidgetLayout(1, main.canvas_label);
-    var grid_offset: ?f32 = null;
-    for (layout.nodes) |node| {
-        if (node.widget.kind == .scroll_view) grid_offset = node.widget.value;
-    }
-    try testing.expectApproxEqAbs(scrolled_offset, grid_offset.?, 0.0001);
-    try testing.expectApproxEqAbs(scrolled_offset, app_state.model.grid_scroll, 0.0001);
-
-    // Opening a record resets the DETAIL region to its top while the
-    // grid offset stays owned by the model.
-    try live.dispatch(.{ .open_album = 2 });
-    try testing.expectEqual(@as(f32, 0), app_state.model.detail_scroll);
-    try testing.expectApproxEqAbs(scrolled_offset, app_state.model.grid_scroll, 0.0001);
-}
-
-test "track end auto-advances; the play-next queue wins over album order" {
-    const live = try LiveApp.start(true);
-    defer live.stop();
-    const app_state = live.app_state;
-    const fx = &app_state.effects;
-
-    // Play the library's first track; queue the LAST album's first track
-    // from another record via the context-menu message (both derived
-    // from the imported catalog, never hardcoded ids).
-    const first = model_mod.trackById(1);
-    const last_album = &model_mod.albums[model_mod.albums.len - 1];
-    const last_album_tracks = model_mod.albumTracks(last_album.id);
-    const queued = &last_album_tracks[0];
-    try live.dispatch(.{ .play_track = first.id });
-    try live.dispatch(.{ .queue_track = queued.id });
-    try testing.expectEqual(@as(usize, 1), app_state.model.queue_len);
-
-    // Natural end: the platform's one completion starts the queued
-    // track, and the NEXT recorded playback request carries its path.
-    const first_duration: u64 = first.duration_ms;
-    try fx.feedAudioEvent(.completed, first_duration, first_duration, false);
-    try live.wake();
-    try testing.expectEqual(@as(?u8, queued.id), app_state.model.now);
-    try testing.expectEqual(@as(usize, 0), app_state.model.queue_len);
-    try testing.expect(app_state.model.playing);
-    try testing.expectEqual(@as(u32, 0), app_state.model.elapsed_ms);
-    try testing.expectEqualStrings(queued.path, fx.pendingAudio().?.path);
-
-    // With an empty queue the album order advances to the record's next
-    // track and asks the player for its file.
-    const queued_duration: u64 = queued.duration_ms;
-    try fx.feedAudioEvent(.completed, queued_duration, queued_duration, false);
-    try live.wake();
-    const second = &last_album_tracks[1];
-    try testing.expectEqual(@as(?u8, second.id), app_state.model.now);
-    try testing.expectEqualStrings(second.path, fx.pendingAudio().?.path);
-
-    // next/prev wrap within the album — with its REAL track count, which
-    // varies per record.
-    try live.dispatch(.prev_track);
-    try testing.expectEqual(@as(?u8, queued.id), app_state.model.now);
-    try live.dispatch(.prev_track);
-    try testing.expectEqual(@as(?u8, last_album_tracks[last_album_tracks.len - 1].id), app_state.model.now);
-    try live.dispatch(.next_track);
-    try testing.expectEqual(@as(?u8, queued.id), app_state.model.now);
-}
-
-test "a failed load lands the honest assets-not-prepared state" {
-    // The audio files are gitignored (the prepare script produces
-    // them). With no URL base a missing file surfaces as one `.failed`
-    // event: playback clears, the now-playing bar tells the user what
-    // to run, and the catalog keeps browsing — never a crash, never
-    // silence.
-    const live = try LiveApp.start(true);
-    defer live.stop();
-    const app_state = live.app_state;
-    const fx = &app_state.effects;
-
-    // The committed manifest ships a hosted streaming default, so the
-    // assets notice is reachable only with the URL base cleared — the
-    // state NATIVE_SDK_MUSIC_URL_BASE set empty produces at launch.
-    app_state.model.setUrlBase("");
-
-    try live.dispatch(.{ .play_track = 1 });
-    try fx.feedAudioEvent(.failed, 0, 0, false);
-    try live.wake();
-
-    // Playback cleared, the notice raised, the audio channel idle.
-    try testing.expect(app_state.model.assets_missing);
-    try testing.expectEqual(@as(?u8, null), app_state.model.now);
-    try testing.expect(!app_state.model.playing);
-    try testing.expect(fx.pendingAudio() == null);
-
-    // The now-playing bar renders both lines of the notice verbatim.
-    const layout = try live.harness.runtime.canvasWidgetLayout(1, main.canvas_label);
-    var saw_title = false;
-    var saw_hint = false;
-    var cards: usize = 0;
-    for (layout.nodes) |node| {
-        if (std.mem.eql(u8, node.widget.text, model_mod.assets_missing_title)) saw_title = true;
-        if (std.mem.eql(u8, node.widget.text, model_mod.assets_missing_hint)) saw_hint = true;
-        if (node.widget.semantics.role == .listitem) cards += 1;
-    }
-    try testing.expect(saw_title);
-    try testing.expect(saw_hint);
-    // Browsing survives fully: the grid still lists the whole catalog.
-    try testing.expectEqual(model_mod.albums.len, cards);
-
-    // A fresh play attempt clears the notice optimistically — if the
-    // assets are still absent, the next `.failed` event raises it again.
-    try live.dispatch(.toggle_play);
-    try testing.expect(!app_state.model.assets_missing);
-    try testing.expect(fx.pendingAudio() != null);
-}
-
-test "streaming is the committed default; the launch override replaces it" {
-    // The committed manifest ships a hosted .url_base, so a fresh clone
-    // streams the catalog with zero setup: a bare model boots with the
-    // manifest value installed. setUrlBase — main's launch path for
-    // NATIVE_SDK_MUSIC_URL_BASE — replaces it wholesale (trailing slash
-    // trimmed so URL assembly stays uniform), and the empty override is
-    // the one honest way to a local-only, notice-bearing state.
-    var model = Model{};
-    try testing.expect(model_mod.manifest_url_base.len > 0);
-    try testing.expectEqualStrings(model_mod.manifest_url_base, model.urlBase());
-    try testing.expect(model.streamingConfigured());
-    model.setUrlBase("http://127.0.0.1:8000/pack/");
-    try testing.expectEqualStrings("http://127.0.0.1:8000/pack", model.urlBase());
-    model.setUrlBase("");
-    try testing.expect(!model.streamingConfigured());
-}
-
-test "resolution order is honest: local file, then cache, then stream" {
-    // The full source cascade against the null platform's fake player —
-    // the same PlatformServices seam AVAudioPlayer/AVPlayer serve on
-    // macOS — with the REAL effects executor, so the effects layer's
-    // resolution (not a test stub) decides where the bytes come from.
-    const live = try LiveApp.start(false);
-    defer live.stop();
-    const app_state = live.app_state;
-    const fx = &app_state.effects;
-    const np = &live.harness.null_platform;
-    fx.executor = .real;
-    app_state.model.setUrlBase("https://music.example.test/pack/");
-    app_state.model.setCacheDir("/tmp/fake-caches/soundboard");
-    // 1. The prepared local file wins when it exists (the fake's
-    //    default): no URL is ever consulted.
-    try live.dispatch(.{ .play_track = 1 });
-    try testing.expectEqual(native_sdk.EffectAudioSource.local, fx.audioSnapshot().source);
-    try testing.expectEqual(@as(usize, 0), np.audio_load_url_count);
-
-    // 2. Local assets absent: the same gesture streams on demand (a
-    //    DIFFERENT track — playing the loaded one again is the
-    //    play/pause toggle). The URL is the base + the manifest's
-    //    relative file, and the effects channel reports the stream
-    //    honestly (buffering until bytes).
-    const track = model_mod.trackById(2);
-    np.audio_local_files = false;
-    try live.dispatch(.{ .play_track = track.id });
-    try testing.expectEqual(native_sdk.EffectAudioSource.stream, fx.audioSnapshot().source);
-    try testing.expect(fx.audioSnapshot().buffering);
-    var url_buffer: [512]u8 = undefined;
-    const expected_url = try std.fmt.bufPrint(&url_buffer, "https://music.example.test/pack/{s}", .{track.file});
-    try testing.expectEqualStrings(expected_url, np.audio.path());
-
-    // The now-playing bar shows the honest buffering state (distinct
-    // from playing) once an event reports it.
-    try live.harness.runtime.dispatchPlatformEvent(app_state.app(), np.stallAudio().?);
-    try testing.expect(app_state.model.buffering);
-    const buffering_layout = try live.harness.runtime.canvasWidgetLayout(1, main.canvas_label);
-    var saw_buffering = false;
-    for (buffering_layout.nodes) |node| {
-        if (std.mem.eql(u8, node.widget.text, model_mod.buffering_hint)) saw_buffering = true;
-    }
-    try testing.expect(saw_buffering);
-
-    // The loaded acknowledgment clears the stall; playback proceeds.
-    try live.harness.runtime.dispatchPlatformEvent(app_state.app(), np.takeAudioLoaded().?);
-    try testing.expect(!app_state.model.buffering);
-
-    // 3. Completion installs the cache entry (the fake analog of the
-    //    host's verify-then-rename). The completion auto-advances to
-    //    the album's next track (a fresh stream); playing the FINISHED
-    //    track again then resolves from cache — local playback, no
-    //    stream, no buffering.
-    const duration = np.audio.duration_ms;
-    try live.harness.runtime.dispatchPlatformEvent(app_state.app(), np.advanceAudio(duration).?);
-    try testing.expect(app_state.model.now != null);
-    try testing.expect(app_state.model.now.? != track.id);
-    try live.dispatch(.{ .play_track = track.id });
-    try testing.expectEqual(native_sdk.EffectAudioSource.cache, fx.audioSnapshot().source);
-    try testing.expect(!fx.audioSnapshot().buffering);
-}
-
-test "offline with a cold cache lands the honest stream-failed state" {
-    const live = try LiveApp.start(false);
-    defer live.stop();
-    const app_state = live.app_state;
-    const np = &live.harness.null_platform;
-    app_state.effects.executor = .real;
-    app_state.model.setUrlBase("https://music.example.test/pack");
-    app_state.model.setCacheDir("/tmp/fake-caches/soundboard");
-    np.audio_local_files = false;
-
-    try live.dispatch(.{ .play_track = 1 });
-    // The stream dies (offline, dead host, mid-flight drop): one
-    // `.failed` event, and the notice names the NETWORK, not the
-    // prepare script — with a URL base configured the assets hint
-    // would be a lie.
-    try live.harness.runtime.dispatchPlatformEvent(app_state.app(), np.failAudio().?);
-    try testing.expect(app_state.model.stream_failed);
-    try testing.expect(!app_state.model.assets_missing);
-    try testing.expectEqual(@as(?u8, null), app_state.model.now);
-
-    const layout = try live.harness.runtime.canvasWidgetLayout(1, main.canvas_label);
-    var saw_title = false;
-    var saw_hint = false;
-    for (layout.nodes) |node| {
-        if (std.mem.eql(u8, node.widget.text, model_mod.stream_failed_title)) saw_title = true;
-        if (std.mem.eql(u8, node.widget.text, model_mod.stream_failed_hint)) saw_hint = true;
-    }
-    try testing.expect(saw_title);
-    try testing.expect(saw_hint);
-
-    // A fresh play clears the notice optimistically, exactly like the
-    // assets notice.
-    try live.dispatch(.toggle_play);
-    try testing.expect(!app_state.model.stream_failed);
-}
-
-test "copy title spawns pbcopy with the track title on stdin" {
-    const live = try LiveApp.start(true);
-    defer live.stop();
-    const app_state = live.app_state;
-
-    // Any catalog track works; the third album's opener keeps the
-    // assertion clearly derived rather than a literal title.
-    const track = &model_mod.albumTracks(model_mod.albums[2].id)[0];
-    try live.dispatch(.{ .copy_title = track.id });
-    const request = app_state.effects.pendingSpawnAt(0).?;
-    try testing.expectEqual(model_mod.copy_key, request.key);
-    try testing.expectEqual(@as(usize, 1), request.argv.len);
-    try testing.expectEqualStrings("/usr/bin/pbcopy", request.argv[0]);
-    try testing.expectEqualStrings(track.title, request.stdin);
-
-    try app_state.effects.feedExit(model_mod.copy_key, 0);
-    try live.wake();
-    try testing.expectEqual(@as(u32, 1), app_state.model.copies_done);
-    try testing.expect(!app_state.model.copy_failed);
-
-    // A failing exit is noted, never fatal.
-    try live.dispatch(.{ .copy_title = model_mod.tracks[1].id });
-    try app_state.effects.feedExit(model_mod.copy_key, 1);
-    try live.wake();
-    try testing.expect(app_state.model.copy_failed);
-}
-
-test "search filters albums and songs through typed dispatch" {
-    var arena_state = std.heap.ArenaAllocator.init(testing.allocator);
-    defer arena_state.deinit();
-    const arena = arena_state.allocator();
-
-    var model = Model{};
-    var tree = try buildTree(arena, &model);
-    try testing.expectEqual(model_mod.albums.len, countListItems(tree.root));
-
-    // Type into the search field: the edit event dispatches through the
-    // markup-declared on-input handler and mirrors into the model. The
-    // query matches exactly one album title in the catalog (and no
-    // artist), so the grid narrows to that record.
-    const album = &model_mod.albums[model_mod.albums.len - 1];
-    const field = findByKind(tree.root, .search_field).?;
-    apply(&model, tree.msgForTextEdit(field.id, .{ .insert_text = "channel" }).?);
-    try testing.expectEqualStrings("channel", model.search());
-
-    tree = try buildTree(arena, &model);
-    try testing.expectEqual(@as(usize, 1), countListItems(tree.root));
-    const card_label = try std.fmt.allocPrint(arena, "{s} by {s}", .{ album.title, album.artist });
-    try testing.expect(findByLabel(tree.root, card_label) != null);
-
-    // Songs tab matches titles, artists, and album names: an album-title
-    // match carries every track of that record, however many it has.
-    apply(&model, .show_songs);
-    tree = try buildTree(arena, &model);
-    try testing.expectEqual(@as(usize, album.track_count), countListItems(tree.root));
-
-    // Clear restores the full library. The search field carries the
-    // BUILT-IN trailing clear affordance (no external button): the
-    // press stamps a `.clear` edit that reaches the model through the
-    // same on-input channel every keystroke uses.
-    const searching_field = findByKind(tree.root, .search_field).?;
-    apply(&model, tree.msgForTextEdit(searching_field.id, .clear).?);
-    try testing.expectEqualStrings("", model.search());
-    tree = try buildTree(arena, &model);
-    try testing.expectEqual(model_mod.tracks.len, countListItems(tree.root));
-    // Nothing else in the header claims the clear: the external button
-    // is gone.
-    try testing.expect(findByLabel(tree.root, "Clear search") == null);
-
-    // No matches renders the empty state instead of a list.
-    apply(&model, .show_albums);
-    model.search_buffer = canvas.TextBuffer(model_mod.max_search).init("polka");
-    tree = try buildTree(arena, &model);
-    try testing.expectEqual(@as(usize, 0), countListItems(tree.root));
-    try testing.expect(findByLabel(tree.root, "No albums match") != null);
-}
-
-test "live: Escape clears the search field and the model hears it" {
-    // The post-launch live-GUI smoke bug: Escape made the runtime's
-    // editor clear the field VISUALLY while the model kept the stale
-    // query — the grid stayed filtered against a term the screen no
-    // longer showed, and the next keystroke spliced into it. The
-    // keyboard derivation now stamps the clear it applies onto the
-    // dispatched event, so the model's on-input mirror hears Escape
-    // exactly like the clear affordance and every keystroke.
-    const live = try LiveApp.start(true);
-    defer live.stop();
-    const app_state = live.app_state;
-
-    // Focus the search field and type a one-album query through the
-    // real platform text channel.
-    try live.focusWidget(try live.widgetIdByLabel(.search_field, "Search library"));
-    try live.harness.runtime.dispatchPlatformEvent(app_state.app(), .{ .gpu_surface_input = .{
-        .label = main.canvas_label,
-        .kind = .text_input,
-        .text = "channel",
-    } });
-    try testing.expectEqualStrings("channel", app_state.model.search());
-    try testing.expectEqual(@as(usize, 1), countListItems(app_state.tree.?.root));
-
-    // Escape through the same raw key path a physical press produces:
-    // the model clears WITH the field, and the grid unfilters.
-    try live.keyDown("escape", "");
-    try testing.expectEqualStrings("", app_state.model.search());
-    try testing.expectEqual(model_mod.albums.len, countListItems(app_state.tree.?.root));
-
-    // The retained editor agrees with the model — no visual/model split.
-    const layout = try live.harness.runtime.canvasWidgetLayout(1, main.canvas_label);
-    for (layout.nodes) |node| {
-        if (node.widget.kind == .search_field) try testing.expectEqualStrings("", node.widget.text);
-    }
-}
-
-test "a full session: open an album, play it, and use the context menus" {
-    var arena_state = std.heap.ArenaAllocator.init(testing.allocator);
-    defer arena_state.deinit();
-    const arena = arena_state.allocator();
-
-    var model = Model{};
-    var tree = try buildTree(arena, &model);
-
-    // Open the second album's card from the grid (everything below is
-    // derived from the catalog: ids, counts, titles).
-    const album = &model_mod.albums[1];
-    const album_tracks = model_mod.albumTracks(album.id);
-    const card_label = try std.fmt.allocPrint(arena, "{s} by {s}", .{ album.title, album.artist });
-    const card = findByLabel(tree.root, card_label).?;
-    apply(&model, tree.msgForPointer(card.id, .up).?);
-    try testing.expectEqual(@as(?u8, album.id), model.open_album);
-
-    tree = try buildTree(arena, &model);
-    try testing.expect(findByLabel(tree.root, "Album detail") != null);
-    // Track rows count inside the track LIST: the page also carries the
-    // "From the collection" shelf, whose album tiles are listitems too.
-    try testing.expectEqual(@as(usize, album.track_count), countListItems(findByLabel(tree.root, "Album tracks").?));
-
-    // The collection shelf: every OTHER album on a horizontal rail —
-    // wheel delta_x and Left/Right scroll it while the page keeps
-    // vertical scrolling (each axis routes to the nearest region that
-    // scrolls it).
-    const shelf = findByLabel(tree.root, "More albums").?;
-    try testing.expectEqual(canvas.WidgetKind.scroll_view, shelf.kind);
-    try testing.expectEqual(canvas.ScrollAxes.horizontal, shelf.scroll_axes);
-    try testing.expectEqual(model.shelf_scroll_x, shelf.value_x);
-    try testing.expectEqual(@as(usize, model_mod.albums.len - 1), countListItems(shelf));
-
-    // The shelf echo is the controlled-scroll shape on the HORIZONTAL
-    // axis: the applied offset_x lands in the model and binds back as
-    // value_x, and opening an album resets the rail.
-    apply(&model, tree.msgForScroll(shelf.id, .{ .offset_x = 96, .viewport_extent_x = 480, .content_extent_x = 960 }).?);
-    try testing.expectEqual(@as(f32, 96), model.shelf_scroll_x);
-    tree = try buildTree(arena, &model);
-    try testing.expectEqual(@as(f32, 96), findByLabel(tree.root, "More albums").?.value_x);
-
-    // Play album starts the record's first track. The button carries its
-    // play icon inline (widget.icon) beside the label: one widget, one
-    // hit target, one tint.
-    const play_button = findByLabel(tree.root, "Play album").?;
-    try testing.expectEqual(canvas.WidgetKind.button, play_button.kind);
-    try testing.expectEqualStrings("play", play_button.icon);
-    try testing.expectEqualStrings("Play album", play_button.text);
-    apply(&model, tree.msgForPointer(play_button.id, .up).?);
-    try testing.expectEqual(@as(?u8, album_tracks[0].id), model.now);
-    try testing.expect(model.playing);
-
-    // The now-playing bar reflects it: the primary transport button
-    // wears the pause icon while playing, prev/next wear the real
-    // skip-back/skip-forward glyphs, and the playing track row carries
-    // its decorative STATE icon — the pause glyph while audio moves (a
-    // bare .icon leaf — never hit-tested).
-    tree = try buildTree(arena, &model);
-    try testing.expect(findByText(tree.root, .text, album_tracks[0].title) != null);
-    try testing.expectEqualStrings("pause", findByLabel(tree.root, "Play or pause").?.icon);
-    try testing.expectEqualStrings("skip-back", findByLabel(tree.root, "Previous track").?.icon);
-    try testing.expectEqualStrings("skip-forward", findByLabel(tree.root, "Next track").?.icon);
-    try testing.expect(findByText(tree.root, .icon, "pause") != null);
-
-    // A single press on a different track row SELECTS it — playback
-    // stays where it was; the double click (click count 2 on the
-    // release) is what plays the row.
-    const other = &album_tracks[2];
-    const row = findByLabel(tree.root, other.title).?;
-    apply(&model, tree.msgForPointer(row.id, .up).?);
-    try testing.expectEqual(@as(?u8, other.id), model.selected);
-    try testing.expectEqual(@as(?u8, album_tracks[0].id), model.now);
-    apply(&model, tree.msgForPointerClick(row.id, .up, 2).?);
-    try testing.expectEqual(@as(?u8, other.id), model.now);
-    try testing.expect(model.playing);
-
-    // Double-clicking the PLAYING row toggles pause in place.
-    tree = try buildTree(arena, &model);
-    const same_row = findByLabel(tree.root, other.title).?;
-    apply(&model, tree.msgForPointerClick(same_row.id, .up, 2).?);
-    try testing.expect(!model.playing);
-
-    // Context-menu items dispatch typed messages: Play Next queues, Copy
-    // Title raises the pbcopy effect (asserted in its own test).
-    tree = try buildTree(arena, &model);
-    const queue_target = &album_tracks[album_tracks.len - 1];
-    const target_row = findByLabel(tree.root, queue_target.title).?;
-    apply(&model, tree.msgForContextMenu(target_row.id, 0).?); // "Play Next"
-    try testing.expectEqual(@as(usize, 1), model.queue_len);
-    try testing.expectEqual(queue_target.id, model.queue[0]);
-    // Indexes past the declared items are inert.
-    try testing.expect(tree.msgForContextMenu(target_row.id, 2) == null);
-
-    tree = try buildTree(arena, &model);
-    try testing.expect(findByText(tree.root, .badge, "Up next") != null);
-
-    // Back returns to the grid; the playing album is badged there. Back
-    // is a chevron-left icon+label button (inline icon, one hit target).
-    apply(&model, .toggle_play);
-    const back = findByLabel(tree.root, "Back to albums").?;
-    try testing.expectEqual(canvas.WidgetKind.button, back.kind);
-    apply(&model, tree.msgForPointer(back.id, .up).?);
-    tree = try buildTree(arena, &model);
-    try testing.expect(findByLabel(tree.root, "Album grid") != null);
-    try testing.expect(findByText(tree.root, .badge, "Playing") != null);
-}
-
-test "the system appearance drives the custom tokens live" {
-    const live = try LiveApp.start(true);
-    defer live.stop();
-    const app_state = live.app_state;
-
-    // Default: light system appearance = the pack's light register with
-    // the app's pink accent layered on (theme.zig exports the resolved
-    // 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 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);
-    }
-    // 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.?);
-    }
-
-    // The OS flips to dark; the app follows it - there is no in-window
-    // theme control by design.
-    try live.harness.runtime.dispatchPlatformEvent(app_state.app(), .{ .appearance_changed = .{ .color_scheme = .dark } });
-    try testing.expectEqualDeep(theme.dark_colors, main.tokensFromModel(&app_state.model).colors);
-    try testing.expectEqualDeep(theme.dark_colors, (try live.harness.runtime.canvasWidgetDesignTokens(1, main.canvas_label)).colors);
-
-    // And back to light.
-    try live.harness.runtime.dispatchPlatformEvent(app_state.app(), .{ .appearance_changed = .{ .color_scheme = .light } });
-    try testing.expectEqualDeep(theme.light_colors, (try live.harness.runtime.canvasWidgetDesignTokens(1, main.canvas_label)).colors);
-
-    // High contrast falls back to the pack's own loud register with no
-    // brand layer (accessibility beats brand): white on the pink fill
-    // sits near 4.5:1, under the loud-contrast bar, so the accent
-    // honestly bows out — pinned by resolving the same pack register
-    // the theme skips its overrides for.
-    try live.harness.runtime.dispatchPlatformEvent(app_state.app(), .{ .appearance_changed = .{ .color_scheme = .dark, .high_contrast = true } });
-    const pack_hc_dark = canvas.DesignTokens.theme(.{ .pack = .geist, .color_scheme = .dark, .contrast = .high }).colors;
-    try testing.expectEqualDeep(pack_hc_dark, (try live.harness.runtime.canvasWidgetDesignTokens(1, main.canvas_label)).colors);
-}
-
-test "the Albums/Songs switcher is a flush button group with one active segment" {
-    // The header authors the switcher as `<button-group>` + `<button
-    // selected=...>`: attached segments (the group's default gap of 0
-    // collapses them into one bar with shared seams), each segment an
-    // ordinary button, with the exclusive choice carried by the
-    // `selected` bindings — exactly one segment is active at a time and
-    // clicking the other one moves it.
-    const live = try LiveApp.start(true);
-    defer live.stop();
-    const app_state = live.app_state;
-
-    const Switcher = struct {
-        fn segmentId(layout: canvas.WidgetLayoutTree, label: []const u8) ?canvas.ObjectId {
-            for (layout.nodes) |node| {
-                if (node.widget.kind != .button) continue;
-                if (std.mem.eql(u8, node.widget.text, label)) return node.widget.id;
-            }
-            return null;
-        }
-
-        /// Exactly one BUTTON-GROUP segment is selected, and it is the
-        /// named one. Scoped to buttons whose parent is the group so a
-        /// future selected button elsewhere cannot satisfy the pin.
-        fn expectExactlyOneActive(layout: canvas.WidgetLayoutTree, label: []const u8) !void {
-            var active: usize = 0;
-            var active_matches = false;
-            for (layout.nodes) |node| {
-                if (node.widget.kind != .button) continue;
-                const parent_index = node.parent_index orelse continue;
-                if (layout.nodes[parent_index].widget.kind != .button_group) continue;
-                if (!node.widget.state.selected) continue;
-                active += 1;
-                if (std.mem.eql(u8, node.widget.text, label)) active_matches = true;
-            }
-            try testing.expectEqual(@as(usize, 1), active);
-            try testing.expect(active_matches);
-        }
-
-        fn groupCount(layout: canvas.WidgetLayoutTree) usize {
-            var groups: usize = 0;
-            for (layout.nodes) |node| {
-                if (node.widget.kind == .button_group) groups += 1;
-            }
-            return groups;
-        }
-    };
-
-    // Default tab is Albums: the group exists, exactly one active
-    // segment, and nothing lowers to the old tabs strip anymore.
-    var layout = try live.harness.runtime.canvasWidgetLayout(1, main.canvas_label);
-    try testing.expectEqual(@as(usize, 1), Switcher.groupCount(layout));
-    try Switcher.expectExactlyOneActive(layout, "Albums");
-    for (layout.nodes) |node| {
-        try testing.expect(node.widget.kind != .segmented_control);
-        try testing.expect(node.widget.kind != .tabs);
-    }
-
-    // Click Songs through the real widget path: the model switches and
-    // exactly one segment stays active.
-    var command_buffer: [96]u8 = undefined;
-    const songs_id = Switcher.segmentId(layout, "Songs").?;
-    const click_songs = try std.fmt.bufPrint(&command_buffer, "widget-click {s} {d}", .{ main.canvas_label, songs_id });
-    try live.harness.runtime.dispatchAutomationCommand(app_state.app(), click_songs);
-    try testing.expectEqual(model_mod.Tab.songs, app_state.model.tab);
-    layout = try live.harness.runtime.canvasWidgetLayout(1, main.canvas_label);
-    try Switcher.expectExactlyOneActive(layout, "Songs");
-
-    // And back to Albums.
-    const albums_id = Switcher.segmentId(layout, "Albums").?;
-    const click_albums = try std.fmt.bufPrint(&command_buffer, "widget-click {s} {d}", .{ main.canvas_label, albums_id });
-    try live.harness.runtime.dispatchAutomationCommand(app_state.app(), click_albums);
-    try testing.expectEqual(model_mod.Tab.albums, app_state.model.tab);
-    layout = try live.harness.runtime.canvasWidgetLayout(1, main.canvas_label);
-    try Switcher.expectExactlyOneActive(layout, "Albums");
-}
-
-test "single click selects, double click plays — through the real pointer path" {
-    // The full gesture pipeline with STAMPED timestamps (the runtime
-    // derives click counts from them; zero timestamps never chain):
-    // click one = selection only, the rapid second click = playback,
-    // and a slow third click re-selects without ever toggling playback.
-    const live = try LiveApp.start(true);
-    defer live.stop();
-    const app_state = live.app_state;
-
-    try live.dispatch(.show_songs);
-    const track = &model_mod.tracks[1];
-    const frame = try live.widgetFrameByLabel(.list_item, track.title);
-    const x = frame.x + frame.width / 2;
-    const y = frame.y + frame.height / 2;
-
-    // Click one: the row is selected, nothing plays.
-    try live.click(x, y, 100 * std.time.ns_per_ms);
-    try testing.expectEqual(@as(?u8, track.id), app_state.model.selected);
-    try testing.expectEqual(@as(?u8, null), app_state.model.now);
-    try testing.expect(!app_state.model.playing);
-
-    // The rapid second click (within the 500 ms chain window, same
-    // point) carries click count 2 on its release: the row PLAYS.
-    try live.click(x, y, 250 * std.time.ns_per_ms);
-    try testing.expectEqual(@as(?u8, track.id), app_state.model.now);
-    try testing.expect(app_state.model.playing);
-
-    // A SLOW third click (past the chain window) is a fresh single
-    // click: it re-selects the row and playback does not toggle.
-    try live.click(x, y, 2_000 * std.time.ns_per_ms);
-    try testing.expectEqual(@as(?u8, track.id), app_state.model.selected);
-    try testing.expect(app_state.model.playing);
-}
-
-test "arrows move the selection without playback or a focus ring; enter plays it" {
-    // The selection-color-not-outline contract: after clicking a row
-    // (which leaves QUIET focus on it), Up/Down walk the app's
-    // selection — the accent row — while the runtime's focus ring stays
-    // dark (focus-visible id 0; outlines belong to Tab), playback never
-    // moves, and Enter plays whatever is selected.
-    const live = try LiveApp.start(true);
-    defer live.stop();
-    const app_state = live.app_state;
-
-    try live.dispatch(.show_songs);
-    const first = &model_mod.tracks[0];
-    const frame = try live.widgetFrameByLabel(.list_item, first.title);
-    try live.click(frame.x + frame.width / 2, frame.y + frame.height / 2, 100 * std.time.ns_per_ms);
-    try testing.expectEqual(@as(?u8, first.id), app_state.model.selected);
-    try testing.expect(!app_state.model.playing);
-
-    // Down walks to the next library track; no ring, no playback.
-    try live.keyDown("arrowdown", "");
-    try testing.expectEqual(@as(?u8, model_mod.tracks[1].id), app_state.model.selected);
-    try testing.expect(!app_state.model.playing);
-    try testing.expectEqual(@as(canvas.ObjectId, 0), live.focusVisibleId());
-
-    // Up walks back; another Up at the top edge CLAMPS (no wrap).
-    try live.keyDown("arrowup", "");
-    try testing.expectEqual(@as(?u8, first.id), app_state.model.selected);
-    try live.keyDown("arrowup", "");
-    try testing.expectEqual(@as(?u8, first.id), app_state.model.selected);
-    try testing.expectEqual(@as(canvas.ObjectId, 0), live.focusVisibleId());
-
-    // Enter plays the selection.
-    try live.keyDown("enter", "");
-    try testing.expectEqual(@as(?u8, first.id), app_state.model.now);
-    try testing.expect(app_state.model.playing);
-
-    // The selection domain follows the view: on the album detail page
-    // the arrows walk THAT record's tracks (dispatch-level — the same
-    // messages the key fallback emits).
-    const album = &model_mod.albums[1];
-    try live.dispatch(.{ .open_album = album.id });
-    try live.dispatch(.{ .select_track = model_mod.albumTracks(album.id)[0].id });
-    try live.dispatch(.select_next);
-    try testing.expectEqual(@as(?u8, model_mod.albumTracks(album.id)[1].id), app_state.model.selected);
-
-    // On the album GRID (no track list on screen) arrows move nothing.
-    try live.dispatch(.close_album);
-    const before = app_state.model.selected;
-    try live.dispatch(.select_next);
-    try testing.expectEqual(before, app_state.model.selected);
-}
-
-test "the selected row wears the inverted accent register; tiles hover quiet" {
-    var arena_state = std.heap.ArenaAllocator.init(testing.allocator);
-    defer arena_state.deinit();
-    const arena = arena_state.allocator();
-
-    var model = Model{};
-    model.tab = .songs;
-    const selected = &model_mod.tracks[2];
-    const unselected = &model_mod.tracks[0];
-    apply(&model, .{ .select_track = selected.id });
-
-    // The selected row: accent fill under the accent's knockout ink —
-    // the per-widget style tokens resolve against the live theme, so the
-    // assertion reads the same resolved colors the renderer will.
-    // Deliberately re-pinned from the background token to `accent_text`:
-    // background is only white in the light scheme (near-black in dark,
-    // where it vanished into the accent fill), while `accent_text` is
-    // the ink the theme pairs with the accent in BOTH schemes — the same
-    // white the filled Play Album button wears.
-    const tree = try buildTree(arena, &model);
-    const row = findByLabel(tree.root, selected.title).?;
-    try testing.expect(row.state.selected);
-    try testing.expectEqualDeep(theme.light_colors.accent, row.style.background.?);
-    const title = findByText(row, .text, selected.title).?;
-    try testing.expectEqualDeep(theme.light_colors.accent_text, title.style.foreground.?);
-    // The dark palette resolves the SAME knockout ink for this theme, so
-    // the inverted row reads identically in both schemes.
-    try testing.expectEqualDeep(theme.dark_colors.accent_text, title.style.foreground.?);
-
-    // Unselected rows keep the composite's own state washes (no
-    // override) and their ordinary ink.
-    const other_row = findByLabel(tree.root, unselected.title).?;
-    try testing.expect(!other_row.state.selected);
-    try testing.expect(other_row.style.background == null);
-
-    // Album tiles opt out of the HOVER wash through the toolkit's
-    // quiet-surface style knob — hovering cover art changes nothing
-    // visually (the pointer cursor is the affordance) — and carry no
-    // background override at all, so the pressed wash and any themed
-    // base fill keep their own channels.
-    model.tab = .albums;
-    const grid_tree = try buildTree(arena, &model);
-    const album = &model_mod.albums[0];
-    const tile_label = try std.fmt.allocPrint(arena, "{s} by {s}", .{ album.title, album.artist });
-    const tile = findByLabel(grid_tree.root, tile_label).?;
-    try testing.expect(tile.style.quiet_hover);
-    try testing.expect(tile.style.background == null);
-}
-
-test "the transport buttons share one quiet register" {
-    // Item: the play button must not carry the filled accent — all
-    // three transport controls read as peers (sm ghost), with the
-    // play/pause identity carried by the bound icon alone.
-    var arena_state = std.heap.ArenaAllocator.init(testing.allocator);
-    defer arena_state.deinit();
-
-    var model = Model{};
-    const tree = try buildTree(arena_state.allocator(), &model);
-    for ([_][]const u8{ "Previous track", "Play or pause", "Next track" }) |label| {
-        const button = findByLabel(tree.root, label).?;
-        try testing.expectEqual(canvas.WidgetKind.button, button.kind);
-        try testing.expectEqual(canvas.WidgetVariant.ghost, button.variant);
-        try testing.expectEqual(canvas.WidgetSize.sm, button.size);
-    }
-}
-
-test "the waveform mark trails the now-playing title" {
-    var arena_state = std.heap.ArenaAllocator.init(testing.allocator);
-    defer arena_state.deinit();
-
-    var model = Model{};
-    apply(&model, .{ .play_track = 1 });
-    const tree = try buildTree(arena_state.allocator(), &model);
-
-    // Find the row that carries the title text and assert the icon
-    // sits AFTER it in flow order — the wave reads as a listening
-    // indicator trailing the name, not a leading bullet.
-    const holder = findParentOfLabel(tree.root, "Now playing title").?;
-    var title_index: ?usize = null;
-    var icon_index: ?usize = null;
-    for (holder.children, 0..) |child, index| {
-        if (std.mem.eql(u8, child.semantics.label, "Now playing title")) title_index = index;
-        if (child.kind == .icon and std.mem.eql(u8, child.icon, "app:waveform")) icon_index = index;
-    }
-    try testing.expect(title_index != null);
-    try testing.expect(icon_index != null);
-    try testing.expect(icon_index.? > title_index.?);
-}
-
-test "the loaded row's state icon names the play state" {
-    // Item: the playing track's row shows the PAUSE glyph while audio
-    // moves and the PLAY glyph while it is paused (the icon names the
-    // state, like the transport button), and only the loaded row
-    // carries an indicator at all.
-    var arena_state = std.heap.ArenaAllocator.init(testing.allocator);
-    defer arena_state.deinit();
-    const arena = arena_state.allocator();
-
-    var model = Model{};
-    model.tab = .songs;
-    apply(&model, .{ .play_track = 1 });
-    var tree = try buildTree(arena, &model);
-    try testing.expect(findByText(tree.root, .icon, "pause") != null);
-    try testing.expect(findByText(tree.root, .icon, "play") == null);
-
-    apply(&model, .toggle_play);
-    tree = try buildTree(arena, &model);
-    try testing.expect(findByText(tree.root, .icon, "play") != null);
-    try testing.expect(findByText(tree.root, .icon, "pause") == null);
-}
-
-test "the scrubber interpolates between position ticks and never rewinds" {
-    // The smooth-progress contract: while PLAYING, presented frames
-    // advance the rendered clock between the player's 500 ms ticks;
-    // tick corrections never rewind it mid-motion (small overruns hold
-    // flat, only a past-slack desync snaps); paused frames are inert
-    // (`on_frame` returns null — the idle law); and a resume across a
-    // long gap steps gently (the frame-interval clamp), never lurches.
-    const live = try LiveApp.start(true);
-    defer live.stop();
-    const app_state = live.app_state;
-    const fx = &app_state.effects;
-    const model = &app_state.model;
-
-    // One warm-up frame: the INSTALLING first frame never reaches
-    // `on_frame`, so the surface width mirrors into the model here —
-    // otherwise the first playing frame would spend itself on
-    // `canvas_resized` instead of the clock.
-    try presentFrameAt(live, 2, 1_500 * std.time.ns_per_ms);
-    try testing.expectEqual(surface_size.width, model.canvas_width);
-
-    try live.dispatch(.{ .play_track = 1 });
-    const duration_ms: u64 = model_mod.trackById(1).duration_ms;
-    try fx.feedAudioEvent(.loaded, 0, duration_ms, true);
-    try live.wake();
-    try fx.feedAudioEvent(.position, 500, duration_ms, true);
-    try live.wake();
-    try testing.expectEqual(@as(u32, 500), model.elapsed_ms);
-
-    // Frames at ~60 Hz advance the rendered clock monotonically.
-    const frame_step_ns: u64 = 16_666_667;
-    var timestamp: u64 = 2_000 * std.time.ns_per_ms;
-    var previous = model.elapsed_ms;
-    for (0..6) |index| {
-        try presentFrameAt(live, 10 + index, timestamp);
-        try testing.expect(model.elapsed_ms > previous);
-        previous = model.elapsed_ms;
-        timestamp += frame_step_ns;
-    }
-
-    // A tick slightly BEHIND the rendered clock (interpolation ran a
-    // hair ahead) holds flat — the bar never visibly rewinds.
-    const ahead = model.elapsed_ms;
-    try fx.feedAudioEvent(.position, 500, duration_ms, true);
-    try live.wake();
-    try testing.expectEqual(ahead, model.elapsed_ms);
-
-    // A forward tick applies immediately.
-    try fx.feedAudioEvent(.position, 5_000, duration_ms, true);
-    try live.wake();
-    try testing.expectEqual(@as(u32, 5_000), model.elapsed_ms);
-
-    // A tick past the slack is a real desync (an external seek): snap.
-    try fx.feedAudioEvent(.position, 100, duration_ms, true);
-    try live.wake();
-    try testing.expectEqual(@as(u32, 100), model.elapsed_ms);
-
-    // PAUSE: the frame hook goes silent (null — no dispatch, so the
-    // frame channel starves: the idle law) and the clock freezes
-    // exactly, frame after frame.
-    try live.dispatch(.toggle_play);
-    try testing.expect(main.onFrame(model, .{ .size = surface_size, .timestamp_ns = timestamp }) == null);
-    var frozen: [3]u32 = undefined;
-    for (0..3) |index| {
-        timestamp += frame_step_ns;
-        try presentFrameAt(live, 20 + index, timestamp);
-        frozen[index] = model.elapsed_ms;
-    }
-    try testing.expectEqualSlices(u32, &.{ 100, 100, 100 }, &frozen);
-
-    // RESUME across the gap: the first frame's delta is clamped to a
-    // few display intervals, so the clock steps gently instead of
-    // swallowing the pause as playtime.
-    try live.dispatch(.toggle_play);
-    try testing.expect(main.onFrame(model, .{ .size = surface_size, .timestamp_ns = timestamp }) != null);
-    timestamp += 3_000 * std.time.ns_per_ms; // a long stale gap
-    try presentFrameAt(live, 30, timestamp);
-    try testing.expect(model.elapsed_ms > 100);
-    try testing.expect(model.elapsed_ms <= 100 + 67);
-}
-
-/// One presented frame with an explicit timestamp — the interpolation
-/// tests' clock hand.
-fn presentFrameAt(live: LiveApp, frame_index: u64, timestamp_ns: u64) !void {
-    try live.harness.runtime.dispatchPlatformEvent(live.app_state.app(), .{ .gpu_surface_frame = .{
-        .label = main.canvas_label,
-        .size = live.size,
-        .scale_factor = 1,
-        .frame_index = frame_index,
-        .timestamp_ns = timestamp_ns,
-        .nonblank = true,
-    } });
-}
-
-/// The widget whose direct children include one labeled `label`.
-fn findParentOfLabel(widget: canvas.Widget, label: []const u8) ?canvas.Widget {
-    for (widget.children) |child| {
-        if (std.mem.eql(u8, child.semantics.label, label)) return widget;
-        if (findParentOfLabel(child, label)) |found| return found;
-    }
-    return null;
-}
-
-test "the track-change animation window opens on play and closes after" {
-    var arena_state = std.heap.ArenaAllocator.init(testing.allocator);
-    defer arena_state.deinit();
-    const arena = arena_state.allocator();
-
-    var model = Model{};
-    var animations: [8]canvas.CanvasRenderAnimation = undefined;
-
-    // Nothing playing yet: no animations.
-    var tree = try buildTree(arena, &model);
-    try testing.expectEqual(@as(usize, 0), main.animations(&model, &tree, 0, &animations));
-
-    // A track change opens the window: title + cover (fill and image).
-    apply(&model, .{ .play_track = 5 });
-    tree = try buildTree(arena, &model);
-    try testing.expectEqual(@as(usize, 3), main.animations(&model, &tree, 0, &animations));
-
-    // 400 ms of playback later, a rebuild does not restart the motion —
-    // the playback clock (position events) is the motion clock.
-    model.elapsed_ms = 400;
-    try testing.expectEqual(@as(usize, 0), main.animations(&model, &tree, 0, &animations));
-}
-
-test "markup engine parity: header and now-playing build identical trees" {
-    var arena_state = std.heap.ArenaAllocator.init(testing.allocator);
-    defer arena_state.deinit();
-    const arena = arena_state.allocator();
-
-    var model = Model{};
-    apply(&model, .{ .play_track = 3 });
-    apply(&model, .{ .queue_track = 4 });
-
-    inline for (.{
-        .{ view_mod.header_markup, view_mod.CompiledHeaderView },
-        .{ view_mod.nowplaying_markup, view_mod.CompiledNowPlayingView },
-    }) |case| {
-        var interpreter = try canvas.MarkupView(Model, Msg).init(arena, case[0]);
-        var compiled_ui = Ui.init(arena);
-        const compiled = try compiled_ui.finalize(case[1].build(&compiled_ui, &model));
-        var interpreted_ui = Ui.init(arena);
-        const interpreted = try interpreted_ui.finalize(try interpreter.build(&interpreted_ui, &model));
-
-        var compiled_ids: std.ArrayListUnmanaged(canvas.ObjectId) = .empty;
-        defer compiled_ids.deinit(testing.allocator);
-        var interpreted_ids: std.ArrayListUnmanaged(canvas.ObjectId) = .empty;
-        defer interpreted_ids.deinit(testing.allocator);
-        try collectIds(compiled.root, &compiled_ids, testing.allocator);
-        try collectIds(interpreted.root, &interpreted_ids, testing.allocator);
-        try testing.expectEqualSlices(canvas.ObjectId, interpreted_ids.items, compiled_ids.items);
-        try testing.expectEqual(interpreted.handlers.len, compiled.handlers.len);
-    }
-}
-
-fn collectIds(widget: canvas.Widget, ids: *std.ArrayListUnmanaged(canvas.ObjectId), allocator: std.mem.Allocator) !void {
-    try ids.append(allocator, widget.id);
-    for (widget.children) |child| try collectIds(child, ids, allocator);
-}
-
-test "the album detail heading moved to markup unchanged" {
-    var arena_state = std.heap.ArenaAllocator.init(testing.allocator);
-    defer arena_state.deinit();
-    const arena = arena_state.allocator();
-
-    var model = Model{};
-    apply(&model, .{ .open_album = 2 });
-    const album = model_mod.albumById(2);
-
-    // The markup fragment (a <text> with one bold 1.9x-scaled <span>)
-    // builds the exact widget the builder paragraph produced: same kind,
-    // same text, same span list — weight AND scale — and the same
-    // accessible label, so the detail page renders pixel-identical.
-    var markup_ui = Ui.init(arena);
-    const markup_node = view_mod.AlbumTitleView.build(&markup_ui, &model);
-
-    var hand_ui = Ui.init(arena);
-    const hand_node = hand_ui.paragraph(.{ .semantics = .{ .label = album.title } }, &.{
-        .{ .text = album.title, .weight = .bold, .scale = 1.9 },
-    });
-
-    try testing.expectEqual(canvas.WidgetKind.text, markup_node.widget.kind);
-    try testing.expectEqualStrings(hand_node.widget.text, markup_node.widget.text);
-    try testing.expectEqualStrings(album.title, markup_node.widget.text);
-    try testing.expect(canvas.text_spans.textSpansEqual(hand_node.widget.spans, markup_node.widget.spans));
-    try testing.expectEqual(canvas.TextSpanWeight.bold, markup_node.widget.spans[0].weight);
-    try testing.expectEqual(@as(f32, 1.9), markup_node.widget.spans[0].scale);
-    try testing.expectEqualStrings(hand_node.widget.semantics.label, markup_node.widget.semantics.label);
-    // One text run for assistive tech: spans stay visual, scaled or not.
-    try testing.expectEqual(@as(usize, 0), markup_node.nodes.len);
-}
-
-test "app icons and bound icons flow from markup into the live layout and snapshot" {
-    const live = try LiveApp.start(true);
-    defer live.stop();
-
-    try live.dispatch(.{ .play_track = 7 });
-    try presentShotFrame(live, 2);
-
-    // The retained layout carries both open icon forms: the app:
-    // namespace reference verbatim on the waveform mark, and the bound
-    // play/pause icon as the value the model produced while playing.
-    const layout = try live.harness.runtime.canvasWidgetLayout(1, main.canvas_label);
-    var saw_waveform = false;
-    var play_pause_icon: []const u8 = "";
-    for (layout.nodes) |node| {
-        if (node.widget.kind == .icon and std.mem.eql(u8, node.widget.icon, "app:waveform")) saw_waveform = true;
-        if (std.mem.eql(u8, node.widget.semantics.label, "Play or pause")) play_pause_icon = node.widget.icon;
-    }
-    try testing.expect(saw_waveform);
-    try testing.expectEqualStrings("pause", play_pause_icon);
-
-    // Both names resolve to REAL parsed icons at draw time - never the
-    // missing-icon fallback: the namespace reaches the registered table,
-    // and the bound value lands on a built-in.
-    try testing.expectEqual(@as(?*const canvas.icons.Icon, main.app_icons[0].icon), canvas.icons.resolve("app:waveform"));
-    try testing.expectEqual(canvas.icons.find("pause").?, canvas.icons.resolveOrMissing(play_pause_icon).?);
-
-    // The automation snapshot sees the transport button the bound icon
-    // rides on (the accessibility surface stays intact).
-    const snapshot = live.harness.runtime.automationSnapshot("Soundboard");
-    var saw_transport = false;
-    for (snapshot.widgets) |widget| {
-        if (std.mem.eql(u8, widget.name, "Play or pause")) saw_transport = true;
-    }
-    try testing.expect(saw_transport);
-
-    // Data-driven for real: pausing swaps the SAME button's glyph
-    // through the binding - no if/else arms, no key juggling.
-    try live.dispatch(.toggle_play);
-    try presentShotFrame(live, 3);
-    const paused_layout = try live.harness.runtime.canvasWidgetLayout(1, main.canvas_label);
-    for (paused_layout.nodes) |node| {
-        if (std.mem.eql(u8, node.widget.semantics.label, "Play or pause")) {
-            try testing.expectEqualStrings("play", node.widget.icon);
-        }
-    }
-}
-
-test "every view lays out within the canvas and the widget budget" {
-    var arena_state = std.heap.ArenaAllocator.init(testing.allocator);
-    defer arena_state.deinit();
-
-    var model = Model{};
-    apply(&model, .{ .play_track = 1 });
-
-    const cases = [_]struct { tab: model_mod.Tab, open: ?u8 }{
-        .{ .tab = .albums, .open = null },
-        .{ .tab = .albums, .open = 2 },
-        .{ .tab = .songs, .open = null },
-    };
-    for (cases) |case| {
-        model.tab = case.tab;
-        model.open_album = case.open;
-        const tree = try buildTree(arena_state.allocator(), &model);
-        var nodes: [1024]canvas.WidgetLayoutNode = undefined;
-        const layout = try canvas.layoutWidgetTree(tree.root, geometry.RectF.init(0, 0, main.window_width, main.window_height), &nodes);
-        try testing.expect(layout.nodes.len > 0);
-        // The all-songs list mounts every catalog track as a row, so the
-        // peak scales with the manifest; keep a hard headroom line well
-        // under the 1024 per-view budget so growth is a conscious act.
-        try testing.expect(layout.nodes.len < 768);
-        _ = arena_state.reset(.retain_capacity);
-    }
-}
-
-test "layout audit sweep: nothing clips, overlaps, or escapes" {
-    var arena_state = std.heap.ArenaAllocator.init(testing.allocator);
-    defer arena_state.deinit();
-
-    var model = Model{};
-    apply(&model, .{ .play_track = 1 });
-
-    const cases = [_]struct { tab: model_mod.Tab, open: ?u8 }{
-        .{ .tab = .albums, .open = null },
-        .{ .tab = .albums, .open = 2 },
-        .{ .tab = .songs, .open = null },
-    };
-    for (cases) |case| {
-        model.tab = case.tab;
-        model.open_album = case.open;
-        const tree = try buildTree(arena_state.allocator(), &model);
-        try canvas.expectLayoutAuditSweepClean(testing.allocator, tree.root, .{
-            .tokens = main.tokensFromModel(&model),
-            .min_size = geometry.SizeF.init(main.window_min_width, main.window_min_height),
-            .default_size = surface_size,
-        });
-        _ = arena_state.reset(.retain_capacity);
-    }
-}
-
-test "a11y audit sweep: every interactive widget is named, reachable, and unambiguous" {
-    var arena_state = std.heap.ArenaAllocator.init(testing.allocator);
-    defer arena_state.deinit();
-
-    var model = Model{};
-    apply(&model, .{ .play_track = 1 });
-
-    // The same view states the layout sweep audits: both tabs and the
-    // open-album drilldown, so every control the app can show is judged
-    // by the label assistive tech would announce.
-    const cases = [_]struct { tab: model_mod.Tab, open: ?u8 }{
-        .{ .tab = .albums, .open = null },
-        .{ .tab = .albums, .open = 2 },
-        .{ .tab = .songs, .open = null },
-    };
-    for (cases) |case| {
-        model.tab = case.tab;
-        model.open_album = case.open;
-        const tree = try buildTree(arena_state.allocator(), &model);
-        try canvas.expectA11yAuditSweepClean(testing.allocator, tree.root, .{
-            .tokens = main.tokensFromModel(&model),
-            .min_size = geometry.SizeF.init(main.window_min_width, main.window_min_height),
-            .default_size = surface_size,
-        });
-        _ = arena_state.reset(.retain_capacity);
-    }
-}
-
-// Env-gated screenshot renderer (skipped by default, never in CI): renders
-// the app OFFSCREEN through the deterministic reference renderer via the
-// automation screenshot artifact — no live window. PNGs land in
-// /tmp/icon-batch-shots/soundboard-*-artifacts/. To use:
-//
-//   ICON_BATCH_SHOTS=1 zig build test
-test "render icon-batch screenshots (env-gated)" {
-    if (!envGateSet("ICON_BATCH_SHOTS")) return error.SkipZigTest;
-    const io = testing.io;
-
-    const live = try LiveApp.start(true);
-    defer live.stop();
-
-    // Album detail, playing: Play album / Back inline-icon buttons plus
-    // the skip-back / pause / skip-forward transport.
-    try live.dispatch(.{ .open_album = 2 });
-    try live.dispatch(.{ .play_track = model_mod.albumTracks(2)[0].id });
-    try presentShotFrame(live, 2);
-    live.harness.runtime.options.automation = native_sdk.automation.Server.init(io, "/tmp/icon-batch-shots/soundboard-detail-artifacts", "Soundboard");
-    try live.harness.runtime.dispatchAutomationCommand(live.app_state.app(), "screenshot soundboard-canvas 2");
-
-    // Searching: the icon-only clear button in the header.
-    try live.dispatch(.close_album);
-    var model = &live.app_state.model;
-    model.search_buffer = canvas.TextBuffer(model_mod.max_search).init("glass");
-    try live.dispatch(.toggle_play);
-    try presentShotFrame(live, 3);
-    live.harness.runtime.options.automation = native_sdk.automation.Server.init(io, "/tmp/icon-batch-shots/soundboard-search-artifacts", "Soundboard");
-    try live.harness.runtime.dispatchAutomationCommand(live.app_state.app(), "screenshot soundboard-canvas 2");
-}
-
-fn presentShotFrame(live: LiveApp, frame_index: u64) !void {
-    try live.harness.runtime.dispatchPlatformEvent(live.app_state.app(), .{ .gpu_surface_frame = .{
-        .label = main.canvas_label,
-        .size = live.size,
-        .scale_factor = 1,
-        .frame_index = frame_index,
-        .timestamp_ns = frame_index * 1_000_000,
-        .nonblank = true,
-    } });
-}
-
-// Env-gated selection-round screenshot renderer (skipped by default,
-// never in CI): renders the SONGS list with the selection and playback
-// registers separated — one track playing (its state icon showing),
-// a DIFFERENT track selected (the inverted accent row) — plus the
-// button-group header and the quiet transport, once per color scheme.
-// PNGs land in /tmp/selection-shots/soundboard-{light,dark}-artifacts/.
-// To use:
-//
-//   SELECTION_SHOTS=1 zig build test
-test "render selection screenshots (env-gated)" {
-    if (!envGateSet("SELECTION_SHOTS")) return error.SkipZigTest;
-    const io = testing.io;
-
-    const live = try LiveApp.start(true);
-    defer live.stop();
-
-    // Playing one track a minute in, with ANOTHER track selected: the
-    // playing row carries the pause state icon while the selected row
-    // wears the accent fill — the two registers must read as different
-    // things in one frame.
-    try live.dispatch(.show_songs);
-    try live.dispatch(.{ .play_track = model_mod.tracks[0].id });
-    live.app_state.model.elapsed_ms = 67_500;
-    try live.dispatch(.{ .select_track = model_mod.tracks[2].id });
-    try live.harness.runtime.dispatchPlatformEvent(live.app_state.app(), .{ .appearance_changed = .{ .color_scheme = .light } });
-    try presentShotFrame(live, 2);
-    live.harness.runtime.options.automation = native_sdk.automation.Server.init(io, "/tmp/selection-shots/soundboard-light-artifacts", "Soundboard");
-    try live.harness.runtime.dispatchAutomationCommand(live.app_state.app(), "screenshot soundboard-canvas 2");
-
-    try live.harness.runtime.dispatchPlatformEvent(live.app_state.app(), .{ .appearance_changed = .{ .color_scheme = .dark } });
-    live.harness.runtime.options.automation = native_sdk.automation.Server.init(io, "/tmp/selection-shots/soundboard-dark-artifacts", "Soundboard");
-    try live.harness.runtime.dispatchAutomationCommand(live.app_state.app(), "screenshot soundboard-canvas 2");
-}
-
-// Env-gated homepage screenshot renderer (skipped by default, never in
-// CI): renders the docs-homepage showcase state OFFSCREEN through the
-// deterministic reference renderer — the album grid with a track playing,
-// once per color scheme, same state in both. PNGs land in
-// /tmp/homepage-shots/soundboard-{light,dark}-artifacts/. To use
-// (the magick loop prepares RGBA twins of the committed covers once —
-// see the cover registration below for why):
-//
-//   mkdir -p /tmp/soundboard-art
-//   for f in examples/soundboard/src/art/*.jpg; do
-//     magick "$f" -depth 8 rgba:/tmp/soundboard-art/"$(basename "${f%.jpg}")".rgba
-//   done
-//   HOMEPAGE_SHOTS=1 zig build test
-test "render homepage screenshots (env-gated)" {
-    if (!envGateSet("HOMEPAGE_SHOTS")) return error.SkipZigTest;
-    const io = testing.io;
-
-    const live = try LiveApp.start(true);
-    defer live.stop();
-
-    // The docs site overlays CSS stoplights on the capture, inside the
-    // header's own chrome gap. Reserve that gap for real: the standard
-    // macOS tall hidden-inset geometry (the same numbers the
-    // chrome-geometry test pins) arrives through the app's chrome
-    // channel, so the header pads exactly where the site's dots land.
-    try live.dispatch(main.onChrome(.{
-        .insets = .{ .top = 52, .left = 78 },
-        .buttons = geometry.RectF.init(20, 19, 52, 14),
-    }).?);
-
-    // Real covers for the hero. The committed art is JPEG, which the
-    // null platform's strict PNG-subset decoder honestly refuses (the
-    // degrade the cover tests pin), so the capture feeds RGBA twins of
-    // the SAME committed files — prepared by the magick loop in the
-    // header comment — back through the engine's own PNG writer and the
-    // register channel `main.boot` uses: real art on the real
-    // decode->register path, no side door into the registry.
-    var art_arena_state = std.heap.ArenaAllocator.init(testing.allocator);
-    defer art_arena_state.deinit();
-    const art_arena = art_arena_state.allocator();
-    for (model_mod.albums, 0..) |album, index| {
-        const art = album.art orelse continue;
-        var path_buffer: [160]u8 = undefined;
-        const path = try std.fmt.bufPrint(&path_buffer, "/tmp/soundboard-art/{s}.rgba", .{std.fs.path.stem(art)});
-        const rgba = try readPreparedFile(io, art_arena, path);
-        const side = std.math.sqrt(rgba.len / 4);
-        try testing.expectEqual(side * side * 4, rgba.len);
-        const encoded = try art_arena.alloc(u8, try canvas.png.encodedRgba8ByteLen(side, side));
-        var png_writer = std.Io.Writer.fixed(encoded);
-        try canvas.png.writeRgba8(&png_writer, side, side, rgba);
-        _ = try live.app_state.effects.registerImageBytes(album.id, png_writer.buffered());
-        live.app_state.model.covers[index] = album.id;
-    }
-
-    // The hero state: album grid, a track playing so the now-playing bar
-    // and transport are on screen - a minute in, so the seek bar carries
-    // real progress. The app follows the system appearance, so each
-    // scheme arrives as a platform event.
-    try live.dispatch(.{ .play_track = model_mod.albumTracks(2)[0].id });
-    live.app_state.model.elapsed_ms = 67_500;
-    try live.harness.runtime.dispatchPlatformEvent(live.app_state.app(), .{ .appearance_changed = .{ .color_scheme = .light } });
-    try presentShotFrame(live, 2);
-    live.harness.runtime.options.automation = native_sdk.automation.Server.init(io, "/tmp/homepage-shots/soundboard-light-artifacts", "Soundboard");
-    try live.harness.runtime.dispatchAutomationCommand(live.app_state.app(), "screenshot soundboard-canvas 2");
-
-    // Same state, dark scheme: the dispatch re-emits the display list
-    // with the re-derived tokens, so no present is needed in between.
-    try live.harness.runtime.dispatchPlatformEvent(live.app_state.app(), .{ .appearance_changed = .{ .color_scheme = .dark } });
-    live.harness.runtime.options.automation = native_sdk.automation.Server.init(io, "/tmp/homepage-shots/soundboard-dark-artifacts", "Soundboard");
-    try live.harness.runtime.dispatchAutomationCommand(live.app_state.app(), "screenshot soundboard-canvas 2");
-}
-
-/// Env-gated dump switch. `std.c.getenv` needs libc, which this test
-/// build only links on targets whose platform layer pulls it in; when
-/// libc is absent the gate reads as unset and the gated test skips.
-fn envGateSet(name: [*:0]const u8) bool {
-    if (comptime !@import("builtin").link_libc) return false;
-    return std.c.getenv(name) != null;
-}
-
-/// Read one prepared capture input (see the homepage-shots header
-/// comment) fully into `arena` — loud on a missing or short file, so a
-/// mis-prepared /tmp fails the gated run instead of silently degrading.
-fn readPreparedFile(io: std.Io, arena: std.mem.Allocator, path: []const u8) ![]u8 {
-    var file = try std.Io.Dir.cwd().openFile(io, path, .{});
-    defer file.close(io);
-    var read_buffer: [4096]u8 = undefined;
-    var reader = file.reader(io, &read_buffer);
-    return reader.interface.allocRemaining(arena, .limited(8 * 1024 * 1024));
-}
-
-// ------------------------------------------------------- adaptive grid
-
-/// Per-row tile counts of the retained album grid: the frames of every
-/// listitem-role tile, bucketed by row y. Returns the count of rows
-/// written and fills `first_x` with the leading tile's x per row (the
-/// tail-row left-align check).
-fn gridRowCounts(layout: canvas.WidgetLayoutTree, counts: []usize, first_x: []f32) usize {
-    var rows: usize = 0;
-    var current_y: f32 = -1;
-    for (layout.nodes) |node| {
-        if (node.widget.semantics.role != .listitem) continue;
-        if (node.widget.kind != .list_item) continue;
-        if (rows == 0 or node.frame.y != current_y) {
-            if (rows == counts.len) return rows;
-            current_y = node.frame.y;
-            counts[rows] = 0;
-            first_x[rows] = node.frame.x;
-            rows += 1;
-        }
-        counts[rows - 1] += 1;
-        first_x[rows - 1] = @min(first_x[rows - 1], node.frame.x);
-    }
-    return rows;
-}
-
-/// Drive one full live resize: the window-manager resize event (the
-/// runtime re-lays-out at the new bounds), then the frame it presents
-/// at the new size (whose `on_frame` hook mirrors the width into the
-/// model and rebuilds with the re-derived column count).
-fn resizeTo(live: LiveApp, width: f32, height: f32, frame_index: u64) !void {
-    try live.harness.runtime.dispatchPlatformEvent(live.app_state.app(), .{ .gpu_surface_resized = .{
-        .label = main.canvas_label,
-        .window_id = 1,
-        .frame = geometry.RectF.init(0, 0, width, height),
-        .scale_factor = 1,
-    } });
-    try live.harness.runtime.dispatchPlatformEvent(live.app_state.app(), .{ .gpu_surface_frame = .{
-        .label = main.canvas_label,
-        .size = geometry.SizeF.init(width, height),
-        .scale_factor = 1,
-        .frame_index = frame_index,
-        .timestamp_ns = frame_index * 1_000_000,
-        .nonblank = true,
-    } });
-}
-
-test "the album grid re-chunks its rows live as the window resizes" {
-    const live = try LiveApp.start(true);
-    defer live.stop();
-    var counts: [8]usize = undefined;
-    var first_x: [8]f32 = undefined;
-
-    // The launch surface (1080 wide) fits four min-width tiles per row,
-    // and the whole catalog chunks accordingly. Row counts and the
-    // expected rows both derive from the manifest, never hardcoded.
-    try resizeTo(live, main.window_width, main.window_height, 2);
-    try testing.expectEqual(main.window_width, live.app_state.model.canvas_width);
-    var fit = view_mod.gridFit(main.window_width);
-    try testing.expectEqual(@as(usize, 4), fit.columns);
-    var layout = try live.harness.runtime.canvasWidgetLayout(1, main.canvas_label);
-    var rows = gridRowCounts(layout, &counts, &first_x);
-    try expectChunking(rows, counts[0..rows], first_x[0..rows], fit.columns);
-
-    // Widen the window: six tiles fit, the same catalog re-chunks into
-    // fewer, longer rows, and the tail row (8 albums into rows of 6
-    // leaves a short one) starts at the same leading edge as a full row.
-    try resizeTo(live, 1520, 800, 3);
-    try testing.expectEqual(@as(f32, 1520), live.app_state.model.canvas_width);
-    fit = view_mod.gridFit(1520);
-    try testing.expectEqual(@as(usize, 6), fit.columns);
-    layout = try live.harness.runtime.canvasWidgetLayout(1, main.canvas_label);
-    rows = gridRowCounts(layout, &counts, &first_x);
-    try expectChunking(rows, counts[0..rows], first_x[0..rows], fit.columns);
-
-    // And back down to the window's min floor: four per row again — the
-    // path is live in both directions, not a one-shot at boot.
-    try resizeTo(live, main.window_min_width, main.window_height, 4);
-    fit = view_mod.gridFit(main.window_min_width);
-    try testing.expectEqual(@as(usize, 4), fit.columns);
-    layout = try live.harness.runtime.canvasWidgetLayout(1, main.canvas_label);
-    rows = gridRowCounts(layout, &counts, &first_x);
-    try expectChunking(rows, counts[0..rows], first_x[0..rows], fit.columns);
-}
-
-/// Assert one chunking: full rows of `columns` tiles, the catalog's
-/// remainder in a final short row, and EVERY row starting at the same
-/// leading x (the tail left-aligns instead of centering or stretching).
-fn expectChunking(rows: usize, counts: []const usize, first_x: []const f32, columns: usize) !void {
-    const albums = model_mod.albums.len;
-    try testing.expectEqual((albums + columns - 1) / columns, rows);
-    for (counts, 0..) |count, row| {
-        const expected = if (row + 1 < rows or albums % columns == 0) columns else albums % columns;
-        try testing.expectEqual(expected, count);
-    }
-    for (first_x) |x| {
-        try testing.expectEqual(first_x[0], x);
-    }
-}
-
-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();
-    fx.executor = .fake;
-
-    var model = model_mod.Model{};
-    try testing.expectEqual(model_mod.header_natural_height, model.header_height);
-
-    // The tall hidden-inset band arrives through on_chrome: the header
-    // pads past the traffic lights and matches the band's height so its
-    // centered controls share the lights' centerline.
-    const chrome: native_sdk.WindowChrome = .{
-        .insets = .{ .top = 52, .left = 78 },
-        .buttons = native_sdk.geometry.RectF.init(20, 19, 52, 14),
-    };
-    const msg = main.onChrome(chrome) orelse return error.TestUnexpectedResult;
-    model_mod.update(&model, msg, &fx);
-    try testing.expectEqual(@as(f32, 78), model.chrome_leading);
-    try testing.expectEqual(@as(f32, 0), model.chrome_trailing);
-    try testing.expectEqual(@max(model_mod.header_natural_height, 52), model.header_height);
-
-    // A band taller than the natural header grows the header with it.
-    const tall = main.onChrome(.{ .insets = .{ .top = 72, .left = 78 } }) orelse return error.TestUnexpectedResult;
-    model_mod.update(&model, tall, &fx);
-    try testing.expectEqual(@as(f32, 72), model.header_height);
-
-    // Windows delivers the min/max/close cluster on the TRAILING edge
-    // instead: the leading pad collapses and the trailing one takes it.
-    const windows_chrome = main.onChrome(.{
-        .insets = .{ .top = 32, .right = 139 },
-        .buttons = native_sdk.geometry.RectF.init(917, 0, 139, 32),
-    }) orelse return error.TestUnexpectedResult;
-    model_mod.update(&model, windows_chrome, &fx);
-    try testing.expectEqual(@as(f32, 0), model.chrome_leading);
-    try testing.expectEqual(@as(f32, 139), model.chrome_trailing);
-    try testing.expectEqual(model_mod.header_natural_height, model.header_height);
-
-    // Linux (GTK client-side decorations) delivers the tall header-bar
-    // band at exactly the 52 floor with the window-control cluster on
-    // whichever edge the user's decoration layout picked — trailing
-    // under the stock layout. The header keeps its natural height and
-    // pads the trailing edge clear of the controls column.
-    const gtk_chrome = main.onChrome(.{
-        .insets = .{ .top = 52, .right = 114 },
-        .buttons = native_sdk.geometry.RectF.init(962, 8, 100, 36),
-    }) orelse return error.TestUnexpectedResult;
-    model_mod.update(&model, gtk_chrome, &fx);
-    try testing.expectEqual(@as(f32, 0), model.chrome_leading);
-    try testing.expectEqual(@as(f32, 114), model.chrome_trailing);
-    try testing.expectEqual(@max(model_mod.header_natural_height, 52), model.header_height);
-
-    // Fullscreen zeroes the chrome: the pads collapse and the height
-    // falls back to the header's natural floor.
-    const cleared = main.onChrome(.{}) orelse return error.TestUnexpectedResult;
-    model_mod.update(&model, cleared, &fx);
-    try testing.expectEqual(@as(f32, 0), model.chrome_leading);
-    try testing.expectEqual(@as(f32, 0), model.chrome_trailing);
-    try testing.expectEqual(model_mod.header_natural_height, model.header_height);
-
-    // The scene declares the matching titlebar so the platform actually
-    // hides the OS bar this header replaces.
-    try testing.expectEqual(.hidden_inset_tall, main.shell_scene.windows[0].titlebar);
-
-    // The channel's top and bottom bands also land raw in the model —
-    // the compact shell's safe-area pads (Dynamic Island / home
-    // indicator on phones) — without the desktop header floor applied.
-    const phone = main.onChrome(.{ .insets = .{ .top = 59, .bottom = 34 } }) orelse return error.TestUnexpectedResult;
-    model_mod.update(&model, phone, &fx);
-    try testing.expectEqual(@as(f32, 59), model.chrome_top);
-    try testing.expectEqual(@as(f32, 34), model.chrome_bottom);
-}
-
-// ---------------------------------------------------------- compact shell
-
-/// A mainstream phone-portrait surface (points), the compact suite's
-/// stand-in for the full-screen mobile host.
-const phone_size = geometry.SizeF.init(393, 852);
-
-/// Whether any widget in the live layout carries this semantics label.
-fn layoutHasLabel(layout: canvas.WidgetLayoutTree, label: []const u8) bool {
-    for (layout.nodes) |node| {
-        if (std.mem.eql(u8, node.widget.semantics.label, label)) return true;
-    }
-    return false;
-}
-
-test "the form-factor rule: compact strictly below the desktop floor" {
-    // One strict comparison, no hysteresis: the boundary is the desktop
-    // shell's proven min content width. AT the floor the desktop shell
-    // holds (the layout audit proves that width); strictly below it —
-    // widths no desktop window can reach, only phone-class surfaces —
-    // the compact shell takes over.
-    var model = Model{};
-    try testing.expectEqual(model_mod.FormFactor.regular, model.formFactor());
-    model.canvas_width = model_mod.min_canvas_width;
-    try testing.expectEqual(model_mod.FormFactor.regular, model.formFactor());
-    model.canvas_width = model_mod.min_canvas_width - 1;
-    try testing.expectEqual(model_mod.FormFactor.compact, model.formFactor());
-    model.canvas_width = phone_size.width;
-    try testing.expectEqual(model_mod.FormFactor.compact, model.formFactor());
-}
-
-test "the host-reported form factor owns the shell switch when present" {
-    // The window-chrome channel's size-class report wins over the width
-    // derivation: a host that says compact gets the compact shell on
-    // any width, and one that says regular gets the desktop shell even
-    // on a phone-narrow surface. The width rule below stays exactly as
-    // pinned above for hosts that never report.
-    var model = Model{};
-    apply(&model, .{ .chrome_changed = .{ .insets = .{ .top = 47, .bottom = 34 }, .form_factor = .compact } });
-    model.canvas_width = main.window_width;
-    try testing.expectEqual(model_mod.FormFactor.compact, model.formFactor());
-
-    apply(&model, .{ .chrome_changed = .{ .insets = .{ .top = 24, .bottom = 20 }, .form_factor = .regular } });
-    model.canvas_width = phone_size.width;
-    try testing.expectEqual(model_mod.FormFactor.regular, model.formFactor());
-
-    // The report is sticky: a later chrome delivery that carries no
-    // size class (an ordinary inset change) keeps the last host truth.
-    apply(&model, .{ .chrome_changed = .{ .insets = .{ .top = 24, .bottom = 0 } } });
-    try testing.expectEqual(model_mod.FormFactor.regular, model.formFactor());
-}
-
-/// Whether any widget in a laid-out tree is a button showing this text
-/// (the compact switcher's Albums/Songs buttons carry text, not
-/// semantics labels).
-fn layoutHasButtonText(layout: canvas.WidgetLayoutTree, text: []const u8) bool {
-    for (layout.nodes) |node| {
-        if (node.widget.kind == .button and std.mem.eql(u8, node.widget.text, text)) return true;
-    }
-    return false;
-}
-
-test "the compact switcher yields to the projected native tab bar" {
-    var arena_state = std.heap.ArenaAllocator.init(testing.allocator);
-    defer arena_state.deinit();
-    const arena = arena_state.allocator();
-
-    // Without a projecting host the compact header keeps its in-canvas
-    // Albums/Songs switcher — the declaration is inert and the app is
-    // whole on its own.
-    var model = Model{};
-    model.canvas_width = phone_size.width;
-    var nodes: [1024]canvas.WidgetLayoutNode = undefined;
-    var tree = try buildTree(arena, &model);
-    var layout = try canvas.layoutWidgetTree(tree.root, geometry.RectF.init(0, 0, phone_size.width, phone_size.height), &nodes);
-    try testing.expect(layoutHasButtonText(layout, "Albums"));
-    try testing.expect(layoutHasButtonText(layout, "Songs"));
-
-    // The chrome channel says a REAL native bar owns the tab affordance:
-    // the in-canvas switcher yields (one switcher on screen, the
-    // system's) while search keeps its full-width row.
-    apply(&model, .{ .chrome_changed = .{ .insets = .{ .top = 47, .bottom = 83 }, .form_factor = .compact, .tabs_projected = true } });
-    tree = try buildTree(arena, &model);
-    layout = try canvas.layoutWidgetTree(tree.root, geometry.RectF.init(0, 0, phone_size.width, phone_size.height), &nodes);
-    try testing.expect(!layoutHasButtonText(layout, "Albums"));
-    try testing.expect(!layoutHasButtonText(layout, "Songs"));
-    var saw_search = false;
-    for (layout.nodes) |node| {
-        if (std.mem.eql(u8, node.widget.semantics.label, "Search library")) saw_search = true;
-    }
-    try testing.expect(saw_search);
-
-    // Navigation still flows through the same Msgs the bar's commands
-    // map to — the projected bar and the canvas switcher are the same
-    // journal entries.
-    apply(&model, .show_songs);
-    try testing.expectEqual(model_mod.Tab.songs, model.tab);
-
-    // And the bar going away (the report clearing) restores the
-    // in-canvas switcher: the yield is exactly as durable as the bar.
-    apply(&model, .{ .chrome_changed = .{ .insets = .{ .top = 47, .bottom = 34 }, .form_factor = .compact, .tabs_projected = false } });
-    apply(&model, .show_albums);
-    tree = try buildTree(arena, &model);
-    layout = try canvas.layoutWidgetTree(tree.root, geometry.RectF.init(0, 0, phone_size.width, phone_size.height), &nodes);
-    try testing.expect(layoutHasButtonText(layout, "Albums"));
-}
-
-test "the declared mobile tab set projects the model and maps taps back" {
-    // The declaration: exactly the Albums/Songs pair, icons from the
-    // app's registered vocabulary plus a built-in, no primary action
-    // (the mini player owns the transport — a floating play control
-    // would project playback twice).
-    const options = main.mobileOptions();
-    const chrome = options.scene.chrome;
-    try testing.expectEqual(@as(usize, 2), chrome.tabs.len);
-    try testing.expectEqualStrings("tabs.albums", chrome.tabs[0].id);
-    try testing.expectEqualStrings("app:albums", chrome.tabs[0].icon);
-    try testing.expectEqualStrings("tabs.songs", chrome.tabs[1].id);
-    try testing.expectEqualStrings("music", chrome.tabs[1].icon);
-    try testing.expect(chrome.primary_action == null);
-    try native_sdk.app_manifest.validateShellChrome(chrome);
-
-    // Round trip: the model's selection derives each declared id, and
-    // the declared ids map back onto the exact Msgs the in-canvas
-    // switcher dispatches — one journal, two entry points.
-    var model = Model{};
-    try testing.expectEqualStrings("tabs.albums", main.selectedTab(&model));
-    apply(&model, main.onCommand("tabs.songs").?);
-    try testing.expectEqual(model_mod.Tab.songs, model.tab);
-    try testing.expectEqualStrings("tabs.songs", main.selectedTab(&model));
-    apply(&model, main.onCommand("tabs.albums").?);
-    try testing.expectEqual(model_mod.Tab.albums, model.tab);
-    try testing.expect(main.onCommand("tabs.unknown") == null);
-}
-
-test "the navigation projection follows the visible page stack" {
-    // The declaration: the depth derivation and the back command ride
-    // the mobile options together (a gesture that could dispatch
-    // nothing must never arm).
-    const options = main.mobileOptions();
-    try testing.expect(options.navigation_depth_fn != null);
-    try testing.expectEqualStrings("nav.back", options.navigation_back_command);
-
-    // Depth follows the VISIBLE page: the grid is the root, an open
-    // album is one push in — but only while the Albums tab shows it.
-    var model = Model{};
-    try testing.expectEqual(@as(usize, 0), main.navigationDepth(&model));
-    apply(&model, .{ .open_album = 3 });
-    try testing.expectEqual(@as(usize, 1), main.navigationDepth(&model));
-
-    // A tab switch with the detail open is LATERAL: depth drops with
-    // the selected tab (the host reconciles without a transition), and
-    // switching back restores it — `open_album` never moved.
-    apply(&model, main.onCommand("tabs.songs").?);
-    try testing.expectEqual(@as(usize, 0), main.navigationDepth(&model));
-    try testing.expectEqual(@as(?u8, 3), model.open_album);
-    apply(&model, main.onCommand("tabs.albums").?);
-    try testing.expectEqual(@as(usize, 1), main.navigationDepth(&model));
-
-    // The completed edge-swipe dispatches the declared back command,
-    // which maps onto the exact Msg the in-canvas back button sends —
-    // one journal, two entry points, depth answers 0 either way.
-    const back = main.onCommand("nav.back") orelse return error.TestUnexpectedResult;
-    try testing.expectEqual(Msg.close_album, back);
-    apply(&model, back);
-    try testing.expectEqual(@as(?u8, null), model.open_album);
-    try testing.expectEqual(@as(usize, 0), main.navigationDepth(&model));
-
-    // Replay determinism: the same journal into two fresh models lands
-    // identical depth readouts at every step — the projection is a pure
-    // derivation, so a journal replayed without a host is identical.
-    const journal = [_]Msg{
-        .{ .open_album = 2 }, .show_songs,  .show_albums, .close_album,
-        .{ .open_album = 5 }, .close_album,
-    };
-    var first = Model{};
-    var second = Model{};
-    var depths_first: [journal.len]usize = undefined;
-    var depths_second: [journal.len]usize = undefined;
-    for (journal, 0..) |msg, index| {
-        apply(&first, msg);
-        depths_first[index] = main.navigationDepth(&first);
-    }
-    for (journal, 0..) |msg, index| {
-        apply(&second, msg);
-        depths_second[index] = main.navigationDepth(&second);
-    }
-    try testing.expectEqualSlices(usize, &depths_first, &depths_second);
-    try testing.expectEqual(first.tab, second.tab);
-    try testing.expectEqual(first.open_album, second.open_album);
-}
-
-test "the mobile entry is independent of the desktop window constants" {
-    // The mobile scene is the canonical full-screen surface: no desktop
-    // width, min-size floor, or titlebar constrains the phone.
-    const options = main.mobileOptions();
-    try testing.expectEqualStrings(native_sdk.embed.mobile_gpu_surface_label, options.canvas_label);
-    const window = options.scene.windows[0];
-    try testing.expectEqual(@as(f32, 0), window.min_width);
-    try testing.expectEqual(@as(f32, 0), window.min_height);
-    try testing.expectEqual(.standard, window.titlebar);
-
-    // The mobile boot model seeds a phone-portrait canvas width, so the
-    // installing frame already composes the compact shell — never one
-    // desktop-shaped frame flashed onto a 390pt surface.
-    const model = main.initModel();
-    try testing.expectEqual(model_mod.FormFactor.compact, model.formFactor());
-
-    // The streaming track cache is wired at the mobile boot exactly like
-    // the desktop launch: `initModel` resolves the platform cache
-    // directory once (env-driven through libc — the embed entry has no
-    // `std.process.Init`), so `fx.playAudio` carries a real cache_path
-    // on phones and a streamed track downloads once, not on every play.
-    // A libc-less test build has no environment to read; there the boot
-    // honestly leaves the cache disabled and this pins that instead.
-    if (comptime @import("builtin").link_libc) {
-        try testing.expect(model.cacheDir().len > 0);
-    } else {
-        try testing.expectEqual(@as(usize, 0), model.cacheDir().len);
-    }
-}
-
-test "the shell switches at the boundary width through the live resize path" {
-    const live = try LiveApp.start(true);
-    defer live.stop();
-
-    // The launch surface is desktop-shaped: the markup header (window
-    // drag band, chrome spacers) is on screen and no compact chrome is.
-    var layout = try live.harness.runtime.canvasWidgetLayout(1, main.canvas_label);
-    try testing.expect(layoutHasLabel(layout, "Soundboard header"));
-    try testing.expect(!layoutHasLabel(layout, "Compact header"));
-    try testing.expect(layoutHasLabel(layout, "Now playing bar"));
-
-    // Resize below the boundary: the same app recomposes as the compact
-    // shell — stacked touch header, no desktop bars, and no window-drag
-    // region anywhere (phones own their chrome).
-    try resizeTo(live, phone_size.width, phone_size.height, 2);
-    layout = try live.harness.runtime.canvasWidgetLayout(1, main.canvas_label);
-    try testing.expect(layoutHasLabel(layout, "Compact header"));
-    try testing.expect(!layoutHasLabel(layout, "Soundboard header"));
-    try testing.expect(!layoutHasLabel(layout, "Now playing bar"));
-    for (layout.nodes) |node| {
-        try testing.expect(!node.widget.window_drag);
-    }
-    // Search stays reachable in the compact shell (full-width row).
-    try testing.expect(layoutHasLabel(layout, "Search library"));
-
-    // And back above the boundary: the desktop shell returns — the
-    // switch is live in both directions, driven only by the width Msg.
-    try resizeTo(live, main.window_width, main.window_height, 3);
-    layout = try live.harness.runtime.canvasWidgetLayout(1, main.canvas_label);
-    try testing.expect(layoutHasLabel(layout, "Soundboard header"));
-    try testing.expect(!layoutHasLabel(layout, "Compact header"));
-}
-
-test "the mini bar stays visible through playback, pause, and the honest notice" {
-    const live = try LiveApp.startSized(true, phone_size);
-    defer live.stop();
-    const app_state = live.app_state;
-    try resizeTo(live, phone_size.width, phone_size.height, 2);
-
-    // Idle: no mini bar — nothing is loaded and no notice needs a home.
-    var layout = try live.harness.runtime.canvasWidgetLayout(1, main.canvas_label);
-    try testing.expect(!layoutHasLabel(layout, "Now playing mini bar"));
-
-    // Play: the bar appears with the cover thumb, the track's title, and
-    // the pause glyph (the icon names the state).
-    const track = model_mod.trackById(1);
-    try live.dispatch(.{ .play_track = track.id });
-    layout = try live.harness.runtime.canvasWidgetLayout(1, main.canvas_label);
-    try testing.expect(layoutHasLabel(layout, "Now playing mini bar"));
-    try testing.expect(layoutHasLabel(layout, "Now playing cover"));
-    var saw_title = false;
-    var play_pause_icon: []const u8 = "";
-    for (layout.nodes) |node| {
-        if (std.mem.eql(u8, node.widget.text, track.title)) saw_title = true;
-        if (std.mem.eql(u8, node.widget.semantics.label, "Play or pause")) play_pause_icon = node.widget.icon;
-    }
-    try testing.expect(saw_title);
-    try testing.expectEqualStrings("pause", play_pause_icon);
-
-    // Pause IN the bar (the real widget path): the bar must not vanish —
-    // a paused track is still loaded — and the glyph flips to play.
-    const toggle_id = try live.widgetIdByLabel(.button, "Play or pause");
-    var command_buffer: [96]u8 = undefined;
-    const click = try std.fmt.bufPrint(&command_buffer, "widget-click {s} {d}", .{ main.canvas_label, toggle_id });
-    try live.harness.runtime.dispatchAutomationCommand(app_state.app(), click);
-    try testing.expect(!app_state.model.playing);
-    layout = try live.harness.runtime.canvasWidgetLayout(1, main.canvas_label);
-    try testing.expect(layoutHasLabel(layout, "Now playing mini bar"));
-    for (layout.nodes) |node| {
-        if (std.mem.eql(u8, node.widget.semantics.label, "Play or pause")) {
-            try testing.expectEqualStrings("play", node.widget.icon);
-        }
-    }
-
-    // A failed load clears playback but raises the notice — the bar
-    // stays up to carry it (with no transport rail, it is the compact
-    // shell's only status surface). The URL base is cleared first: the
-    // committed manifest ships a hosted streaming default, and the
-    // assets notice exists only for the streaming-disabled state.
-    app_state.model.setUrlBase("");
-    try live.dispatch(.toggle_play);
-    try app_state.effects.feedAudioEvent(.failed, 0, 0, false);
-    try live.wake();
-    try testing.expect(app_state.model.assets_missing);
-    try testing.expectEqual(@as(?u8, null), app_state.model.now);
-    layout = try live.harness.runtime.canvasWidgetLayout(1, main.canvas_label);
-    try testing.expect(layoutHasLabel(layout, "Now playing mini bar"));
-    var saw_notice = false;
-    for (layout.nodes) |node| {
-        if (std.mem.eql(u8, node.widget.text, model_mod.assets_missing_title)) saw_notice = true;
-    }
-    try testing.expect(saw_notice);
-}
-
-test "compact navigation: tap opens the record, back returns, one tap plays" {
-    const live = try LiveApp.startSized(true, phone_size);
-    defer live.stop();
-    const app_state = live.app_state;
-    try resizeTo(live, phone_size.width, phone_size.height, 2);
-
-    // Tap the first album tile (a real stamped touch press): the record
-    // opens as a full-surface page — model-driven navigation.
-    var arena_state = std.heap.ArenaAllocator.init(testing.allocator);
-    defer arena_state.deinit();
-    const album = &model_mod.albums[0];
-    const tile_label = try std.fmt.allocPrint(arena_state.allocator(), "{s} by {s}", .{ album.title, album.artist });
-    const tile = try live.widgetFrameByLabel(.list_item, tile_label);
-    try live.click(tile.x + tile.width / 2, tile.y + tile.height / 2, 100 * std.time.ns_per_ms);
-    try testing.expectEqual(@as(?u8, album.id), app_state.model.open_album);
-    var layout = try live.harness.runtime.canvasWidgetLayout(1, main.canvas_label);
-    try testing.expect(layoutHasLabel(layout, "Album detail"));
-
-    // ONE tap on a track row PLAYS it — the touch convention (no
-    // double-tap gesture, no hover, no selection-first step)...
-    const first_track = &model_mod.albumTracks(album.id)[0];
-    const row = try live.widgetFrameByLabel(.list_item, first_track.title);
-    try live.click(row.x + row.width / 2, row.y + row.height / 2, 2_000 * std.time.ns_per_ms);
-    try testing.expectEqual(@as(?u8, first_track.id), app_state.model.now);
-    try testing.expect(app_state.model.playing);
-
-    // ... and the compact rows mount NO context menus: right-click is
-    // pointer vocabulary and the phone hosts model no long-press.
-    const row_id = try live.widgetIdByLabel(.list_item, first_track.title);
-    try testing.expect(app_state.tree.?.msgForContextMenu(row_id, 0) == null);
-
-    // Back is the same model state the desktop back drives: the grid
-    // returns (with the mini bar still up — playback survives paging).
-    const back = try live.widgetFrameByLabel(.button, "Back to albums");
-    try live.click(back.x + back.width / 2, back.y + back.height / 2, 4_000 * std.time.ns_per_ms);
-    try testing.expectEqual(@as(?u8, null), app_state.model.open_album);
-    layout = try live.harness.runtime.canvasWidgetLayout(1, main.canvas_label);
-    try testing.expect(layoutHasLabel(layout, "Album grid"));
-    try testing.expect(layoutHasLabel(layout, "Now playing mini bar"));
-}
-
-test "safe-area insets pad the compact shell top and bottom" {
-    const live = try LiveApp.startSized(true, phone_size);
-    defer live.stop();
-    try resizeTo(live, phone_size.width, phone_size.height, 2);
-
-    // The phone bands arrive through the same window-chrome channel the
-    // desktop titlebar uses (the iOS host republishes safe areas there).
-    const chrome = main.onChrome(.{ .insets = .{ .top = 59, .bottom = 34 } }) orelse return error.TestUnexpectedResult;
-    try live.dispatch(chrome);
-    try live.dispatch(.{ .play_track = 1 });
-
-    // The header clears the Dynamic Island band; the mini bar sits
-    // above the home-indicator band — content under neither.
-    const header = try live.widgetFrameByLabel(.column, "Compact header");
-    try testing.expect(header.y >= 59);
-    const bar = try live.widgetFrameByLabel(.column, "Now playing mini bar");
-    try testing.expect(bar.y + bar.height <= phone_size.height - 34);
-}
-
-test "compact touch targets clear the 44pt floor" {
-    var arena_state = std.heap.ArenaAllocator.init(testing.allocator);
-    defer arena_state.deinit();
-
-    var model = Model{};
-    model.canvas_width = phone_size.width;
-    apply(&model, .{ .play_track = 1 });
-
-    // Every page the compact shell can show, with the mini bar mounted:
-    // every pressable control — buttons, the search field, list rows —
-    // lays out at least 44pt tall (whole album tiles tower past it).
-    const cases = [_]struct { tab: model_mod.Tab, open: ?u8 }{
-        .{ .tab = .albums, .open = null },
-        .{ .tab = .albums, .open = 2 },
-        .{ .tab = .songs, .open = null },
-    };
-    for (cases) |case| {
-        model.tab = case.tab;
-        model.open_album = case.open;
-        const tree = try buildTree(arena_state.allocator(), &model);
-        var nodes: [1024]canvas.WidgetLayoutNode = undefined;
-        // Layout with the app's REAL tokens: the touch floor is a claim
-        // about the shipped control metrics, not the default pack's.
-        const layout = try canvas.layoutWidgetTreeWithTokens(tree.root, geometry.RectF.init(0, 0, phone_size.width, phone_size.height), main.tokensFromModel(&model), &nodes);
-        var interactive: usize = 0;
-        for (layout.nodes) |node| {
-            switch (node.widget.kind) {
-                .button, .search_field, .list_item => {
-                    interactive += 1;
-                    try testing.expect(node.frame.normalized().height >= 44);
-                },
-                else => {},
-            }
-        }
-        try testing.expect(interactive > 0);
-        _ = arena_state.reset(.retain_capacity);
-    }
-}
-
-test "one Msg journal drives both shells deterministically" {
-    var arena_state = std.heap.ArenaAllocator.init(testing.allocator);
-    defer arena_state.deinit();
-    const arena = arena_state.allocator();
-
-    // One journal, crossing the form-factor boundary in both directions
-    // mid-stream. Every entry is an ordinary Msg — the shell is a pure
-    // derivation of the model, so identical journals into identical
-    // initial models must land identical shells and identical trees at
-    // every step, with no clock, host, or ordering dependence anywhere.
-    const album = &model_mod.albums[1];
-    const journal = [_]Msg{
-        .{ .canvas_resized = phone_size.width },
-        .{ .chrome_changed = .{ .insets = .{ .top = 59, .bottom = 34 } } },
-        .{ .open_album = album.id },
-        .{ .play_track = model_mod.albumTracks(album.id)[0].id },
-        .{ .canvas_resized = 1520 },
-        .close_album,
-        .show_songs,
-        .{ .canvas_resized = model_mod.compact_seed_canvas_width },
-        // The host-reported channel mid-journal: the size class takes
-        // the switch over from the width, the projected-tabs flag
-        // reshapes the compact header, and a later width Msg no longer
-        // moves the shell — all of it plain Msg data, so determinism
-        // holds through the host reports too.
-        .{ .chrome_changed = .{ .insets = .{ .top = 47, .bottom = 34 }, .form_factor = .regular } },
-        .{ .chrome_changed = .{ .insets = .{ .top = 47, .bottom = 83 }, .form_factor = .compact, .tabs_projected = true } },
-        .{ .canvas_resized = 1520 },
-    };
-    const expected_form = [journal.len]model_mod.FormFactor{
-        .compact, .compact, .compact, .compact,
-        .regular, .regular, .regular, .compact,
-        .regular, .compact, .compact,
-    };
-
-    var first = Model{};
-    var second = Model{};
-    for (journal, expected_form) |msg, form| {
-        apply(&first, msg);
-        apply(&second, msg);
-        try testing.expectEqual(form, first.formFactor());
-        try testing.expectEqual(form, second.formFactor());
-
-        const first_tree = try buildTree(arena, &first);
-        const second_tree = try buildTree(arena, &second);
-        var first_ids: std.ArrayListUnmanaged(canvas.ObjectId) = .empty;
-        defer first_ids.deinit(testing.allocator);
-        var second_ids: std.ArrayListUnmanaged(canvas.ObjectId) = .empty;
-        defer second_ids.deinit(testing.allocator);
-        try collectIds(first_tree.root, &first_ids, testing.allocator);
-        try collectIds(second_tree.root, &second_ids, testing.allocator);
-        try testing.expectEqualSlices(canvas.ObjectId, first_ids.items, second_ids.items);
-        _ = arena_state.reset(.retain_capacity);
-    }
-}
-
-test "every compact view lays out within the phone canvas and the widget budget" {
-    var arena_state = std.heap.ArenaAllocator.init(testing.allocator);
-    defer arena_state.deinit();
-
-    var model = Model{};
-    model.canvas_width = phone_size.width;
-    apply(&model, .{ .play_track = 1 });
-
-    const cases = [_]struct { tab: model_mod.Tab, open: ?u8 }{
-        .{ .tab = .albums, .open = null },
-        .{ .tab = .albums, .open = 2 },
-        .{ .tab = .songs, .open = null },
-    };
-    for (cases) |case| {
-        model.tab = case.tab;
-        model.open_album = case.open;
-        const tree = try buildTree(arena_state.allocator(), &model);
-        var nodes: [1024]canvas.WidgetLayoutNode = undefined;
-        const layout = try canvas.layoutWidgetTree(tree.root, geometry.RectF.init(0, 0, phone_size.width, phone_size.height), &nodes);
-        try testing.expect(layout.nodes.len > 0);
-        try testing.expect(layout.nodes.len < 768);
-        _ = arena_state.reset(.retain_capacity);
-    }
-}
-
-/// The compact sweep floor: the narrowest mainstream phone (320pt
-/// portrait). The compact grid tree derives its columns from THIS width
-/// so a swept-wider surface can only underfill, mirroring how the
-/// desktop suite seeds its trees at the desktop floor.
-const compact_min_size = geometry.SizeF.init(320, 568);
-
-test "compact layout audit sweep: nothing clips, overlaps, or escapes" {
-    var arena_state = std.heap.ArenaAllocator.init(testing.allocator);
-    defer arena_state.deinit();
-
-    var model = Model{};
-    model.canvas_width = compact_min_size.width;
-    apply(&model, .{ .play_track = 1 });
-    // Sweep with the phone bands applied: the safe-area spacers are part
-    // of the composition the audit must prove clean.
-    apply(&model, .{ .chrome_changed = .{ .insets = .{ .top = 59, .bottom = 34 } } });
-
-    const cases = [_]struct { tab: model_mod.Tab, open: ?u8 }{
-        .{ .tab = .albums, .open = null },
-        .{ .tab = .albums, .open = 2 },
-        .{ .tab = .songs, .open = null },
-    };
-    for (cases) |case| {
-        model.tab = case.tab;
-        model.open_album = case.open;
-        const tree = try buildTree(arena_state.allocator(), &model);
-        try canvas.expectLayoutAuditSweepClean(testing.allocator, tree.root, .{
-            .tokens = main.tokensFromModel(&model),
-            .min_size = compact_min_size,
-            .default_size = phone_size,
-        });
-        _ = arena_state.reset(.retain_capacity);
-    }
-}
-
-test "compact a11y audit sweep: every interactive widget is named, reachable, and unambiguous" {
-    var arena_state = std.heap.ArenaAllocator.init(testing.allocator);
-    defer arena_state.deinit();
-
-    var model = Model{};
-    model.canvas_width = compact_min_size.width;
-    apply(&model, .{ .play_track = 1 });
-    apply(&model, .{ .chrome_changed = .{ .insets = .{ .top = 59, .bottom = 34 } } });
-
-    const cases = [_]struct { tab: model_mod.Tab, open: ?u8 }{
-        .{ .tab = .albums, .open = null },
-        .{ .tab = .albums, .open = 2 },
-        .{ .tab = .songs, .open = null },
-    };
-    for (cases) |case| {
-        model.tab = case.tab;
-        model.open_album = case.open;
-        const tree = try buildTree(arena_state.allocator(), &model);
-        try canvas.expectA11yAuditSweepClean(testing.allocator, tree.root, .{
-            .tokens = main.tokensFromModel(&model),
-            .min_size = compact_min_size,
-            .default_size = phone_size,
-        });
-        _ = arena_state.reset(.retain_capacity);
-    }
-}
-
-// Env-gated compact-shell screenshot renderer (skipped by default, never
-// in CI): renders the COMPACT shell OFFSCREEN on a phone-sized surface
-// through the deterministic reference renderer — the album grid with the
-// mini bar up, and the album detail page, once per color scheme. PNGs
-// land in /tmp/compact-shots/soundboard-compact-*-artifacts/. To use:
-//
-//   COMPACT_SHOTS=1 zig build test
-test "render compact-shell screenshots (env-gated)" {
-    if (!envGateSet("COMPACT_SHOTS")) return error.SkipZigTest;
-    const io = testing.io;
-
-    const live = try LiveApp.startSized(true, phone_size);
-    defer live.stop();
-    try resizeTo(live, phone_size.width, phone_size.height, 2);
-    try live.dispatch(main.onChrome(.{ .insets = .{ .top = 59, .bottom = 34 } }).?);
-
-    // Grid with the mini player up, a minute into a track.
-    try live.dispatch(.{ .play_track = model_mod.albumTracks(2)[0].id });
-    live.app_state.model.elapsed_ms = 67_500;
-    try live.harness.runtime.dispatchPlatformEvent(live.app_state.app(), .{ .appearance_changed = .{ .color_scheme = .light } });
-    try presentShotFrame(live, 3);
-    live.harness.runtime.options.automation = native_sdk.automation.Server.init(io, "/tmp/compact-shots/soundboard-compact-grid-light-artifacts", "Soundboard");
-    try live.harness.runtime.dispatchAutomationCommand(live.app_state.app(), "screenshot soundboard-canvas 2");
-
-    try live.harness.runtime.dispatchPlatformEvent(live.app_state.app(), .{ .appearance_changed = .{ .color_scheme = .dark } });
-    live.harness.runtime.options.automation = native_sdk.automation.Server.init(io, "/tmp/compact-shots/soundboard-compact-grid-dark-artifacts", "Soundboard");
-    try live.harness.runtime.dispatchAutomationCommand(live.app_state.app(), "screenshot soundboard-canvas 2");
-
-    // The full-surface album detail page, both schemes.
-    try live.dispatch(.{ .open_album = 2 });
-    try live.harness.runtime.dispatchPlatformEvent(live.app_state.app(), .{ .appearance_changed = .{ .color_scheme = .light } });
-    try presentShotFrame(live, 4);
-    live.harness.runtime.options.automation = native_sdk.automation.Server.init(io, "/tmp/compact-shots/soundboard-compact-detail-light-artifacts", "Soundboard");
-    try live.harness.runtime.dispatchAutomationCommand(live.app_state.app(), "screenshot soundboard-canvas 2");
-
-    try live.harness.runtime.dispatchPlatformEvent(live.app_state.app(), .{ .appearance_changed = .{ .color_scheme = .dark } });
-    live.harness.runtime.options.automation = native_sdk.automation.Server.init(io, "/tmp/compact-shots/soundboard-compact-detail-dark-artifacts", "Soundboard");
-    try live.harness.runtime.dispatchAutomationCommand(live.app_state.app(), "screenshot soundboard-canvas 2");
-}
diff --git a/examples/soundboard/src/theme.zig b/examples/soundboard/src/theme.zig
deleted file mode 100644
index 7248efb29..000000000
--- a/examples/soundboard/src/theme.zig
+++ /dev/null
@@ -1,81 +0,0 @@
-//! soundboard theme: the Geist pack with the accent moved to the pack's
-//! pink scale. The pack resolves the whole register (palette, control
-//! tables, type scale, metrics) per scheme and contrast; the app layers
-//! ONE brand decision on top through `DesignTokenOverrides` — it never
-//! forks the pack. High-contrast requests skip the override and take the
-//! pack's high-contrast register untouched (accessibility beats brand),
-//! and reduce-motion zeroes the motion tokens through the theme options.
-
-const native_sdk = @import("native_sdk");
-
-const canvas = native_sdk.canvas;
-const Color = canvas.Color;
-
-/// Pink 800, the pink scale's solid-fill step. The scale is stated per
-/// appearance, but the solid 700/800 steps cross at the same sRGB value
-/// in both — only the quiet low steps flip — so one constant serves
-/// light and dark alike: hsl(336, 74%, 51%) = #df2670.
-const pink_800 = Color.rgb8(223, 38, 112);
-
-/// The ink on the pink fill: the pack pairs every solid 700/800 fill
-/// with white knockout text, and white clears the 4.5:1 text bar on
-/// this pink (~4.5:1) — the honest readable ink in both schemes, since
-/// the fill itself is the same hex under both.
-const pink_ink = Color.rgb8(255, 255, 255);
-
-/// The app's one brand statement, layered over whichever scheme/contrast
-/// register the pack resolves. Three slots carry the accent identity:
-///
-/// - `colors.accent`/`accent_text`: the filled-primary pair — the
-///   selected track row's inverted fill, the header switcher's active
-///   segment, "Playing" badges, the loaded row's title ink, and every
-///   control fill that derives from the accent channel (checkbox,
-///   switch, progress).
-/// - `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). 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.
-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{
-        .pack = .geist,
-        .color_scheme = switch (scheme) {
-            .light => .light,
-            .dark => .dark,
-        },
-        .contrast = if (high_contrast) .high else .standard,
-        .reduce_motion = reduce_motion,
-    };
-    // High contrast takes the pack's own loud register with no brand
-    // 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, accentOverridesFor(options.color_scheme));
-}
-
-/// The resolved standard-contrast palettes, exported for the suite's
-/// theme assertions: the pack's scheme register with the accent
-/// override already applied — exactly what `tokens` hands the runtime.
-pub const light_colors = tokens(.light, false, false).colors;
-pub const dark_colors = tokens(.dark, false, false).colors;
diff --git a/examples/soundboard/src/view.zig b/examples/soundboard/src/view.zig
deleted file mode 100644
index aedb94961..000000000
--- a/examples/soundboard/src/view.zig
+++ /dev/null
@@ -1,731 +0,0 @@
-//! soundboard views: ONE catalog of content pieces, TWO shells.
-//!
-//! The content pieces — album tiles, track rows, the album detail
-//! heading, section headings, the empty state, the adaptive grid — are
-//! shared functions used by BOTH shells; the markup fragments
-//! (header.native / nowplaying.native / album_title.native) are the
-//! desktop bars plus the shared detail title. The DESKTOP shell composes
-//! them into the wide shape (header bar, adaptive multi-column grid,
-//! now-playing rail); the COMPACT shell recomposes the same pieces for
-//! phone-class surfaces (stacked touch header, single-column content,
-//! a mini player, safe-area padding). The root view switches on the
-//! model's form factor (host-reported size class when present, the
-//! width derivation as the fallback) — shell branching is Zig's job by
-//! design; the closed markup grammar has no conditionals.
-//!
-//! Zig-only sections remain what markup cannot express: rounded-square
-//! cover images (`ElementOptions.image` outside the avatar), the album
-//! grid's width-derived column count, per-track native context menus,
-//! and now the shell switch itself.
-
-const std = @import("std");
-const native_sdk = @import("native_sdk");
-const model_mod = @import("model.zig");
-
-const canvas = native_sdk.canvas;
-
-pub const Model = model_mod.Model;
-pub const Msg = model_mod.Msg;
-pub const FormFactor = model_mod.FormFactor;
-pub const Ui = canvas.Ui(Msg);
-
-pub const header_markup = @embedFile("header.native");
-pub const nowplaying_markup = @embedFile("nowplaying.native");
-pub const CompiledHeaderView = canvas.CompiledMarkupView(Model, Msg, header_markup);
-pub const CompiledNowPlayingView = canvas.CompiledMarkupView(Model, Msg, nowplaying_markup);
-
-// The album detail heading: a markup span paragraph (one bold 1.9x-scaled
-// run bound to the open album's title), compiled like the other fragments
-// and composed into BOTH shells' detail columns. The tests hold it
-// widget-for-widget equal to the builder paragraph it replaced.
-pub const AlbumTitleView = canvas.CompiledMarkupView(Model, Msg, @embedFile("album_title.native"));
-
-// The album grid is ADAPTIVE: the layout system's grid takes a fixed
-// column count (rows and columns never flow-wrap children), so the
-// column count is derived here, per rebuild, from the canvas width the
-// model tracks (`canvas_resized`, mirrored from presented frames). The
-// rule is the standard adaptive-grid register: as many min-width tiles
-// as fit the row, the leftover split evenly — tiles grow modestly until
-// one more column fits, then snap back toward the minimum. Each shell
-// states its own tile minimum and content padding; the rule is one
-// function.
-/// The narrowest a DESKTOP album tile may get. Sized so the cover (tile
-/// width minus the hover-wash inset on both sides) never drops below the
-/// generous cover the fixed four-column grid established.
-const min_tile_width: f32 = 232;
-/// Gap between bare tiles. Tighter than the old carded grid on purpose:
-/// with no card chrome the gap IS the whole separation between covers,
-/// and the bare music-library register reads best with covers closer
-/// together than boxed cards were.
-const grid_gap: f32 = 12;
-/// Inset between the tile's hover/press wash and the cover art: on a
-/// bare tile the wash must show AROUND the art to read at all (the art
-/// would paint over a same-sized wash), so each tile keeps a thin halo.
-const tile_padding: f32 = 8;
-/// Vertical gap between the cover and the title/artist block.
-const cover_text_gap: f32 = 8;
-/// The title + artist block's height (one body line over one small
-/// line), used to derive the tile's total height from its width.
-const tile_text_height: f32 = 36;
-const detail_cover_size: f32 = 184;
-const content_padding: f32 = 24;
-
-/// The detail page's album rail: fixed-width tiles on a horizontal
-/// scroll region exactly tall enough for one tile. 168 keeps seven
-/// sibling covers wider than the desktop shell's content row at every
-/// regular window width up to ~1300 points, so the rail actually
-/// scrolls where it ships (a rail that fits simply rests).
-const shelf_tile_width: f32 = 168;
-const shelf_height: f32 = tile_padding * 2 + (shelf_tile_width - tile_padding * 2) + cover_text_gap + tile_text_height;
-
-// ---------------------------------------------------- compact constants
-
-/// The compact shell's content padding: tighter than the desktop's 24 —
-/// phone points are scarce — while still clearing curved screen corners.
-const compact_padding: f32 = 16;
-/// The narrowest a COMPACT album tile may get: two columns on mainstream
-/// phone-portrait widths (390–430pt), one column below ~330pt, and a
-/// whole tile is a generous touch target either way.
-const compact_min_tile_width: f32 = 150;
-/// The compact album detail cover: full-surface page, one big square.
-const compact_detail_cover_size: f32 = 200;
-/// Compact track rows: taller than the desktop's 44 pointer rows so a
-/// thumb lands cleanly between neighbors.
-const compact_row_height: f32 = 56;
-/// The mini player's bar height: a 44pt cover thumb plus breathing room.
-const mini_bar_height: f32 = 64;
-
-/// The width→columns rule, answered for one canvas width.
-pub const GridFit = struct {
-    /// How many min-width tiles (plus gaps) fit the content row.
-    columns: usize,
-    /// The evenly-grown tile width at that column count.
-    tile_width: f32,
-};
-
-/// Columns = how many minimum-width tiles fit the padded content row;
-/// tile width = the row split evenly at that count. Never below one
-/// column, and the floor guard keeps the math total for degenerate
-/// widths (a zero-sized test surface).
-fn fitColumns(canvas_width: f32, min_tile: f32, padding: f32) GridFit {
-    const available = @max(min_tile, canvas_width - padding * 2);
-    const fitting = @floor((available + grid_gap) / (min_tile + grid_gap));
-    const columns: usize = @intFromFloat(@max(1, fitting));
-    const gaps = grid_gap * @as(f32, @floatFromInt(columns - 1));
-    const tile_width = (available - gaps) / @as(f32, @floatFromInt(columns));
-    return .{ .columns = columns, .tile_width = tile_width };
-}
-
-/// The desktop shell's grid fit (232pt tile floor, 24pt padding).
-pub fn gridFit(canvas_width: f32) GridFit {
-    return fitColumns(canvas_width, min_tile_width, content_padding);
-}
-
-/// The compact shell's grid fit (150pt tile floor, 16pt padding): two
-/// touch-sized columns on phone-portrait widths.
-pub fn compactGridFit(canvas_width: f32) GridFit {
-    return fitColumns(canvas_width, compact_min_tile_width, compact_padding);
-}
-
-// ------------------------------------------------------------------ root
-
-pub fn rootView(ui: *Ui, model: *const Model) Ui.Node {
-    // The shell switch, on the model's form factor: the host-reported
-    // size class when one arrived over the window-chrome channel, the
-    // width derivation as the fallback (`Model.formFactor` owns the
-    // rule). This switch and both shells take the model unchanged, so
-    // the views never reshaped when the host report landed.
-    return switch (model.formFactor()) {
-        .regular => desktopShell(ui, model),
-        .compact => compactShell(ui, model),
-    };
-}
-
-/// The desktop composition, exactly as the app has always shipped it:
-/// the markup header bar (titlebar drag surface, chrome-inset padding),
-/// the content switch, and the markup now-playing rail.
-fn desktopShell(ui: *Ui, model: *const Model) Ui.Node {
-    return ui.column(.{ .grow = 1, .style_tokens = .{ .background = .background } }, .{
-        CompiledHeaderView.build(ui, model),
-        contentView(ui, model),
-        CompiledNowPlayingView.build(ui, model),
-    });
-}
-
-fn contentView(ui: *Ui, model: *const Model) Ui.Node {
-    return switch (model.tab) {
-        .albums => if (model.open_album) |album_id|
-            albumDetailView(ui, model, album_id)
-        else
-            albumGridView(ui, model),
-        .songs => songsView(ui, model),
-    };
-}
-
-// ------------------------------------------------------------- album grid
-
-fn albumGridView(ui: *Ui, model: *const Model) Ui.Node {
-    const cells = model.visibleAlbums(ui.arena);
-    // Controlled scroll: the model stores the applied offset
-    // (`grid_scrolled`) and echoes it back, so a rebuild mid-gesture
-    // (a progress tick, a search keystroke) can never reset the region.
-    return ui.scroll(.{
-        .grow = 1,
-        .value = model.grid_scroll,
-        .on_scroll = Ui.scrollMsg(.grid_scrolled),
-        .semantics = .{ .label = "Album grid" },
-    }, ui.column(.{ .padding = content_padding, .gap = 18 }, .{
-        sectionHeading(ui, "Albums", ui.fmt("{d} of {d}", .{ cells.len, model_mod.albums.len })),
-        if (cells.len == 0) emptyState(ui, model) else albumGrid(ui, gridFit(model.canvas_width), .regular, cells),
-    }));
-}
-
-/// The shared adaptive grid body: one bare tile per visible album, sized
-/// by the caller's fit. Used by both shells (each hands its own fit and
-/// form factor).
-fn albumGrid(ui: *Ui, fit: GridFit, form: FormFactor, cells: []const model_mod.AlbumCell) Ui.Node {
-    // The grid node is EXPLICITLY sized to its shown columns rather than
-    // stretched to the row, because the engine divides the grid's width
-    // evenly among its columns: an exact width makes each cell exactly
-    // one tile wide, and a short result set (a narrow search) keeps
-    // tile-sized covers left-aligned instead of ballooning across the
-    // row. The tail row left-aligns the same way — cells fill in row
-    // order from the leading edge.
-    const columns = @min(fit.columns, cells.len);
-    const row_width = @as(f32, @floatFromInt(columns)) * (fit.tile_width + grid_gap) - grid_gap;
-    return ui.el(.grid, .{
-        .width = row_width,
-        .columns = columns,
-        .gap = grid_gap,
-        .semantics = .{ .role = .list, .label = "Albums" },
-    }, ui.eachCtx(TileContext{ .fit = fit, .form = form }, cells, albumKey, albumTile));
-}
-
-fn albumKey(cell: *const model_mod.AlbumCell) canvas.UiKey {
-    return canvas.uiKey(cell.id);
-}
-
-/// The per-tile context `eachCtx` threads through: the grid's fit (tile
-/// width) plus the shell's form factor (gesture vocabulary).
-const TileContext = struct {
-    fit: GridFit,
-    form: FormFactor,
-};
-
-/// One bare album tile: the cover IS the tile — no card fill, border, or
-/// shadow around it (the flat `list_item` composite, the same chromeless
-/// register the track rows use). Hover is QUIET: the pointer rests on
-/// cover art, not a control register, so hovering changes nothing
-/// visually (the pointer cursor is the whole hover affordance) — the
-/// quiet-surface style knob below states exactly that. A press still
-/// paints the standard pressed wash (the visible moment of commitment),
-/// keyboard focus still draws the standard ring, and the whole tile —
-/// art and text — stays one hit target with the album-by-artist
-/// accessible label. Shared by both shells; only the context menu is
-/// desktop vocabulary (right/ctrl-click has no honest touch equivalent
-/// on the phone hosts, so the compact tile mounts none).
-fn albumTile(ui: *Ui, context: TileContext, cell: *const model_mod.AlbumCell) Ui.Node {
-    const cover = context.fit.tile_width - tile_padding * 2;
-    const desktop_menu = [_]Ui.ContextMenuItem{
-        .{ .label = "Play Album", .msg = Msg{ .play_album = cell.id } },
-        .{ .label = "Open Album", .msg = Msg{ .open_album = cell.id } },
-    };
-    return ui.el(.list_item, .{
-        // Height derives from width: the square cover plus the text
-        // block and paddings, so tiles stay uniform as they grow
-        // between column-count breakpoints.
-        .height = tile_padding * 2 + cover + cover_text_gap + tile_text_height,
-        .padding = tile_padding,
-        // The quiet-surface knob: no hover wash on an image-forward
-        // tile. Press feedback, cursor intent, the focus ring, and hit
-        // testing all keep their own channels.
-        .style = .{ .quiet_hover = true },
-        .on_press = Msg{ .open_album = cell.id },
-        .context_menu = if (context.form == .regular) &desktop_menu else &.{},
-        .semantics = .{ .role = .listitem, .label = ui.fmt("{s} by {s}", .{ cell.title, cell.artist }) },
-    }, .{
-        // list_item flows children horizontally; the single grown column
-        // carries the vertical cover-over-text stack.
-        ui.column(.{ .gap = cover_text_gap, .grow = 1 }, .{
-            ui.avatar(.{
-                .image = cell.cover,
-                .width = cover,
-                .height = cover,
-                .style = .{ .radius = 8 },
-                .semantics = .{ .label = ui.fmt("{s} cover", .{cell.title}) },
-            }, cell.initials),
-            ui.row(.{ .gap = 8, .cross = .center }, .{
-                ui.column(.{ .gap = 1, .grow = 1 }, .{
-                    // One-line title/artist by design: elide behind a
-                    // trailing ellipsis at the tile width, never wrap
-                    // over the line below.
-                    ui.text(.{ .wrap = false }, cell.title),
-                    ui.text(.{ .size = .sm, .wrap = false, .style_tokens = .{ .foreground = .text_muted } }, cell.artist),
-                }),
-                if (cell.playing)
-                    ui.el(.badge, .{ .variant = .primary, .text = "Playing" }, .{})
-                else
-                    ui.el(.stack, .{}, .{}),
-            }),
-        }),
-    });
-}
-
-fn emptyState(ui: *Ui, model: *const Model) Ui.Node {
-    return ui.panel(.{
-        .padding = 24,
-        .style_tokens = .{ .background = .surface, .radius = .lg, .border_color = .border },
-        .semantics = .{ .label = "No albums match" },
-    }, ui.column(.{ .gap = 6 }, .{
-        ui.text(.{}, ui.fmt("No matches for \"{s}\"", .{model.search()})),
-        ui.text(.{ .size = .sm, .style_tokens = .{ .foreground = .text_muted } }, "Try an album, artist, or song title."),
-    }));
-}
-
-// ----------------------------------------------------------- album detail
-
-fn albumDetailView(ui: *Ui, model: *const Model, album_id: u8) Ui.Node {
-    const album = model_mod.albumById(album_id);
-    const rows = model.albumTrackRows(ui.arena, album_id);
-    return ui.scroll(.{
-        .grow = 1,
-        .value = model.detail_scroll,
-        .on_scroll = Ui.scrollMsg(.detail_scrolled),
-        .semantics = .{ .label = "Album detail" },
-    }, ui.column(.{ .padding = content_padding, .gap = 18 }, .{
-        ui.row(.{}, .{
-            backButton(ui, .regular),
-            ui.spacer(1),
-        }),
-        ui.row(.{ .gap = 20 }, .{
-            detailCover(ui, model, album, detail_cover_size),
-            detailHeading(ui, model, album, rows.len, .regular),
-        }),
-        trackList(ui, rows, "Album tracks", .regular),
-        collectionShelf(ui, model, album_id),
-    }));
-}
-
-/// The "From the collection" shelf under the track list: every OTHER
-/// album as a sideways rail of the same bare cover tiles the grid uses —
-/// the music-app carousel, so the next record is one press away without
-/// leaving this one. The rail is a HORIZONTAL scroll region: the wheel's
-/// `delta_x` (and Left/Right on the focused rail) scrolls it while
-/// `delta_y` keeps scrolling the page — each axis routes to the nearest
-/// region that scrolls it, so one diagonal trackpad gesture reads as
-/// completely unsurprising. Controlled like every scroll in this app:
-/// the applied `offset_x` echoes into `value_x`, and opening an album
-/// resets the shelf to its leading edge.
-fn collectionShelf(ui: *Ui, model: *const Model, album_id: u8) Ui.Node {
-    const cells = model.otherAlbums(ui.arena, album_id);
-    if (cells.len == 0) return ui.el(.stack, .{}, .{});
-    const fit = GridFit{ .columns = 1, .tile_width = shelf_tile_width };
-    const rail_width = @as(f32, @floatFromInt(cells.len)) * (shelf_tile_width + grid_gap) - grid_gap;
-    return ui.column(.{ .gap = 12 }, .{
-        sectionHeading(ui, "From the collection", ui.fmt("{d} more", .{cells.len})),
-        ui.scroll(.{
-            .axis = .horizontal,
-            .height = shelf_height,
-            .value_x = model.shelf_scroll_x,
-            .on_scroll = Ui.scrollMsg(.shelf_scrolled),
-            .semantics = .{ .label = "More albums" },
-        }, ui.row(.{ .width = rail_width, .gap = grid_gap }, ui.eachCtx(TileContext{ .fit = fit, .form = .regular }, cells, albumKey, shelfTile))),
-    });
-}
-
-/// One shelf tile: the grid's bare album tile at the rail's fixed width
-/// (the tile draws its own height from it).
-fn shelfTile(ui: *Ui, context: TileContext, cell: *const model_mod.AlbumCell) Ui.Node {
-    var tile = albumTile(ui, context, cell);
-    tile.widget.layout.min_size.width = shelf_tile_width;
-    tile.widget.layout.max_size.width = shelf_tile_width;
-    return tile;
-}
-
-/// The album detail cover, shared by both shells: the rounded square at
-/// whatever size the shell's composition affords.
-fn detailCover(ui: *Ui, model: *const Model, album: *const model_mod.Album, size: f32) Ui.Node {
-    return ui.avatar(.{
-        .image = model.coverFor(album.id),
-        .width = size,
-        .height = size,
-        .style = .{ .radius = 10 },
-        .semantics = .{ .label = ui.fmt("{s} cover", .{album.title}) },
-    }, album.initials);
-}
-
-/// The album detail heading block, shared by both shells: the "Album"
-/// eyebrow, the markup title fragment, the artist/year/track-count line,
-/// and the play control. The desktop shell grows it beside the cover and
-/// bottom-aligns (main .end); the compact shell stacks it full-width
-/// under the cover at touch control size.
-fn detailHeading(ui: *Ui, model: *const Model, album: *const model_mod.Album, track_count: usize, form: FormFactor) Ui.Node {
-    return ui.column(.{
-        .gap = 8,
-        .grow = if (form == .regular) 1 else 0,
-        .main = if (form == .regular) .end else .start,
-    }, .{
-        ui.text(.{ .size = .sm, .style_tokens = .{ .foreground = .text_muted } }, "Album"),
-        AlbumTitleView.build(ui, model),
-        ui.text(.{ .style_tokens = .{ .foreground = .text_muted } }, ui.fmt("{s} · {d} · {d} tracks", .{ album.artist, album.year, track_count })),
-        ui.row(.{ .gap = 8, .cross = .center }, .{
-            playAlbumButton(ui, album.id, form),
-            ui.spacer(1),
-        }),
-    });
-}
-
-/// Icon+text buttons via `ElementOptions.icon`: the icon is part of the
-/// button's own rendering, so each control is ONE widget — one hit
-/// target, no duplicated on_press, and the icon follows the button's
-/// enabled/disabled tint for free. (These replaced the old overlay-stack
-/// idiom the moment icon-in-button landed.) Both shells share the
-/// control; the form factor picks the size register — the compact shell
-/// takes lg so the target clears the touch floor.
-fn backButton(ui: *Ui, form: FormFactor) Ui.Node {
-    return ui.button(.{
-        .variant = .ghost,
-        .size = if (form == .regular) .sm else .lg,
-        .icon = "chevron-left",
-        .on_press = .close_album,
-        .semantics = .{ .label = "Back to albums" },
-    }, "Back to albums");
-}
-
-fn playAlbumButton(ui: *Ui, album_id: u8, form: FormFactor) Ui.Node {
-    return ui.button(.{
-        .variant = .primary,
-        .size = if (form == .regular) .default else .lg,
-        .icon = "play",
-        .on_press = Msg{ .play_album = album_id },
-        .semantics = .{ .label = "Play album" },
-    }, "Play album");
-}
-
-// ------------------------------------------------------------------ songs
-
-fn songsView(ui: *Ui, model: *const Model) Ui.Node {
-    const rows = model.visibleTracks(ui.arena);
-    return ui.scroll(.{
-        .grow = 1,
-        .value = model.songs_scroll,
-        .on_scroll = Ui.scrollMsg(.songs_scrolled),
-        .semantics = .{ .label = "All songs" },
-    }, ui.column(.{ .padding = content_padding, .gap = 18 }, .{
-        sectionHeading(ui, "Songs", ui.fmt("{d} of {d}", .{ rows.len, model_mod.tracks.len })),
-        if (rows.len == 0) emptyState(ui, model) else trackList(ui, rows, "Songs", .regular),
-    }));
-}
-
-// ------------------------------------------------------------- track rows
-
-/// The shared track list: flat house rows with no inter-row gaps — the
-/// rows' washes are the only separation. The form factor picks the
-/// gesture vocabulary and row height (see `trackRowView`).
-fn trackList(ui: *Ui, rows: []const model_mod.TrackRow, label: []const u8, form: FormFactor) Ui.Node {
-    return ui.el(.list, .{
-        .semantics = .{ .role = .list, .label = label },
-    }, ui.eachCtx(form, rows, trackKey, trackRowView));
-}
-
-fn trackKey(row: *const model_mod.TrackRow) canvas.UiKey {
-    return canvas.uiKey(row.id);
-}
-
-/// One pressable track row: a FLAT list row (the list_item composite —
-/// no border, no card chrome; hover is a full-width wash), with custom
-/// children flowing horizontally inside it. The content is shared; the
-/// GESTURES follow the shell:
-///
-/// - `.regular` is the desktop list convention: a single click (or
-///   Space on a ring-focused row) SELECTS, the double click (or Enter,
-///   via `on_submit`) PLAYS, and right/ctrl-click presents the native
-///   context menu whose items dispatch typed Msgs exactly like a press.
-/// - `.compact` is the touch convention: one tap PLAYS (double taps and
-///   hover affordances are pointer vocabulary, and the phone hosts model
-///   no long-press, so the row mounts no context menu). Enter still
-///   plays via `on_submit` for attached keyboards.
-///
-/// The selection wears the inverted register in both shells — accent
-/// fill under the accent's knockout ink (`accent_text`, the same token
-/// the filled Play Album button pairs with the accent, white under this
-/// theme in both schemes), stated per-widget through style tokens so
-/// the unselected rows keep their neutral hover/press washes.
-fn trackRowView(ui: *Ui, form: FormFactor, row: *const model_mod.TrackRow) Ui.Node {
-    const touch = form == .compact;
-    // Two items per row on purpose: the per-view context-menu budget is
-    // 512 items (canvas_limits), and the all-songs list mounts every
-    // catalog track as a row — two items per row keeps a comfortable
-    // margin even as the manifest grows.
-    const desktop_menu = [_]Ui.ContextMenuItem{
-        .{ .label = "Play Next", .msg = Msg{ .queue_track = row.id } },
-        .{ .label = "Copy Title", .msg = Msg{ .copy_title = row.id } },
-    };
-    return ui.el(.list_item, .{
-        .global_key = canvas.uiKey(@as(u32, row.id)),
-        .height = if (touch) compact_row_height else 44,
-        .padding = 10,
-        .gap = 12,
-        .cross = .center,
-        .selected = row.selected,
-        .style_tokens = if (row.selected) .{ .background = .accent } else .{},
-        .on_press = if (touch) Msg{ .play_track = row.id } else Msg{ .select_track = row.id },
-        .on_double_press = if (touch) null else Msg{ .play_track = row.id },
-        .on_submit = Msg{ .play_track = row.id },
-        .context_menu = if (touch) &.{} else &desktop_menu,
-        .semantics = .{ .role = .listitem, .label = row.title },
-    }, .{
-        trackIndicator(ui, row),
-        if (row.subtitle.len == 0)
-            ui.text(.{ .grow = 1, .style_tokens = rowTitleTokens(row) }, row.title)
-        else
-            ui.column(.{ .gap = 1, .grow = 1 }, .{
-                ui.text(.{ .style_tokens = rowTitleTokens(row) }, row.title),
-                ui.text(.{ .size = .sm, .style_tokens = rowMutedTokens(row) }, row.subtitle),
-            }),
-        if (row.queued)
-            ui.el(.badge, .{ .variant = .secondary, .text = "Up next" }, .{})
-        else
-            ui.el(.stack, .{}, .{}),
-        durationText(ui, row),
-    });
-}
-
-/// Row title ink: the accent's knockout ink (`accent_text`) on the
-/// selected (accent) row — the inverted register. The window-background
-/// token this used to take is only light-scheme white; in dark mode it
-/// resolves near-black and vanished into the accent fill, while
-/// `accent_text` is the ink the theme pairs with the accent in BOTH
-/// schemes (the filled Play Album button's white). Accent on the loaded
-/// track's row, default otherwise.
-fn rowTitleTokens(row: *const model_mod.TrackRow) canvas.StyleTokenRefs {
-    if (row.selected) return .{ .foreground = .accent_text };
-    if (row.now) return .{ .foreground = .accent };
-    return .{};
-}
-
-/// Row secondary ink (subtitle, duration, track number): muted at rest,
-/// the accent's knockout ink on the selected row — muted gray on the
-/// accent fill would fail the contrast the inverted register exists to
-/// keep, and only `accent_text` keeps that promise in both schemes.
-fn rowMutedTokens(row: *const model_mod.TrackRow) canvas.StyleTokenRefs {
-    if (row.selected) return .{ .foreground = .accent_text };
-    return .{ .foreground = .text_muted };
-}
-
-/// The leading track-row slot: a STATE icon on the loaded track's row —
-/// the pause glyph while audio is playing, the play glyph while it is
-/// paused (the icon names the state, matching the transport button's
-/// convention) — and the track number everywhere else. Icons are
-/// decoration (never hit-tested), so the row's press handling is
-/// untouched; the fixed 24px slot keeps the number column's alignment.
-/// On the selected row the icon takes the inverted ink like the text —
-/// an accent glyph would vanish into the accent fill.
-fn trackIndicator(ui: *Ui, row: *const model_mod.TrackRow) Ui.Node {
-    if (!row.now) {
-        return ui.text(.{ .width = 24, .size = .sm, .style_tokens = rowMutedTokens(row) }, row.number);
-    }
-    const icon_tokens: canvas.StyleTokenRefs = if (row.selected)
-        .{ .foreground = .accent_text }
-    else if (row.playing)
-        .{ .foreground = .accent }
-    else
-        .{ .foreground = .text_muted };
-    return ui.row(.{ .width = 24, .cross = .center }, .{
-        if (row.playing)
-            ui.icon(.{ .width = 14, .height = 14, .style_tokens = icon_tokens }, "pause")
-        else
-            ui.icon(.{ .width = 14, .height = 14, .style_tokens = icon_tokens }, "play"),
-    });
-}
-
-/// Right-aligned fixed-width duration. The fixed width is a column: it
-/// keeps every row's duration right edge aligned regardless of digit
-/// count ("8:05" vs "12:41"), sized for the widest plausible value.
-fn durationText(ui: *Ui, row: *const model_mod.TrackRow) Ui.Node {
-    var node = ui.text(.{ .width = 44, .size = .sm, .style_tokens = rowMutedTokens(row) }, row.duration);
-    node.widget.text_alignment = .end;
-    return node;
-}
-
-// ---------------------------------------------------------------- shared
-
-fn sectionHeading(ui: *Ui, title: []const u8, count: []const u8) Ui.Node {
-    // Intrinsic width: layout measures with the bundled face's real
-    // advances and the packet host draws the engine's lines verbatim,
-    // so the old slack-width workaround (needed when the estimator
-    // diverged from real glyph metrics) is gone.
-    return ui.row(.{ .gap = 10, .cross = .center }, .{
-        ui.paragraph(.{ .semantics = .{ .label = title } }, &.{
-            .{ .text = title, .weight = .bold, .scale = 1.45 },
-        }),
-        ui.el(.badge, .{ .variant = .secondary, .text = count }, .{}),
-        ui.spacer(1),
-    });
-}
-
-// --------------------------------------------------------- compact shell
-
-/// The phone composition: the same content pieces in a single column,
-/// padded by the safe areas the window-chrome channel reports (status
-/// bar / Dynamic Island above, home indicator below, notch side bands in
-/// landscape). No window-drag regions, no titlebar assumptions, no
-/// hover-dependent affordances — every control clears the 44pt touch
-/// floor, and the mini player keeps playback visible on every page.
-fn compactShell(ui: *Ui, model: *const Model) Ui.Node {
-    return ui.column(.{ .grow = 1, .style_tokens = .{ .background = .background } }, .{
-        // Top safe area: the status bar / Dynamic Island band. Raw from
-        // `on_chrome` — the compact shell has no header floor to apply.
-        ui.el(.stack, .{ .height = model.chrome_top }, .{}),
-        ui.row(.{ .grow = 1 }, .{
-            // Side safe areas: zero in portrait; the notch band in
-            // landscape arrives on whichever edge it occupies.
-            ui.el(.stack, .{ .width = model.chrome_leading }, .{}),
-            ui.column(.{ .grow = 1 }, .{
-                compactHeader(ui, model),
-                compactContent(ui, model),
-                if (model.miniBarVisible()) miniBar(ui, model) else ui.el(.stack, .{}, .{}),
-            }),
-            ui.el(.stack, .{ .width = model.chrome_trailing }, .{}),
-        }),
-        // Bottom safe area: the home indicator band, under the mini bar.
-        ui.el(.stack, .{ .height = model.chrome_bottom }, .{}),
-    });
-}
-
-/// The compact header: the same Albums/Songs switcher the desktop header
-/// carries plus the same search binding, restated at touch size in a
-/// stacked column — the markup header is a desktop surface (window-drag
-/// band, traffic-light spacers, a fixed trailing search column), so the
-/// compact shell composes its own. Search takes a full-width row of its
-/// own: reachable on every page without a persistent wide bar.
-///
-/// While the host projects the declared tab set as a REAL native tab
-/// bar (`model.native_tabs`, from the window-chrome channel), the
-/// in-canvas switcher yields — the system bar is the one tab affordance
-/// on screen — and only the search row remains. Everywhere the
-/// declaration is inert (no projecting host), the switcher stays.
-fn compactHeader(ui: *Ui, model: *const Model) Ui.Node {
-    return ui.column(.{ .semantics = .{ .label = "Compact header" } }, .{
-        ui.column(.{ .padding = compact_padding, .gap = 10 }, .{
-            if (model.native_tabs)
-                ui.el(.stack, .{}, .{})
-            else
-                ui.row(.{ .cross = .center }, .{
-                    ui.el(.button_group, .{}, .{
-                        ui.button(.{ .size = .lg, .selected = model.albumsShowing(), .on_press = .show_albums }, "Albums"),
-                        ui.button(.{ .size = .lg, .selected = model.songsShowing(), .on_press = .show_songs }, "Songs"),
-                    }),
-                    ui.spacer(1),
-                }),
-            // The search field carries the built-in trailing clear
-            // affordance whenever it holds text, same as the desktop
-            // header's field — one binding, two shells.
-            ui.el(.search_field, .{
-                .size = .lg,
-                .text = model.search(),
-                .placeholder = "Search albums, artists, songs…",
-                .on_input = Ui.inputMsg(.search_edit),
-                .semantics = .{ .label = "Search library" },
-            }, .{}),
-        }),
-        ui.separator(.{}),
-    });
-}
-
-/// The same page switch the desktop shell drives — one model, one
-/// navigation state, two compositions.
-fn compactContent(ui: *Ui, model: *const Model) Ui.Node {
-    return switch (model.tab) {
-        .albums => if (model.open_album) |album_id|
-            compactAlbumDetail(ui, model, album_id)
-        else
-            compactAlbumGrid(ui, model),
-        .songs => compactSongs(ui, model),
-    };
-}
-
-fn compactAlbumGrid(ui: *Ui, model: *const Model) Ui.Node {
-    const cells = model.visibleAlbums(ui.arena);
-    return ui.scroll(.{
-        .grow = 1,
-        .value = model.grid_scroll,
-        .on_scroll = Ui.scrollMsg(.grid_scrolled),
-        .semantics = .{ .label = "Album grid" },
-    }, ui.column(.{ .padding = compact_padding, .gap = 16 }, .{
-        sectionHeading(ui, "Albums", ui.fmt("{d} of {d}", .{ cells.len, model_mod.albums.len })),
-        if (cells.len == 0) emptyState(ui, model) else albumGrid(ui, compactGridFit(model.canvas_width), .compact, cells),
-    }));
-}
-
-/// The compact album detail: a full-surface page — back navigation on
-/// top (model-driven, the same `close_album` state the desktop back
-/// button drives), the cover stacked over the shared heading block, then
-/// the record's rows at touch size.
-fn compactAlbumDetail(ui: *Ui, model: *const Model, album_id: u8) Ui.Node {
-    const album = model_mod.albumById(album_id);
-    const rows = model.albumTrackRows(ui.arena, album_id);
-    return ui.scroll(.{
-        .grow = 1,
-        .value = model.detail_scroll,
-        .on_scroll = Ui.scrollMsg(.detail_scrolled),
-        .semantics = .{ .label = "Album detail" },
-    }, ui.column(.{ .padding = compact_padding, .gap = 16 }, .{
-        ui.row(.{}, .{
-            backButton(ui, .compact),
-            ui.spacer(1),
-        }),
-        ui.column(.{ .cross = .center }, .{
-            detailCover(ui, model, album, compact_detail_cover_size),
-        }),
-        detailHeading(ui, model, album, rows.len, .compact),
-        trackList(ui, rows, "Album tracks", .compact),
-    }));
-}
-
-fn compactSongs(ui: *Ui, model: *const Model) Ui.Node {
-    const rows = model.visibleTracks(ui.arena);
-    return ui.scroll(.{
-        .grow = 1,
-        .value = model.songs_scroll,
-        .on_scroll = Ui.scrollMsg(.songs_scrolled),
-        .semantics = .{ .label = "All songs" },
-    }, ui.column(.{ .padding = compact_padding, .gap = 16 }, .{
-        sectionHeading(ui, "Songs", ui.fmt("{d} of {d}", .{ rows.len, model_mod.tracks.len })),
-        if (rows.len == 0) emptyState(ui, model) else trackList(ui, rows, "Songs", .compact),
-    }));
-}
-
-/// The mini player: cover thumb, title/artist, and one lg play/pause
-/// control — always on screen while a track is loaded (playing OR
-/// paused) or a degraded playback notice needs a surface, sitting above
-/// the home-indicator band. The title/cover keep the desktop bar's
-/// semantic labels ("Now playing title" / "Now playing cover") so the
-/// track-change slide-in animation targets them in either shell, and the
-/// title/artist bindings double as the status surface exactly like the
-/// desktop bar (assets notice, stream notice, buffering).
-fn miniBar(ui: *Ui, model: *const Model) Ui.Node {
-    return ui.column(.{ .semantics = .{ .label = "Now playing mini bar" } }, .{
-        ui.separator(.{}),
-        ui.row(.{ .height = mini_bar_height, .padding = 10, .gap = 12, .cross = .center, .style_tokens = .{ .background = .surface } }, .{
-            ui.avatar(.{
-                .image = model.nowPlayingCover(),
-                .width = 44,
-                .height = 44,
-                .style = .{ .radius = 6 },
-                .semantics = .{ .label = "Now playing cover" },
-            }, model.nowPlayingInitials()),
-            ui.column(.{ .gap = 1, .grow = 1 }, .{
-                ui.text(.{ .wrap = false, .semantics = .{ .label = "Now playing title" } }, model.nowPlayingTitle()),
-                ui.text(.{ .size = .sm, .wrap = false, .style_tokens = .{ .foreground = .text_muted } }, model.nowPlayingArtist()),
-            }),
-            ui.button(.{
-                .variant = .ghost,
-                .size = .lg,
-                .icon = model.playPauseIcon(),
-                .on_press = .toggle_play,
-                .semantics = .{ .label = "Play or pause" },
-            }, ""),
-        }),
-    });
-}
diff --git a/examples/system-monitor-ts/tsconfig.json b/examples/soundboard/tsconfig.json
similarity index 100%
rename from examples/system-monitor-ts/tsconfig.json
rename to examples/soundboard/tsconfig.json
diff --git a/examples/system-monitor-ts/README.md b/examples/system-monitor-ts/README.md
deleted file mode 100644
index 6cf038e6c..000000000
--- a/examples/system-monitor-ts/README.md
+++ /dev/null
@@ -1,45 +0,0 @@
-# Native SDK system monitor example (TypeScript)
-
-The live CPU / memory / process monitor authored entirely in **TypeScript + Native markup** — the spawn-showcase port of `examples/system-monitor`. Zero Zig: the logic tier is the app-core subset under `src/`, compiled to native code at build time; `src/app.native` is the whole view tier and `app.zon` the manifest. The build detects `src/core.ts` in the tree and stages the wiring itself; no JS runtime ships in the binary.
-
-The core is a multi-module reference split of the app-core subset's import-graph support:
-
-- `src/core.ts` — the entry module: Model, Msg, update, subscriptions, the chromeMsg channel, and every exported binding helper (the app's public face — markup and node both see exactly its exports).
-- `src/parsers.ts` — the pure byte parsers over the sampler tools' output (`ps`, `vm_stat`, `/proc/meminfo`, the probes), the integer number tier (`intDiv`), and the byte/format helpers.
-- `src/table.ts` — the process table's search/sort/row-formatting machinery; type-imports `Model` from the entry (the legal back-edge shape).
-- `@native-sdk/core/text` — the SDK's byte-splice text engine, compiled in for the filter field's caret/selection/IME fidelity.
-
-Everything the Zig monitor's core does is here: the 2 s sampling cadence as a declarative `Sub.timer` that exists exactly while sampling is live, collect-mode `Cmd.spawn` for the OS's own commands (`ps axo pid=,pcpu=,pmem=,rss=,etime=,comm=` shared across platforms, `vm_stat` or `/proc/meminfo` for memory, a boot host-info probe), pure byte parsers over the collected stdout (fixture-proven against the Zig example's committed real captures), skipped-tick accounting (a tick that lands mid-spawn is counted, never overlapped), the exact top-128-by-CPU row selection with the full count and CPU sum still covering every process, uptime from pid 1's elapsed time, 60-sample NaN-padded sparkline windows drawn by markup `<chart>` elements, the search/sort/filter table on the real table register with controlled scroll, the confirmed SIGTERM context-menu action (`/bin/kill -TERM <pid>` — no SIGKILL anywhere), Copy Name onto the clipboard, the journaled `Cmd.now` sample timestamp, the honest no-sampler empty state, and the tall hidden-inset titlebar header driven by the `chromeMsg` channel.
-
-```sh
-native dev                                    # run the real app
-native dev --core --script dev-script.ndjson  # the core-logic loop under node - no renderer
-native check                                  # subset-check the core's import graph + markup + app.zon
-native test -Dplatform=null                   # the hermetic suite
-```
-
-The end-to-end proof battery lives in the SDK repo (`tests/ts-core/system_monitor_e2e_tests.zig`, run by `zig build test-ts-core-e2e`): it drives this example's real core and shipping markup headlessly through the boot probe, scripted sampler outputs (the Zig example's committed `ps`/`vm_stat`/`sysctl` captures and its constructed edge fixture), the timer cadence with pause/resume, search, sorting, the kill round trip, the no-sampler state, and record→replay.
-
-## The wiring channels this port uses
-
-- **`chromeMsg`** — the tall hidden-inset titlebar geometry lands in the model: the header row leads with a spacer sized to the traffic lights and matches its height to the band, exactly like the Zig original's `on_chrome`.
-- **`Sub.timer`** — the sampling cadence is declarative: `subscriptions(model)` returns the 2 s timer while the probe has answered and sampling is live; pause reconciles it away, resume re-arms it (and samples eagerly on the same dispatch).
-- **`Cmd.spawn` (collect mode)** — every sampler run delivers its whole stdout on the exit arm; a truncated block routes the err arm and never parses as whole.
-- **`Cmd.now`** — the applied sample's wall-clock stamp is a journaled clock read, so recorded sessions replay the same "sampled at" time.
-- **`windows(model)`** — the standard Settings command and primary+comma shortcut set model state, which declares `src/windows/settings.native`; its `.quit` close routes `monitor.settings.closed` through `commandMsg` and clears the declaration.
-
-## Where this port still deliberately differs from the Zig system-monitor
-
-Every remaining divergence is a decided posture, listed here on purpose:
-
-- **The OS is probed at runtime, not switched at comptime.** A TS core has no comptime OS, so boot spawns `sysctl -n hw.ncpu hw.memsize`; a clean answer means macOS conventions (vm_stat), falling through to `nproc` means Linux (/proc/meminfo), and both failing is the honest "no sampler for this OS" state — the same empty state, discovered instead of compiled in. The probe also carries the host facts the Zig original fetched in its boot spawn.
-- **Theme comes from app.zon, not a tokens_fn.** The Zig original derives a custom teal/slate "ops room" token set; a TS app owns no tokens_fn, so this port keeps the house register (composed with the live system appearance — light/dark still follows the OS with no core code). Full brand-token fidelity is the register-token tier, out of the three-file shape by design.
-- **CPU numbers live in tenths of a percent, as integers.** The number tier splits integer and float domains, so `%cpu` parses to integer tenths (lossless for ps output, which prints one decimal) and the tile derives its display and sparkline fraction from them. A hypothetical tool printing more decimals would round at the second decimal where the Zig f32 parse would keep it; sort order can tie where sub-tenth values would have ordered.
-- **Display rounding is round-half-up.** `formatBytes` and the percent labels round with integer math; Zig's `{d:.1}`/`{d:.0}` can differ in the last digit on exact halfway ties, which the real samplers do not produce.
-- **A truncated ps block drops the sample whole.** The Zig original parses the first 512 KiB and counts one failure; collect-mode spawn routes `truncated` through the err arm with no payload, so this port notes the failure and keeps the previous sample — a cut block never parses as whole.
-- **The sample timestamp lands one dispatch later.** `fx.wallMs` is a same-dispatch journaled read; the TS analogue is a `Cmd.now` round trip after the sample commits. Same journal, same replay determinism, one extra Msg.
-- **Copy Name is fire-and-forget.** `Cmd.clipboardWrite` has no result routing, so the status note reports the request; the Zig original notes the confirmed outcome.
-- **Row presses are absorbed by a no-op arm.** Markup context menus need a pressable host, so each table row binds `on-press="row_pressed"`; the Zig builder's `data_row` is its own hit target and needs none.
-- **The kill confirmation's scrim is the `scrim` token.** The Zig original's cancel catcher is a fully transparent panel under the dialog chrome's scrim; markup panels take token backgrounds, so the catcher wears the scrim wash itself (the `notes` example's shipped overlay idiom).
-- **Fragment hot reload covers the whole view.** The Zig original registers four compiled fragments; here `src/app.native` is the entire view tier and `native dev` hot-reloads it as one document.
-- **Desktop only.** TypeScript cores build desktop apps today; there was no phone shell to port.
diff --git a/examples/system-monitor-ts/app.zon b/examples/system-monitor-ts/app.zon
deleted file mode 100644
index ccde70447..000000000
--- a/examples/system-monitor-ts/app.zon
+++ /dev/null
@@ -1,47 +0,0 @@
-.{
-    .id = "dev.native_sdk.system_monitor_ts",
-    .name = "system-monitor-ts",
-    .display_name = "System Monitor TS",
-    .description = "Live CPU, memory, and process sampling authored entirely in TypeScript + Native markup.",
-    .version = "0.1.0",
-    .platforms = .{"macos"},
-    // The clipboard permission covers the Copy Name context action
-    // (Cmd.clipboardWrite); command covers the sampler spawns (`ps`,
-    // `vm_stat`/`meminfo`, the boot probe, and the confirmed SIGTERM).
-    .permissions = .{ "view", "command", "clipboard" },
-    .capabilities = .{ "native_views", "gpu_surfaces" },
-    .shortcuts = .{
-        .{ .id = "monitor.settings", .key = ",", .modifiers = .{"primary"} },
-    },
-    .shell = .{
-        .windows = .{
-            .{
-                .label = "main",
-                .title = "System Monitor TS",
-                .width = 1144,
-                .height = 720,
-                // The tile grid is machined for exactly this content
-                // size; the floor stops the resize where clipping would
-                // begin (the Zig original's rule).
-                .min_width = 1144,
-                .min_height = 720,
-                .restore_policy = "center_on_primary",
-                // The header bar IS the titlebar: the core's chromeMsg
-                // channel delivers the band geometry, and the header row
-                // pads past the traffic lights and matches the band's
-                // height (see src/app.native).
-                .titlebar = "hidden_inset_tall",
-                .views = .{
-                    .{ .label = "monitor-canvas", .kind = "gpu_surface", .fill = true, .role = "System monitor canvas", .accessibility_label = "System monitor", .gpu_backend = "metal", .gpu_pixel_format = "bgra8_unorm", .gpu_present_mode = "timer", .gpu_alpha_mode = "opaque", .gpu_color_space = "srgb", .gpu_vsync = true },
-                },
-            },
-        },
-    },
-    .security = .{
-        .navigation = .{
-            .allowed_origins = .{ "zero://app", "zero://inline" },
-            .external_links = .{ .action = "deny" },
-        },
-    },
-    .web_engine = "system",
-}
diff --git a/examples/system-monitor/README.md b/examples/system-monitor/README.md
index 7daab9741..039aeeab2 100644
--- a/examples/system-monitor/README.md
+++ b/examples/system-monitor/README.md
@@ -1,70 +1,45 @@
-# Native SDK system monitor example
+# Native SDK system monitor example (TypeScript)
 
-A live CPU / memory / process monitor built to showcase the effects channel: a repeating `fx.startTimer` tick spawns the OS's own commands through `fx.spawn` (collect mode), `update` parses their stdout with pure fixture-tested parsers, and the UI derives everything from the model — stat tiles with 60-sample `ui.chart` sparklines, a top-CPU process table with search and sort toggles, and a context-menu SIGTERM action behind a real confirmation dialog. Zero third-party services; the "backend" is `ps`, `vm_stat`, and `sysctl`.
+The live CPU / memory / process monitor authored entirely in **TypeScript + Native markup**. Zero Zig: the logic tier is the app-core subset under `src/`, compiled to native code at build time; `src/app.native` is the whole view tier and `app.zon` the manifest. The build detects `src/core.ts` in the tree and stages the wiring itself; no JS runtime ships in the binary.
 
-## The sampling loop (the showcase)
+The core is a multi-module reference split of the app-core subset's import-graph support:
 
-Every 2 seconds a repeating timer effect fires and `update` spawns two commands in `.collect` mode:
+- `src/core.ts` — the entry module: Model, Msg, update, subscriptions, the chromeMsg channel, and every exported binding helper (the app's public face — markup and node both see exactly its exports).
+- `src/parsers.ts` — the pure byte parsers over the sampler tools' output (`ps`, `vm_stat`, `/proc/meminfo`, the probes), the integer number tier (`intDiv`), and the byte/format helpers.
+- `src/table.ts` — the process table's search/sort/row-formatting machinery; type-imports `Model` from the entry (the legal back-edge shape).
+- `@native-sdk/core/text` — the SDK's byte-splice text engine, compiled in for the filter field's caret/selection/IME fidelity.
 
-- `/bin/ps axo pid=,pcpu=,pmem=,rss=,etime=,comm=` — the shared process list. One invocation yields the top-CPU table rows, the exact process count, the summed %cpu (normalized by core count for the CPU tile — honest label: ps %cpu is a per-process decaying average, so this is a smooth load figure), and the uptime, read from pid 1's elapsed time (launchd/init started at boot, so its `etime` IS the uptime — no wall-clock math, no extra command).
-- the per-OS memory command, switched at comptime: macOS parses `vm_stat` (used = active + wired + compressor pages) against a boot-time `sysctl hw.memsize` total; Linux parses `/proc/meminfo` (`MemTotal - MemAvailable`, totals included). Other OSes get no sampler and the status bar says so instead of pretending.
-
-A tick that lands while the previous spawns are still running is **skipped and counted** (`ticks_skipped`, shown in the status bar) — overlapping two `ps` runs would only add the load this app measures. Boot also runs one host-info spawn (`sysctl -n hw.ncpu hw.memsize` / `nproc`) and an eager first sample so the window never sits empty for a full interval. Pause/resume cancels and re-arms the timer through the same message the toolbar chip presses.
-
-## Sparklines
-
-Each charted stat keeps 60 samples (a 2-minute window at the 2 s cadence), shifted in place. The charts are markup `<chart>` elements (`src/spark_*.native`, one compiled fragment per tile) lowered through the chart primitive — series drawn through the vector path pipeline with token colors, so they re-theme with the palette, invalidate on data changes, and report series semantics in automation snapshots. CPU and memory draw zero-baseline **bars** pinned to the absolute 0..1 domain (`y-min="0" y-max="1"`); the process count draws a filled **area** against the chart's auto domain (the window's own min..max), since counts have no natural ceiling and an absolute scale would render a featureless block. The series bind model fns (`cpuSpark`/`memSpark`/`procSpark`) that pad short histories with leading NaN — missing samples draw nothing — so the trace enters from the right like a scope. (This app originally hand-built the sparklines as sixty bar widgets per tile because three 60-point polylines blew the old 128 path-elements-per-view budget; the chart primitive plus the 2048 budget retired that idiom, and the markup chart element then retired the Zig sparkline view.)
-
-## Terminating a process (safety, documented)
-
-Right/ctrl-click a table row for the native context menu. **Terminate (SIGTERM)…** never signals directly: it opens a confirmation dialog naming the process and pid (copied into the model at request time, so a later sample can never retarget a confirmation you are reading). Confirming spawns exactly `/bin/kill -TERM <pid>` — the polite, catchable request. There is no SIGKILL anywhere in this app. A refused kill (not your process) lands as a status note, never a crash. The scrim cancels on click; the dialog body absorbs presses so a click inside it never falls through to the cancel.
-
-## The settings window (model-declared)
-
-**Settings** opens the standard way — the app menu's Settings item or its keyboard shortcut (primary+comma, registered in `app.zon` under `.shortcuts` and mapped to `.open_settings` in `main.zig`'s `command`) — in its own fixed-size window; there is no in-window settings button. It is the model-declared window pattern: `windows_fn` declares the window descriptor while `model.settings_open` is set, `window_view` renders `settingsView` (one grouped form row: the sampling switch with its cadence facts) from the same model as the main canvas, so flipping the switch updates both windows on one dispatch — live, no Apply step — and a system appearance change rethemes both canvases through `on_appearance`. Close it with the window's close button — the platform close dispatches `.settings_closed` and the model clears its flag. Automation drives it like any canvas: `native automate shortcut monitor.settings` opens it through the real command path, its widgets are in the snapshot, and `widget-click settings-canvas <id>` works while it is open.
-
-## Authoring split (markup-first)
-
-- `src/header.native` — brand and the live/paused status line holding the trailing corner (the status line itself is an imported component, `src/header_status.native`). The app follows the system appearance; there is no in-window theme control. All four markup fragments — the header and the sparklines — are registered with the runtime's fragment watch in `main.zig`, so a Debug `native dev` run hot reloads any of them (or the imported status component) on save.
-- `src/spark_cpu.native`, `src/spark_mem.native`, `src/spark_proc.native` — the three sparkline charts, one `<chart>` fragment per stat tile, built into the Zig tile chrome as ordinary children.
-- `src/view.zig` — the Zig sections: stat tiles, the toolbar (every control on the `.sm` register so the row renders one height — pause/resume button with its inline play/pause icon, filter field with the search component's own built-in clear affordance, sort toggles), the process table as flat `list_item` rows under a hairline-separated heading (one surface, full-width hover washes, per-row context menus) with a controlled scroll (the model echoes the applied offset, so the 2 s sample rebuild never resets it mid-gesture), and the modal confirmation overlaid through a z-stack root.
-- `src/sampler.zig` — the pure parsers and per-OS command lines; no effects, no allocation.
-- `src/model.zig` — sampling state, history, table derivations, `update`, `boot`.
-- `src/theme.zig` — the teal/slate "ops room" token set for both modes, derived live from the system appearance; high-contrast falls back to the framework palettes.
-
-## Fixtures (committed real output)
-
-`src/fixtures/ps.txt`, `vm_stat.txt`, and `sysctl.txt` are a real capture from a macOS machine (10 cores, 32 GiB). The ps capture was reduced to its system rows (`/sbin`, `/usr`, `/bin`, `/System` — 561 of the original 644) so no user-account processes are committed; what remains is verbatim, including real spaces-in-path commands. `ps-edge.txt` is constructed (stated here, not passed off as a capture) to pin the edge cases a quiet capture cannot: day-form etimes, un-pathed names with spaces, a garbage line that must count as skipped. The Linux `/proc/meminfo` parser test uses a constructed sample in the documented shape for the same reason — no Linux capture machine here.
-
-## Fixed capacities
-
-- 60 history samples per charted stat; 2 s cadence.
-- 128 top-CPU rows kept per sample (an exact top-K selection over the full ps output — never "the first 128 lines"; count and CPU sum still cover every process). 14 rows shown in the table.
-- 48-byte process names (display cut, never dropped), 32-byte search buffer, 160-byte status note.
-- 3 context-menu entries per row x 14 rows = 42 of the 128 per-view budget.
-- Widget tree peaks around 140 nodes of the 1024 per-view budget (the chart retrofit collapsed three 60-bar sparklines into 3 leaves).
-
-## Run
+Everything the Zig monitor's core does is here: the 2 s sampling cadence as a declarative `Sub.timer` that exists exactly while sampling is live, collect-mode `Cmd.spawn` for the OS's own commands (`ps axo pid=,pcpu=,pmem=,rss=,etime=,comm=` shared across platforms, `vm_stat` or `/proc/meminfo` for memory, a boot host-info probe), pure byte parsers over the collected stdout (fixture-proven against the committed real captures), skipped-tick accounting (a tick that lands mid-spawn is counted, never overlapped), the exact top-128-by-CPU row selection with the full count and CPU sum still covering every process, uptime from pid 1's elapsed time, 60-sample NaN-padded sparkline windows drawn by markup `<chart>` elements, the search/sort/filter table on the real table register with controlled scroll, the confirmed SIGTERM context-menu action (`/bin/kill -TERM <pid>` — no SIGKILL anywhere), Copy Name onto the clipboard, the journaled `Cmd.now` sample timestamp, the honest no-sampler empty state, and the tall hidden-inset titlebar header driven by the `chromeMsg` channel.
 
 ```sh
-native dev
+native dev                                    # run the real app
+native dev --core --script dev-script.ndjson  # the core-logic loop under node - no renderer
+native check                                  # subset-check the core's import graph + markup + app.zon
+native test -Dplatform=null                   # the hermetic suite
 ```
 
-Watch the tiles fill in, filter the table, flip the sort chips, pause and resume sampling. Right-click a row you own (a `sleep 600 &` makes a safe target) and confirm the SIGTERM.
+The end-to-end proof battery lives in the SDK repo (`tests/ts-core/system_monitor_e2e_tests.zig`, run by `zig build test-ts-core-e2e`): it drives this example's real core and shipping markup headlessly through the boot probe, scripted sampler outputs (the committed `ps`/`vm_stat`/`sysctl` captures and its constructed edge fixture), the timer cadence with pause/resume, search, sorting, the kill round trip, the no-sampler state, and record→replay.
 
-Run the deterministic suite (fixture parsers, the sampling loop through the fake effects executor with TestClock timestamps, the history ring, sort/search/kill through typed dispatch, theming, markup parity, snapshot assertions, and the exact-frame tile layout):
+## The wiring channels this port uses
 
-```sh
-native test -Dplatform=null
-```
+- **`chromeMsg`** — the tall hidden-inset titlebar geometry lands in the model: the header row leads with a spacer sized to the traffic lights and matches its height to the band, exactly like the Zig original's `on_chrome`.
+- **`Sub.timer`** — the sampling cadence is declarative: `subscriptions(model)` returns the 2 s timer while the probe has answered and sampling is live; pause reconciles it away, resume re-arms it (and samples eagerly on the same dispatch).
+- **`Cmd.spawn` (collect mode)** — every sampler run delivers its whole stdout on the exit arm; a truncated block routes the err arm and never parses as whole.
+- **`Cmd.now`** — the applied sample's wall-clock stamp is a journaled clock read, so recorded sessions replay the same "sampled at" time.
+- **`windows(model)`** — the standard Settings command and primary+comma shortcut set model state, which declares `src/windows/settings.native`; its `.quit` close routes `monitor.settings.closed` through `commandMsg` and clears the declaration.
 
-The suite also carries an env-gated screenshot renderer (`SYSTEM_MONITOR_SHOTS=1`, skipped by default): it replays real `ps`/`vm_stat` captures through the normal update path and renders both themes OFFSCREEN through the deterministic reference renderer — no live window, no screen access, no macOS screen-recording permission. See the test's comment for the capture loop.
+## Where this port still deliberately differs from the Zig system-monitor
 
-Verify live through the automation harness:
+Every remaining divergence is a decided posture, listed here on purpose:
 
-```sh
-native build -Dautomation=true
-./zig-out/bin/system-monitor &
-native automate assert 'gpu_nonblank=true' 'role=button name="Pause or resume sampling"' 'name="CPU tile"'
-native automate screenshot monitor-canvas
-```
+- **The OS is probed at runtime, not switched at comptime.** A TS core has no comptime OS, so boot spawns `sysctl -n hw.ncpu hw.memsize`; a clean answer means macOS conventions (vm_stat), falling through to `nproc` means Linux (/proc/meminfo), and both failing is the honest "no sampler for this OS" state — the same empty state, discovered instead of compiled in. The probe also carries the host facts the Zig original fetched in its boot spawn.
+- **Theme comes from app.zon, not a tokens_fn.** The Zig original derives a custom teal/slate "ops room" token set; a TS app owns no tokens_fn, so this port keeps the house register (composed with the live system appearance — light/dark still follows the OS with no core code). Full brand-token fidelity is the register-token tier, out of the three-file shape by design.
+- **CPU numbers live in tenths of a percent, as integers.** The number tier splits integer and float domains, so `%cpu` parses to integer tenths (lossless for ps output, which prints one decimal) and the tile derives its display and sparkline fraction from them. A hypothetical tool printing more decimals would round at the second decimal where the Zig f32 parse would keep it; sort order can tie where sub-tenth values would have ordered.
+- **Display rounding is round-half-up.** `formatBytes` and the percent labels round with integer math; Zig's `{d:.1}`/`{d:.0}` can differ in the last digit on exact halfway ties, which the real samplers do not produce.
+- **A truncated ps block drops the sample whole.** The Zig original parses the first 512 KiB and counts one failure; collect-mode spawn routes `truncated` through the err arm with no payload, so this port notes the failure and keeps the previous sample — a cut block never parses as whole.
+- **The sample timestamp lands one dispatch later.** `fx.wallMs` is a same-dispatch journaled read; the TS analogue is a `Cmd.now` round trip after the sample commits. Same journal, same replay determinism, one extra Msg.
+- **Copy Name is fire-and-forget.** `Cmd.clipboardWrite` has no result routing, so the status note reports the request; the Zig original notes the confirmed outcome.
+- **Row presses are absorbed by a no-op arm.** Markup context menus need a pressable host, so each table row binds `on-press="row_pressed"`; the Zig builder's `data_row` is its own hit target and needs none.
+- **The kill confirmation's scrim is the `scrim` token.** The Zig original's cancel catcher is a fully transparent panel under the dialog chrome's scrim; markup panels take token backgrounds, so the catcher wears the scrim wash itself (the `notes` example's shipped overlay idiom).
+- **Fragment hot reload covers the whole view.** The Zig original registers four compiled fragments; here `src/app.native` is the entire view tier and `native dev` hot-reloads it as one document.
+- **Desktop only.** TypeScript cores build desktop apps today; there was no phone shell to port.
diff --git a/examples/system-monitor/app.zon b/examples/system-monitor/app.zon
index 4f4196e14..11c163905 100644
--- a/examples/system-monitor/app.zon
+++ b/examples/system-monitor/app.zon
@@ -2,15 +2,15 @@
     .id = "dev.native_sdk.system_monitor",
     .name = "system-monitor",
     .display_name = "System Monitor",
-    .description = "Live CPU, memory, and process sampling on a native canvas.",
+    .description = "Live CPU, memory, and process sampling authored entirely in TypeScript + Native markup.",
     .version = "0.1.0",
     .platforms = .{"macos"},
-    .permissions = .{ "view", "command" },
-    .capabilities = .{ "native_views", "gpu_surfaces", "shortcuts" },
+    // The clipboard permission covers the Copy Name context action
+    // (Cmd.clipboardWrite); command covers the sampler spawns (`ps`,
+    // `vm_stat`/`meminfo`, the boot probe, and the confirmed SIGTERM).
+    .permissions = .{ "view", "command", "clipboard" },
+    .capabilities = .{ "native_views", "gpu_surfaces" },
     .shortcuts = .{
-        // The standard settings shortcut (primary+comma): delivered as a
-        // command event and mapped to `.open_settings` in main.zig's
-        // `command` — the same code path the app-menu Settings item uses.
         .{ .id = "monitor.settings", .key = ",", .modifiers = .{"primary"} },
     },
     .shell = .{
@@ -22,10 +22,14 @@
                 .height = 720,
                 // The tile grid is machined for exactly this content
                 // size; the floor stops the resize where clipping would
-                // begin (proven by the layout audit sweep).
+                // begin (the Zig original's rule).
                 .min_width = 1144,
                 .min_height = 720,
                 .restore_policy = "center_on_primary",
+                // The header bar IS the titlebar: the core's chromeMsg
+                // channel delivers the band geometry, and the header row
+                // pads past the traffic lights and matches the band's
+                // height (see src/app.native).
                 .titlebar = "hidden_inset_tall",
                 .views = .{
                     .{ .label = "monitor-canvas", .kind = "gpu_surface", .fill = true, .role = "System monitor canvas", .accessibility_label = "System monitor", .gpu_backend = "metal", .gpu_pixel_format = "bgra8_unorm", .gpu_present_mode = "timer", .gpu_alpha_mode = "opaque", .gpu_color_space = "srgb", .gpu_vsync = true },
@@ -40,5 +44,4 @@
         },
     },
     .web_engine = "system",
-    .cef = .{ .dir = "third_party/cef/macos", .auto_install = false },
 }
diff --git a/examples/system-monitor-ts/dev-script.ndjson b/examples/system-monitor/dev-script.ndjson
similarity index 100%
rename from examples/system-monitor-ts/dev-script.ndjson
rename to examples/system-monitor/dev-script.ndjson
diff --git a/examples/system-monitor/package.json b/examples/system-monitor/package.json
new file mode 100644
index 000000000..4902f95f9
--- /dev/null
+++ b/examples/system-monitor/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "system-monitor",
+  "private": true,
+  "description": "Editor and versioning surface only: stock TypeScript tooling resolves @native-sdk/core from here. The native CLI never reads it and builds with node_modules absent.",
+  "dependencies": {
+    "@native-sdk/core": "0.10.1"
+  }
+}
diff --git a/examples/system-monitor-ts/src/app.native b/examples/system-monitor/src/app.native
similarity index 100%
rename from examples/system-monitor-ts/src/app.native
rename to examples/system-monitor/src/app.native
diff --git a/examples/system-monitor-ts/src/core.ts b/examples/system-monitor/src/core.ts
similarity index 99%
rename from examples/system-monitor-ts/src/core.ts
rename to examples/system-monitor/src/core.ts
index 2bf88033e..67d3c03c2 100644
--- a/examples/system-monitor-ts/src/core.ts
+++ b/examples/system-monitor/src/core.ts
@@ -1,6 +1,5 @@
-// system-monitor-ts core: the live CPU / memory / process monitor's whole
-// logic tier in the TypeScript app-core subset — the spawn-showcase port of
-// examples/system-monitor. Zero Zig in this tree: the build transpiles this
+// system-monitor core: the live CPU / memory / process monitor's whole
+// logic tier in the TypeScript app-core subset. The build compiles this
 // module and its imports, src/app.native is the whole view, app.zon the
 // manifest.
 //
diff --git a/examples/system-monitor/src/header.native b/examples/system-monitor/src/header.native
deleted file mode 100644
index 167d3a7e3..000000000
--- a/examples/system-monitor/src/header.native
+++ /dev/null
@@ -1,21 +0,0 @@
-<!-- The monitor header: the live/paused sampling status line, which
-     holds the trailing corner like an ops-room wall clock — the band's
-     one informative element, the rest stays bare drag surface. Compiled at
-     comptime (canvas.CompiledMarkupView) and composed under the Zig root
-     view; the sampling button, search, and sort controls live in the Zig
-     toolbar, composed with the Zig-authored table they act on. The app
-     follows the system appearance (on_appearance); there is no
-     in-window theme control. -->
-<import src="header_status.native"/>
-<column>
-  <!-- The header IS the titlebar (tall hidden-inset chrome): it is the
-       window's drag surface, leads with a spacer sized to the traffic
-       lights via on_chrome, and matches its height to the titlebar band
-       so its controls and the lights share a centerline. -->
-  <row height="{header_height}" padding="12" gap="12" cross="center" background="surface" window-drag="true" label="Monitor header">
-    <spacer width="{chrome_leading}" />
-    <spacer grow="1" />
-    <use template="status-line" />
-  </row>
-  <separator />
-</column>
diff --git a/examples/system-monitor/src/header_status.native b/examples/system-monitor/src/header_status.native
deleted file mode 100644
index 5d8f29fbc..000000000
--- a/examples/system-monitor/src/header_status.native
+++ /dev/null
@@ -1,7 +0,0 @@
-<!-- The header's sampling status line, imported by header.native: the
-     band's one informative element, kept in its own component file so
-     the header stays bare drag surface and the status wording lives
-     where it reads. -->
-<template name="status-line">
-  <text size="sm" foreground="text_muted" label="Sampling status">{headerStatus}</text>
-</template>
diff --git a/examples/system-monitor/src/main.zig b/examples/system-monitor/src/main.zig
deleted file mode 100644
index 0feb8bcfa..000000000
--- a/examples/system-monitor/src/main.zig
+++ /dev/null
@@ -1,208 +0,0 @@
-//! system-monitor: a live CPU / memory / process monitor built to
-//! showcase the Native SDK effects channel — no library calls into the
-//! kernel, no third-party services, just the OS's own commands run
-//! through `fx.spawn` on an `fx.startTimer` cadence.
-//!
-//! The loop: a repeating 2 s timer fires -> `update` spawns `ps` and the
-//! per-OS memory command in `.collect` mode -> each exit Msg delivers the
-//! whole stdout -> pure parsers (`sampler.zig`, fixture-tested against
-//! committed real output) turn it into stat tiles, 60-sample sparkline
-//! history, and a top-CPU process table with search, sort toggles, and a
-//! confirmed SIGTERM context-menu action.
-//!
-//! Authoring split (markup-first): the header and the three sparkline
-//! charts are comptime-compiled `.native` views (each sparkline is one
-//! `<chart>` binding the model's NaN-padded sample window); the tiles,
-//! toolbar, table, and the confirmation overlay are Zig. See
-//! `src/view.zig`.
-
-const std = @import("std");
-const runner = @import("runner");
-const native_sdk = @import("native_sdk");
-
-pub const panic = std.debug.FullPanic(native_sdk.debug.capturePanic);
-
-const canvas = native_sdk.canvas;
-const geometry = native_sdk.geometry;
-
-const model_mod = @import("model.zig");
-const theme = @import("theme.zig");
-const view_mod = @import("view.zig");
-
-pub const Model = model_mod.Model;
-pub const Msg = model_mod.Msg;
-pub const update = model_mod.update;
-pub const boot = model_mod.boot;
-pub const rootView = view_mod.rootView;
-
-pub const canvas_label = "monitor-canvas";
-pub const window_width = view_mod.window_width;
-pub const window_height = view_mod.window_height;
-/// Content min-size floor the window enforces: the tile grid is machined
-/// for the full content width, so shrinking below the designed size can
-/// only clip it — the floor is the size itself.
-pub const window_min_width: f32 = view_mod.window_width;
-pub const window_min_height: f32 = view_mod.window_height;
-
-// The model-declared settings WINDOW (the classic desktop settings shape):
-// `.open_settings` sets the flag, `windows_fn` declares the window while
-// it is set, and its canvas renders `view_mod.settingsView` from the
-// same model as the main window. It opens the standard way only — the
-// app-menu Settings item and its keyboard shortcut (primary+comma) both
-// deliver `cmd_settings` through `command` below; there is no in-window
-// settings button. Fixed-size: the content is one grouped form row, so
-// the window is exactly that row plus its insets.
-pub const settings_window_label = "settings";
-pub const settings_canvas_label = "settings-canvas";
-pub const settings_window_width: f32 = 420;
-pub const settings_window_height: f32 = 76;
-
-// ---------------------------------------------------------------- commands
-
-/// The settings command id: registered as the primary+comma shortcut in
-/// app.zon (`.shortcuts`) and shared by every settings entry point, so
-/// menu and keyboard land on the same `.open_settings` dispatch.
-pub const cmd_settings = "monitor.settings";
-
-/// Shell command events (menu items, registered shortcuts) map to Msgs
-/// here — one code path for every way the OS asks the app to act.
-pub fn command(name: []const u8) ?Msg {
-    if (std.mem.eql(u8, name, cmd_settings)) return .open_settings;
-    return null;
-}
-
-const app_permissions = [_][]const u8{ native_sdk.security.permission_command, native_sdk.security.permission_view };
-const shell_views = [_]native_sdk.ShellView{
-    .{ .label = canvas_label, .kind = .gpu_surface, .fill = true, .role = "System monitor canvas", .accessibility_label = "System monitor", .gpu_backend = .metal, .gpu_pixel_format = .bgra8_unorm, .gpu_present_mode = .timer, .gpu_alpha_mode = .@"opaque", .gpu_color_space = .srgb, .gpu_vsync = true },
-};
-const shell_windows = [_]native_sdk.ShellWindow{.{
-    .label = "main",
-    .title = "System Monitor",
-    .width = window_width,
-    .height = window_height,
-    // The tile grid is machined for exactly the content width, so the
-    // floor is the designed size itself — proven by the layout audit
-    // sweep in tests.zig, which sweeps from exactly this floor.
-    .min_width = window_min_width,
-    .min_height = window_min_height,
-    // Tall hidden-inset titlebar (declared in app.zon too, which threads
-    // it through the STARTUP window create): the header bar IS the
-    // titlebar — it pads its leading edge past the traffic lights via
-    // `on_chrome` and is the window's drag surface (`window-drag` in
-    // header.native). The settings window keeps standard chrome.
-    .titlebar = .hidden_inset_tall,
-    .views = &shell_views,
-}};
-pub const shell_scene: native_sdk.ShellConfig = .{ .windows = &shell_windows };
-
-// -------------------------------------------------------------------- app
-
-pub const MonitorApp = native_sdk.UiApp(Model, Msg);
-
-/// Fragment hot reload (Debug dev runs): the root view is Zig, but the
-/// header and the three sparklines are compiled markup fragments —
-/// registering them keeps the edit-see loop alive, so editing any of
-/// these `.native` sources (or a file they import, like the header's
-/// status-line component) while the app runs reloads that fragment in
-/// place. Outside Debug the handles are empty and the watch compiles
-/// to nothing.
-const monitor_fragments = [_]canvas.MarkupFragment{
-    view_mod.CompiledHeaderView.fragment("src/header.native"),
-    view_mod.CpuSparkView.fragment("src/spark_cpu.native"),
-    view_mod.MemSparkView.fragment("src/spark_mem.native"),
-    view_mod.ProcSparkView.fragment("src/spark_proc.native"),
-    view_mod.UptimeValueView.fragment("src/uptime_value.native"),
-};
-
-pub fn monitorOptions() MonitorApp.Options {
-    return .{
-        .name = "system-monitor",
-        .scene = shell_scene,
-        .canvas_label = canvas_label,
-        .update_fx = update,
-        .init_fx = boot,
-        .view = rootView,
-        .windows_fn = monitorWindows,
-        .window_view = monitorWindowView,
-        .on_command = command,
-        .tokens_fn = tokensFromModel,
-        .on_appearance = onAppearance,
-        .on_chrome = onChrome,
-    };
-}
-
-/// The declared window set derives from the model: the settings window
-/// exists exactly while `settings_open` is set. The runtime reconciles
-/// after every dispatch — `.open_settings` opens it, and the user's
-/// close button dispatches `.settings_closed` so the model agrees (keep
-/// the flag set to veto and it comes right back).
-fn monitorWindows(model: *const Model, scratch: *MonitorApp.WindowsScratch) []const MonitorApp.WindowDescriptor {
-    var count: usize = 0;
-    if (model.settings_open) {
-        scratch.windows[count] = .{
-            .label = settings_window_label,
-            .canvas_label = settings_canvas_label,
-            .title = "Settings",
-            .width = settings_window_width,
-            .height = settings_window_height,
-            // A settings window is fixed-size: the content is a form
-            // machined for exactly this box, so resizing could only
-            // stretch or clip it.
-            .resizable = false,
-            .on_close = .settings_closed,
-        };
-        count += 1;
-    }
-    return scratch.windows[0..count];
-}
-
-fn monitorWindowView(ui: *MonitorApp.Ui, model: *const Model, window_label: []const u8) MonitorApp.Ui.Node {
-    std.debug.assert(std.mem.eql(u8, window_label, settings_window_label));
-    return view_mod.settingsView(ui, model);
-}
-
-/// Design tokens derive from the model's theme preference plus the
-/// OS-reported appearance (scheme, contrast, reduced motion).
-pub fn tokensFromModel(model: *const Model) canvas.DesignTokens {
-    return theme.tokens(model.colorScheme(), model.appearance.high_contrast, model.appearance.reduce_motion);
-}
-
-/// System appearance changes land in the model so `tokens_fn` re-derives;
-/// the `auto` theme preference follows them live.
-fn onAppearance(appearance: native_sdk.Appearance) ?Msg {
-    return Msg{ .set_appearance = appearance };
-}
-
-/// Chrome overlay geometry flows into the model (tall hidden-inset
-/// titlebar): delivered before the first view build and again when it
-/// changes — entering fullscreen hides the traffic lights and this goes
-/// to zero.
-pub fn onChrome(chrome: native_sdk.WindowChrome) ?Msg {
-    return Msg{ .chrome_changed = chrome };
-}
-
-// ------------------------------------------------------------------- main
-
-pub fn main(init: std.process.Init) !void {
-    const app_state = try std.heap.page_allocator.create(MonitorApp);
-    defer std.heap.page_allocator.destroy(app_state);
-    var options = monitorOptions();
-    options.fragment_watch = .{ .fragments = &monitor_fragments, .io = init.io };
-    app_state.* = MonitorApp.init(std.heap.page_allocator, .{}, options);
-    defer app_state.deinit();
-    try runner.runWithOptions(app_state.app(), .{
-        .app_name = "system-monitor",
-        .window_title = "System Monitor",
-        .bundle_id = "dev.native_sdk.system_monitor",
-        .default_frame = geometry.RectF.init(0, 0, window_width, window_height),
-        .js_window_api = false,
-        .security = .{
-            .permissions = &app_permissions,
-            .navigation = .{ .allowed_origins = &.{ "zero://inline", "zero://app" } },
-        },
-    }, init);
-}
-
-test {
-    _ = @import("tests.zig");
-}
diff --git a/examples/system-monitor/src/model.zig b/examples/system-monitor/src/model.zig
deleted file mode 100644
index f2208c3b2..000000000
--- a/examples/system-monitor/src/model.zig
+++ /dev/null
@@ -1,723 +0,0 @@
-//! system-monitor model: sampling state, stat history, the process table,
-//! and the SIGTERM confirmation flow.
-//!
-//! The effects loop is the app: a repeating `fx.startTimer` tick spawns
-//! `ps` and the per-OS memory command in `.collect` mode, each exit Msg
-//! carries the whole stdout, and `update` parses it (`sampler.zig`) into
-//! the model. Everything the views show that is computable — filtered and
-//! sorted table rows, sparkline fractions, formatted sizes — is derived
-//! per rebuild into the build arena, never stored.
-//!
-//! Fixed capacities (loud by design, documented in the README):
-//!   - 60 samples of history per charted stat (2 s cadence = a 2-minute
-//!     window), shifted in place
-//!   - 128 top-CPU process rows kept per sample (`sampler.max_rows`);
-//!     the total count and CPU sum still cover every process
-//!   - 14 table rows shown (`max_table_rows`), 48-byte process names,
-//!     32-byte search buffer, 160-byte status note
-//!
-//! Safety (the kill path): terminating a process sends SIGTERM — the
-//! polite, catchable request — via `/bin/kill -TERM <pid>`, and only after
-//! an explicit confirmation dialog that names the process and pid. There
-//! is no SIGKILL anywhere in this app. The pid and name are copied into
-//! the model when the dialog opens, so later samples (or a vanished
-//! process) can never retarget a confirmation the user is reading.
-
-const std = @import("std");
-const native_sdk = @import("native_sdk");
-pub const sampler = @import("sampler.zig");
-
-const canvas = native_sdk.canvas;
-
-pub const Effects = native_sdk.Effects(Msg);
-
-// ------------------------------------------------------------ capacities
-
-/// Sparkline history depth: 60 samples at the 2 s cadence = 2 minutes.
-pub const history_len = 60;
-/// Sampling cadence.
-pub const sample_interval_ms: u32 = 2000;
-/// Process rows the table shows (of the `sampler.max_rows` kept).
-pub const max_table_rows = 14;
-pub const max_search = 32;
-pub const max_note = 160;
-/// The header bar's natural height, and the floor `header_height` falls
-/// back to when no titlebar band overlays the content (fullscreen,
-/// standard chrome, tests). Matches the tall hidden-inset band the
-/// system reports through `on_chrome` — the band must not be taller
-/// than the OS band, or the header's controls center below the traffic
-/// lights the system centers within its own band.
-pub const header_natural_height: f32 = 52;
-
-// Effect keys, model-owned identity. Timer keys are their own namespace.
-pub const sample_timer_key: u64 = 1;
-pub const ps_key: u64 = 2;
-pub const mem_key: u64 = 3;
-pub const info_key: u64 = 4;
-pub const kill_key: u64 = 5;
-pub const copy_key: u64 = 6;
-
-// ----------------------------------------------------------------- types
-
-pub const SortKey = enum { cpu, mem, pid, name };
-
-pub const Msg = union(enum) {
-    /// The repeating sample timer fired: spawn this tick's commands.
-    tick: native_sdk.EffectTimer,
-    /// Collected `ps` output (or its failure) arrived.
-    ps_done: native_sdk.EffectExit,
-    /// Collected memory-command output arrived.
-    mem_done: native_sdk.EffectExit,
-    /// Boot-time host info (core count, macOS total memory) arrived.
-    info_done: native_sdk.EffectExit,
-    /// Pause/resume sampling (cancels or restarts the repeating timer).
-    toggle_sampling,
-    search_edit: canvas.TextInputEvent,
-    /// Controlled scroll: the process table's applied offset lands here
-    /// and the view echoes it back, so a sample-tick rebuild mid-gesture
-    /// can never reset the table.
-    table_scrolled: canvas.ScrollState,
-    /// Sort chip pressed: switch to this key, or flip direction when it
-    /// is already active.
-    set_sort: SortKey,
-    /// Context menu: open the SIGTERM confirmation for this pid.
-    request_kill: u32,
-    cancel_kill,
-    /// The dialog body absorbs presses (deepest handler wins), so a click
-    /// inside the dialog never reaches the scrim's cancel underneath.
-    dialog_pressed,
-    /// Dialog confirmed: spawn `/bin/kill -TERM <pid>`.
-    confirm_kill,
-    kill_done: native_sdk.EffectExit,
-    /// Context menu: copy the process name to the system clipboard.
-    copy_name: u32,
-    copied: native_sdk.EffectClipboardResult,
-    set_appearance: native_sdk.Appearance,
-    /// Chrome overlay geometry (tall hidden-inset titlebar): the header
-    /// pads its leading edge past the traffic lights and matches its
-    /// height to the titlebar band. Delivered through `on_chrome`.
-    chrome_changed: native_sdk.WindowChrome,
-    /// Open the settings WINDOW (model-declared — the window exists
-    /// exactly while the flag is set). Dispatched by the app-menu
-    /// Settings item and its standard keyboard shortcut, both landing
-    /// through `main.command`; idempotent while already open.
-    open_settings,
-    /// The user closed the settings window (its close button): the
-    /// model owns the consequence and clears the flag.
-    settings_closed,
-};
-
-/// The confirmation target, copied out of the row at request time.
-pub const PendingKill = struct {
-    pid: u32,
-    name_storage: [sampler.max_name_bytes]u8,
-    name_len: usize,
-
-    pub fn name(self: *const PendingKill) []const u8 {
-        return self.name_storage[0..self.name_len];
-    }
-};
-
-pub const Model = struct {
-    // Sampling state.
-    paused: bool = false,
-    /// Sampling ticks skipped because the previous spawn had not exited
-    /// yet (never overlap two ps runs; count the lag honestly).
-    ticks_skipped: u32 = 0,
-    ps_inflight: bool = false,
-    mem_inflight: bool = false,
-    samples_taken: u32 = 0,
-    /// Wall-clock ms of the last applied ps sample (0 = none yet).
-    /// Stamped from `fx.wallMs` — the journaled clock read, so recorded
-    /// sessions replay the same timestamps (tests swap the seam through
-    /// `effects.clock`).
-    sampled_at_ms: i64 = 0,
-
-    // Host facts (boot-time info spawn; memory total may also ride the
-    // Linux memory sample).
-    cores: u32 = 0,
-    mem_total_bytes: u64 = 0,
-
-    // Latest sample.
-    cpu_percent: f32 = 0,
-    mem_used_bytes: u64 = 0,
-    process_count: u32 = 0,
-    uptime_seconds: u64 = 0,
-    rows: [sampler.max_rows]sampler.Process = undefined,
-    row_count: usize = 0,
-    parse_failures: u32 = 0,
-
-    // History, oldest first, shifted in place at capacity.
-    cpu_history: [history_len]f32 = undefined,
-    cpu_history_len: usize = 0,
-    mem_history: [history_len]f32 = undefined,
-    mem_history_len: usize = 0,
-    proc_history: [history_len]f32 = undefined,
-    proc_history_len: usize = 0,
-
-    // Table state.
-    search_buffer: canvas.TextBuffer(max_search) = .{},
-    sort_key: SortKey = .cpu,
-    sort_descending: bool = true,
-    pending_kill: ?PendingKill = null,
-    /// Controlled scroll offset for the process table: the model
-    /// observes the applied offset and echoes it back.
-    table_scroll: f32 = 0,
-
-    // Status note + appearance (the app follows the system; no
-    // in-window theme control by design).
-    note_storage: [max_note]u8 = undefined,
-    note_len: usize = 0,
-    /// A note that clears itself on the next applied sample LAUNCHED
-    /// after it was set (`note_stamp_generation`): the kill path's
-    /// "terminate request delivered" is a moment, not a state — the
-    /// following tick (whose ps output is the delivery's visible
-    /// consequence) retires it instead of letting it sit forever.
-    note_clears_on_sample: bool = false,
-    /// Generation counter for ps sample LAUNCHES (not applies), bumped
-    /// in `requestSample` when the spawn actually issues. Launches never
-    /// overlap (`ps_inflight` 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.
-    sample_generation: u32 = 0,
-    /// 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.
-    note_stamp_generation: u32 = 0,
-    appearance: native_sdk.Appearance = .{},
-    /// Chrome overlay geometry from `on_chrome` (tall hidden-inset
-    /// titlebar): the header leads with a spacer this wide so its
-    /// controls clear the traffic lights, and matches its height to the
-    /// titlebar band. Both fall back to the natural header when no band
-    /// overlays the content (fullscreen, standard chrome, tests).
-    chrome_leading: f32 = 0,
-    header_height: f32 = header_natural_height,
-    /// The settings window's open flag: `windows_fn` declares the
-    /// window while this is set, so `.open_settings` opens it and the
-    /// user's close button (via `settings_closed`) closes it.
-    settings_open: bool = false,
-
-    // ------------------------------------------------------------ queries
-
-    pub fn search(model: *const Model) []const u8 {
-        return model.search_buffer.text();
-    }
-
-    pub fn searching(model: *const Model) bool {
-        return model.search().len > 0;
-    }
-
-    pub fn note(model: *const Model) []const u8 {
-        return model.note_storage[0..model.note_len];
-    }
-
-    pub fn setNote(model: *Model, comptime fmt: []const u8, args: anytype) void {
-        model.note_clears_on_sample = false;
-        const written = std.fmt.bufPrint(&model.note_storage, fmt, args) catch {
-            model.note_len = 0;
-            return;
-        };
-        model.note_len = written.len;
-    }
-
-    /// A `setNote` that retires itself on the next applied ps sample
-    /// launched after this moment (see `note_clears_on_sample`). The
-    /// generation stamp keeps a sample already in flight — whose rows
-    /// predate whatever this note reports — from retiring it early.
-    pub fn setTransientNote(model: *Model, comptime fmt: []const u8, args: anytype) void {
-        model.setNote(fmt, args);
-        model.note_clears_on_sample = true;
-        model.note_stamp_generation = model.sample_generation;
-    }
-
-    pub fn colorScheme(model: *const Model) native_sdk.ColorScheme {
-        return model.appearance.color_scheme;
-    }
-
-    pub fn sampling(model: *const Model) bool {
-        return !model.paused;
-    }
-
-    pub fn confirmingKill(model: *const Model) bool {
-        return model.pending_kill != null;
-    }
-
-    /// Header status: what the monitor is doing right now.
-    pub fn headerStatus(model: *const Model, arena: std.mem.Allocator) []const u8 {
-        if (!sampler.supported) return "Sampling is not supported on this OS";
-        if (model.paused) return "Paused";
-        if (model.samples_taken == 0) return "Sampling…";
-        return std.fmt.allocPrint(arena, "Live · every {d} s", .{sample_interval_ms / 1000}) catch "";
-    }
-
-    // Tile values, derived per rebuild.
-
-    pub fn cpuValue(model: *const Model, arena: std.mem.Allocator) []const u8 {
-        if (model.samples_taken == 0) return "--";
-        return std.fmt.allocPrint(arena, "{d:.1}%", .{model.cpu_percent}) catch "--";
-    }
-
-    pub fn cpuDetail(model: *const Model, arena: std.mem.Allocator) []const u8 {
-        if (model.cores == 0) return "of all cores";
-        return std.fmt.allocPrint(arena, "across {d} cores", .{model.cores}) catch "";
-    }
-
-    pub fn memValue(model: *const Model, arena: std.mem.Allocator) []const u8 {
-        if (model.mem_used_bytes == 0) return "--";
-        return formatBytes(arena, model.mem_used_bytes);
-    }
-
-    pub fn memDetail(model: *const Model, arena: std.mem.Allocator) []const u8 {
-        if (model.mem_total_bytes == 0) return "in use";
-        return std.fmt.allocPrint(arena, "of {s} · {d:.0}%", .{
-            formatBytes(arena, model.mem_total_bytes),
-            model.memFraction() * 100,
-        }) catch "";
-    }
-
-    pub fn memFraction(model: *const Model) f32 {
-        if (model.mem_total_bytes == 0) return 0;
-        const used: f64 = @floatFromInt(model.mem_used_bytes);
-        const total: f64 = @floatFromInt(model.mem_total_bytes);
-        return std.math.clamp(@as(f32, @floatCast(used / total)), 0, 1);
-    }
-
-    pub fn procValue(model: *const Model, arena: std.mem.Allocator) []const u8 {
-        if (model.samples_taken == 0) return "--";
-        return std.fmt.allocPrint(arena, "{d}", .{model.process_count}) catch "--";
-    }
-
-    pub fn uptimeValue(model: *const Model, arena: std.mem.Allocator) []const u8 {
-        if (model.samples_taken == 0) return "--";
-        return formatUptime(arena, model.uptime_seconds);
-    }
-
-    pub fn cpuHistory(model: *const Model) []const f32 {
-        return model.cpu_history[0..model.cpu_history_len];
-    }
-
-    pub fn memHistory(model: *const Model) []const f32 {
-        return model.mem_history[0..model.mem_history_len];
-    }
-
-    pub fn procHistory(model: *const Model) []const f32 {
-        return model.proc_history[0..model.proc_history_len];
-    }
-
-    // The NaN-padded sparkline windows the markup charts bind
-    // (`<series values="{cpuSpark}"/>`): histories shorter than the
-    // window pad with leading NaN — missing samples draw nothing — so
-    // the trace enters from the right edge as samples accumulate.
-
-    pub fn cpuSpark(model: *const Model, arena: std.mem.Allocator) []const f32 {
-        return paddedWindow(arena, model.cpuHistory());
-    }
-
-    pub fn memSpark(model: *const Model, arena: std.mem.Allocator) []const f32 {
-        return paddedWindow(arena, model.memHistory());
-    }
-
-    pub fn procSpark(model: *const Model, arena: std.mem.Allocator) []const f32 {
-        return paddedWindow(arena, model.procHistory());
-    }
-
-    fn paddedWindow(arena: std.mem.Allocator, history: []const f32) []const f32 {
-        const out = arena.alloc(f32, history_len) catch return &.{};
-        @memset(out, std.math.nan(f32));
-        const start = out.len - @min(history.len, out.len);
-        @memcpy(out[start..], history[history.len - (out.len - start) ..]);
-        return out;
-    }
-
-    // Sort chip selection (used by the view's toggle buttons).
-    pub fn sortedByCpu(model: *const Model) bool {
-        return model.sort_key == .cpu;
-    }
-    pub fn sortedByMem(model: *const Model) bool {
-        return model.sort_key == .mem;
-    }
-    pub fn sortedByPid(model: *const Model) bool {
-        return model.sort_key == .pid;
-    }
-    pub fn sortedByName(model: *const Model) bool {
-        return model.sort_key == .name;
-    }
-
-    /// The status-bar line: sample facts, then any activity note. Bounded
-    /// composition into one arena buffer (parts past the cap drop whole,
-    /// never mid-glyph).
-    pub fn statusLine(model: *const Model, arena: std.mem.Allocator) []const u8 {
-        if (!sampler.supported) return "This build has no sampler for the host OS — see the README.";
-        const buffer = arena.alloc(u8, 320) catch return "";
-        var len: usize = 0;
-        if (model.samples_taken == 0) {
-            appendPart(buffer, &len, "Waiting for the first sample…", .{});
-        } else {
-            appendPart(buffer, &len, "{d} processes · sampled at {s} UTC", .{
-                model.process_count, formatClockMs(arena, model.sampled_at_ms),
-            });
-            if (model.paused) appendPart(buffer, &len, " · paused", .{});
-            if (model.ticks_skipped > 0) appendPart(buffer, &len, " · {d} ticks skipped", .{model.ticks_skipped});
-            if (model.parse_failures > 0) appendPart(buffer, &len, " · {d} parse failures", .{model.parse_failures});
-        }
-        if (model.note_len > 0) appendPart(buffer, &len, " · {s}", .{model.note()});
-        return buffer[0..len];
-    }
-
-    fn appendPart(buffer: []u8, len: *usize, comptime fmt: []const u8, args: anytype) void {
-        const written = std.fmt.bufPrint(buffer[len.*..], fmt, args) catch return;
-        len.* += written.len;
-    }
-
-    /// Table rows: search-filtered, sorted by the active key/direction,
-    /// cut to `max_table_rows`, derived into the build arena.
-    pub fn visibleRows(model: *const Model, arena: std.mem.Allocator) []const TableRow {
-        var matches: [sampler.max_rows]*const sampler.Process = undefined;
-        var match_count: usize = 0;
-        const query = model.search();
-        for (model.rows[0..model.row_count]) |*row| {
-            if (!rowMatches(row, query, arena)) continue;
-            matches[match_count] = row;
-            match_count += 1;
-        }
-        std.mem.sort(*const sampler.Process, matches[0..match_count], model, rowLessThan);
-
-        const shown = @min(match_count, max_table_rows);
-        const out = arena.alloc(TableRow, shown) catch return &.{};
-        for (out, matches[0..shown]) |*slot, row| {
-            slot.* = .{
-                .pid = row.pid,
-                .pid_text = std.fmt.allocPrint(arena, "{d}", .{row.pid}) catch "",
-                .name = arena.dupe(u8, row.name()) catch "",
-                .cpu_text = std.fmt.allocPrint(arena, "{d:.1}", .{row.cpu}) catch "",
-                .mem_text = formatBytes(arena, row.rss_kb * 1024),
-            };
-        }
-        return out;
-    }
-
-    pub fn matchCount(model: *const Model, arena: std.mem.Allocator) usize {
-        var count: usize = 0;
-        const query = model.search();
-        for (model.rows[0..model.row_count]) |*row| {
-            if (rowMatches(row, query, arena)) count += 1;
-        }
-        return count;
-    }
-
-    fn rowMatches(row: *const sampler.Process, query: []const u8, arena: std.mem.Allocator) bool {
-        if (query.len == 0) return true;
-        if (containsIgnoreCase(row.name(), query)) return true;
-        const pid_text = std.fmt.allocPrint(arena, "{d}", .{row.pid}) catch return false;
-        return std.mem.indexOf(u8, pid_text, query) != null;
-    }
-
-    /// Strict weak ordering (std.mem.sort asserts it): compare by the
-    /// active key, break ties by pid (unique), then apply the direction.
-    fn rowLessThan(model: *const Model, a: *const sampler.Process, b: *const sampler.Process) bool {
-        const keyed = switch (model.sort_key) {
-            .cpu => std.math.order(a.cpu, b.cpu),
-            .mem => std.math.order(a.rss_kb, b.rss_kb),
-            .pid => std.math.order(a.pid, b.pid),
-            .name => orderIgnoreCase(a.name(), b.name()),
-        };
-        const order = if (keyed == .eq) std.math.order(a.pid, b.pid) else keyed;
-        return switch (order) {
-            .lt => !model.sort_descending,
-            .gt => model.sort_descending,
-            .eq => false,
-        };
-    }
-
-    // ----------------------------------------------------------- mutation
-
-    fn pushHistory(history: *[history_len]f32, len: *usize, value: f32) void {
-        if (len.* == history_len) {
-            std.mem.copyForwards(f32, history[0 .. history_len - 1], history[1..]);
-            len.* = history_len - 1;
-        }
-        history[len.*] = value;
-        len.* += 1;
-    }
-
-    fn applyPsSample(model: *Model, sample: sampler.PsSample, sampled_at_ms: i64) void {
-        // 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).
-        if (model.note_clears_on_sample and model.sample_generation > model.note_stamp_generation) {
-            model.note_len = 0;
-            model.note_clears_on_sample = false;
-        }
-        model.process_count = sample.process_count;
-        model.uptime_seconds = sample.uptime_seconds;
-        model.rows = sample.rows;
-        model.row_count = sample.row_count;
-        // Machine load: the summed per-process %cpu normalized by core
-        // count (100 = every core saturated). Honest about the source:
-        // ps %cpu is a per-process decaying average, so this is a smooth
-        // load figure, not an instantaneous one.
-        const cores: f32 = @floatFromInt(@max(model.cores, 1));
-        model.cpu_percent = std.math.clamp(sample.cpu_sum / cores, 0, 100);
-        model.samples_taken += 1;
-        model.sampled_at_ms = sampled_at_ms;
-        if (sample.skipped_lines > 0) model.parse_failures += sample.skipped_lines;
-        pushHistory(&model.cpu_history, &model.cpu_history_len, model.cpu_percent / 100);
-        pushHistory(&model.proc_history, &model.proc_history_len, @floatFromInt(sample.process_count));
-    }
-
-    fn applyMemSample(model: *Model, sample: sampler.MemSample) void {
-        model.mem_used_bytes = sample.used_bytes;
-        if (sample.total_bytes > 0) model.mem_total_bytes = sample.total_bytes;
-        pushHistory(&model.mem_history, &model.mem_history_len, model.memFraction());
-    }
-};
-
-pub const TableRow = struct {
-    pid: u32,
-    pid_text: []const u8,
-    name: []const u8,
-    cpu_text: []const u8,
-    mem_text: []const u8,
-};
-
-// ------------------------------------------------------------ formatting
-
-/// Human-readable bytes: whole KB/MB below 10, one decimal GB above.
-pub fn formatBytes(arena: std.mem.Allocator, bytes: u64) []const u8 {
-    const value: f64 = @floatFromInt(bytes);
-    if (bytes >= 1024 * 1024 * 1024) {
-        return std.fmt.allocPrint(arena, "{d:.1} GB", .{value / (1024 * 1024 * 1024)}) catch "";
-    }
-    if (bytes >= 1024 * 1024) {
-        return std.fmt.allocPrint(arena, "{d:.0} MB", .{value / (1024 * 1024)}) catch "";
-    }
-    return std.fmt.allocPrint(arena, "{d:.0} KB", .{value / 1024}) catch "";
-}
-
-/// Uptime: `4d 03:12` past a day, `03:12:45` under one.
-pub fn formatUptime(arena: std.mem.Allocator, seconds: u64) []const u8 {
-    const days = seconds / 86_400;
-    const hours = (seconds % 86_400) / 3600;
-    const minutes = (seconds % 3600) / 60;
-    if (days > 0) {
-        return std.fmt.allocPrint(arena, "{d}d {d:0>2}:{d:0>2}", .{ days, hours, minutes }) catch "";
-    }
-    return std.fmt.allocPrint(arena, "{d:0>2}:{d:0>2}:{d:0>2}", .{ hours, minutes, seconds % 60 }) catch "";
-}
-
-/// Wall-clock ms -> local-agnostic `HH:MM:SS` (UTC, and the footer SAYS
-/// so; the point is "how fresh", not a calendar). Local rendering would
-/// need the host's tz offset as journaled data — the core is pure and
-/// replay checkpoints fingerprint the rendered view, so an OS timezone
-/// read anywhere in model or view would replay differently across
-/// machines. Until a journaled tz channel exists, the label is the
-/// honest fix.
-pub fn formatClockMs(arena: std.mem.Allocator, wall_ms: i64) []const u8 {
-    const total_seconds = @divFloor(wall_ms, 1000);
-    const day_seconds: u64 = @intCast(@mod(total_seconds, 86_400));
-    return std.fmt.allocPrint(arena, "{d:0>2}:{d:0>2}:{d:0>2}", .{
-        day_seconds / 3600, (day_seconds % 3600) / 60, day_seconds % 60,
-    }) catch "";
-}
-
-fn orderIgnoreCase(a: []const u8, b: []const u8) std.math.Order {
-    const shorter = @min(a.len, b.len);
-    for (a[0..shorter], b[0..shorter]) |a_byte, b_byte| {
-        const order = std.math.order(std.ascii.toLower(a_byte), std.ascii.toLower(b_byte));
-        if (order != .eq) return order;
-    }
-    return std.math.order(a.len, b.len);
-}
-
-fn containsIgnoreCase(haystack: []const u8, needle: []const u8) bool {
-    if (needle.len == 0) return true;
-    if (needle.len > haystack.len) return false;
-    var index: usize = 0;
-    while (index + needle.len <= haystack.len) : (index += 1) {
-        if (std.ascii.eqlIgnoreCase(haystack[index .. index + needle.len], needle)) return true;
-    }
-    return false;
-}
-
-// ---------------------------------------------------------------- update
-
-pub fn update(model: *Model, msg: Msg, fx: *Effects) void {
-    switch (msg) {
-        .tick => |timer| {
-            if (timer.outcome != .fired) return;
-            requestSample(model, fx);
-        },
-        .ps_done => |exit| {
-            model.ps_inflight = false;
-            if (exit.reason != .exited or exit.code != 0) {
-                model.setNote("ps failed ({s}, code {d})", .{ @tagName(exit.reason), exit.code });
-                return;
-            }
-            if (exit.output_truncated) model.parse_failures += 1;
-            // The sample timestamp is a JOURNALED wall-clock read
-            // (`fx.wallMs`): under session replay it resolves from the
-            // journal instead of the OS clock, so the same Msg sequence
-            // stamps the same time.
-            model.applyPsSample(sampler.parsePs(exit.output), fx.wallMs());
-        },
-        .mem_done => |exit| {
-            model.mem_inflight = false;
-            if (exit.reason != .exited or exit.code != 0) {
-                model.setNote("memory sample failed ({s}, code {d})", .{ @tagName(exit.reason), exit.code });
-                return;
-            }
-            const sample = sampler.parseMemory(exit.output) orelse {
-                model.parse_failures += 1;
-                return;
-            };
-            model.applyMemSample(sample);
-        },
-        .info_done => |exit| {
-            if (exit.reason != .exited or exit.code != 0) return;
-            const info = sampler.parseHostInfo(exit.output) orelse return;
-            model.cores = info.cores;
-            if (info.memory_bytes > 0) model.mem_total_bytes = info.memory_bytes;
-        },
-        .toggle_sampling => setSampling(model, fx, model.paused),
-        .search_edit => |edit| model.search_buffer.apply(edit),
-        .table_scrolled => |state| model.table_scroll = state.offset_y,
-        .set_sort => |key| {
-            if (model.sort_key == key) {
-                model.sort_descending = !model.sort_descending;
-            } else {
-                model.sort_key = key;
-                // Fresh keys start in their natural direction: biggest
-                // first for the numeric loads, a-to-z and low pids first.
-                model.sort_descending = key == .cpu or key == .mem;
-            }
-        },
-        .request_kill => |pid| {
-            for (model.rows[0..model.row_count]) |*row| {
-                if (row.pid != pid) continue;
-                var pending = PendingKill{ .pid = pid, .name_storage = undefined, .name_len = row.name_len };
-                @memcpy(pending.name_storage[0..row.name_len], row.name());
-                model.pending_kill = pending;
-                return;
-            }
-            model.setNote("pid {d} is gone (it left the sample)", .{pid});
-        },
-        .cancel_kill => model.pending_kill = null,
-        .dialog_pressed => {},
-        .confirm_kill => {
-            const pending = model.pending_kill orelse return;
-            model.pending_kill = null;
-            var pid_buffer: [12]u8 = undefined;
-            const pid_text = std.fmt.bufPrint(&pid_buffer, "{d}", .{pending.pid}) catch return;
-            // SIGTERM only — the graceful, catchable request. argv is
-            // copied by fx.spawn at call time, so the stack buffer is safe.
-            fx.spawn(.{
-                .key = kill_key,
-                .argv = &.{ "/bin/kill", "-TERM", pid_text },
-                .output = .collect,
-                .on_exit = Effects.exitMsg(.kill_done),
-            });
-            model.setNote("SIGTERM sent to {s} (pid {d})…", .{ pending.name(), pending.pid });
-        },
-        .kill_done => |exit| {
-            if (exit.reason == .exited and exit.code == 0) {
-                // 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).
-                model.setTransientNote("terminate request delivered", .{});
-            } else {
-                model.setNote("kill failed (code {d} — not your process?)", .{exit.code});
-            }
-        },
-        .copy_name => |pid| {
-            for (model.rows[0..model.row_count]) |*row| {
-                if (row.pid != pid) continue;
-                fx.writeClipboard(.{
-                    .key = copy_key,
-                    .text = row.name(),
-                    .on_result = Effects.clipboardMsg(.copied),
-                });
-                return;
-            }
-        },
-        .copied => |result| {
-            if (result.outcome == .ok) {
-                model.setNote("name copied", .{});
-            } else {
-                model.setNote("copy failed ({s})", .{@tagName(result.outcome)});
-            }
-        },
-        .set_appearance => |appearance| model.appearance = appearance,
-        .chrome_changed => |chrome| {
-            model.chrome_leading = chrome.insets.left;
-            // Match the header to the titlebar band so its centered
-            // controls share the traffic lights' centerline; the natural
-            // height is the floor when no band overlays the content.
-            model.header_height = @max(header_natural_height, chrome.insets.top);
-        },
-        .open_settings => model.settings_open = true,
-        .settings_closed => model.settings_open = false,
-    }
-}
-
-/// TEA init: host facts once, the repeating sample timer, and an eager
-/// first sample so the window never sits empty for a full interval.
-pub fn boot(model: *Model, fx: *Effects) void {
-    if (!sampler.supported) return;
-    fx.spawn(.{
-        .key = info_key,
-        .argv = sampler.info_argv,
-        .output = .collect,
-        .on_exit = Effects.exitMsg(.info_done),
-    });
-    setSampling(model, fx, true);
-}
-
-/// Pause/resume both drive the repeating timer; resuming also samples
-/// immediately (starting an active key replaces the timer in place, so
-/// this never double-registers).
-fn setSampling(model: *Model, fx: *Effects, active: bool) void {
-    model.paused = !active;
-    if (active) {
-        fx.startTimer(.{
-            .key = sample_timer_key,
-            .interval_ms = sample_interval_ms,
-            .mode = .repeating,
-            .on_fire = Effects.timerMsg(.tick),
-        });
-        requestSample(model, fx);
-    } else {
-        fx.cancelTimer(sample_timer_key);
-    }
-}
-
-/// One sampling tick: spawn ps + the memory command in `.collect` mode.
-/// A tick that lands while the previous spawns are still running is
-/// skipped and counted — two overlapping ps runs would only add the load
-/// this app is measuring.
-fn requestSample(model: *Model, fx: *Effects) void {
-    if (!sampler.supported) return;
-    if (model.ps_inflight or model.mem_inflight) {
-        model.ticks_skipped += 1;
-        return;
-    }
-    model.sample_generation += 1;
-    model.ps_inflight = true;
-    fx.spawn(.{
-        .key = ps_key,
-        .argv = sampler.ps_argv,
-        .output = .collect,
-        .on_exit = Effects.exitMsg(.ps_done),
-    });
-    model.mem_inflight = true;
-    fx.spawn(.{
-        .key = mem_key,
-        .argv = sampler.mem_argv,
-        .output = .collect,
-        .on_exit = Effects.exitMsg(.mem_done),
-    });
-}
diff --git a/examples/system-monitor-ts/src/parsers.ts b/examples/system-monitor/src/parsers.ts
similarity index 99%
rename from examples/system-monitor-ts/src/parsers.ts
rename to examples/system-monitor/src/parsers.ts
index 0f036e251..5e057bf86 100644
--- a/examples/system-monitor-ts/src/parsers.ts
+++ b/examples/system-monitor/src/parsers.ts
@@ -1,4 +1,4 @@
-// system-monitor-ts parsers module: the pure byte parsers over the sampler
+// system-monitor parsers module: the pure byte parsers over the sampler
 // tools' output, plus the integer number tier and the byte/format helpers
 // they share — the TS counterpart of the Zig original's fixture-tested
 // sampler.zig, one import away from core.ts. Everything here is
diff --git a/examples/system-monitor/src/sampler.zig b/examples/system-monitor/src/sampler.zig
deleted file mode 100644
index 0dc6576a1..000000000
--- a/examples/system-monitor/src/sampler.zig
+++ /dev/null
@@ -1,294 +0,0 @@
-//! system-monitor sampling: the OS commands one sampling tick spawns and
-//! the pure parsers that turn their collected stdout into numbers.
-//!
-//! Everything here is `(bytes) -> struct` — no effects, no allocation, no
-//! clock — so the whole module is exercised by fixture tests against
-//! committed real command output (`src/fixtures/`). The effectful half
-//! (timers, `fx.spawn`, in-flight bookkeeping) lives in `model.zig`.
-//!
-//! Portability (documented, honest): the process list is one shared
-//! `ps axo pid=,pcpu=,pmem=,rss=,etime=,comm=` invocation — the exact
-//! column set BSD ps (macOS) and procps ps (Linux) both accept. Memory
-//! sampling switches at comptime: macOS parses `vm_stat` against an
-//! `hw.memsize` total, Linux parses `/proc/meminfo` (which carries its own
-//! total). Other targets get no sampler commands and the app says so in
-//! the status bar instead of pretending.
-
-const std = @import("std");
-const builtin = @import("builtin");
-
-/// Whether this build knows how to sample the host at all.
-pub const supported = switch (builtin.os.tag) {
-    .macos, .linux => true,
-    else => false,
-};
-
-// ------------------------------------------------------------- commands
-
-/// The shared process-list command. `=` after each column suppresses the
-/// header row on both ps flavors; `comm` is last because it is the only
-/// column that may contain spaces.
-pub const ps_argv: []const []const u8 = &.{ "/bin/ps", "axo", "pid=,pcpu=,pmem=,rss=,etime=,comm=" };
-
-/// The per-OS memory command (unused on unsupported targets).
-pub const mem_argv: []const []const u8 = switch (builtin.os.tag) {
-    .macos => &.{"/usr/bin/vm_stat"},
-    else => &.{ "/bin/cat", "/proc/meminfo" },
-};
-
-/// One boot-time host-info command: core count (both) + total memory
-/// (macOS only; Linux totals come with every /proc/meminfo sample).
-pub const info_argv: []const []const u8 = switch (builtin.os.tag) {
-    .macos => &.{ "/usr/sbin/sysctl", "-n", "hw.ncpu", "hw.memsize" },
-    else => &.{"/usr/bin/nproc"},
-};
-
-// ------------------------------------------------------------ processes
-
-/// Top-K process rows kept per sample. `ps ax` on a real desktop lists
-/// 500-800 processes; the model keeps the K highest-CPU rows (an honest
-/// top-K selection over the full output — never "the first K lines") plus
-/// the exact total count and CPU sum across ALL rows.
-pub const max_rows = 128;
-
-/// Bytes kept of one process name (the basename of `comm`); longer names
-/// are cut for display, never dropped.
-pub const max_name_bytes = 48;
-
-pub const Process = struct {
-    pid: u32,
-    /// Per-process CPU percent as ps reports it (100 = one full core).
-    cpu: f32,
-    /// Per-process share of physical memory, percent.
-    mem: f32,
-    /// Resident set size in KiB.
-    rss_kb: u64,
-    name_storage: [max_name_bytes]u8,
-    name_len: usize,
-
-    pub fn name(self: *const Process) []const u8 {
-        return self.name_storage[0..self.name_len];
-    }
-};
-
-pub const PsSample = struct {
-    /// Exact number of parsed process rows (the "Processes" stat).
-    process_count: u32 = 0,
-    /// Sum of every row's %cpu. Divide by the core count for a 0-100
-    /// machine load figure.
-    cpu_sum: f32 = 0,
-    /// Uptime in seconds, read from pid 1's `etime` (launchd/init started
-    /// at boot, so its elapsed time IS the uptime — no wall-clock math).
-    uptime_seconds: u64 = 0,
-    /// Malformed lines skipped (loud, never silent).
-    skipped_lines: u32 = 0,
-    rows: [max_rows]Process = undefined,
-    row_count: usize = 0,
-
-    pub fn topRows(self: *const PsSample) []const Process {
-        return self.rows[0..self.row_count];
-    }
-};
-
-/// Parse whole `ps axo pid=,pcpu=,pmem=,rss=,etime=,comm=` output.
-/// Keeps the top-`max_rows` rows by CPU: while the buffer is full each new
-/// row replaces the current minimum only if it burns more CPU, so the
-/// selection is exact regardless of ps output order.
-pub fn parsePs(bytes: []const u8) PsSample {
-    var sample = PsSample{};
-    var lines = std.mem.splitScalar(u8, bytes, '\n');
-    while (lines.next()) |line| {
-        const trimmed = std.mem.trim(u8, line, " \t\r");
-        if (trimmed.len == 0) continue;
-        const row = parsePsLine(trimmed) orelse {
-            sample.skipped_lines += 1;
-            continue;
-        };
-        sample.process_count += 1;
-        sample.cpu_sum += row.process.cpu;
-        if (row.process.pid == 1) sample.uptime_seconds = row.etime_seconds;
-        insertTopRow(&sample, row.process);
-    }
-    return sample;
-}
-
-const ParsedRow = struct {
-    process: Process,
-    etime_seconds: u64,
-};
-
-/// One ps row: five numeric columns, then `comm` as the untokenized rest
-/// of the line (command paths may contain spaces — "Software Update.app").
-fn parsePsLine(line: []const u8) ?ParsedRow {
-    var tokens = std.mem.tokenizeAny(u8, line, " \t");
-    const pid_text = tokens.next() orelse return null;
-    const cpu_text = tokens.next() orelse return null;
-    const mem_text = tokens.next() orelse return null;
-    const rss_text = tokens.next() orelse return null;
-    const etime_text = tokens.next() orelse return null;
-    const command = std.mem.trim(u8, line[tokens.index..], " \t");
-    if (command.len == 0) return null;
-
-    const pid = std.fmt.parseInt(u32, pid_text, 10) catch return null;
-    const cpu = std.fmt.parseFloat(f32, cpu_text) catch return null;
-    const mem = std.fmt.parseFloat(f32, mem_text) catch return null;
-    const rss_kb = std.fmt.parseInt(u64, rss_text, 10) catch return null;
-    const etime_seconds = parseEtime(etime_text) orelse return null;
-
-    var process = Process{
-        .pid = pid,
-        .cpu = cpu,
-        .mem = mem,
-        .rss_kb = rss_kb,
-        .name_storage = undefined,
-        .name_len = 0,
-    };
-    const base = basename(command);
-    process.name_len = @min(base.len, max_name_bytes);
-    @memcpy(process.name_storage[0..process.name_len], base[0..process.name_len]);
-    return .{ .process = process, .etime_seconds = etime_seconds };
-}
-
-fn insertTopRow(sample: *PsSample, process: Process) void {
-    if (sample.row_count < max_rows) {
-        sample.rows[sample.row_count] = process;
-        sample.row_count += 1;
-        return;
-    }
-    var min_index: usize = 0;
-    for (sample.rows[1..], 1..) |row, index| {
-        if (row.cpu < sample.rows[min_index].cpu) min_index = index;
-    }
-    if (process.cpu > sample.rows[min_index].cpu) sample.rows[min_index] = process;
-}
-
-/// `ps` elapsed time: `MM:SS`, `HH:MM:SS`, or `D-HH:MM:SS` (days can be
-/// multi-digit). Returns seconds.
-pub fn parseEtime(text: []const u8) ?u64 {
-    var days: u64 = 0;
-    var clock = text;
-    if (std.mem.indexOfScalar(u8, text, '-')) |dash| {
-        days = std.fmt.parseInt(u64, text[0..dash], 10) catch return null;
-        clock = text[dash + 1 ..];
-    }
-    var parts: [3]u64 = undefined;
-    var count: usize = 0;
-    var it = std.mem.splitScalar(u8, clock, ':');
-    while (it.next()) |part| {
-        if (count >= 3) return null;
-        parts[count] = std.fmt.parseInt(u64, part, 10) catch return null;
-        count += 1;
-    }
-    const clock_seconds = switch (count) {
-        2 => parts[0] * 60 + parts[1],
-        3 => parts[0] * 3600 + parts[1] * 60 + parts[2],
-        else => return null,
-    };
-    return days * 86_400 + clock_seconds;
-}
-
-pub fn basename(path: []const u8) []const u8 {
-    if (std.mem.lastIndexOfScalar(u8, path, '/')) |index| {
-        if (index + 1 < path.len) return path[index + 1 ..];
-    }
-    return path;
-}
-
-// --------------------------------------------------------------- memory
-
-pub const MemSample = struct {
-    /// Bytes in use. macOS counts active + wired + compressor-occupied
-    /// pages (the "used" a person means: what is not reclaimable for
-    /// free); Linux counts MemTotal - MemAvailable (the kernel's own
-    /// availability estimate).
-    used_bytes: u64 = 0,
-    /// Total physical memory when the sample itself carries it
-    /// (/proc/meminfo does; vm_stat does not — macOS totals come from the
-    /// boot-time `hw.memsize` read). 0 = not in this sample.
-    total_bytes: u64 = 0,
-};
-
-pub fn parseMemory(bytes: []const u8) ?MemSample {
-    return switch (builtin.os.tag) {
-        .macos => parseVmStat(bytes),
-        else => parseMeminfo(bytes),
-    };
-}
-
-/// macOS `vm_stat`: page counts at a page size declared on the banner
-/// line. Used = active + wired down + occupied by compressor.
-pub fn parseVmStat(bytes: []const u8) ?MemSample {
-    var page_size: u64 = 0;
-    var active: ?u64 = null;
-    var wired: ?u64 = null;
-    var compressor: ?u64 = null;
-    var lines = std.mem.splitScalar(u8, bytes, '\n');
-    while (lines.next()) |line| {
-        if (std.mem.indexOf(u8, line, "page size of ")) |index| {
-            const rest = line[index + "page size of ".len ..];
-            const end = std.mem.indexOfScalar(u8, rest, ' ') orelse rest.len;
-            page_size = std.fmt.parseInt(u64, rest[0..end], 10) catch 0;
-        } else if (std.mem.startsWith(u8, line, "Pages active:")) {
-            active = trailingCount(line);
-        } else if (std.mem.startsWith(u8, line, "Pages wired down:")) {
-            wired = trailingCount(line);
-        } else if (std.mem.startsWith(u8, line, "Pages occupied by compressor:")) {
-            compressor = trailingCount(line);
-        }
-    }
-    if (page_size == 0) return null;
-    const pages = (active orelse return null) + (wired orelse return null) + (compressor orelse return null);
-    return .{ .used_bytes = pages * page_size };
-}
-
-/// The trailing integer of a `Pages active:   794612.` line.
-fn trailingCount(line: []const u8) ?u64 {
-    const trimmed = std.mem.trimEnd(u8, std.mem.trim(u8, line, " \t\r"), ".");
-    const start = std.mem.lastIndexOfAny(u8, trimmed, " \t") orelse return null;
-    return std.fmt.parseInt(u64, trimmed[start + 1 ..], 10) catch null;
-}
-
-/// Linux `/proc/meminfo`: `MemTotal:` and `MemAvailable:` in kB.
-pub fn parseMeminfo(bytes: []const u8) ?MemSample {
-    const total_kb = meminfoField(bytes, "MemTotal:") orelse return null;
-    const available_kb = meminfoField(bytes, "MemAvailable:") orelse return null;
-    if (available_kb > total_kb) return null;
-    return .{
-        .used_bytes = (total_kb - available_kb) * 1024,
-        .total_bytes = total_kb * 1024,
-    };
-}
-
-fn meminfoField(bytes: []const u8, key: []const u8) ?u64 {
-    var lines = std.mem.splitScalar(u8, bytes, '\n');
-    while (lines.next()) |line| {
-        if (!std.mem.startsWith(u8, line, key)) continue;
-        var tokens = std.mem.tokenizeAny(u8, line[key.len..], " \t");
-        const value = tokens.next() orelse return null;
-        return std.fmt.parseInt(u64, value, 10) catch null;
-    }
-    return null;
-}
-
-// ------------------------------------------------------------ host info
-
-pub const HostInfo = struct {
-    cores: u32 = 0,
-    /// Total physical memory; 0 on Linux (totals ride every meminfo
-    /// sample instead).
-    memory_bytes: u64 = 0,
-};
-
-/// macOS: two lines (`hw.ncpu`, `hw.memsize`). Linux: one line (`nproc`).
-pub fn parseHostInfo(bytes: []const u8) ?HostInfo {
-    var lines = std.mem.tokenizeAny(u8, bytes, "\r\n");
-    const cores_text = lines.next() orelse return null;
-    const cores = std.fmt.parseInt(u32, std.mem.trim(u8, cores_text, " \t"), 10) catch return null;
-    if (cores == 0) return null;
-    var info = HostInfo{ .cores = cores };
-    if (builtin.os.tag == .macos) {
-        const mem_text = lines.next() orelse return null;
-        info.memory_bytes = std.fmt.parseInt(u64, std.mem.trim(u8, mem_text, " \t"), 10) catch return null;
-    }
-    return info;
-}
diff --git a/examples/system-monitor/src/spark_cpu.native b/examples/system-monitor/src/spark_cpu.native
deleted file mode 100644
index 3540c12ac..000000000
--- a/examples/system-monitor/src/spark_cpu.native
+++ /dev/null
@@ -1,8 +0,0 @@
-<!-- The CPU sparkline: zero-baseline bars pinned to the absolute 0..1
-     domain (percent of all cores). The 239x32 box is the tile plot
-     geometry (view.zig's spark_width/spark_height constants); the
-     values binding is the model's NaN-padded 60-sample window, so a
-     filling history enters from the right edge. -->
-<chart width="239" height="32" y-min="0" y-max="1" label="CPU history">
-  <series kind="bar" values="{cpuSpark}" />
-</chart>
diff --git a/examples/system-monitor/src/spark_mem.native b/examples/system-monitor/src/spark_mem.native
deleted file mode 100644
index 04df53643..000000000
--- a/examples/system-monitor/src/spark_mem.native
+++ /dev/null
@@ -1,6 +0,0 @@
-<!-- The memory sparkline: zero-baseline bars pinned to the absolute
-     0..1 domain (fraction of total memory), same plot box as the CPU
-     tile. -->
-<chart width="239" height="32" y-min="0" y-max="1" label="Memory history">
-  <series kind="bar" values="{memSpark}" />
-</chart>
diff --git a/examples/system-monitor/src/spark_proc.native b/examples/system-monitor/src/spark_proc.native
deleted file mode 100644
index a36869a29..000000000
--- a/examples/system-monitor/src/spark_proc.native
+++ /dev/null
@@ -1,7 +0,0 @@
-<!-- The process-count sparkline: a filled line against the chart's auto
-     domain (the window's own min..max). Counts have no natural ceiling
-     and barely move, so an absolute scale would draw a featureless
-     block; the window band reads like a scope trace instead. -->
-<chart width="239" height="32" label="Processes history">
-  <series kind="area" values="{procSpark}" />
-</chart>
diff --git a/examples/system-monitor-ts/src/table.ts b/examples/system-monitor/src/table.ts
similarity index 98%
rename from examples/system-monitor-ts/src/table.ts
rename to examples/system-monitor/src/table.ts
index c345be69f..11443e718 100644
--- a/examples/system-monitor-ts/src/table.ts
+++ b/examples/system-monitor/src/table.ts
@@ -1,4 +1,4 @@
-// system-monitor-ts table module: the process table's pure presentation
+// system-monitor table module: the process table's pure presentation
 // tier — search matching, the sort order, and the row formatting the
 // markup cells bind. core.ts's exported binding helpers (`visibleRows`,
 // `matchCount`) stay thin wrappers over these (the binding surface lives
diff --git a/examples/system-monitor/src/tests.zig b/examples/system-monitor/src/tests.zig
deleted file mode 100644
index c15ece4bf..000000000
--- a/examples/system-monitor/src/tests.zig
+++ /dev/null
@@ -1,1325 +0,0 @@
-//! system-monitor tests: fixture-based parsers against committed real
-//! command output, the whole sampling loop through the fake effects
-//! executor (repeating timer, collect-mode spawns, in-flight tick
-//! skipping, pause/resume), TestClock-driven sample timestamps and the
-//! 60-sample history ring, sort/search/kill flows through typed tree
-//! dispatch, theming, markup engine parity, automation snapshot
-//! assertions, and the precision tile layout.
-
-const std = @import("std");
-const native_sdk = @import("native_sdk");
-const main = @import("main.zig");
-const model_mod = @import("model.zig");
-const sampler = @import("sampler.zig");
-const theme = @import("theme.zig");
-const view_mod = @import("view.zig");
-
-const canvas = native_sdk.canvas;
-const geometry = native_sdk.geometry;
-const testing = std.testing;
-const builtin = @import("builtin");
-
-const Model = main.Model;
-const Msg = main.Msg;
-const Ui = view_mod.Ui;
-const App = main.MonitorApp;
-
-const ps_fixture = @embedFile("fixtures/ps.txt");
-const ps_edge_fixture = @embedFile("fixtures/ps-edge.txt");
-const vm_stat_fixture = @embedFile("fixtures/vm_stat.txt");
-const sysctl_fixture = @embedFile("fixtures/sysctl.txt");
-
-// Facts about the committed real capture (see fixtures/README note in the
-// example README): 561 system rows, pid 1 at 02:49:06, %cpu summing 45.7.
-const fixture_process_count = 561;
-const fixture_uptime_seconds: u64 = 2 * 3600 + 49 * 60 + 6;
-const fixture_cpu_sum: f32 = 45.7;
-// vm_stat capture: (794612 active + 136740 wired + 58043 compressor)
-// pages of 16384 bytes.
-const fixture_mem_used: u64 = (794_612 + 136_740 + 58_043) * 16_384;
-const fixture_mem_total: u64 = 34_359_738_368;
-const fixture_cores: u32 = 10;
-
-// ------------------------------------------------------------- tree utils
-
-fn buildTree(arena: std.mem.Allocator, model: *const Model) !Ui.Tree {
-    var ui = Ui.init(arena);
-    return ui.finalizeWithTokens(view_mod.rootView(&ui, model), main.tokensFromModel(model));
-}
-
-fn findByText(widget: canvas.Widget, kind: canvas.WidgetKind, text: []const u8) ?canvas.Widget {
-    if (widget.kind == kind and std.mem.eql(u8, widget.text, text)) return widget;
-    for (widget.children) |child| {
-        if (findByText(child, kind, text)) |found| return found;
-    }
-    return null;
-}
-
-fn findByKind(widget: canvas.Widget, kind: canvas.WidgetKind) ?canvas.Widget {
-    if (widget.kind == kind) return widget;
-    for (widget.children) |child| {
-        if (findByKind(child, kind)) |found| return found;
-    }
-    return null;
-}
-
-fn findByLabel(widget: canvas.Widget, label: []const u8) ?canvas.Widget {
-    if (std.mem.eql(u8, widget.semantics.label, label)) return widget;
-    for (widget.children) |child| {
-        if (findByLabel(child, label)) |found| return found;
-    }
-    return null;
-}
-
-fn findTextContaining(widget: canvas.Widget, needle: []const u8) ?canvas.Widget {
-    if (widget.kind == .text and std.mem.indexOf(u8, widget.text, needle) != null) return widget;
-    for (widget.children) |child| {
-        if (findTextContaining(child, needle)) |found| return found;
-    }
-    return null;
-}
-
-fn countListItems(widget: canvas.Widget) usize {
-    var total: usize = 0;
-    // Process rows are table rows on the table register (the header
-    // data_row carries no per-process label, so exclude it by kind+label).
-    if (widget.kind == .data_row and widget.semantics.label.len > 0) total += 1;
-    for (widget.children) |child| total += countListItems(child);
-    return total;
-}
-
-// -------------------------------------------------------------- fixtures
-
-test "parsePs digests the committed real ps capture" {
-    const sample = sampler.parsePs(ps_fixture);
-    try testing.expectEqual(@as(u32, fixture_process_count), sample.process_count);
-    try testing.expectEqual(@as(u32, 0), sample.skipped_lines);
-    try testing.expectEqual(fixture_uptime_seconds, sample.uptime_seconds);
-    try testing.expectApproxEqAbs(fixture_cpu_sum, sample.cpu_sum, 0.05);
-
-    // Top-K selection is exact: every kept row burns at least as much CPU
-    // as every dropped one, which for this capture means the minimum kept
-    // value is the K-th highest overall — and pid 1 parsed cleanly.
-    try testing.expectEqual(@as(usize, sampler.max_rows), sample.row_count);
-    var kept_min: f32 = std.math.floatMax(f32);
-    for (sample.topRows()) |row| kept_min = @min(kept_min, row.cpu);
-    var above_or_equal: usize = 0;
-    var lines = std.mem.splitScalar(u8, ps_fixture, '\n');
-    while (lines.next()) |line| {
-        var tokens = std.mem.tokenizeAny(u8, line, " \t");
-        _ = tokens.next() orelse continue;
-        const cpu_text = tokens.next() orelse continue;
-        const cpu = std.fmt.parseFloat(f32, cpu_text) catch continue;
-        if (cpu >= kept_min) above_or_equal += 1;
-    }
-    try testing.expect(above_or_equal >= sampler.max_rows);
-}
-
-test "parsePs edge cases: day etimes, spaces in comm, garbage lines" {
-    const sample = sampler.parsePs(ps_edge_fixture);
-    try testing.expectEqual(@as(u32, 5), sample.process_count);
-    try testing.expectEqual(@as(u32, 1), sample.skipped_lines);
-    // pid 1 with a day-form etime: 3 days + 02:49:06.
-    try testing.expectEqual(@as(u64, 3 * 86_400 + fixture_uptime_seconds), sample.uptime_seconds);
-    try testing.expectApproxEqAbs(@as(f32, 102.9), sample.cpu_sum, 0.01);
-
-    var names: [8][]const u8 = undefined;
-    var count: usize = 0;
-    for (sample.topRows()) |*row| {
-        names[count] = row.name();
-        count += 1;
-    }
-    try testing.expectEqual(@as(usize, 5), count);
-    // comm is the untokenized rest of the line: paths with spaces keep
-    // their basename, un-pathed names keep their spaces whole.
-    try testing.expect(containsName(names[0..count], "suhelperd"));
-    try testing.expect(containsName(names[0..count], "Core Audio Driver (Example.driver)"));
-    try testing.expect(containsName(names[0..count], "renderfarm-worker"));
-}
-
-fn containsName(names: []const []const u8, wanted: []const u8) bool {
-    for (names) |name| {
-        if (std.mem.eql(u8, name, wanted)) return true;
-    }
-    return false;
-}
-
-test "top-K keeps the highest-CPU rows regardless of output order" {
-    // 200 synthetic rows with ascending cpu (0.0 .. 19.9): the kept set
-    // must be exactly the last 128 (cpu >= 7.2).
-    var buffer: [200 * 48]u8 = undefined;
-    var len: usize = 0;
-    for (0..200) |index| {
-        const line = std.fmt.bufPrint(buffer[len..], "  {d}  {d:.1}  0.0  100 01:00 /bin/worker-{d}\n", .{
-            index + 2, @as(f32, @floatFromInt(index)) / 10.0, index,
-        }) catch unreachable;
-        len += line.len;
-    }
-    const sample = sampler.parsePs(buffer[0..len]);
-    try testing.expectEqual(@as(u32, 200), sample.process_count);
-    try testing.expectEqual(@as(usize, sampler.max_rows), sample.row_count);
-    for (sample.topRows()) |row| {
-        try testing.expect(row.cpu >= 7.2 - 0.001);
-    }
-}
-
-test "parseEtime handles every ps elapsed-time form" {
-    try testing.expectEqual(@as(?u64, 42), sampler.parseEtime("00:42"));
-    try testing.expectEqual(@as(?u64, 3723), sampler.parseEtime("1:02:03"));
-    try testing.expectEqual(@as(?u64, 86_400 + 1), sampler.parseEtime("1-00:00:01"));
-    try testing.expectEqual(@as(?u64, 12 * 86_400 + 23 * 3600 + 59 * 60 + 59), sampler.parseEtime("12-23:59:59"));
-    try testing.expectEqual(@as(?u64, null), sampler.parseEtime("nonsense"));
-    try testing.expectEqual(@as(?u64, null), sampler.parseEtime("1:2:3:4"));
-}
-
-test "parseVmStat computes used bytes from the committed real capture" {
-    const sample = sampler.parseVmStat(vm_stat_fixture).?;
-    try testing.expectEqual(fixture_mem_used, sample.used_bytes);
-    try testing.expectEqual(@as(u64, 0), sample.total_bytes);
-    try testing.expect(sampler.parseVmStat("no banner here") == null);
-}
-
-test "parseMeminfo reads totals and availability (Linux path, pure)" {
-    // Constructed in /proc/meminfo's documented shape (no Linux capture
-    // machine here — stated honestly in the README).
-    const meminfo =
-        \\MemTotal:       16323412 kB
-        \\MemFree:         1250840 kB
-        \\MemAvailable:    9034612 kB
-        \\Buffers:          422044 kB
-    ;
-    const sample = sampler.parseMeminfo(meminfo).?;
-    try testing.expectEqual(@as(u64, 16_323_412 * 1024), sample.total_bytes);
-    try testing.expectEqual(@as(u64, (16_323_412 - 9_034_612) * 1024), sample.used_bytes);
-    try testing.expect(sampler.parseMeminfo("MemTotal: 10 kB") == null);
-}
-
-test "parseHostInfo reads the committed sysctl capture" {
-    if (builtin.os.tag != .macos) return error.SkipZigTest;
-    const info = sampler.parseHostInfo(sysctl_fixture).?;
-    try testing.expectEqual(fixture_cores, info.cores);
-    try testing.expectEqual(fixture_mem_total, info.memory_bytes);
-}
-
-// -------------------------------------------------------------- app utils
-
-const surface_size = geometry.SizeF.init(main.window_width, main.window_height);
-
-const LiveApp = struct {
-    harness: *native_sdk.TestHarness(),
-    app_state: *App,
-    app: native_sdk.App,
-
-    fn start() !LiveApp {
-        const harness = try native_sdk.TestHarness().create(testing.allocator, .{ .size = surface_size });
-        errdefer harness.destroy(testing.allocator);
-        harness.null_platform.gpu_surfaces = true;
-
-        const app_state = try testing.allocator.create(App);
-        errdefer testing.allocator.destroy(app_state);
-        app_state.* = App.init(std.heap.page_allocator, .{}, main.monitorOptions());
-        app_state.effects.executor = .fake;
-        const app = app_state.app();
-        try harness.start(app);
-        try harness.runtime.dispatchPlatformEvent(app, .{ .gpu_surface_frame = .{
-            .label = main.canvas_label,
-            .size = surface_size,
-            .scale_factor = 1,
-            .frame_index = 1,
-            .timestamp_ns = 1_000_000,
-            .nonblank = true,
-        } });
-        return .{ .harness = harness, .app_state = app_state, .app = app };
-    }
-
-    fn stop(self: LiveApp) void {
-        self.app_state.deinit();
-        testing.allocator.destroy(self.app_state);
-        self.harness.destroy(testing.allocator);
-    }
-
-    fn dispatch(self: LiveApp, msg: Msg) !void {
-        try self.app_state.dispatch(&self.harness.runtime, 1, msg);
-    }
-
-    fn wake(self: LiveApp) !void {
-        try self.harness.runtime.dispatchPlatformEvent(self.app, .wake);
-    }
-
-    /// Feed one collect spawn's whole stdout and exit 0, then drain.
-    fn finishSpawn(self: LiveApp, key: u64, output: []const u8) !void {
-        try self.app_state.effects.feedLine(key, output);
-        try self.app_state.effects.feedExit(key, 0);
-        try self.wake();
-    }
-
-    fn spawnByKey(self: LiveApp, key: u64) ?model_mod.Effects.SpawnRequest {
-        var index: usize = 0;
-        while (self.app_state.effects.pendingSpawnAt(index)) |request| : (index += 1) {
-            if (request.key == key) return request;
-        }
-        return null;
-    }
-};
-
-/// Update with a throwaway fake effects channel for pure model tests.
-fn apply(model: *Model, msg: Msg) void {
-    var fx = model_mod.Effects.init(testing.allocator);
-    defer fx.deinit();
-    fx.executor = .fake;
-    main.update(model, msg, &fx);
-}
-
-// --------------------------------------------------------------- sampling
-
-test "boot arms the sampler: host info, the repeating timer, an eager sample" {
-    if (!sampler.supported) return error.SkipZigTest;
-    const live = try LiveApp.start();
-    defer live.stop();
-    const effects = &live.app_state.effects;
-
-    // The repeating 2 s timer and all three collect spawns are requested.
-    const timer = effects.pendingTimerAt(0).?;
-    try testing.expectEqual(model_mod.sample_timer_key, timer.key);
-    try testing.expectEqual(@as(u64, model_mod.sample_interval_ms), timer.interval_ms);
-
-    const info = live.spawnByKey(model_mod.info_key).?;
-    try testing.expectEqual(canvas_collect, info.output);
-    const ps = live.spawnByKey(model_mod.ps_key).?;
-    try testing.expectEqualStrings("/bin/ps", ps.argv[0]);
-    try testing.expectEqualStrings("axo", ps.argv[1]);
-    try testing.expect(live.spawnByKey(model_mod.mem_key) != null);
-    try testing.expect(live.app_state.model.ps_inflight);
-    try testing.expect(live.app_state.model.mem_inflight);
-}
-
-const canvas_collect = native_sdk.EffectOutputMode.collect;
-
-test "a full sample lands: fixtures through the collect exits, TestClock timestamps" {
-    if (builtin.os.tag != .macos) return error.SkipZigTest;
-    const live = try LiveApp.start();
-    defer live.stop();
-    const model = &live.app_state.model;
-
-    var test_clock = native_sdk.TestClock{};
-    test_clock.setWallMs(1_000_000); // 00:16:40 UTC
-    live.app_state.effects.clock = test_clock.clock();
-
-    // Host info first so the CPU figure normalizes by real cores.
-    try live.finishSpawn(model_mod.info_key, sysctl_fixture);
-    try testing.expectEqual(fixture_cores, model.cores);
-    try testing.expectEqual(fixture_mem_total, model.mem_total_bytes);
-
-    try live.finishSpawn(model_mod.ps_key, ps_fixture);
-    try testing.expectEqual(@as(u32, fixture_process_count), model.process_count);
-    try testing.expectEqual(fixture_uptime_seconds, model.uptime_seconds);
-    try testing.expectApproxEqAbs(fixture_cpu_sum / @as(f32, fixture_cores), model.cpu_percent, 0.05);
-    try testing.expectEqual(@as(i64, 1_000_000), model.sampled_at_ms);
-    try testing.expectEqual(@as(usize, 1), model.cpu_history_len);
-    try testing.expectEqual(@as(usize, 1), model.proc_history_len);
-    try testing.expect(!model.ps_inflight);
-
-    try live.finishSpawn(model_mod.mem_key, vm_stat_fixture);
-    try testing.expectEqual(fixture_mem_used, model.mem_used_bytes);
-    try testing.expectApproxEqAbs(@as(f32, 0.4718), model.memFraction(), 0.001);
-    try testing.expectEqual(@as(usize, 1), model.mem_history_len);
-
-    // The status line derives the facts, including the TestClock stamp.
-    var arena_state = std.heap.ArenaAllocator.init(testing.allocator);
-    defer arena_state.deinit();
-    const status = model.statusLine(arena_state.allocator());
-    try testing.expect(std.mem.indexOf(u8, status, "561 processes") != null);
-    // The stamp SAYS it is UTC: the journaled clock is epoch time, and a
-    // local render would need a journaled tz channel to stay replayable.
-    try testing.expect(std.mem.indexOf(u8, status, "sampled at 00:16:40 UTC") != null);
-
-    // The next tick spawns a fresh pair; a tick while they are in flight
-    // is skipped and counted, never overlapped.
-    try live.app_state.effects.fireTimer(model_mod.sample_timer_key);
-    try live.wake();
-    try testing.expect(model.ps_inflight);
-    try testing.expect(live.spawnByKey(model_mod.ps_key) != null);
-    try testing.expect(live.spawnByKey(model_mod.mem_key) != null);
-    try live.app_state.effects.fireTimer(model_mod.sample_timer_key);
-    try live.wake();
-    try testing.expectEqual(@as(u32, 1), model.ticks_skipped);
-}
-
-test "pause cancels the repeating timer; resume re-arms and samples eagerly" {
-    if (!sampler.supported) return error.SkipZigTest;
-    const live = try LiveApp.start();
-    defer live.stop();
-    const model = &live.app_state.model;
-    const effects = &live.app_state.effects;
-
-    try testing.expect(model.sampling());
-    try live.dispatch(.toggle_sampling);
-    try testing.expect(model.paused);
-    try testing.expectEqual(@as(usize, 0), effects.pendingTimerCount());
-    try testing.expectError(error.EffectNotFound, effects.fireTimer(model_mod.sample_timer_key));
-
-    // Resume: the timer re-arms (start on an active key replaces in
-    // place) and an eager sample is requested — here the boot spawns are
-    // still in flight, so it lands as a counted skip instead of overlap.
-    try live.dispatch(.toggle_sampling);
-    try testing.expect(!model.paused);
-    try testing.expectEqual(@as(usize, 1), effects.pendingTimerCount());
-    try testing.expectEqual(@as(u32, 1), model.ticks_skipped);
-}
-
-test "the history ring holds exactly 60 samples, oldest shifted out" {
-    var model = Model{};
-    model.cores = 1;
-    var fx = model_mod.Effects.init(testing.allocator);
-    defer fx.deinit();
-    fx.executor = .fake;
-
-    for (0..model_mod.history_len + 5) |index| {
-        var line_buffer: [64]u8 = undefined;
-        const output = std.fmt.bufPrint(&line_buffer, "  1  {d}.0  0.1  100 00:10 /sbin/launchd", .{index % 90}) catch unreachable;
-        main.update(&model, .{ .ps_done = .{ .key = model_mod.ps_key, .code = 0, .output = output } }, &fx);
-    }
-    try testing.expectEqual(@as(usize, model_mod.history_len), model.cpu_history_len);
-    try testing.expectEqual(@as(u32, model_mod.history_len + 5), model.samples_taken);
-    // Oldest first: sample #5 (cpu 5%) now leads; the newest is #64.
-    try testing.expectApproxEqAbs(@as(f32, 0.05), model.cpu_history[0], 0.0001);
-    try testing.expectApproxEqAbs(@as(f32, 64.0 / 100.0), model.cpu_history[model_mod.history_len - 1], 0.0001);
-
-    // The sparkline is ONE chart widget over the full sample window
-    // (the pre-primitive design was sixty bar widgets): a zero-baseline
-    // bar series pinned to the 0..1 core-fraction domain, padded with
-    // leading NaN while the ring fills so the trace enters from the
-    // right.
-    var arena_state = std.heap.ArenaAllocator.init(testing.allocator);
-    defer arena_state.deinit();
-    const tree = try buildTree(arena_state.allocator(), &model);
-    const chart = findByLabel(tree.root, "CPU history").?;
-    try testing.expectEqual(@as(usize, 0), chart.children.len);
-    try testing.expectEqual(@as(usize, 1), chart.chart.series.len);
-    try testing.expectEqual(native_sdk.canvas.ChartSeriesKind.bar, chart.chart.series[0].kind);
-    try testing.expectEqual(@as(usize, model_mod.history_len), chart.chart.series[0].values.len);
-    try testing.expectEqual(@as(?f32, 0), chart.chart.y_min);
-    try testing.expectEqual(@as(?f32, 1), chart.chart.y_max);
-    // Newest sample at the right edge; a full ring has no NaN padding.
-    try testing.expectApproxEqAbs(@as(f32, 64.0 / 100.0), chart.chart.series[0].values[model_mod.history_len - 1], 0.0001);
-    try testing.expectApproxEqAbs(@as(f32, 0.05), chart.chart.series[0].values[0], 0.0001);
-}
-
-test "a filling history ring pads the sparkline with leading missing samples" {
-    var model = Model{};
-    model.cores = 1;
-    var fx = model_mod.Effects.init(testing.allocator);
-    defer fx.deinit();
-    fx.executor = .fake;
-    for (0..5) |_| {
-        main.update(&model, .{ .ps_done = .{ .key = model_mod.ps_key, .code = 0, .output = "  1  50.0  0.1  100 00:10 /sbin/launchd" } }, &fx);
-    }
-
-    var arena_state = std.heap.ArenaAllocator.init(testing.allocator);
-    defer arena_state.deinit();
-    const tree = try buildTree(arena_state.allocator(), &model);
-    const chart = findByLabel(tree.root, "CPU history").?;
-    const values = chart.chart.series[0].values;
-    try testing.expectEqual(@as(usize, model_mod.history_len), values.len);
-    // Leading slots are NaN (drawn as nothing), the 5 real samples sit at
-    // the right edge — the scope-trace entry the bar design had.
-    try testing.expect(std.math.isNan(values[0]));
-    try testing.expect(std.math.isNan(values[model_mod.history_len - 6]));
-    try testing.expectApproxEqAbs(@as(f32, 0.5), values[model_mod.history_len - 1], 0.0001);
-}
-
-// ----------------------------------------------------------- table logic
-
-fn edgeModel() Model {
-    var model = Model{};
-    model.cores = 4;
-    apply(&model, .{ .ps_done = .{ .key = model_mod.ps_key, .code = 0, .output = ps_edge_fixture } });
-    return model;
-}
-
-test "sort toggles switch keys and flip direction through the widget path" {
-    var arena_state = std.heap.ArenaAllocator.init(testing.allocator);
-    defer arena_state.deinit();
-    const arena = arena_state.allocator();
-    var model = edgeModel();
-
-    // Default: CPU descending — the busiest process leads.
-    var rows = model.visibleRows(arena);
-    try testing.expectEqualStrings("renderfarm-worker", rows[0].name);
-
-    // Press the active CPU chip: direction flips to ascending.
-    var tree = try buildTree(arena, &model);
-    const cpu_chip = findByText(tree.root, .toggle_button, "CPU").?;
-    apply(&model, tree.msgFor(cpu_chip.id, .toggle).?);
-    try testing.expect(!model.sort_descending);
-    rows = model.visibleRows(arena);
-    try testing.expectEqualStrings("0.0", rows[0].cpu_text);
-
-    // Press Name: a fresh key starts in its natural direction (a-to-z).
-    tree = try buildTree(arena, &model);
-    const name_chip = findByText(tree.root, .toggle_button, "Name").?;
-    apply(&model, tree.msgFor(name_chip.id, .toggle).?);
-    try testing.expectEqual(model_mod.SortKey.name, model.sort_key);
-    try testing.expect(!model.sort_descending);
-    rows = model.visibleRows(arena);
-    try testing.expectEqualStrings("Core Audio Driver (Example.driver)", rows[0].name);
-
-    // Memory sorts by resident size, biggest first.
-    apply(&model, .{ .set_sort = .mem });
-    try testing.expect(model.sort_descending);
-    rows = model.visibleRows(arena);
-    try testing.expectEqualStrings("renderfarm-worker", rows[0].name);
-
-    // PID ascending puts launchd first.
-    apply(&model, .{ .set_sort = .pid });
-    rows = model.visibleRows(arena);
-    try testing.expectEqualStrings("1", rows[0].pid_text);
-}
-
-test "search filters by name and pid through typed dispatch" {
-    var arena_state = std.heap.ArenaAllocator.init(testing.allocator);
-    defer arena_state.deinit();
-    const arena = arena_state.allocator();
-    var model = edgeModel();
-
-    var tree = try buildTree(arena, &model);
-    try testing.expectEqual(@as(usize, 5), countListItems(tree.root));
-
-    // Type into the filter field: the edit dispatches through on_input.
-    const field = findByKind(tree.root, .search_field).?;
-    apply(&model, tree.msgForTextEdit(field.id, .{ .insert_text = "render" }).?);
-    try testing.expectEqualStrings("render", model.search());
-    tree = try buildTree(arena, &model);
-    try testing.expectEqual(@as(usize, 1), countListItems(tree.root));
-
-    // Digits match pids: "204" hits 1204 and 2048.
-    model.search_buffer = canvas.TextBuffer(model_mod.max_search).init("204");
-    try testing.expectEqual(@as(usize, 2), model.matchCount(arena));
-
-    // Clear restores everything. The filter field carries the BUILT-IN
-    // trailing clear affordance (no external chip): the press stamps a
-    // `.clear` edit through the same on-input channel keystrokes use.
-    tree = try buildTree(arena, &model);
-    const searching_field = findByKind(tree.root, .search_field).?;
-    apply(&model, tree.msgForTextEdit(searching_field.id, .clear).?);
-    try testing.expectEqualStrings("", model.search());
-    tree = try buildTree(arena, &model);
-    try testing.expectEqual(@as(usize, 5), countListItems(tree.root));
-    try testing.expect(findByLabel(tree.root, "Clear filter") == null);
-
-    // No matches renders the empty state instead of a list, and it
-    // states its honest scope: search only sees the top-K-by-CPU
-    // selection the sampler keeps.
-    model.search_buffer = canvas.TextBuffer(model_mod.max_search).init("zzzz");
-    tree = try buildTree(arena, &model);
-    try testing.expectEqual(@as(usize, 0), countListItems(tree.root));
-    try testing.expect(findByLabel(tree.root, "No processes match") != null);
-    const hint = try std.fmt.allocPrint(arena, "Search sees the top {d} processes by CPU — filter matches command names and pids.", .{sampler.max_rows});
-    try testing.expect(findByText(tree.root, .text, hint) != null);
-}
-
-test "the process rows are table rows and the table scroll is controlled" {
-    var arena_state = std.heap.ArenaAllocator.init(testing.allocator);
-    defer arena_state.deinit();
-    const arena = arena_state.allocator();
-    var model = edgeModel();
-
-    // Rows are real table rows (data_row > data_cell): the engine owns
-    // the chrome — full-width hover wash, hairline separators, no
-    // per-row card boxes.
-    var tree = try buildTree(arena, &model);
-    const row = findByLabel(tree.root, "renderfarm-worker pid 842").?;
-    try testing.expectEqual(canvas.WidgetKind.data_row, row.kind);
-    try testing.expect(findByText(row, .data_cell, "renderfarm-worker") != null);
-
-    // The scroll echoes the model-owned offset: the applied offset lands
-    // in the model and the next build carries it.
-    apply(&model, .{ .table_scrolled = .{ .offset_y = 66 } });
-    try testing.expectEqual(@as(f32, 66), model.table_scroll);
-    tree = try buildTree(arena, &model);
-    const scroll = findByKind(tree.root, .scroll_view).?;
-    try testing.expectEqual(@as(f32, 66), scroll.value);
-}
-
-// -------------------------------------------------------------- kill flow
-
-test "terminate flows context menu -> confirmation -> /bin/kill -TERM" {
-    var arena_state = std.heap.ArenaAllocator.init(testing.allocator);
-    defer arena_state.deinit();
-    const arena = arena_state.allocator();
-    var model = edgeModel();
-    var fx = model_mod.Effects.init(testing.allocator);
-    defer fx.deinit();
-    fx.executor = .fake;
-
-    // The context menu's first item opens the confirmation — never the
-    // signal directly. The separator index is inert.
-    var tree = try buildTree(arena, &model);
-    const row = findByLabel(tree.root, "renderfarm-worker pid 842").?;
-    try testing.expect(tree.msgForContextMenu(row.id, 1) == null);
-    main.update(&model, tree.msgForContextMenu(row.id, 0).?, &fx);
-    try testing.expect(model.confirmingKill());
-    try testing.expectEqual(@as(usize, 0), fx.pendingSpawnCount());
-
-    // The dialog names the process and pid; the scrim and dialog carry
-    // their labels; Cancel closes without any spawn.
-    tree = try buildTree(arena, &model);
-    try testing.expect(findByLabel(tree.root, "Confirm termination") != null);
-    try testing.expect(findByText(tree.root, .text, "renderfarm-worker (pid 842) will be asked to quit.") != null);
-    const cancel = findByText(tree.root, .button, "Cancel").?;
-    main.update(&model, tree.msgForPointer(cancel.id, .up).?, &fx);
-    try testing.expect(!model.confirmingKill());
-    try testing.expectEqual(@as(usize, 0), fx.pendingSpawnCount());
-    tree = try buildTree(arena, &model);
-    try testing.expect(findByLabel(tree.root, "Confirm termination") == null);
-
-    // Confirm: exactly `/bin/kill -TERM <pid>` — SIGTERM, nothing else.
-    main.update(&model, .{ .request_kill = 842 }, &fx);
-    tree = try buildTree(arena, &model);
-    const confirm = findByText(tree.root, .button, "Send SIGTERM").?;
-    main.update(&model, tree.msgForPointer(confirm.id, .up).?, &fx);
-    try testing.expect(!model.confirmingKill());
-    const request = fx.pendingSpawnAt(0).?;
-    try testing.expectEqual(model_mod.kill_key, request.key);
-    try testing.expectEqual(@as(usize, 3), request.argv.len);
-    try testing.expectEqualStrings("/bin/kill", request.argv[0]);
-    try testing.expectEqualStrings("-TERM", request.argv[1]);
-    try testing.expectEqualStrings("842", request.argv[2]);
-
-    // Exit outcomes land in the status note, success and failure alike.
-    try fx.feedExit(model_mod.kill_key, 0);
-    // Drain through a live-style poll is not available on a bare fx; the
-    // exit Msg is asserted through the app-level test below.
-
-    // Pressing the dialog body must NOT cancel (the press-absorber arm).
-    main.update(&model, .{ .request_kill = 842 }, &fx);
-    tree = try buildTree(arena, &model);
-    const dialog = findByKind(tree.root, .dialog).?;
-    main.update(&model, tree.msgForPointer(dialog.id, .up).?, &fx);
-    try testing.expect(model.confirmingKill());
-
-    // A pid that left the sample cannot arm the dialog.
-    model.pending_kill = null;
-    main.update(&model, .{ .request_kill = 99_999 }, &fx);
-    try testing.expect(!model.confirmingKill());
-    try testing.expect(std.mem.indexOf(u8, model.note(), "gone") != null);
-}
-
-test "kill and copy exits land as status notes through the live loop" {
-    if (!sampler.supported) return error.SkipZigTest;
-    const live = try LiveApp.start();
-    defer live.stop();
-    const model = &live.app_state.model;
-
-    // Land the eager boot sample through the live loop, so the next
-    // timer fire launches a REAL follow-up sample (the transient note
-    // below only retires with a sample launched after it).
-    try live.finishSpawn(model_mod.ps_key, ps_edge_fixture);
-    try live.finishSpawn(model_mod.mem_key, vm_stat_fixture);
-
-    try live.dispatch(.{ .request_kill = 842 });
-    try live.dispatch(.confirm_kill);
-    try testing.expect(std.mem.indexOf(u8, model.note(), "SIGTERM sent to renderfarm-worker (pid 842)") != null);
-    try live.app_state.effects.feedExit(model_mod.kill_key, 0);
-    try live.wake();
-    try testing.expect(std.mem.indexOf(u8, model.note(), "delivered") != null);
-
-    // The delivered notice is a moment, not a state: the NEXT LAUNCHED
-    // sample (whose rows are the delivery's visible consequence)
-    // retires it from the footer.
-    try live.app_state.effects.fireTimer(model_mod.sample_timer_key);
-    try live.wake();
-    try live.finishSpawn(model_mod.ps_key, ps_edge_fixture);
-    try testing.expectEqual(@as(usize, 0), model.note().len);
-    try live.finishSpawn(model_mod.mem_key, vm_stat_fixture);
-
-    // A failing kill (not your process) is a note, never fatal.
-    try live.dispatch(.{ .request_kill = 1 });
-    try live.dispatch(.confirm_kill);
-    try live.app_state.effects.feedExit(model_mod.kill_key, 1);
-    try live.wake();
-    try testing.expect(std.mem.indexOf(u8, model.note(), "kill failed") != null);
-
-    // Failure is a state worth keeping: the next launched sample does
-    // NOT clear the failed note (only the delivered notice is
-    // transient).
-    try live.app_state.effects.fireTimer(model_mod.sample_timer_key);
-    try live.wake();
-    try live.finishSpawn(model_mod.ps_key, ps_edge_fixture);
-    try testing.expect(std.mem.indexOf(u8, model.note(), "kill failed") != null);
-    try live.finishSpawn(model_mod.mem_key, vm_stat_fixture);
-
-    // Copy Name runs the clipboard effect with the process name.
-    try live.dispatch(.{ .copy_name = 842 });
-    const clip = live.app_state.effects.pendingClipboardAt(0).?;
-    try testing.expectEqual(model_mod.copy_key, clip.key);
-    try testing.expectEqualStrings("renderfarm-worker", clip.text);
-    try live.app_state.effects.feedClipboardResult(model_mod.copy_key, .ok, "");
-    try live.wake();
-    try testing.expect(std.mem.indexOf(u8, model.note(), "name copied") != null);
-}
-
-test "a sample already in flight at kill time cannot retire the delivered notice" {
-    if (!sampler.supported) return error.SkipZigTest;
-    const live = try LiveApp.start();
-    defer live.stop();
-    const model = &live.app_state.model;
-
-    // Land the eager boot sample, then fire the cadence so the NEXT
-    // sample is in flight — its `ps` collected the row set BEFORE any
-    // kill below.
-    try live.finishSpawn(model_mod.ps_key, ps_edge_fixture);
-    try live.finishSpawn(model_mod.mem_key, vm_stat_fixture);
-    try live.app_state.effects.fireTimer(model_mod.sample_timer_key);
-    try live.wake();
-    try testing.expect(model.ps_inflight);
-
-    // Confirm the kill while that sample runs, then drain the delivered
-    // exit AND the stale ps exit in ONE batch before any rebuild — the
-    // worst interleaving: kill_done marks the notice transient and the
-    // pre-termination rows land right behind it.
-    try live.dispatch(.{ .request_kill = 842 });
-    try live.dispatch(.confirm_kill);
-    const samples_before = model.samples_taken;
-    try live.app_state.effects.feedExit(model_mod.kill_key, 0);
-    try live.app_state.effects.feedLine(model_mod.ps_key, ps_edge_fixture);
-    try live.app_state.effects.feedExit(model_mod.ps_key, 0);
-    try live.wake();
-
-    // The stale rows applied, and the notice SURVIVED them into the
-    // rendered footer — it must show for at least one full sample.
-    try testing.expectEqual(samples_before + 1, model.samples_taken);
-    try testing.expect(std.mem.indexOf(u8, model.note(), "delivered") != null);
-    var arena_state = std.heap.ArenaAllocator.init(testing.allocator);
-    defer arena_state.deinit();
-    const tree = try buildTree(arena_state.allocator(), model);
-    try testing.expect(findTextContaining(tree.root, "delivered") != null);
-
-    // The first sample LAUNCHED after the kill shows the delivery's
-    // outcome, and retires the notice with it.
-    try live.finishSpawn(model_mod.mem_key, vm_stat_fixture);
-    try live.app_state.effects.fireTimer(model_mod.sample_timer_key);
-    try live.wake();
-    try live.finishSpawn(model_mod.ps_key, ps_edge_fixture);
-    try testing.expectEqual(@as(usize, 0), model.note().len);
-}
-
-// ---------------------------------------------------------------- theming
-
-test "the system appearance drives the ops tokens live" {
-    if (!sampler.supported) return error.SkipZigTest;
-    const live = try LiveApp.start();
-    defer live.stop();
-    const app_state = live.app_state;
-
-    try testing.expectEqualDeep(theme.light_colors, main.tokensFromModel(&app_state.model).colors);
-
-    // The OS flips to dark; the app follows it — there is no in-window
-    // theme control by design.
-    try live.harness.runtime.dispatchPlatformEvent(live.app, .{ .appearance_changed = .{ .color_scheme = .dark } });
-    try testing.expectEqualDeep(theme.dark_colors, (try live.harness.runtime.canvasWidgetDesignTokens(1, main.canvas_label)).colors);
-
-    try live.harness.runtime.dispatchPlatformEvent(live.app, .{ .appearance_changed = .{ .color_scheme = .light } });
-    try testing.expectEqualDeep(theme.light_colors, (try live.harness.runtime.canvasWidgetDesignTokens(1, main.canvas_label)).colors);
-
-    // High contrast falls back to the framework palette (accessibility
-    // beats brand).
-    try live.harness.runtime.dispatchPlatformEvent(live.app, .{ .appearance_changed = .{ .color_scheme = .dark, .high_contrast = true } });
-    try testing.expectEqualDeep(canvas.ColorTokens.highContrastDark(), (try live.harness.runtime.canvasWidgetDesignTokens(1, main.canvas_label)).colors);
-}
-
-// ----------------------------------------------------------------- markup
-
-test "markup engine parity: the header builds identical trees" {
-    var arena_state = std.heap.ArenaAllocator.init(testing.allocator);
-    defer arena_state.deinit();
-    const arena = arena_state.allocator();
-
-    var model = Model{};
-    apply(&model, .{ .set_appearance = .{ .color_scheme = .dark } });
-
-    // The header imports its status-line component, so the interpreter
-    // side resolves the same embedded source set the compiled engine
-    // merged at comptime — both engines see one document.
-    var set_loader = canvas.ui_markup.SourceSetLoader{ .set = &view_mod.header_markup_files };
-    var diagnostic: canvas.ui_markup.MarkupErrorInfo = .{};
-    const header_document = try canvas.ui_markup.resolveImports(arena, "header.native", view_mod.header_markup, set_loader.loader(), &diagnostic);
-    var interpreter = canvas.MarkupView(Model, Msg).fromDocument(try canvas.ui_markup.canonicalize(arena, header_document));
-    var compiled_ui = Ui.init(arena);
-    const compiled = try compiled_ui.finalize(view_mod.CompiledHeaderView.build(&compiled_ui, &model));
-    var interpreted_ui = Ui.init(arena);
-    const interpreted = try interpreted_ui.finalize(try interpreter.build(&interpreted_ui, &model));
-
-    var compiled_ids: std.ArrayListUnmanaged(canvas.ObjectId) = .empty;
-    defer compiled_ids.deinit(testing.allocator);
-    var interpreted_ids: std.ArrayListUnmanaged(canvas.ObjectId) = .empty;
-    defer interpreted_ids.deinit(testing.allocator);
-    try collectIds(compiled.root, &compiled_ids, testing.allocator);
-    try collectIds(interpreted.root, &interpreted_ids, testing.allocator);
-    try testing.expectEqualSlices(canvas.ObjectId, interpreted_ids.items, compiled_ids.items);
-    try testing.expectEqual(interpreted.handlers.len, compiled.handlers.len);
-}
-
-fn collectIds(widget: canvas.Widget, ids: *std.ArrayListUnmanaged(canvas.ObjectId), allocator: std.mem.Allocator) !void {
-    try ids.append(allocator, widget.id);
-    for (widget.children) |child| try collectIds(child, ids, allocator);
-}
-
-// -------------------------------------------------------------- precision
-
-test "the stat tiles land on exact frames and the tree stays in budget" {
-    var arena_state = std.heap.ArenaAllocator.init(testing.allocator);
-    defer arena_state.deinit();
-
-    var model = edgeModel();
-    // Full history = the widest tree this app ever mounts.
-    for (0..model_mod.history_len) |_| {
-        apply(&model, .{ .ps_done = .{ .key = model_mod.ps_key, .code = 0, .output = ps_edge_fixture } });
-        apply(&model, .{ .mem_done = .{ .key = model_mod.mem_key, .code = 0, .output = vm_stat_fixture } });
-    }
-    if (builtin.os.tag != .macos) {
-        // parseMemory switches per OS; keep the layout test portable.
-        model.mem_history_len = model_mod.history_len;
-        for (&model.mem_history) |*value| value.* = 0.5;
-    }
-
-    const tree = try buildTree(arena_state.allocator(), &model);
-    var nodes: [1024]canvas.WidgetLayoutNode = undefined;
-    const layout = try canvas.layoutWidgetTree(tree.root, geometry.RectF.init(0, 0, main.window_width, main.window_height), &nodes);
-    try testing.expect(layout.nodes.len > 0);
-    // The chart retrofit collapsed 3 sparklines x 60 bar widgets into 3
-    // chart leaves; the whole app now mounts in a fraction of the old
-    // 640-node worst case.
-    try testing.expect(layout.nodes.len < 460);
-
-    const labels = [_][]const u8{ "CPU tile", "Memory tile", "Processes tile", "Uptime tile" };
-    var seen: usize = 0;
-    for (layout.nodes) |node| {
-        for (labels, 0..) |label, index| {
-            if (!std.mem.eql(u8, node.widget.semantics.label, label)) continue;
-            seen += 1;
-            const expected_x = view_mod.window_padding + @as(f32, @floatFromInt(index)) * (view_mod.tile_width + view_mod.tile_gap);
-            try testing.expectEqual(expected_x, node.frame.x);
-            try testing.expectEqual(view_mod.tile_width, node.frame.width);
-            try testing.expectEqual(view_mod.tile_height, node.frame.height);
-            try testing.expect(node.frame.x + node.frame.width <= main.window_width - view_mod.window_padding + 0.5);
-        }
-    }
-    try testing.expectEqual(@as(usize, 4), seen);
-
-    // Sparkline charts land exactly on the designed box.
-    for (layout.nodes) |node| {
-        if (!std.mem.eql(u8, node.widget.semantics.label, "CPU history")) continue;
-        try testing.expectEqual(view_mod.spark_width, node.frame.width);
-        try testing.expectEqual(view_mod.spark_height, node.frame.height);
-    }
-}
-
-test "layout audit sweep: nothing clips, overlaps, or escapes" {
-    var arena_state = std.heap.ArenaAllocator.init(testing.allocator);
-    defer arena_state.deinit();
-
-    var model = edgeModel();
-    // Full history = the widest tree this app ever mounts.
-    for (0..model_mod.history_len) |_| {
-        apply(&model, .{ .ps_done = .{ .key = model_mod.ps_key, .code = 0, .output = ps_edge_fixture } });
-        apply(&model, .{ .mem_done = .{ .key = model_mod.mem_key, .code = 0, .output = vm_stat_fixture } });
-    }
-    if (builtin.os.tag != .macos) {
-        model.mem_history_len = model_mod.history_len;
-        for (&model.mem_history) |*value| value.* = 0.5;
-    }
-
-    // The main window: machined tile geometry, so the floor is the
-    // designed content size itself (declared on the window).
-    const tree = try buildTree(arena_state.allocator(), &model);
-    try canvas.expectLayoutAuditSweepClean(testing.allocator, tree.root, .{
-        .tokens = main.tokensFromModel(&model),
-        .min_size = geometry.SizeF.init(main.window_min_width, main.window_min_height),
-        .default_size = geometry.SizeF.init(main.window_width, main.window_height),
-    });
-
-    // The settings window ships fixed-size; audit it at exactly that.
-    model.settings_open = true;
-    var ui = Ui.init(arena_state.allocator());
-    const settings = try ui.finalizeWithTokens(view_mod.settingsView(&ui, &model), main.tokensFromModel(&model));
-    const settings_size = geometry.SizeF.init(main.settings_window_width, main.settings_window_height);
-    try canvas.expectLayoutAuditSweepClean(testing.allocator, settings.root, .{
-        .tokens = main.tokensFromModel(&model),
-        .min_size = settings_size,
-        .default_size = settings_size,
-        .large_size = settings_size,
-    });
-}
-
-test "a11y audit sweep: every interactive widget is named, reachable, and unambiguous" {
-    var arena_state = std.heap.ArenaAllocator.init(testing.allocator);
-    defer arena_state.deinit();
-
-    var model = edgeModel();
-    for (0..model_mod.history_len) |_| {
-        apply(&model, .{ .ps_done = .{ .key = model_mod.ps_key, .code = 0, .output = ps_edge_fixture } });
-        apply(&model, .{ .mem_done = .{ .key = model_mod.mem_key, .code = 0, .output = vm_stat_fixture } });
-    }
-    if (builtin.os.tag != .macos) {
-        model.mem_history_len = model_mod.history_len;
-        for (&model.mem_history) |*value| value.* = 0.5;
-    }
-
-    const tree = try buildTree(arena_state.allocator(), &model);
-    try canvas.expectA11yAuditSweepClean(testing.allocator, tree.root, .{
-        .tokens = main.tokensFromModel(&model),
-        .min_size = geometry.SizeF.init(main.window_min_width, main.window_min_height),
-        .default_size = geometry.SizeF.init(main.window_width, main.window_height),
-    });
-
-    // The settings window, at its fixed size.
-    model.settings_open = true;
-    var ui = Ui.init(arena_state.allocator());
-    const settings = try ui.finalizeWithTokens(view_mod.settingsView(&ui, &model), main.tokensFromModel(&model));
-    const settings_size = geometry.SizeF.init(main.settings_window_width, main.settings_window_height);
-    try canvas.expectA11yAuditSweepClean(testing.allocator, settings.root, .{
-        .tokens = main.tokensFromModel(&model),
-        .min_size = settings_size,
-        .default_size = settings_size,
-        .large_size = settings_size,
-    });
-}
-
-// -------------------------------------------------------------- snapshots
-
-test "automation snapshot names the tiles and drives pause/resume" {
-    if (!sampler.supported) return error.SkipZigTest;
-    const live = try LiveApp.start();
-    defer live.stop();
-    const model = &live.app_state.model;
-
-    var snapshot = live.harness.runtime.automationSnapshot("System Monitor");
-    for ([_][]const u8{ "CPU tile", "Memory tile", "Processes tile", "Uptime tile", "Pause or resume sampling", "Filter processes", "Sort by CPU", "Sort by Memory" }) |name| {
-        try testing.expect(snapshotByName(snapshot, name) != null);
-    }
-
-    // Click the sampling chip through the automation widget path: the
-    // timer cancels; a second click re-arms it.
-    const chip = snapshotByName(snapshot, "Pause or resume sampling").?;
-    var command_buffer: [96]u8 = undefined;
-    const press = try std.fmt.bufPrint(&command_buffer, "widget-click {s} {d}", .{ main.canvas_label, chip.id });
-    try live.harness.runtime.dispatchAutomationCommand(live.app, press);
-    try testing.expect(model.paused);
-    try testing.expectEqual(@as(usize, 0), live.app_state.effects.pendingTimerCount());
-    snapshot = live.harness.runtime.automationSnapshot("System Monitor");
-    const resumed_chip = snapshotByName(snapshot, "Pause or resume sampling").?;
-    const press_again = try std.fmt.bufPrint(&command_buffer, "widget-click {s} {d}", .{ main.canvas_label, resumed_chip.id });
-    try live.harness.runtime.dispatchAutomationCommand(live.app, press_again);
-    try testing.expect(!model.paused);
-    try testing.expectEqual(@as(usize, 1), live.app_state.effects.pendingTimerCount());
-}
-
-fn snapshotByName(snapshot: native_sdk.automation.snapshot.Input, name: []const u8) ?native_sdk.automation.snapshot.Widget {
-    for (snapshot.widgets) |widget| {
-        if (std.mem.eql(u8, widget.name, name)) return widget;
-    }
-    return null;
-}
-
-// ------------------------------------------------------- settings window
-
-fn settingsWindowInfo(live: LiveApp) ?native_sdk.WindowInfo {
-    var buffer: [16]native_sdk.WindowInfo = undefined;
-    for (live.harness.runtime.listWindows(&buffer)) |info| {
-        if (std.mem.eql(u8, info.label, main.settings_window_label)) return info;
-    }
-    return null;
-}
-
-fn settingsWidgetIdByLabel(live: LiveApp, window_id: u64, label: []const u8) !?canvas.ObjectId {
-    const layout = try live.harness.runtime.canvasWidgetLayout(window_id, main.settings_canvas_label);
-    for (layout.nodes) |node| {
-        if (std.mem.eql(u8, node.widget.semantics.label, label)) return node.widget.id;
-    }
-    return null;
-}
-
-test "the settings window opens by the settings command, drives sampling from its own canvas, and round-trips close" {
-    if (!sampler.supported) return error.SkipZigTest;
-    const live = try LiveApp.start();
-    defer live.stop();
-    const model = &live.app_state.model;
-    try testing.expect(settingsWindowInfo(live) == null);
-
-    // Open through the REAL command path: the registered settings
-    // shortcut id via the automation shortcut channel — the same
-    // platform event a primary+comma keypress (or the app-menu Settings
-    // item) emits, resolved through `main.command`.
-    var command_buffer: [96]u8 = undefined;
-    try live.harness.runtime.dispatchAutomationCommand(live.app, "shortcut " ++ main.cmd_settings);
-    try testing.expect(model.settings_open);
-    const info = settingsWindowInfo(live) orelse return error.TestUnexpectedResult;
-    try testing.expect(info.open);
-    try testing.expectEqualStrings("Settings", info.title);
-
-    // Reissuing the command while open is idempotent: opening is not a
-    // toggle, so the window stays declared.
-    try live.harness.runtime.dispatchAutomationCommand(live.app, "shortcut " ++ main.cmd_settings);
-    try testing.expect(model.settings_open);
-
-    // The settings canvas installs on its own first frame.
-    try live.harness.runtime.dispatchPlatformEvent(live.app, .{ .gpu_surface_frame = .{
-        .window_id = info.id,
-        .label = main.settings_canvas_label,
-        .size = geometry.SizeF.init(main.settings_window_width, main.settings_window_height),
-        .scale_factor = 1,
-        .frame_index = 1,
-        .timestamp_ns = 2_000_000,
-        .nonblank = true,
-    } });
-
-    // Pause sampling INSIDE the settings window — the form row's switch,
-    // by automation verb addressed at the settings canvas label: one
-    // dispatch updates both windows (same model), live, no Apply step.
-    // Appearance is not a setting — the system scheme reaches BOTH
-    // canvases through on_appearance.
-    const pause_id = (try settingsWidgetIdByLabel(live, info.id, "Pause or resume sampling")) orelse return error.TestUnexpectedResult;
-    const pause_press = try std.fmt.bufPrint(&command_buffer, "widget-click {s} {d}", .{ main.settings_canvas_label, pause_id });
-    try live.harness.runtime.dispatchAutomationCommand(live.app, pause_press);
-    try testing.expect(model.paused);
-    try live.harness.runtime.dispatchPlatformEvent(live.app, .{ .appearance_changed = .{ .color_scheme = .dark } });
-    try testing.expectEqualDeep(theme.dark_colors, (try live.harness.runtime.canvasWidgetDesignTokens(1, main.canvas_label)).colors);
-    try testing.expectEqualDeep(theme.dark_colors, (try live.harness.runtime.canvasWidgetDesignTokens(info.id, main.settings_canvas_label)).colors);
-
-    // The snapshot enumerates both windows.
-    const snapshot = live.harness.runtime.automationSnapshot("System Monitor");
-    try testing.expectEqual(@as(usize, 2), snapshot.windows.len);
-
-    // Close by Msg: the model stops declaring the window and the
-    // reconcile closes it — no user-close Msg fires.
-    try live.dispatch(.settings_closed);
-    try testing.expect(!model.settings_open);
-    const closed = settingsWindowInfo(live);
-    try testing.expect(closed == null or !closed.?.open);
-
-    // Reopen (same label), then close as the USER (the fake host tears
-    // the window down like the real delegates do and reports it gone):
-    // the open=false event dispatches `.settings_closed` and the model
-    // clears its flag — the window stays closed.
-    try live.harness.runtime.dispatchAutomationCommand(live.app, "shortcut " ++ main.cmd_settings);
-    try testing.expect(model.settings_open);
-    const reopened = settingsWindowInfo(live) orelse return error.TestUnexpectedResult;
-    const close_event = live.harness.null_platform.userCloseWindow(reopened.id).?;
-    try live.harness.runtime.dispatchPlatformEvent(live.app, close_event);
-    try testing.expect(!model.settings_open);
-    const user_closed = settingsWindowInfo(live);
-    try testing.expect(user_closed == null or !user_closed.?.open);
-}
-
-test "the settings command maps to .open_settings and the platform shortcut event drives it" {
-    // One code path for every settings entry point: the shortcut id (and
-    // any menu item carrying it) resolves through `main.command`.
-    try testing.expectEqual(@as(?Msg, .open_settings), main.command(main.cmd_settings));
-    try testing.expect(main.command("monitor.unknown") == null);
-
-    if (!sampler.supported) return error.SkipZigTest;
-    const live = try LiveApp.start();
-    defer live.stop();
-    const model = &live.app_state.model;
-
-    // The platform shortcut event — what a real primary+comma keypress
-    // emits for the registered id — lands as `.open_settings`.
-    try live.harness.runtime.dispatchPlatformEvent(live.app, .{ .shortcut = .{
-        .id = main.cmd_settings,
-        .key = ",",
-        .window_id = 1,
-    } });
-    try testing.expect(model.settings_open);
-    try testing.expect(settingsWindowInfo(live) != null);
-
-    // Opening is idempotent, not a toggle: a second press keeps it open.
-    try live.harness.runtime.dispatchPlatformEvent(live.app, .{ .shortcut = .{
-        .id = main.cmd_settings,
-        .key = ",",
-        .window_id = 1,
-    } });
-    try testing.expect(model.settings_open);
-}
-
-test "the settings window is one grouped form row: a live switch, no title copy, no window instructions" {
-    var arena_state = std.heap.ArenaAllocator.init(testing.allocator);
-    defer arena_state.deinit();
-    const arena = arena_state.allocator();
-
-    var model = Model{};
-    model.settings_open = true;
-
-    var ui = Ui.init(arena);
-    const tree = try ui.finalizeWithTokens(view_mod.settingsView(&ui, &model), main.tokensFromModel(&model));
-
-    // The one setting is a real switch, on while sampling is live, and
-    // it drives the SAME `.toggle_sampling` dispatch the toolbar button
-    // uses — changes apply immediately, no Apply/OK ceremony (and no
-    // button of that kind exists here).
-    const sampling_switch = findByKind(tree.root, .switch_control) orelse return error.TestUnexpectedResult;
-    try testing.expect(sampling_switch.state.selected);
-    try testing.expect(findByKind(tree.root, .button) == null);
-    apply(&model, tree.msgFor(sampling_switch.id, .toggle).?);
-    try testing.expect(model.paused);
-
-    var paused_ui = Ui.init(arena);
-    const paused_tree = try paused_ui.finalizeWithTokens(view_mod.settingsView(&paused_ui, &model), main.tokensFromModel(&model));
-    try testing.expect(!findByKind(paused_tree.root, .switch_control).?.state.selected);
-
-    // The window's titlebar owns the "Settings" title and the window
-    // needs no instructions about being a window: no in-content title,
-    // no close-this-window copy.
-    try testing.expect(findByText(tree.root, .text, "Settings") == null);
-    try testing.expect(findByLabel(tree.root, "Settings title") == null);
-    try testing.expect(findTextContaining(tree.root, "Close this window") == null);
-    try testing.expect(findTextContaining(tree.root, "close button") == null);
-}
-
-test "the toolbar renders one control height and carries no settings button" {
-    var arena_state = std.heap.ArenaAllocator.init(testing.allocator);
-    defer arena_state.deinit();
-
-    var model = edgeModel();
-    const tree = try buildTree(arena_state.allocator(), &model);
-
-    // Settings opens via the app menu / shortcut only: nothing in the
-    // main window's tree offers it.
-    try testing.expect(findByLabel(tree.root, "Open settings window") == null);
-    try testing.expect(findByText(tree.root, .text, "Settings") == null);
-
-    // Every control in the toolbar row sits on one size register, so
-    // the row renders exactly one control height.
-    var nodes: [1024]canvas.WidgetLayoutNode = undefined;
-    const layout = try canvas.layoutWidgetTree(tree.root, geometry.RectF.init(0, 0, main.window_width, main.window_height), &nodes);
-    const control_labels = [_][]const u8{ "Pause or resume sampling", "Filter processes", "Sort by CPU", "Sort by Memory", "Sort by PID", "Sort by Name" };
-    var height: ?f32 = null;
-    var seen: usize = 0;
-    for (layout.nodes) |node| {
-        for (control_labels) |label| {
-            if (!std.mem.eql(u8, node.widget.semantics.label, label)) continue;
-            seen += 1;
-            if (height) |expected| {
-                try testing.expectEqual(expected, node.frame.height);
-            } else {
-                height = node.frame.height;
-            }
-        }
-    }
-    try testing.expectEqual(control_labels.len, seen);
-
-    // The pause control is a real button on the control scale, not a
-    // hand-sized panel.
-    const pause = findByLabel(tree.root, "Pause or resume sampling").?;
-    try testing.expectEqual(canvas.WidgetKind.button, pause.kind);
-}
-
-test "sort chips render their whole labels under the app's pixel snapping" {
-    // Offscreen render check for the exact-fit elision cliff: the sort
-    // chips hug their measured labels, and this app snaps geometry to
-    // the 1px grid, so a fractional chip width used to lose part of a
-    // pixel to edge snapping and paint "PID" as "PI…". Intrinsic
-    // measured-label widths now ceil to the snap grid; emit the real
-    // tree with the app's own tokens and prove every chip label (and
-    // the matching table headers) lays out without elision.
-    var arena_state = std.heap.ArenaAllocator.init(testing.allocator);
-    defer arena_state.deinit();
-
-    var model = edgeModel();
-    const tree = try buildTree(arena_state.allocator(), &model);
-    const tokens = main.tokensFromModel(&model);
-
-    var nodes: [1024]canvas.WidgetLayoutNode = undefined;
-    const layout = try canvas.layoutWidgetTreeWithTokens(tree.root, geometry.RectF.init(0, 0, main.window_width, main.window_height), tokens, &nodes);
-
-    const commands = try testing.allocator.alloc(canvas.CanvasCommand, 8192);
-    defer testing.allocator.free(commands);
-    var builder = canvas.Builder.init(commands);
-    try canvas.emitWidgetLayout(&builder, layout, tokens);
-
-    const chip_labels = [_][]const u8{ "CPU", "Memory", "PID", "Name" };
-    for (chip_labels) |label| {
-        var seen = false;
-        for (builder.displayList().commands) |command| switch (command) {
-            .draw_text => |text| {
-                if (!std.mem.eql(u8, text.text, label)) continue;
-                const options = text.text_layout orelse continue;
-                seen = true;
-                var lines: [4]canvas.TextLine = undefined;
-                const text_layout = try canvas.layoutTextRun(text, options, &lines);
-                for (text_layout.lines) |line| try testing.expect(!line.isElided());
-            },
-            else => {},
-        };
-        try testing.expect(seen);
-    }
-}
-
-// -------------------------------------------------------- showcase shots
-
-// Env-gated screenshot renderer (skipped everywhere by default, never in
-// CI): replays real `ps`/`vm_stat` output captured beforehand into
-// /tmp/system-monitor-samples/ through the normal update path, then
-// renders the canvas OFFSCREEN through the deterministic reference
-// renderer via the automation screenshot artifact — no live window, no
-// screen access. To use:
-//
-//   mkdir -p /tmp/system-monitor-samples
-//   for i in $(seq 0 59); do
-//     ps axo pid=,pcpu=,pmem=,rss=,etime=,comm= > /tmp/system-monitor-samples/ps-$i.txt
-//     vm_stat > /tmp/system-monitor-samples/vm-$i.txt
-//     sleep 1
-//   done
-//   SYSTEM_MONITOR_SHOTS=1 zig build test -Dplatform=null
-//
-// PNGs land in /tmp/system-monitor-shots/{dark,light}-artifacts/.
-test "render showcase screenshots from replayed real samples (env-gated)" {
-    if (builtin.os.tag != .macos) return error.SkipZigTest;
-    if (!envGateSet("SYSTEM_MONITOR_SHOTS")) return error.SkipZigTest;
-    const io = std.testing.io;
-
-    const live = try LiveApp.start();
-    defer live.stop();
-    const model = &live.app_state.model;
-
-    // Host facts from the committed capture (same machine).
-    apply(model, .{ .info_done = .{ .key = model_mod.info_key, .code = 0, .output = sysctl_fixture } });
-
-    var index: usize = 0;
-    while (index < model_mod.history_len) : (index += 1) {
-        var path_buffer: [128]u8 = undefined;
-        const ps_path = try std.fmt.bufPrint(&path_buffer, "/tmp/system-monitor-samples/ps-{d}.txt", .{index});
-        const ps_bytes = try readWholeFile(io, ps_path);
-        defer testing.allocator.free(ps_bytes);
-        apply(model, .{ .ps_done = .{ .key = model_mod.ps_key, .code = 0, .output = ps_bytes } });
-
-        const vm_path = try std.fmt.bufPrint(&path_buffer, "/tmp/system-monitor-samples/vm-{d}.txt", .{index});
-        const vm_bytes = try readWholeFile(io, vm_path);
-        defer testing.allocator.free(vm_bytes);
-        apply(model, .{ .mem_done = .{ .key = model_mod.mem_key, .code = 0, .output = vm_bytes } });
-    }
-    try testing.expectEqual(@as(usize, model_mod.history_len), model.cpu_history_len);
-
-    // The docs site overlays CSS stoplights on the capture, inside the
-    // header's own chrome gap. Reserve that gap for real: the standard
-    // macOS tall hidden-inset geometry (the same numbers the
-    // chrome-geometry test pins) arrives through the app's chrome
-    // channel, so the header pads exactly where the site's dots land.
-    try live.dispatch(main.onChrome(.{
-        .insets = .{ .top = 52, .left = 78 },
-        .buttons = native_sdk.geometry.RectF.init(20, 19, 52, 14),
-    }).?);
-
-    // Dark, then light, each into its own artifact directory; scale 2 for
-    // crisp pixels. No present between theme change and capture on
-    // purpose: a dispatch re-emits the display list with the re-derived
-    // tokens, and offscreen screenshots clear with those LIVE tokens (the
-    // old contract cleared with the last PRESENTED color and needed a
-    // frame per theme; this test now proves the fix).
-    try live.harness.runtime.dispatchPlatformEvent(live.app, .{ .appearance_changed = .{ .color_scheme = .dark } });
-    live.harness.runtime.options.automation = native_sdk.automation.Server.init(io, "/tmp/system-monitor-shots/dark-artifacts", "System Monitor");
-    try live.harness.runtime.dispatchAutomationCommand(live.app, "screenshot monitor-canvas 2");
-
-    try live.harness.runtime.dispatchPlatformEvent(live.app, .{ .appearance_changed = .{ .color_scheme = .light } });
-    live.harness.runtime.options.automation = native_sdk.automation.Server.init(io, "/tmp/system-monitor-shots/light-artifacts", "System Monitor");
-    try live.harness.runtime.dispatchAutomationCommand(live.app, "screenshot monitor-canvas 2");
-
-    // The SIGTERM confirmation over the live table (its own artifact).
-    try live.dispatch(.{ .request_kill = model.rows[0].pid });
-    live.harness.runtime.options.automation = native_sdk.automation.Server.init(io, "/tmp/system-monitor-shots/dialog-artifacts", "System Monitor");
-    try live.harness.runtime.dispatchAutomationCommand(live.app, "screenshot monitor-canvas 2");
-}
-
-fn readWholeFile(io: std.Io, path: []const u8) ![]u8 {
-    var file = try std.Io.Dir.cwd().openFile(io, path, .{});
-    defer file.close(io);
-    var read_buffer: [4096]u8 = undefined;
-    var reader = file.reader(io, &read_buffer);
-    return reader.interface.allocRemaining(testing.allocator, .limited(8 * 1024 * 1024));
-}
-
-/// Env-gated dump switch. `std.c.getenv` needs libc, which this test
-/// build only links on targets whose platform layer pulls it in; when
-/// libc is absent the gate reads as unset and the gated test skips.
-fn envGateSet(name: [*:0]const u8) bool {
-    if (comptime !@import("builtin").link_libc) return false;
-    return std.c.getenv(name) != null;
-}
-
-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();
-    fx.executor = .fake;
-
-    var model = model_mod.Model{};
-    try testing.expectEqual(model_mod.header_natural_height, model.header_height);
-
-    // The tall hidden-inset band arrives through on_chrome: the header
-    // pads past the traffic lights and matches the band's height so its
-    // centered controls share the lights' centerline.
-    const chrome: native_sdk.WindowChrome = .{
-        .insets = .{ .top = 52, .left = 78 },
-        .buttons = native_sdk.geometry.RectF.init(20, 19, 52, 14),
-    };
-    const msg = main.onChrome(chrome) orelse return error.TestUnexpectedResult;
-    model_mod.update(&model, msg, &fx);
-    try testing.expectEqual(@as(f32, 78), model.chrome_leading);
-    try testing.expectEqual(@max(model_mod.header_natural_height, 52), model.header_height);
-
-    // A band taller than the natural header grows the header with it.
-    const tall = main.onChrome(.{ .insets = .{ .top = 72, .left = 78 } }) orelse return error.TestUnexpectedResult;
-    model_mod.update(&model, tall, &fx);
-    try testing.expectEqual(@as(f32, 72), model.header_height);
-
-    // Fullscreen zeroes the chrome: the pad collapses and the height
-    // falls back to the header's natural floor.
-    const cleared = main.onChrome(.{}) orelse return error.TestUnexpectedResult;
-    model_mod.update(&model, cleared, &fx);
-    try testing.expectEqual(@as(f32, 0), model.chrome_leading);
-    try testing.expectEqual(model_mod.header_natural_height, model.header_height);
-
-    // The scene declares the matching titlebar so the platform actually
-    // hides the OS bar this header replaces.
-    try testing.expectEqual(.hidden_inset_tall, main.shell_scene.windows[0].titlebar);
-}
-
-test "the uptime value paragraph moved to markup unchanged" {
-    var arena_state = std.heap.ArenaAllocator.init(testing.allocator);
-    defer arena_state.deinit();
-    const arena = arena_state.allocator();
-
-    var model = Model{};
-    var fx = model_mod.Effects.init(testing.allocator);
-    defer fx.deinit();
-    fx.executor = .fake;
-    model_mod.update(&model, .{ .ps_done = .{ .key = model_mod.ps_key, .code = 0, .output = ps_fixture } }, &fx);
-
-    // The markup fragment (a <text> with one bold <span>) builds the
-    // exact widget the builder paragraph produced: same kind, same
-    // concatenated text, same span list, same heading size and width,
-    // same accessible label — so the tile renders pixel-identical.
-    var markup_ui = Ui.init(arena);
-    const markup_node = view_mod.UptimeValueView.build(&markup_ui, &model);
-
-    var hand_ui = Ui.init(arena);
-    const hand_node = hand_ui.paragraph(.{
-        .width = view_mod.spark_width,
-        .size = .heading,
-        .semantics = .{ .label = model.uptimeValue(hand_ui.arena) },
-    }, &.{
-        .{ .text = model.uptimeValue(hand_ui.arena), .weight = .bold },
-    });
-
-    try testing.expectEqual(canvas.WidgetKind.text, markup_node.widget.kind);
-    try testing.expectEqualStrings(hand_node.widget.text, markup_node.widget.text);
-    try testing.expectEqualStrings(model.uptimeValue(arena), markup_node.widget.text);
-    try testing.expect(canvas.text_spans.textSpansEqual(hand_node.widget.spans, markup_node.widget.spans));
-    try testing.expectEqual(canvas.TextSpanWeight.bold, markup_node.widget.spans[0].weight);
-    try testing.expectEqual(hand_node.widget.layout.min_size, markup_node.widget.layout.min_size);
-    try testing.expectEqual(hand_node.widget.layout.max_size, markup_node.widget.layout.max_size);
-    try testing.expectEqual(view_mod.spark_width, markup_node.widget.layout.min_size.width);
-    try testing.expectEqual(canvas.WidgetSize.heading, markup_node.widget.size);
-    try testing.expectEqualStrings(hand_node.widget.semantics.label, markup_node.widget.semantics.label);
-    // One text run for assistive tech: spans stay visual.
-    try testing.expectEqual(@as(usize, 0), markup_node.nodes.len);
-}
diff --git a/examples/system-monitor/src/theme.zig b/examples/system-monitor/src/theme.zig
deleted file mode 100644
index 2c6df031a..000000000
--- a/examples/system-monitor/src/theme.zig
+++ /dev/null
@@ -1,99 +0,0 @@
-//! system-monitor theme: a cool "ops room" token set layered over the
-//! built-in light/dark themes — the register's cool (zinc) neutral
-//! scale, a deep teal accent for the live data (sparklines, sort
-//! selection, the resume state), and squarer radii than the consumer
-//! apps (soundboard's violet studio, markdown's indigo stone) so the
-//! whole thing feels like an instrument. High-contrast requests fall back to the
-//! framework's high-contrast palettes (accessibility beats brand), and
-//! reduce-motion zeroes the motion tokens through the theme options.
-
-const native_sdk = @import("native_sdk");
-
-const canvas = native_sdk.canvas;
-const Color = canvas.Color;
-
-pub fn tokens(scheme: native_sdk.ColorScheme, high_contrast: bool, reduce_motion: bool) canvas.DesignTokens {
-    var out = canvas.DesignTokens.theme(.{
-        .color_scheme = switch (scheme) {
-            .light => .light,
-            .dark => .dark,
-        },
-        .contrast = if (high_contrast) .high else .standard,
-        .reduce_motion = reduce_motion,
-    });
-    if (!high_contrast) {
-        out.colors = switch (scheme) {
-            .light => light_colors,
-            .dark => dark_colors,
-        };
-    }
-    out.radius = .{ .sm = 4, .md = 6, .lg = 9, .xl = 12 };
-    out.pixel_snap = .{ .geometry = true, .text = true, .scale = 1 };
-    return out;
-}
-
-/// Instrument light on the register's cool (zinc) scale — every neutral
-/// a scale anchor converted from its published oklch value — with the
-/// deep teal identity carried by the accent alone
-/// (oklch(0.511 0.096 186.391) = #00786f).
-pub const light_colors = canvas.ColorTokens{
-    .background = Color.rgb8(250, 250, 250),
-    .surface = Color.rgb8(255, 255, 255),
-    .surface_subtle = Color.rgb8(244, 244, 245),
-    .surface_pressed = Color.rgb8(228, 228, 231),
-    .text = Color.rgb8(9, 9, 11),
-    .text_muted = Color.rgb8(113, 113, 123),
-    .syntax_plain = Color.rgb8(23, 23, 23),
-    .syntax_comment = Color.rgb8(77, 77, 77),
-    .syntax_keyword = Color.rgb8(189, 40, 100),
-    .syntax_literal = Color.rgb8(41, 122, 58),
-    .syntax_function = Color.rgb8(120, 32, 188),
-    .syntax_property = Color.rgb8(203, 42, 47),
-    .syntax_constant = Color.rgb8(0, 104, 214),
-    .border = Color.rgb8(228, 228, 231),
-    .accent = Color.rgb8(0, 120, 111),
-    .accent_text = Color.rgb8(240, 253, 250),
-    .destructive = Color.rgb8(231, 0, 11),
-    .destructive_text = Color.rgb8(250, 250, 250),
-    .success = Color.rgb8(22, 163, 74),
-    .success_text = Color.rgb8(250, 250, 250),
-    .warning = Color.rgb8(217, 119, 6),
-    .warning_text = Color.rgb8(250, 250, 250),
-    .focus_ring = Color.rgb8(159, 159, 169),
-    .shadow = Color.rgba8(0, 0, 0, 26),
-    .disabled = Color.rgb8(244, 244, 245),
-};
-
-/// Console dark on the register's cool (zinc) scale: translucent-white
-/// hairlines and pressed washes, with the accent lifted to signal-teal
-/// (oklch(0.777 0.152 181.912) = #00d5be) and flipped to near-black
-/// accent text for contrast.
-pub const dark_colors = canvas.ColorTokens{
-    .background = Color.rgb8(9, 9, 11),
-    .surface = Color.rgb8(24, 24, 27),
-    .surface_subtle = Color.rgb8(39, 39, 42),
-    .surface_pressed = Color.rgba8(255, 255, 255, 38),
-    .text = Color.rgb8(250, 250, 250),
-    .text_muted = Color.rgb8(159, 159, 169),
-    .syntax_plain = Color.rgb8(237, 237, 237),
-    .syntax_comment = Color.rgb8(161, 161, 161),
-    .syntax_keyword = Color.rgb8(247, 95, 143),
-    .syntax_literal = Color.rgb8(98, 192, 115),
-    .syntax_function = Color.rgb8(191, 122, 240),
-    .syntax_property = Color.rgb8(255, 97, 102),
-    .syntax_constant = Color.rgb8(82, 168, 255),
-    .border = Color.rgba8(255, 255, 255, 26),
-    .accent = Color.rgb8(0, 213, 190),
-    .accent_text = Color.rgb8(9, 9, 11),
-    .destructive = Color.rgb8(255, 100, 103),
-    .destructive_text = Color.rgb8(250, 250, 250),
-    .success = Color.rgb8(34, 197, 94),
-    .success_text = Color.rgb8(9, 9, 11),
-    .warning = Color.rgb8(245, 158, 11),
-    .warning_text = Color.rgb8(9, 9, 11),
-    .info = Color.rgb8(167, 139, 250),
-    .info_text = Color.rgb8(9, 9, 11),
-    .focus_ring = Color.rgb8(113, 113, 123),
-    .shadow = Color.rgba8(0, 0, 0, 150),
-    .disabled = Color.rgb8(39, 39, 42),
-};
diff --git a/examples/system-monitor/src/uptime_value.native b/examples/system-monitor/src/uptime_value.native
deleted file mode 100644
index 2292afd2f..000000000
--- a/examples/system-monitor/src/uptime_value.native
+++ /dev/null
@@ -1,7 +0,0 @@
-<!-- The uptime tile's hero stat: a markup SPAN PARAGRAPH — the bold value
-     run inside one heading-size paragraph — compiled at comptime
-     (canvas.CompiledMarkupView) like the spark fragments and placed as an
-     ordinary child of the Zig tile. The 239 width is the tile plot
-     geometry (view.zig's spark_width constant); the label mirrors the
-     visible value so assistive tech announces the stat by name. -->
-<text size="heading" width="239" label="{uptimeValue}"><span weight="bold">{uptimeValue}</span></text>
diff --git a/examples/system-monitor/src/view.zig b/examples/system-monitor/src/view.zig
deleted file mode 100644
index 8d53bb0fb..000000000
--- a/examples/system-monitor/src/view.zig
+++ /dev/null
@@ -1,457 +0,0 @@
-//! system-monitor views. Markup-first where markup fits: the header bar
-//! (status line holding the trailing corner) and the three sparkline
-//! charts (one `<chart>` per tile: token-tinted bar/area series binding
-//! the model's NaN-padded sample windows) are compiled `.native` views.
-//! Everything else is Zig because it needs what the closed markup
-//! grammar excludes — the tiles' bold-span stat paragraphs (sized by the
-//! heading typography rung), per-row native context menus, and the modal
-//! SIGTERM confirmation overlaid through a z-stack root; the toolbar and
-//! table ride along in Zig so the whole working surface composes in one
-//! place.
-//!
-//! Control sizing rule: every control in a row shares ONE size register
-//! (the toolbar is all `.sm` — button, filter field, sort toggles), so
-//! the row renders one height. Ad-hoc pixel heights on pressable panels
-//! never match the control scale; compose rows from real controls.
-
-const std = @import("std");
-const native_sdk = @import("native_sdk");
-const model_mod = @import("model.zig");
-
-const canvas = native_sdk.canvas;
-const sampler = model_mod.sampler;
-
-pub const Model = model_mod.Model;
-pub const Msg = model_mod.Msg;
-pub const Ui = canvas.Ui(Msg);
-
-pub const header_markup = @embedFile("header.native");
-/// The header's import closure: the embedded source set feeds the
-/// compiled engine, the interpreter parity test, and the hot-reload
-/// baseline, so all three see the same document.
-pub const header_markup_files = [_]canvas.ui_markup.SourceFile{
-    .{ .path = "header.native", .source = header_markup },
-    .{ .path = "header_status.native", .source = @embedFile("header_status.native") },
-};
-pub const CompiledHeaderView = canvas.CompiledMarkupImports(Model, Msg, "header.native", &header_markup_files);
-
-// The sparkline charts, one compiled markup fragment per stat tile:
-// each is a single `<chart>` whose series binds the model's NaN-padded
-// window (cpuSpark/memSpark/procSpark), built into the Zig tile chrome
-// as an ordinary child.
-pub const CpuSparkView = canvas.CompiledMarkupView(Model, Msg, @embedFile("spark_cpu.native"));
-pub const MemSparkView = canvas.CompiledMarkupView(Model, Msg, @embedFile("spark_mem.native"));
-pub const ProcSparkView = canvas.CompiledMarkupView(Model, Msg, @embedFile("spark_proc.native"));
-
-// The uptime tile's hero stat: a markup span paragraph (`<text>` with a
-// bold `<span>` run), compiled like the sparks and composed into the Zig
-// tile. The tests hold it widget-for-widget equal to the builder
-// paragraph it replaced (ui.paragraph with one bold span).
-pub const UptimeValueView = canvas.CompiledMarkupView(Model, Msg, @embedFile("uptime_value.native"));
-
-// ------------------------------------------------------- layout constants
-// Precision layout, calculator-style: the sparkline geometry drives the
-// tile width and the tile row drives the window. The tests assert the
-// tiles land exactly on these frames (the spark_*.native charts carry
-// the same 239x32 box as literals; the frame tests hold the two equal).
-// The 239 width is inherited from the pre-primitive bar geometry
-// (60 x 3px bars + 59 x 1px gaps), kept so the window layout is
-// byte-stable across the chart retrofit.
-
-pub const spark_samples = model_mod.history_len;
-pub const spark_height: f32 = 32;
-pub const spark_width: f32 = spark_samples * 4 - 1; // 239
-
-pub const tile_padding: f32 = 14;
-pub const tile_width: f32 = spark_width + tile_padding * 2; // 267
-// Budgeted from the tile column at rest: sm label line (16.25) + the
-// heading-rung stat line (28 x 1.25 = 35) + sm detail line (16.25) +
-// spark (32) + three 4px gaps + 14px padding twice = 139.5, kept on
-// the even-number rhythm.
-pub const tile_height: f32 = 140;
-pub const tile_gap: f32 = 12;
-pub const window_padding: f32 = 20;
-pub const content_width: f32 = tile_width * 4 + tile_gap * 3; // 1104
-pub const window_width: f32 = content_width + window_padding * 2; // 1144
-pub const window_height: f32 = 720;
-
-const table_row_height: f32 = 32;
-const dialog_width: f32 = 420;
-
-// ------------------------------------------------------------------ root
-
-pub fn rootView(ui: *Ui, model: *const Model) Ui.Node {
-    // A z-stack root: the app column fills the window; the confirmation
-    // overlay (when armed) is a second child laid out over the same frame.
-    if (model.confirmingKill()) {
-        return ui.el(.stack, .{ .grow = 1 }, .{
-            appView(ui, model),
-            confirmOverlay(ui, model),
-        });
-    }
-    return ui.el(.stack, .{ .grow = 1 }, .{appView(ui, model)});
-}
-
-fn appView(ui: *Ui, model: *const Model) Ui.Node {
-    return ui.column(.{ .grow = 1, .style_tokens = .{ .background = .background } }, .{
-        CompiledHeaderView.build(ui, model),
-        ui.column(.{ .grow = 1, .padding = window_padding, .gap = 16 }, .{
-            tilesView(ui, model),
-            toolbarView(ui, model),
-            tableView(ui, model),
-        }),
-        statusBarView(ui, model),
-    });
-}
-
-// ------------------------------------------------------------ stat tiles
-
-fn tilesView(ui: *Ui, model: *const Model) Ui.Node {
-    return ui.row(.{ .gap = tile_gap, .semantics = .{ .label = "Stat tiles" } }, .{
-        statTile(ui, .{
-            .label = "CPU",
-            .value = model.cpuValue(ui.arena),
-            .detail = model.cpuDetail(ui.arena),
-            .spark = CpuSparkView.build(ui, model),
-        }),
-        statTile(ui, .{
-            .label = "Memory",
-            .value = model.memValue(ui.arena),
-            .detail = model.memDetail(ui.arena),
-            .spark = MemSparkView.build(ui, model),
-        }),
-        statTile(ui, .{
-            .label = "Processes",
-            .value = model.procValue(ui.arena),
-            .detail = ui.fmt("top {d} by CPU shown", .{model_mod.max_table_rows}),
-            .spark = ProcSparkView.build(ui, model),
-        }),
-        uptimeTile(ui, model),
-    });
-}
-
-const TileSpec = struct {
-    label: []const u8,
-    value: []const u8,
-    detail: []const u8,
-    /// The tile's sparkline: a compiled markup `<chart>` fragment built
-    /// against the model, placed as an ordinary child.
-    spark: Ui.Node,
-};
-
-fn statTile(ui: *Ui, spec: TileSpec) Ui.Node {
-    return ui.panel(.{
-        .width = tile_width,
-        .height = tile_height,
-        .padding = tile_padding,
-        .style_tokens = .{ .background = .surface, .radius = .lg, .border_color = .border },
-        .semantics = .{ .label = ui.fmt("{s} tile", .{spec.label}) },
-    }, ui.column(.{ .gap = 4 }, .{
-        ui.text(.{ .size = .sm, .style_tokens = .{ .foreground = .text_muted } }, spec.label),
-        ui.paragraph(.{ .width = spark_width, .size = .heading, .semantics = .{ .label = spec.value } }, &.{
-            .{ .text = spec.value, .weight = .bold },
-        }),
-        ui.text(.{ .size = .sm, .style_tokens = .{ .foreground = .text_muted } }, spec.detail),
-        spec.spark,
-    }));
-}
-
-fn uptimeTile(ui: *Ui, model: *const Model) Ui.Node {
-    return ui.panel(.{
-        .width = tile_width,
-        .height = tile_height,
-        .padding = tile_padding,
-        .style_tokens = .{ .background = .surface, .radius = .lg, .border_color = .border },
-        .semantics = .{ .label = "Uptime tile" },
-    }, ui.column(.{ .gap = 4 }, .{
-        ui.text(.{ .size = .sm, .style_tokens = .{ .foreground = .text_muted } }, "Uptime"),
-        UptimeValueView.build(ui, model),
-        // One-line tile caption: elide at the tile width, never wrap
-        // over the caption line below.
-        ui.text(.{ .width = spark_width, .size = .sm, .wrap = false, .style_tokens = .{ .foreground = .text_muted } }, "since boot (pid 1 elapsed time)"),
-        ui.column(.{ .height = spark_height, .main = .end, .gap = 3 }, .{
-            ui.text(.{ .width = spark_width, .size = .sm, .wrap = false, .style_tokens = .{ .foreground = .text_muted } }, ui.fmt("{d} samples kept · {d} s cadence", .{
-                model_mod.history_len, model_mod.sample_interval_ms / 1000,
-            })),
-        }),
-    }));
-}
-
-// --------------------------------------------------------------- toolbar
-
-// Settings has no toolbar button: it opens through the app menu and its
-// standard keyboard shortcut (primary+comma), mapped in main.zig's
-// `command`.
-fn toolbarView(ui: *Ui, model: *const Model) Ui.Node {
-    return ui.row(.{ .gap = 10, .cross = .center, .semantics = .{ .label = "Table toolbar" } }, .{
-        pauseButton(ui, model),
-        // The search field carries the built-in trailing clear
-        // affordance whenever it holds text — no external Clear chip.
-        ui.el(.search_field, .{
-            .size = .sm,
-            .width = 260,
-            .text = model.search(),
-            .placeholder = "Filter by name or pid",
-            .on_input = Ui.inputMsg(.search_edit),
-            .semantics = .{ .label = "Filter processes" },
-        }, .{}),
-        ui.spacer(1),
-        ui.text(.{ .size = .sm, .style_tokens = .{ .foreground = .text_muted } }, "Sort"),
-        sortChips(ui, model),
-        sortDirectionIcon(ui, model),
-    });
-}
-
-// ------------------------------------------------- settings window view
-
-/// The settings WINDOW's whole canvas: a model-declared secondary
-/// window (`windows_fn` declares it while `settings_open` is set), so
-/// this view rebuilds from the same model as the main canvas — flipping
-/// the sampling switch here updates both windows on the same dispatch,
-/// live, with no Apply step. Appearance is not a setting: the app
-/// follows the system, so both windows retheme together through
-/// `on_appearance`.
-///
-/// The register is the standard grouped settings form: one row per
-/// setting — label and description leading, the control trailing. The
-/// window's titlebar carries the "Settings" title, so the content
-/// repeats no title and explains no window mechanics.
-pub fn settingsView(ui: *Ui, model: *const Model) Ui.Node {
-    return ui.column(.{
-        .grow = 1,
-        .padding = 20,
-        .style_tokens = .{ .background = .background },
-        .semantics = .{ .label = "Settings window" },
-    }, .{
-        ui.row(.{ .gap = 12, .cross = .center }, .{
-            ui.column(.{ .grow = 1, .gap = 2 }, .{
-                ui.text(.{}, "Sampling"),
-                ui.text(.{ .size = .sm, .wrap = false, .style_tokens = .{ .foreground = .text_muted } }, ui.fmt("{d} samples kept · one every {d} s while live", .{
-                    model_mod.history_len, model_mod.sample_interval_ms / 1000,
-                })),
-            }),
-            ui.el(.switch_control, .{
-                .selected = model.sampling(),
-                .on_toggle = .toggle_sampling,
-                .semantics = .{ .label = "Pause or resume sampling" },
-            }, .{}),
-        }),
-    });
-}
-
-/// Pause/resume: a real button on the toolbar's `.sm` register, with the
-/// play/pause icon drawn inline before the verb (icon + label are one
-/// widget, so both follow the control's states together).
-fn pauseButton(ui: *Ui, model: *const Model) Ui.Node {
-    return ui.button(.{
-        .size = .sm,
-        .variant = .outline,
-        .icon = if (model.paused) "play" else "pause",
-        .on_press = .toggle_sampling,
-        .semantics = .{ .label = "Pause or resume sampling" },
-    }, if (model.paused) "Resume" else "Pause");
-}
-
-fn sortChips(ui: *Ui, model: *const Model) Ui.Node {
-    return ui.el(.toggle_group, .{ .gap = 2, .semantics = .{ .label = "Sort key" } }, .{
-        sortChip(ui, model.sortedByCpu(), "CPU", .cpu),
-        sortChip(ui, model.sortedByMem(), "Memory", .mem),
-        sortChip(ui, model.sortedByPid(), "PID", .pid),
-        sortChip(ui, model.sortedByName(), "Name", .name),
-    });
-}
-
-fn sortChip(ui: *Ui, selected: bool, label: []const u8, key: model_mod.SortKey) Ui.Node {
-    var node = ui.el(.toggle_button, .{
-        .size = .sm,
-        .selected = selected,
-        .on_toggle = Msg{ .set_sort = key },
-        .semantics = .{ .label = ui.fmt("Sort by {s}", .{label}) },
-    }, .{});
-    node.widget.text = label;
-    return node;
-}
-
-fn sortDirectionIcon(ui: *Ui, model: *const Model) Ui.Node {
-    const label: []const u8 = if (model.sort_descending) "Descending" else "Ascending";
-    const options = Ui.ElementOptions{
-        .width = 14,
-        .height = 14,
-        .style_tokens = .{ .foreground = .text_muted },
-        .semantics = .{ .label = label },
-    };
-    return if (model.sort_descending)
-        ui.icon(options, "chevron-down")
-    else
-        ui.icon(options, "chevron-up");
-}
-
-// ----------------------------------------------------------------- table
-
-fn tableView(ui: *Ui, model: *const Model) Ui.Node {
-    const rows = model.visibleRows(ui.arena);
-    return ui.column(.{ .grow = 1, .gap = 6 }, .{
-        tableHeading(ui, model, rows.len),
-        if (rows.len == 0) emptyState(ui, model) else processList(ui, model, rows),
-    });
-}
-
-fn tableHeading(ui: *Ui, model: *const Model, shown: usize) Ui.Node {
-    const matches = model.matchCount(ui.arena);
-    return ui.row(.{ .gap = 10, .cross = .center }, .{
-        ui.paragraph(.{ .width = 130, .semantics = .{ .label = "Processes" } }, &.{
-            .{ .text = "Processes", .weight = .bold, .scale = 1.2 },
-        }),
-        ui.el(.badge, .{ .variant = .secondary, .text = ui.fmt("{d} of {d}", .{ shown, matches }) }, .{}),
-        ui.spacer(1),
-        rightAlignedHint(ui, "right-click a row for SIGTERM (confirmed first)"),
-    });
-}
-
-/// The table is the REAL table register: `table` > `data_row` >
-/// `data_cell`, so the engine owns the chrome — hairline separators
-/// under every row but the last (the header's line comes free), a
-/// full-width hover wash per row, no outer box, no cell gridlines. The
-/// scroll is CONTROLLED (the model stores the applied offset and echoes
-/// it back), so the 2 s sample rebuild can never reset the table
-/// mid-gesture.
-fn processList(ui: *Ui, model: *const Model, rows: []const model_mod.TableRow) Ui.Node {
-    return ui.scroll(.{
-        .grow = 1,
-        .value = model.table_scroll,
-        .on_scroll = Ui.scrollMsg(.table_scrolled),
-        .semantics = .{ .label = "Process table" },
-    }, ui.el(.table, .{ .semantics = .{ .label = "Processes by CPU" } }, .{
-        columnHeadings(ui),
-        ui.each(rows, rowKey, rowView),
-    }));
-}
-
-/// The muted small header row; numeric columns right-align like the
-/// values under them.
-fn columnHeadings(ui: *Ui) Ui.Node {
-    return ui.el(.data_row, .{ .height = 32, .gap = 12, .cross = .center }, .{
-        ui.el(.data_cell, .{ .text = "PID", .width = 80, .size = .sm, .style_tokens = .{ .foreground = .text_muted } }, .{}),
-        ui.el(.data_cell, .{ .text = "Command", .grow = 1, .size = .sm, .style_tokens = .{ .foreground = .text_muted } }, .{}),
-        ui.el(.data_cell, .{ .text = "CPU %", .width = 80, .size = .sm, .text_alignment = .end, .style_tokens = .{ .foreground = .text_muted } }, .{}),
-        ui.el(.data_cell, .{ .text = "Memory", .width = 100, .size = .sm, .text_alignment = .end, .style_tokens = .{ .foreground = .text_muted } }, .{}),
-    });
-}
-
-/// Right-aligned muted hint. The explicit width is the alignment box:
-/// `text_alignment = .end` needs a frame wider than the content to have
-/// an edge to align against.
-fn rightAlignedHint(ui: *Ui, text: []const u8) Ui.Node {
-    // Width-constrained one-line hint: elide rather than wrap over the
-    // table header below.
-    var node = ui.text(.{ .width = 380, .size = .sm, .wrap = false, .style_tokens = .{ .foreground = .text_muted } }, text);
-    node.widget.text_alignment = .end;
-    return node;
-}
-
-fn rowKey(row: *const model_mod.TableRow) canvas.UiKey {
-    return canvas.uiKey(row.pid);
-}
-
-/// One process row on the table register: a `data_row` whose hover wash
-/// the engine paints full-width, with `data_cell` columns (fixed widths
-/// keep the numeric right edges aligned regardless of digit count). The
-/// native context menu is the kill seam: Terminate opens the
-/// confirmation dialog (never the signal directly), Copy Name runs the
-/// clipboard effect.
-fn rowView(ui: *Ui, row: *const model_mod.TableRow) Ui.Node {
-    return ui.el(.data_row, .{
-        .global_key = canvas.uiKey(row.pid),
-        .height = table_row_height,
-        .gap = 12,
-        .cross = .center,
-        .context_menu = &.{
-            .{ .label = "Terminate (SIGTERM)…", .msg = Msg{ .request_kill = row.pid } },
-            .{ .separator = true },
-            .{ .label = "Copy Name", .msg = Msg{ .copy_name = row.pid } },
-        },
-        .semantics = .{ .label = ui.fmt("{s} pid {s}", .{ row.name, row.pid_text }) },
-    }, .{
-        ui.el(.data_cell, .{ .text = row.pid_text, .width = 80, .size = .sm, .style_tokens = .{ .foreground = .text_muted } }, .{}),
-        ui.el(.data_cell, .{ .text = row.name, .grow = 1 }, .{}),
-        ui.el(.data_cell, .{ .text = row.cpu_text, .width = 80, .size = .sm, .text_alignment = .end }, .{}),
-        ui.el(.data_cell, .{ .text = row.mem_text, .width = 100, .size = .sm, .text_alignment = .end, .style_tokens = .{ .foreground = .text_muted } }, .{}),
-    });
-}
-
-fn emptyState(ui: *Ui, model: *const Model) Ui.Node {
-    return ui.panel(.{
-        .padding = 24,
-        .style_tokens = .{ .background = .surface, .radius = .lg, .border_color = .border },
-        .semantics = .{ .label = "No processes match" },
-    }, ui.column(.{ .gap = 6 }, .{
-        if (model.samples_taken == 0)
-            ui.text(.{}, "Waiting for the first sample…")
-        else
-            ui.text(.{}, ui.fmt("No matches for \"{s}\"", .{model.search()})),
-        // The honest scope hint: search only sees the top-K-by-CPU
-        // selection the sampler keeps (`sampler.max_rows`), so a miss
-        // may simply be a quiet process outside it.
-        if (model.samples_taken == 0)
-            ui.text(.{ .size = .sm, .style_tokens = .{ .foreground = .text_muted } }, "Filter matches command names and pids.")
-        else
-            ui.text(.{ .size = .sm, .style_tokens = .{ .foreground = .text_muted } }, ui.fmt("Search sees the top {d} processes by CPU — filter matches command names and pids.", .{sampler.max_rows})),
-    }));
-}
-
-// ------------------------------------------------------------ status bar
-
-fn statusBarView(ui: *Ui, model: *const Model) Ui.Node {
-    const status = model.statusLine(ui.arena);
-    return ui.column(.{}, .{
-        ui.separator(.{}),
-        ui.row(.{ .height = 30, .padding = 8, .cross = .center, .style_tokens = .{ .background = .surface } }, .{
-            // Full-width box, not grow: the host rasterizer measures text
-            // slightly wider than layout and a tight box clips the tail.
-            ui.text(.{ .width = content_width, .size = .sm, .style_tokens = .{ .foreground = .text_muted }, .semantics = .{ .label = status } }, status),
-        }),
-    });
-}
-
-// ---------------------------------------------------------- kill confirm
-
-/// The SIGTERM confirmation: a centered dialog whose modal chrome
-/// paints the scrim (token-driven dim + backdrop blur across the whole
-/// window). The full-bleed panel underneath is the cancel catcher —
-/// clicking outside the dialog never terminates anything.
-fn confirmOverlay(ui: *Ui, model: *const Model) Ui.Node {
-    const pending = model.pending_kill orelse unreachable;
-    // A panel, not a column: the catcher must claim the press route
-    // itself, and a fully transparent zero-radius fill paints nothing
-    // while keeping the whole window pressable (the dialog chrome owns
-    // the visible scrim).
-    return ui.panel(.{
-        .grow = 1,
-        .on_press = .cancel_kill,
-        .style = .{ .background = canvas.Color.rgba8(0, 0, 0, 0), .radius = 0, .stroke_width = 0 },
-        .semantics = .{ .label = "Confirm termination" },
-    }, ui.column(.{ .grow = 1, .main = .center, .cross = .center }, .{
-        ui.el(.dialog, .{
-            .width = dialog_width,
-            .padding = 20,
-            // Absorb body presses so they never fall through to the
-            // scrim's cancel (deepest handler on the hit route wins).
-            .on_press = .dialog_pressed,
-            .style_tokens = .{ .background = .surface, .radius = .lg, .border_color = .border },
-            .semantics = .{ .role = .dialog, .label = "Send SIGTERM" },
-        }, ui.column(.{ .gap = 12 }, .{
-            ui.row(.{ .gap = 10, .cross = .center }, .{
-                ui.icon(.{ .width = 20, .height = 20, .style_tokens = .{ .foreground = .warning } }, "alert"),
-                ui.paragraph(.{ .grow = 1, .semantics = .{ .label = "Send SIGTERM?" } }, &.{
-                    .{ .text = "Send SIGTERM?", .weight = .bold, .scale = 1.25 },
-                }),
-            }),
-            ui.text(.{ .wrap = true }, ui.fmt("{s} (pid {d}) will be asked to quit.", .{ pending.name(), pending.pid })),
-            ui.text(.{ .wrap = true, .size = .sm, .style_tokens = .{ .foreground = .text_muted } }, "SIGTERM is the polite request — the process may save, clean up, or decline. This app never sends SIGKILL."),
-            ui.row(.{ .gap = 8, .main = .end }, .{
-                ui.button(.{ .variant = .secondary, .on_press = .cancel_kill, .semantics = .{ .label = "Cancel termination" } }, "Cancel"),
-                ui.button(.{ .variant = .destructive, .on_press = .confirm_kill, .semantics = .{ .label = "Confirm SIGTERM" } }, "Send SIGTERM"),
-            }),
-        })),
-    }));
-}
diff --git a/examples/system-monitor-ts/src/windows/components/sampling.native b/examples/system-monitor/src/windows/components/sampling.native
similarity index 100%
rename from examples/system-monitor-ts/src/windows/components/sampling.native
rename to examples/system-monitor/src/windows/components/sampling.native
diff --git a/examples/system-monitor-ts/src/windows/settings.native b/examples/system-monitor/src/windows/settings.native
similarity index 100%
rename from examples/system-monitor-ts/src/windows/settings.native
rename to examples/system-monitor/src/windows/settings.native
diff --git a/examples/system-monitor/tsconfig.json b/examples/system-monitor/tsconfig.json
new file mode 100644
index 000000000..7c80e7100
--- /dev/null
+++ b/examples/system-monitor/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  // Mirrors the compiler options the @native-sdk/core checker enforces,
+  // so editor diagnostics match `native check` reality. @native-sdk/core
+  // resolves from node_modules: the native CLI materializes the SDK's
+  // copy there (and keeps it fresh) until the package is on npm.
+  "compilerOptions": {
+    "strict": true,
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "lib": ["esnext"],
+    "types": [],
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "exactOptionalPropertyTypes": true,
+    "noFallthroughCasesInSwitch": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*.ts"]
+}
diff --git a/packages/core/sdk/text.ts b/packages/core/sdk/text.ts
index c7cd02d95..a45f907f3 100644
--- a/packages/core/sdk/text.ts
+++ b/packages/core/sdk/text.ts
@@ -5,7 +5,7 @@
 // runs as-is — byte for byte the same results.
 //
 // This is the TS counterpart of the runtime's TextBuffer, extracted from
-// the soundboard-ts and system-monitor-ts ports (which carried identical
+// the soundboard and system-monitor ports (which carried identical
 // private copies): UTF-8 byte splicing, caret and word movement, selection,
 // IME composition, capacity-refusal with a clamped-insert recovery, ASCII
 // trimming, and ASCII case-insensitive comparison. A core that binds a
diff --git a/packages/core/src/devhost_journal.mjs b/packages/core/src/devhost_journal.mjs
index 2781c7a53..d9dfa3530 100644
--- a/packages/core/src/devhost_journal.mjs
+++ b/packages/core/src/devhost_journal.mjs
@@ -3,9 +3,9 @@ import fs from "node:fs";
 // Kept in lockstep with `zig build print-pins`; the Node test suite checks
 // both values so a runtime wire change cannot silently strand dev-host
 // recordings.
-// GPU surface scroll input records now carry the detented-wheel flag;
-// older recordings must refuse before their input payloads are decoded.
-export const journalFormatFingerprint = 0x985475e24f954212n;
+// Headers identify absent logic-host chrome versus captured native queries;
+// sealed record totals include complete window chrome results.
+export const journalFormatFingerprint = 0xbd971022a49712f1n;
 export const automationProtocolFingerprint = 0x51f7889bbe3305e7n;
 
 const requestKeyBase = 0x5453525100000000n;
@@ -67,7 +67,7 @@ export class DevhostJournalWriter {
     new DataView(preamble.buffer).setBigUint64(8, journalFormatFingerprint, true);
     this.parts.push(preamble);
     const platform = process.platform === "darwin" ? "macos" : process.platform === "win32" ? "windows" : process.platform;
-    const header = concat([u64(automationProtocolFingerprint), stringBytes(platform), stringBytes(appName), i64(Date.now()), f32(width), f32(height)]);
+    const header = concat([u64(automationProtocolFingerprint), stringBytes(platform), stringBytes(appName), i64(Date.now()), f32(width), f32(height), new Uint8Array([1])]);
     this.parts.push(frame(1, header));
   }
 
@@ -95,7 +95,7 @@ export class DevhostJournalWriter {
     this.effectCount += 1;
   }
   finish() {
-    this.parts.push(frame(6, concat([u64(this.eventCount), u64(this.effectCount), u64(0), u64(0)])));
+    this.parts.push(frame(6, concat([u64(this.eventCount), u64(this.effectCount), u64(0), u64(0), u64(0)])));
     fs.writeFileSync(this.file, concat(this.parts));
   }
 }
@@ -144,8 +144,14 @@ export function readDevhostJournal(file) {
   let events = 0;
   let effects = 0;
   let ended = false;
+  let chromeSource = null;
+  let chromeResults = 0;
+  let checkpoints = 0;
+  let screenshots = 0;
   while (!r.done()) {
+    if (ended) throw new Error("session journal has records after its end");
     const kind = r.byte();
+    if (!headerSeen && kind !== 1) throw new Error("session journal header is misplaced");
     const payload = r.take(r.u32());
     if (kind === 1) {
       if (headerSeen || records.length > 0) throw new Error("session journal header is misplaced");
@@ -153,6 +159,8 @@ export function readDevhostJournal(file) {
       const h = new Reader(payload);
       if (h.u64() !== automationProtocolFingerprint) throw new Error("session automation protocol differs from this SDK");
       h.string(); h.string(); h.i64(); h.f32(); h.f32();
+      chromeSource = h.byte();
+      if (chromeSource > 1) throw new Error("invalid session chrome source");
       if (!h.done()) throw new Error("invalid session journal header");
     } else if (kind === 2) {
       const event = new Reader(payload);
@@ -164,15 +172,28 @@ export function readDevhostJournal(file) {
     } else if (kind === 3) {
       records.push(decodeEffect(payload));
       effects += 1;
+    } else if (kind === 7) {
+      if (chromeSource !== 0) throw new Error("a chrome-less session carries native chrome results");
+      const chrome = new Reader(payload);
+      chrome.u64();
+      for (let index = 0; index < 8; index += 1) chrome.f32();
+      const formFactor = chrome.byte();
+      const tabsProjected = chrome.byte();
+      if (!chrome.done() || formFactor > 2 || tabsProjected > 1) throw new Error("invalid session chrome result");
+      chromeResults += 1;
     } else if (kind === 4 || kind === 5) {
+      if (kind === 4) checkpoints += 1;
+      else screenshots += 1;
       // Renderer checkpoints are meaningful to the packaged host and inert
       // in the logic-only dev host.
     } else if (kind === 6) {
       const end = new Reader(payload);
       const expectedEvents = Number(end.u64());
       const expectedEffects = Number(end.u64());
-      end.u64(); end.u64();
-      if (!end.done() || expectedEvents !== events || expectedEffects !== effects) throw new Error("session journal record counts disagree");
+      const expectedCheckpoints = Number(end.u64());
+      const expectedScreenshots = Number(end.u64());
+      const expectedChrome = Number(end.u64());
+      if (!end.done() || expectedEvents !== events || expectedEffects !== effects || expectedCheckpoints !== checkpoints || expectedScreenshots !== screenshots || expectedChrome !== chromeResults) throw new Error("session journal record counts disagree");
       ended = true;
     } else throw new Error(`unsupported session journal record ${kind}`);
   }
diff --git a/packages/core/src/view_frontend.ts b/packages/core/src/view_frontend.ts
index 938de972b..385292dce 100644
--- a/packages/core/src/view_frontend.ts
+++ b/packages/core/src/view_frontend.ts
@@ -197,7 +197,9 @@ function compileViewFunction(source: string, contract: ViewContract, options: Vi
         const logical = op === "&&" || op === "||", equality = ["==", "!=", "===", "!=="].includes(op!);
         const comparison = ["<", "<=", ">", ">="].includes(op!);
         let valid = category(left.type) === category(right.type) && (logical ? category(left.type) === "boolean" : category(left.type) === "number" || equality && category(left.type) === "boolean");
-        if (equality && [left.type.kind, right.type.kind].includes("enum")) {
+        if (equality && left.type.kind === "enum" && right.type.kind === "enum") {
+          valid = left.type.name === right.type.name;
+        } else if (equality && [left.type.kind, right.type.kind].includes("enum")) {
           const enumRef = left.type.kind === "enum" ? left : right, literal = left.type.kind === "string" ? left : right;
           valid = literal.type.kind === "string" && !!contract.types.enums?.find(item => item.name === enumRef.type.name)?.members.includes(literal.type.name!);
         }
@@ -308,7 +310,7 @@ function compileViewFunction(source: string, contract: ViewContract, options: Vi
     } else if (arm.payload.kind === "void") { if (payload) fail(node, "void Msg arm cannot take a payload"); }
     else {
       const type = arm.payload.kind === "number" ? { kind: arm.payload.class ?? "f64" } : arm.payload.kind === "scalar" ? arm.payload.type! : arm.payload;
-      if (!payload || !arm.member || category(type) !== category(payload.type) || !["number", "boolean", "bytes"].includes(category(type))) fail(node, "event requires a matching scalar Msg payload binding");
+      if (!payload || !arm.member || category(type) !== category(payload.type) || !["number", "boolean", "bytes", "enum"].includes(category(type)) || (type.kind === "enum" && type.name !== payload.type.name)) fail(node, "event requires a matching scalar Msg payload binding");
       props += `, ${JSON.stringify(arm.member)}: ${payload.code}`;
     }
     return `Array.from(nscfPackMsg({ ${props} }))`;
@@ -337,14 +339,15 @@ function compileViewFunction(source: string, contract: ViewContract, options: Vi
     }
     if (node.name === "for") {
       const each = node.attrs.get("each"), as = node.attrs.get("as"), field = node.attrs.get("key");
-      if (!each || !as || !/^[A-Za-z_][A-Za-z0-9_]*$/.test(as) || !field || node.attrs.size !== 3 || node.text.trim()) fail(node, "for requires each, as, key and child elements");
+      if (!each || !as || !/^[A-Za-z_][A-Za-z0-9_]*$/.test(as) || node.attrs.size !== (field === undefined ? 2 : 3) || field === "" || node.text.trim()) fail(node, "for requires each, as, an optional key and child elements");
       const items = path(each, node, scope);
       if (items.type.kind !== "slice" || !items.type.elem) fail(node, "each requires a list binding");
       const id = next++, variable = `nscvItem${id}`, inner = new Map(scope); inner.set(as, { code: variable, type: items.type.elem });
-      const base = key(`{${as}.${field}}`, node, inner);
+      const base = field === undefined ? null : key(`{${as}.${field}}`, node, inner);
       output.push(`for (const ${variable} of ${items.code}) {`, `const nscvFirst${id} = nscvNodes.length;`);
       emitChildren(node.children, inner, slot, stack, depth + 1);
-      output.push(`nscvLoopKeys(nscvNodes, nscvFirst${id}, ${base.code});`, "}"); return;
+      if (base !== null) output.push(`nscvLoopKeys(nscvNodes, nscvFirst${id}, ${base.code});`);
+      output.push("}"); return;
     }
     const stringAttr = (name: string, fallback = ""): string => {
       const raw = node.attrs.get(name);
diff --git a/packages/core/test/conformance.test.ts b/packages/core/test/conformance.test.ts
index e7504e322..67eb2fe7f 100644
--- a/packages/core/test/conformance.test.ts
+++ b/packages/core/test/conformance.test.ts
@@ -806,7 +806,7 @@ export function chained(model: Model, id: number): number {
     // R7 fusion over a TERNARY initializer: `const x = c ? f(a) : g(a);
     // if (x === null) <exit>` lowers to `(if (c) f else g) orelse <exit>`
     // — the conditional must parenthesize, or Zig binds the orelse to the
-    // ELSE arm alone (the system-monitor-ts memory-sampler shape).
+    // ELSE arm alone (the system-monitor memory-sampler shape).
     name: "orelse fusion over a ternary initializer parenthesizes the conditional",
     src: `
 export interface Sample { readonly used: number; }
diff --git a/packages/core/test/devhost_persist.test.ts b/packages/core/test/devhost_persist.test.ts
index ba8073959..c913be44d 100644
--- a/packages/core/test/devhost_persist.test.ts
+++ b/packages/core/test/devhost_persist.test.ts
@@ -5,7 +5,7 @@ import { fileURLToPath } from "node:url";
 import { spawnSync } from "node:child_process";
 import fs from "node:fs";
 import os from "node:os";
-import { automationProtocolFingerprint, journalFormatFingerprint, readDevhostJournal } from "../src/devhost_journal.mjs";
+import { automationProtocolFingerprint, journalFormatFingerprint, readDevhostJournal, DevhostJournalWriter } from "../src/devhost_journal.mjs";
 
 function runTemporaryDevhost(
   files: Record<string, string>,
@@ -373,3 +373,38 @@ test("a devhost service recording replays without starting services and uses the
     fs.rmSync(scratch, { recursive: true, force: true });
   }
 });
+
+
+test("devhost journals declare absent chrome and validate complete native chrome counts", () => {
+  const scratch = fs.mkdtempSync(path.join(os.tmpdir(), "native-devhost-chrome-"));
+  const file = path.join(scratch, "session.journal");
+  try {
+    const writer = new DevhostJournalWriter(file, "chrome", "canvas", 400, 300);
+    writer.appStart(); writer.finish();
+    const original = fs.readFileSync(file);
+    const headerLength = original.readUInt32LE(17);
+    const sourceOffset = 21 + headerLength - 1;
+    assert.equal(original[sourceOffset], 1, "logic-only recordings have no OS chrome capability");
+    assert.equal(readDevhostJournal(file).length, 1);
+    const endAt = original.length - 45;
+    const chrome = Buffer.alloc(47);
+    chrome[0] = 7; chrome.writeUInt32LE(42, 1);
+    chrome.writeBigUInt64LE(1n, 5);
+    chrome.writeFloatLE(66, 13); chrome.writeFloatLE(98, 25);
+    chrome[45] = 1; chrome[46] = 1;
+    const native = Buffer.concat([original.subarray(0, endAt), chrome, original.subarray(endAt)]);
+    native[sourceOffset] = 0;
+    native.writeBigUInt64LE(1n, native.length - 8);
+    fs.writeFileSync(file, native);
+    assert.equal(readDevhostJournal(file).length, 1, "logic-only replay validates native facts without applying renderer queries");
+    native.writeBigUInt64LE(0n, native.length - 8); fs.writeFileSync(file, native);
+    assert.throws(() => readDevhostJournal(file), /record counts disagree/);
+    native.writeBigUInt64LE(1n, native.length - 8);
+    native[sourceOffset] = 1; fs.writeFileSync(file, native);
+    assert.throws(() => readDevhostJournal(file), /chrome-less session/);
+    native[sourceOffset] = 0; native[endAt + 46] = 2; fs.writeFileSync(file, native);
+    assert.throws(() => readDevhostJournal(file), /invalid session chrome result/);
+    fs.writeFileSync(file, Buffer.concat([original, original.subarray(21 + headerLength, endAt)]));
+    assert.throws(() => readDevhostJournal(file), /records after its end/);
+  } finally { fs.rmSync(scratch, { recursive: true, force: true }); }
+});
diff --git a/packages/core/test/view_frontend.test.ts b/packages/core/test/view_frontend.test.ts
index 4df39e369..6ceb1d328 100644
--- a/packages/core/test/view_frontend.test.ts
+++ b/packages/core/test/view_frontend.test.ts
@@ -1739,3 +1739,29 @@ test("content surfaces preserve captions child boundaries explicit spacing and a
     assert.throws(() => compileView(`<${kind} on-dismiss="increment"/>`, contract), /unsupported/);
   }
 });
+
+test("unkeyed enum filters preserve structural identities and dispatch typed enum payloads", () => {
+  const c: ViewContract = {
+    model: "Model", types: { structs: [{ name: "Model", fields: [
+      { name: "filters", type: { kind: "slice", elem: { kind: "enum", name: "Filter" } } },
+      { name: "filter", type: { kind: "enum", name: "Filter" } },
+      { name: "other", type: { kind: "enum", name: "Other" } },
+    ] }], enums: [{ name: "Filter", members: ["all", "active"] }, { name: "Other", members: ["all", "active"] }] },
+    model_helpers: [], msg: { arms: [{ name: "set_filter", member: "filter", payload: { kind: "scalar", type: { kind: "enum", name: "Filter" } } }] },
+  };
+  const markup = '<radio-group label="Filter"><for each="filters" as="f"><radio checked="{f == filter}" on-toggle="set_filter:{f}">{f}</radio></for></radio-group>';
+  const js = ts.transpile(compileView(markup, c), { target: ts.ScriptTarget.ESNext, module: ts.ModuleKind.CommonJS });
+  const model = { filters: ["all", "active", "all"], filter: "active" }, messages: unknown[] = [];
+  const exports: { native_view?: () => Uint8Array } = {};
+  runInNewContext(js, { exports, TextEncoder, TextDecoder, nscfCommitted: model,
+    nscfPackMsg: (msg: unknown) => { messages.push(msg); return Uint8Array.of(1, 1); } });
+  const nodes = JSON.parse(new TextDecoder().decode(exports.native_view!())).nodes;
+  assert.deepEqual(nodes.slice(1).map((n: any) => [n.text, n.checked]), [["all", false], ["active", true], ["all", false]]);
+  assert.ok(nodes.slice(1).every((n: any) => n.key === undefined && n.keyInt === undefined && n.keySlot === undefined));
+  assert.deepEqual(JSON.parse(JSON.stringify(messages)), [{ kind: "set_filter", filter: "all" }, { kind: "set_filter", filter: "active" }, { kind: "set_filter", filter: "all" }]);
+  model.filters = [];
+  assert.equal(JSON.parse(new TextDecoder().decode(exports.native_view!())).nodes.length, 1);
+  assert.throws(() => compileView(markup.replace("f == filter", "f == other"), c), /invalid operands/);
+  assert.throws(() => compileView(markup.replace("set_filter:{f}", "set_filter:{other}"), c), /matching scalar/);
+  assert.throws(() => compileView(markup.replace('as="f"', 'as="f" key=""'), c), /for requires/);
+});
diff --git a/skill-data/core/SKILL.md b/skill-data/core/SKILL.md
index 1708d9163..a9542b6b3 100644
--- a/skill-data/core/SKILL.md
+++ b/skill-data/core/SKILL.md
@@ -306,8 +306,8 @@ When changing app behavior, keep tests in the app's existing authoring tier. Typ
 ## Examples to inspect
 
 - `examples/chatbot`: a substantial app authored entirely in TypeScript + Native markup, with streaming fetch effects and modules.
-- `examples/soundboard-ts`: TypeScript + Native markup port of the full music-player showcase.
-- `examples/system-monitor-ts`: TypeScript + Native markup app using spawn effects, timers, and tables.
+- `examples/soundboard`: TypeScript + Native markup music-player showcase.
+- `examples/system-monitor`: TypeScript + Native markup app using spawn effects, timers, and tables.
 - `examples/hello`: smallest lower-level inline HTML/WebView app.
 - `examples/webview`: bridge and WebView runtime example.
 - `examples/browser`: layered WebView/browser-style example.
diff --git a/skill-data/native-ui/SKILL.md b/skill-data/native-ui/SKILL.md
index 637ce017f..d53cb135a 100644
--- a/skill-data/native-ui/SKILL.md
+++ b/skill-data/native-ui/SKILL.md
@@ -17,7 +17,7 @@ The markup compiles to the same widget tree a hand-written `canvas.Ui(Msg)` buil
 
 Editors highlight `.native` markup well in HTML mode — the default scaffold writes no editor config, so add `.vscode/settings.json` with `"files.associations": {"*.native": "html"}` yourself, or scaffold with `native init --full`, which writes it.
 
-Start a new app with `native init` (zero-config: `app.zon` + `src/core.ts` + `src/app.native` + assets; the CLI generates the build graph). Use `examples/chatbot`, `examples/soundboard-ts`, and `examples/system-monitor-ts` as substantial TypeScript references. The `native check|dev|test|build` verbs drive any app directory shaped this way.
+Start a new app with `native init` (zero-config: `app.zon` + `src/core.ts` + `src/app.native` + assets; the CLI generates the build graph). Use `examples/chatbot`, `examples/soundboard`, and `examples/system-monitor` as substantial TypeScript references. The `native check|dev|test|build` verbs drive any app directory shaped this way.
 
 ## Menu-bar status items (TypeScript default)
 
@@ -64,8 +64,8 @@ pub fn main(init: std.process.Init) !void {
         .canvas_label = "habits-canvas",  // must match the ShellView label
         .update = update,
         .markup = .{
-            .source = @embedFile("habits.native"),
-            .watch_path = "src/habits.native", // dev hot reload; omit in release
+            .source = @embedFile("app.native"),
+            .watch_path = "src/app.native", // dev hot reload; omit in release
             .io = init.io,
         },
     });
@@ -84,13 +84,13 @@ The runtime owns the loop: install on first GPU frame, presentation, resize, poi
 ```zig
 const dev = @import("builtin").mode == .Debug;
 const App = native_sdk.UiAppWithFeatures(Model, Msg, .{ .runtime_markup = dev });
-const CompiledView = canvas.CompiledMarkupView(Model, Msg, @embedFile("habits.native"));
+const CompiledView = canvas.CompiledMarkupView(Model, Msg, @embedFile("app.native"));
 // options:
 .view = CompiledView.build,
-.markup = if (dev) .{ .source = ..., .watch_path = "src/habits.native", .io = init.io } else null,
+.markup = if (dev) .{ .source = ..., .watch_path = "src/app.native", .io = init.io } else null,
 ```
 
-With both set (dev), the compiled view renders until the watched file first changes, then the interpreter hot-reloads it. See `examples/habits` for the full pattern.
+With both set (dev), the compiled view renders until the watched file first changes, then the interpreter hot-reloads it. See the native reference fixture in `tests/ts-core/habits_reference.zig` for this Zig wiring pattern.
 
 ### Webview panes: canvas + live web content in one window
 
@@ -937,7 +937,7 @@ export type Msg = /* ... */ | {
 export const chromeMsg = "chrome_changed";
 ```
 
-Handle that arm by storing `msg.insets.left` and `Math.max(headerNaturalHeight, msg.insets.top)` in fields such as `chromeLeading`/`headerHeight`; markup binds those exact TypeScript spellings (`<spacer width="{chromeLeading}" />`). `examples/system-monitor-ts` is the complete reference. In a Zig core, the equivalent hook is `Options.on_chrome: fn (platform.WindowChrome) ?Msg`, with snake-case bindings such as `{chrome_leading}` when the Zig model uses those names.
+Handle that arm by storing `msg.insets.left` and `Math.max(headerNaturalHeight, msg.insets.top)` in fields such as `chromeLeading`/`headerHeight`; markup binds those exact TypeScript spellings (`<spacer width="{chromeLeading}" />`). `examples/system-monitor` is the complete reference. In a Zig core, the equivalent hook is `Options.on_chrome: fn (platform.WindowChrome) ?Msg`, with snake-case bindings such as `{chrome_leading}` when the Zig model uses those names.
 
 macOS-first like `resizable = false`: GTK/Win32 keep standard chrome and the whole channel is harmless there. Full retrofit: `examples/markdown-viewer` (tall band; toolbar row is the drag region and tracks the band height). Tests: the null platform records `startWindowDrag` calls (`window_drag_starts`), per-window `window_titlebar`, and serves settable `window_chrome` (insets + buttons frame).
 
diff --git a/skill-data/ts-core/SKILL.md b/skill-data/ts-core/SKILL.md
index 2b3017d22..f6fd0fa4a 100644
--- a/skill-data/ts-core/SKILL.md
+++ b/skill-data/ts-core/SKILL.md
@@ -19,7 +19,7 @@ native check        # subset-check core.ts + validate markup + app.json/app.zon
 native build        # ReleaseFast binary; native test runs the app's tests
 ```
 
-The complete reference app in this idiom is `examples/soundboard-ts` in the SDK repo: the soundboard music library as three files and zero Zig — const catalog tables, REAL audio through the `Cmd.audioPlay` stream, scrub-to-seek on a markup slider, a motion-gated `Sub.timer` playback clock, the full text-edit engine on a search field, controlled scroll, registered cover assets, the width-adaptive grid through the frame channel, clipboard, and context menus, with an end-to-end suite driving the shipping markup.
+The complete reference app in this idiom is `examples/soundboard` in the SDK repo: the soundboard music library as three files and zero Zig — const catalog tables, REAL audio through the `Cmd.audioPlay` stream, scrub-to-seek on a markup slider, a motion-gated `Sub.timer` playback clock, the full text-edit engine on a search field, controlled scroll, registered cover assets, the width-adaptive grid through the frame channel, clipboard, and context menus, with an end-to-end suite driving the shipping markup.
 
 ## The contract
 
@@ -301,7 +301,7 @@ One caveat for node-side pokes: the build resolves the `@native-sdk/core*` speci
 - **The entry contract (NS1014)**: `update`, `initialModel`, `subscriptions`, the wiring channels (`commandMsg`/`keyMsg`/`frameMsg`/`pinchMsg`/`dropMsg`/`appearanceMsg`/`chromeMsg`/`envMsgs`), the model-derived launcher helpers (`themeState`/`themePack`/`statusItem`), and `viewUnbound` are DECLARED in `core.ts` and exported under their own names (`export` on the declaration or an un-renamed `export { update }` list entry — a rename or a re-export from an imported module cannot bind an entry point) - imports may FEED them, never replace them. The markup binding surface is also entry-only: an exported single-Model-parameter helper binds (`{doneCount}`) only when it is DECLARED in `core.ts` — export lists participate under their exported names (`export { taskTotal as taskCount }` binds `{taskCount}`), but a re-export of an imported helper does not bind (under node the app's module object is the entry's exports, so it would bind natively but not exist under node). Imported modules export cross-module API for update and the entry helpers to call.
 - **SDK library modules**: `@native-sdk/core/text` ships the byte-splice text engine - `applyTextInputEvent(state, event, capacity)` / `clampedInsertEvent` over `TextEditState` (the full caret/word/selection/IME reducer for markup text controls), plus `containsIgnoreCase`, `orderIgnoreCase`, and `trimAsciiSpaces`. `@native-sdk/core/events` ships the canonical event record types (`TextInputEvent` re-exported, `ScrollState`, `FrameEvent`, `KeyEvent`, `PinchEvent`, `FileDropEvent`, `ColorScheme`/`AppearanceEvent`, `ChromeInsets`/`ChromeButtons`/`ChromeEvent`, `AudioState`/`AudioEvent`, `AudioCaptureState`/`AudioCaptureSource`/`AudioCaptureEvent`) so no core re-types the vocabulary. Unlike `@native-sdk/core` (intrinsic, never compiled into the core) these are ordinary subset TypeScript, compiled INTO your core when imported and absent when not. Under node they resolve like the core module itself. One namespace rule to know (NS1038): module-scope names are unique across the whole import graph, so a core that imports an SDK event type deletes its own in-file mirror of that name.
 
-The reference splits are `examples/soundboard-ts` (core.ts + library.ts + player.ts + the SDK text engine), `examples/system-monitor-ts` (core.ts + parsers.ts + table.ts + the SDK text engine), and `examples/chatbot` (core.ts + api.ts — the JSON-over-bytes wire-format reference: request encoding and a targeted parse walk that returns `null` on anything malformed) in the SDK repo.
+The reference splits are `examples/soundboard` (core.ts + library.ts + player.ts + the SDK text engine), `examples/system-monitor` (core.ts + parsers.ts + table.ts + the SDK text engine), and `examples/chatbot` (core.ts + api.ts — the JSON-over-bytes wire-format reference: request encoding and a targeted parse walk that returns `null` on anything malformed) in the SDK repo.
 
 ## Text is bytes
 
diff --git a/src/primitives/app_manifest/comptime_scene.zig b/src/primitives/app_manifest/comptime_scene.zig
index 71368d01c..aa7071111 100644
--- a/src/primitives/app_manifest/comptime_scene.zig
+++ b/src/primitives/app_manifest/comptime_scene.zig
@@ -249,7 +249,7 @@ test "shellConfigFrom yields the empty scene when app.zon declares none" {
 // Branch-budget regression guard: a scene substantially richer than any
 // shipped example — several windows, every enum-mapped shell field spelled
 // as a string, chrome — must CONVERT, not die on "evaluation exceeded N
-// backwards branches" in a comptime sort deep in std (the system-monitor-ts
+// backwards branches" in a comptime sort deep in std (the system-monitor
 // macOS build regression: one field richer than the smallest demo was
 // already over the default quota).
 test "shellConfigFrom converts a rich scene without exhausting the branch quota" {
diff --git a/src/runtime/core.zig b/src/runtime/core.zig
index 3a84cbe35..575e38b2d 100644
--- a/src/runtime/core.zig
+++ b/src/runtime/core.zig
@@ -27,6 +27,7 @@ const runtime_frame_profile = @import("frame_profile.zig");
 const runtime_gpu_surface_events = @import("gpu_surface_events.zig");
 const runtime_flow = @import("flow.zig");
 const runtime_session_state = @import("session_state.zig");
+const session_journal = @import("session_journal.zig");
 const runtime_state = @import("state.zig");
 const runtime_system_services = @import("system_services.zig");
 const runtime_builtin_bridge = @import("builtin_bridge.zig");
@@ -205,6 +206,14 @@ pub const Runtime = struct {
     max_image_pixel_bytes: usize = canvas_limits.max_registered_canvas_image_pixel_bytes,
     surface: platform.Surface,
     appearance: platform.Appearance = .{},
+    /// Synchronous OS facts queued only while replaying. One event must
+    /// consume the complete sequence before the next event can begin.
+    replay_window_chrome_active: bool = false,
+    replay_window_chrome_source: session_journal.WindowChromeSource = .native_queries,
+    replay_window_chrome_failed: bool = false,
+    replay_window_chrome: [session_journal.max_session_window_chrome_queries]session_journal.WindowChromeRecord = undefined,
+    replay_window_chrome_count: usize = 0,
+    replay_window_chrome_index: usize = 0,
     windows: [platform.max_windows]RuntimeWindow = undefined,
     window_count: usize = 0,
     views: [platform.max_views]RuntimeView = undefined,
@@ -890,6 +899,29 @@ pub const Runtime = struct {
         return self.surface.safe_area_insets;
     }
 
+    /// Query native chrome live, or consume the recorded OS result on
+    /// replay. Missing, extra and differently targeted queries diverge
+    /// loudly; replay never consults the current host for this fact.
+    pub fn windowChrome(self: *Runtime, window_id: platform.WindowId) !platform.WindowChrome {
+        if (self.replay_window_chrome_active) {
+            if (self.replay_window_chrome_source == .unavailable) return .{};
+            if (self.replay_window_chrome_index == self.replay_window_chrome_count) {
+                self.replay_window_chrome_failed = true;
+                return error.ReplayChromeDivergence;
+            }
+            const record = self.replay_window_chrome[self.replay_window_chrome_index];
+            if (record.window_id != window_id) {
+                self.replay_window_chrome_failed = true;
+                return error.ReplayChromeDivergence;
+            }
+            self.replay_window_chrome_index += 1;
+            return record.chrome;
+        }
+        const chrome = self.options.platform.services.windowChrome(window_id);
+        if (self.options.session_recorder) |recorder| recorder.recordWindowChrome(.{ .window_id = window_id, .chrome = chrome });
+        return chrome;
+    }
+
     /// The OS window-control cluster's frame in a canvas view's LOCAL
     /// coordinates (Windows: the DWM min/max/close buttons; macOS: the
     /// traffic lights), from the platform's live chrome report. Zero-sized
@@ -898,9 +930,9 @@ pub const Runtime = struct {
     /// view's window-content frame so a docked canvas judges the overlap
     /// in its own space. This is the geometry `UiApp` consults to keep a
     /// drag header's content out from under the cluster.
-    pub fn windowControlsForView(self: *const Runtime, window_id: platform.WindowId, label: []const u8) geometry.RectF {
+    pub fn windowControlsForView(self: *Runtime, window_id: platform.WindowId, label: []const u8) !geometry.RectF {
         const zero = geometry.RectF.init(0, 0, 0, 0);
-        const buttons = self.options.platform.services.windowChrome(window_id).buttons.normalized();
+        const buttons = (try self.windowChrome(window_id)).buttons.normalized();
         if (buttons.width <= 0 or buttons.height <= 0) return zero;
         const view_frame = (self.absoluteViewFrame(window_id, label, 0) catch return buttons).normalized();
         return geometry.RectF.init(buttons.x - view_frame.x, buttons.y - view_frame.y, buttons.width, buttons.height);
diff --git a/src/runtime/effects.zig b/src/runtime/effects.zig
index ae1fac279..3d85d6b64 100644
--- a/src/runtime/effects.zig
+++ b/src/runtime/effects.zig
@@ -5117,6 +5117,7 @@ pub fn Effects(comptime Msg: type) type {
         /// for `finishReplay`, which turns it into the divergence
         /// refusal the void-returning `loadVideo` cannot raise itself.
         replay_video_diverged: bool = false,
+        replay_audio_diverged: bool = false,
         /// Drain-pass counter (incremented in `drainBoundary`): the
         /// retired-video sweep's clock. Loop-thread only.
         drain_pass_seq: u64 = 0,
@@ -6341,12 +6342,18 @@ pub fn Effects(comptime Msg: type) type {
         }
 
         /// End-of-journal consistency check (the `.finish` replay
-        /// control): every journaled video cascade resolution must have
+        /// control): synchronous audio deliveries must match and leave no
+        /// fed results pending; every journaled video cascade resolution must have
         /// been consumed by the load it named, and none may have paired
         /// against a different key. A leftover or mismatched record
         /// means the replayed updates issued different loads than the
         /// recording — divergence, not success.
-        pub fn finishReplay(self: *Self) error{ReplayVideoDivergence}!void {
+        pub fn finishReplay(self: *Self) error{ ReplayAudioDivergence, ReplayVideoDivergence }!void {
+            if (self.replay_audio_diverged) return error.ReplayAudioDivergence;
+            for (0..self.pending_exit_len) |offset| {
+                const entry = self.pending_exits[(self.pending_exit_head + offset) % max_effect_pending_exits];
+                if (entry == .audio and entry.audio.resolve) return error.ReplayAudioDivergence;
+            }
             if (self.replay_video_diverged) return error.ReplayVideoDivergence;
             if (self.replay_video_source_len > 0) {
                 std.debug.print(
@@ -10434,10 +10441,6 @@ pub fn Effects(comptime Msg: type) type {
         /// or has no handler. Loop-thread only; called by
         /// `UiApp.handleEvent` for `.audio` platform events.
         pub fn takeAudioMsg(self: *Self, platform_event: platform.AudioEvent) ?Msg {
-            // Under replay the journaled effect records are the ONLY
-            // Msg source (fed through `feedAudioEvent`); the replayed
-            // platform `.audio` events would double-deliver.
-            if (self.replay) return null;
             const kind: EffectAudioEventKind = switch (platform_event.kind) {
                 .loaded => .loaded,
                 .position => .position,
@@ -10455,6 +10458,21 @@ pub fn Effects(comptime Msg: type) type {
                 .buffering = platform_event.buffering,
                 .bands = platform_event.bands,
             }) orelse return null;
+            if (self.replay) {
+                // Live reports deliver synchronously. Pair the fed result
+                // with this event now, leaving deferred rejections and other
+                // completions in their original drain order.
+                if (self.takePendingAudioMatching(event.key)) |recorded| {
+                    if (!std.meta.eql(recorded, event)) {
+                        self.replay_audio_diverged = true;
+                        return null;
+                    }
+                    const event_fn = audio_fn orelse return null;
+                    return event_fn(recorded);
+                }
+                if (audio_fn != null) self.replay_audio_diverged = true;
+                return null;
+            }
             const event_fn = audio_fn orelse return null;
             self.journalNote(.{
                 .kind = .audio,
@@ -10500,6 +10518,36 @@ pub fn Effects(comptime Msg: type) type {
             };
         }
 
+        /// Queue every field of a recorded delivery, including its owner
+        /// key and spectrum transport flags. Platform audio events pair
+        /// these records synchronously; fake executor feeds still drain.
+        pub fn feedAudioRecord(self: *Self, event: EffectAudio) !void {
+            if (!self.audio.active or self.audio.key != event.key) return error.EffectNotFound;
+            self.deliverPending(.{ .audio = .{ .event = event, .audio_fn = null, .resolve = true } });
+        }
+
+        /// Remove only the first fed audio result for this channel. Shift
+        /// entries and their sequence stamps together so unrelated deferred
+        /// completions retain their exact order, including wrapped rings.
+        fn takePendingAudioMatching(self: *Self, key: u64) ?EffectAudio {
+            for (0..self.pending_exit_len) |offset| {
+                const index = (self.pending_exit_head + offset) % max_effect_pending_exits;
+                const entry = self.pending_exits[index];
+                if (entry != .audio or !entry.audio.resolve or entry.audio.event.key != key) continue;
+                var hole = offset;
+                while (hole + 1 < self.pending_exit_len) : (hole += 1) {
+                    const to = (self.pending_exit_head + hole) % max_effect_pending_exits;
+                    const from = (self.pending_exit_head + hole + 1) % max_effect_pending_exits;
+                    self.pending_exits[to] = self.pending_exits[from];
+                    self.pending_exit_seqs[to] = self.pending_exit_seqs[from];
+                }
+                self.pending_exit_len -= 1;
+                if (self.pending_exit_len == 0) self.pending_exit_head = 0;
+                return entry.audio.event;
+            }
+            return null;
+        }
+
         /// Fake executor / replay: feed one audio event as the platform
         /// would deliver it. The event resolves against the live channel
         /// at drain time (key and handler from the channel, mirrors
@@ -10509,9 +10557,8 @@ pub fn Effects(comptime Msg: type) type {
             return self.feedAudioEventBuffering(kind, position_ms, duration_ms, playing, false);
         }
 
-        /// `feedAudioEvent` with the stream-stall flag — the shape the
-        /// replayer feeds (journal records carry buffering) and stream
-        /// suites use; the plain feed keeps local-file tests terse.
+        /// `feedAudioEvent` with the stream-stall flag for fake executor
+        /// stream tests; the plain feed keeps local-file tests terse.
         pub fn feedAudioEventBuffering(self: *Self, kind: EffectAudioEventKind, position_ms: u64, duration_ms: u64, playing: bool, buffering: bool) !void {
             if (!self.audio.active) return error.EffectNotFound;
             self.deliverPending(.{ .audio = .{
diff --git a/src/runtime/session_journal.zig b/src/runtime/session_journal.zig
index fac446888..45498ca0a 100644
--- a/src/runtime/session_journal.zig
+++ b/src/runtime/session_journal.zig
@@ -1,8 +1,8 @@
 //! Deterministic session journal: the on-disk format for record/replay.
 //!
-//! A Native SDK session IS three things — the app's deterministic init,
-//! the platform-event sequence, and the effect results that crossed the
-//! effect boundary. This module makes that literal: a journal file holds
+//! A Native SDK session consists of deterministic app init, platform
+//! events, effect results, and synchronous OS chrome query results.
+//! A journal file holds
 //! a session header, every dispatched platform event (payload + implicit
 //! ordinal), every effect RESULT the drain delivered to `update` (fetch
 //! response bytes, subprocess lines and exits, file reads, clipboard
@@ -169,6 +169,7 @@ fn formatLayoutDescription(comptime epoch: u32) []const u8 {
             "checkpoint=" ++ layout_fingerprint.describe(Checkpoint) ++ "\n" ++
             "screenshot=" ++ layout_fingerprint.describe(ScreenshotMark) ++ "\n" ++
             "end=" ++ layout_fingerprint.describe(End) ++ "\n" ++
+            "window_chrome=" ++ layout_fingerprint.describe(WindowChromeRecord) ++ "\n" ++
             "effect=" ++ layout_fingerprint.describe(EffectResultRecord) ++ "\n" ++
             "event_tags=" ++ layout_fingerprint.describe(EventTag) ++ "\n" ++
             // Per-variant payload types, reflected. Payload-free tags
@@ -269,8 +270,24 @@ pub const RecordKind = enum(u8) {
     checkpoint = 4,
     screenshot = 5,
     end = 6,
+    window_chrome = 7,
 };
 
+/// Maximum synchronous chrome queries consumed by one recorded event.
+/// Per-event staging preserves nested dispatch and accessibility ownership.
+pub const max_session_window_chrome_queries: usize = 256;
+
+/// One OS capability result, consumed in query order by the following event.
+/// Values are copied; no native window or borrowed storage crosses replay.
+pub const WindowChromeRecord = struct {
+    window_id: platform.WindowId,
+    chrome: platform.WindowChrome,
+};
+
+/// A logic-only host has no window chrome capability. Its explicit
+/// absence replays as zero geometry; native sessions capture every query.
+pub const WindowChromeSource = enum(u8) { native_queries, unavailable };
+
 /// Session identity, written once as the first record.
 pub const Header = struct {
     /// The automation protocol fingerprint baked into the recording
@@ -288,6 +305,7 @@ pub const Header = struct {
     /// Initial main-window geometry, for provenance and sanity checks.
     window_width: f32 = 0,
     window_height: f32 = 0,
+    window_chrome_source: WindowChromeSource = .native_queries,
 };
 
 /// A model-state fingerprint taken after the event with `event_ordinal`
@@ -319,6 +337,7 @@ pub const End = struct {
     effect_count: u64,
     checkpoint_count: u64,
     screenshot_count: u64,
+    window_chrome_count: u64 = 0,
 };
 
 pub const Record = union(RecordKind) {
@@ -328,6 +347,7 @@ pub const Record = union(RecordKind) {
     checkpoint: Checkpoint,
     screenshot: ScreenshotMark,
     end: End,
+    window_chrome: WindowChromeRecord,
 };
 
 /// Decode scratch for payloads that need an outer slice (dropped-file
@@ -630,9 +650,9 @@ pub fn encodeEvent(event: platform.Event, buffer: []u8) JournalError![]const u8
             try cursor.writeInt(u64, timer.id);
             try cursor.writeInt(u64, timer.timestamp_ns);
         },
-        // Recorded for stream fidelity; inert on replay (the journaled
-        // audio EFFECT records are the Msg source — `takeAudioMsg`
-        // ignores platform audio events under replay).
+        // Recorded for stream fidelity. On replay this event pairs with
+        // its complete audio EFFECT record and delivers the recorded Msg
+        // synchronously, preserving the live rebuild/query boundary.
         .audio => |audio| {
             try cursor.writeEnum(EventTag.audio);
             try cursor.writeEnum(audio.kind);
@@ -1230,6 +1250,7 @@ pub fn encodeHeader(header: Header, buffer: []u8) JournalError![]const u8 {
     try cursor.writeInt(i64, header.recorded_at_wall_ms);
     try cursor.writeF32(header.window_width);
     try cursor.writeF32(header.window_height);
+    try cursor.writeEnum(header.window_chrome_source);
     return buffer[0..cursor.len];
 }
 
@@ -1242,6 +1263,7 @@ pub fn decodeHeader(bytes: []const u8) JournalError!Header {
         .recorded_at_wall_ms = try cursor.readInt(i64),
         .window_width = try cursor.readF32(),
         .window_height = try cursor.readF32(),
+        .window_chrome_source = try cursor.readEnum(WindowChromeSource),
     };
     if (!cursor.done()) return error.JournalCorrupt;
     return header;
@@ -1291,12 +1313,38 @@ pub fn decodeScreenshot(bytes: []const u8) JournalError!ScreenshotMark {
     return mark;
 }
 
+pub fn encodeWindowChrome(record: WindowChromeRecord, buffer: []u8) JournalError![]const u8 {
+    var cursor = WriteCursor{ .buffer = buffer };
+    try cursor.writeInt(u64, record.window_id);
+    try writeInsets(&cursor, record.chrome.insets);
+    try writeRect(&cursor, record.chrome.buttons);
+    try cursor.writeEnum(record.chrome.form_factor);
+    try cursor.writeBool(record.chrome.tabs_projected);
+    return buffer[0..cursor.len];
+}
+
+pub fn decodeWindowChrome(bytes: []const u8) JournalError!WindowChromeRecord {
+    var cursor = ReadCursor{ .bytes = bytes };
+    const record: WindowChromeRecord = .{
+        .window_id = try cursor.readInt(u64),
+        .chrome = .{
+            .insets = try readInsets(&cursor),
+            .buttons = try readRect(&cursor),
+            .form_factor = try cursor.readEnum(platform.FormFactor),
+            .tabs_projected = try cursor.readBool(),
+        },
+    };
+    if (!cursor.done()) return error.JournalCorrupt;
+    return record;
+}
+
 pub fn encodeEnd(end: End, buffer: []u8) JournalError![]const u8 {
     var cursor = WriteCursor{ .buffer = buffer };
     try cursor.writeInt(u64, end.event_count);
     try cursor.writeInt(u64, end.effect_count);
     try cursor.writeInt(u64, end.checkpoint_count);
     try cursor.writeInt(u64, end.screenshot_count);
+    try cursor.writeInt(u64, end.window_chrome_count);
     return buffer[0..cursor.len];
 }
 
@@ -1307,6 +1355,7 @@ pub fn decodeEnd(bytes: []const u8) JournalError!End {
         .effect_count = try cursor.readInt(u64),
         .checkpoint_count = try cursor.readInt(u64),
         .screenshot_count = try cursor.readInt(u64),
+        .window_chrome_count = try cursor.readInt(u64),
     };
     if (!cursor.done()) return error.JournalCorrupt;
     return end;
@@ -1352,6 +1401,7 @@ pub const Reader = struct {
     effect_count: u64 = 0,
     checkpoint_count: u64 = 0,
     screenshot_count: u64 = 0,
+    window_chrome_count: u64 = 0,
 
     pub fn init(bytes: []const u8) JournalError!Reader {
         if (bytes.len < preamble_len) return error.JournalBadMagic;
@@ -1402,12 +1452,17 @@ pub const Reader = struct {
                 self.screenshot_count += 1;
                 return .{ .screenshot = try decodeScreenshot(payload) };
             },
+            .window_chrome => {
+                self.window_chrome_count += 1;
+                return .{ .window_chrome = try decodeWindowChrome(payload) };
+            },
             .end => {
                 const end = try decodeEnd(payload);
                 if (end.event_count != self.event_count or
                     end.effect_count != self.effect_count or
                     end.checkpoint_count != self.checkpoint_count or
-                    end.screenshot_count != self.screenshot_count)
+                    end.screenshot_count != self.screenshot_count or
+                    end.window_chrome_count != self.window_chrome_count)
                 {
                     return error.JournalCountMismatch;
                 }
@@ -2116,3 +2171,21 @@ test "reader requires the header first" {
     var reader = try Reader.init(buffer[0..len]);
     try testing.expectError(error.JournalMissingHeader, reader.next());
 }
+
+test "window chrome codec preserves every OS field and refuses damaged payloads" {
+    const expected: WindowChromeRecord = .{
+        .window_id = 18446744073709551615,
+        .chrome = .{ .insets = .{ .top = 66, .right = 7.25, .bottom = 3.5, .left = 98 }, .buttons = .init(20, 26, 68, 14), .form_factor = .compact, .tabs_projected = true },
+    };
+    var buffer: [64]u8 = undefined;
+    const bytes = try encodeWindowChrome(expected, &buffer);
+    try testing.expectEqualDeep(expected, try decodeWindowChrome(bytes));
+    for (0..bytes.len) |len| try testing.expectError(error.JournalCorrupt, decodeWindowChrome(bytes[0..len]));
+    buffer[bytes.len] = 0;
+    try testing.expectError(error.JournalCorrupt, decodeWindowChrome(buffer[0 .. bytes.len + 1]));
+    buffer[40] = 255;
+    try testing.expectError(error.JournalCorrupt, decodeWindowChrome(bytes));
+    buffer[40] = 1;
+    buffer[41] = 2;
+    try testing.expectError(error.JournalCorrupt, decodeWindowChrome(bytes));
+}
diff --git a/src/runtime/session_record.zig b/src/runtime/session_record.zig
index cf45a2af6..7e4ef5b34 100644
--- a/src/runtime/session_record.zig
+++ b/src/runtime/session_record.zig
@@ -58,6 +58,8 @@ pub const SessionRecorder = struct {
     effect_count: u64 = 0,
     checkpoint_count: u64 = 0,
     screenshot_count: u64 = 0,
+    window_chrome_count: u64 = 0,
+    window_chrome_source: journal.WindowChromeSource = .native_queries,
     /// Per-session salt for credential replay-placeholder digests. The digest
     /// is deliberately independent of the secret, so a shareable journal is
     /// not an offline guessing oracle. Successful secret bytes are never
@@ -76,6 +78,8 @@ pub const SessionRecorder = struct {
     staged_lens: [journal.max_session_event_depth]usize = [_]usize{0} ** journal.max_session_event_depth,
     staged_suppressed: [journal.max_session_event_depth]bool = [_]bool{false} ** journal.max_session_event_depth,
     staged: [journal.max_session_event_depth][journal.max_session_event_bytes]u8 = undefined,
+    staged_chrome_counts: [journal.max_session_event_depth]usize = @splat(0),
+    staged_chrome: [journal.max_session_event_depth][journal.max_session_window_chrome_queries]journal.WindowChromeRecord = undefined,
     /// Encode scratch for effect payloads (up to a whole file read).
     effect_buffer: [journal.max_session_record_bytes]u8 = undefined,
     small_buffer: [1024]u8 = undefined,
@@ -89,6 +93,7 @@ pub const SessionRecorder = struct {
     pub fn begin(self: *SessionRecorder, header: Header) void {
         if (self.began or self.failed) return;
         self.began = true;
+        self.window_chrome_source = header.window_chrome_source;
         // SessionRecorder deliberately has no ambient-I/O handle. Derive a
         // per-session salt from the already-journaled header identity and
         // timestamp. The resulting placeholder digest is metadata only and
@@ -162,6 +167,7 @@ pub const SessionRecorder = struct {
         };
         self.staged_lens[self.depth] = encoded.len;
         self.staged_suppressed[self.depth] = false;
+        self.staged_chrome_counts[self.depth] = 0;
         if (event == .widget_accessibility_action) self.suppress_owner_depth = self.depth;
         self.depth += 1;
     }
@@ -176,10 +182,31 @@ pub const SessionRecorder = struct {
         if (self.suppress_owner_depth) |owner_depth| {
             if (owner_depth == self.depth) self.suppress_owner_depth = null;
         }
+        // Facts belong to the event that queried them. A nested event
+        // commits its own facts first; suppressed accessibility children
+        // contribute to their outer action in the original query order.
+        for (self.staged_chrome[self.depth][0..self.staged_chrome_counts[self.depth]]) |record| {
+            const payload = journal.encodeWindowChrome(record, &self.small_buffer) catch return self.fail("window chrome record over budget");
+            self.writeRecord(.window_chrome, payload);
+            if (!self.failed) self.window_chrome_count += 1;
+        }
         self.writeRecord(.event, self.staged[self.depth][0..self.staged_lens[self.depth]]);
         if (!self.failed) self.event_count += 1;
     }
 
+    /// Stage the complete OS result beside its consuming event, rather
+    /// than publishing it ahead of an unrelated nested dispatch.
+    pub fn recordWindowChrome(self: *SessionRecorder, record: journal.WindowChromeRecord) void {
+        if (!self.began or self.failed or self.finished) return;
+        if (self.window_chrome_source == .unavailable) return self.fail("a chrome-less session queried native window chrome");
+        if (self.depth == 0) return self.fail("window chrome queried outside a recorded event");
+        const owner = self.suppress_owner_depth orelse (self.depth - 1);
+        const count = self.staged_chrome_counts[owner];
+        if (count == journal.max_session_window_chrome_queries) return self.fail("window chrome queries exceeded their per-event budget");
+        self.staged_chrome[owner][count] = record;
+        self.staged_chrome_counts[owner] = count + 1;
+    }
+
     /// True when dispatch just returned to the top level and the frame
     /// index moved — the once-per-published-frame checkpoint gate.
     pub fn wantsCheckpoint(self: *const SessionRecorder, frame_index: u64) bool {
@@ -331,6 +358,7 @@ pub const SessionRecorder = struct {
             .effect_count = self.effect_count,
             .checkpoint_count = self.checkpoint_count,
             .screenshot_count = self.screenshot_count,
+            .window_chrome_count = self.window_chrome_count,
         }, &self.small_buffer) catch return self.fail("end record over budget");
         self.writeRecord(.end, payload);
     }
@@ -752,3 +780,56 @@ test "checkpoint gate fires once per frame index" {
     try testing.expect(!recorder.wantsCheckpoint(1));
     try testing.expect(recorder.wantsCheckpoint(2));
 }
+
+test "recorder binds chrome facts to nested events and outer accessibility actions" {
+    var buffer = BufferSink{};
+    const recorder = try testing.allocator.create(SessionRecorder);
+    defer testing.allocator.destroy(recorder);
+    recorder.* = SessionRecorder.init(buffer.sink());
+    recorder.begin(.{ .platform_name = "test", .app_name = "chrome" });
+    recorder.stageEvent(.frame_requested);
+    recorder.recordWindowChrome(.{ .window_id = 1, .chrome = .{ .insets = .{ .left = 98 } } });
+    recorder.stageEvent(.wake);
+    recorder.recordWindowChrome(.{ .window_id = 2, .chrome = .{ .tabs_projected = true } });
+    recorder.commitEvent();
+    recorder.commitEvent();
+    recorder.stageEvent(.{ .widget_accessibility_action = .{ .window_id = 1, .label = "canvas", .id = 1, .action = .press } });
+    recorder.recordWindowChrome(.{ .window_id = 1, .chrome = .{} });
+    recorder.stageEvent(.wake);
+    recorder.recordWindowChrome(.{ .window_id = 2, .chrome = .{} });
+    recorder.commitEvent();
+    recorder.commitEvent();
+    recorder.finish();
+    try testing.expect(!recorder.failed);
+    var reader = try journal.Reader.init(buffer.bytes());
+    _ = (try reader.next()).?;
+    try testing.expectEqual(@as(u64, 2), (try reader.next()).?.window_chrome.window_id);
+    try testing.expect((try reader.next()).?.event == .wake);
+    try testing.expectEqual(@as(u64, 1), (try reader.next()).?.window_chrome.window_id);
+    try testing.expect((try reader.next()).?.event == .frame_requested);
+    try testing.expectEqual(@as(u64, 1), (try reader.next()).?.window_chrome.window_id);
+    try testing.expectEqual(@as(u64, 2), (try reader.next()).?.window_chrome.window_id);
+    try testing.expect((try reader.next()).?.event == .widget_accessibility_action);
+    const end = (try reader.next()).?.end;
+    try testing.expectEqual(@as(u64, 3), end.event_count);
+    try testing.expectEqual(@as(u64, 4), end.window_chrome_count);
+}
+
+test "recorder refuses unowned and over-budget chrome facts without sealing" {
+    var buffer = BufferSink{};
+    const recorder = try testing.allocator.create(SessionRecorder);
+    defer testing.allocator.destroy(recorder);
+    recorder.* = SessionRecorder.init(buffer.sink());
+    recorder.begin(.{ .platform_name = "test", .app_name = "chrome" });
+    recorder.recordWindowChrome(.{ .window_id = 1, .chrome = .{} });
+    try testing.expect(recorder.failed);
+    try testing.expect(!recorder.finished);
+    buffer.len = 0;
+    recorder.* = SessionRecorder.init(buffer.sink());
+    recorder.begin(.{ .platform_name = "test", .app_name = "chrome" });
+    recorder.stageEvent(.wake);
+    for (0..journal.max_session_window_chrome_queries + 1) |_| recorder.recordWindowChrome(.{ .window_id = 1, .chrome = .{} });
+    recorder.finish();
+    try testing.expect(recorder.failed);
+    try testing.expect(!recorder.finished);
+}
diff --git a/src/runtime/session_replay.zig b/src/runtime/session_replay.zig
index 0b8a4c0fa..412dd9491 100644
--- a/src/runtime/session_replay.zig
+++ b/src/runtime/session_replay.zig
@@ -66,6 +66,8 @@ pub const ReplayError = error{
     /// to decode at all); this class is for records that decode fine
     /// but lie.
     ReplayDamagedRecord,
+    /// The replayed event consumed different synchronous OS queries.
+    ReplayChromeDivergence,
 };
 
 /// Bounded mismatch detail (first N are kept; the count keeps counting).
@@ -145,10 +147,22 @@ pub fn replaySession(
     var reader = try journal.Reader.init(journal_bytes);
     var report: ReplayReport = .{};
     var armed = false;
+    runtime.replay_window_chrome_active = true;
+    runtime.replay_window_chrome_failed = false;
+    runtime.replay_window_chrome_count = 0;
+    runtime.replay_window_chrome_index = 0;
+    defer {
+        runtime.replay_window_chrome_active = false;
+        runtime.replay_window_chrome_source = .native_queries;
+        runtime.replay_window_chrome_failed = false;
+        runtime.replay_window_chrome_count = 0;
+        runtime.replay_window_chrome_index = 0;
+    }
 
     while (try reader.next()) |record| {
         switch (record) {
             .header => |header| {
+                runtime.replay_window_chrome_source = header.window_chrome_source;
                 report.protocol_fingerprint = header.protocol_fingerprint;
                 if (header.protocol_fingerprint != automation_protocol.fingerprint) {
                     std.debug.print(
@@ -165,6 +179,12 @@ pub fn replaySession(
                     return error.ReplayPlatformMismatch;
                 }
             },
+            .window_chrome => |fact| {
+                if (runtime.replay_window_chrome_source == .unavailable) return error.ReplayDamagedRecord;
+                if (runtime.replay_window_chrome_count == journal.max_session_window_chrome_queries) return error.ReplayDamagedRecord;
+                runtime.replay_window_chrome[runtime.replay_window_chrome_count] = fact;
+                runtime.replay_window_chrome_count += 1;
+            },
             .event => |event| {
                 if (!armed) {
                     armed = true;
@@ -193,6 +213,9 @@ pub fn replaySession(
                     }
                 }
                 try runtime.dispatchPlatformEvent(app, event);
+                if (runtime.replay_window_chrome_failed or runtime.replay_window_chrome_index != runtime.replay_window_chrome_count) return error.ReplayChromeDivergence;
+                runtime.replay_window_chrome_count = 0;
+                runtime.replay_window_chrome_index = 0;
                 report.events_replayed += 1;
             },
             .effect => |effect_record| {
@@ -494,7 +517,9 @@ pub fn replaySession(
                     });
                 }
             },
-            .end => {},
+            .end => {
+                if (runtime.replay_window_chrome_count != 0) return error.ReplayChromeDivergence;
+            },
         }
     }
     // End-of-journal consistency: every fed-but-queued record must have
diff --git a/src/runtime/session_tests.zig b/src/runtime/session_tests.zig
index 706631cd7..1d9159b47 100644
--- a/src/runtime/session_tests.zig
+++ b/src/runtime/session_tests.zig
@@ -3274,3 +3274,301 @@ test "image effect records round-trip the blob address through the journal codec
     try std.testing.expectEqualSlices(u8, &hash, &decoded.image_blob_hash);
     try std.testing.expectEqual(@as(u64, 12_345), decoded.image_blob_len);
 }
+
+const ChromeReplayModel = struct { chrome: platform.WindowChrome = .{}, count: u32 = 0 };
+const ChromeReplayMsg = union(enum) { chrome: platform.WindowChrome, increment };
+const ChromeReplayApp = ui_app_mod.UiApp(ChromeReplayModel, ChromeReplayMsg);
+fn chromeReplayUpdate(model: *ChromeReplayModel, msg: ChromeReplayMsg) void {
+    switch (msg) {
+        .chrome => |chrome| model.chrome = chrome,
+        .increment => model.count += 1,
+    }
+}
+fn chromeReplayMap(chrome: platform.WindowChrome) ?ChromeReplayMsg {
+    return .{ .chrome = chrome };
+}
+fn chromeReplayView(ui: *ChromeReplayApp.Ui, model: *const ChromeReplayModel) ChromeReplayApp.Ui.Node {
+    return ui.column(.{}, .{
+        ui.row(.{ .window_drag = true, .height = @max(model.chrome.insets.top, 52) }, .{
+            ui.el(.stack, .{ .width = model.chrome.insets.left }, .{}),
+            ui.button(.{ .on_press = .increment }, ui.fmt("Count {d}", .{model.count})),
+        }),
+        ui.text(.{}, ui.fmt("{s} tabs {any}", .{ @tagName(model.chrome.form_factor), model.chrome.tabs_projected })),
+    });
+}
+fn chromeReplayOptions() ChromeReplayApp.Options {
+    return .{ .name = "chrome-session", .scene = session_scene, .canvas_label = canvas_label, .update = chromeReplayUpdate, .view = chromeReplayView, .on_chrome = chromeReplayMap };
+}
+fn recordChromePixels(runtime: *core.Runtime, recorder: *session_record.SessionRecorder) !void {
+    const allocator = std.testing.allocator;
+    const size = try runtime.canvasScreenshotPixelSize(1, canvas_label, 1);
+    const pixels = try allocator.alloc(u8, size.byte_len);
+    defer allocator.free(pixels);
+    const scratch = try allocator.alloc(u8, size.byte_len);
+    defer allocator.free(scratch);
+    const screenshot = try runtime.renderCanvasScreenshot(1, canvas_label, 1, pixels, scratch);
+    var writer = try std.Io.Writer.Allocating.initCapacity(allocator, try canvas.png.encodedRgba8ByteLen(screenshot.width, screenshot.height));
+    defer writer.deinit();
+    try canvas.png.writeRgba8(&writer.writer, screenshot.width, screenshot.height, screenshot.rgba8);
+    recorder.recordScreenshot(canvas_label, 1, std.hash.Wyhash.hash(0, writer.written()), writer.written().len);
+}
+
+test "OS chrome results replay complete snapshots and pixels through resize fullscreen and accessibility" {
+    const gpa = std.testing.allocator;
+    const buffer = try gpa.create(JournalBuffer);
+    defer gpa.destroy(buffer);
+    buffer.len = 0;
+    const recorder = try gpa.create(session_record.SessionRecorder);
+    defer gpa.destroy(recorder);
+    recorder.* = session_record.SessionRecorder.init(buffer.sink());
+    recorder.begin(.{ .platform_name = "test", .app_name = "chrome-session" });
+    const recorded = try core.TestHarness().create(gpa, .{ .size = .init(400, 300) });
+    defer recorded.destroy(gpa);
+    recorded.null_platform.gpu_surfaces = true;
+    recorded.runtime.options.session_recorder = recorder;
+    const state = try gpa.create(ChromeReplayApp);
+    defer gpa.destroy(state);
+    state.* = ChromeReplayApp.init(std.heap.page_allocator, .{}, chromeReplayOptions());
+    defer state.deinit();
+    const app = state.app();
+    try recorded.start(app);
+    const facts = [_]platform.WindowChrome{
+        .{ .insets = .{ .top = 66, .left = 98 }, .buttons = .init(20, 26, 68, 14), .form_factor = .compact, .tabs_projected = true },
+        .{ .insets = .{ .top = 52, .right = 88, .bottom = 3 }, .buttons = .init(280, 19, 72, 14), .form_factor = .regular },
+        .{}, // Fullscreen removes the overlay.
+    };
+    for (facts, 0..) |chrome, index| {
+        recorded.null_platform.window_chrome = chrome;
+        if (index == 0) {
+            try recorded.runtime.dispatchPlatformEvent(app, .{ .gpu_surface_frame = .{ .label = canvas_label, .size = .init(400, 300), .scale_factor = 1, .frame_index = 1, .timestamp_ns = 1_000_000 } });
+        } else {
+            try recorded.runtime.dispatchPlatformEvent(app, .{ .gpu_surface_resized = .{ .window_id = 1, .label = canvas_label, .frame = .init(0, 0, 400, 300), .scale_factor = 1 } });
+        }
+        try std.testing.expectEqualDeep(chrome, state.model.chrome);
+        var button_id: u64 = 0;
+        for ((try recorded.runtime.canvasWidgetLayout(1, canvas_label)).nodes) |node| if (node.widget.kind == .button) {
+            button_id = node.widget.id;
+        };
+        try std.testing.expect(button_id != 0);
+        try recorded.runtime.dispatchPlatformEvent(app, .{ .widget_accessibility_action = .{ .window_id = 1, .label = canvas_label, .id = button_id, .action = .press } });
+        try recorded.runtime.dispatchPlatformEvent(app, .frame_requested);
+        try recordChromePixels(&recorded.runtime, recorder);
+    }
+    recorder.finish();
+    try std.testing.expect(!recorder.failed);
+    try std.testing.expect(recorder.window_chrome_count > 3);
+    const replayed = try core.TestHarness().create(gpa, .{ .size = .init(400, 300) });
+    defer replayed.destroy(gpa);
+    replayed.null_platform.gpu_surfaces = true;
+    replayed.null_platform.window_chrome = .{ .insets = .{ .top = 999, .left = 999 }, .tabs_projected = true };
+    const fresh = try gpa.create(ChromeReplayApp);
+    defer gpa.destroy(fresh);
+    fresh.* = ChromeReplayApp.init(std.heap.page_allocator, .{}, chromeReplayOptions());
+    defer fresh.deinit();
+    const report = try session_replay.replaySession(&replayed.runtime, fresh.app(), buffer.journalBytes(), .{ .verify = true, .require_same_platform = false });
+    try std.testing.expect(report.ok());
+    try std.testing.expect(report.checkpoints_verified >= 3);
+    try std.testing.expectEqual(@as(u64, 3), report.screenshots_verified);
+    try std.testing.expectEqualDeep(state.model, fresh.model);
+    try std.testing.expectEqual(recorded.runtime.sessionStateFingerprint(), replayed.runtime.sessionStateFingerprint());
+}
+
+const ChromeQueryProbe = struct {
+    targets: []const u64,
+    swallow: bool = false,
+    observed: platform.WindowChrome = .{},
+    fn start(context: *anyopaque, runtime: *core.Runtime) !void {
+        const self: *@This() = @ptrCast(@alignCast(context));
+        for (self.targets) |target| {
+            self.observed = runtime.windowChrome(target) catch |err| {
+                if (self.swallow) continue;
+                return err;
+            };
+        }
+    }
+    fn app(self: *@This()) core.App {
+        return .{ .context = self, .name = "chrome-query", .start_fn = start };
+    }
+};
+
+test "replay refuses missing extra and reordered OS queries even without verification or with swallowed errors" {
+    const gpa = std.testing.allocator;
+    const buffer = try gpa.create(JournalBuffer);
+    defer gpa.destroy(buffer);
+    buffer.len = 0;
+    const recorder = try gpa.create(session_record.SessionRecorder);
+    defer gpa.destroy(recorder);
+    recorder.* = session_record.SessionRecorder.init(buffer.sink());
+    recorder.begin(.{ .platform_name = "test", .app_name = "chrome-query" });
+    const original = try core.TestHarness().create(gpa, .{});
+    defer original.destroy(gpa);
+    original.runtime.options.session_recorder = recorder;
+    var probe: ChromeQueryProbe = .{ .targets = &.{ 1, 2 } };
+    try original.runtime.dispatchPlatformEvent(probe.app(), .app_start);
+    recorder.finish();
+    try std.testing.expect(!recorder.failed);
+    for ([_][]const u64{ &.{1}, &.{ 1, 2, 3 }, &.{ 2, 1 } }) |targets| {
+        const fresh = try core.TestHarness().create(gpa, .{});
+        defer fresh.destroy(gpa);
+        var wrong: ChromeQueryProbe = .{ .targets = targets, .swallow = true };
+        try std.testing.expectError(error.ReplayChromeDivergence, session_replay.replaySession(&fresh.runtime, wrong.app(), buffer.journalBytes(), .{ .verify = false, .require_same_platform = false }));
+        try std.testing.expect(!fresh.runtime.replay_window_chrome_active);
+    }
+    // A complete sequence still succeeds and releases replay-owned facts.
+    const fresh = try core.TestHarness().create(gpa, .{});
+    defer fresh.destroy(gpa);
+    const report = try session_replay.replaySession(&fresh.runtime, probe.app(), buffer.journalBytes(), .{ .verify = false, .require_same_platform = false });
+    try std.testing.expect(report.ok());
+    try std.testing.expect(!fresh.runtime.replay_window_chrome_active);
+}
+
+test "a logic-only journal declares absent chrome and never queries the replay host" {
+    const gpa = std.testing.allocator;
+    const buffer = try gpa.create(JournalBuffer);
+    defer gpa.destroy(buffer);
+    buffer.len = 0;
+    const recorder = try gpa.create(session_record.SessionRecorder);
+    defer gpa.destroy(recorder);
+    recorder.* = session_record.SessionRecorder.init(buffer.sink());
+    recorder.begin(.{ .platform_name = "test", .app_name = "chrome-query", .window_chrome_source = .unavailable });
+    recorder.stageEvent(.app_start);
+    recorder.commitEvent();
+    recorder.finish();
+    const fresh = try core.TestHarness().create(gpa, .{});
+    defer fresh.destroy(gpa);
+    fresh.null_platform.window_chrome = .{ .insets = .{ .top = 999, .left = 999 } };
+    var probe: ChromeQueryProbe = .{ .targets = &.{ 1, 2 } };
+    const report = try session_replay.replaySession(&fresh.runtime, probe.app(), buffer.journalBytes(), .{ .verify = false, .require_same_platform = false });
+    try std.testing.expect(report.ok());
+    try std.testing.expectEqualDeep(platform.WindowChrome{}, probe.observed);
+    // Absence cannot be combined with fabricated native query results.
+    buffer.len = 0;
+    recorder.* = session_record.SessionRecorder.init(buffer.sink());
+    recorder.begin(.{ .platform_name = "test", .app_name = "chrome-query", .window_chrome_source = .unavailable });
+    recorder.stageEvent(.app_start);
+    recorder.recordWindowChrome(.{ .window_id = 1, .chrome = .{} });
+    recorder.finish();
+    try std.testing.expect(recorder.failed and !recorder.finished);
+}
+
+const AudioChromeModel = struct { last: ?effects_mod.EffectAudio = null, count: u32 = 0 };
+const AudioChromeMsg = union(enum) { audio_event: effects_mod.EffectAudio };
+const AudioChromeApp = ui_app_mod.UiApp(AudioChromeModel, AudioChromeMsg);
+fn audioChromeInit(_: *AudioChromeModel, fx: *AudioChromeApp.Effects) void {
+    fx.playAudio(.{ .key = 41, .path = "assets/session-track.mp3", .on_event = AudioChromeApp.Effects.audioMsg(.audio_event) });
+}
+fn audioChromeUpdate(model: *AudioChromeModel, msg: AudioChromeMsg) void {
+    model.last = msg.audio_event;
+    model.count += 1;
+}
+fn audioChromeView(ui: *AudioChromeApp.Ui, model: *const AudioChromeModel) AudioChromeApp.Ui.Node {
+    return ui.column(.{}, .{
+        ui.row(.{ .window_drag = true, .height = 52 }, .{ui.text(.{}, ui.fmt("Audio {d}", .{model.count}))}),
+        ui.text(.{}, if (model.last) |event| @tagName(event.kind) else "waiting"),
+    });
+}
+fn audioChromeOptions() AudioChromeApp.Options {
+    return .{ .name = "audio-chrome-session", .scene = session_scene, .canvas_label = canvas_label, .update = audioChromeUpdate, .view = audioChromeView, .init_fx = audioChromeInit };
+}
+
+test "native audio callbacks replay in their owning event with complete chrome snapshots and pixels" {
+    const gpa = std.testing.allocator;
+    const buffer = try gpa.create(JournalBuffer);
+    defer gpa.destroy(buffer);
+    buffer.len = 0;
+    const recorder = try gpa.create(session_record.SessionRecorder);
+    defer gpa.destroy(recorder);
+    recorder.* = session_record.SessionRecorder.init(buffer.sink());
+    recorder.begin(.{ .platform_name = "test", .app_name = "audio-chrome-session" });
+    const recorded = try core.TestHarness().create(gpa, .{ .size = .init(400, 300) });
+    defer recorded.destroy(gpa);
+    recorded.null_platform.gpu_surfaces = true;
+    recorded.null_platform.window_chrome = .{ .insets = .{ .top = 52, .left = 98 }, .buttons = .init(20, 26, 68, 14) };
+    recorded.runtime.options.session_recorder = recorder;
+    const state = try gpa.create(AudioChromeApp);
+    defer gpa.destroy(state);
+    state.* = AudioChromeApp.init(std.heap.page_allocator, .{}, audioChromeOptions());
+    defer state.deinit();
+    state.effects.executor = .fake;
+    const app = state.app();
+    try recorded.start(app);
+    try recorded.runtime.dispatchPlatformEvent(app, .{ .gpu_surface_frame = .{ .label = canvas_label, .size = .init(400, 300), .scale_factor = 1, .frame_index = 1, .timestamp_ns = 1_000_000 } });
+    const events = [_]platform.AudioEvent{
+        .{ .kind = .loaded, .duration_ms = 30_000, .playing = true },
+        .{ .kind = .position, .position_ms = 750, .duration_ms = 30_000, .playing = true, .buffering = true },
+        .{ .kind = .spectrum, .position_ms = 750, .duration_ms = 30_000, .playing = false, .buffering = true, .bands = @splat(17) },
+        .{ .kind = .position, .position_ms = 900, .duration_ms = 30_000, .playing = false },
+        .{ .kind = .completed, .position_ms = 999, .duration_ms = 30_000, .playing = true, .buffering = true },
+        .{ .kind = .failed, .position_ms = 12, .duration_ms = 30_000, .playing = true, .buffering = true },
+    };
+    for (events, 0..) |event, index| {
+        try recorded.runtime.dispatchPlatformEvent(app, .{ .audio = event });
+        try std.testing.expectEqual(@as(u32, @intCast(index + 1)), state.model.count);
+        try recorded.runtime.dispatchPlatformEvent(app, .frame_requested);
+        try recordChromePixels(&recorded.runtime, recorder);
+    }
+    recorder.finish();
+    try std.testing.expect(!recorder.failed);
+    try std.testing.expect(recorder.window_chrome_count >= events.len);
+    const replayed = try core.TestHarness().create(gpa, .{ .size = .init(400, 300) });
+    defer replayed.destroy(gpa);
+    replayed.null_platform.gpu_surfaces = true;
+    replayed.null_platform.window_chrome = .{ .buttons = .init(999, 999, 99, 99) };
+    const fresh = try gpa.create(AudioChromeApp);
+    defer gpa.destroy(fresh);
+    fresh.* = AudioChromeApp.init(std.heap.page_allocator, .{}, audioChromeOptions());
+    defer fresh.deinit();
+    const report = try session_replay.replaySession(&replayed.runtime, fresh.app(), buffer.journalBytes(), .{ .verify = true, .require_same_platform = false });
+    try std.testing.expect(report.ok());
+    try std.testing.expectEqual(@as(u64, events.len), report.effects_fed);
+    try std.testing.expectEqual(@as(u64, events.len), report.screenshots_verified);
+    try std.testing.expectEqualDeep(state.model, fresh.model);
+    try std.testing.expectEqualDeep(state.effects.audioSnapshot(), fresh.effects.audioSnapshot());
+    try std.testing.expectEqual(recorded.runtime.sessionStateFingerprint(), replayed.runtime.sessionStateFingerprint());
+}
+
+test "synchronous recorded audio leaves wrapped deferred rejections in their original order" {
+    const fx = try std.testing.allocator.create(SessionApp.Effects);
+    defer std.testing.allocator.destroy(fx);
+    fx.* = SessionApp.Effects.init(std.testing.allocator);
+    defer fx.deinit();
+    fx.armReplay();
+    // Advance the ring head before retaining two deferred rejection Msgs.
+    for (0..effects_mod.max_effect_pending_exits - 1) |_| {
+        fx.playAudio(.{ .key = 7, .path = "", .on_event = SessionApp.Effects.audioMsg(.audio_event) });
+        try std.testing.expect(fx.takeMsg() != null);
+    }
+    for ([_]u64{ 7, 8 }) |key| fx.playAudio(.{ .key = key, .path = "", .on_event = SessionApp.Effects.audioMsg(.audio_event) });
+    fx.playAudio(.{ .key = 41, .path = "assets/session-track.mp3", .on_event = SessionApp.Effects.audioMsg(.audio_event) });
+    const event: effects_mod.EffectAudio = .{ .key = 41, .kind = .loaded, .duration_ms = 30_000, .playing = true };
+    try fx.feedAudioRecord(event);
+    const synchronous = fx.takeAudioMsg(.{ .kind = .loaded, .duration_ms = 30_000, .playing = true }).?;
+    try std.testing.expectEqualDeep(event, synchronous.audio_event);
+    for ([_]u64{ 7, 8 }) |key| {
+        const deferred = fx.takeMsg().?.audio_event;
+        try std.testing.expectEqual(key, deferred.key);
+        try std.testing.expectEqual(effects_mod.EffectAudioEventKind.rejected, deferred.kind);
+    }
+    try std.testing.expect(fx.takeMsg() == null);
+    try fx.finishReplay();
+}
+
+test "recorded audio rejects altered missing unconsumed and wrongly owned deliveries" {
+    for (0..4) |scenario| {
+        const fx = try std.testing.allocator.create(SessionApp.Effects);
+        defer std.testing.allocator.destroy(fx);
+        fx.* = SessionApp.Effects.init(std.testing.allocator);
+        defer fx.deinit();
+        fx.armReplay();
+        fx.playAudio(.{ .key = 41, .path = "assets/session-track.mp3", .on_event = SessionApp.Effects.audioMsg(.audio_event) });
+        var event: effects_mod.EffectAudio = .{ .key = 41, .kind = .loaded, .duration_ms = 30_000, .playing = true };
+        if (scenario == 3) {
+            event.key = 42;
+            try std.testing.expectError(error.EffectNotFound, fx.feedAudioRecord(event));
+            continue;
+        }
+        if (scenario != 1) try fx.feedAudioRecord(event);
+        if (scenario != 2) try std.testing.expect(fx.takeAudioMsg(.{ .kind = .loaded, .duration_ms = if (scenario == 0) 31_000 else 30_000, .playing = true }) == null);
+        try std.testing.expectError(error.ReplayAudioDivergence, fx.finishReplay());
+    }
+}
diff --git a/src/runtime/ui_app.zig b/src/runtime/ui_app.zig
index e98c5b84c..393d3c730 100644
--- a/src/runtime/ui_app.zig
+++ b/src/runtime/ui_app.zig
@@ -1746,13 +1746,15 @@ pub fn UiAppWithFeatures(comptime ModelT: type, comptime MsgT: type, comptime fe
                         // is still divergent input).
                         .write => try self.effects.pushReplayPtyWriteVerdict(record.key, record.code == 1),
                     },
-                    // Spectrum records feed through the band-carrying
-                    // helper so replay repaints identical bars; every
-                    // other audio kind rides the plain shape.
-                    .audio => if (record.audio_kind == .spectrum)
-                        try self.effects.feedAudioSpectrum(record.audio_bands, record.audio_position_ms, record.audio_duration_ms)
-                    else
-                        try self.effects.feedAudioEventBuffering(record.audio_kind, record.audio_position_ms, record.audio_duration_ms, record.audio_playing, record.audio_buffering),
+                    .audio => try self.effects.feedAudioRecord(.{
+                        .key = record.key,
+                        .kind = record.audio_kind,
+                        .position_ms = record.audio_position_ms,
+                        .duration_ms = record.audio_duration_ms,
+                        .playing = record.audio_playing,
+                        .buffering = record.audio_buffering,
+                        .bands = record.audio_bands,
+                    }),
                     // `.video` records feed the whole journaled shape —
                     // dimensions included — routed by the journaled
                     // load identity (`video_token`), so replay delivers
@@ -2213,7 +2215,7 @@ pub fn UiAppWithFeatures(comptime ModelT: type, comptime MsgT: type, comptime fe
             // Apps whose headers already pad through the chrome
             // channel's insets never collide, never retry, and keep a
             // byte-identical layout.
-            if (windowControlsReservation(runtime, window_id, self.options.canvas_label, built.layout, tokens)) |controls| {
+            if (try windowControlsReservation(runtime, window_id, self.options.canvas_label, built.layout, tokens)) |controls| {
                 tokens.window_controls = controls;
                 built = try self.buildLayoutPass(runtime, window_id, bounds, tokens, next_index);
             }
@@ -2533,7 +2535,7 @@ pub fn UiAppWithFeatures(comptime ModelT: type, comptime MsgT: type, comptime fe
         /// cluster. `tokens` must be the tokens the layout was built
         /// with: the scan re-measures text through the same seam to
         /// judge painted bounds, not frames.
-        fn windowControlsReservation(runtime: *Runtime, window_id: platform.WindowId, canvas_label: []const u8, layout: canvas.WidgetLayoutTree, tokens: canvas.DesignTokens) ?geometry.RectF {
+        fn windowControlsReservation(runtime: *Runtime, window_id: platform.WindowId, canvas_label: []const u8, layout: canvas.WidgetLayoutTree, tokens: canvas.DesignTokens) !?geometry.RectF {
             var has_drag_region = false;
             for (layout.nodes) |node| {
                 if (canvas.widgetIsWindowDragRegion(node.widget)) {
@@ -2542,7 +2544,7 @@ pub fn UiAppWithFeatures(comptime ModelT: type, comptime MsgT: type, comptime fe
                 }
             }
             if (!has_drag_region) return null;
-            const controls = runtime.windowControlsForView(window_id, canvas_label);
+            const controls = try runtime.windowControlsForView(window_id, canvas_label);
             if (controls.width <= 0 or controls.height <= 0) return null;
             if (!canvas.windowDragContentUnderWindowControls(layout.nodes, controls, tokens)) return null;
             return controls;
@@ -3255,7 +3257,7 @@ pub fn UiAppWithFeatures(comptime ModelT: type, comptime MsgT: type, comptime fe
             // exactly like the main window's, so a proven collision
             // stamps the cluster into THIS slot's tokens (a local copy —
             // other windows keep their own layout) for one more pass.
-            if (windowControlsReservation(runtime, slot.window_id, slot.canvasLabel(), built.layout, tokens)) |controls| {
+            if (try windowControlsReservation(runtime, slot.window_id, slot.canvasLabel(), built.layout, tokens)) |controls| {
                 tokens.window_controls = controls;
                 built = try self.buildWindowSlotPass(slot, bounds, tokens, next_index);
             }
@@ -4824,7 +4826,7 @@ pub fn UiAppWithFeatures(comptime ModelT: type, comptime MsgT: type, comptime fe
                 // rebuild below is the one that renders it), so a
                 // hidden-titlebar header is padded in the very first
                 // paint.
-                if (self.chromeInsetsMsg(runtime, frame_event.window_id)) |msg| {
+                if (try self.chromeInsetsMsg(runtime, frame_event.window_id)) |msg| {
                     self.applyMsg(msg);
                 }
                 try self.rebuild(runtime, frame_event.window_id);
@@ -5185,7 +5187,7 @@ pub fn UiAppWithFeatures(comptime ModelT: type, comptime MsgT: type, comptime fe
             // traffic lights); re-query on every resize and dispatch
             // only on change — `dispatch` already rebuilds, so the
             // plain-resize rebuild is the else arm.
-            if (self.chromeInsetsMsg(runtime, resize_event.window_id)) |msg| {
+            if (try self.chromeInsetsMsg(runtime, resize_event.window_id)) |msg| {
                 try self.dispatch(runtime, resize_event.window_id, msg);
                 return;
             }
@@ -5217,9 +5219,9 @@ pub fn UiAppWithFeatures(comptime ModelT: type, comptime MsgT: type, comptime fe
         /// The `on_chrome` delivery gate: query the platform's chrome
         /// overlay geometry for the canvas window and map it to a Msg
         /// when the app subscribed AND the geometry actually changed.
-        fn chromeInsetsMsg(self: *Self, runtime: *Runtime, window_id: platform.WindowId) ?MsgT {
+        fn chromeInsetsMsg(self: *Self, runtime: *Runtime, window_id: platform.WindowId) !?MsgT {
             const map = self.options.on_chrome orelse return null;
-            const chrome = runtime.options.platform.services.windowChrome(window_id);
+            const chrome = try runtime.windowChrome(window_id);
             if (self.window_chrome_known and std.meta.eql(chrome, self.window_chrome)) return null;
             self.window_chrome = chrome;
             self.window_chrome_known = true;
diff --git a/tests/compiled-core/build_core.sh b/tests/compiled-core/build_core.sh
index eca7f16cc..37c01bc99 100755
--- a/tests/compiled-core/build_core.sh
+++ b/tests/compiled-core/build_core.sh
@@ -59,12 +59,12 @@ case "$fixture" in
     contract="ai-chat"
     ;;
   soundboard)
-    source_root="examples/soundboard-ts/src"
+    source_root="examples/soundboard/src"
     sources="core.ts library.ts player.ts"
     contract="soundboard"
     ;;
   system-monitor)
-    source_root="examples/system-monitor-ts/src"
+    source_root="examples/system-monitor/src"
     sources="core.ts parsers.ts table.ts"
     contract="system-monitor"
     ;;
diff --git a/tests/ts-core/habits_e2e_tests.zig b/tests/ts-core/habits_e2e_tests.zig
new file mode 100644
index 000000000..ad87aba1f
--- /dev/null
+++ b/tests/ts-core/habits_e2e_tests.zig
@@ -0,0 +1,152 @@
+const std = @import("std");
+const sdk = @import("native_sdk");
+const core = @import("ts_habits_core");
+const reference = @import("habits_reference.zig");
+const canvas = sdk.canvas;
+
+fn compare(native: *const reference.Model, model: *const core.Model) !void {
+    try std.testing.expectEqual(native.habit_count, model.habits.len);
+    try std.testing.expectEqual(@as(i64, native.next_id), model.next_id);
+    try std.testing.expectEqualStrings(@tagName(native.filter), @tagName(model.filter));
+    try std.testing.expectEqual(@as(f64, native.chrome_leading), model.chrome_leading);
+    try std.testing.expectEqual(@as(f64, native.header_height), model.header_height);
+    for (native.habits[0..native.habit_count], model.habits) |*a, b| {
+        try std.testing.expectEqual(@as(i64, a.id), b.id);
+        try std.testing.expectEqualStrings(a.name(), b.name);
+        try std.testing.expectEqual(@as(i64, a.streak), b.streak);
+    }
+    var arena = std.heap.ArenaAllocator.init(std.testing.allocator);
+    defer arena.deinit();
+    const allocator = arena.allocator();
+    const summary = native.summaryLine(allocator);
+    defer allocator.free(summary);
+    try std.testing.expectEqualStrings(summary, model.summaryLine(allocator));
+    const visible = native.visible(allocator);
+    defer allocator.free(visible);
+    const actual = model.visible(allocator);
+    try std.testing.expectEqual(visible.len, actual.len);
+    for (visible, actual) |*a, b| {
+        try std.testing.expectEqual(@as(i64, a.id), b.id);
+        try std.testing.expectEqualStrings(a.name(), b.name);
+        try std.testing.expectEqual(@as(i64, a.streak), b.streak);
+    }
+}
+fn step(native: *reference.Model, model: *const core.Model, a: reference.Msg, b: core.Msg) !*const core.Model {
+    reference.update(native, a);
+    const result = core.update(model, b);
+    try compare(native, result);
+    return result;
+}
+test "compiled Habits core matches every native owned record through capacity filtering chrome and repeated arena cycles" {
+    var native = reference.initialModel();
+    const initial = core.initialModel();
+    var model = initial;
+    defer core.rt.frameReset();
+    try compare(&native, model);
+    for (0..80) |i| {
+        model = try step(&native, model, .add, .add);
+        const id: u32 = @intCast(i % 65 + 1);
+        model = try step(&native, model, .{ .done = id }, .{ .done = id });
+        model = try step(&native, model, .{ .set_filter = .active }, .{ .set_filter = .active });
+        model = try step(&native, model, .{ .set_filter = .all }, .{ .set_filter = .all });
+        core.rt.frameReset();
+    }
+    for ([_]f32{ 0, 52, 72, 23.125 }) |top| {
+        const chrome = sdk.WindowChrome{ .insets = .{ .left = 78, .top = top }, .buttons = .init(20, 19, 52, 14) };
+        model = try step(&native, model, .{ .chrome_changed = chrome }, .{ .chrome_changed = .{ .insets = .{ .top = chrome.insets.top, .left = chrome.insets.left, .right = 0, .bottom = 0 }, .buttons = .{ .x = 20, .y = 19, .width = 52, .height = 14 }, .tabsProjected = false } });
+    }
+    model = try step(&native, model, .{ .done = 999 }, .{ .done = 999 });
+    try std.testing.expectEqual(@as(usize, 64), model.habits.len);
+}
+test "compiled Habits policies preserve borrowed model names and complete view bytes" {
+    const model = core.initialModel();
+    defer core.rt.frameReset();
+    const allocator = std.testing.allocator;
+    const bytes = core.nativeView(allocator);
+    defer allocator.free(bytes);
+    const saved = try allocator.dupe(u8, bytes);
+    defer allocator.free(saved);
+    const name = model.habits[0].name;
+    for (0..64) |_| {
+        const request = [_]u8{ 0, '#', 'd', 'f', '2', '6', '7', '0' };
+        var result: [4]u8 = undefined;
+        try std.testing.expectEqual(@as(usize, 4), core.nativeThemePolicy(&request, &result));
+        try std.testing.expectEqualStrings("Meditate", name);
+        try std.testing.expectEqualSlices(u8, saved, bytes);
+        try std.testing.expectEqual(@as(usize, 3), model.habits.len);
+    }
+}
+test {
+    _ = @import("habits_reference_tests.zig");
+}
+
+fn equal(expected: anytype, actual: @TypeOf(expected)) anyerror!void {
+    const T = @TypeOf(expected);
+    switch (@typeInfo(T)) {
+        .@"struct" => |info| inline for (info.fields) |field| try equal(@field(expected, field.name), @field(actual, field.name)),
+        .optional => {
+            try std.testing.expectEqual(expected != null, actual != null);
+            if (expected) |value| try equal(value, actual.?);
+        },
+        .pointer => |info| if (info.size == .slice) {
+            try std.testing.expectEqual(expected.len, actual.len);
+            for (expected, actual) |a, b| try equal(a, b);
+        } else try std.testing.expectEqual(expected, actual),
+        .array => for (expected, actual) |a, b| try equal(a, b),
+        .@"union" => |info| if (info.tag_type != null) {
+            try std.testing.expectEqual(std.meta.activeTag(expected), std.meta.activeTag(actual));
+            switch (expected) {
+                inline else => |value, tag| try equal(value, @field(actual, @tagName(tag))),
+            }
+        } else @compileError("untagged parity value"),
+        else => try std.testing.expectEqual(expected, actual),
+    }
+}
+fn viewParity(native: *const reference.Model, model: *const core.Model) !void {
+    var arena = std.heap.ArenaAllocator.init(std.testing.allocator);
+    defer arena.deinit();
+    const allocator = arena.allocator();
+    var a = reference.HabitsUi.init(allocator);
+    const expected = try a.finalize(reference.CompiledHabitsView.build(&a, native));
+    const Ui = canvas.Ui(core.Msg);
+    const View = canvas.CompiledMarkupView(core.Model, core.Msg, @embedFile("app.native"));
+    var b = Ui.init(allocator);
+    const actual = try b.finalize(View.build(&b, model));
+    try equal(expected.root, actual.root);
+    try std.testing.expectEqual(expected.handlers.len, actual.handlers.len);
+    for (expected.handlers, actual.handlers) |old, new| {
+        try std.testing.expectEqual(old.id, new.id);
+        const a_msg = expected.msgForPointer(old.id, .up);
+        const b_msg = actual.msgForPointer(new.id, .up);
+        try std.testing.expectEqual(a_msg != null, b_msg != null);
+        if (a_msg) |msg| {
+            try std.testing.expectEqualStrings(@tagName(msg), @tagName(b_msg.?));
+            switch (msg) {
+                .done => |id| try std.testing.expectEqual(@as(i64, id), b_msg.?.done),
+                .set_filter => |filter| try std.testing.expectEqualStrings(@tagName(filter), @tagName(b_msg.?.set_filter)),
+                else => {},
+            }
+        }
+    }
+    var left: [1024]canvas.WidgetLayoutNode = undefined;
+    var right: [1024]canvas.WidgetLayoutNode = undefined;
+    const l = try canvas.layoutWidgetTree(expected.root, .init(0, 0, 720, 520), &left);
+    const v = try canvas.layoutWidgetTree(actual.root, .init(0, 0, 720, 520), &right);
+    try equal(l, v);
+}
+test "ported Habits preserves every native widget field handler identity and complete layout" {
+    var native = reference.initialModel();
+    var model = core.initialModel();
+    defer core.rt.frameReset();
+    try viewParity(&native, model);
+    for (0..8) |i| {
+        model = try step(&native, model, .add, .add);
+        try viewParity(&native, model);
+        model = try step(&native, model, .{ .done = @intCast(i + 1) }, .{ .done = @intCast(i + 1) });
+        model = try step(&native, model, .{ .set_filter = .active }, .{ .set_filter = .active });
+        try viewParity(&native, model);
+        model = try step(&native, model, .{ .set_filter = .all }, .{ .set_filter = .all });
+        try viewParity(&native, model);
+        core.rt.frameReset();
+    }
+}
diff --git a/examples/habits/src/habits.native b/tests/ts-core/habits_reference.native
similarity index 100%
rename from examples/habits/src/habits.native
rename to tests/ts-core/habits_reference.native
diff --git a/examples/habits/src/main.zig b/tests/ts-core/habits_reference.zig
similarity index 72%
rename from examples/habits/src/main.zig
rename to tests/ts-core/habits_reference.zig
index 159ca0197..fef5c2bf4 100644
--- a/examples/habits/src/main.zig
+++ b/tests/ts-core/habits_reference.zig
@@ -1,27 +1,8 @@
-//! habits: a small habit tracker authored in markup + Zig.
-//!
-//! The view lives in `habits.native`; this file is the logic: `Model`, `Msg`,
-//! and `update`. Rows carry a markup `global-key` pinned to the habit id,
-//! so a row keeps its widget identity across rebuilds and filtering.
-//!
-//! The markup runs on one of two engines depending on the build mode:
-//! release builds use `canvas.CompiledMarkupView` — the source is parsed
-//! entirely at comptime, so the binary carries no markup parser and a
-//! markup mistake is a compile error — while debug builds additionally
-//! ship the runtime interpreter and watch `src/habits.native`: the compiled
-//! view renders until the file first changes on disk, then hot reload
-//! takes over without losing streak state.
-
+// Native behavior reference for the compiled Habits core and view.
 const std = @import("std");
-const builtin = @import("builtin");
-const runner = @import("runner");
 const native_sdk = @import("native_sdk");
-
-pub const panic = std.debug.FullPanic(native_sdk.debug.capturePanic);
-
 const canvas = native_sdk.canvas;
 const geometry = native_sdk.geometry;
-
 const canvas_label = "habits-canvas";
 const window_width: f32 = 720;
 const window_height: f32 = 520;
@@ -45,7 +26,7 @@ const shell_windows = [_]native_sdk.ShellWindow{.{
     // it through the STARTUP window create): the header row IS the
     // titlebar — it pads its leading edge past the traffic lights via
     // `on_chrome` and is the window's drag surface (`window-drag` in
-    // habits.native).
+    // app.native).
     .titlebar = .hidden_inset_tall,
     .views = &shell_views,
 }};
@@ -180,21 +161,12 @@ pub fn onChrome(chrome: native_sdk.WindowChrome) ?Msg {
 // ------------------------------------------------------------------- view
 
 pub const HabitsUi = canvas.Ui(Msg);
-pub const habits_markup = @embedFile("habits.native");
+pub const habits_markup = @embedFile("habits_reference.native");
 
 /// The comptime-compiled engine: same tree, ids, and handlers as the
 /// interpreter, no parser in the binary.
 pub const CompiledHabitsView = canvas.CompiledMarkupView(Model, Msg, habits_markup);
 
-// -------------------------------------------------------------------- app
-
-/// Debug builds keep the runtime markup engine for hot reload; release
-/// builds compile it out entirely (`zig build` produces a release app —
-/// grep it for parser diagnostics to confirm nothing survived).
-const dev_markup_reload = builtin.mode == .Debug;
-
-const HabitsApp = native_sdk.UiAppWithFeatures(Model, Msg, .{ .runtime_markup = dev_markup_reload });
-
 pub fn initialModel() Model {
     var model = Model{};
     model.addHabit("Meditate", 12);
@@ -202,36 +174,3 @@ pub fn initialModel() Model {
     model.addHabit("Read 20 pages", 9);
     return model;
 }
-
-pub fn main(init: std.process.Init) !void {
-    const app_state = try std.heap.page_allocator.create(HabitsApp);
-    defer std.heap.page_allocator.destroy(app_state);
-    app_state.* = HabitsApp.init(std.heap.page_allocator, initialModel(), .{
-        .name = "habits",
-        .scene = shell_scene,
-        .canvas_label = canvas_label,
-        .update = update,
-        .on_chrome = onChrome,
-        .view = CompiledHabitsView.build,
-        .markup = if (dev_markup_reload)
-            .{ .source = habits_markup, .watch_path = "src/habits.native", .io = init.io }
-        else
-            null,
-    });
-    defer app_state.deinit();
-    try runner.runWithOptions(app_state.app(), .{
-        .app_name = "habits",
-        .window_title = "Native SDK Habits",
-        .bundle_id = "dev.native_sdk.habits",
-        .default_frame = geometry.RectF.init(0, 0, window_width, window_height),
-        .js_window_api = false,
-        .security = .{
-            .permissions = &app_permissions,
-            .navigation = .{ .allowed_origins = &.{ "zero://inline", "zero://app" } },
-        },
-    }, init);
-}
-
-test {
-    _ = @import("tests.zig");
-}
diff --git a/examples/habits/src/tests.zig b/tests/ts-core/habits_reference_tests.zig
similarity index 99%
rename from examples/habits/src/tests.zig
rename to tests/ts-core/habits_reference_tests.zig
index 3ca9fb4b7..4faa7aafa 100644
--- a/examples/habits/src/tests.zig
+++ b/tests/ts-core/habits_reference_tests.zig
@@ -1,6 +1,6 @@
 const std = @import("std");
 const native_sdk = @import("native_sdk");
-const main = @import("main.zig");
+const main = @import("habits_reference.zig");
 
 const canvas = native_sdk.canvas;
 const testing = std.testing;
@@ -212,7 +212,6 @@ test "the habits view lays out through the canvas engine" {
     try testing.expect(saw_button);
 }
 
-
 test "a11y audit sweep: every interactive widget is named, reachable, and unambiguous" {
     var arena_state = std.heap.ArenaAllocator.init(testing.allocator);
     defer arena_state.deinit();
diff --git a/tests/ts-core/markup_e2e_tests.zig b/tests/ts-core/markup_e2e_tests.zig
index de2f46d1f..4fa185a3a 100644
--- a/tests/ts-core/markup_e2e_tests.zig
+++ b/tests/ts-core/markup_e2e_tests.zig
@@ -466,7 +466,7 @@ test "automation set_text drives a compiled-core text field (select-all sentinel
     // sentinel, and the declared-union translation must SATURATE it into
     // the core's i64 field class — @intCast here panicked "integer does
     // not fit in destination type" on every compiled-core text field
-    // (the live-GUI smoke's soundboard-ts search crash).
+    // (the live-GUI smoke's soundboard search crash).
     var buffer: [96]u8 = undefined;
     const command = try std.fmt.bufPrint(&buffer, "widget-action {s} {d} set-text yo", .{ canvas_label, field });
     try h.harness.runtime.dispatchAutomationCommand(h.app, command);
diff --git a/tests/ts-core/scaffold_ide_e2e_tests.zig b/tests/ts-core/scaffold_ide_e2e_tests.zig
index 0743e7b64..e50bf8924 100644
--- a/tests/ts-core/scaffold_ide_e2e_tests.zig
+++ b/tests/ts-core/scaffold_ide_e2e_tests.zig
@@ -109,7 +109,7 @@ test "the committed TS example ports typecheck under stock tsc (multi-file cores
     const bundled = try tooling.ts_core.bundledSdkVersion(allocator, io, ".");
     defer allocator.free(bundled);
 
-    const ports = [_][]const u8{ "examples/kanban", "examples/soundboard-ts", "examples/system-monitor-ts" };
+    const ports = [_][]const u8{ "examples/kanban", "examples/habits", "examples/soundboard", "examples/system-monitor" };
     for (ports, 0..) |port, index| {
         var stage_buffer: [128]u8 = undefined;
         const stage = try std.fmt.bufPrint(&stage_buffer, ".zig-cache/e2e-ide-port-{d}", .{index});
diff --git a/tests/ts-core/soundboard_e2e_tests.zig b/tests/ts-core/soundboard_e2e_tests.zig
index 1dc5d2464..22297d440 100644
--- a/tests/ts-core/soundboard_e2e_tests.zig
+++ b/tests/ts-core/soundboard_e2e_tests.zig
@@ -1,7 +1,7 @@
-//! End-to-end proof battery for examples/soundboard-ts — the launch-gate
+//! End-to-end proof battery for examples/soundboard — the launch-gate
 //! port: a soundboard-complexity app authored in TypeScript + Native
 //! markup with ZERO hand-written Zig. The build compiles the example's
-//! REAL core (examples/soundboard-ts/src/core.ts) and this suite drives
+//! REAL core (examples/soundboard/src/core.ts) and this suite drives
 //! it through `TsUiApp` with the example's SHIPPING markup
 //! (app.native, staged beside this file), so every pin here is the
 //! product path, not a fixture:
@@ -89,7 +89,7 @@ fn commandId(name: []const u8, prefix: []const u8) ?i64 {
 
 fn appOptions() App.Options {
     return .{
-        .name = "soundboard-ts-e2e",
+        .name = "soundboard-e2e",
         .scene = app_scene,
         .canvas_label = canvas_label,
         // The comptime-compiled engine over the example's shipping markup
@@ -661,7 +661,7 @@ fn recordSession(buffer: *JournalBuffer) !SoundboardSnapshot {
     const recorder = try std.heap.page_allocator.create(runtime_ns.SessionRecorder);
     defer std.heap.page_allocator.destroy(recorder);
     recorder.* = runtime_ns.SessionRecorder.init(buffer.sink());
-    recorder.begin(.{ .platform_name = "test", .app_name = "soundboard-ts-e2e", .window_width = 1080, .window_height = 720 });
+    recorder.begin(.{ .platform_name = "test", .app_name = "soundboard-e2e", .window_width = 1080, .window_height = 720 });
 
     const h = try Harness.createRecorded(recorder);
     defer h.destroy();
@@ -1167,7 +1167,7 @@ test "the manifest accent layers the original's pink over the pack (high contras
 // the homepage-shots recipe):
 //
 //   mkdir -p /tmp/soundboard-art
-//   for f in examples/soundboard/src/art/*.jpg; do
+//   for f in examples/soundboard/assets/art/*.jpg; do
 //     magick "$f" -depth 8 rgba:/tmp/soundboard-art/"$(basename "${f%.jpg}")".rgba
 //   done
 //   PARITY_SHOTS=1 zig build test-ts-core-e2e
diff --git a/tests/ts-core/system_monitor_e2e_tests.zig b/tests/ts-core/system_monitor_e2e_tests.zig
index bdd5782a4..09437f47e 100644
--- a/tests/ts-core/system_monitor_e2e_tests.zig
+++ b/tests/ts-core/system_monitor_e2e_tests.zig
@@ -1,7 +1,7 @@
-//! End-to-end proof battery for examples/system-monitor-ts — the second
+//! End-to-end proof battery for examples/system-monitor — the second
 //! port: the spawn-showcase app authored in TypeScript + Native markup
 //! with ZERO hand-written Zig. The build compiles the example's REAL
-//! core (examples/system-monitor-ts/src/core.ts) and this suite drives it
+//! core (examples/system-monitor/src/core.ts) and this suite drives it
 //! through `TsUiApp` with the example's SHIPPING markup (app.native,
 //! staged beside this file) on the FAKE effects executor, so every spawn
 //! parks for scripted answers instead of running the host's real `ps`:
@@ -114,7 +114,7 @@ fn commandId(name: []const u8, prefix: []const u8) ?i64 {
 
 fn appOptions() App.Options {
     return .{
-        .name = "system-monitor-ts-e2e",
+        .name = "system-monitor-e2e",
         .scene = app_scene,
         .canvas_label = canvas_label,
         // The comptime-compiled engine over the example's shipping markup
@@ -801,7 +801,7 @@ fn recordSession(buffer: *JournalBuffer) !MonitorSnapshot {
     const recorder = try std.heap.page_allocator.create(runtime_ns.SessionRecorder);
     defer std.heap.page_allocator.destroy(recorder);
     recorder.* = runtime_ns.SessionRecorder.init(buffer.sink());
-    recorder.begin(.{ .platform_name = "test", .app_name = "system-monitor-ts-e2e", .window_width = 1144, .window_height = 720 });
+    recorder.begin(.{ .platform_name = "test", .app_name = "system-monitor-e2e", .window_width = 1144, .window_height = 720 });
 
     const h = try Harness.createRecorded(recorder);
     defer h.destroy();
diff --git a/tools/prepare-example-music.sh b/tools/prepare-example-music.sh
index c18c426dd..1380adf31 100755
--- a/tools/prepare-example-music.sh
+++ b/tools/prepare-example-music.sh
@@ -70,8 +70,8 @@ CATALOG=(
     "Color TV|Channel Surfing|Color TV|1|color tv.png"
 )
 
-# Committed album art lands beside the manifest, under each example's
-# src/ (the module root `@embedFile` reaches). 512px JPEG: the display
+# Soundboard registers committed album art from assets/; Deck keeps its
+# embedded copies under src/ (the module root `@embedFile` reaches). 512px JPEG: the display
 # register is ~256pt at 2x, and JPEG is the only route that keeps real
 # artwork well under the commit budget — the repo's own PNG codec
 # writes stored (uncompressed) deflate only, which is ~1MB at this
@@ -81,7 +81,7 @@ CATALOG=(
 # decode JPEG, so the hermetic suites exercise the honest initials /
 # pure-vector fallback instead — the same state a codec-less host shows.
 ART_SRC="$SRC_ROOT/art"
-ART_OUT="$REPO_ROOT/examples/soundboard/src/art"
+ART_OUT="$REPO_ROOT/examples/soundboard/assets/art"
 DECK_ART_OUT="$REPO_ROOT/examples/deck/src/art"
 
 # Downscale, strip, and verify one album's art. Prints nothing; the