diff --git a/cspell.config.yaml b/cspell.config.yaml
index 0e69379d7..a579aeec1 100644
--- a/cspell.config.yaml
+++ b/cspell.config.yaml
@@ -315,6 +315,7 @@ words:
   - Unlisten
   - unocss
   - unplugin
+  - unref
   - unspeech
   - upterm
   - userversion
diff --git a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-airi-card.avif b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-airi-card.avif
index 71fd42ba2..5ebce065b 100644
Binary files a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-airi-card.avif and b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-airi-card.avif differ
diff --git a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-chat-window.avif b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-chat-window.avif
index 5caaa60d9..196db0efa 100644
Binary files a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-chat-window.avif and b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-chat-window.avif differ
diff --git a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-consciousness.avif b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-consciousness.avif
index 9a1c75b8d..007d32d21 100644
Binary files a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-consciousness.avif and b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-consciousness.avif differ
diff --git a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-controls-island-expanded.avif b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-controls-island-expanded.avif
index ecd69fecd..f354a965b 100644
Binary files a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-controls-island-expanded.avif and b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-controls-island-expanded.avif differ
diff --git a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-data-settings.avif b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-data-settings.avif
index a88b74bd8..2f51b5b3c 100644
Binary files a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-data-settings.avif and b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-data-settings.avif differ
diff --git a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-devtools-beat-sync.avif b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-devtools-beat-sync.avif
index 09ddd5827..26fec3cfe 100644
Binary files a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-devtools-beat-sync.avif and b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-devtools-beat-sync.avif differ
diff --git a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-devtools-context-flow.avif b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-devtools-context-flow.avif
index 57333797c..0ad6a5c9d 100644
Binary files a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-devtools-context-flow.avif and b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-devtools-context-flow.avif differ
diff --git a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-devtools-displays.avif b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-devtools-displays.avif
index dcedc585e..1a059c6ab 100644
Binary files a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-devtools-displays.avif and b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-devtools-displays.avif differ
diff --git a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-devtools-plugin-host.avif b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-devtools-plugin-host.avif
index 0006c8b0a..4efd21365 100644
Binary files a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-devtools-plugin-host.avif and b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-devtools-plugin-host.avif differ
diff --git a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-devtools-relative-mouse.avif b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-devtools-relative-mouse.avif
index bb90b557b..5736ff5ca 100644
Binary files a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-devtools-relative-mouse.avif and b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-devtools-relative-mouse.avif differ
diff --git a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-devtools-screen-capture.avif b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-devtools-screen-capture.avif
index 745e0784e..d0d6b1013 100644
Binary files a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-devtools-screen-capture.avif and b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-devtools-screen-capture.avif differ
diff --git a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-devtools-use-window-mouse.avif b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-devtools-use-window-mouse.avif
index a5bcd6447..092317926 100644
Binary files a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-devtools-use-window-mouse.avif and b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-devtools-use-window-mouse.avif differ
diff --git a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-devtools-vision-capture.avif b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-devtools-vision-capture.avif
index 4bea2b23c..9ee83d5d6 100644
Binary files a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-devtools-vision-capture.avif and b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-devtools-vision-capture.avif differ
diff --git a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-devtools-websocket-inspector.avif b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-devtools-websocket-inspector.avif
index 50875d777..6dc15ff78 100644
Binary files a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-devtools-websocket-inspector.avif and b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-devtools-websocket-inspector.avif differ
diff --git a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-devtools-widgets-calling.avif b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-devtools-widgets-calling.avif
index 5992ec885..dcc4fca63 100644
Binary files a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-devtools-widgets-calling.avif and b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-devtools-widgets-calling.avif differ
diff --git a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-hearing.avif b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-hearing.avif
index 29d0323ad..f44ac3961 100644
Binary files a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-hearing.avif and b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-hearing.avif differ
diff --git a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-main-window.avif b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-main-window.avif
index 727e24a1c..0a5594e09 100644
Binary files a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-main-window.avif and b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-main-window.avif differ
diff --git a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-models.avif b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-models.avif
index ee133205e..282d9bb28 100644
Binary files a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-models.avif and b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-models.avif differ
diff --git a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-modules.avif b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-modules.avif
index 952be9eff..6ac9536fd 100644
Binary files a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-modules.avif and b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-modules.avif differ
diff --git a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-providers.avif b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-providers.avif
index ef6d5ad66..5cb91f36c 100644
Binary files a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-providers.avif and b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-providers.avif differ
diff --git a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-settings-window.avif b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-settings-window.avif
index 5cf9e0b4f..bd68d8c8b 100644
Binary files a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-settings-window.avif and b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-settings-window.avif differ
diff --git a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-speech.avif b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-speech.avif
index e226d36a5..800c74265 100644
Binary files a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-speech.avif and b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-speech.avif differ
diff --git a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-system-color-scheme.avif b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-system-color-scheme.avif
index 28eda62f8..a61ccf7ae 100644
Binary files a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-system-color-scheme.avif and b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-system-color-scheme.avif differ
diff --git a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-system-developer.avif b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-system-developer.avif
index 9c35e2d2d..3a6e6bd1c 100644
Binary files a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-system-developer.avif and b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-system-developer.avif differ
diff --git a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-system-general.avif b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-system-general.avif
index ac8bb9114..657abe251 100644
Binary files a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-system-general.avif and b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-system-general.avif differ
diff --git a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-vision.avif b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-vision.avif
index 3c906fa4f..72d750970 100644
Binary files a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-vision.avif and b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-vision.avif differ
diff --git a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-websocket-settings.avif b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-websocket-settings.avif
index 003b3cab7..9f1375a70 100644
Binary files a/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-websocket-settings.avif and b/docs/content/en/docs/manual/tamagotchi/setup-and-use/assets/manual-websocket-settings.avif differ
diff --git a/packages/scenarios-stage-tamagotchi-browser/README.md b/packages/scenarios-stage-tamagotchi-browser/README.md
index 85a245ab0..f4e54df9b 100644
--- a/packages/scenarios-stage-tamagotchi-browser/README.md
+++ b/packages/scenarios-stage-tamagotchi-browser/README.md
@@ -8,43 +8,67 @@ This package is the tamagotchi browser composition layer. It contains:
 
 - the Vite/Vue scene app
 - the scene composition components and capture roots
+- file-based scene routing from `src/scenes/**` via `unplugin-vue-router`
 - the `capture` script that exports final browser captures through `@proj-airi/vishot-runner-browser`
 
 It expects raw business screenshots to exist in `artifacts/raw` before final export runs.
 
+Current docs capture target route:
+
+- `/docs/setup-and-use` -> `src/scenes/docs/setup-and-use/index.vue`
+- `/docs/setup-and-use/intro-chat` -> `src/scenes/docs/setup-and-use/intro-chat.vue`
+- `/docs/setup-and-use/intro-websocket` -> `src/scenes/docs/setup-and-use/intro-websocket.vue`
+- `/docs/setup-and-use/main-window` -> `src/scenes/docs/setup-and-use/main-window.vue`
+- `/docs/setup-and-use/settings` -> `src/scenes/docs/setup-and-use/settings.vue`
+
 ## Workflow
 
-1. Build the Electron app.
-2. Capture raw screenshots into this package's `artifacts/raw` directory.
-3. Run this package's `capture` script to export the composed scene roots into `artifacts/final`.
+1. Run Electron capture first and populate `artifacts/raw` (see electron package README).
+2. Run browser capture and output final composed files to docs assets.
+
+## Agent Quickstart
+
+From repo root, run:
 
 ```bash
-pnpm -F @proj-airi/stage-tamagotchi build
-pnpm -F @proj-airi/vishot-runner-electron capture -- ../../packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket.ts --output-dir ../../packages/scenarios-stage-tamagotchi-browser/artifacts/raw
-pnpm -F @proj-airi/scenarios-stage-tamagotchi-browser capture
+pnpm -F @proj-airi/vishot-runner-electron capture ../../packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/index.ts --output-dir ../../packages/scenarios-stage-tamagotchi-browser/artifacts/raw --format avif
+pnpm -F @proj-airi/scenarios-stage-tamagotchi-browser capture --format avif --route '/docs/setup-and-use/intro-chat' --output-dir ../../docs/content/en/docs/manual/tamagotchi/setup-and-use/assets --settle-ms 800
+pnpm -F @proj-airi/scenarios-stage-tamagotchi-browser capture --format avif --route '/docs/setup-and-use/intro-websocket' --output-dir ../../docs/content/en/docs/manual/tamagotchi/setup-and-use/assets --settle-ms 800
+pnpm -F @proj-airi/scenarios-stage-tamagotchi-browser capture --format avif --route '/docs/setup-and-use/main-window' --output-dir ../../docs/content/en/docs/manual/tamagotchi/setup-and-use/assets --settle-ms 800
+pnpm -F @proj-airi/scenarios-stage-tamagotchi-browser capture --format avif --route '/docs/setup-and-use/settings' --output-dir ../../docs/content/en/docs/manual/tamagotchi/setup-and-use/assets --settle-ms 800
 ```
 
-Expected raw inputs:
+Expected results:
 
-- `artifacts/raw/00-stage-tamagotchi.png`
-- `artifacts/raw/04-websocket-settings.png`
+- Raw: `27` files under `packages/scenarios-stage-tamagotchi-browser/artifacts/raw`
+- Final docs assets: `manual-*.avif` and `intro-chat-window.avif` under `docs/content/en/docs/manual/tamagotchi/setup-and-use/assets`
 
-Current composed outputs:
+## Capture Flags
 
-- `artifacts/final/intro-chat-window.png`
-- `artifacts/final/intro-websocket-settings.png`
+The browser capture script supports:
 
-Optional AVIF export:
+- `--format <png|avif>` (default: `png`)
+- `--route </path>` (default: `/docs/setup-and-use`)
+- `--output-dir <path>` (default: `artifacts/final`)
+- `--settle-ms <number>` (default: `500`) extra delay after scene ready before screenshot
+
+Examples:
 
 ```bash
-pnpm -F @proj-airi/scenarios-stage-tamagotchi-browser capture -- --format avif
+pnpm -F @proj-airi/scenarios-stage-tamagotchi-browser capture --format avif --settle-ms 800
+pnpm -F @proj-airi/scenarios-stage-tamagotchi-browser capture --route /docs/setup-and-use --settle-ms 800
+pnpm -F @proj-airi/scenarios-stage-tamagotchi-browser capture --route /docs/setup-and-use/settings --settle-ms 800
+pnpm -F @proj-airi/scenarios-stage-tamagotchi-browser capture --format avif --route /docs/setup-and-use --output-dir ../../docs/content/en/docs/manual/tamagotchi/setup-and-use/assets --settle-ms 800
 ```
 
-The browser capture flow still starts from PNG because that is the Playwright screenshot format. The package's `capture` script can opt into an AVIF post-processing step through Vishot's `imageTransformers` hook.
+The browser capture flow starts from Playwright PNG screenshots, then optionally transforms to AVIF via Vishot `imageTransformers`.
 
 ## Notes
 
-- The current scene app renders `src/scenes/intro-manual-scene.vue`.
+- This package can host multiple scene pages. Add Vue SFC routes under `src/scenes/**` (for example `src/scenes/docs/setup-and-use/index.vue`).
+- The default capture route is `/docs/setup-and-use`. Override it with `--route /your/path`.
+- Captures are produced only for roots mounted by the exact route you pass. For full setup manual assets, run captures for `/docs/setup-and-use/intro-chat`, `/docs/setup-and-use/intro-websocket`, `/docs/setup-and-use/main-window`, and `/docs/setup-and-use/settings`.
 - Final export depends on the browser scene reaching the `__SCENARIO_CAPTURE_READY__` flag after its raw images load.
 - If raw capture is missing or stale, final export will fail or render outdated assets.
 - If you enable AVIF output, the final artifact filenames switch from `.png` to `.avif` because the transformer replaces the emitted PNG files after capture.
+- Paths in these `pnpm -F` examples are resolved from the filtered package working directory.
diff --git a/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/00-stage-tamagotchi.avif b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/00-stage-tamagotchi.avif
new file mode 100644
index 000000000..b66c68675
Binary files /dev/null and b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/00-stage-tamagotchi.avif differ
diff --git a/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/01-controls-island-expanded.avif b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/01-controls-island-expanded.avif
new file mode 100644
index 000000000..a66f30deb
Binary files /dev/null and b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/01-controls-island-expanded.avif differ
diff --git a/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/02-settings-window.avif b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/02-settings-window.avif
new file mode 100644
index 000000000..97700b527
Binary files /dev/null and b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/02-settings-window.avif differ
diff --git a/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/03-websocket-settings.avif b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/03-websocket-settings.avif
new file mode 100644
index 000000000..63f1ef5f2
Binary files /dev/null and b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/03-websocket-settings.avif differ
diff --git a/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/04-chat-window.avif b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/04-chat-window.avif
new file mode 100644
index 000000000..73e315959
Binary files /dev/null and b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/04-chat-window.avif differ
diff --git a/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/05-airi-card.avif b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/05-airi-card.avif
new file mode 100644
index 000000000..09f520287
Binary files /dev/null and b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/05-airi-card.avif differ
diff --git a/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/06-providers.avif b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/06-providers.avif
new file mode 100644
index 000000000..4621150d3
Binary files /dev/null and b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/06-providers.avif differ
diff --git a/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/07-data.avif b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/07-data.avif
new file mode 100644
index 000000000..edc9fbe42
Binary files /dev/null and b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/07-data.avif differ
diff --git a/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/08-system-general.avif b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/08-system-general.avif
new file mode 100644
index 000000000..739031c6b
Binary files /dev/null and b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/08-system-general.avif differ
diff --git a/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/09-system-color-scheme.avif b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/09-system-color-scheme.avif
new file mode 100644
index 000000000..16df855da
Binary files /dev/null and b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/09-system-color-scheme.avif differ
diff --git a/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/10-models.avif b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/10-models.avif
new file mode 100644
index 000000000..1efcdfb22
Binary files /dev/null and b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/10-models.avif differ
diff --git a/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/11-modules.avif b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/11-modules.avif
new file mode 100644
index 000000000..d5384c999
Binary files /dev/null and b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/11-modules.avif differ
diff --git a/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/12-hearing.avif b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/12-hearing.avif
new file mode 100644
index 000000000..fd132de17
Binary files /dev/null and b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/12-hearing.avif differ
diff --git a/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/13-system-developer.avif b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/13-system-developer.avif
new file mode 100644
index 000000000..29487c9ea
Binary files /dev/null and b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/13-system-developer.avif differ
diff --git a/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/14-consciousness.avif b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/14-consciousness.avif
new file mode 100644
index 000000000..ad69430e1
Binary files /dev/null and b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/14-consciousness.avif differ
diff --git a/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/15-speech.avif b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/15-speech.avif
new file mode 100644
index 000000000..5c7480089
Binary files /dev/null and b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/15-speech.avif differ
diff --git a/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/16-vision.avif b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/16-vision.avif
new file mode 100644
index 000000000..73f599cce
Binary files /dev/null and b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/16-vision.avif differ
diff --git a/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/17-devtools-use-window-mouse.avif b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/17-devtools-use-window-mouse.avif
new file mode 100644
index 000000000..048ce4542
Binary files /dev/null and b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/17-devtools-use-window-mouse.avif differ
diff --git a/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/18-devtools-displays.avif b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/18-devtools-displays.avif
new file mode 100644
index 000000000..baf023030
Binary files /dev/null and b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/18-devtools-displays.avif differ
diff --git a/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/19-devtools-widgets-calling.avif b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/19-devtools-widgets-calling.avif
new file mode 100644
index 000000000..3d1c836bf
Binary files /dev/null and b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/19-devtools-widgets-calling.avif differ
diff --git a/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/20-devtools-context-flow.avif b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/20-devtools-context-flow.avif
new file mode 100644
index 000000000..6fd06686a
Binary files /dev/null and b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/20-devtools-context-flow.avif differ
diff --git a/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/21-devtools-relative-mouse.avif b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/21-devtools-relative-mouse.avif
new file mode 100644
index 000000000..cd6cf2aff
Binary files /dev/null and b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/21-devtools-relative-mouse.avif differ
diff --git a/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/22-devtools-beat-sync.avif b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/22-devtools-beat-sync.avif
new file mode 100644
index 000000000..ec2fadf77
Binary files /dev/null and b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/22-devtools-beat-sync.avif differ
diff --git a/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/23-devtools-websocket-inspector.avif b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/23-devtools-websocket-inspector.avif
new file mode 100644
index 000000000..17c4116ae
Binary files /dev/null and b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/23-devtools-websocket-inspector.avif differ
diff --git a/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/24-devtools-plugin-host.avif b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/24-devtools-plugin-host.avif
new file mode 100644
index 000000000..8fb23070b
Binary files /dev/null and b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/24-devtools-plugin-host.avif differ
diff --git a/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/25-devtools-screen-capture.avif b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/25-devtools-screen-capture.avif
new file mode 100644
index 000000000..dcd2b5df0
Binary files /dev/null and b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/25-devtools-screen-capture.avif differ
diff --git a/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/26-devtools-vision-capture.avif b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/26-devtools-vision-capture.avif
new file mode 100644
index 000000000..c326e7249
Binary files /dev/null and b/packages/scenarios-stage-tamagotchi-browser/artifacts/raw/26-devtools-vision-capture.avif differ
diff --git a/packages/scenarios-stage-tamagotchi-browser/package.json b/packages/scenarios-stage-tamagotchi-browser/package.json
index cb6ae6976..42fed1840 100644
--- a/packages/scenarios-stage-tamagotchi-browser/package.json
+++ b/packages/scenarios-stage-tamagotchi-browser/package.json
@@ -26,15 +26,20 @@
     "@napi-rs/image": "^1.12.0",
     "@proj-airi/vishot-runner-browser": "workspace:^",
     "@proj-airi/vishot-runtime": "workspace:^",
+    "@vueuse/core": "catalog:",
     "date-fns": "catalog:",
-    "vue": "catalog:"
+    "reka-ui": "^2.9.5",
+    "vue": "catalog:",
+    "vue-router": "catalog:"
   },
   "devDependencies": {
     "@iconify-json/line-md": "catalog:",
     "@iconify-json/material-symbols": "catalog:",
     "@iconify-json/mdi": "catalog:",
+    "@iconify-json/ph": "catalog:",
     "@unocss/reset": "^66.6.8",
     "@vitejs/plugin-vue": "^6.0.5",
+    "unplugin-vue-router": "^0.19.2",
     "vue-tsc": "^3.2.6"
   }
 }
diff --git a/packages/scenarios-stage-tamagotchi-browser/scripts/capture.ts b/packages/scenarios-stage-tamagotchi-browser/scripts/capture.ts
index 97612f78e..b44df4468 100644
--- a/packages/scenarios-stage-tamagotchi-browser/scripts/capture.ts
+++ b/packages/scenarios-stage-tamagotchi-browser/scripts/capture.ts
@@ -8,14 +8,42 @@ import { argv, cwd } from 'node:process'
 import { Transformer } from '@napi-rs/image'
 import { captureBrowserRoots } from '@proj-airi/vishot-runner-browser'
 
+const DEFAULT_AVIF_MAX_WIDTH = 1200
+const DEFAULT_AVIF_QUALITY = 35
+const DEFAULT_AVIF_SPEED = 6
+
 const sceneAppRoot = path.resolve(cwd())
-const outputDir = path.resolve(sceneAppRoot, 'artifacts', 'final')
 const formatFlagIndex = argv.findIndex(arg => arg === '--format')
+const routeFlagIndex = argv.findIndex(arg => arg === '--route')
+const outputDirFlagIndex = argv.findIndex(arg => arg === '--output-dir')
+const settleMsFlagIndex = argv.findIndex(arg => arg === '--settle-ms')
+const avifMaxWidthFlagIndex = argv.findIndex(arg => arg === '--avif-max-width')
+const avifQualityFlagIndex = argv.findIndex(arg => arg === '--avif-quality')
+const avifSpeedFlagIndex = argv.findIndex(arg => arg === '--avif-speed')
 const requestedFormat = formatFlagIndex >= 0 ? argv[formatFlagIndex + 1] : 'png'
+const routePath = routeFlagIndex >= 0 ? argv[routeFlagIndex + 1] : '/docs/setup-and-use'
+const settleMs = settleMsFlagIndex >= 0 ? Number(argv[settleMsFlagIndex + 1]) : 500
+const avifMaxWidth = avifMaxWidthFlagIndex >= 0 ? Number(argv[avifMaxWidthFlagIndex + 1]) : DEFAULT_AVIF_MAX_WIDTH
+const avifQuality = avifQualityFlagIndex >= 0 ? Number(argv[avifQualityFlagIndex + 1]) : DEFAULT_AVIF_QUALITY
+const avifSpeed = avifSpeedFlagIndex >= 0 ? Number(argv[avifSpeedFlagIndex + 1]) : DEFAULT_AVIF_SPEED
+const outputDir = outputDirFlagIndex >= 0
+  ? path.resolve(sceneAppRoot, argv[outputDirFlagIndex + 1])
+  : path.resolve(sceneAppRoot, 'artifacts', 'final')
 
 const avifTransformer: ArtifactTransformer = async (artifact) => {
   const derivedFilePath = artifact.filePath.replace(/\.png$/i, '.avif')
-  const avifBuffer = await new Transformer(await readFile(artifact.filePath)).avif()
+  const transformer = new Transformer(await readFile(artifact.filePath))
+  const metadata = await transformer.metadata()
+
+  if (metadata.width > avifMaxWidth) {
+    const scale = avifMaxWidth / metadata.width
+    transformer.resize(avifMaxWidth, Math.round(metadata.height * scale))
+  }
+
+  const avifBuffer = await transformer.avif({
+    quality: avifQuality,
+    speed: avifSpeed,
+  })
 
   await writeFile(derivedFilePath, avifBuffer)
   await rm(artifact.filePath, { force: true })
@@ -31,13 +59,54 @@ if (!['png', 'avif'].includes(requestedFormat)) {
   throw new Error(`Unsupported capture format "${requestedFormat}". Expected "png" or "avif".`)
 }
 
+if (!routePath?.startsWith('/')) {
+  throw new Error(`Unsupported route path "${routePath}". Route paths must start with "/".`)
+}
+
+if (outputDirFlagIndex >= 0 && !argv[outputDirFlagIndex + 1]) {
+  throw new Error('Missing value for --output-dir.')
+}
+
+if (settleMsFlagIndex >= 0 && !argv[settleMsFlagIndex + 1]) {
+  throw new Error('Missing value for --settle-ms.')
+}
+
+if (avifMaxWidthFlagIndex >= 0 && !argv[avifMaxWidthFlagIndex + 1]) {
+  throw new Error('Missing value for --avif-max-width.')
+}
+
+if (avifQualityFlagIndex >= 0 && !argv[avifQualityFlagIndex + 1]) {
+  throw new Error('Missing value for --avif-quality.')
+}
+
+if (avifSpeedFlagIndex >= 0 && !argv[avifSpeedFlagIndex + 1]) {
+  throw new Error('Missing value for --avif-speed.')
+}
+
+if (!Number.isFinite(settleMs) || settleMs < 0) {
+  throw new Error(`Unsupported settle delay "${argv[settleMsFlagIndex + 1] ?? settleMs}". Expected a number >= 0.`)
+}
+
+if (!Number.isFinite(avifMaxWidth) || avifMaxWidth < 1) {
+  throw new Error(`Unsupported AVIF max width "${argv[avifMaxWidthFlagIndex + 1] ?? avifMaxWidth}". Expected a number >= 1.`)
+}
+
+if (!Number.isFinite(avifQuality) || avifQuality < 0 || avifQuality > 100) {
+  throw new Error(`Unsupported AVIF quality "${argv[avifQualityFlagIndex + 1] ?? avifQuality}". Expected a number between 0 and 100.`)
+}
+
+if (!Number.isFinite(avifSpeed) || avifSpeed < 1 || avifSpeed > 10) {
+  throw new Error(`Unsupported AVIF speed "${argv[avifSpeedFlagIndex + 1] ?? avifSpeed}". Expected a number between 1 and 10.`)
+}
+
 await captureBrowserRoots({
   imageTransformers: requestedFormat === 'avif'
     ? [avifTransformer]
     : undefined,
   sceneAppRoot,
-  routePath: '/',
+  routePath,
   outputDir,
+  settleMs,
   viewport: {
     width: 1920,
     height: 1080,
diff --git a/packages/scenarios-stage-tamagotchi-browser/src/App.vue b/packages/scenarios-stage-tamagotchi-browser/src/App.vue
index ffe71b591..09e198952 100644
--- a/packages/scenarios-stage-tamagotchi-browser/src/App.vue
+++ b/packages/scenarios-stage-tamagotchi-browser/src/App.vue
@@ -1,9 +1,17 @@
 <script setup lang="ts">
-import IntroManualScene from './scenes/intro-manual-scene.vue'
+import { ScreenNavigator, ScreenRouterProvider } from '@proj-airi/vishot-runtime/vue'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const sceneNavigatorEnabled = computed(() => route.meta.sceneNavigator !== false)
 </script>
 
 <template>
-  <IntroManualScene />
+  <ScreenRouterProvider>
+    <RouterView />
+    <ScreenNavigator v-if="sceneNavigatorEnabled" />
+  </ScreenRouterProvider>
 </template>
 
 <style>
diff --git a/packages/scenarios-stage-tamagotchi-browser/src/components/platforms/macos-26/PlatformRoot.test.ts b/packages/scenarios-stage-tamagotchi-browser/src/components/platforms/macos-26/PlatformRoot.test.ts
new file mode 100644
index 000000000..a85e30eee
--- /dev/null
+++ b/packages/scenarios-stage-tamagotchi-browser/src/components/platforms/macos-26/PlatformRoot.test.ts
@@ -0,0 +1,42 @@
+// @vitest-environment jsdom
+import { describe, expect, it, vi } from 'vitest'
+import { createApp, h } from 'vue'
+
+import PlatformRoot from './PlatformRoot.vue'
+
+vi.mock('./ui', () => ({
+  Appearance: {
+    template: '<div data-test-appearance />',
+  },
+  Dock: {
+    template: '<div data-test-dock><slot name="dock" /></div>',
+  },
+  MenuBar: {
+    template: '<div data-test-menu-bar />',
+  },
+}))
+
+describe('platformRoot', () => {
+  it('renders wallpaper behind the windows layer', () => {
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+
+    const app = createApp({
+      render: () => h(PlatformRoot, null, {
+        windows: () => h('div', { 'data-test-window': 'true' }),
+      }),
+    })
+
+    app.mount(host)
+
+    const wallpaper = host.querySelector<HTMLElement>('[data-test-appearance]')
+    const windowNode = host.querySelector<HTMLElement>('[data-test-window="true"]')
+
+    expect(wallpaper).not.toBeNull()
+    expect(windowNode).not.toBeNull()
+    expect(Boolean(wallpaper && windowNode && (wallpaper.compareDocumentPosition(windowNode) & Node.DOCUMENT_POSITION_FOLLOWING))).toBe(true)
+
+    app.unmount()
+    host.remove()
+  })
+})
diff --git a/packages/scenarios-stage-tamagotchi-browser/src/components/platforms/macos-26/PlatformRoot.vue b/packages/scenarios-stage-tamagotchi-browser/src/components/platforms/macos-26/PlatformRoot.vue
index fd0975ae3..28cacd738 100644
--- a/packages/scenarios-stage-tamagotchi-browser/src/components/platforms/macos-26/PlatformRoot.vue
+++ b/packages/scenarios-stage-tamagotchi-browser/src/components/platforms/macos-26/PlatformRoot.vue
@@ -9,9 +9,11 @@ import { Appearance, Dock, MenuBar } from './ui'
 const props = withDefaults(defineProps<{
   aspectRatio?: string | number
   dockSize?: number
+  uiScale?: number
 }>(), {
   aspectRatio: '16:9',
   dockSize: 1.5,
+  uiScale: 1,
 })
 
 const aspectRatio = computed(() => {
@@ -25,18 +27,19 @@ const aspectRatio = computed(() => {
   return props.aspectRatio.split(':').map(Number).reduce((a, b) => a / b)
 })
 
-const platformRoot = ref<HTMLElement | null>(null)
+const platformSurface = ref<HTMLElement | null>(null)
 const dockRoot = ref<HTMLElement | null>(null)
+const normalizedUiScale = computed(() => props.uiScale > 0 ? props.uiScale : 1)
 
 provide(injectPlatformLayout, {
   dock: dockRoot,
-  root: readonly(platformRoot) as Readonly<Ref<HTMLElement | null>>,
+  root: readonly(platformSurface) as Readonly<Ref<HTMLElement | null>>,
+  uiScale: normalizedUiScale,
 })
 </script>
 
 <template>
   <div
-    ref="platformRoot"
     :class="[
       'relative overflow-hidden',
       'font-macos',
@@ -46,16 +49,27 @@ provide(injectPlatformLayout, {
     }"
   >
     <div
+      ref="platformSurface"
       :class="[
         'relative z-999',
         'w-full h-full',
       ]"
+      :style="{
+        width: `${100 / normalizedUiScale}%`,
+        height: `${100 / normalizedUiScale}%`,
+        transform: `scale(${normalizedUiScale})`,
+        transformOrigin: 'top left',
+      }"
     >
+      <Appearance />
       <slot name="windows" />
+      <MenuBar />
+      <Dock :size="props.dockSize">
+        <template #dock>
+          <slot name="dock" />
+        </template>
+      </Dock>
     </div>
-    <Appearance />
-    <MenuBar />
-    <Dock :size="props.dockSize" />
   </div>
 </template>
 
diff --git a/packages/scenarios-stage-tamagotchi-browser/src/components/platforms/macos-26/constants.ts b/packages/scenarios-stage-tamagotchi-browser/src/components/platforms/macos-26/constants.ts
index 191165820..d7d25d565 100644
--- a/packages/scenarios-stage-tamagotchi-browser/src/components/platforms/macos-26/constants.ts
+++ b/packages/scenarios-stage-tamagotchi-browser/src/components/platforms/macos-26/constants.ts
@@ -3,6 +3,7 @@ import type { InjectionKey, Ref } from 'vue'
 export interface PlatformLayoutContext {
   dock: Ref<HTMLElement | null>
   root: Readonly<Ref<HTMLElement | null>>
+  uiScale: Readonly<Ref<number>>
 }
 
 export const injectPlatformLayout: InjectionKey<PlatformLayoutContext> = Symbol('vishot:platforms:macos-26:layout')
diff --git a/packages/scenarios-stage-tamagotchi-browser/src/components/platforms/macos-26/containers/window/WindowRoot.test.ts b/packages/scenarios-stage-tamagotchi-browser/src/components/platforms/macos-26/containers/window/WindowRoot.test.ts
new file mode 100644
index 000000000..4e692e74b
--- /dev/null
+++ b/packages/scenarios-stage-tamagotchi-browser/src/components/platforms/macos-26/containers/window/WindowRoot.test.ts
@@ -0,0 +1,153 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { createApp, h, nextTick, readonly, ref } from 'vue'
+
+import WindowRoot from './WindowRoot.vue'
+
+import { injectPlatformLayout } from '../../constants'
+
+function createRect(left: number, top: number, width: number, height: number): DOMRect {
+  return {
+    bottom: top + height,
+    height,
+    left,
+    right: left + width,
+    toJSON: () => ({}),
+    top,
+    width,
+    x: left,
+    y: top,
+  } as DOMRect
+}
+
+describe('windowRoot', () => {
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it('re-anchors to workarea when dock is registered after mount', async () => {
+    vi.stubGlobal('requestAnimationFrame', ((callback: FrameRequestCallback) => {
+      callback(0)
+      return 1
+    }) as typeof requestAnimationFrame)
+    vi.stubGlobal('cancelAnimationFrame', (() => {}) as typeof cancelAnimationFrame)
+
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+
+    const platformRef = ref<HTMLElement | null>(null)
+    const dockRef = ref<HTMLElement | null>(null)
+    const uiScaleRef = ref(1)
+
+    const app = createApp({
+      setup() {
+        return () => h('div', { ref: platformRef }, [
+          h(WindowRoot, {
+            anchorBounds: 'workarea',
+            anchorTo: 'bottom-right',
+            frame: false,
+            hasShadow: false,
+            style: {
+              bottom: '0px',
+              right: '0px',
+            },
+          }, () => h('div')),
+        ])
+      },
+      provide: {
+        [injectPlatformLayout as symbol]: {
+          dock: dockRef,
+          root: readonly(platformRef),
+          uiScale: readonly(uiScaleRef),
+        },
+      },
+    })
+
+    app.mount(host)
+    await nextTick()
+
+    const platformEl = platformRef.value
+    const windowEl = host.querySelector<HTMLElement>('.absolute.flex.flex-col.rounded-2xl.overflow-hidden')
+
+    expect(platformEl).not.toBeNull()
+    expect(windowEl).not.toBeNull()
+
+    vi.spyOn(platformEl!, 'getBoundingClientRect').mockReturnValue(createRect(0, 0, 1000, 600))
+    vi.spyOn(windowEl!, 'getBoundingClientRect').mockReturnValue(createRect(900, 500, 100, 100))
+
+    const dockEl = document.createElement('div')
+    vi.spyOn(dockEl, 'getBoundingClientRect').mockReturnValue(createRect(920, 200, 70, 200))
+    dockRef.value = dockEl
+
+    await nextTick()
+    await nextTick()
+
+    expect(windowEl!.style.right).toBe('80px')
+
+    app.unmount()
+    host.remove()
+  })
+
+  it('uses measured workarea bounds when uiScale is applied so dock does not overlap anchored window', async () => {
+    vi.stubGlobal('requestAnimationFrame', ((callback: FrameRequestCallback) => {
+      callback(0)
+      return 1
+    }) as typeof requestAnimationFrame)
+    vi.stubGlobal('cancelAnimationFrame', (() => {}) as typeof cancelAnimationFrame)
+
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+
+    const platformRef = ref<HTMLElement | null>(null)
+    const dockRef = ref<HTMLElement | null>(null)
+    const uiScaleRef = ref(1.25)
+
+    const app = createApp({
+      setup() {
+        return () => h('div', { ref: platformRef }, [
+          h(WindowRoot, {
+            anchorBounds: 'workarea',
+            anchorTo: 'bottom-right',
+            frame: false,
+            hasShadow: false,
+            style: {
+              bottom: '0px',
+              right: '0px',
+            },
+          }, () => h('div')),
+        ])
+      },
+      provide: {
+        [injectPlatformLayout as symbol]: {
+          dock: dockRef,
+          root: readonly(platformRef),
+          uiScale: readonly(uiScaleRef),
+        },
+      },
+    })
+
+    app.mount(host)
+    await nextTick()
+
+    const platformEl = platformRef.value
+    const windowEl = host.querySelector<HTMLElement>('.absolute.flex.flex-col.rounded-2xl.overflow-hidden')
+
+    expect(platformEl).not.toBeNull()
+    expect(windowEl).not.toBeNull()
+
+    vi.spyOn(platformEl!, 'getBoundingClientRect').mockReturnValue(createRect(0, 0, 1646, 926))
+    vi.spyOn(windowEl!, 'getBoundingClientRect').mockReturnValue(createRect(1239, 383, 407, 543))
+
+    const dockEl = document.createElement('div')
+    vi.spyOn(dockEl, 'getBoundingClientRect').mockReturnValue(createRect(1571, 323, 66, 280))
+    dockRef.value = dockEl
+
+    await nextTick()
+    await nextTick()
+
+    expect(windowEl!.style.right).toBe('75px')
+
+    app.unmount()
+    host.remove()
+  })
+})
diff --git a/packages/scenarios-stage-tamagotchi-browser/src/components/platforms/macos-26/containers/window/WindowRoot.vue b/packages/scenarios-stage-tamagotchi-browser/src/components/platforms/macos-26/containers/window/WindowRoot.vue
index 93bc37daa..2e89f5b73 100644
--- a/packages/scenarios-stage-tamagotchi-browser/src/components/platforms/macos-26/containers/window/WindowRoot.vue
+++ b/packages/scenarios-stage-tamagotchi-browser/src/components/platforms/macos-26/containers/window/WindowRoot.vue
@@ -1,11 +1,15 @@
 <script setup lang="ts">
-import type { CSSProperties } from 'vue'
+import type { CSSProperties, StyleValue } from 'vue'
 
-import { inject, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue'
+import { computed, inject, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, useAttrs, watch } from 'vue'
 
 import { injectPlatformLayout } from '../../constants'
 import { computeElementAnchorStyle, createContainerAnchorStyle, createWorkAreaRect } from './window-anchor'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = withDefaults(defineProps<{
   title?: string
   focus?: boolean
@@ -26,8 +30,14 @@ const props = withDefaults(defineProps<{
 })
 
 const platformLayout = inject(injectPlatformLayout, null)
+const attrs = useAttrs()
 const windowRoot = ref<HTMLElement | null>(null)
 const anchorStyle = shallowRef<CSSProperties | undefined>()
+const incomingStyle = computed<StyleValue | undefined>(() => attrs.style as StyleValue | undefined)
+const forwardedAttrs = computed(() => {
+  const { style: _style, ...rest } = attrs
+  return rest
+})
 
 let resizeObserver: ResizeObserver | null = null
 let animationFrameId: number | null = null
@@ -66,9 +76,13 @@ function updateAnchorStyle() {
   const platformRect = currentPlatformRoot?.getBoundingClientRect()
   // When anchoring against the container, we can optionally shrink the usable
   // bounds to the platform work area so windows avoid overlapping the dock.
+  const dockRect = platformLayout?.dock.value
+    ? platformLayout.dock.value.getBoundingClientRect()
+    : null
+
   const workAreaRect = platformRect
     ? createWorkAreaRect({
-        dockRect: props.anchorBounds === 'workarea' ? platformLayout?.dock.value?.getBoundingClientRect() ?? null : null,
+        dockRect: props.anchorBounds === 'workarea' ? dockRect : null,
         platformRect,
       })
     : undefined
@@ -131,7 +145,14 @@ onMounted(async () => {
   refreshResizeObserver()
 })
 
-watch(() => [props.anchorBounds, props.anchorTo, props.anchorEl], async () => {
+watch(() => [
+  props.anchorBounds,
+  props.anchorTo,
+  props.anchorEl,
+  platformLayout?.uiScale.value,
+  platformLayout?.dock.value,
+  platformLayout?.root.value,
+], async () => {
   await nextTick()
   queueAnchorUpdate()
   refreshResizeObserver()
@@ -146,13 +167,14 @@ onBeforeUnmount(() => {
 <template>
   <div
     ref="windowRoot"
+    v-bind="forwardedAttrs"
     :class="[
       'absolute',
       'flex flex-col',
       'rounded-2xl overflow-hidden',
       props.hasShadow ? 'shadow-xl' : '',
     ]"
-    :style="anchorStyle"
+    :style="[incomingStyle, anchorStyle]"
   >
     <div
       v-if="!!props.frame"
diff --git a/packages/scenarios-stage-tamagotchi-browser/src/components/platforms/macos-26/containers/window/window-anchor.test.ts b/packages/scenarios-stage-tamagotchi-browser/src/components/platforms/macos-26/containers/window/window-anchor.test.ts
index 4fa9e91b9..a551752fe 100644
--- a/packages/scenarios-stage-tamagotchi-browser/src/components/platforms/macos-26/containers/window/window-anchor.test.ts
+++ b/packages/scenarios-stage-tamagotchi-browser/src/components/platforms/macos-26/containers/window/window-anchor.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 
-import { computeElementAnchorStyle, createContainerAnchorStyle, createWorkAreaRect } from './window-anchor'
+import { computeElementAnchorStyle, createContainerAnchorStyle, createWorkAreaRect, normalizeRectForScale } from './window-anchor'
 
 describe('createContainerAnchorStyle', () => {
   it('anchors a window to the platform top-right corner', () => {
@@ -82,3 +82,19 @@ describe('computeElementAnchorStyle', () => {
     })
   })
 })
+
+describe('normalizeRectForScale', () => {
+  it('converts measured rect values into logical coordinates for scaled platform UI', () => {
+    expect(normalizeRectForScale({
+      left: 960,
+      top: 240,
+      width: 640,
+      height: 360,
+    }, 2)).toEqual({
+      left: 480,
+      top: 120,
+      width: 320,
+      height: 180,
+    })
+  })
+})
diff --git a/packages/scenarios-stage-tamagotchi-browser/src/components/platforms/macos-26/containers/window/window-anchor.ts b/packages/scenarios-stage-tamagotchi-browser/src/components/platforms/macos-26/containers/window/window-anchor.ts
index 834a22351..fa15937c8 100644
--- a/packages/scenarios-stage-tamagotchi-browser/src/components/platforms/macos-26/containers/window/window-anchor.ts
+++ b/packages/scenarios-stage-tamagotchi-browser/src/components/platforms/macos-26/containers/window/window-anchor.ts
@@ -7,6 +7,20 @@ type RectSize = Pick<DOMRect, 'width' | 'height'>
 type RectLike = RectPosition & RectSize
 type RelativeRect = RectLike
 
+export function normalizeRectForScale<T extends RectLike>(rect: T, uiScale: number): T {
+  if (uiScale <= 0 || uiScale === 1) {
+    return rect
+  }
+
+  return {
+    ...rect,
+    left: rect.left / uiScale,
+    top: rect.top / uiScale,
+    width: rect.width / uiScale,
+    height: rect.height / uiScale,
+  }
+}
+
 function toRelativeRect(rect: RectLike, platformRect: RectPosition): RelativeRect {
   // All anchor math is done in the platform's own coordinate system so callers
   // can mix measured DOM rects with the logical scene layout consistently.
diff --git a/packages/scenarios-stage-tamagotchi-browser/src/components/platforms/macos-26/ui/display/appearance.test.ts b/packages/scenarios-stage-tamagotchi-browser/src/components/platforms/macos-26/ui/display/appearance.test.ts
new file mode 100644
index 000000000..b51a69d47
--- /dev/null
+++ b/packages/scenarios-stage-tamagotchi-browser/src/components/platforms/macos-26/ui/display/appearance.test.ts
@@ -0,0 +1,25 @@
+// @vitest-environment jsdom
+import { describe, expect, it } from 'vitest'
+import { createApp, h } from 'vue'
+
+import Appearance from './appearance.vue'
+
+describe('appearance', () => {
+  it('does not pin wallpaper above window content via z-index utility classes', () => {
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+
+    const app = createApp({
+      render: () => h(Appearance),
+    })
+
+    app.mount(host)
+
+    const wallpaper = host.querySelector<HTMLImageElement>('img')
+    expect(wallpaper).not.toBeNull()
+    expect(wallpaper?.className.includes('z-1')).toBe(false)
+
+    app.unmount()
+    host.remove()
+  })
+})
diff --git a/packages/scenarios-stage-tamagotchi-browser/src/components/platforms/macos-26/ui/display/appearance.vue b/packages/scenarios-stage-tamagotchi-browser/src/components/platforms/macos-26/ui/display/appearance.vue
index 1e542d95c..3d646f4f4 100644
--- a/packages/scenarios-stage-tamagotchi-browser/src/components/platforms/macos-26/ui/display/appearance.vue
+++ b/packages/scenarios-stage-tamagotchi-browser/src/components/platforms/macos-26/ui/display/appearance.vue
@@ -6,7 +6,6 @@ import wallpaper from '../../../../../assets/wallpaper-2025-08-12.jpg'
   <img
     :class="[
       'absolute left-0 top-0 h-full w-full',
-      'z-1',
     ]"
     :src="wallpaper"
   >
diff --git a/packages/scenarios-stage-tamagotchi-browser/src/main.ts b/packages/scenarios-stage-tamagotchi-browser/src/main.ts
index 024420928..9d02d9778 100644
--- a/packages/scenarios-stage-tamagotchi-browser/src/main.ts
+++ b/packages/scenarios-stage-tamagotchi-browser/src/main.ts
@@ -1,8 +1,17 @@
 import { createApp } from 'vue'
+import { createRouter, createWebHistory } from 'vue-router'
+import { routes } from 'vue-router/auto-routes'
 
 import App from './App.vue'
 
 import '@unocss/reset/tailwind.css'
 import 'uno.css'
 
-createApp(App).mount('#app')
+const router = createRouter({
+  routes,
+  history: createWebHistory(),
+})
+
+createApp(App)
+  .use(router)
+  .mount('#app')
diff --git a/packages/scenarios-stage-tamagotchi-browser/src/scenes/docs/setup-and-use/components/scene-capture-layout.vue b/packages/scenarios-stage-tamagotchi-browser/src/scenes/docs/setup-and-use/components/scene-capture-layout.vue
new file mode 100644
index 000000000..276be1141
--- /dev/null
+++ b/packages/scenarios-stage-tamagotchi-browser/src/scenes/docs/setup-and-use/components/scene-capture-layout.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { ScenarioCanvas, ScreenMarupsProvider, ScreenRouterCaptureRoot } from '@proj-airi/vishot-runtime/vue'
+
+import Icon from '../../../../components/icon.vue'
+
+import { PlatformRoot } from '../../../../components/platforms/macos-26'
+import { Application } from '../../../../components/platforms/macos-26/containers/dock'
+
+interface SceneCaptureLayoutProps {
+  height?: number
+  name: string
+  platformUiScale?: number
+  scaleMultiplier?: number
+  width?: number
+}
+
+withDefaults(defineProps<SceneCaptureLayoutProps>(), {
+  height: 1080,
+  platformUiScale: 1,
+  scaleMultiplier: 1,
+  width: 1920,
+})
+</script>
+
+<template>
+  <ScreenRouterCaptureRoot :name="name">
+    <ScenarioCanvas :width="width" :height="height" :scale-multiplier="scaleMultiplier">
+      <ScreenMarupsProvider :width="width" :height="height">
+        <PlatformRoot :dock-size="1.5" :ui-scale="platformUiScale">
+          <template #windows>
+            <slot name="windows" />
+          </template>
+          <template #dock>
+            <Application running>
+              <Icon />
+            </Application>
+          </template>
+        </PlatformRoot>
+
+        <template #overlay>
+          <slot name="overlay" />
+        </template>
+      </ScreenMarupsProvider>
+    </ScenarioCanvas>
+  </ScreenRouterCaptureRoot>
+</template>
diff --git a/packages/scenarios-stage-tamagotchi-browser/src/scenes/docs/setup-and-use/index.vue b/packages/scenarios-stage-tamagotchi-browser/src/scenes/docs/setup-and-use/index.vue
new file mode 100644
index 000000000..0ff163b6e
--- /dev/null
+++ b/packages/scenarios-stage-tamagotchi-browser/src/scenes/docs/setup-and-use/index.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { useSceneReady } from '@proj-airi/vishot-runtime/vue'
+
+import stageShot from '../../../../artifacts/raw/00-stage-tamagotchi.avif'
+import websocketSettingsShot from '../../../../artifacts/raw/03-websocket-settings.avif'
+import chatWindowShot from '../../../../artifacts/raw/04-chat-window.avif'
+import SceneCaptureLayout from './components/scene-capture-layout.vue'
+
+import { WindowRoot } from '../../../components/platforms/macos-26/containers/window'
+
+useSceneReady([
+  stageShot,
+  websocketSettingsShot,
+  chatWindowShot,
+])
+</script>
+
+<route lang="yaml">
+meta:
+  title: Setup And Use
+</route>
+
+<template>
+  <SceneCaptureLayout name="manual-chat-window" :platform-ui-scale="1.25">
+    <template #windows>
+      <WindowRoot :style="{ left: '50%', top: '72px', transform: 'translateX(-50%)' }">
+        <img :src="chatWindowShot" :class="['w-150']">
+      </WindowRoot>
+    </template>
+  </SceneCaptureLayout>
+
+  <SceneCaptureLayout name="intro-chat-window" :platform-ui-scale="1.25">
+    <template #windows>
+      <WindowRoot
+        :style="{ right: '0px', bottom: '0px' }"
+        anchor-to="bottom-right"
+        anchor-bounds="workarea"
+        :frame="false"
+        :has-shadow="false"
+      >
+        <img :src="stageShot" :class="['w-95']">
+      </WindowRoot>
+
+      <WindowRoot :style="{ left: '480px', top: '120px' }">
+        <img :src="websocketSettingsShot" :class="['w-120']">
+      </WindowRoot>
+    </template>
+  </SceneCaptureLayout>
+</template>
diff --git a/packages/scenarios-stage-tamagotchi-browser/src/scenes/docs/setup-and-use/intro-chat.vue b/packages/scenarios-stage-tamagotchi-browser/src/scenes/docs/setup-and-use/intro-chat.vue
new file mode 100644
index 000000000..5a34c2bad
--- /dev/null
+++ b/packages/scenarios-stage-tamagotchi-browser/src/scenes/docs/setup-and-use/intro-chat.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { useSceneReady } from '@proj-airi/vishot-runtime/vue'
+
+import stageShot from '../../../../artifacts/raw/00-stage-tamagotchi.avif'
+import websocketSettingsShot from '../../../../artifacts/raw/03-websocket-settings.avif'
+import chatWindowShot from '../../../../artifacts/raw/04-chat-window.avif'
+import SceneCaptureLayout from './components/scene-capture-layout.vue'
+
+import { WindowRoot } from '../../../components/platforms/macos-26/containers/window'
+
+useSceneReady([
+  stageShot,
+  websocketSettingsShot,
+  chatWindowShot,
+])
+</script>
+
+<route lang="yaml">
+meta:
+  title: Setup And Use Intro Chat
+</route>
+
+<template>
+  <SceneCaptureLayout name="manual-chat-window" :platform-ui-scale="1.25">
+    <template #windows>
+      <WindowRoot :style="{ left: '50%', top: '72px', transform: 'translateX(-50%)' }">
+        <img :src="chatWindowShot" :class="['w-120']">
+      </WindowRoot>
+    </template>
+  </SceneCaptureLayout>
+
+  <SceneCaptureLayout name="intro-chat-window" :platform-ui-scale="1.25">
+    <template #windows>
+      <WindowRoot
+        :style="{ right: '0px', bottom: '0px' }"
+        anchor-to="bottom-right"
+        anchor-bounds="workarea"
+        :frame="false"
+        :has-shadow="false"
+      >
+        <img :src="stageShot" :class="['w-95']">
+      </WindowRoot>
+
+      <WindowRoot :style="{ left: '480px', top: '120px' }">
+        <img :src="websocketSettingsShot" :class="['w-120']">
+      </WindowRoot>
+    </template>
+  </SceneCaptureLayout>
+</template>
diff --git a/packages/scenarios-stage-tamagotchi-browser/src/scenes/docs/setup-and-use/intro-websocket.vue b/packages/scenarios-stage-tamagotchi-browser/src/scenes/docs/setup-and-use/intro-websocket.vue
new file mode 100644
index 000000000..f57dcacb8
--- /dev/null
+++ b/packages/scenarios-stage-tamagotchi-browser/src/scenes/docs/setup-and-use/intro-websocket.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { ScreenHighlightRegion, useSceneReady } from '@proj-airi/vishot-runtime/vue'
+
+import stageShot from '../../../../artifacts/raw/00-stage-tamagotchi.avif'
+import websocketSettingsShot from '../../../../artifacts/raw/03-websocket-settings.avif'
+import SceneCaptureLayout from './components/scene-capture-layout.vue'
+
+import { WindowRoot } from '../../../components/platforms/macos-26/containers/window'
+
+useSceneReady([
+  stageShot,
+  websocketSettingsShot,
+])
+</script>
+
+<route lang="yaml">
+meta:
+  title: Setup And Use Intro Websocket
+</route>
+
+<template>
+  <SceneCaptureLayout name="intro-chat-window" :platform-ui-scale="1.25">
+    <template #windows>
+      <WindowRoot
+        :style="{ right: '0px', bottom: '0px' }"
+        anchor-to="bottom-right"
+        anchor-bounds="workarea"
+        :frame="false"
+        :has-shadow="false"
+      >
+        <img :src="stageShot" :class="['w-95']">
+      </WindowRoot>
+
+      <WindowRoot :style="{ left: '480px', top: '120px' }">
+        <div :class="['relative']">
+          <img :src="websocketSettingsShot" :class="['w-120']">
+          <div
+            :class="[
+              'absolute inset-0',
+              'pointer-events-none',
+            ]"
+          >
+            <ScreenHighlightRegion
+              :class="[
+                'absolute left-2.5 top-22',
+                'w-[calc(100%-(16px*2))] h-20',
+                'translate-x-[8px]',
+              ]"
+              :inset="3"
+              border-color="border-yellow-500 dark:border-yellow-400"
+            />
+            <ScreenHighlightRegion
+              :class="[
+                'absolute left-2.5 top-78',
+                'w-[calc(100%-(16px*2))] h-26',
+                'translate-x-[8px]',
+              ]"
+              :inset="3"
+              border-color="border-cyan-400 dark:border-cyan-300"
+            />
+          </div>
+        </div>
+      </WindowRoot>
+    </template>
+  </SceneCaptureLayout>
+</template>
diff --git a/packages/scenarios-stage-tamagotchi-browser/src/scenes/docs/setup-and-use/main-window.vue b/packages/scenarios-stage-tamagotchi-browser/src/scenes/docs/setup-and-use/main-window.vue
new file mode 100644
index 000000000..10c000750
--- /dev/null
+++ b/packages/scenarios-stage-tamagotchi-browser/src/scenes/docs/setup-and-use/main-window.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { useSceneReady } from '@proj-airi/vishot-runtime/vue'
+
+import stageShot from '../../../../artifacts/raw/00-stage-tamagotchi.avif'
+import controlsIslandShot from '../../../../artifacts/raw/01-controls-island-expanded.avif'
+import SceneCaptureLayout from './components/scene-capture-layout.vue'
+
+import { WindowRoot } from '../../../components/platforms/macos-26/containers/window'
+
+useSceneReady([
+  stageShot,
+  controlsIslandShot,
+])
+</script>
+
+<route lang="yaml">
+meta:
+  title: Setup And Use Main Window
+</route>
+
+<template>
+  <SceneCaptureLayout name="manual-main-window" :platform-ui-scale="1.25">
+    <template #windows>
+      <WindowRoot
+        :style="{ right: '0px', bottom: '0px' }"
+        anchor-to="bottom-right"
+        anchor-bounds="workarea"
+        :frame="false"
+        :has-shadow="false"
+      >
+        <img :src="stageShot" :class="['w-120']">
+      </WindowRoot>
+    </template>
+  </SceneCaptureLayout>
+
+  <SceneCaptureLayout name="manual-controls-island-expanded" :platform-ui-scale="1.25">
+    <template #windows>
+      <WindowRoot
+        :style="{ right: '0px', bottom: '0px' }"
+        anchor-to="bottom-right"
+        anchor-bounds="workarea"
+        :frame="false"
+        :has-shadow="false"
+      >
+        <img :src="controlsIslandShot" :class="['w-120']">
+      </WindowRoot>
+    </template>
+  </SceneCaptureLayout>
+</template>
diff --git a/packages/scenarios-stage-tamagotchi-browser/src/scenes/docs/setup-and-use/settings.vue b/packages/scenarios-stage-tamagotchi-browser/src/scenes/docs/setup-and-use/settings.vue
new file mode 100644
index 000000000..06943be75
--- /dev/null
+++ b/packages/scenarios-stage-tamagotchi-browser/src/scenes/docs/setup-and-use/settings.vue
@@ -0,0 +1,257 @@
+<script setup lang="ts">
+import { useSceneReady } from '@proj-airi/vishot-runtime/vue'
+
+import settingsShot from '../../../../artifacts/raw/02-settings-window.avif'
+import websocketSettingsShot from '../../../../artifacts/raw/03-websocket-settings.avif'
+import airiCardShot from '../../../../artifacts/raw/05-airi-card.avif'
+import providersShot from '../../../../artifacts/raw/06-providers.avif'
+import dataShot from '../../../../artifacts/raw/07-data.avif'
+import systemGeneralShot from '../../../../artifacts/raw/08-system-general.avif'
+import systemColorSchemeShot from '../../../../artifacts/raw/09-system-color-scheme.avif'
+import modelsShot from '../../../../artifacts/raw/10-models.avif'
+import modulesShot from '../../../../artifacts/raw/11-modules.avif'
+import hearingShot from '../../../../artifacts/raw/12-hearing.avif'
+import systemDeveloperShot from '../../../../artifacts/raw/13-system-developer.avif'
+import consciousnessShot from '../../../../artifacts/raw/14-consciousness.avif'
+import speechShot from '../../../../artifacts/raw/15-speech.avif'
+import visionShot from '../../../../artifacts/raw/16-vision.avif'
+import useWindowMouseShot from '../../../../artifacts/raw/17-devtools-use-window-mouse.avif'
+import displaysShot from '../../../../artifacts/raw/18-devtools-displays.avif'
+import widgetsCallingShot from '../../../../artifacts/raw/19-devtools-widgets-calling.avif'
+import contextFlowShot from '../../../../artifacts/raw/20-devtools-context-flow.avif'
+import relativeMouseShot from '../../../../artifacts/raw/21-devtools-relative-mouse.avif'
+import beatSyncShot from '../../../../artifacts/raw/22-devtools-beat-sync.avif'
+import websocketInspectorShot from '../../../../artifacts/raw/23-devtools-websocket-inspector.avif'
+import pluginHostShot from '../../../../artifacts/raw/24-devtools-plugin-host.avif'
+import screenCaptureShot from '../../../../artifacts/raw/25-devtools-screen-capture.avif'
+import visionCaptureShot from '../../../../artifacts/raw/26-devtools-vision-capture.avif'
+import SceneCaptureLayout from './components/scene-capture-layout.vue'
+
+import { WindowRoot } from '../../../components/platforms/macos-26/containers/window'
+
+useSceneReady([
+  settingsShot,
+  websocketSettingsShot,
+  airiCardShot,
+  providersShot,
+  dataShot,
+  systemGeneralShot,
+  systemColorSchemeShot,
+  modelsShot,
+  modulesShot,
+  hearingShot,
+  systemDeveloperShot,
+  consciousnessShot,
+  speechShot,
+  visionShot,
+  useWindowMouseShot,
+  displaysShot,
+  widgetsCallingShot,
+  contextFlowShot,
+  relativeMouseShot,
+  beatSyncShot,
+  websocketInspectorShot,
+  pluginHostShot,
+  screenCaptureShot,
+  visionCaptureShot,
+])
+</script>
+
+<route lang="yaml">
+meta:
+  title: Setup And Use Settings
+</route>
+
+<template>
+  <SceneCaptureLayout name="manual-settings-window" :platform-ui-scale="1.25">
+    <template #windows>
+      <WindowRoot :style="{ left: '50%', top: '84px', transform: 'translateX(-50%)' }">
+        <img :src="settingsShot" :class="['w-120']">
+      </WindowRoot>
+    </template>
+  </SceneCaptureLayout>
+
+  <SceneCaptureLayout name="manual-websocket-settings" :platform-ui-scale="1.25">
+    <template #windows>
+      <WindowRoot :style="{ left: '50%', top: '84px', transform: 'translateX(-50%)' }">
+        <img :src="websocketSettingsShot" :class="['w-120']">
+      </WindowRoot>
+    </template>
+  </SceneCaptureLayout>
+
+  <SceneCaptureLayout name="manual-airi-card" :platform-ui-scale="1.25">
+    <template #windows>
+      <WindowRoot :style="{ left: '50%', top: '84px', transform: 'translateX(-50%)' }">
+        <img :src="airiCardShot" :class="['w-120']">
+      </WindowRoot>
+    </template>
+  </SceneCaptureLayout>
+
+  <SceneCaptureLayout name="manual-providers" :platform-ui-scale="1.25">
+    <template #windows>
+      <WindowRoot :style="{ left: '50%', top: '84px', transform: 'translateX(-50%)' }">
+        <img :src="providersShot" :class="['w-120']">
+      </WindowRoot>
+    </template>
+  </SceneCaptureLayout>
+
+  <SceneCaptureLayout name="manual-data-settings" :platform-ui-scale="1.25">
+    <template #windows>
+      <WindowRoot :style="{ left: '50%', top: '84px', transform: 'translateX(-50%)' }">
+        <img :src="dataShot" :class="['w-120']">
+      </WindowRoot>
+    </template>
+  </SceneCaptureLayout>
+
+  <SceneCaptureLayout name="manual-system-general" :platform-ui-scale="1.25">
+    <template #windows>
+      <WindowRoot :style="{ left: '50%', top: '84px', transform: 'translateX(-50%)' }">
+        <img :src="systemGeneralShot" :class="['w-120']">
+      </WindowRoot>
+    </template>
+  </SceneCaptureLayout>
+
+  <SceneCaptureLayout name="manual-system-color-scheme" :platform-ui-scale="1.25">
+    <template #windows>
+      <WindowRoot :style="{ left: '50%', top: '84px', transform: 'translateX(-50%)' }">
+        <img :src="systemColorSchemeShot" :class="['w-120']">
+      </WindowRoot>
+    </template>
+  </SceneCaptureLayout>
+
+  <SceneCaptureLayout name="manual-models" :platform-ui-scale="1.25">
+    <template #windows>
+      <WindowRoot :style="{ left: '50%', top: '84px', transform: 'translateX(-50%)' }">
+        <img :src="modelsShot" :class="['w-120']">
+      </WindowRoot>
+    </template>
+  </SceneCaptureLayout>
+
+  <SceneCaptureLayout name="manual-modules" :platform-ui-scale="1.25">
+    <template #windows>
+      <WindowRoot :style="{ left: '50%', top: '84px', transform: 'translateX(-50%)' }">
+        <img :src="modulesShot" :class="['w-120']">
+      </WindowRoot>
+    </template>
+  </SceneCaptureLayout>
+
+  <SceneCaptureLayout name="manual-hearing" :platform-ui-scale="1.25">
+    <template #windows>
+      <WindowRoot :style="{ left: '50%', top: '84px', transform: 'translateX(-50%)' }">
+        <img :src="hearingShot" :class="['w-120']">
+      </WindowRoot>
+    </template>
+  </SceneCaptureLayout>
+
+  <SceneCaptureLayout name="manual-system-developer" :platform-ui-scale="1.25">
+    <template #windows>
+      <WindowRoot :style="{ left: '50%', top: '84px', transform: 'translateX(-50%)' }">
+        <img :src="systemDeveloperShot" :class="['w-120']">
+      </WindowRoot>
+    </template>
+  </SceneCaptureLayout>
+
+  <SceneCaptureLayout name="manual-consciousness" :platform-ui-scale="1.25">
+    <template #windows>
+      <WindowRoot :style="{ left: '50%', top: '84px', transform: 'translateX(-50%)' }">
+        <img :src="consciousnessShot" :class="['w-120']">
+      </WindowRoot>
+    </template>
+  </SceneCaptureLayout>
+
+  <SceneCaptureLayout name="manual-speech" :platform-ui-scale="1.25">
+    <template #windows>
+      <WindowRoot :style="{ left: '50%', top: '84px', transform: 'translateX(-50%)' }">
+        <img :src="speechShot" :class="['w-120']">
+      </WindowRoot>
+    </template>
+  </SceneCaptureLayout>
+
+  <SceneCaptureLayout name="manual-vision" :platform-ui-scale="1.25">
+    <template #windows>
+      <WindowRoot :style="{ left: '50%', top: '84px', transform: 'translateX(-50%)' }">
+        <img :src="visionShot" :class="['w-120']">
+      </WindowRoot>
+    </template>
+  </SceneCaptureLayout>
+
+  <SceneCaptureLayout name="manual-devtools-use-window-mouse" :platform-ui-scale="1.25">
+    <template #windows>
+      <WindowRoot :style="{ left: '50%', top: '84px', transform: 'translateX(-50%)' }">
+        <img :src="useWindowMouseShot" :class="['w-120']">
+      </WindowRoot>
+    </template>
+  </SceneCaptureLayout>
+
+  <SceneCaptureLayout name="manual-devtools-displays" :platform-ui-scale="1.25">
+    <template #windows>
+      <WindowRoot :style="{ left: '50%', top: '84px', transform: 'translateX(-50%)' }">
+        <img :src="displaysShot" :class="['w-120']">
+      </WindowRoot>
+    </template>
+  </SceneCaptureLayout>
+
+  <SceneCaptureLayout name="manual-devtools-widgets-calling" :platform-ui-scale="1.25">
+    <template #windows>
+      <WindowRoot :style="{ left: '50%', top: '84px', transform: 'translateX(-50%)' }">
+        <img :src="widgetsCallingShot" :class="['w-120']">
+      </WindowRoot>
+    </template>
+  </SceneCaptureLayout>
+
+  <SceneCaptureLayout name="manual-devtools-context-flow" :platform-ui-scale="1.25">
+    <template #windows>
+      <WindowRoot :style="{ left: '50%', top: '84px', transform: 'translateX(-50%)' }">
+        <img :src="contextFlowShot" :class="['w-120']">
+      </WindowRoot>
+    </template>
+  </SceneCaptureLayout>
+
+  <SceneCaptureLayout name="manual-devtools-relative-mouse" :platform-ui-scale="1.25">
+    <template #windows>
+      <WindowRoot :style="{ left: '50%', top: '84px', transform: 'translateX(-50%)' }">
+        <img :src="relativeMouseShot" :class="['w-120']">
+      </WindowRoot>
+    </template>
+  </SceneCaptureLayout>
+
+  <SceneCaptureLayout name="manual-devtools-beat-sync" :platform-ui-scale="1.25">
+    <template #windows>
+      <WindowRoot :style="{ left: '50%', top: '84px', transform: 'translateX(-50%)' }">
+        <img :src="beatSyncShot" :class="['w-120']">
+      </WindowRoot>
+    </template>
+  </SceneCaptureLayout>
+
+  <SceneCaptureLayout name="manual-devtools-websocket-inspector" :platform-ui-scale="1.25">
+    <template #windows>
+      <WindowRoot :style="{ left: '50%', top: '84px', transform: 'translateX(-50%)' }">
+        <img :src="websocketInspectorShot" :class="['w-120']">
+      </WindowRoot>
+    </template>
+  </SceneCaptureLayout>
+
+  <SceneCaptureLayout name="manual-devtools-plugin-host" :platform-ui-scale="1.25">
+    <template #windows>
+      <WindowRoot :style="{ left: '50%', top: '84px', transform: 'translateX(-50%)' }">
+        <img :src="pluginHostShot" :class="['w-120']">
+      </WindowRoot>
+    </template>
+  </SceneCaptureLayout>
+
+  <SceneCaptureLayout name="manual-devtools-screen-capture" :platform-ui-scale="1.25">
+    <template #windows>
+      <WindowRoot :style="{ left: '50%', top: '84px', transform: 'translateX(-50%)' }">
+        <img :src="screenCaptureShot" :class="['w-120']">
+      </WindowRoot>
+    </template>
+  </SceneCaptureLayout>
+
+  <SceneCaptureLayout name="manual-devtools-vision-capture" :platform-ui-scale="1.25">
+    <template #windows>
+      <WindowRoot :style="{ left: '50%', top: '84px', transform: 'translateX(-50%)' }">
+        <img :src="visionCaptureShot" :class="['w-120']">
+      </WindowRoot>
+    </template>
+  </SceneCaptureLayout>
+</template>
diff --git a/packages/scenarios-stage-tamagotchi-browser/src/scenes/intro-manual-scene.vue b/packages/scenarios-stage-tamagotchi-browser/src/scenes/intro-manual-scene.vue
deleted file mode 100644
index aa5148ae2..000000000
--- a/packages/scenarios-stage-tamagotchi-browser/src/scenes/intro-manual-scene.vue
+++ /dev/null
@@ -1,262 +0,0 @@
-<script setup lang="ts">
-import { markScenarioReady, resetScenarioReady } from '@proj-airi/vishot-runtime'
-import { ScenarioCanvas, ScenarioCaptureRoot } from '@proj-airi/vishot-runtime/vue'
-import { onMounted } from 'vue'
-
-import stageShot from '../../artifacts/raw/00-stage-tamagotchi.avif'
-import controlsIslandShot from '../../artifacts/raw/01-controls-island-expanded.avif'
-import settingsShot from '../../artifacts/raw/02-settings-window.avif'
-import websocketSettingsShot from '../../artifacts/raw/03-websocket-settings.avif'
-import chatWindowShot from '../../artifacts/raw/04-chat-window.avif'
-import airiCardShot from '../../artifacts/raw/05-airi-card.avif'
-import providersShot from '../../artifacts/raw/06-providers.avif'
-import dataShot from '../../artifacts/raw/07-data.avif'
-import systemGeneralShot from '../../artifacts/raw/08-system-general.avif'
-import systemColorSchemeShot from '../../artifacts/raw/09-system-color-scheme.avif'
-import modelsShot from '../../artifacts/raw/10-models.avif'
-import modulesShot from '../../artifacts/raw/11-modules.avif'
-import hearingShot from '../../artifacts/raw/12-hearing.avif'
-import systemDeveloperShot from '../../artifacts/raw/13-system-developer.avif'
-import consciousnessShot from '../../artifacts/raw/14-consciousness.avif'
-import speechShot from '../../artifacts/raw/15-speech.avif'
-import visionShot from '../../artifacts/raw/16-vision.avif'
-import useWindowMouseShot from '../../artifacts/raw/17-devtools-use-window-mouse.avif'
-import displaysShot from '../../artifacts/raw/18-devtools-displays.avif'
-import widgetsCallingShot from '../../artifacts/raw/19-devtools-widgets-calling.avif'
-import contextFlowShot from '../../artifacts/raw/20-devtools-context-flow.avif'
-import relativeMouseShot from '../../artifacts/raw/21-devtools-relative-mouse.avif'
-import beatSyncShot from '../../artifacts/raw/22-devtools-beat-sync.avif'
-import websocketInspectorShot from '../../artifacts/raw/23-devtools-websocket-inspector.avif'
-import pluginHostShot from '../../artifacts/raw/24-devtools-plugin-host.avif'
-import screenCaptureShot from '../../artifacts/raw/25-devtools-screen-capture.avif'
-import visionCaptureShot from '../../artifacts/raw/26-devtools-vision-capture.avif'
-import Icon from '../components/icon.vue'
-
-import { PlatformRoot } from '../components/platforms/macos-26'
-import { Application } from '../components/platforms/macos-26/containers/dock'
-import { WindowRoot } from '../components/platforms/macos-26/containers/window'
-
-/**
- * These coordinates are expressed in the logical `1920x1080` canvas provided by
- * `ScenarioCanvas`, not in the browser's live viewport.
- *
- * That is why the windows keep their relative placement when the viewport size
- * changes: the browser scales the entire fixed scene surface after layout rather
- * than reinterpreting each translate against a resized responsive container.
- */
-const stageWindowStyle = {
-  right: '0px',
-  bottom: '0px',
-}
-
-const websocketWindowStyle = {
-  left: '480px',
-  top: '120px',
-}
-
-const mainOnlyWindowStyle = {
-  right: '0px',
-  bottom: '0px',
-}
-
-const settingsOnlyWindowStyle = {
-  left: '50%',
-  top: '84px',
-  transform: 'translateX(-50%)',
-}
-
-const chatWindowStyle = {
-  left: '50%',
-  top: '72px',
-  transform: 'translateX(-50%)',
-}
-
-const settingsCaptureRoots = [
-  { name: 'manual-settings-window', src: settingsShot, imageClass: 'w-130' },
-  { name: 'manual-websocket-settings', src: websocketSettingsShot, imageClass: 'w-130' },
-  { name: 'manual-airi-card', src: airiCardShot, imageClass: 'w-140' },
-  { name: 'manual-providers', src: providersShot, imageClass: 'w-140' },
-  { name: 'manual-data-settings', src: dataShot, imageClass: 'w-140' },
-  { name: 'manual-system-general', src: systemGeneralShot, imageClass: 'w-140' },
-  { name: 'manual-system-color-scheme', src: systemColorSchemeShot, imageClass: 'w-140' },
-  { name: 'manual-models', src: modelsShot, imageClass: 'w-150' },
-  { name: 'manual-modules', src: modulesShot, imageClass: 'w-140' },
-  { name: 'manual-hearing', src: hearingShot, imageClass: 'w-145' },
-  { name: 'manual-system-developer', src: systemDeveloperShot, imageClass: 'w-145' },
-  { name: 'manual-consciousness', src: consciousnessShot, imageClass: 'w-145' },
-  { name: 'manual-speech', src: speechShot, imageClass: 'w-150' },
-  { name: 'manual-vision', src: visionShot, imageClass: 'w-145' },
-  { name: 'manual-devtools-use-window-mouse', src: useWindowMouseShot, imageClass: 'w-140' },
-  { name: 'manual-devtools-displays', src: displaysShot, imageClass: 'w-150' },
-  { name: 'manual-devtools-widgets-calling', src: widgetsCallingShot, imageClass: 'w-150' },
-  { name: 'manual-devtools-context-flow', src: contextFlowShot, imageClass: 'w-155' },
-  { name: 'manual-devtools-relative-mouse', src: relativeMouseShot, imageClass: 'w-150' },
-  { name: 'manual-devtools-beat-sync', src: beatSyncShot, imageClass: 'w-155' },
-  { name: 'manual-devtools-websocket-inspector', src: websocketInspectorShot, imageClass: 'w-155' },
-  { name: 'manual-devtools-plugin-host', src: pluginHostShot, imageClass: 'w-155' },
-  { name: 'manual-devtools-screen-capture', src: screenCaptureShot, imageClass: 'w-155' },
-  { name: 'manual-devtools-vision-capture', src: visionCaptureShot, imageClass: 'w-155' },
-] as const
-
-async function waitForImageSource(source: string): Promise<void> {
-  await new Promise<void>((resolve, reject) => {
-    const image = new Image()
-
-    image.addEventListener('load', () => resolve(), { once: true })
-    image.addEventListener('error', () => reject(new Error(`Scenario image failed to load: ${source}`)), { once: true })
-    image.src = source
-  })
-}
-
-onMounted(async () => {
-  resetScenarioReady()
-  try {
-    await Promise.all([
-      document.fonts.ready,
-      waitForImageSource(stageShot),
-      waitForImageSource(controlsIslandShot),
-      waitForImageSource(settingsShot),
-      waitForImageSource(websocketSettingsShot),
-      waitForImageSource(chatWindowShot),
-      waitForImageSource(airiCardShot),
-      waitForImageSource(providersShot),
-      waitForImageSource(dataShot),
-      waitForImageSource(systemGeneralShot),
-      waitForImageSource(systemColorSchemeShot),
-      waitForImageSource(modelsShot),
-      waitForImageSource(modulesShot),
-      waitForImageSource(hearingShot),
-      waitForImageSource(systemDeveloperShot),
-      waitForImageSource(consciousnessShot),
-      waitForImageSource(speechShot),
-      waitForImageSource(visionShot),
-      waitForImageSource(useWindowMouseShot),
-      waitForImageSource(displaysShot),
-      waitForImageSource(widgetsCallingShot),
-      waitForImageSource(contextFlowShot),
-      waitForImageSource(relativeMouseShot),
-      waitForImageSource(beatSyncShot),
-      waitForImageSource(websocketInspectorShot),
-      waitForImageSource(pluginHostShot),
-      waitForImageSource(screenCaptureShot),
-      waitForImageSource(visionCaptureShot),
-    ])
-    markScenarioReady()
-  }
-  catch (error) {
-    console.error(error)
-  }
-})
-</script>
-
-<template>
-  <ScenarioCaptureRoot name="manual-main-window">
-    <ScenarioCanvas :width="1920" :height="1080">
-      <PlatformRoot :dock-size="1.5">
-        <template #windows>
-          <WindowRoot
-            :style="mainOnlyWindowStyle"
-            anchor-to="bottom-right"
-            anchor-bounds="workarea"
-            :frame="false"
-            :has-shadow="false"
-          >
-            <img :src="stageShot" class="w-95">
-          </WindowRoot>
-        </template>
-        <template #dock>
-          <Application running>
-            <Icon />
-          </Application>
-        </template>
-      </PlatformRoot>
-    </ScenarioCanvas>
-  </ScenarioCaptureRoot>
-
-  <ScenarioCaptureRoot name="manual-controls-island-expanded">
-    <ScenarioCanvas :width="1920" :height="1080">
-      <PlatformRoot :dock-size="1.5">
-        <template #windows>
-          <WindowRoot
-            :style="mainOnlyWindowStyle"
-            anchor-to="bottom-right"
-            anchor-bounds="workarea"
-            :frame="false"
-            :has-shadow="false"
-          >
-            <img :src="controlsIslandShot" class="w-95">
-          </WindowRoot>
-        </template>
-        <template #dock>
-          <Application running>
-            <Icon />
-          </Application>
-        </template>
-      </PlatformRoot>
-    </ScenarioCanvas>
-  </ScenarioCaptureRoot>
-
-  <ScenarioCaptureRoot
-    v-for="capture in settingsCaptureRoots"
-    :key="capture.name"
-    :name="capture.name"
-  >
-    <ScenarioCanvas :width="1920" :height="1080">
-      <PlatformRoot :dock-size="1.5">
-        <template #windows>
-          <WindowRoot :style="settingsOnlyWindowStyle">
-            <img :src="capture.src" :class="capture.imageClass">
-          </WindowRoot>
-        </template>
-        <template #dock>
-          <Application running>
-            <Icon />
-          </Application>
-        </template>
-      </PlatformRoot>
-    </ScenarioCanvas>
-  </ScenarioCaptureRoot>
-
-  <ScenarioCaptureRoot name="manual-chat-window">
-    <ScenarioCanvas :width="1920" :height="1080">
-      <PlatformRoot :dock-size="1.5">
-        <template #windows>
-          <WindowRoot :style="chatWindowStyle">
-            <img :src="chatWindowShot" class="w-150">
-          </WindowRoot>
-        </template>
-        <template #dock>
-          <Application running>
-            <Icon />
-          </Application>
-        </template>
-      </PlatformRoot>
-    </ScenarioCanvas>
-  </ScenarioCaptureRoot>
-
-  <ScenarioCaptureRoot name="intro-chat-window">
-    <ScenarioCanvas :width="1920" :height="1080">
-      <PlatformRoot :dock-size="1.5">
-        <template #windows>
-          <WindowRoot
-            :style="stageWindowStyle"
-            anchor-to="bottom-right"
-            anchor-bounds="workarea"
-            :frame="false"
-            :has-shadow="false"
-          >
-            <img :src="stageShot" class="w-95">
-          </WindowRoot>
-          <WindowRoot :style="websocketWindowStyle">
-            <img :src="websocketSettingsShot" class="w-120">
-          </WindowRoot>
-        </template>
-        <template #dock>
-          <Application running>
-            <Icon />
-          </Application>
-        </template>
-      </PlatformRoot>
-    </ScenarioCanvas>
-  </ScenarioCaptureRoot>
-</template>
diff --git a/packages/scenarios-stage-tamagotchi-browser/tsconfig.json b/packages/scenarios-stage-tamagotchi-browser/tsconfig.json
index cf6ab9bb4..055b6b22f 100644
--- a/packages/scenarios-stage-tamagotchi-browser/tsconfig.json
+++ b/packages/scenarios-stage-tamagotchi-browser/tsconfig.json
@@ -11,7 +11,8 @@
     "moduleResolution": "Bundler",
     "resolveJsonModule": true,
     "types": [
-      "vite/client"
+      "vite/client",
+      "unplugin-vue-router/client"
     ],
     "allowJs": true,
     "strict": true,
diff --git a/packages/scenarios-stage-tamagotchi-browser/vite.config.ts b/packages/scenarios-stage-tamagotchi-browser/vite.config.ts
index 396d6b530..b99d99e16 100644
--- a/packages/scenarios-stage-tamagotchi-browser/vite.config.ts
+++ b/packages/scenarios-stage-tamagotchi-browser/vite.config.ts
@@ -1,10 +1,23 @@
+import { resolve } from 'node:path'
+
 import Vue from '@vitejs/plugin-vue'
 import Unocss from 'unocss/vite'
+import VueRouter from 'unplugin-vue-router/vite'
 
 import { defineConfig } from 'vite'
 
 export default defineConfig({
   plugins: [
+    VueRouter({
+      extensions: ['.vue'],
+      dts: resolve(import.meta.dirname, 'src/typed-router.d.ts'),
+      importMode: 'async',
+      routesFolder: [
+        resolve(import.meta.dirname, 'src', 'scenes'),
+      ],
+      exclude: ['**/components/**'],
+    }),
+
     Vue(),
 
     // https://github.com/antfu/unocss
diff --git a/packages/scenarios-stage-tamagotchi-electron/README.md b/packages/scenarios-stage-tamagotchi-electron/README.md
index 9648fc028..bd82b525f 100644
--- a/packages/scenarios-stage-tamagotchi-electron/README.md
+++ b/packages/scenarios-stage-tamagotchi-electron/README.md
@@ -14,17 +14,27 @@ It does not launch Electron itself and it does not own browser-scene composition
 
 ## Workflow
 
-1. Build the Electron app.
-2. Run the Electron runner against a section-based scenario entrypoint under `src/scenarios/demo-controls-settings-chat-websocket/index.ts`.
-3. Write the scenario's raw working outputs into the scenario-local working directory.
-4. Publish the final docs screenshots directly into `docs/content/en/docs/manual/tamagotchi/setup-and-use/assets`.
-5. Skip any separate final staging directory for this docs workflow.
+This package is step 1 of the docs screenshot pipeline.
+
+1. Build `@proj-airi/stage-tamagotchi`.
+2. Run this scenario through `@proj-airi/vishot-runner-electron`.
+3. Write raw outputs to `packages/scenarios-stage-tamagotchi-browser/artifacts/raw`.
+4. Then run the browser package capture (step 2, documented in that package README).
+
+## Agent Quickstart
+
+From repo root, run:
 
 ```bash
 pnpm -F @proj-airi/stage-tamagotchi build
-pnpm -F @proj-airi/vishot-runner-electron capture --format avif -- packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/index.ts --output-dir /tmp/tamagotchi-docs-capture
+pnpm -F @proj-airi/vishot-runner-electron capture ../../packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/index.ts --output-dir ../../packages/scenarios-stage-tamagotchi-browser/artifacts/raw --format avif
 ```
 
+Expected result:
+
+- `27` raw files in `packages/scenarios-stage-tamagotchi-browser/artifacts/raw`
+- names like `00-stage-tamagotchi.avif` ... `26-devtools-vision-capture.avif`
+
 ## Scenario Authoring
 
 ```ts
@@ -48,10 +58,16 @@ export default defineScenario({
 
 ## Scenario Layout
 
-The docs workflow is organized as one section-based scenario module under `src/scenarios/demo-controls-settings-chat-websocket/`. The top-level `index.ts` orchestrates section manifests and writes working outputs into the scenario-local raw directory, so the capture flow stays close to the scenario being authored.
+The docs workflow is organized as one section-based scenario module under `src/scenarios/demo-controls-settings-chat-websocket/`. The top-level `index.ts` orchestrates section manifests.
+
+Important:
+
+- `--output-dir` for the runner should point to `packages/scenarios-stage-tamagotchi-browser/artifacts/raw`.
+- This package does not publish docs assets directly; it only prepares raw assets for browser-scene composition.
 
 ## Notes
 
 - Raw scenario modules live under `src/scenarios`.
 - Scenario entrypoints should point at `index.ts` when the workflow is organized as a section folder.
 - Keep this package focused on Electron capture flows for docs screenshots.
+- Paths in these `pnpm -F` examples are resolved from the filtered package working directory.
diff --git a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/00-stage-tamagotchi.avif b/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/00-stage-tamagotchi.avif
deleted file mode 100644
index 2236ef215..000000000
Binary files a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/00-stage-tamagotchi.avif and /dev/null differ
diff --git a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/01-controls-island-expanded.avif b/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/01-controls-island-expanded.avif
deleted file mode 100644
index d1d925604..000000000
Binary files a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/01-controls-island-expanded.avif and /dev/null differ
diff --git a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/02-settings-window.avif b/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/02-settings-window.avif
deleted file mode 100644
index bece586f0..000000000
Binary files a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/02-settings-window.avif and /dev/null differ
diff --git a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/03-websocket-settings.avif b/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/03-websocket-settings.avif
deleted file mode 100644
index 1ee310b67..000000000
Binary files a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/03-websocket-settings.avif and /dev/null differ
diff --git a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/04-chat-window.avif b/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/04-chat-window.avif
deleted file mode 100644
index d3e7b434c..000000000
Binary files a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/04-chat-window.avif and /dev/null differ
diff --git a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/05-airi-card.avif b/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/05-airi-card.avif
deleted file mode 100644
index a10365dbc..000000000
Binary files a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/05-airi-card.avif and /dev/null differ
diff --git a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/06-providers.avif b/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/06-providers.avif
deleted file mode 100644
index 3a5b1eb19..000000000
Binary files a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/06-providers.avif and /dev/null differ
diff --git a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/07-data.avif b/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/07-data.avif
deleted file mode 100644
index 0c02cbcef..000000000
Binary files a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/07-data.avif and /dev/null differ
diff --git a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/08-system-general.avif b/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/08-system-general.avif
deleted file mode 100644
index b897fa340..000000000
Binary files a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/08-system-general.avif and /dev/null differ
diff --git a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/09-system-color-scheme.avif b/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/09-system-color-scheme.avif
deleted file mode 100644
index f53afc120..000000000
Binary files a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/09-system-color-scheme.avif and /dev/null differ
diff --git a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/10-models.avif b/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/10-models.avif
deleted file mode 100644
index f6b4cda86..000000000
Binary files a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/10-models.avif and /dev/null differ
diff --git a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/11-modules.avif b/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/11-modules.avif
deleted file mode 100644
index 15c3affef..000000000
Binary files a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/11-modules.avif and /dev/null differ
diff --git a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/12-hearing.avif b/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/12-hearing.avif
deleted file mode 100644
index 127e618b5..000000000
Binary files a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/12-hearing.avif and /dev/null differ
diff --git a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/13-system-developer.avif b/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/13-system-developer.avif
deleted file mode 100644
index b8775c9f2..000000000
Binary files a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/13-system-developer.avif and /dev/null differ
diff --git a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/14-consciousness.avif b/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/14-consciousness.avif
deleted file mode 100644
index 59dfc4f40..000000000
Binary files a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/14-consciousness.avif and /dev/null differ
diff --git a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/15-speech.avif b/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/15-speech.avif
deleted file mode 100644
index d73fbcb9d..000000000
Binary files a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/15-speech.avif and /dev/null differ
diff --git a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/16-vision.avif b/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/16-vision.avif
deleted file mode 100644
index 3738b6f7f..000000000
Binary files a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/16-vision.avif and /dev/null differ
diff --git a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/17-devtools-use-window-mouse.avif b/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/17-devtools-use-window-mouse.avif
deleted file mode 100644
index 2a853f60a..000000000
Binary files a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/17-devtools-use-window-mouse.avif and /dev/null differ
diff --git a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/18-devtools-displays.avif b/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/18-devtools-displays.avif
deleted file mode 100644
index 4458d4e62..000000000
Binary files a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/18-devtools-displays.avif and /dev/null differ
diff --git a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/19-devtools-widgets-calling.avif b/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/19-devtools-widgets-calling.avif
deleted file mode 100644
index 2342bc3b3..000000000
Binary files a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/19-devtools-widgets-calling.avif and /dev/null differ
diff --git a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/20-devtools-context-flow.avif b/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/20-devtools-context-flow.avif
deleted file mode 100644
index 7d2c3e875..000000000
Binary files a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/20-devtools-context-flow.avif and /dev/null differ
diff --git a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/21-devtools-relative-mouse.avif b/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/21-devtools-relative-mouse.avif
deleted file mode 100644
index ce78e24db..000000000
Binary files a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/21-devtools-relative-mouse.avif and /dev/null differ
diff --git a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/22-devtools-beat-sync.avif b/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/22-devtools-beat-sync.avif
deleted file mode 100644
index 27b027eaf..000000000
Binary files a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/22-devtools-beat-sync.avif and /dev/null differ
diff --git a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/23-devtools-websocket-inspector.avif b/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/23-devtools-websocket-inspector.avif
deleted file mode 100644
index a3f0cf8c6..000000000
Binary files a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/23-devtools-websocket-inspector.avif and /dev/null differ
diff --git a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/24-devtools-plugin-host.avif b/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/24-devtools-plugin-host.avif
deleted file mode 100644
index 97cc7381b..000000000
Binary files a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/24-devtools-plugin-host.avif and /dev/null differ
diff --git a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/25-devtools-screen-capture.avif b/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/25-devtools-screen-capture.avif
deleted file mode 100644
index 284c81e5f..000000000
Binary files a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/25-devtools-screen-capture.avif and /dev/null differ
diff --git a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/26-devtools-vision-capture.avif b/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/26-devtools-vision-capture.avif
deleted file mode 100644
index de46b535b..000000000
Binary files a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/assets/raw/26-devtools-vision-capture.avif and /dev/null differ
diff --git a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/index.ts b/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/index.ts
index b81855563..3cd7b2a2a 100644
--- a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/index.ts
+++ b/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/index.ts
@@ -3,7 +3,7 @@ import type { ManualRuntime } from './shared/types'
 import { defineScenario } from '@proj-airi/vishot-runner-electron'
 
 import { manualCaptureSections } from './manifest'
-import { formatStepFailure, removePublishedManualAssets, resetScenarioOutputDirectories } from './shared/output'
+import { formatStepFailure, resetScenarioOutputDirectories } from './shared/output'
 import { runCaptureStep } from './shared/steps'
 
 export default defineScenario({
@@ -17,7 +17,6 @@ export default defineScenario({
       mainWindow,
     }
 
-    await removePublishedManualAssets()
     await resetScenarioOutputDirectories()
 
     for (const section of manualCaptureSections) {
diff --git a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/sections/devtools.ts b/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/sections/devtools.ts
index 99e1bf18b..846722ddd 100644
--- a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/sections/devtools.ts
+++ b/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/sections/devtools.ts
@@ -14,6 +14,7 @@ const screenCapturePattern = /Applications|Displays|Refetch|Share Window|Share S
 // so matching against those generics can pass against stale screen-capture DOM
 // and silently produce a mislabeled screenshot.
 const visionCapturePattern = /Capture interval|No vision output yet|vision capture/i
+const navHeaderSettleWaitMs = 1000
 
 export const devtoolsSection: ManualCaptureSection = {
   id: 'devtools',
@@ -26,6 +27,7 @@ export const devtoolsSection: ManualCaptureSection = {
       readyPattern: useWindowMousePattern,
       rawCaptureName: '17-devtools-use-window-mouse',
       docAssetFileName: 'manual-devtools-use-window-mouse.avif',
+      waitMs: navHeaderSettleWaitMs,
     },
     {
       id: 'displays',
@@ -34,6 +36,7 @@ export const devtoolsSection: ManualCaptureSection = {
       readyPattern: displaysPattern,
       rawCaptureName: '18-devtools-displays',
       docAssetFileName: 'manual-devtools-displays.avif',
+      waitMs: navHeaderSettleWaitMs,
     },
     {
       id: 'widgets-calling',
@@ -42,6 +45,7 @@ export const devtoolsSection: ManualCaptureSection = {
       readyPattern: widgetsCallingPattern,
       rawCaptureName: '19-devtools-widgets-calling',
       docAssetFileName: 'manual-devtools-widgets-calling.avif',
+      waitMs: navHeaderSettleWaitMs,
     },
     {
       id: 'context-flow',
@@ -50,6 +54,7 @@ export const devtoolsSection: ManualCaptureSection = {
       readyPattern: contextFlowPattern,
       rawCaptureName: '20-devtools-context-flow',
       docAssetFileName: 'manual-devtools-context-flow.avif',
+      waitMs: navHeaderSettleWaitMs,
     },
     {
       id: 'relative-mouse',
@@ -58,6 +63,7 @@ export const devtoolsSection: ManualCaptureSection = {
       readyPattern: relativeMousePattern,
       rawCaptureName: '21-devtools-relative-mouse',
       docAssetFileName: 'manual-devtools-relative-mouse.avif',
+      waitMs: navHeaderSettleWaitMs,
     },
     {
       id: 'beat-sync',
@@ -66,6 +72,7 @@ export const devtoolsSection: ManualCaptureSection = {
       readyPattern: beatSyncPattern,
       rawCaptureName: '22-devtools-beat-sync',
       docAssetFileName: 'manual-devtools-beat-sync.avif',
+      waitMs: navHeaderSettleWaitMs,
     },
     {
       id: 'websocket-inspector',
@@ -74,6 +81,7 @@ export const devtoolsSection: ManualCaptureSection = {
       readyPattern: websocketInspectorPattern,
       rawCaptureName: '23-devtools-websocket-inspector',
       docAssetFileName: 'manual-devtools-websocket-inspector.avif',
+      waitMs: navHeaderSettleWaitMs,
     },
     {
       id: 'plugin-host',
@@ -82,6 +90,7 @@ export const devtoolsSection: ManualCaptureSection = {
       readyPattern: pluginHostPattern,
       rawCaptureName: '24-devtools-plugin-host',
       docAssetFileName: 'manual-devtools-plugin-host.avif',
+      waitMs: navHeaderSettleWaitMs,
     },
     {
       id: 'screen-capture',
@@ -99,7 +108,7 @@ export const devtoolsSection: ManualCaptureSection = {
       readyPattern: visionCapturePattern,
       rawCaptureName: '26-devtools-vision-capture',
       docAssetFileName: 'manual-devtools-vision-capture.avif',
-      waitMs: 500,
+      waitMs: navHeaderSettleWaitMs,
     },
   ],
 }
diff --git a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/sections/settings.ts b/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/sections/settings.ts
index 9b2da1ffc..dcf0cc886 100644
--- a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/sections/settings.ts
+++ b/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/sections/settings.ts
@@ -13,7 +13,7 @@ const systemGeneralPattern = /theme|主题|language|语言/i
 const systemColorSchemePattern = /RGB|Primary Color|主题颜色|500\/50/i
 const modelsPattern = /select model|confirm|缩放与位置|Zoom & Position/i
 const modulesPattern = /Consciousness|意识|Speech|发声|Hearing|听觉/i
-const hearingPattern = /Audio Input Device|音频输入设备|start monitoring|Start Monitoring|Transcription Result/i
+const hearingPattern = /Audio Input Device|音频输入设备|Start Monitoring|Transcription Result/i
 const developerPattern = /Open DevTools|打开|Markdown|Lag|Vision Capture|Screen Capture/i
 // NOTICE: Anchor on the consciousness page's always-rendered section description.
 // Previous alternates like `提供商` / `No Providers Configured` did not match zh-Hans,
@@ -27,6 +27,7 @@ const developerPattern = /Open DevTools|打开|Markdown|Lag|Vision Capture|Scree
 const consciousnessPattern = /Select the suitable LLM|为意识选择合适/i
 const speechPattern = /Hello, my name is AI Assistant|Test voice|Voice|声音|Speech|选择语音合成服务来源/i
 const visionPattern = /Capture interval|context|ollama|提供商|Current model|Chat|Vision capture cadence/i
+const navHeaderSettleWaitMs = 1000
 
 export const settingsSection: ManualCaptureSection = {
   id: 'settings',
@@ -120,6 +121,7 @@ export const settingsSection: ManualCaptureSection = {
       readyPattern: consciousnessPattern,
       rawCaptureName: '14-consciousness',
       docAssetFileName: 'manual-consciousness.avif',
+      waitMs: navHeaderSettleWaitMs,
     },
     {
       id: 'speech',
@@ -137,6 +139,7 @@ export const settingsSection: ManualCaptureSection = {
       readyPattern: visionPattern,
       rawCaptureName: '16-vision',
       docAssetFileName: 'manual-vision.avif',
+      waitMs: navHeaderSettleWaitMs,
     },
   ],
 }
diff --git a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/shared/constants.ts b/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/shared/constants.ts
index 3c8ceb862..1611e44b6 100644
--- a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/shared/constants.ts
+++ b/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/shared/constants.ts
@@ -2,18 +2,13 @@ import path from 'node:path'
 
 import { fileURLToPath } from 'node:url'
 
-const scenarioDirectoryPath = fileURLToPath(new URL('..', import.meta.url))
 const repoRootPath = fileURLToPath(new URL('../../../../../../', import.meta.url))
 
-export const scenarioRawOutputDir = path.join(scenarioDirectoryPath, 'assets', 'raw')
-export const manualDocsAssetsDir = path.join(
+export const browserRawAssetsDir = path.join(
   repoRootPath,
-  'docs',
-  'content',
-  'en',
-  'docs',
-  'manual',
-  'tamagotchi',
-  'setup-and-use',
-  'assets',
+  'packages',
+  'scenarios-stage-tamagotchi-browser',
+  'artifacts',
+  'raw',
 )
+export const scenarioRawOutputDir = browserRawAssetsDir
diff --git a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/shared/output.ts b/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/shared/output.ts
index 5449997be..d4b83de6d 100644
--- a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/shared/output.ts
+++ b/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/shared/output.ts
@@ -1,76 +1,14 @@
-import type { VishotArtifact } from '@proj-airi/vishot-runner-electron'
-
-import type { PublishedArtifacts } from './types'
-
-import path from 'node:path'
-
-import { copyFile, mkdir, rm } from 'node:fs/promises'
+import { mkdir, rm } from 'node:fs/promises'
 
 import { errorMessageFrom } from '@moeru/std'
 
-import { manualAssetFileNames } from '../manifest'
-import { manualDocsAssetsDir, scenarioRawOutputDir } from './constants'
-
-function extensionOf(filePath: string): string {
-  return path.extname(filePath).toLowerCase()
-}
+import { scenarioRawOutputDir } from './constants'
 
 export async function resetScenarioOutputDirectories() {
   await rm(scenarioRawOutputDir, { recursive: true, force: true })
   await mkdir(scenarioRawOutputDir, { recursive: true })
 }
 
-export async function removePublishedManualAssets() {
-  await mkdir(manualDocsAssetsDir, { recursive: true })
-
-  await Promise.all(
-    manualAssetFileNames.map(fileName =>
-      rm(path.join(manualDocsAssetsDir, fileName), { force: true }),
-    ),
-  )
-}
-
-export async function publishArtifactsToDocs(
-  artifacts: VishotArtifact[],
-  targetFileName: string,
-): Promise<PublishedArtifacts> {
-  if (artifacts.length === 0) {
-    throw new Error(`Expected at least one artifact when publishing "${targetFileName}".`)
-  }
-
-  await mkdir(scenarioRawOutputDir, { recursive: true })
-  await mkdir(manualDocsAssetsDir, { recursive: true })
-
-  const rawArtifactPaths: string[] = []
-
-  for (const artifact of artifacts) {
-    const rawArtifactPath = path.join(scenarioRawOutputDir, path.basename(artifact.filePath))
-    await copyFile(artifact.filePath, rawArtifactPath)
-    rawArtifactPaths.push(rawArtifactPath)
-  }
-
-  const primaryArtifact = artifacts[0]
-  if (extensionOf(primaryArtifact.filePath) !== extensionOf(targetFileName)) {
-    throw new Error(
-      [
-        `Cannot publish "${targetFileName}" from "${path.basename(primaryArtifact.filePath)}".`,
-        'Run the capture CLI with a matching format, for example `--format avif` for the manual docs flow.',
-      ].join(' '),
-    )
-  }
-
-  const docsAssetPath = path.join(manualDocsAssetsDir, targetFileName)
-  await copyFile(primaryArtifact.filePath, docsAssetPath)
-  await Promise.all(
-    artifacts.map(artifact => rm(artifact.filePath, { force: true })),
-  )
-
-  return {
-    docsAssetPath,
-    rawArtifactPaths,
-  }
-}
-
 export function formatStepFailure(sectionId: string, stepId: string, error: unknown): Error {
   const message = errorMessageFrom(error) ?? 'Unknown screenshot automation error'
 
diff --git a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/shared/steps.ts b/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/shared/steps.ts
index 13378be4c..dcfd71737 100644
--- a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/shared/steps.ts
+++ b/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/shared/steps.ts
@@ -2,7 +2,6 @@ import type { CaptureExecutionResult, ManualCaptureStep, ManualRuntime } from '.
 
 import { sleep } from '@moeru/std'
 
-import { publishArtifactsToDocs } from './output'
 import { ensureControlsIslandExpanded, getChatWindowSnapshot, getSettingsWindowSnapshot, waitForRouteReadiness } from './runtime'
 
 async function captureStepPage(step: ManualCaptureStep, runtime: ManualRuntime): Promise<CaptureExecutionResult> {
@@ -65,11 +64,9 @@ async function captureStepPage(step: ManualCaptureStep, runtime: ManualRuntime):
   }
 
   const artifacts = await runtime.context.capture(step.rawCaptureName, page)
-  const publishedArtifacts = await publishArtifactsToDocs(artifacts, step.docAssetFileName)
 
   return {
     artifacts,
-    publishedArtifacts,
   }
 }
 
diff --git a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/shared/types.ts b/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/shared/types.ts
index d711b3af9..0c0dd657c 100644
--- a/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/shared/types.ts
+++ b/packages/scenarios-stage-tamagotchi-electron/src/scenarios/demo-controls-settings-chat-websocket/shared/types.ts
@@ -27,12 +27,6 @@ export interface ManualRuntime {
   settingsWindowSnapshot?: StageWindowSnapshotLike
 }
 
-export interface PublishedArtifacts {
-  docsAssetPath: string
-  rawArtifactPaths: string[]
-}
-
 export interface CaptureExecutionResult {
   artifacts: VishotArtifact[]
-  publishedArtifacts: PublishedArtifacts
 }
diff --git a/packages/vishot-runner-browser/README.md b/packages/vishot-runner-browser/README.md
index d4f7be818..1fa3cfc00 100644
--- a/packages/vishot-runner-browser/README.md
+++ b/packages/vishot-runner-browser/README.md
@@ -34,7 +34,7 @@ const requestedFormat = 'avif'
 
 await captureBrowserRoots({
   sceneAppRoot,
-  routePath: '/',
+  routePath: '/docs/setup-and-use',
   outputDir: path.resolve(sceneAppRoot, 'artifacts', 'final'),
   imageTransformers: requestedFormat === 'avif'
     ? [avifTransformer]
@@ -47,6 +47,7 @@ The capture primitive is still PNG because Playwright screenshots write PNG file
 ## Notes
 
 - `captureBrowserRoots()` accepts either `sceneAppRoot` or `baseUrl`.
+- Use `routePath` to target a specific page when a scene app has multiple routes.
 - Scene packages mark readiness through `window.__SCENARIO_CAPTURE_READY__`.
 - The CLI treats `<render-entry>` as the scene package root and captures the default `/` route.
 - The parser accepts repeated `--root` flags for named capture roots.
diff --git a/packages/vishot-runner-browser/src/runtime/capture.ts b/packages/vishot-runner-browser/src/runtime/capture.ts
index 38d3216c7..24de87ca6 100644
--- a/packages/vishot-runner-browser/src/runtime/capture.ts
+++ b/packages/vishot-runner-browser/src/runtime/capture.ts
@@ -40,6 +40,14 @@ async function waitForScenarioReady(page: Page): Promise<void> {
   })
 }
 
+async function waitForPostReadySettle(page: Page, settleMs: number | undefined): Promise<void> {
+  if (!settleMs || settleMs <= 0) {
+    return
+  }
+
+  await page.waitForTimeout(settleMs)
+}
+
 async function captureRoot(page: Page, outputDir: string, rootName: string): Promise<VishotArtifact> {
   const filePath = captureFilePath(outputDir, rootName)
   const locator = page.locator(captureRootSelector(rootName))
@@ -140,6 +148,7 @@ export async function captureBrowserRoots(request: BrowserCaptureRequest): Promi
 
       await page.goto(targetUrl)
       await waitForScenarioReady(page)
+      await waitForPostReadySettle(page, request.settleMs)
       await mkdir(path.resolve(request.outputDir), { recursive: true })
 
       const rootNames = request.rootNames?.length
diff --git a/packages/vishot-runner-browser/src/runtime/integration.test.ts b/packages/vishot-runner-browser/src/runtime/integration.test.ts
index 113e12e7d..64cb5b631 100644
--- a/packages/vishot-runner-browser/src/runtime/integration.test.ts
+++ b/packages/vishot-runner-browser/src/runtime/integration.test.ts
@@ -13,6 +13,7 @@ interface FakeLocator {
 interface FakePage {
   goto: (url: string) => Promise<void>
   waitForFunction: (predicate: () => boolean) => Promise<void>
+  waitForTimeout: (ms: number) => Promise<void>
   locator: (selector: string) => FakeLocator
 }
 
@@ -85,6 +86,9 @@ function createFixturePage(html: string): FakePage {
 
       throw new Error('Timed out waiting for scene readiness')
     },
+    async waitForTimeout(ms: number) {
+      await new Promise(resolve => setTimeout(resolve, ms))
+    },
     locator(selector: string): FakeLocator {
       return {
         async evaluateAll<T>(callback: (elements: Array<{ getAttribute: (name: string) => string | null }>) => T) {
diff --git a/packages/vishot-runner-browser/src/runtime/types.ts b/packages/vishot-runner-browser/src/runtime/types.ts
index 0c0ef934f..943a61ef1 100644
--- a/packages/vishot-runner-browser/src/runtime/types.ts
+++ b/packages/vishot-runner-browser/src/runtime/types.ts
@@ -9,6 +9,7 @@ export interface BrowserCaptureRequest {
   baseUrl?: string
   routePath: string
   outputDir: string
+  settleMs?: number
   rootNames?: string[]
   imageTransformers?: ArtifactTransformer[]
   viewport?: {
diff --git a/packages/vishot-runner-electron/src/cli/capture.test.ts b/packages/vishot-runner-electron/src/cli/capture.test.ts
index 275b22420..683e51862 100644
--- a/packages/vishot-runner-electron/src/cli/capture.test.ts
+++ b/packages/vishot-runner-electron/src/cli/capture.test.ts
@@ -49,6 +49,55 @@ describe('parseCaptureCliArguments', () => {
       scenarioPath: 'packages/scenarios-stage-tamagotchi-electron/src/scenarios/settings-connection.ts',
       outputDir: './artifacts/manual-run',
       format: 'avif',
+      avif: {
+        maxWidth: 1920,
+        quality: 50,
+        speed: 6,
+      },
+    })
+  })
+
+  it('accepts optional AVIF tuning flags', () => {
+    expect(parseCaptureCliArguments([
+      'packages/scenarios-stage-tamagotchi-electron/src/scenarios/settings-connection.ts',
+      '--output-dir',
+      './artifacts/manual-run',
+      '--format',
+      'avif',
+      '--avif-max-width',
+      '1200',
+      '--avif-quality',
+      '35',
+      '--avif-speed',
+      '4',
+    ])).toEqual({
+      scenarioPath: 'packages/scenarios-stage-tamagotchi-electron/src/scenarios/settings-connection.ts',
+      outputDir: './artifacts/manual-run',
+      format: 'avif',
+      avif: {
+        maxWidth: 1200,
+        quality: 35,
+        speed: 4,
+      },
+    })
+  })
+
+  it('applies default AVIF settings when format is avif', () => {
+    expect(parseCaptureCliArguments([
+      'packages/scenarios-stage-tamagotchi-electron/src/scenarios/settings-connection.ts',
+      '--output-dir',
+      './artifacts/manual-run',
+      '--format',
+      'avif',
+    ])).toEqual({
+      scenarioPath: 'packages/scenarios-stage-tamagotchi-electron/src/scenarios/settings-connection.ts',
+      outputDir: './artifacts/manual-run',
+      format: 'avif',
+      avif: {
+        maxWidth: 1920,
+        quality: 50,
+        speed: 6,
+      },
     })
   })
 
@@ -75,6 +124,42 @@ describe('parseCaptureCliArguments', () => {
     ])).toThrow('Unsupported capture format "webp". Expected "png" or "avif".')
   })
 
+  it('rejects invalid AVIF quality values', () => {
+    expect(() => parseCaptureCliArguments([
+      'packages/scenarios-stage-tamagotchi-electron/src/scenarios/settings-connection.ts',
+      '--output-dir',
+      './artifacts/manual-run',
+      '--format',
+      'avif',
+      '--avif-quality',
+      '200',
+    ])).toThrow('Unsupported AVIF quality "200". Expected an integer between 0 and 100.')
+  })
+
+  it('rejects invalid AVIF speed values', () => {
+    expect(() => parseCaptureCliArguments([
+      'packages/scenarios-stage-tamagotchi-electron/src/scenarios/settings-connection.ts',
+      '--output-dir',
+      './artifacts/manual-run',
+      '--format',
+      'avif',
+      '--avif-speed',
+      '0',
+    ])).toThrow('Unsupported AVIF speed "0". Expected an integer between 1 and 10.')
+  })
+
+  it('rejects invalid AVIF max width values', () => {
+    expect(() => parseCaptureCliArguments([
+      'packages/scenarios-stage-tamagotchi-electron/src/scenarios/settings-connection.ts',
+      '--output-dir',
+      './artifacts/manual-run',
+      '--format',
+      'avif',
+      '--avif-max-width',
+      '0',
+    ])).toThrow('Unsupported AVIF max width "0". Expected an integer >= 1.')
+  })
+
   it('rejects extra positional arguments', () => {
     expect(() => parseCaptureCliArguments([
       'packages/scenarios-stage-tamagotchi-electron/src/scenarios/settings-connection.ts',
diff --git a/packages/vishot-runner-electron/src/cli/capture.ts b/packages/vishot-runner-electron/src/cli/capture.ts
index addce058b..c77e11b0c 100644
--- a/packages/vishot-runner-electron/src/cli/capture.ts
+++ b/packages/vishot-runner-electron/src/cli/capture.ts
@@ -19,16 +19,23 @@ import { resolveElectronAppInfo } from '../utils/app-path'
 type CaptureFormat = 'png' | 'avif'
 
 /** Max width for AVIF output — anything wider is downscaled proportionally. */
-const AVIF_MAX_WIDTH = 1920
+const DEFAULT_AVIF_MAX_WIDTH = 1920
 /** AVIF quality (0-100, 100 = lossless). 50 is nearly indistinguishable for UI screenshots. */
-const AVIF_QUALITY = 50
+const DEFAULT_AVIF_QUALITY = 50
 /** rav1e speed preset (1 = slow/best, 10 = fast/worst). 6 balances size vs encode time. */
-const AVIF_SPEED = 6
+const DEFAULT_AVIF_SPEED = 6
+
+interface AvifCaptureOptions {
+  maxWidth: number
+  quality: number
+  speed: number
+}
 
 interface CaptureCliArguments {
   scenarioPath: string
   outputDir: string
   format: CaptureFormat
+  avif?: AvifCaptureOptions
 }
 
 const captureHelpText = `
@@ -40,6 +47,9 @@ const captureHelpText = `
   Options
     --output-dir, -o  Directory to write PNG screenshots into
     --format         Output format: png or avif
+    --avif-max-width Max width for AVIF output (default: 1920)
+    --avif-quality   AVIF quality between 0-100 (default: 50)
+    --avif-speed     AVIF speed between 1-10 (default: 6)
 
   Examples
     $ capture packages/scenarios-stage-tamagotchi-electron/src/scenarios/settings-connection.ts --output-dir ./artifacts/manual-run
@@ -72,22 +82,64 @@ function parseCaptureFormat(format: string | undefined): CaptureFormat {
   throw new Error(`Unsupported capture format "${format}". Expected "png" or "avif".`)
 }
 
-function createAvifTransformer(): ArtifactTransformer {
+function parsePositiveInteger(value: string, description: string): number {
+  if (!/^\d+$/.test(value)) {
+    throw new Error(`Unsupported ${description} "${value}". Expected a whole number.`)
+  }
+
+  return Number(value)
+}
+
+function parseAvifCaptureOptions(flags: {
+  avifMaxWidth?: string
+  avifQuality?: string
+  avifSpeed?: string
+}): AvifCaptureOptions {
+  const maxWidth = flags.avifMaxWidth === undefined
+    ? DEFAULT_AVIF_MAX_WIDTH
+    : parsePositiveInteger(flags.avifMaxWidth, 'AVIF max width')
+  const quality = flags.avifQuality === undefined
+    ? DEFAULT_AVIF_QUALITY
+    : parsePositiveInteger(flags.avifQuality, 'AVIF quality')
+  const speed = flags.avifSpeed === undefined
+    ? DEFAULT_AVIF_SPEED
+    : parsePositiveInteger(flags.avifSpeed, 'AVIF speed')
+
+  if (maxWidth < 1) {
+    throw new Error(`Unsupported AVIF max width "${maxWidth}". Expected an integer >= 1.`)
+  }
+
+  if (quality < 0 || quality > 100) {
+    throw new Error(`Unsupported AVIF quality "${quality}". Expected an integer between 0 and 100.`)
+  }
+
+  if (speed < 1 || speed > 10) {
+    throw new Error(`Unsupported AVIF speed "${speed}". Expected an integer between 1 and 10.`)
+  }
+
+  return {
+    maxWidth,
+    quality,
+    speed,
+  }
+}
+
+function createAvifTransformer(options: AvifCaptureOptions): ArtifactTransformer {
   return async (artifact) => {
     const derivedFilePath = artifact.filePath.replace(/\.png$/i, '.avif')
 
     const transformer = new Transformer(await readFile(artifact.filePath))
     const metadata = await transformer.metadata()
 
-    // Downscale images wider than AVIF_MAX_WIDTH, keeping aspect ratio
-    if (metadata.width > AVIF_MAX_WIDTH) {
-      const scale = AVIF_MAX_WIDTH / metadata.width
-      transformer.resize(AVIF_MAX_WIDTH, Math.round(metadata.height * scale))
+    // Downscale images wider than maxWidth, keeping aspect ratio.
+    if (metadata.width > options.maxWidth) {
+      const scale = options.maxWidth / metadata.width
+      transformer.resize(options.maxWidth, Math.round(metadata.height * scale))
     }
 
     const avifBuffer = await transformer.avif({
-      quality: AVIF_QUALITY,
-      speed: AVIF_SPEED,
+      quality: options.quality,
+      speed: options.speed,
     })
 
     await writeFile(derivedFilePath, avifBuffer)
@@ -113,6 +165,15 @@ export function parseCaptureCliArguments(argv: string[]): CaptureCliArguments {
       format: {
         type: 'string',
       },
+      avifMaxWidth: {
+        type: 'string',
+      },
+      avifQuality: {
+        type: 'string',
+      },
+      avifSpeed: {
+        type: 'string',
+      },
     },
   })
 
@@ -122,15 +183,24 @@ export function parseCaptureCliArguments(argv: string[]): CaptureCliArguments {
     throw new Error(captureUsageMessage)
   }
 
+  const format = parseCaptureFormat(cli.flags.format)
+
   return {
     scenarioPath: cli.input[0],
     outputDir: cli.flags.outputDir,
-    format: parseCaptureFormat(cli.flags.format),
+    format,
+    avif: format === 'avif'
+      ? parseAvifCaptureOptions({
+          avifMaxWidth: cli.flags.avifMaxWidth,
+          avifQuality: cli.flags.avifQuality,
+          avifSpeed: cli.flags.avifSpeed,
+        })
+      : undefined,
   }
 }
 
 async function main(): Promise<void> {
-  const { scenarioPath, outputDir, format } = parseCaptureCliArguments(process.argv.slice(2))
+  const { scenarioPath, outputDir, format, avif } = parseCaptureCliArguments(process.argv.slice(2))
   const resolvedOutputDir = path.resolve(process.cwd(), outputDir)
 
   await mkdir(resolvedOutputDir, { recursive: true })
@@ -151,7 +221,11 @@ async function main(): Promise<void> {
       resolvedOutputDir,
       format === 'avif'
         ? {
-            transformers: [createAvifTransformer()],
+            transformers: [createAvifTransformer(avif ?? {
+              maxWidth: DEFAULT_AVIF_MAX_WIDTH,
+              quality: DEFAULT_AVIF_QUALITY,
+              speed: DEFAULT_AVIF_SPEED,
+            })],
           }
         : undefined,
     )
diff --git a/packages/vishot-runner-electron/src/utils/selectors.ts b/packages/vishot-runner-electron/src/utils/selectors.ts
index 20a1807ac..b9808cdc5 100644
--- a/packages/vishot-runner-electron/src/utils/selectors.ts
+++ b/packages/vishot-runner-electron/src/utils/selectors.ts
@@ -35,11 +35,17 @@ export async function expandControlsIsland(page: Page): Promise<void> {
 }
 
 export async function openSettingsFromControlsIsland(page: Page): Promise<void> {
-  await controlButtonsByIcon(page, 'i-solar:settings-minimalistic-outline')
-    .first()
-    .click({ force: true, timeout: controlsIslandReadyTimeoutMs })
+  await waitForControlsIslandReady(page)
 
-  await sleep(100)
+  try {
+    await clickControlButtonByIcon(page, 'i-solar:settings-minimalistic-outline')
+  }
+  catch {
+    // NOTICE: The island can report ready while still collapsed on slower frames.
+    // Expand once and retry settings click to reduce flakiness during capture.
+    await expandControlsIsland(page).catch(() => {})
+    await clickControlButtonByIcon(page, 'i-solar:settings-minimalistic-outline')
+  }
 }
 
 export async function openChatFromControlsIsland(page: Page): Promise<void> {
diff --git a/packages/vishot-runtime/README.md b/packages/vishot-runtime/README.md
index 4c97b7ee3..ff7d34f0c 100644
--- a/packages/vishot-runtime/README.md
+++ b/packages/vishot-runtime/README.md
@@ -9,12 +9,20 @@ This package owns the browser-side runtime surface used by scene packages. It pr
 - readiness helpers via `markScenarioReady()` and `resetScenarioReady()`
 - the shared `ScenarioCaptureRootProps` type
 - framework-specific bindings through subpath exports such as `@proj-airi/vishot-runtime/vue`
+  - Vue bindings include `ScenarioCanvas`, `ScenarioCaptureRoot`, `useSceneReady()`
+  - Vue bindings also export screen-specific components/composables (router, navigator, markup, and navigation helpers)
 
 ## Usage
 
 ```ts
 import { markScenarioReady, resetScenarioReady } from '@proj-airi/vishot-runtime'
-import { ScenarioCanvas, ScenarioCaptureRoot } from '@proj-airi/vishot-runtime/vue'
+import {
+  ScenarioCanvas,
+  ScenarioCaptureRoot,
+  ScreenNavigator,
+  ScreenRouterProvider,
+  useSceneNavigation,
+} from '@proj-airi/vishot-runtime/vue'
 ```
 
 Keep framework-agnostic contracts at the package root and import Vue SFC bindings from `./vue`.
diff --git a/packages/vishot-runtime/package.json b/packages/vishot-runtime/package.json
index 4fedafa9d..c3828f524 100644
--- a/packages/vishot-runtime/package.json
+++ b/packages/vishot-runtime/package.json
@@ -18,7 +18,7 @@
   "exports": {
     ".": "./src/index.ts",
     "./vue": "./src/vue/index.ts",
-    "./components/*": "./src/components/*.vue",
+    "./vue/components/*": "./src/vue/components/*.vue",
     "./runtime/*": "./src/runtime/*.ts",
     "./*": "./src/*.ts"
   },
@@ -28,7 +28,10 @@
     "typecheck": "vue-tsc --noEmit"
   },
   "dependencies": {
-    "vue": "catalog:"
+    "@vueuse/core": "catalog:",
+    "reka-ui": "^2.9.5",
+    "vue": "catalog:",
+    "vue-router": "catalog:"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.5",
diff --git a/packages/vishot-runtime/src/test/ready.test.ts b/packages/vishot-runtime/src/runtime/ready.test.ts
similarity index 89%
rename from packages/vishot-runtime/src/test/ready.test.ts
rename to packages/vishot-runtime/src/runtime/ready.test.ts
index 579d630c9..897326933 100644
--- a/packages/vishot-runtime/src/test/ready.test.ts
+++ b/packages/vishot-runtime/src/runtime/ready.test.ts
@@ -1,6 +1,6 @@
 import { afterEach, describe, expect, it, vi } from 'vitest'
 
-import { markScenarioReady, resetScenarioReady } from '../runtime/ready'
+import { markScenarioReady, resetScenarioReady } from './ready'
 
 describe('scenario ready helpers', () => {
   afterEach(() => {
diff --git a/packages/vishot-runtime/src/runtime/scene-canvas.test.ts b/packages/vishot-runtime/src/runtime/scene-canvas.test.ts
new file mode 100644
index 000000000..ecd3acc67
--- /dev/null
+++ b/packages/vishot-runtime/src/runtime/scene-canvas.test.ts
@@ -0,0 +1,97 @@
+// @vitest-environment jsdom
+import { describe, expect, it } from 'vitest'
+import { createApp, h, nextTick } from 'vue'
+
+import ScenarioCanvas from '../vue/components/scenario-canvas.vue'
+
+import { computeScenarioCanvasScale } from './scene-canvas'
+
+describe('computeScenarioCanvasScale', () => {
+  it('fits the canvas to the smallest viewport ratio', () => {
+    expect(computeScenarioCanvasScale({
+      viewportWidth: 1440,
+      viewportHeight: 900,
+      canvasWidth: 1920,
+      canvasHeight: 1080,
+    })).toBe(0.75)
+  })
+
+  it('falls back to 1 when dimensions are missing', () => {
+    expect(computeScenarioCanvasScale({
+      viewportWidth: 0,
+      viewportHeight: 900,
+      canvasWidth: 1920,
+      canvasHeight: 1080,
+    })).toBe(1)
+  })
+
+  it('applies an additional multiplier to the fitted scale', () => {
+    expect(computeScenarioCanvasScale({
+      viewportWidth: 1440,
+      viewportHeight: 900,
+      canvasWidth: 1920,
+      canvasHeight: 1080,
+      scaleMultiplier: 0.75,
+    })).toBe(0.5625)
+  })
+
+  it('renders a fixed logical surface for absolute-positioned scene content', async () => {
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+
+    createApp({
+      render: () => h(
+        ScenarioCanvas,
+        {
+          width: 1920,
+          height: 1080,
+        },
+        {
+          default: () => h('div', { id: 'scene-content' }),
+        },
+      ),
+    }).mount(host)
+
+    await nextTick()
+
+    const surface = host.querySelector<HTMLElement>('[data-scenario-canvas-surface]')
+
+    expect(surface).not.toBeNull()
+    expect(surface?.style.width).toBe('1920px')
+    expect(surface?.style.height).toBe('1080px')
+  })
+
+  it('applies scale multiplier to the rendered surface transform', async () => {
+    const originalInnerWidth = window.innerWidth
+    const originalInnerHeight = window.innerHeight
+    Object.defineProperty(window, 'innerWidth', { configurable: true, value: 1440 })
+    Object.defineProperty(window, 'innerHeight', { configurable: true, value: 900 })
+
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+
+    createApp({
+      render: () => h(
+        ScenarioCanvas,
+        {
+          width: 1920,
+          height: 1080,
+          scaleMultiplier: 0.75,
+        },
+        {
+          default: () => h('div', { id: 'scene-content' }),
+        },
+      ),
+    }).mount(host)
+
+    await nextTick()
+
+    const surface = host.querySelector<HTMLElement>('[data-scenario-canvas-surface]')
+
+    expect(surface).not.toBeNull()
+    expect(surface?.style.transform).toBe('scale(0.75)')
+
+    Object.defineProperty(window, 'innerWidth', { configurable: true, value: originalInnerWidth })
+    Object.defineProperty(window, 'innerHeight', { configurable: true, value: originalInnerHeight })
+  })
+})
diff --git a/packages/vishot-runtime/src/runtime/scene-canvas.ts b/packages/vishot-runtime/src/runtime/scene-canvas.ts
index a52b2565f..c7ca208eb 100644
--- a/packages/vishot-runtime/src/runtime/scene-canvas.ts
+++ b/packages/vishot-runtime/src/runtime/scene-canvas.ts
@@ -3,6 +3,7 @@ export interface ScenarioCanvasScaleOptions {
   viewportHeight: number
   canvasWidth: number
   canvasHeight: number
+  scaleMultiplier?: number
 }
 
 /**
@@ -20,12 +21,17 @@ export interface ScenarioCanvasScaleOptions {
  */
 export function computeScenarioCanvasScale(options: ScenarioCanvasScaleOptions): number {
   const { viewportWidth, viewportHeight, canvasWidth, canvasHeight } = options
+  const scaleMultiplier = options.scaleMultiplier && options.scaleMultiplier > 0
+    ? options.scaleMultiplier
+    : 1
 
   if (viewportWidth <= 0 || viewportHeight <= 0 || canvasWidth <= 0 || canvasHeight <= 0)
-    return 1
+    return scaleMultiplier
 
-  return Math.min(
+  const fittedScale = Math.min(
     viewportWidth / canvasWidth,
     viewportHeight / canvasHeight,
   )
+
+  return fittedScale * scaleMultiplier
 }
diff --git a/packages/vishot-runtime/src/test/exports.test.ts b/packages/vishot-runtime/src/test/exports.test.ts
deleted file mode 100644
index 49def272a..000000000
--- a/packages/vishot-runtime/src/test/exports.test.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import * as runtimeModule from '../index'
-
-describe('vishot runtime exports', () => {
-  it('keeps framework-agnostic helpers on the root export only', () => {
-    expect(runtimeModule.markScenarioReady).toBeTypeOf('function')
-    expect(runtimeModule.resetScenarioReady).toBeTypeOf('function')
-    expect('ScenarioCanvas' in runtimeModule).toBe(false)
-    expect('ScenarioCaptureRoot' in runtimeModule).toBe(false)
-  })
-
-  it('exposes vue-specific bindings from the vue subpath', async () => {
-    const vueModule = await import('../vue')
-
-    expect(vueModule.ScenarioCanvas).toBeTruthy()
-    expect(vueModule.ScenarioCaptureRoot).toBeTruthy()
-  })
-})
diff --git a/packages/vishot-runtime/src/test/scene-canvas.test.ts b/packages/vishot-runtime/src/test/scene-canvas.test.ts
deleted file mode 100644
index f7cd0e777..000000000
--- a/packages/vishot-runtime/src/test/scene-canvas.test.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-// @vitest-environment jsdom
-import { describe, expect, it } from 'vitest'
-import { createApp, h, nextTick } from 'vue'
-
-import ScenarioCanvas from '../components/scenario-canvas.vue'
-
-import { computeScenarioCanvasScale } from '../runtime/scene-canvas'
-
-describe('computeScenarioCanvasScale', () => {
-  it('fits the canvas to the smallest viewport ratio', () => {
-    expect(computeScenarioCanvasScale({
-      viewportWidth: 1440,
-      viewportHeight: 900,
-      canvasWidth: 1920,
-      canvasHeight: 1080,
-    })).toBe(0.75)
-  })
-
-  it('falls back to 1 when dimensions are missing', () => {
-    expect(computeScenarioCanvasScale({
-      viewportWidth: 0,
-      viewportHeight: 900,
-      canvasWidth: 1920,
-      canvasHeight: 1080,
-    })).toBe(1)
-  })
-
-  it('renders a fixed logical surface for absolute-positioned scene content', async () => {
-    const host = document.createElement('div')
-    document.body.appendChild(host)
-
-    createApp({
-      render: () => h(
-        ScenarioCanvas,
-        {
-          width: 1920,
-          height: 1080,
-        },
-        {
-          default: () => h('div', { id: 'scene-content' }),
-        },
-      ),
-    }).mount(host)
-
-    await nextTick()
-
-    const surface = host.querySelector<HTMLElement>('[data-scenario-canvas-surface]')
-
-    expect(surface).not.toBeNull()
-    expect(surface?.style.width).toBe('1920px')
-    expect(surface?.style.height).toBe('1080px')
-  })
-})
diff --git a/packages/vishot-runtime/src/components/scenario-canvas.vue b/packages/vishot-runtime/src/vue/components/scenario-canvas.vue
similarity index 94%
rename from packages/vishot-runtime/src/components/scenario-canvas.vue
rename to packages/vishot-runtime/src/vue/components/scenario-canvas.vue
index 40363c6b3..6ebe8ae02 100644
--- a/packages/vishot-runtime/src/components/scenario-canvas.vue
+++ b/packages/vishot-runtime/src/vue/components/scenario-canvas.vue
@@ -1,14 +1,16 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 
-import { computeScenarioCanvasScale } from '../runtime/scene-canvas'
+import { computeScenarioCanvasScale } from '../../runtime/scene-canvas'
 
 const props = withDefaults(defineProps<{
   width?: number
   height?: number
+  scaleMultiplier?: number
 }>(), {
   width: 1920,
   height: 1080,
+  scaleMultiplier: 1,
 })
 
 const canvasRoot = ref<HTMLElement | null>(null)
@@ -49,6 +51,7 @@ const scale = computed(() => computeScenarioCanvasScale({
   viewportHeight: viewportHeight.value,
   canvasWidth: props.width,
   canvasHeight: props.height,
+  scaleMultiplier: props.scaleMultiplier,
 }))
 
 /**
diff --git a/packages/vishot-runtime/src/components/scenario-capture-root.vue b/packages/vishot-runtime/src/vue/components/scenario-capture-root.vue
similarity index 83%
rename from packages/vishot-runtime/src/components/scenario-capture-root.vue
rename to packages/vishot-runtime/src/vue/components/scenario-capture-root.vue
index aceab60f3..ed1ec1824 100644
--- a/packages/vishot-runtime/src/components/scenario-capture-root.vue
+++ b/packages/vishot-runtime/src/vue/components/scenario-capture-root.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { ScenarioCaptureRootProps } from '../runtime/types'
+import type { ScenarioCaptureRootProps } from '../../runtime/types'
 
 const props = withDefaults(defineProps<ScenarioCaptureRootProps>(), {
   padding: '0px',
diff --git a/packages/vishot-runtime/src/vue/components/screen-marups/index.ts b/packages/vishot-runtime/src/vue/components/screen-marups/index.ts
new file mode 100644
index 000000000..9a55e669f
--- /dev/null
+++ b/packages/vishot-runtime/src/vue/components/screen-marups/index.ts
@@ -0,0 +1,4 @@
+export { default as ScreenFocusMask } from './screen-focus-mask.vue'
+export { default as ScreenHighlightRegion } from './screen-highlight-region.vue'
+export { default as ScreenMarupsProvider } from './screen-marups-provider.vue'
+export { default as ScreenOutlineRegion } from './screen-outline-region.vue'
diff --git a/packages/vishot-runtime/src/vue/components/screen-marups/screen-focus-mask.vue b/packages/vishot-runtime/src/vue/components/screen-marups/screen-focus-mask.vue
new file mode 100644
index 000000000..b79642f0a
--- /dev/null
+++ b/packages/vishot-runtime/src/vue/components/screen-marups/screen-focus-mask.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { CSSProperties, StyleValue } from 'vue'
+
+import { computed } from 'vue'
+
+interface SceneFocusMaskProps {
+  blurPx?: number
+  class?: string | string[]
+  color?: string
+  mode?: 'blur' | 'dim'
+  opacity?: number
+  style?: StyleValue
+}
+
+const props = withDefaults(defineProps<SceneFocusMaskProps>(), {
+  blurPx: 8,
+  color: '0, 0, 0',
+  mode: 'dim',
+  opacity: 0.42,
+})
+
+const surfaceStyle = computed<CSSProperties>(() => ({
+  backgroundColor: `rgba(${props.color}, ${props.opacity})`,
+  backdropFilter: props.mode === 'blur' ? `blur(${props.blurPx}px)` : undefined,
+}))
+</script>
+
+<template>
+  <div
+    :class="[
+      ...(props.class ? (typeof props.class === 'string' ? [props.class] : props.class) : []),
+      'absolute inset-0 pointer-events-none',
+    ]"
+    :style="[surfaceStyle, props.style]"
+  />
+</template>
diff --git a/packages/vishot-runtime/src/vue/components/screen-marups/screen-highlight-region.vue b/packages/vishot-runtime/src/vue/components/screen-marups/screen-highlight-region.vue
new file mode 100644
index 000000000..e40787bfb
--- /dev/null
+++ b/packages/vishot-runtime/src/vue/components/screen-marups/screen-highlight-region.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { CSSProperties, StyleValue } from 'vue'
+
+import { computed } from 'vue'
+
+interface SceneHighlightRegionProps {
+  borderColor?: string | string[]
+  borderStyle?: string | string[]
+  borderWidthClass?: string
+  borderRadius?: number
+  class?: string | string[]
+  inset?: number
+  style?: StyleValue
+}
+
+const props = withDefaults(defineProps<SceneHighlightRegionProps>(), {
+  borderColor: 'border-white/95',
+  borderStyle: 'border-solid',
+  borderWidthClass: 'border-2',
+})
+
+const highlightStyle = computed<CSSProperties>(() => ({
+  ...(props.borderRadius !== undefined
+    ? {
+        borderRadius: `${props.borderRadius}px`,
+      }
+    : {}),
+  ...(props.inset !== undefined
+    ? {
+        margin: `${-props.inset}px`,
+      }
+    : {}),
+}))
+</script>
+
+<template>
+  <div
+    :class="[
+      ...(props.class ? (typeof props.class === 'string' ? [props.class] : props.class) : []),
+      'box-border',
+      'pointer-events-none',
+      props.borderWidthClass,
+      ...(typeof props.borderStyle === 'string' ? [props.borderStyle] : props.borderStyle),
+      ...(typeof props.borderColor === 'string' ? [props.borderColor] : props.borderColor),
+    ]"
+    :style="[highlightStyle, props.style]"
+  />
+</template>
diff --git a/packages/vishot-runtime/src/vue/components/screen-marups/screen-marups-provider.vue b/packages/vishot-runtime/src/vue/components/screen-marups/screen-marups-provider.vue
new file mode 100644
index 000000000..203e5fc80
--- /dev/null
+++ b/packages/vishot-runtime/src/vue/components/screen-marups/screen-marups-provider.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue'
+
+import { computed } from 'vue'
+
+interface SceneMarkupProviderProps {
+  height: number
+  width: number
+}
+
+const props = defineProps<SceneMarkupProviderProps>()
+
+const viewportStyle = computed<CSSProperties>(() => ({
+  position: 'relative',
+  width: `${props.width}px`,
+  height: `${props.height}px`,
+  overflow: 'hidden',
+}))
+
+const sceneStyle = computed<CSSProperties>(() => ({
+  position: 'absolute',
+  left: '0px',
+  top: '0px',
+  width: `${props.width}px`,
+  height: `${props.height}px`,
+}))
+
+const overlayStyle = computed<CSSProperties>(() => ({
+  position: 'absolute',
+  inset: '0px',
+  pointerEvents: 'none',
+}))
+</script>
+
+<template>
+  <div :style="viewportStyle">
+    <div :style="sceneStyle">
+      <slot />
+    </div>
+    <div :style="overlayStyle">
+      <slot name="overlay" />
+    </div>
+  </div>
+</template>
diff --git a/packages/vishot-runtime/src/vue/components/screen-marups/screen-outline-region.vue b/packages/vishot-runtime/src/vue/components/screen-marups/screen-outline-region.vue
new file mode 100644
index 000000000..72432b727
--- /dev/null
+++ b/packages/vishot-runtime/src/vue/components/screen-marups/screen-outline-region.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { CSSProperties, StyleValue } from 'vue'
+
+import { computed } from 'vue'
+
+interface SceneOutlineRegionProps {
+  class?: string | string[]
+  borderColor?: string
+  borderRadius?: number
+  borderWidth?: number
+  style?: StyleValue
+}
+
+const props = defineProps<SceneOutlineRegionProps>()
+
+const outlineStyle = computed<CSSProperties>(() => ({
+  border: `${props.borderWidth ?? 2}px solid ${props.borderColor ?? 'rgba(255, 255, 255, 0.96)'}`,
+  borderRadius: `${props.borderRadius ?? 12}px`,
+}))
+</script>
+
+<template>
+  <div
+    :class="[
+      ...(props.class ? (typeof props.class === 'string' ? [props.class] : props.class) : []),
+      'box-border',
+      'pointer-events-none',
+    ]"
+    :style="[outlineStyle, props.style]"
+  />
+</template>
diff --git a/packages/vishot-runtime/src/vue/components/screen-navigator/index.ts b/packages/vishot-runtime/src/vue/components/screen-navigator/index.ts
new file mode 100644
index 000000000..f63014b05
--- /dev/null
+++ b/packages/vishot-runtime/src/vue/components/screen-navigator/index.ts
@@ -0,0 +1 @@
+export { default as ScreenNavigator } from './screen-navigator.vue'
diff --git a/packages/vishot-runtime/src/vue/components/screen-navigator/screen-navigator.test.ts b/packages/vishot-runtime/src/vue/components/screen-navigator/screen-navigator.test.ts
new file mode 100644
index 000000000..549d0f87d
--- /dev/null
+++ b/packages/vishot-runtime/src/vue/components/screen-navigator/screen-navigator.test.ts
@@ -0,0 +1,241 @@
+// @vitest-environment jsdom
+import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest'
+import { createApp, h, nextTick, ref } from 'vue'
+import { createMemoryHistory, createRouter } from 'vue-router'
+
+import ScreenNavigator from './screen-navigator.vue'
+
+const originalElementScrollIntoView = Element.prototype.scrollIntoView
+const originalObjectScrollIntoView = (Object.prototype as { scrollIntoView?: unknown }).scrollIntoView
+
+beforeAll(() => {
+  Object.defineProperty(Element.prototype, 'scrollIntoView', {
+    configurable: true,
+    value: vi.fn(),
+  })
+
+  Object.defineProperty(Object.prototype, 'scrollIntoView', {
+    configurable: true,
+    value: vi.fn(),
+  })
+})
+
+afterAll(() => {
+  Object.defineProperty(Element.prototype, 'scrollIntoView', {
+    configurable: true,
+    value: originalElementScrollIntoView,
+  })
+
+  if (originalObjectScrollIntoView === undefined) {
+    // Keep Object prototype clean when this shim didn't exist before the test run.
+    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+    delete (Object.prototype as { scrollIntoView?: unknown }).scrollIntoView
+  }
+  else {
+    Object.defineProperty(Object.prototype, 'scrollIntoView', {
+      configurable: true,
+      value: originalObjectScrollIntoView,
+    })
+  }
+})
+
+const scenes = [
+  { id: 'intro-chat', title: 'Intro Chat' },
+  { id: 'intro-websocket', title: 'Intro WebSocket' },
+]
+
+async function mountSceneNavigator(onNavigate = vi.fn()) {
+  const host = document.createElement('div')
+  document.body.appendChild(host)
+  const router = createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      { path: '/intro-chat', component: { template: '<div />' } },
+      { path: '/intro-websocket', component: { template: '<div />' } },
+    ],
+  })
+
+  await router.push('/intro-chat')
+  await router.isReady()
+
+  const app = createApp({
+    render: () => h(ScreenNavigator, {
+      currentSceneId: ref('intro-chat'),
+      onNavigate,
+      scenes,
+    }),
+  })
+  app.use(router)
+
+  app.mount(host)
+
+  return {
+    app,
+    host,
+  }
+}
+
+describe('scene-navigator', () => {
+  it('renders only compact prev/jump/next controls by default', async () => {
+    const { app, host } = await mountSceneNavigator()
+
+    expect(host.querySelector('[data-scene-nav-prev]')).not.toBeNull()
+    expect(host.querySelector('[data-scene-nav-jump]')).not.toBeNull()
+    expect(host.querySelector('[data-scene-nav-next]')).not.toBeNull()
+    expect(host.querySelector('[data-scene-nav-panel]')).toBeNull()
+    expect(host.textContent).not.toContain('Current scene')
+
+    app.unmount()
+    host.remove()
+  })
+
+  it('opens palette from jump button and selects a scene', async () => {
+    const onNavigate = vi.fn()
+    const { app, host } = await mountSceneNavigator(onNavigate)
+
+    host.querySelector<HTMLElement>('[data-scene-nav-jump]')?.click()
+    await nextTick()
+
+    expect(document.querySelector('[data-scene-nav-palette][data-state="open"]')).not.toBeNull()
+
+    document.querySelector<HTMLElement>('[data-scene-nav-item="intro-websocket"]')?.click()
+    await nextTick()
+
+    expect(onNavigate).toHaveBeenCalledWith('intro-websocket')
+    expect(document.querySelector('[data-scene-nav-palette][data-state="open"]')).toBeNull()
+
+    app.unmount()
+    host.remove()
+  })
+
+  it('opens palette on Ctrl+K and closes with Escape', async () => {
+    const { app, host } = await mountSceneNavigator()
+
+    window.dispatchEvent(new KeyboardEvent('keydown', { ctrlKey: true, key: 'k' }))
+    await nextTick()
+    expect(document.querySelector('[data-scene-nav-palette][data-state="open"]')).not.toBeNull()
+
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+    await nextTick()
+    expect(document.querySelector('[data-scene-nav-palette][data-state="open"]')).toBeNull()
+
+    app.unmount()
+    host.remove()
+  })
+
+  it('navigates with prev/next buttons', async () => {
+    const onNavigate = vi.fn()
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    const router = createRouter({
+      history: createMemoryHistory(),
+      routes: [
+        { path: '/intro-chat', component: { template: '<div />' } },
+        { path: '/intro-websocket', component: { template: '<div />' } },
+      ],
+    })
+    await router.push('/intro-chat')
+    await router.isReady()
+
+    const currentSceneId = ref('intro-websocket')
+    const app = createApp({
+      render: () => h(ScreenNavigator, {
+        currentSceneId,
+        onNavigate,
+        scenes,
+      }),
+    })
+    app.use(router)
+
+    app.mount(host)
+    await nextTick()
+
+    host.querySelector<HTMLElement>('[data-scene-nav-prev]')?.click()
+    expect(onNavigate).toHaveBeenCalledWith('intro-chat')
+
+    onNavigate.mockClear()
+    currentSceneId.value = 'intro-chat'
+    await nextTick()
+    host.querySelector<HTMLElement>('[data-scene-nav-next]')?.click()
+    expect(onNavigate).toHaveBeenCalledWith('intro-websocket')
+
+    app.unmount()
+    host.remove()
+  })
+
+  it('supports ArrowLeft, ArrowRight, and Space shortcuts for scene navigation', async () => {
+    const onNavigate = vi.fn()
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    const router = createRouter({
+      history: createMemoryHistory(),
+      routes: [
+        { path: '/intro-chat', component: { template: '<div />' } },
+        { path: '/intro-websocket', component: { template: '<div />' } },
+      ],
+    })
+    await router.push('/intro-chat')
+    await router.isReady()
+
+    const currentSceneId = ref('intro-websocket')
+    const app = createApp({
+      render: () => h(ScreenNavigator, {
+        currentSceneId,
+        onNavigate,
+        scenes,
+      }),
+    })
+    app.use(router)
+
+    app.mount(host)
+    await nextTick()
+
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
+    await nextTick()
+    expect(onNavigate).toHaveBeenCalledWith('intro-chat')
+
+    onNavigate.mockClear()
+    currentSceneId.value = 'intro-chat'
+    await nextTick()
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
+    await nextTick()
+    expect(onNavigate).toHaveBeenCalledWith('intro-websocket')
+
+    onNavigate.mockClear()
+    currentSceneId.value = 'intro-chat'
+    await nextTick()
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Space' }))
+    await nextTick()
+    expect(onNavigate).toHaveBeenCalledWith('intro-websocket')
+
+    app.unmount()
+    host.remove()
+  })
+
+  it('supports ArrowUp/ArrowDown navigation and Enter select in jump dialog', async () => {
+    const onNavigate = vi.fn()
+    const { app, host } = await mountSceneNavigator(onNavigate)
+
+    host.querySelector<HTMLElement>('[data-scene-nav-jump]')?.click()
+    await nextTick()
+
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
+    await nextTick()
+    expect(document.querySelector('[data-scene-nav-item="intro-websocket"][data-scene-nav-active="true"]')).not.toBeNull()
+
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
+    await nextTick()
+    expect(document.querySelector('[data-scene-nav-item="intro-chat"][data-scene-nav-active="true"]')).not.toBeNull()
+
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
+    await nextTick()
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }))
+    await nextTick()
+
+    expect(onNavigate).toHaveBeenCalledWith('intro-websocket')
+    expect(document.querySelector('[data-scene-nav-palette][data-state="open"]')).toBeNull()
+
+    app.unmount()
+    host.remove()
+  })
+})
diff --git a/packages/vishot-runtime/src/vue/components/screen-navigator/screen-navigator.vue b/packages/vishot-runtime/src/vue/components/screen-navigator/screen-navigator.vue
new file mode 100644
index 000000000..058592e6e
--- /dev/null
+++ b/packages/vishot-runtime/src/vue/components/screen-navigator/screen-navigator.vue
@@ -0,0 +1,378 @@
+<script setup lang="ts">
+import type { GenericComponentInstance } from 'reka-ui'
+import type { Ref } from 'vue'
+import type { RouteRecordNormalized } from 'vue-router'
+
+import { useMagicKeys } from '@vueuse/core'
+import {
+  DialogContent,
+  DialogDescription,
+  DialogOverlay,
+  DialogPortal,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+  ListboxContent,
+  ListboxFilter,
+  ListboxItem,
+  ListboxRoot,
+} from 'reka-ui'
+import { computed, inject, onBeforeUnmount, ref, unref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import { useSceneNavigation } from '../../composables/screen-navigation/use-screen-navigation'
+import { injectSceneRouterStore } from '../screen-router/context'
+
+interface SceneDefinition {
+  id: string
+  title: string
+}
+
+interface SceneNavigatorProps {
+  currentSceneId?: Ref<string> | string
+  onNavigate?: (sceneId: string) => void
+  scenes?: readonly SceneDefinition[]
+}
+
+const props = defineProps<SceneNavigatorProps>()
+const router = useRouter()
+const route = useRoute()
+const sceneRouterStore = inject(injectSceneRouterStore, null)
+
+const isPaletteOpen = ref(false)
+const isPanelVisible = ref(false)
+const listboxRef = ref<GenericComponentInstance<typeof ListboxRoot>>()
+
+let panelHideTimer: ReturnType<typeof setTimeout> | undefined
+
+function createRouteTitle(routeRecord: RouteRecordNormalized): string {
+  if (typeof routeRecord.meta.title === 'string' && routeRecord.meta.title.length > 0) {
+    return routeRecord.meta.title
+  }
+
+  const pathToken = routeRecord.path
+    .split('/')
+    .filter(Boolean)
+    .at(-1)
+
+  if (!pathToken) {
+    return 'Home'
+  }
+
+  return pathToken
+    .split('-')
+    .filter(Boolean)
+    .map(token => token[0]?.toUpperCase() + token.slice(1))
+    .join(' ')
+}
+
+const routeScenes = computed<SceneDefinition[]>(() => {
+  const normalizedRoutes = router.getRoutes()
+    .filter((routeRecord) => {
+      if (routeRecord.redirect) {
+        return false
+      }
+
+      if (routeRecord.path.includes(':')) {
+        return false
+      }
+
+      return routeRecord.meta.sceneNavigator !== false
+    })
+
+  const dedupedByPath = new Map<string, SceneDefinition>()
+  for (const routeRecord of normalizedRoutes) {
+    if (dedupedByPath.has(routeRecord.path)) {
+      continue
+    }
+
+    dedupedByPath.set(routeRecord.path, {
+      id: routeRecord.path,
+      title: createRouteTitle(routeRecord),
+    })
+  }
+
+  return [...dedupedByPath.values()].sort((a, b) => a.id.localeCompare(b.id))
+})
+
+const captureRootScenes = computed<SceneDefinition[]>(() => {
+  if (!sceneRouterStore) {
+    return []
+  }
+
+  return sceneRouterStore.currentRouteCaptureRoots.value.map(captureRoot => ({
+    id: captureRoot.id,
+    title: captureRoot.title,
+  }))
+})
+
+const resolvedScenes = computed(() => {
+  if (props.scenes) {
+    return props.scenes
+  }
+
+  if (captureRootScenes.value.length > 0) {
+    return captureRootScenes.value
+  }
+
+  return routeScenes.value
+})
+
+const resolvedCurrentSceneId = computed(() => (
+  props.currentSceneId
+    ? unref(props.currentSceneId)
+    : captureRootScenes.value.length > 0
+      ? sceneRouterStore?.activeCaptureRootId.value ?? captureRootScenes.value[0]?.id ?? route.path
+      : route.path
+))
+const currentSceneId = resolvedCurrentSceneId
+
+function navigateToScene(sceneId: string): void {
+  if (props.onNavigate) {
+    props.onNavigate(sceneId)
+    return
+  }
+
+  if (sceneId === route.path) {
+    return
+  }
+
+  if (captureRootScenes.value.length > 0 && sceneRouterStore) {
+    void sceneRouterStore.navigateToCaptureRoot(sceneId)
+    return
+  }
+
+  void router.push({ path: sceneId })
+}
+
+const navigation = useSceneNavigation({
+  currentSceneId: resolvedCurrentSceneId,
+  onNavigate: computed(() => navigateToScene),
+  scenes: resolvedScenes,
+})
+
+const {
+  canGoNext,
+  canGoPrev,
+  goNext,
+  goPrev,
+  goToScene,
+  paletteItems,
+  searchQuery,
+} = navigation
+
+function openPalette() {
+  isPaletteOpen.value = true
+}
+
+function closePalette() {
+  isPaletteOpen.value = false
+}
+
+function clearPanelHideTimer(): void {
+  if (!panelHideTimer) {
+    return
+  }
+
+  clearTimeout(panelHideTimer)
+  panelHideTimer = undefined
+}
+
+function schedulePanelHide(): void {
+  clearPanelHideTimer()
+  panelHideTimer = setTimeout(() => {
+    if (isPaletteOpen.value) {
+      return
+    }
+
+    isPanelVisible.value = false
+  }, 1200)
+}
+
+function revealPanel(): void {
+  isPanelVisible.value = true
+  schedulePanelHide()
+}
+
+function selectScene(sceneId: string) {
+  goToScene(sceneId)
+  closePalette()
+}
+
+function isEditableTarget(target: EventTarget | null): boolean {
+  if (!(target instanceof HTMLElement)) {
+    return false
+  }
+
+  return target.isContentEditable
+    || target instanceof HTMLInputElement
+    || target instanceof HTMLTextAreaElement
+    || target instanceof HTMLSelectElement
+}
+
+function hasEditableFocus(): boolean {
+  return isEditableTarget(document.activeElement)
+}
+
+watch(isPaletteOpen, (isOpen) => {
+  if (isOpen) {
+    isPanelVisible.value = true
+    clearPanelHideTimer()
+    requestAnimationFrame(() => {
+      listboxRef.value?.highlightFirstItem()
+    })
+  }
+  else {
+    schedulePanelHide()
+  }
+})
+
+onBeforeUnmount(() => {
+  clearPanelHideTimer()
+})
+
+const { ctrl_k, meta_k, escape, arrowleft, arrowright, space } = useMagicKeys()
+
+watch(escape, val => val && closePalette())
+watch([ctrl_k, meta_k], ([ctrl, meta]) => (ctrl || meta) && openPalette())
+watch(arrowleft, val => val && !isPaletteOpen.value && !hasEditableFocus() && goPrev())
+watch(arrowright, val => val && !isPaletteOpen.value && !hasEditableFocus() && goNext())
+watch(space, val => val && !isPaletteOpen.value && !hasEditableFocus() && goNext())
+</script>
+
+<template>
+  <div
+    :class="[
+      'fixed bottom-4 left-4 z-50 size-12',
+    ]"
+    @mouseenter="revealPanel"
+    @mouseleave="schedulePanelHide"
+  >
+    <button
+      v-if="!isPanelVisible && !isPaletteOpen"
+      type="button"
+      aria-label="Show scene navigation"
+      :class="[
+        'absolute inset-0 rounded-xl bg-transparent',
+      ]"
+      @focus="revealPanel"
+    />
+
+    <div
+      :class="[
+        'absolute bottom-0 left-0 flex items-center gap-1 rounded-xl bg-neutral-950/68 p-1.5 backdrop-blur-xl transition-all duration-250 ease-out',
+        isPanelVisible || isPaletteOpen
+          ? 'opacity-100 translate-y-0 pointer-events-auto'
+          : 'opacity-0 translate-y-1 pointer-events-none',
+      ]"
+    >
+      <button
+        data-scene-nav-prev
+        type="button"
+        :disabled="!canGoPrev"
+        :class="[
+          'inline-flex size-8 items-center justify-center rounded-lg text-white/86',
+          'transition duration-150 ease-out hover:bg-white/12 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-400/80',
+          'disabled:cursor-not-allowed disabled:opacity-35',
+        ]"
+        @click="goPrev"
+      >
+        <span :class="['i-ph-arrow-left text-base']" />
+      </button>
+
+      <DialogRoot v-model:open="isPaletteOpen">
+        <DialogTrigger as-child>
+          <button
+            data-scene-nav-jump
+            type="button"
+            :class="[
+              'inline-flex size-8 items-center justify-center rounded-lg text-white/86',
+              'transition duration-150 ease-out hover:bg-white/12 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-400/80',
+            ]"
+          >
+            <span :class="['i-ph-magnifying-glass text-base']" />
+          </button>
+        </DialogTrigger>
+
+        <DialogPortal>
+          <DialogOverlay
+            :class="[
+              'pointer-events-auto fixed inset-0 z-60 bg-black/40',
+            ]"
+          />
+          <DialogContent
+            data-scene-nav-palette
+            :class="[
+              'fixed left-1/2 top-[18dvh] z-60 w-[min(42rem,calc(100vw-2rem))] -translate-x-1/2 rounded-3xl border border-white/12 bg-neutral-950/94 p-3 text-white',
+              'shadow-2xl shadow-black/40 backdrop-blur-xl focus:outline-none',
+            ]"
+          >
+            <DialogTitle :class="['sr-only']">
+              Jump to scene
+            </DialogTitle>
+            <DialogDescription :class="['sr-only']">
+              Search and select a scene to navigate.
+            </DialogDescription>
+
+            <ListboxRoot ref="listboxRef">
+              <label :class="['block']">
+                <span :class="['sr-only']">Search scenes</span>
+                <ListboxFilter
+                  v-model="searchQuery"
+                  placeholder="Jump to scene"
+                  auto-focus
+                  :class="[
+                    'w-full rounded-xl bg-white/5 px-4 py-3 text-sm text-white outline-none',
+                    'placeholder:text-white/35 focus:ring-2 focus:ring-neutral-400/20',
+                  ]"
+                />
+              </label>
+
+              <ListboxContent
+                v-if="paletteItems.length > 0"
+                as="ul"
+                :class="['mt-3 max-h-72 overflow-auto rounded-xl bg-white/4 p-1 flex flex-col gap-1']"
+              >
+                <ListboxItem
+                  v-for="scene in paletteItems"
+                  :key="scene.id"
+                  :value="scene.id"
+                  as-child
+                  @select="selectScene(scene.id)"
+                >
+                  <button
+                    :data-scene-nav-item="scene.id"
+                    type="button"
+                    :class="[
+                      'flex w-full items-center justify-between gap-3 rounded-lg px-3 py-2 text-left text-sm transition',
+                      'data-[highlighted]:bg-white/15 data-[highlighted]:text-white',
+                      scene.id === currentSceneId
+                        ? 'bg-white/12 text-white'
+                        : 'text-white/78 hover:bg-white/8 hover:text-white',
+                    ]"
+                  >
+                    <span :class="['min-w-0 truncate font-medium']">{{ scene.title }}</span>
+                  </button>
+                </ListboxItem>
+              </ListboxContent>
+            </ListboxRoot>
+          </DialogContent>
+        </DialogPortal>
+      </DialogRoot>
+
+      <button
+        data-scene-nav-next
+        type="button"
+        :disabled="!canGoNext"
+        :class="[
+          'inline-flex size-8 items-center justify-center rounded-lg text-white/86',
+          'transition duration-150 ease-out hover:bg-white/12 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-400/80',
+          'disabled:cursor-not-allowed disabled:opacity-35',
+        ]"
+        @click="goNext"
+      >
+        <span :class="['i-ph-arrow-left-bold text-base rotate-180']" />
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/packages/vishot-runtime/src/vue/components/screen-router/context.ts b/packages/vishot-runtime/src/vue/components/screen-router/context.ts
new file mode 100644
index 000000000..b6fa6c602
--- /dev/null
+++ b/packages/vishot-runtime/src/vue/components/screen-router/context.ts
@@ -0,0 +1,17 @@
+import type { ComputedRef, InjectionKey } from 'vue'
+
+export interface SceneRouterCaptureRoot {
+  id: string
+  routePath: string
+  title: string
+}
+
+export interface SceneRouterStore {
+  activeCaptureRootId: ComputedRef<string | null>
+  currentRouteCaptureRoots: ComputedRef<SceneRouterCaptureRoot[]>
+  navigateToCaptureRoot: (id: string) => Promise<void>
+  registerCaptureRoot: (root: SceneRouterCaptureRoot) => void
+  unregisterCaptureRoot: (routePath: string, id: string) => void
+}
+
+export const injectSceneRouterStore: InjectionKey<SceneRouterStore> = Symbol('vishot:scene-router-store')
diff --git a/packages/vishot-runtime/src/vue/components/screen-router/index.ts b/packages/vishot-runtime/src/vue/components/screen-router/index.ts
new file mode 100644
index 000000000..a69876a69
--- /dev/null
+++ b/packages/vishot-runtime/src/vue/components/screen-router/index.ts
@@ -0,0 +1,2 @@
+export { default as ScreenRouterCaptureRoot } from './screen-router-capture-root.vue'
+export { default as ScreenRouterProvider } from './screen-router-provider.vue'
diff --git a/packages/vishot-runtime/src/vue/components/screen-router/screen-router-capture-root.vue b/packages/vishot-runtime/src/vue/components/screen-router/screen-router-capture-root.vue
new file mode 100644
index 000000000..0ab60dfeb
--- /dev/null
+++ b/packages/vishot-runtime/src/vue/components/screen-router/screen-router-capture-root.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { ScenarioCaptureRootProps } from '../../../runtime/types'
+
+import { computed, inject, onMounted, onUnmounted } from 'vue'
+import { useRoute } from 'vue-router'
+
+import ScenarioCaptureRoot from '../scenario-capture-root.vue'
+
+import { injectSceneRouterStore } from './context'
+
+const props = withDefaults(defineProps<ScenarioCaptureRootProps>(), {
+  padding: '0px',
+})
+
+const route = useRoute()
+const sceneRouterStore = inject(injectSceneRouterStore, null)
+
+function humanizeCaptureRootName(name: string): string {
+  return name
+    .split('-')
+    .filter(Boolean)
+    .map(token => token[0]?.toUpperCase() + token.slice(1))
+    .join(' ')
+}
+
+const shouldDisplay = computed(() => {
+  if (!sceneRouterStore) {
+    return true
+  }
+
+  const activeId = sceneRouterStore.activeCaptureRootId.value
+  if (!activeId) {
+    return true
+  }
+
+  return activeId === props.name
+})
+
+onMounted(() => {
+  if (!sceneRouterStore) {
+    return
+  }
+
+  sceneRouterStore.registerCaptureRoot({
+    id: props.name,
+    routePath: route.path,
+    title: humanizeCaptureRootName(props.name),
+  })
+})
+
+onUnmounted(() => {
+  if (!sceneRouterStore) {
+    return
+  }
+
+  sceneRouterStore.unregisterCaptureRoot(route.path, props.name)
+})
+</script>
+
+<template>
+  <ScenarioCaptureRoot v-show="shouldDisplay" :name="props.name" :padding="props.padding">
+    <slot />
+  </ScenarioCaptureRoot>
+</template>
diff --git a/packages/vishot-runtime/src/vue/components/screen-router/screen-router-provider.test.ts b/packages/vishot-runtime/src/vue/components/screen-router/screen-router-provider.test.ts
new file mode 100644
index 000000000..004580a8b
--- /dev/null
+++ b/packages/vishot-runtime/src/vue/components/screen-router/screen-router-provider.test.ts
@@ -0,0 +1,87 @@
+// @vitest-environment jsdom
+import { describe, expect, it } from 'vitest'
+import { createApp, h, inject, nextTick, onMounted, ref } from 'vue'
+import { createMemoryHistory, createRouter } from 'vue-router'
+
+import ScreenRouterProvider from './screen-router-provider.vue'
+
+import { injectSceneRouterStore } from './context'
+
+function mountProviderWithQuery() {
+  const host = document.createElement('div')
+  document.body.appendChild(host)
+
+  const activeCaptureRootId = ref<string | null>(null)
+
+  const Probe = {
+    setup() {
+      const sceneRouterStore = inject(injectSceneRouterStore, null)
+
+      onMounted(() => {
+        if (!sceneRouterStore) {
+          return
+        }
+
+        const routePath = '/docs/setup-and-use'
+        sceneRouterStore.registerCaptureRoot({
+          id: 'manual-chat-window',
+          routePath,
+          title: 'Manual Chat Window',
+        })
+        sceneRouterStore.registerCaptureRoot({
+          id: 'intro-chat-window',
+          routePath,
+          title: 'Intro Chat Window',
+        })
+
+        activeCaptureRootId.value = sceneRouterStore.activeCaptureRootId.value
+      })
+
+      return () => h('div')
+    },
+  }
+
+  const router = createRouter({
+    history: createMemoryHistory(),
+    routes: [{ path: '/docs/setup-and-use', component: Probe }],
+  })
+
+  const app = createApp({
+    render: () => h(ScreenRouterProvider, null, { default: () => h(Probe) }),
+  })
+  app.use(router)
+
+  return { app, host, router, activeCaptureRootId }
+}
+
+describe('scene-router-provider', () => {
+  it('ignores stale capture query ids that are not registered on the current route', async () => {
+    const { app, host, router, activeCaptureRootId } = mountProviderWithQuery()
+
+    await router.push({ path: '/docs/setup-and-use', query: { capture: 'manual-settings-window' } })
+    await router.isReady()
+    app.mount(host)
+    await nextTick()
+    await nextTick()
+
+    expect(activeCaptureRootId.value).toBeNull()
+
+    app.unmount()
+    host.remove()
+  })
+
+  it('keeps capture query ids that are registered on the current route', async () => {
+    const { app, host, router, activeCaptureRootId } = mountProviderWithQuery()
+
+    await router.push({ path: '/docs/setup-and-use', query: { capture: 'manual-chat-window' } })
+    await router.isReady()
+    app.mount(host)
+    await nextTick()
+    await nextTick()
+
+    expect(activeCaptureRootId.value).toBe('manual-chat-window')
+
+    app.unmount()
+    host.remove()
+  })
+})
diff --git a/packages/vishot-runtime/src/vue/components/screen-router/screen-router-provider.vue b/packages/vishot-runtime/src/vue/components/screen-router/screen-router-provider.vue
new file mode 100644
index 000000000..eb7faad6b
--- /dev/null
+++ b/packages/vishot-runtime/src/vue/components/screen-router/screen-router-provider.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { computed, provide, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import { injectSceneRouterStore } from './context'
+
+interface RegisteredCaptureRoot {
+  id: string
+  routePath: string
+  title: string
+}
+
+const route = useRoute()
+const router = useRouter()
+const registeredCaptureRoots = ref<RegisteredCaptureRoot[]>([])
+
+const currentRouteCaptureRoots = computed(() => (
+  registeredCaptureRoots.value.filter(captureRoot => captureRoot.routePath === route.path)
+))
+
+const requestedCaptureRootId = computed(() => {
+  const queryCapture = route.query.capture
+
+  if (typeof queryCapture !== 'string' || queryCapture.length === 0) {
+    return null
+  }
+
+  return queryCapture
+})
+
+const activeCaptureRootId = computed(() => {
+  const captureRootId = requestedCaptureRootId.value
+  if (!captureRootId) {
+    return null
+  }
+
+  return currentRouteCaptureRoots.value.some(captureRoot => captureRoot.id === captureRootId)
+    ? captureRootId
+    : null
+})
+
+function registerCaptureRoot(captureRoot: RegisteredCaptureRoot): void {
+  const existing = registeredCaptureRoots.value.find(item => item.id === captureRoot.id && item.routePath === captureRoot.routePath)
+  if (existing) {
+    if (existing.title !== captureRoot.title) {
+      existing.title = captureRoot.title
+    }
+    return
+  }
+
+  registeredCaptureRoots.value.push(captureRoot)
+}
+
+function unregisterCaptureRoot(routePath: string, id: string): void {
+  const index = registeredCaptureRoots.value.findIndex(item => item.id === id && item.routePath === routePath)
+  if (index === -1) {
+    return
+  }
+
+  registeredCaptureRoots.value.splice(index, 1)
+}
+
+async function navigateToCaptureRoot(id: string): Promise<void> {
+  await router.replace({
+    query: {
+      ...route.query,
+      capture: id,
+    },
+  })
+}
+
+provide(injectSceneRouterStore, {
+  activeCaptureRootId,
+  currentRouteCaptureRoots,
+  navigateToCaptureRoot,
+  registerCaptureRoot,
+  unregisterCaptureRoot,
+})
+</script>
+
+<template>
+  <slot />
+</template>
diff --git a/packages/vishot-runtime/src/vue/composables/screen-navigation/use-screen-navigation.test.ts b/packages/vishot-runtime/src/vue/composables/screen-navigation/use-screen-navigation.test.ts
new file mode 100644
index 000000000..700d7cbba
--- /dev/null
+++ b/packages/vishot-runtime/src/vue/composables/screen-navigation/use-screen-navigation.test.ts
@@ -0,0 +1,115 @@
+import { describe, expect, it } from 'vitest'
+import { ref } from 'vue'
+
+import { useSceneNavigation } from './use-screen-navigation'
+
+const scenes = [
+  { id: 'intro-chat', title: 'Intro Chat' },
+  { id: 'intro-websocket', title: 'Intro WebSocket' },
+  { id: 'settings-only', title: 'Settings Only' },
+]
+
+describe('useSceneNavigation', () => {
+  it('derives active, prev, and next scenes from current id', () => {
+    const currentSceneId = ref('intro-websocket')
+    const nav = useSceneNavigation({
+      scenes,
+      currentSceneId,
+      onNavigate: () => {},
+    })
+
+    expect(nav.activeScene.value?.id).toBe('intro-websocket')
+    expect(nav.canGoPrev.value).toBe(true)
+    expect(nav.canGoNext.value).toBe(true)
+    expect(nav.prevScene.value?.id).toBe('intro-chat')
+    expect(nav.nextScene.value?.id).toBe('settings-only')
+  })
+
+  it('returns unknown active scene fallback when current id is not in registry', () => {
+    const currentSceneId = ref('missing')
+    const nav = useSceneNavigation({
+      scenes,
+      currentSceneId,
+      onNavigate: () => {},
+    })
+
+    expect(nav.activeScene.value).toBeUndefined()
+    expect(nav.activeSceneLabel.value).toBe('Unknown scene')
+    expect(nav.canGoPrev.value).toBe(false)
+    expect(nav.canGoNext.value).toBe(false)
+  })
+
+  it('filters by query and keeps active scene first in palette items', () => {
+    const currentSceneId = ref('intro-websocket')
+    const nav = useSceneNavigation({
+      scenes,
+      currentSceneId,
+      onNavigate: () => {},
+    })
+
+    nav.searchQuery.value = 'intro'
+    expect(nav.filteredScenes.value.map(scene => scene.id)).toEqual(['intro-chat', 'intro-websocket'])
+    expect(nav.paletteItems.value[0]?.id).toBe('intro-websocket')
+  })
+
+  it('invokes onNavigate with selected scene id', () => {
+    const currentSceneId = ref('intro-chat')
+    const calls: string[] = []
+    const nav = useSceneNavigation({
+      scenes,
+      currentSceneId,
+      onNavigate: id => calls.push(id),
+    })
+
+    nav.goToScene('settings-only')
+    expect(calls).toEqual(['settings-only'])
+  })
+
+  it('goes to the previous scene when available', () => {
+    const currentSceneId = ref('intro-websocket')
+    const calls: string[] = []
+    const nav = useSceneNavigation({
+      scenes,
+      currentSceneId,
+      onNavigate: id => calls.push(id),
+    })
+
+    nav.goPrev()
+    expect(calls).toEqual(['intro-chat'])
+  })
+
+  it('goes to the next scene when available', () => {
+    const currentSceneId = ref('intro-websocket')
+    const calls: string[] = []
+    const nav = useSceneNavigation({
+      scenes,
+      currentSceneId,
+      onNavigate: id => calls.push(id),
+    })
+
+    nav.goNext()
+    expect(calls).toEqual(['settings-only'])
+  })
+
+  it('does not navigate backward at the first scene or forward at the last scene', () => {
+    const firstSceneCalls: string[] = []
+    const firstSceneNav = useSceneNavigation({
+      scenes,
+      currentSceneId: ref('intro-chat'),
+      onNavigate: id => firstSceneCalls.push(id),
+    })
+
+    firstSceneNav.goPrev()
+    expect(firstSceneCalls).toEqual([])
+
+    const lastSceneCalls: string[] = []
+    const lastSceneNav = useSceneNavigation({
+      scenes,
+      currentSceneId: ref('settings-only'),
+      onNavigate: id => lastSceneCalls.push(id),
+    })
+
+    lastSceneNav.goNext()
+    expect(lastSceneCalls).toEqual([])
+  })
+})
diff --git a/packages/vishot-runtime/src/vue/composables/screen-navigation/use-screen-navigation.ts b/packages/vishot-runtime/src/vue/composables/screen-navigation/use-screen-navigation.ts
new file mode 100644
index 000000000..f0c3b2659
--- /dev/null
+++ b/packages/vishot-runtime/src/vue/composables/screen-navigation/use-screen-navigation.ts
@@ -0,0 +1,96 @@
+import type { Ref } from 'vue'
+
+import { computed, ref, unref } from 'vue'
+
+export interface SceneNavigationScene {
+  id: string
+  title: string
+}
+
+export interface UseSceneNavigationOptions<TScene extends SceneNavigationScene> {
+  currentSceneId: Ref<string>
+  onNavigate: Ref<(sceneId: string) => void> | ((sceneId: string) => void)
+  scenes: Ref<readonly TScene[]> | readonly TScene[]
+}
+
+export function useSceneNavigation<TScene extends SceneNavigationScene>(
+  options: UseSceneNavigationOptions<TScene>,
+) {
+  const searchQuery = ref('')
+  const resolvedScenes = computed(() => unref(options.scenes))
+  const resolvedNavigate = computed(() => unref(options.onNavigate))
+
+  const normalizedQuery = computed(() => searchQuery.value.trim().toLowerCase())
+  const activeScene = computed(() => resolvedScenes.value.find(scene => scene.id === options.currentSceneId.value))
+  const activeSceneLabel = computed(() => activeScene.value?.title ?? 'Unknown scene')
+  const activeIndex = computed(() => resolvedScenes.value.findIndex(scene => scene.id === options.currentSceneId.value))
+
+  const prevScene = computed(() => (
+    activeIndex.value > 0 ? resolvedScenes.value[activeIndex.value - 1] : undefined
+  ))
+  const nextScene = computed(() => (
+    activeIndex.value >= 0 && activeIndex.value < resolvedScenes.value.length - 1
+      ? resolvedScenes.value[activeIndex.value + 1]
+      : undefined
+  ))
+
+  const canGoPrev = computed(() => prevScene.value !== undefined)
+  const canGoNext = computed(() => nextScene.value !== undefined)
+
+  const filteredScenes = computed(() => {
+    if (!normalizedQuery.value) {
+      return resolvedScenes.value
+    }
+
+    return resolvedScenes.value.filter(scene => (
+      scene.id.toLowerCase().includes(normalizedQuery.value)
+      || scene.title.toLowerCase().includes(normalizedQuery.value)
+    ))
+  })
+
+  const paletteItems = computed(() => {
+    const filtered = filteredScenes.value
+    const activeId = options.currentSceneId.value
+    const active = filtered.find(scene => scene.id === activeId)
+
+    if (!active) {
+      return filtered
+    }
+
+    return [
+      active,
+      ...filtered.filter(scene => scene.id !== activeId),
+    ]
+  })
+
+  function goToScene(sceneId: string) {
+    resolvedNavigate.value(sceneId)
+  }
+
+  function goPrev() {
+    if (prevScene.value) {
+      goToScene(prevScene.value.id)
+    }
+  }
+
+  function goNext() {
+    if (nextScene.value) {
+      goToScene(nextScene.value.id)
+    }
+  }
+
+  return {
+    activeScene,
+    activeSceneLabel,
+    canGoNext,
+    canGoPrev,
+    filteredScenes,
+    goNext,
+    goPrev,
+    goToScene,
+    nextScene,
+    paletteItems,
+    prevScene,
+    searchQuery,
+  }
+}
diff --git a/packages/vishot-runtime/src/vue/index.ts b/packages/vishot-runtime/src/vue/index.ts
index edee96f18..fc72c4fcb 100644
--- a/packages/vishot-runtime/src/vue/index.ts
+++ b/packages/vishot-runtime/src/vue/index.ts
@@ -1,2 +1,7 @@
-export { default as ScenarioCanvas } from '../components/scenario-canvas.vue'
-export { default as ScenarioCaptureRoot } from '../components/scenario-capture-root.vue'
+export { default as ScenarioCanvas } from './components/scenario-canvas.vue'
+export { default as ScenarioCaptureRoot } from './components/scenario-capture-root.vue'
+export * from './components/screen-marups'
+export * from './components/screen-navigator'
+export * from './components/screen-router'
+export * from './composables/screen-navigation/use-screen-navigation'
+export { useSceneReady } from './use-scene-ready'
diff --git a/packages/vishot-runtime/src/vue/use-scene-ready.test.ts b/packages/vishot-runtime/src/vue/use-scene-ready.test.ts
new file mode 100644
index 000000000..50888e38f
--- /dev/null
+++ b/packages/vishot-runtime/src/vue/use-scene-ready.test.ts
@@ -0,0 +1,78 @@
+// @vitest-environment jsdom
+import { describe, expect, it, vi } from 'vitest'
+import { createApp, h } from 'vue'
+
+const readyMocks = vi.hoisted(() => ({
+  markScenarioReady: vi.fn(),
+  resetScenarioReady: vi.fn(),
+}))
+
+vi.mock('../runtime/ready', () => ({
+  markScenarioReady: readyMocks.markScenarioReady,
+  resetScenarioReady: readyMocks.resetScenarioReady,
+}))
+
+class MockImage {
+  private _src = ''
+
+  addEventListener(type: string, listener: () => void): void {
+    if (type === 'load') {
+      queueMicrotask(listener)
+    }
+  }
+
+  set src(value: string) {
+    this._src = value
+  }
+
+  get src(): string {
+    return this._src
+  }
+}
+
+describe('useSceneReady', () => {
+  it('resets first and marks ready after fonts and image sources resolve', async () => {
+    const originalImage = globalThis.Image
+    const originalFonts = document.fonts
+
+    // @ts-expect-error test shim
+    globalThis.Image = MockImage
+    Object.defineProperty(document, 'fonts', {
+      configurable: true,
+      value: {
+        ready: Promise.resolve(),
+      },
+    })
+
+    const { useSceneReady } = await import('./index')
+
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+
+    const app = createApp({
+      setup() {
+        useSceneReady(['a.png', 'b.png'])
+        return () => h('div')
+      },
+    })
+
+    app.mount(host)
+    await Promise.resolve()
+    await Promise.resolve()
+    await new Promise(resolve => setTimeout(resolve, 0))
+
+    expect(readyMocks.resetScenarioReady).toHaveBeenCalledTimes(1)
+    expect(readyMocks.markScenarioReady).toHaveBeenCalledTimes(1)
+
+    app.unmount()
+    host.remove()
+
+    if (originalImage) {
+      globalThis.Image = originalImage
+    }
+    Object.defineProperty(document, 'fonts', {
+      configurable: true,
+      value: originalFonts,
+    })
+  })
+})
diff --git a/packages/vishot-runtime/src/vue/use-scene-ready.ts b/packages/vishot-runtime/src/vue/use-scene-ready.ts
new file mode 100644
index 000000000..1ab2c92d8
--- /dev/null
+++ b/packages/vishot-runtime/src/vue/use-scene-ready.ts
@@ -0,0 +1,29 @@
+import { onMounted } from 'vue'
+
+import { markScenarioReady, resetScenarioReady } from '../runtime/ready'
+
+async function waitForImageSource(source: string): Promise<void> {
+  await new Promise<void>((resolve, reject) => {
+    const image = new Image()
+
+    image.addEventListener('load', () => resolve(), { once: true })
+    image.addEventListener('error', () => reject(new Error(`Scenario image failed to load: ${source}`)), { once: true })
+    image.src = source
+  })
+}
+
+export function useSceneReady(sources: string[]): void {
+  onMounted(async () => {
+    resetScenarioReady()
+    try {
+      await Promise.all([
+        document.fonts.ready,
+        ...sources.map(source => waitForImageSource(source)),
+      ])
+      markScenarioReady()
+    }
+    catch (error) {
+      console.error(error)
+    }
+  })
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bc1f69fe6..220630609 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -60,6 +60,9 @@ catalogs:
     '@iconify-json/mdi':
       specifier: ^1.2.3
       version: 1.2.3
+    '@iconify-json/ph':
+      specifier: ^1.2.2
+      version: 1.2.2
     '@iconify-json/tabler':
       specifier: ^1.2.33
       version: 1.2.33
@@ -306,6 +309,9 @@ catalogs:
     vue:
       specifier: ^3.5.32
       version: 3.5.32
+    vue-router:
+      specifier: ^5.0.4
+      version: 5.0.4
     vue-sonner:
       specifier: 2.0.9
       version: 2.0.9
@@ -562,10 +568,10 @@ importers:
     dependencies:
       '@better-auth/drizzle-adapter':
         specifier: ^1.6.2
-        version: 1.6.2(@better-auth/core@1.6.2(@better-auth/utils@0.4.0)(@better-fetch/fetch@1.1.21)(@opentelemetry/api@1.9.1)(better-call@1.3.5(zod@4.3.6))(jose@6.2.2)(kysely@0.28.14)(nanostores@1.1.1))(@better-auth/utils@0.4.0)(drizzle-orm@0.45.2(@electric-sql/pglite@0.4.4)(@opentelemetry/api@1.9.1)(@prisma/client@5.22.0)(@types/pg@8.20.0)(better-sqlite3@12.5.0)(kysely@0.28.14)(pg@8.20.0)(postgres@3.4.9))
+        version: 1.6.2(@better-auth/core@1.4.21(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.8(zod@4.3.6))(jose@6.2.2)(kysely@0.28.14)(nanostores@1.1.1))(@better-auth/utils@0.3.0)(drizzle-orm@0.45.2(@electric-sql/pglite@0.4.4)(@opentelemetry/api@1.9.1)(@prisma/client@5.22.0)(@types/pg@8.20.0)(better-sqlite3@12.5.0)(kysely@0.28.14)(pg@8.20.0)(postgres@3.4.9))
       '@better-auth/oauth-provider':
         specifier: 'catalog:'
-        version: 1.5.6(@better-auth/core@1.6.2(@better-auth/utils@0.4.0)(@better-fetch/fetch@1.1.21)(@opentelemetry/api@1.9.1)(better-call@1.3.5(zod@4.3.6))(jose@6.2.2)(kysely@0.28.14)(nanostores@1.1.1))(@better-auth/utils@0.4.0)(@better-fetch/fetch@1.1.21)(better-auth@1.6.2(@opentelemetry/api@1.9.1)(@prisma/client@5.22.0)(better-sqlite3@12.5.0)(drizzle-kit@0.31.10)(drizzle-orm@0.45.2(@electric-sql/pglite@0.4.4)(@opentelemetry/api@1.9.1)(@prisma/client@5.22.0)(@types/pg@8.20.0)(better-sqlite3@12.5.0)(kysely@0.28.14)(pg@8.20.0)(postgres@3.4.9))(pg@8.20.0)(react@19.2.3)(vitest@4.1.4)(vue@3.5.32(typescript@5.9.3)))(better-call@1.3.5(zod@4.3.6))
+        version: 1.5.6(@better-auth/core@1.4.21(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.8(zod@4.3.6))(jose@6.2.2)(kysely@0.28.14)(nanostores@1.1.1))(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-auth@1.6.2(@opentelemetry/api@1.9.1)(@prisma/client@5.22.0)(better-sqlite3@12.5.0)(drizzle-kit@0.31.10)(drizzle-orm@0.45.2(@electric-sql/pglite@0.4.4)(@opentelemetry/api@1.9.1)(@prisma/client@5.22.0)(@types/pg@8.20.0)(better-sqlite3@12.5.0)(kysely@0.28.14)(pg@8.20.0)(postgres@3.4.9))(pg@8.20.0)(react@19.2.3)(vitest@4.1.4)(vue@3.5.32(typescript@5.9.3)))(better-call@1.1.8(zod@4.3.6))
       '@dotenvx/dotenvx':
         specifier: ^1.61.0
         version: 1.61.0
@@ -686,7 +692,7 @@ importers:
     devDependencies:
       '@better-auth/cli':
         specifier: ^1.4.21
-        version: 1.4.21(@better-fetch/fetch@1.1.21)(@electric-sql/pglite@0.4.4)(@opentelemetry/api@1.9.1)(better-call@1.3.5(zod@4.3.6))(drizzle-kit@0.31.10)(jose@6.2.2)(kysely@0.28.14)(magicast@0.5.2)(nanostores@1.1.1)(postgres@3.4.9)(react@19.2.3)(vitest@4.1.4)(vue@3.5.32(typescript@5.9.3))
+        version: 1.4.21(@better-fetch/fetch@1.1.21)(@electric-sql/pglite@0.4.4)(@opentelemetry/api@1.9.1)(better-call@1.1.8(zod@4.3.6))(drizzle-kit@0.31.10)(jose@6.2.2)(kysely@0.28.14)(magicast@0.5.2)(nanostores@1.1.1)(postgres@3.4.9)(react@19.2.3)(vitest@4.1.4)(vue@3.5.32(typescript@5.9.3))
       '@types/pg':
         specifier: ^8.20.0
         version: 8.20.0
@@ -984,7 +990,7 @@ importers:
         version: 1.2.45
       '@intlify/unplugin-vue-i18n':
         specifier: ^11.0.7
-        version: 11.0.7(@vue/compiler-dom@3.5.32)(eslint@10.2.0(jiti@2.6.1))(rollup@2.80.0)(typescript@5.9.3)(vite@8.0.8(@types/node@24.12.2)(esbuild@0.27.2)(jiti@2.6.1)(less@4.6.4)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vue-i18n@11.3.2(vue@3.5.32(typescript@5.9.3)))(vue@3.5.32(typescript@5.9.3))
+        version: 11.0.7(@vue/compiler-dom@3.5.32)(eslint@10.2.0(jiti@2.6.1))(rollup@4.60.1)(typescript@5.9.3)(vite@8.0.8(@types/node@24.12.2)(esbuild@0.27.2)(jiti@2.6.1)(less@4.6.4)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vue-i18n@11.3.2(vue@3.5.32(typescript@5.9.3)))(vue@3.5.32(typescript@5.9.3))
       '@proj-airi/cap-vite':
         specifier: workspace:*
         version: link:../../packages/cap-vite
@@ -1047,19 +1053,19 @@ importers:
         version: 4.6.4
       unplugin-info:
         specifier: ^1.3.2
-        version: 1.3.2(esbuild@0.27.2)(rollup@2.80.0)(vite@8.0.8(@types/node@24.12.2)(esbuild@0.27.2)(jiti@2.6.1)(less@4.6.4)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
+        version: 1.3.2(esbuild@0.27.2)(rollup@4.60.1)(vite@8.0.8(@types/node@24.12.2)(esbuild@0.27.2)(jiti@2.6.1)(less@4.6.4)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
       unplugin-vue-router:
         specifier: ^0.19.2
         version: 0.19.2(@vue/compiler-sfc@3.5.32)(vue-router@5.0.4(@vue/compiler-sfc@3.5.32)(pinia@3.0.4(typescript@5.9.3)(vue@3.5.32(typescript@5.9.3)))(vue@3.5.32(typescript@5.9.3)))(vue@3.5.32(typescript@5.9.3))
       unplugin-yaml:
         specifier: ^4.1.0
-        version: 4.1.0(esbuild@0.27.2)(rolldown@1.0.0-rc.15)(rollup@2.80.0)(vite@8.0.8(@types/node@24.12.2)(esbuild@0.27.2)(jiti@2.6.1)(less@4.6.4)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
+        version: 4.1.0(@nuxt/kit@3.20.2(magicast@0.5.2))(esbuild@0.27.2)(rolldown@1.0.0-rc.15)(rollup@4.60.1)(vite@8.0.8(@types/node@24.12.2)(esbuild@0.27.2)(jiti@2.6.1)(less@4.6.4)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
       vite:
         specifier: 'catalog:'
         version: 8.0.8(@types/node@24.12.2)(esbuild@0.27.2)(jiti@2.6.1)(less@4.6.4)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
       vite-bundle-visualizer:
         specifier: ^1.2.1
-        version: 1.2.1(rolldown@1.0.0-rc.15)(rollup@2.80.0)
+        version: 1.2.1(rolldown@1.0.0-rc.15)(rollup@4.60.1)
       vite-plugin-mkcert:
         specifier: 'catalog:'
         version: 2.0.0(vite@8.0.8(@types/node@24.12.2)(esbuild@0.27.2)(jiti@2.6.1)(less@4.6.4)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
@@ -1074,7 +1080,7 @@ importers:
         version: 0.11.0(vite@8.0.8(@types/node@24.12.2)(esbuild@0.27.2)(jiti@2.6.1)(less@4.6.4)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vue-router@5.0.4(@vue/compiler-sfc@3.5.32)(pinia@3.0.4(typescript@5.9.3)(vue@3.5.32(typescript@5.9.3)))(vue@3.5.32(typescript@5.9.3)))(vue@3.5.32(typescript@5.9.3))
       vue-macros:
         specifier: ^3.1.2
-        version: 3.1.2(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)(@vueuse/core@14.2.1(vue@3.5.32(typescript@5.9.3)))(esbuild@0.27.2)(rolldown@1.0.0-rc.15)(rollup@2.80.0)(typescript@5.9.3)(vite@8.0.8(@types/node@24.12.2)(esbuild@0.27.2)(jiti@2.6.1)(less@4.6.4)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vue-tsc@3.2.6(typescript@5.9.3))(vue@3.5.32(typescript@5.9.3))
+        version: 3.1.2(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)(@vueuse/core@14.2.1(vue@3.5.32(typescript@5.9.3)))(esbuild@0.27.2)(rolldown@1.0.0-rc.15)(rollup@4.60.1)(typescript@5.9.3)(vite@8.0.8(@types/node@24.12.2)(esbuild@0.27.2)(jiti@2.6.1)(less@4.6.4)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vue-tsc@3.2.6(typescript@5.9.3))(vue@3.5.32(typescript@5.9.3))
       vue-tsc:
         specifier: ^3.2.6
         version: 3.2.6(typescript@5.9.3)
@@ -1853,7 +1859,7 @@ importers:
         version: 1.2.45
       '@intlify/unplugin-vue-i18n':
         specifier: ^11.0.7
-        version: 11.0.7(@vue/compiler-dom@3.5.32)(eslint@10.2.0(jiti@2.6.1))(rollup@4.60.1)(typescript@5.9.3)(vite@8.0.8(@types/node@24.12.2)(esbuild@0.27.2)(jiti@2.6.1)(less@4.6.4)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vue-i18n@11.3.2(vue@3.5.32(typescript@5.9.3)))(vue@3.5.32(typescript@5.9.3))
+        version: 11.0.7(@vue/compiler-dom@3.5.32)(eslint@10.2.0(jiti@2.6.1))(rollup@2.80.0)(typescript@5.9.3)(vite@8.0.8(@types/node@24.12.2)(esbuild@0.27.2)(jiti@2.6.1)(less@4.6.4)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vue-i18n@11.3.2(vue@3.5.32(typescript@5.9.3)))(vue@3.5.32(typescript@5.9.3))
       '@proj-airi/iconify-meteocons':
         specifier: 'catalog:'
         version: 0.1.4
@@ -1913,19 +1919,19 @@ importers:
         version: 4.6.4
       unplugin-info:
         specifier: ^1.3.2
-        version: 1.3.2(esbuild@0.27.2)(rollup@4.60.1)(vite@8.0.8(@types/node@24.12.2)(esbuild@0.27.2)(jiti@2.6.1)(less@4.6.4)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
+        version: 1.3.2(esbuild@0.27.2)(rollup@2.80.0)(vite@8.0.8(@types/node@24.12.2)(esbuild@0.27.2)(jiti@2.6.1)(less@4.6.4)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
       unplugin-vue-router:
         specifier: ^0.19.2
         version: 0.19.2(@vue/compiler-sfc@3.5.32)(vue-router@5.0.4(@vue/compiler-sfc@3.5.32)(pinia@3.0.4(typescript@5.9.3)(vue@3.5.32(typescript@5.9.3)))(vue@3.5.32(typescript@5.9.3)))(vue@3.5.32(typescript@5.9.3))
       unplugin-yaml:
         specifier: ^4.1.0
-        version: 4.1.0(@nuxt/kit@3.20.2(magicast@0.5.2))(esbuild@0.27.2)(rolldown@1.0.0-rc.15)(rollup@4.60.1)(vite@8.0.8(@types/node@24.12.2)(esbuild@0.27.2)(jiti@2.6.1)(less@4.6.4)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
+        version: 4.1.0(esbuild@0.27.2)(rolldown@1.0.0-rc.15)(rollup@2.80.0)(vite@8.0.8(@types/node@24.12.2)(esbuild@0.27.2)(jiti@2.6.1)(less@4.6.4)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
       vite:
         specifier: 'catalog:'
         version: 8.0.8(@types/node@24.12.2)(esbuild@0.27.2)(jiti@2.6.1)(less@4.6.4)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
       vite-bundle-visualizer:
         specifier: ^1.2.1
-        version: 1.2.1(rolldown@1.0.0-rc.15)(rollup@4.60.1)
+        version: 1.2.1(rolldown@1.0.0-rc.15)(rollup@2.80.0)
       vite-plugin-mkcert:
         specifier: 'catalog:'
         version: 2.0.0(vite@8.0.8(@types/node@24.12.2)(esbuild@0.27.2)(jiti@2.6.1)(less@4.6.4)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
@@ -1940,7 +1946,7 @@ importers:
         version: 0.11.0(vite@8.0.8(@types/node@24.12.2)(esbuild@0.27.2)(jiti@2.6.1)(less@4.6.4)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vue-router@5.0.4(@vue/compiler-sfc@3.5.32)(pinia@3.0.4(typescript@5.9.3)(vue@3.5.32(typescript@5.9.3)))(vue@3.5.32(typescript@5.9.3)))(vue@3.5.32(typescript@5.9.3))
       vue-macros:
         specifier: ^3.1.2
-        version: 3.1.2(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)(@vueuse/core@14.2.1(vue@3.5.32(typescript@5.9.3)))(esbuild@0.27.2)(rolldown@1.0.0-rc.15)(rollup@4.60.1)(typescript@5.9.3)(vite@8.0.8(@types/node@24.12.2)(esbuild@0.27.2)(jiti@2.6.1)(less@4.6.4)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vue-tsc@3.2.6(typescript@5.9.3))(vue@3.5.32(typescript@5.9.3))
+        version: 3.1.2(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)(@vueuse/core@14.2.1(vue@3.5.32(typescript@5.9.3)))(esbuild@0.27.2)(rolldown@1.0.0-rc.15)(rollup@2.80.0)(typescript@5.9.3)(vite@8.0.8(@types/node@24.12.2)(esbuild@0.27.2)(jiti@2.6.1)(less@4.6.4)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vue-tsc@3.2.6(typescript@5.9.3))(vue@3.5.32(typescript@5.9.3))
       vue-tsc:
         specifier: ^3.2.6
         version: 3.2.6(typescript@5.9.3)
@@ -2575,12 +2581,21 @@ importers:
       '@proj-airi/vishot-runtime':
         specifier: workspace:^
         version: link:../vishot-runtime
+      '@vueuse/core':
+        specifier: 'catalog:'
+        version: 14.1.0(vue@3.5.32(typescript@5.9.3))
       date-fns:
         specifier: 'catalog:'
         version: 4.1.0
+      reka-ui:
+        specifier: ^2.9.5
+        version: 2.9.5(vue@3.5.32(typescript@5.9.3))
       vue:
         specifier: 'catalog:'
         version: 3.5.32(typescript@5.9.3)
+      vue-router:
+        specifier: 'catalog:'
+        version: 5.0.4(@vue/compiler-sfc@3.5.32)(pinia@3.0.4(typescript@5.9.3)(vue@3.5.32(typescript@5.9.3)))(vue@3.5.32(typescript@5.9.3))
     devDependencies:
       '@iconify-json/line-md':
         specifier: 'catalog:'
@@ -2591,12 +2606,18 @@ importers:
       '@iconify-json/mdi':
         specifier: 'catalog:'
         version: 1.2.3
+      '@iconify-json/ph':
+        specifier: 'catalog:'
+        version: 1.2.2
       '@unocss/reset':
         specifier: ^66.6.8
         version: 66.6.8
       '@vitejs/plugin-vue':
         specifier: ^6.0.5
         version: 6.0.5(vite@8.0.8(@types/node@24.12.2)(esbuild@0.27.2)(jiti@2.6.1)(less@4.6.4)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vue@3.5.32(typescript@5.9.3))
+      unplugin-vue-router:
+        specifier: ^0.19.2
+        version: 0.19.2(@vue/compiler-sfc@3.5.32)(vue-router@5.0.4(@vue/compiler-sfc@3.5.32)(pinia@3.0.4(typescript@5.9.3)(vue@3.5.32(typescript@5.9.3)))(vue@3.5.32(typescript@5.9.3)))(vue@3.5.32(typescript@5.9.3))
       vue-tsc:
         specifier: ^3.2.6
         version: 3.2.6(typescript@5.9.3)
@@ -3640,9 +3661,18 @@ importers:
 
   packages/vishot-runtime:
     dependencies:
+      '@vueuse/core':
+        specifier: 'catalog:'
+        version: 14.1.0(vue@3.5.32(typescript@5.9.3))
+      reka-ui:
+        specifier: ^2.9.5
+        version: 2.9.5(vue@3.5.32(typescript@5.9.3))
       vue:
         specifier: 'catalog:'
         version: 3.5.32(typescript@5.9.3)
+      vue-router:
+        specifier: 'catalog:'
+        version: 5.0.4(@vue/compiler-sfc@3.5.32)(pinia@3.0.4(typescript@5.9.3)(vue@3.5.32(typescript@5.9.3)))(vue@3.5.32(typescript@5.9.3))
     devDependencies:
       '@vitejs/plugin-vue':
         specifier: ^6.0.5
@@ -18672,13 +18702,13 @@ snapshots:
 
   '@bcoe/v8-coverage@1.0.2': {}
 
-  '@better-auth/cli@1.4.21(@better-fetch/fetch@1.1.21)(@electric-sql/pglite@0.4.4)(@opentelemetry/api@1.9.1)(better-call@1.3.5(zod@4.3.6))(drizzle-kit@0.31.10)(jose@6.2.2)(kysely@0.28.14)(magicast@0.5.2)(nanostores@1.1.1)(postgres@3.4.9)(react@19.2.3)(vitest@4.1.4)(vue@3.5.32(typescript@5.9.3))':
+  '@better-auth/cli@1.4.21(@better-fetch/fetch@1.1.21)(@electric-sql/pglite@0.4.4)(@opentelemetry/api@1.9.1)(better-call@1.1.8(zod@4.3.6))(drizzle-kit@0.31.10)(jose@6.2.2)(kysely@0.28.14)(magicast@0.5.2)(nanostores@1.1.1)(postgres@3.4.9)(react@19.2.3)(vitest@4.1.4)(vue@3.5.32(typescript@5.9.3))':
     dependencies:
       '@babel/core': 7.29.0
       '@babel/preset-react': 7.28.5(@babel/core@7.29.0)
       '@babel/preset-typescript': 7.28.5(@babel/core@7.29.0)
-      '@better-auth/core': 1.4.21(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.3.5(zod@4.3.6))(jose@6.2.2)(kysely@0.28.14)(nanostores@1.1.1)
-      '@better-auth/telemetry': 1.4.21(@better-auth/core@1.4.21(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.3.5(zod@4.3.6))(jose@6.2.2)(kysely@0.28.14)(nanostores@1.1.1))
+      '@better-auth/core': 1.4.21(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.8(zod@4.3.6))(jose@6.2.2)(kysely@0.28.14)(nanostores@1.1.1)
+      '@better-auth/telemetry': 1.4.21(@better-auth/core@1.4.21(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.8(zod@4.3.6))(jose@6.2.2)(kysely@0.28.14)(nanostores@1.1.1))
       '@better-auth/utils': 0.3.0
       '@clack/prompts': 0.11.0
       '@mrleebo/prisma-ast': 0.13.1
@@ -18755,17 +18785,6 @@ snapshots:
       nanostores: 1.1.1
       zod: 4.3.6
 
-  '@better-auth/core@1.4.21(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.3.5(zod@4.3.6))(jose@6.2.2)(kysely@0.28.14)(nanostores@1.1.1)':
-    dependencies:
-      '@better-auth/utils': 0.3.0
-      '@better-fetch/fetch': 1.1.21
-      '@standard-schema/spec': 1.1.0
-      better-call: 1.3.5(zod@4.3.6)
-      jose: 6.2.2
-      kysely: 0.28.14
-      nanostores: 1.1.1
-      zod: 4.3.6
-
   '@better-auth/core@1.6.2(@better-auth/utils@0.4.0)(@better-fetch/fetch@1.1.21)(@opentelemetry/api@1.9.1)(better-call@1.3.5(zod@4.3.6))(jose@6.2.2)(kysely@0.28.14)(nanostores@1.1.1)':
     dependencies:
       '@better-auth/utils': 0.4.0
@@ -18779,6 +18798,13 @@ snapshots:
       nanostores: 1.1.1
       zod: 4.3.6
 
+  '@better-auth/drizzle-adapter@1.6.2(@better-auth/core@1.4.21(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.8(zod@4.3.6))(jose@6.2.2)(kysely@0.28.14)(nanostores@1.1.1))(@better-auth/utils@0.3.0)(drizzle-orm@0.45.2(@electric-sql/pglite@0.4.4)(@opentelemetry/api@1.9.1)(@prisma/client@5.22.0)(@types/pg@8.20.0)(better-sqlite3@12.5.0)(kysely@0.28.14)(pg@8.20.0)(postgres@3.4.9))':
+    dependencies:
+      '@better-auth/core': 1.4.21(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.8(zod@4.3.6))(jose@6.2.2)(kysely@0.28.14)(nanostores@1.1.1)
+      '@better-auth/utils': 0.3.0
+    optionalDependencies:
+      drizzle-orm: 0.45.2(@electric-sql/pglite@0.4.4)(@opentelemetry/api@1.9.1)(@prisma/client@5.22.0)(@types/pg@8.20.0)(better-sqlite3@12.5.0)(kysely@0.28.14)(pg@8.20.0)(postgres@3.4.9)
+
   '@better-auth/drizzle-adapter@1.6.2(@better-auth/core@1.6.2(@better-auth/utils@0.4.0)(@better-fetch/fetch@1.1.21)(@opentelemetry/api@1.9.1)(better-call@1.3.5(zod@4.3.6))(jose@6.2.2)(kysely@0.28.14)(nanostores@1.1.1))(@better-auth/utils@0.4.0)(drizzle-orm@0.45.2(@electric-sql/pglite@0.4.4)(@opentelemetry/api@1.9.1)(@prisma/client@5.22.0)(@types/pg@8.20.0)(better-sqlite3@12.5.0)(kysely@0.28.14)(pg@8.20.0)(postgres@3.4.9))':
     dependencies:
       '@better-auth/core': 1.6.2(@better-auth/utils@0.4.0)(@better-fetch/fetch@1.1.21)(@opentelemetry/api@1.9.1)(better-call@1.3.5(zod@4.3.6))(jose@6.2.2)(kysely@0.28.14)(nanostores@1.1.1)
@@ -18803,13 +18829,13 @@ snapshots:
       '@better-auth/core': 1.6.2(@better-auth/utils@0.4.0)(@better-fetch/fetch@1.1.21)(@opentelemetry/api@1.9.1)(better-call@1.3.5(zod@4.3.6))(jose@6.2.2)(kysely@0.28.14)(nanostores@1.1.1)
       '@better-auth/utils': 0.4.0
 
-  '@better-auth/oauth-provider@1.5.6(@better-auth/core@1.6.2(@better-auth/utils@0.4.0)(@better-fetch/fetch@1.1.21)(@opentelemetry/api@1.9.1)(better-call@1.3.5(zod@4.3.6))(jose@6.2.2)(kysely@0.28.14)(nanostores@1.1.1))(@better-auth/utils@0.4.0)(@better-fetch/fetch@1.1.21)(better-auth@1.6.2(@opentelemetry/api@1.9.1)(@prisma/client@5.22.0)(better-sqlite3@12.5.0)(drizzle-kit@0.31.10)(drizzle-orm@0.45.2(@electric-sql/pglite@0.4.4)(@opentelemetry/api@1.9.1)(@prisma/client@5.22.0)(@types/pg@8.20.0)(better-sqlite3@12.5.0)(kysely@0.28.14)(pg@8.20.0)(postgres@3.4.9))(pg@8.20.0)(react@19.2.3)(vitest@4.1.4)(vue@3.5.32(typescript@5.9.3)))(better-call@1.3.5(zod@4.3.6))':
+  '@better-auth/oauth-provider@1.5.6(@better-auth/core@1.4.21(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.8(zod@4.3.6))(jose@6.2.2)(kysely@0.28.14)(nanostores@1.1.1))(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-auth@1.6.2(@opentelemetry/api@1.9.1)(@prisma/client@5.22.0)(better-sqlite3@12.5.0)(drizzle-kit@0.31.10)(drizzle-orm@0.45.2(@electric-sql/pglite@0.4.4)(@opentelemetry/api@1.9.1)(@prisma/client@5.22.0)(@types/pg@8.20.0)(better-sqlite3@12.5.0)(kysely@0.28.14)(pg@8.20.0)(postgres@3.4.9))(pg@8.20.0)(react@19.2.3)(vitest@4.1.4)(vue@3.5.32(typescript@5.9.3)))(better-call@1.1.8(zod@4.3.6))':
     dependencies:
-      '@better-auth/core': 1.6.2(@better-auth/utils@0.4.0)(@better-fetch/fetch@1.1.21)(@opentelemetry/api@1.9.1)(better-call@1.3.5(zod@4.3.6))(jose@6.2.2)(kysely@0.28.14)(nanostores@1.1.1)
-      '@better-auth/utils': 0.4.0
+      '@better-auth/core': 1.4.21(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.8(zod@4.3.6))(jose@6.2.2)(kysely@0.28.14)(nanostores@1.1.1)
+      '@better-auth/utils': 0.3.0
       '@better-fetch/fetch': 1.1.21
       better-auth: 1.6.2(@opentelemetry/api@1.9.1)(@prisma/client@5.22.0)(better-sqlite3@12.5.0)(drizzle-kit@0.31.10)(drizzle-orm@0.45.2(@electric-sql/pglite@0.4.4)(@opentelemetry/api@1.9.1)(@prisma/client@5.22.0)(@types/pg@8.20.0)(better-sqlite3@12.5.0)(kysely@0.28.14)(pg@8.20.0)(postgres@3.4.9))(pg@8.20.0)(react@19.2.3)(vitest@4.1.4)(vue@3.5.32(typescript@5.9.3))
-      better-call: 1.3.5(zod@4.3.6)
+      better-call: 1.1.8(zod@4.3.6)
       jose: 6.2.2
       zod: 4.3.6
 
@@ -18820,9 +18846,9 @@ snapshots:
     optionalDependencies:
       '@prisma/client': 5.22.0
 
-  '@better-auth/telemetry@1.4.21(@better-auth/core@1.4.21(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.3.5(zod@4.3.6))(jose@6.2.2)(kysely@0.28.14)(nanostores@1.1.1))':
+  '@better-auth/telemetry@1.4.21(@better-auth/core@1.4.21(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.8(zod@4.3.6))(jose@6.2.2)(kysely@0.28.14)(nanostores@1.1.1))':
     dependencies:
-      '@better-auth/core': 1.4.21(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.3.5(zod@4.3.6))(jose@6.2.2)(kysely@0.28.14)(nanostores@1.1.1)
+      '@better-auth/core': 1.4.21(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.8(zod@4.3.6))(jose@6.2.2)(kysely@0.28.14)(nanostores@1.1.1)
       '@better-auth/utils': 0.3.0
       '@better-fetch/fetch': 1.1.21
 
@@ -24756,7 +24782,7 @@ snapshots:
   better-auth@1.4.21(@prisma/client@5.22.0)(better-sqlite3@12.5.0)(drizzle-kit@0.31.10)(drizzle-orm@0.41.0(@electric-sql/pglite@0.4.4)(@opentelemetry/api@1.9.1)(@prisma/client@5.22.0)(@types/pg@8.20.0)(better-sqlite3@12.5.0)(kysely@0.28.14)(pg@8.20.0)(postgres@3.4.9))(pg@8.20.0)(react@19.2.3)(vitest@4.1.4)(vue@3.5.32(typescript@5.9.3)):
     dependencies:
       '@better-auth/core': 1.4.21(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.8(zod@4.3.6))(jose@6.2.2)(kysely@0.28.14)(nanostores@1.1.1)
-      '@better-auth/telemetry': 1.4.21(@better-auth/core@1.4.21(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.3.5(zod@4.3.6))(jose@6.2.2)(kysely@0.28.14)(nanostores@1.1.1))
+      '@better-auth/telemetry': 1.4.21(@better-auth/core@1.4.21(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.8(zod@4.3.6))(jose@6.2.2)(kysely@0.28.14)(nanostores@1.1.1))
       '@better-auth/utils': 0.3.0
       '@better-fetch/fetch': 1.1.21
       '@noble/ciphers': 2.1.1
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 576be43e6..cbc48e83b 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -47,6 +47,7 @@ catalog:
   '@iconify-json/logos': ^1.2.11
   '@iconify-json/material-symbols': ^1.2.66
   '@iconify-json/mdi': ^1.2.3
+  '@iconify-json/ph': ^1.2.2
   '@iconify-json/tabler': ^1.2.33
   '@intlify/core': ^11.3.2
   '@modelcontextprotocol/sdk': ^1.29.0
@@ -130,6 +131,7 @@ catalog:
   vite-plugin-inspect: 12.0.0-beta.1
   vite-plugin-mkcert: ^2.0.0
   vue: ^3.5.32
+  vue-router: ^5.0.4
   vue-sonner: 2.0.9
   web-haptics: ^0.0.6
   ws: ^8.20.0