kaloko 0.3.0 → 0.4.0

package/README.md

@@ -75,11 +75,29 @@ it (pixels, structure, tokens, contrast). See `skills/kaloko/reference/design.md
 
 ```bash
 npx kaloko start --scenario qa/flows/checkout.yml --env design
+npx kaloko design lint                    # portable HTML: works on the canvas, from disk and in other tools
 npx kaloko walk && npx kaloko sync        # only changed steps render and travel
 npx kaloko share --name "Checkout v2"     # a version of the whole flow
 npx kaloko reference --design --version 2 # after the team accepted it
 ```
 
+On the canvas, *Prototype* (or `P`) presents the steps full screen as live pages: click through links between
+steps, switch the device, walk with the arrow keys, and share a link that opens straight into a step. The rules
+for pages that work everywhere are in `skills/kaloko/reference/portable-html.md`.
+
+## Your data is yours: formats
+
+Nothing in Kaloko is stored in a format only Kaloko reads. Every export opens from disk without Kaloko:
+
+| Export | Command | Formats |
+|---|---|---|
+| Design version | `npx kaloko export --design [--version n] --out v2.zip` | HTML, CSS, JS, fonts and images in the design folder layout; `tokens.json` (W3C DTCG); `scenario.yml` (`qawalk.scenario.v1`); screenshots (WebP); `index.html` start page |
+| Live files (handoff) | `npx kaloko export --live [--version n] --out design/` | the design folder as written |
+| Shared run | `npx kaloko export --run <id>` | zip with `run.json` (`qawalk.run.v1`), screenshots and HTML snapshots, live HTML of design steps, comments and verdicts, and `index.html`: the canvas, offline |
+| Documentation captures | `npx kaloko export --scenario <id>` | newest image and HTML of every step, `index.json` |
+
+The schemas of these formats ship with the package (`schemas/`).
+
 ## Configuration and secrets
 
 Project configuration is `kaloko.config.yml` in the repository root:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kaloko",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "See what your AI agents built: every screen, language and device walked, assessed and approved on one canvas.",
   "keywords": [
     "qa",

package/skills/kaloko/SKILL.md

@@ -31,9 +31,10 @@ the canvas, storage and collaboration are the service.
   the work belongs to, and you read `kaloko feedback` and `kaloko inbox`
   before continuing on that task.
 - Changes to intent are written back to `ACCEPTANCE.md` (change log row).
-- On a design environment: the folder follows the bundle rules, `kaloko walk`
-  and `kaloko sync` ran, `kaloko status` shows no conflict, and you read the
-  draft's feedback; a version is published only when the person asked.
+- On a design environment: the folder follows the bundle rules and
+  `kaloko design lint` shows no error, `kaloko walk` and `kaloko sync` ran,
+  `kaloko status` shows no conflict, and you read the draft's feedback; a
+  version is published only when the person asked.
 
 ## You may do without asking
 
@@ -84,7 +85,12 @@ they can do; never write secrets into the config, a scenario or a script.
   [reference/documentation.md](reference/documentation.md)
 - Designing in a design environment (bundle, sync and publish, comments,
   references, handoff, tokens, the design pack, canvas edits, branches, HTML
-  view, bringing your own design skill): [reference/design.md](reference/design.md)
+  view, presenting the prototype, exports, bringing your own design skill):
+  [reference/design.md](reference/design.md)
+- Writing design pages that work on the live step, from disk and in other
+  tools (relative URLs, no CDNs, state in the URL, deterministic content,
+  links between steps; what `kaloko design lint` checks):
+  [reference/portable-html.md](reference/portable-html.md)
 - Command reference: `kaloko help`; when something does not work (Chrome,
   token, environment URL, evaluator key), run `kaloko doctor` first and fix
   what it marks ✕.

package/skills/kaloko/reference/design.md

@@ -37,9 +37,14 @@ design/
   images, fonts, module imports, `fetch('./fixtures/x.json')`). Links to other steps are not files it needs.
 - Live steps run sandboxed on their own origin with `connect-src 'self'`: no real APIs. Use JSON fixtures in
   the bundle.
-- Prototype links: `<a data-qawalk-go="payment">` moves the canvas to that step, whatever the `href` says.
+- Links between steps are plain relative links to the page: `<a href="../payment/index.html">`. The canvas
+  follows them; `data-kaloko-go="payment"` (or `data-qawalk-go`) moves to that step whatever the `href` says.
 - Reference token values as CSS custom properties (`var(--color-accent)`), so the inspector and the token
   check see where values come from.
+- Write pages by the portable HTML rules ([portable-html.md](portable-html.md)): relative URLs only, bundled
+  fonts, no CDNs, state in the URL instead of storage, deterministic content, viewport meta and `lang`.
+  `kaloko design lint` checks the folder; `kaloko sync` runs it first and stops on errors (things that break on
+  the live step), warnings are printed.
 
 ## Sync and publish
 
@@ -62,6 +67,19 @@ design/
 4. Change what the comments ask, sync again, then answer in the comment thread (MCP `add_draft_comment`).
 5. When the person is happy, `kaloko share --name "…"` publishes a version.
 
+## Present the prototype
+
+The canvas plays design steps full screen: *Prototype* in the top bar or the step detail, or `P`. Each step runs as
+its live page in a device frame (phone for mobile viewports, a window for desktop; switchable), clicks on links and
+`data-kaloko-go` move between steps, `←` `→` walk the flow, `Esc` leaves. The address (`#present=<step>&vp=mobile`)
+opens straight into the presentation of that step: share it with the person who reviews.
+
+- Live pages need the user-content origin of the service; where it is not available (a self-hosted instance
+  without it, a step never rendered live) the presentation shows the screenshots.
+- From the local preview and an offline export, the steps open from the run's merged folder (`live/site/`), so plain
+  relative links click through there too.
+- A link's query and hash travel to the next step (`../payment/index.html?plan=pro#card`): keep prototype state there.
+
 ## References
 
 - The design reference is an accepted version: `kaloko reference --design --version 4` (a person accepts the
@@ -78,6 +96,18 @@ Development builds from the design reference:
   page structure and open comments; `list_step_changes` names the steps that changed since the last reference.
 - Translate to the project's stack with the project's own skills; keep the step ids and the token names.
 
+## Your data is yours
+
+Everything exports in open formats, readable without Kaloko:
+
+| What | Command | Contents |
+|---|---|---|
+| a design version (or `--draft`, default the design reference) | `kaloko export --design [--version n] --out dir/` or `--out v4.zip` | the live files in the folder layout, `tokens.json` (DTCG), `scenario.yml` (`qawalk.scenario.v1`), `screenshots/<step>/<locale>/<viewport>.webp`, `kaloko.json` (what is where) and `index.html`, a start page that opens from disk |
+| the live files only (the handoff) | `kaloko export --live [--version n] --out design/` | the design folder as the designer wrote it |
+| a shared run | `kaloko export --run <id>` | `run.json`, every capture, the live HTML of design steps (per revision and merged in `live/site/`), comments and verdicts, and `index.html`: the canvas, offline from `file://` |
+
+When someone asks for the design or the evidence outside Kaloko, export; do not screenshot the canvas.
+
 ## Tokens
 
 - The set is W3C DTCG. Both value styles are read: strings (`"#2E6BFF"`, `"16px"`) and the current format's

package/skills/kaloko/reference/portable-html.md

@@ -0,0 +1,92 @@
+# Portable interactive HTML
+
+Design steps are live pages. The same files have to work in three places:
+
+- **on the live origin** of the canvas (`<revision>.kaloko-usercontent.com`): a sandboxed frame with an opaque origin and
+  `Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'; connect-src 'self'; frame-src 'none';
+  worker-src 'none'; form-action 'none'` (no popups, no modals, no service workers);
+- **from disk** (`file://`): the local preview, `kaloko export --design`, and anyone who unzips an export;
+- **in another tool**: the export is the handoff and the way out of Kaloko.
+
+`kaloko design lint` checks a design folder against the rules below; `kaloko sync` runs it first and stops on errors
+(`--no-lint` skips it, `kaloko walk` prints a summary). Errors break for certain on the live step; warnings make the
+prototype fragile or the captures unstable. `kaloko design lint --all` also lists information, `--strict` fails on
+warnings, `--json` gives every finding with file, line, rule and fix.
+
+## Files
+
+- Everything a page needs is in the design folder, referenced with **relative paths** (`../_shared/app.css`). No
+  `https://`, no protocol-relative `//cdn…`, no paths starting with `/` (on the live origin `/` is the origin root, from
+  disk it is the disk root). Errors: `external-url`, `root-relative`, `outside-folder`, `missing-file`.
+- **No CDNs.** Download libraries into `_shared/` and link them relatively. Fonts are bundled as **woff2**, subset to
+  the characters used, with `@font-face` in the shared CSS; Google Fonts links do not load.
+- Only bundle file types (html, css, js, mjs, json, svg, woff2, woff, png, jpg, webp, avif, gif, mp4, webm, txt).
+  Convert TTF/OTF fonts and other formats (`file-type`).
+- **Size budget:** a file over 1 MB or a step over 5 MB (with the shared files) warns (`large-file`); 10 MB per file
+  and 40 MB per step are the limits (`too-large`). Images as webp/avif at the size shown.
+
+## Links between steps
+
+- Link steps with **plain relative links to the page itself**: `<a href="../payment/index.html">`, from a locale page
+  `../../payment/cs/index.html`. A link to a folder (`../payment/`) opens nothing from disk or a zip
+  (`directory-link`); a link to a page that does not exist warns (`broken-link`).
+- The canvas follows such links in the presentation and the Live view, and `data-kaloko-go="payment"` (or the older
+  `data-qawalk-go`) moves to a step whatever the `href` says. Keep a real `href` next to it so the page also works
+  from disk.
+- No `target="_blank"`, `window.open`, `top.location` (`new-window`, `top-navigation`): the frame may not open
+  windows or navigate the canvas.
+- Forms do not submit (`form-action 'none'`): handle `submit` in a script (`event.preventDefault()`) and go on with a
+  link or `data-kaloko-go` (`form-action`).
+
+## State and data
+
+- **State lives in the URL**, not in storage: `localStorage`, `sessionStorage`, IndexedDB and cookies throw in the
+  sandboxed frame and are empty for every other viewer (`storage`). Use `location.hash` or the query
+  (`?plan=pro#card`): a link's query and hash travel to the next step in the presentation, and work from disk.
+  Wrap any storage access you keep in `try/catch` with a fallback.
+- **No network:** real APIs, `XMLHttpRequest`, `WebSocket`, `EventSource` do not connect (`websocket`). Put data in
+  JSON fixtures of the bundle and `fetch('./fixtures/cart.json')`.
+- **No code from strings:** `eval`, `new Function`, `setTimeout('…')` are blocked (`eval`). No service workers
+  (`service-worker`), no iframes, `object` or `embed` (`embedded-frame`). `alert`, `confirm` and `prompt` are blocked
+  (`modal`): use an in-page `<dialog>`.
+
+## Deterministic content
+
+Captures are cached by content and compared in pixels. A page that changes on every render makes unchanged steps look
+changed (`nondeterministic`):
+
+- fixed dates (`new Date('2026-01-15T10:00')`), no `Date.now()` or `new Date()` for visible text;
+- fake data from a seeded generator, not `Math.random()` or `crypto.randomUUID()`;
+- animations that end, or none at the moment of capture; content that does not depend on load timing.
+
+## Document basics
+
+Every page starts like this (`doctype`, `charset`, `viewport-meta`, `lang`, `title`):
+
+```html
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Payment · Checkout</title>
+  <link rel="stylesheet" href="../_shared/app.css">
+</head>
+```
+
+- Images have `alt` (`alt=""` for decoration) (`img-alt`); real buttons, labels for fields, one `<h1>`, landmarks.
+- Respect `prefers-reduced-motion` when anything animates (`reduced-motion`):
+  `@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important } }`
+- The mobile viewports render at their real width: the viewport meta and fluid layout matter.
+
+## Tokens
+
+- `tokens.json` (W3C DTCG) in the folder root; values as **CSS custom properties** in the shared CSS
+  (`--color-accent: #2e6bff`) and used with `var(--color-accent)`, so the inspector names them and `kaloko tokens check`
+  sees raw values (`tokens-unused`, `no-tokens`).
+- Name custom properties after the token path with dots as dashes (`color.accent` → `--color-accent`).
+
+## Done means
+
+`kaloko design lint` shows no error and no warning you cannot explain, the pages open from the folder by
+double-click and click through, and `kaloko walk` renders the same in every viewport.

package/src/cli.mjs

@@ -32,6 +32,8 @@ import { htmlViewAllowed } from './lib/htmlview.mjs'
 import { service } from './lib/service.mjs'
 import { walkDesign, syncDesign, publishVersion, historyCmd, referenceCmd, tokensCmd, exportLive, localRevisions, branchCmd, uploadBlobs } from './lib/design-cli.mjs'
 import { designDir, readBase, headKey } from './lib/design.mjs'
+import { lintDesign, formatLint } from './lib/design-lint.mjs'
+import { exportDesign } from './lib/design-export.mjs'
 import { driverFor, isApp, pngSize, ocr as ocrImage } from './lib/apps/drivers.mjs'
 import { captureApp } from './lib/apps/capture.mjs'
 import { readTree, flatten } from './lib/apps/tree.mjs'
@@ -121,7 +123,8 @@ Results
                                     Semantic evaluator vs human labels: precision/recall per criterion at the
                                     configured thresholds and suggested thresholds (labels from a golden file or
                                     from reviewers' criterion verdicts in the service)
-  export [--run id] [--out file.zip]  Download a shared run (run.json + files) as a zip before it expires
+  export [--run id] [--out file.zip]  Download a shared run as a zip before it expires: run.json, every file, the live
+                                    HTML of design steps and index.html, the canvas that opens offline from disk
   export --scenario <id> [--accepted] [--out dir] [--locales l] [--viewports v]
                                     Newest capture of every step as steps/<step>/<locale>/<viewport>.<ext> plus
                                     index.json (documentation layer, Business plan); unchanged files are skipped
@@ -134,8 +137,12 @@ Design (environments with kind: design; live HTML steps in a folder)
   start --scenario <file> --env <design env>   A run of the design folder (same scenario as development and QA)
   walk [--steps a,b] [--no-cache]   Render the steps; unchanged revisions reuse their captures
   status                            Per step: synced, changed here, changed in the draft, conflict; step status
-  sync [--pull|--push] [--branch b] [--mine a,b|--theirs a,b]
+  sync [--pull|--push] [--branch b] [--mine a,b|--theirs a,b] [--no-lint]
                                     Exchange revisions with the shared draft; only changed steps and missing files travel
+                                    Lints the folder first: errors (things that break on the live step) stop the push
+  design lint [--env e | --dir design/] [--scenario file] [--all] [--strict] [--json]
+                                    Check the folder against the portable HTML rules (relative URLs, no CDNs, no storage,
+                                    deterministic content, viewport, lang, links that also work from disk); --strict fails on warnings
   share [--name <text>] [--branch b]  Publish the draft as a version of the flow (a run): "v4 · 3 changed, 17 unchanged"
   history [--scenario id] [--step id] [--locale l] [--json]
                                     Versions of the flow; revisions of a step with who (person or agent) and when
@@ -149,6 +156,9 @@ Design (environments with kind: design; live HTML steps in a folder)
                                     Live files of a version (default: the design reference) into a folder: the handoff
   export --live --views --run <id> [--viewport desktop] [--out design/]
                                     Fork into a draft: the HTML views of an app run become design steps (experimental)
+  export --design [--version n|--draft|--run id] [--out dir|file.zip]
+                                    A design version in open formats: HTML + assets, tokens.json (DTCG), scenario.yml,
+                                    screenshots and an index.html that opens from disk (default: the design reference)
 
 Common options: --run <id|dir> (or KALOKO_RUN)  --config <file>   KALOKO_AGENT=<name> labels writes by an agent
 `
@@ -709,6 +719,8 @@ const commands = {
     const { config, root, run, scenario, env } = await runContext(args)
     if (env.kind === 'design') {
       await walkDesign({ config, root, run, scenario, env, pick: list(args.steps), locales: list(args.locales) || run.meta.scope.locales, viewports: scopeViewports(run, list(args.viewports)), say, noCache: !!args['no-cache'] })
+      const lint = await lintDesign({ dir: designDir(env, root), scenario })
+      if (lint.errors || lint.warnings) say(`\nPortable HTML: ${lint.errors} error(s), ${lint.warnings} warning(s); kaloko design lint lists them${lint.errors ? ' (errors stop kaloko sync: they break on the live step)' : ''}.`)
       return
     }
     if (isApp(scenario.platform)) return walkApp({ config, root, run, scenario, env, args })
@@ -1026,9 +1038,33 @@ const commands = {
   async sync (args) {
     const { config, root, run, scenario, env } = await runContext(args)
     const client = service(config)
+    if (env.kind === 'design' && !args.pull && !args['no-lint']) {
+      // what renders locally may still break on the live step (CSP, sandbox): say so before anything is pushed
+      const lint = await lintDesign({ dir: designDir(env, root), scenario })
+      if (lint.errors || lint.warnings) say(formatLint(lint, { max: 15 }) + '\n')
+      if (lint.errors) throw new UserError(`${lint.errors} error(s) above break the design on the live step; fix them, or sync with --no-lint to push anyway.`)
+    }
     await syncDesign({ config, root, run, scenario, env, client, args, say, push: !args.pull, pull: !args.push, render: (steps) => walkDesign({ config, root, run, scenario, env, pick: steps, locales: run.meta.scope.locales, viewports: run.meta.scope.viewports, say }).then(() => evaluateRun({ run, scenario, config, root })) })
   },
 
+  async design (args) {
+    if (args._[0] !== 'lint') throw new UserError('Usage: kaloko design lint [--env <design env> | --dir design/] [--scenario file] [--all] [--strict] [--json]')
+    const { config, root } = await context(args)
+    let run = null
+    try { run = await resolveRun({ root, output: config.output, run: args.run }) } catch {}
+    let dir = typeof args.dir === 'string' ? resolve(args.dir) : null
+    if (!dir) {
+      const runEnv = run ? environment(config, run.meta.environment.name) : null
+      const env = typeof args.env === 'string' ? environment(config, args.env) : runEnv?.kind === 'design' ? runEnv : Object.keys(config.environments).map((n) => environment(config, n)).find((e) => e.kind === 'design')
+      if (!env) throw new UserError('No design environment: pass --dir <folder> or --env <design env>.')
+      dir = designDir(env, root)
+    }
+    const scenario = typeof args.scenario === 'string' && /\.ya?ml$/.test(args.scenario) ? await loadScenario(resolve(args.scenario)) : run ? await loadScenario(resolve(root, run.meta.scenario_file)).catch(() => null) : null
+    const report = await lintDesign({ dir, scenario })
+    say(args.json ? JSON.stringify(report, null, 2) : formatLint(report, { all: !!args.all, max: args.all ? 500 : 60 }))
+    if (report.errors || (args.strict && report.warnings)) process.exitCode = 1
+  },
+
   async history (args) {
     const { config, root } = await context(args)
     const scenarioId = await scenarioIdOf(args, config, root)
@@ -1234,7 +1270,7 @@ const commands = {
     const d = compareRuns(run, base)
     if (args.json) { say(JSON.stringify(d, null, 2)); return }
     say(formatComparison(d))
-    if (config.share?.url && run.org) say(`\nCanvas: ${config.share.url.replace(/\/$/, '')}/${run.org}/runs/${run.id}/#cmp=${base.id}`)
+    if (config.share?.url && run.org) { const { serviceUrl } = await import('./lib/service.mjs'); say(`\nCanvas: ${serviceUrl(config)}/${run.org}/runs/${run.id}/#cmp=${base.id}`) }
   },
 
   async draft (args) {
@@ -1290,6 +1326,15 @@ const commands = {
   async export (args) {
     const { config, root } = await context(args)
     const client = service(config)
+    if (args.design) {
+      // open formats only: the version as a folder (or zip) that opens from disk without Kaloko
+      const scenarioId = await scenarioIdOf(args, config, root)
+      const v = typeof args.version === 'string' ? args.version : typeof args.design === 'string' ? args.design : null
+      const ref = args.draft ? 'draft' : v ? `v${v.replace(/^v/, '')}` : typeof args.run === 'string' ? args.run : 'design'
+      const out = typeof args.out === 'string' ? resolve(args.out) : resolve(root, config.output, 'design-export', `${scenarioId}-${ref}`)
+      await exportDesign({ config, scenarioId, client, ref, branch: typeof args.branch === 'string' ? args.branch : 'main', out, say })
+      return
+    }
     if (args.live) {
       const scenarioId = await scenarioIdOf(args, config, root)
       let out = typeof args.out === 'string' ? resolve(args.out) : null

package/src/lib/build.mjs

@@ -1,5 +1,6 @@
 import { parsePlan, coverage, flaky } from './coverage.mjs'
 import { readFile, writeFile } from 'node:fs/promises'
+import { existsSync } from 'node:fs'
 import { join, resolve } from 'node:path'
 import { readJson, writeJson } from './util.mjs'
 import { readCaptures, runPaths, listRuns } from './run.mjs'
@@ -140,7 +141,9 @@ export async function writePreview ({ run, manifest }) {
     for (const [l, vps] of Object.entries(n.captures)) { captures[l] = {}; for (const [vp, c] of Object.entries(vps)) captures[l][vp] = c?.tree ? { ...c, tree_inline: await readJson(join(run.dir, c.tree), null) } : c }
     return { ...n, captures }
   }
-  const preview = { ...manifest, nodes: await Promise.all(manifest.nodes.map(async (n) => (n.stack ? { ...n, stack: { ...n.stack, items_inline: (await readJson(join(run.dir, n.stack.items), { items: [] })).items } } : withTrees(n)))) }
+  // design runs: live steps open from the merged tree, where links between steps resolve (design.mjs copyLive)
+  const site = existsSync(join(run.dir, 'live', 'site')) ? { live_site: 'live/site/' } : {}
+  const preview = { ...manifest, ...site, nodes: await Promise.all(manifest.nodes.map(async (n) => (n.stack ? { ...n, stack: { ...n.stack, items_inline: (await readJson(join(run.dir, n.stack.items), { items: [] })).items } } : withTrees(n)))) }
   const json = JSON.stringify(preview).replace(/</g, '\\u003c')
   const html = template.replace('/*__QAWALK_RUN__*/null', () => json)
   await writeJson(runPaths(run.dir).manifest, manifest)

package/src/lib/config.mjs

@@ -9,9 +9,13 @@ export const CONFIG_FILE = 'kaloko.config.yml'
 /** The file name before the rename to Kaloko; still found, so existing projects keep working. */
 export const LEGACY_CONFIG_FILE = 'qawalk.config.yml'
 
-/** Environment variables were QAWALK_*; the old names still work and fill the KALOKO_* ones that are not set. */
+/** Environment variables were QAWALK_*: either name fills the other when that one is not set, so new .env files work
+ *  with configs that still name QAWALK_TOKEN (share.token_env) and old .env files work with the new defaults. */
 export function aliasLegacyEnv (vars = process.env) {
-  for (const [k, v] of Object.entries(vars)) if (k.startsWith('QAWALK_') && vars[`KALOKO_${k.slice(7)}`] == null) vars[`KALOKO_${k.slice(7)}`] = v
+  for (const [k, v] of Object.entries(vars)) {
+    const m = k.match(/^(QAWALK|KALOKO)_(.+)$/)
+    if (m && vars[`${m[1] === 'QAWALK' ? 'KALOKO' : 'QAWALK'}_${m[2]}`] == null) vars[`${m[1] === 'QAWALK' ? 'KALOKO' : 'QAWALK'}_${m[2]}`] = v
+  }
 }
 aliasLegacyEnv()
 
@@ -113,5 +117,7 @@ export async function loadEnvFiles (files) {
       if (!m || process.env[m[1]] !== undefined) continue
       process.env[m[1]] = m[2].replace(/^(['"])(.*)\1$/, '$2')
     }
+    // per file, so a project .env with a former name still wins over a user-level file with the new one
+    aliasLegacyEnv()
   }
 }

package/src/lib/design-export.mjs

@@ -0,0 +1,150 @@
+// Exportability (#42): a design version leaves Kaloko in open formats only, as a folder or a zip that opens from disk:
+// the live HTML with its assets (the design folder layout), tokens.json (W3C DTCG), scenario.yml (qawalk.scenario.v1),
+// the screenshots, kaloko.json (what is where) and index.html, a start page without scripts.
+import { mkdir, writeFile } from 'node:fs/promises'
+import { createWriteStream } from 'node:fs'
+import { Readable } from 'node:stream'
+import { pipeline } from 'node:stream/promises'
+import { gunzipSync } from 'node:zlib'
+import { join, dirname, relative, basename } from 'node:path'
+import yaml from 'js-yaml'
+import { zipStream } from './zip.mjs'
+import { UserError } from './util.mjs'
+import { TOKENS_FILE } from './design-core.mjs'
+
+export const DESIGN_EXPORT_SCHEMA = 'qawalk.design-export.v1'
+const enc = encodeURIComponent
+const esc = (s) => String(s ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]))
+const titleOf = (t, locale) => (t && typeof t === 'object' ? t[locale] ?? t.default ?? Object.values(t)[0] : t) || ''
+const flowOrder = (nodes) => nodes.filter((n) => n.kind !== 'decision').slice().sort((a, b) => (a.col ?? 0) - (b.col ?? 0) || (a.lane ?? 0) - (b.lane ?? 0))
+
+/** A qawalk.scenario.v1 document from a run manifest: a design version carries the whole flow (steps, criteria, edges). */
+export function scenarioFromManifest (m) {
+  const lanes = m.lanes || []
+  const nodes = m.nodes.map((n) => {
+    const own = (n.criteria || []).filter((c) => !c.pack)
+    const packs = [...new Set((n.criteria || []).filter((c) => c.pack).map((c) => c.pack))]
+    return {
+      id: n.id, kind: n.kind, title: n.title,
+      ...(n.path != null ? { path: n.path } : {}), ...(n.purpose ? { purpose: n.purpose } : {}),
+      ...(lanes.length && Number.isInteger(n.lane) ? { lane: n.lane } : {}), ...(n.session ? { session: n.session } : {}),
+      // run manifests do not carry how a step is reached; the scenario needs it, so the export names the manual way
+      ...(['decision', 'stack'].includes(n.kind) ? {} : { execution: n.execution?.strategy && n.execution?.instructions ? { strategy: n.execution.strategy, instructions: n.execution.instructions } : { strategy: 'manual', instructions: `Open ${typeof n.path === 'string' ? n.path : `the ${n.id} step`}.` } }),
+      ...(own.length ? { criteria: own.map((c) => ({ id: c.id, text: c.text, check: c.check })) } : {}), ...(packs.length ? { packs } : {})
+    }
+  })
+  return {
+    schema: 'qawalk.scenario.v1', id: m.scenario.id, title: m.scenario.title || m.scenario.id, kind: m.scenario.kind === 'flow' ? 'flow' : 'task',
+    ...(m.project?.slug ? { project: m.project.slug } : {}),
+    locales: m.scope.locales, viewports: m.scope.viewports, ...(lanes.length ? { lanes } : {}), ...(m.sessions ? { sessions: m.sessions } : {}),
+    nodes, edges: (m.edges || []).map((e) => ({ from: e.from, to: e.to, ...(e.label ? { label: e.label } : {}), ...(e.kind && e.kind !== 'main' ? { kind: e.kind } : {}) }))
+  }
+}
+
+/** Start page of an exported design: the steps in flow order with each locale's page and screenshot; plain HTML, no script. */
+export function exportIndexHtml ({ index }) {
+  const loc0 = index.locales[0]
+  const rows = index.steps.map((s) => `<li><h2>${esc(titleOf(s.title, loc0))} <small>${esc(s.id)}</small></h2>${s.purpose ? `<p>${esc(s.purpose)}</p>` : ''}<p>${index.locales.filter((l) => s.pages[l]).map((l) => `<a href="${esc(s.pages[l].split('/').map(enc).join('/'))}">${esc(l)}: ${esc(titleOf(s.title, l))}</a>`).join(' · ') || '<em>no page</em>'}</p>${s.screenshots.length ? `<p class="shots">${s.screenshots.map((x) => `<a href="${esc(x.file)}"><img src="${esc(x.file)}" alt="${esc(`${s.id} ${x.locale} ${x.viewport}`)}" loading="lazy" width="160"></a>`).join('')}</p>` : ''}</li>`).join('\n')
+  return `<!doctype html>
+<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>${esc(index.scenario.title)} · ${esc(index.ref)}</title>
+<style>:root{color-scheme:light dark;--ink:#151514;--paper:#fff;--line:#ddd}@media (prefers-color-scheme:dark){:root{--ink:#eee;--paper:#151514;--line:#333}}body{margin:0;font:16px/1.5 system-ui,sans-serif;color:var(--ink);background:var(--paper)}main{max-width:960px;margin:0 auto;padding:32px 16px}ol{padding-left:20px}li{border-top:1px solid var(--line);padding:12px 0}h2{font-size:18px;margin:0}small{font-weight:400;opacity:.6}.shots img{border:1px solid var(--line);border-radius:4px;margin:0 8px 8px 0;height:auto}code{font-size:14px}</style></head>
+<body><main><h1>${esc(index.scenario.title)}</h1>
+<p>${esc(index.ref)}${index.version ? ` · v${esc(index.version)}${index.version_name ? ` “${esc(index.version_name)}”` : ''}` : ''} · exported ${esc(index.exported_at.slice(0, 10))} from Kaloko. Everything here is plain HTML, CSS, JS and images; it opens from disk without Kaloko.</p>
+<p>Files: <a href="scenario.yml">scenario.yml</a> (steps, criteria, flow)${index.tokens ? ` · <a href="${TOKENS_FILE}">${TOKENS_FILE}</a> (W3C DTCG design tokens)` : ''} · <a href="kaloko.json">kaloko.json</a> (what is where)</p>
+<ol>
+${rows}
+</ol></main></body></html>
+`
+}
+
+/** A folder or, when `out` ends with .zip, a zip with one top folder; put(path, bytes) then close(). */
+export function exportSink (out) {
+  if (!out.endsWith('.zip')) return { put: async (p, bytes) => { const t = join(out, p); await mkdir(dirname(t), { recursive: true }); await writeFile(t, bytes) }, close: async () => {} }
+  const top = basename(out, '.zip')
+  const entries = []
+  return {
+    put: async (p, bytes) => { entries.push({ name: `${top}/${p}`, body: bytes instanceof Uint8Array ? bytes : new TextEncoder().encode(bytes) }) },
+    close: async () => { await mkdir(dirname(out), { recursive: true }); await pipeline(Readable.fromWeb(zipStream(entries)), createWriteStream(out)) }
+  }
+}
+
+/** Run id behind a reference: design (the design reference, per branch), vN, or a run id. */
+async function runIdOf ({ client, org, scenarioId, ref, branch }) {
+  if (ref === 'design') {
+    const refs = await client.request('GET', `/orgs/${org}/scenarios/${enc(scenarioId)}/references`)
+    const id = refs.design_by_branch?.[branch] || refs.design
+    if (!id) throw new UserError(`${scenarioId} has no design reference yet; name a version with --version <n> (kaloko history lists them).`)
+    return id
+  }
+  if (/^v\d+$/.test(ref)) {
+    const v = (await client.request('GET', `/orgs/${org}/scenarios/${enc(scenarioId)}/versions`)).find((x) => String(x.version) === ref.slice(1))
+    if (!v) throw new UserError(`${scenarioId} has no version ${ref}.`)
+    return v.id
+  }
+  return ref
+}
+
+/**
+ * Exports a design version (or the draft) of a scenario into `out` (folder or .zip). Returns the index (kaloko.json).
+ * `ref`: design | vN | draft | a run id.
+ */
+export async function exportDesign ({ config, scenarioId, client, ref = 'design', branch = 'main', out, say = () => {} }) {
+  const org = config.org
+  const draft = ref === 'draft'
+  const runId = draft ? null : await runIdOf({ client, org, scenarioId, ref, branch })
+  const manifest = draft
+    ? await client.request('GET', `/orgs/${org}/scenarios/${enc(scenarioId)}/draft/manifest${branch !== 'main' ? `?branch=${enc(branch)}` : ''}`)
+    : await client.request('GET', `/orgs/${org}/runs/${runId}`)
+  if (manifest.source !== 'design' && !manifest.draft) throw new UserError(`${runId} is not a design version; kaloko export --run ${runId} exports any run.`)
+  const revs = await client.request('GET', `/orgs/${org}/scenarios/${enc(scenarioId)}/revisions?ref=${enc(draft ? (branch === 'main' ? 'draft' : `draft:${branch}`) : runId)}`)
+  const sink = exportSink(out)
+  const fileOf = async (path) => {
+    const res = draft ? await fetch(manifest.files_base + path) : await client.fetch(`/orgs/${org}/runs/${runId}/files/${path.split('/').map(enc).join('/')}`)
+    if (!res.ok) throw new UserError(`${path}: HTTP ${res.status}`)
+    return Buffer.from(await res.arrayBuffer())
+  }
+  // the live files keep the design folder layout: links between steps work from disk exactly as in the folder
+  const paths = new Map(), clashes = []
+  const pages = {}
+  for (const s of revs.steps.filter((x) => x.state === 'default')) {
+    ;(pages[s.node] ||= {})[s.locale] = s.entry
+    for (const [p, hash] of Object.entries(s.files)) {
+      if (paths.has(p)) { if (paths.get(p).hash !== hash) clashes.push(p); continue }
+      paths.set(p, { hash, revision: s.revision })
+    }
+  }
+  for (const [p, { revision }] of paths) {
+    const res = await client.fetch(`/orgs/${org}/revisions/${revision}/files/${p.split('/').map(enc).join('/')}`)
+    let buf = Buffer.from(await res.arrayBuffer())
+    if (res.headers.get('X-QAwalk-Encoding') === 'gzip') buf = gunzipSync(buf)
+    await sink.put(p, buf)
+  }
+  const steps = []
+  let shots = 0
+  for (const n of flowOrder(manifest.nodes)) {
+    const screenshots = []
+    for (const [locale, vps] of Object.entries(n.captures || {})) for (const [viewport, c] of Object.entries(vps || {})) {
+      const src = c?.image || c?.png
+      if (!src) continue
+      const file = `screenshots/${n.id}/${locale}/${viewport}.${src.split('.').pop()}`
+      await sink.put(file, await fileOf(src))
+      screenshots.push({ locale, viewport, file, size: c.size || null })
+      shots++
+    }
+    steps.push({ id: n.id, title: n.title, purpose: n.purpose || '', kind: n.kind, pages: pages[n.id] || {}, screenshots })
+  }
+  const index = {
+    schema: DESIGN_EXPORT_SCHEMA, scenario: { id: scenarioId, title: manifest.scenario?.title || scenarioId }, ref, run_id: runId,
+    version: manifest.version ?? null, version_name: manifest.version_name ?? null, branch, exported_at: new Date().toISOString(),
+    locales: manifest.scope.locales, viewports: manifest.scope.viewports, tokens: paths.has(TOKENS_FILE) ? TOKENS_FILE : null,
+    formats: { pages: 'HTML, CSS, JS and assets in the design folder layout (<step>/index.html, <step>/<locale>/index.html, _shared/)', tokens: 'W3C Design Tokens (DTCG) JSON', scenario: 'qawalk.scenario.v1 YAML', screenshots: 'WebP or PNG per step, locale and viewport' },
+    steps
+  }
+  await sink.put('scenario.yml', `# Exported from Kaloko (${ref}); validate with: kaloko validate scenario.yml\n` + yaml.dump(scenarioFromManifest(manifest), { lineWidth: 140, noRefs: true }))
+  await sink.put('kaloko.json', JSON.stringify(index, null, 2) + '\n')
+  await sink.put('index.html', exportIndexHtml({ index }))
+  await sink.close()
+  if (clashes.length) say(`! ${clashes.length} file(s) differ between steps (${clashes.slice(0, 3).join(', ')}); the export keeps the first step's copy.`)
+  say(`Design ${scenarioId} at ${ref}${index.version ? ` (v${index.version})` : ''} → ${relative(process.cwd(), out) || '.'}\n  ${paths.size} live file(s), ${shots} screenshot(s), ${steps.length} step(s); open index.html from disk.`)
+  return index
+}

package/src/lib/design-lint.mjs

@@ -0,0 +1,189 @@
+// Portable interactive HTML (#42): checks a design folder against what works on the live origin
+// (<revision>.<USERCONTENT_HOST>, sandboxed, CSP default-src 'self'), from disk (file://) and from a zip.
+// Errors are things that certainly break there; warnings make prototypes fragile or captures unstable.
+// The rules are explained in skills/kaloko/reference/portable-html.md. lintFiles is pure (tests, other tools).
+import { readFile, readdir, stat } from 'node:fs/promises'
+import { join, relative, sep } from 'node:path'
+import { BUNDLE_LIMITS, SHARED_DIR, TOKENS_FILE, TEXT_TYPES, contentTypeOf, extOf, resolveRef } from './design-core.mjs'
+
+/** Rule id → level and a short reason (the fix is in each finding). */
+export const LINT_RULES = {
+  'external-url': ['error', 'loads a file from another site; the live origin allows only files of the bundle'],
+  'root-relative': ['error', 'a path starting with / points outside the design folder on the live origin and from disk'],
+  'outside-folder': ['error', 'a relative path that climbs out of the design folder'],
+  'missing-file': ['error', 'a referenced file that is not in the folder'],
+  'file-type': ['error', 'a referenced file type the bundle does not allow'],
+  'eval': ['error', "eval and new Function are blocked (no 'unsafe-eval')"],
+  'service-worker': ['error', 'service workers are refused on live steps'],
+  'embedded-frame': ['error', 'iframe, object and embed are blocked (frame-src and object-src none)'],
+  'websocket': ['error', 'network connections are blocked (connect-src self)'],
+  'too-large': ['error', 'over the bundle limits'],
+  'tokens-json': ['error', 'tokens.json is not valid JSON'],
+  'storage': ['warn', 'storage and cookies throw in the sandboxed frame and are not shared between viewers'],
+  'nondeterministic': ['warn', 'random values and the current time change every capture'],
+  'directory-link': ['warn', 'a link to a folder does not open its index.html from disk or a zip'],
+  'broken-link': ['warn', 'a link to a page that is not in the folder'],
+  'new-window': ['warn', 'popups are blocked in the sandbox'],
+  'top-navigation': ['warn', 'the frame may not navigate the canvas'],
+  'modal': ['warn', 'alert, confirm and prompt are blocked in the sandbox'],
+  'form-action': ['warn', 'form submission is blocked (form-action none)'],
+  'doctype': ['warn', 'without <!doctype html> the page renders in quirks mode'],
+  'charset': ['warn', 'without <meta charset> text may decode wrongly from disk'],
+  'viewport-meta': ['warn', 'without the viewport meta, mobile viewports render a zoomed-out desktop page'],
+  'lang': ['warn', '<html lang> tells screen readers and the language checks what language the page is in'],
+  'title': ['warn', 'the page title names the step in tabs, history and screen readers'],
+  'img-alt': ['warn', 'images need an alt text (empty for decoration)'],
+  'reduced-motion': ['warn', 'animations should respect prefers-reduced-motion'],
+  'large-file': ['warn', 'over the size budget'],
+  'tokens-unused': ['warn', 'the token set is there but no CSS custom property uses it'],
+  'missing-step': ['warn', 'a scenario step without a design'],
+  'external-link': ['info', 'a link that leaves the prototype'],
+  'stray-folder': ['info', 'a folder that is not a step of the scenario'],
+  'no-tokens': ['info', 'no token set: the inspector cannot name values']
+}
+export const BUDGET = { file_bytes: 1024 * 1024, step_bytes: 5 * 1024 * 1024 }
+
+const lineAt = (text, i) => { let n = 1; for (let k = 0; k < i && k < text.length; k++) if (text.charCodeAt(k) === 10) n++; return n }
+const SCHEME = /^[a-z][a-z0-9+.-]*:/i
+const stripQ = (u) => u.split('#')[0].split('?')[0]
+const kb = (b) => `${Math.round(b / 1024)} kB`
+
+/**
+ * Lints the files of a design folder. `files`: Map path → { bytes, text? } (text for text types), `steps`: step ids of
+ * the scenario (null = every top-level folder but _shared). Returns findings { rule, level, file, line, message, fix }.
+ */
+export function lintFiles (files, { steps = null } = {}) {
+  const out = []
+  const add = (rule, file, line, message, fix = '') => out.push({ rule, level: LINT_RULES[rule][0], file, line: line || null, message, fix })
+  const has = (p) => files.has(p)
+  const isDir = (p) => [...files.keys()].some((f) => f.startsWith(p.replace(/\/?$/, '/')))
+  let anyMotion = null, reducedMotion = false, usesVars = false
+  const resource = (file, text, i, raw, { script = false, data = false } = {}) => {
+    const u = raw.trim()
+    if (!u || u.startsWith('#') || /^(about:blank|blob:)/i.test(u)) return
+    const line = lineAt(text, i)
+    if (/^data:/i.test(u)) { if (script) add('external-url', file, line, 'a script from a data: URL is blocked (script-src self)', 'Put the script into a .js file of the bundle.'); return }
+    if (/^javascript:/i.test(u)) return
+    if (/^(https?:)?\/\//i.test(u) || SCHEME.test(u)) return add('external-url', file, line, `loads ${u.slice(0, 120)} from another site; it will not load on the live step (CSP default-src 'self')`, data ? 'Live steps have no network: put the data into a JSON fixture of the bundle and fetch(\'./fixtures/….json\').' : 'Download the file into _shared/ (fonts as woff2) and reference it with a relative path.')
+    if (u.startsWith('/')) return add('root-relative', file, line, `${u.slice(0, 120)} starts with /, which is the origin root on the live step and the disk root from file://`, `Use a path relative to ${file} (for example ../${SHARED_DIR}/…).`)
+    const p = resolveRef(file, stripQ(u))
+    if (!p) return add('outside-folder', file, line, `${u.slice(0, 120)} points outside the design folder`, 'Keep every file the page needs inside the design folder.')
+    if (!contentTypeOf(p)) return add('file-type', file, line, `${p}: .${extOf(p) || '?'} files are not part of a bundle`, 'Convert it (fonts to woff2, images to webp/png/svg) or drop it.')
+    if (!has(p)) add('missing-file', file, line, `${u.slice(0, 120)} → ${p} is not in the folder`, 'Add the file or fix the path (paths are case-sensitive on the service).')
+  }
+  const link = (file, text, i, raw, attrs) => {
+    const u = raw.trim(); const line = lineAt(text, i)
+    const tg = attrs.match(/\starget\s*=\s*["']?_(blank|top|parent)/i)
+    if (tg) add('new-window', file, line, `a link with target=_${tg[1]} does nothing in the sandboxed live step`, 'Drop the target attribute; links between steps open in the same frame.')
+    if (!u || u.startsWith('#') || /^(mailto|tel|javascript):/i.test(u)) return
+    if (/^(https?:)?\/\//i.test(u)) return add('external-link', file, line, `${u.slice(0, 120)} leaves the prototype`, '')
+    if (u.startsWith('/')) return add('root-relative', file, line, `link ${u.slice(0, 120)} starts with /: it 404s on the live step and from disk`, 'Link relatively, e.g. ../payment/index.html.')
+    const bare = stripQ(u)
+    if (!bare) return
+    const p = resolveRef(file, bare)
+    if (!p) return add('outside-folder', file, line, `link ${u.slice(0, 120)} points outside the design folder`, '')
+    if (bare.endsWith('/') || (!extOf(p) && isDir(p))) return add('directory-link', file, line, `link ${u.slice(0, 120)} points at a folder; from disk or a zip the browser shows a listing or nothing`, `Link the page itself: ${bare.replace(/\/?$/, '/')}index.html`)
+    if (!has(p)) add('broken-link', file, line, `link ${u.slice(0, 120)} → ${p} is not in the folder`, 'Point it at a step page (../<step>/index.html) or add the page.')
+  }
+  const css = (file, text, base = 0, whole = text) => {
+    for (const m of text.matchAll(/url\(\s*(['"]?)([^'")]+)\1\s*\)/gi)) resource(file, whole, base + m.index, m[2])
+    for (const m of text.matchAll(/@import\s+(['"])([^'"]+)\1/gi)) resource(file, whole, base + m.index, m[2])
+    if (/var\(--/.test(text)) usesVars = true
+    if (/prefers-reduced-motion/.test(text)) reducedMotion = true
+    if (!anyMotion) { const m = text.match(/(?:^|[;{\s])(animation(?:-name)?|transition)\s*:\s*(?!none\b)[^;}]*[1-9]/m); if (m) anyMotion = { file, line: lineAt(whole, base + m.index) } }
+  }
+  const js = (file, text, base = 0, whole = text) => {
+    const at = (re, fn) => { for (const m of text.matchAll(re)) fn(m, lineAt(whole, base + m.index)) }
+    at(/(?:^|[^.\w$])(?:import|export)\s[^'"]*?from\s*(['"])([^'"]+)\1|import\s*\(\s*(['"])([^'"]+)\3\s*\)/g, (m) => { const u = m[2] || m[4]; if (/^(\.|\/|https?:|\/\/)/.test(u)) resource(file, whole, base + m.index, u, { script: true }) })
+    at(/\bfetch\(\s*(['"`])([^'"`$]+)\1/g, (m) => resource(file, whole, base + m.index, m[2], { data: true }))
+    at(/\bnew\s+(?:XMLHttpRequest|EventSource|WebSocket)\b/g, (m, l) => add('websocket', file, l, `${m[0].replace(/^new\s+/, '')} needs a network the live step does not have (connect-src self)`, 'Read fixtures from JSON files in the bundle with fetch(\'./fixtures/…json\').'))
+    at(/(?:^|[^.\w$])(?:eval\s*\(|new\s+Function\s*\(|set(?:Timeout|Interval)\s*\(\s*['"`])/g, (m, l) => add('eval', file, l, 'code from a string is blocked on the live step (no \'unsafe-eval\')', 'Pass a function instead of a string; do not use eval or new Function.'))
+    at(/navigator\.serviceWorker/g, (m, l) => add('service-worker', file, l, 'service workers are refused on live steps and outlive the page', 'Remove the registration; prototypes need no offline cache.'))
+    at(/\b(localStorage|sessionStorage|indexedDB|document\.cookie)\b/g, (m, l) => add('storage', file, l, `${m[1]} throws in the sandboxed live step (opaque origin) and is empty for every other viewer`, 'Keep prototype state in the URL (location.hash or ?query) or in memory; wrap any storage access in try/catch.'))
+    at(/\b(Date\.now\(\)|new Date\(\s*\)|Math\.random\(\)|crypto\.(?:randomUUID|getRandomValues)\()/g, (m, l) => add('nondeterministic', file, l, `${m[1].replace(/\($/, '()')} makes every capture different, so unchanged steps look changed`, 'Use fixed dates (new Date(\'2026-01-15T10:00\')) and a seeded generator for fake data.'))
+    at(/(?:^|[^.\w$]|window\.)(alert|confirm|prompt)\s*\(/g, (m, l) => add('modal', file, l, `${m[1]}() is blocked in the sandbox (no allow-modals)`, 'Show an in-page <dialog> instead.'))
+    at(/(?:^|[^.\w$])window\.open\s*\(/g, (m, l) => add('new-window', file, l, 'window.open is blocked in the sandbox (no allow-popups)', 'Navigate in the same frame (location.href = \'../next/index.html\').'))
+    at(/\b(?:top|parent)\.location\b/g, (m, l) => add('top-navigation', file, l, `${m[0]} tries to navigate the canvas`, 'Navigate the frame itself, or use data-kaloko-go="<step>".'))
+  }
+  for (const [file, f] of files) {
+    if (f.bytes > BUNDLE_LIMITS.max_file_bytes) add('too-large', file, null, `${kb(f.bytes)}: over the ${Math.round(BUNDLE_LIMITS.max_file_bytes / 1048576)} MB limit of one file`, 'Compress it or split it.')
+    else if (f.bytes > BUDGET.file_bytes) add('large-file', file, null, `${kb(f.bytes)}: over the ${kb(BUDGET.file_bytes)} budget of one file`, /\.(png|jpe?g|gif)$/i.test(file) ? 'Use webp or avif at the size it is shown.' : /\.(woff2?)$/i.test(file) ? 'Subset the font to the characters you use.' : 'Keep prototypes light: every viewer loads it.')
+    if (f.text == null) continue
+    const t = f.text, ext = extOf(file)
+    if (ext === 'css') css(file, t)
+    else if (ext === 'js' || ext === 'mjs') js(file, t)
+    else if (ext === 'html' || ext === 'svg') {
+      for (const m of t.matchAll(/\s(src|poster|data-src)\s*=\s*(['"])([^'"]*)\2/gi)) resource(file, t, m.index, m[3], { script: /<script\b[^>]*$/i.test(t.slice(Math.max(0, m.index - 200), m.index)) })
+      for (const m of t.matchAll(/<link\b([^>]*)>/gi)) { const h = m[1].match(/\shref\s*=\s*(['"])([^'"]*)\1/i); const rel = (m[1].match(/\srel\s*=\s*(['"]?)([^'"\s>]+)\1/i)?.[2] || '').toLowerCase(); if (h && !/^(canonical|alternate|author|help|license|next|prev|search|dns-prefetch|preconnect)$/.test(rel)) resource(file, t, m.index, h[2]) }
+      for (const m of t.matchAll(/<(?:use|image|feImage)\b[^>]*\s(?:xlink:)?href\s*=\s*(['"])([^'"]*)\1/gi)) resource(file, t, m.index, m[2])
+      for (const m of t.matchAll(/\ssrcset\s*=\s*(['"])([^'"]*)\1/gi)) for (const part of m[2].split(',')) resource(file, t, m.index, part.trim().split(/\s+/)[0])
+      for (const m of t.matchAll(/<style[^>]*>([\s\S]*?)<\/style>/gi)) css(file, m[1], m.index + m[0].indexOf(m[1]), t)
+      for (const m of t.matchAll(/\sstyle\s*=\s*(?:"([^"]*)"|'([^']*)')/gi)) css(file, m[1] ?? m[2], m.index, t)
+      for (const m of t.matchAll(/<script\b([^>]*)>([\s\S]*?)<\/script>/gi)) if (!/\ssrc\s*=/.test(m[1]) && !/type\s*=\s*["']?(application\/(ld\+)?json|importmap|text\/template)/i.test(m[1])) js(file, m[2], m.index + m[0].indexOf(m[2]), t)
+      if (ext === 'svg') continue
+      for (const m of t.matchAll(/<(a|area)\b([^>]*)>/gi)) { const h = m[2].match(/\shref\s*=\s*(['"])([^'"]*)\1/i); if (h) link(file, t, m.index, h[2], m[2]) }
+      for (const m of t.matchAll(/<(iframe|object|embed|frame)\b/gi)) add('embedded-frame', file, lineAt(t, m.index), `<${m[1].toLowerCase()}> is blocked on the live step`, 'Draw the embedded content into the page (an image or markup of it).')
+      for (const m of t.matchAll(/<form\b[^>]*\saction\s*=\s*(['"])([^'"]*)\1/gi)) if (m[2] && m[2] !== '#') add('form-action', file, lineAt(t, m.index), `submitting to ${m[2].slice(0, 80)} is blocked on the live step`, 'Handle submit in a script (event.preventDefault()) and move on with a link or data-kaloko-go.')
+      for (const m of t.matchAll(/<img\b([^>]*)>/gi)) if (!/\salt\s*=/i.test(m[1])) add('img-alt', file, lineAt(t, m.index), 'an <img> without alt', 'Add alt="…" (alt="" for decoration).')
+      if (!/^\s*(<!--[\s\S]*?-->\s*)*<!doctype html/i.test(t)) add('doctype', file, 1, 'no <!doctype html>', 'Start the page with <!doctype html>.')
+      if (!/<meta\s+charset\s*=/i.test(t) && !/<meta[^>]+content\s*=\s*["'][^"']*charset=/i.test(t)) add('charset', file, null, 'no <meta charset>', 'Add <meta charset="utf-8"> first in <head>.')
+      if (!/<meta[^>]+name\s*=\s*["']?viewport/i.test(t)) add('viewport-meta', file, null, 'no viewport meta', 'Add <meta name="viewport" content="width=device-width, initial-scale=1">.')
+      if (!/<html\b[^>]*\slang\s*=\s*["']?[a-z]/i.test(t)) add('lang', file, null, '<html> has no lang', 'Add <html lang="en"> (the locale of the page).')
+      if (!/<title>\s*[^<\s]/i.test(t)) add('title', file, null, 'no <title>', 'Name the step in <title>.')
+    }
+  }
+  if (anyMotion && !reducedMotion) add('reduced-motion', anyMotion.file, anyMotion.line, 'animations or transitions without a prefers-reduced-motion rule anywhere in the folder', 'Add @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important } } to the shared CSS.')
+  if (files.has(TOKENS_FILE)) {
+    try { JSON.parse(files.get(TOKENS_FILE).text) } catch (e) { add('tokens-json', TOKENS_FILE, null, e.message, 'Fix the JSON (kaloko tokens validate).') }
+    if (!usesVars) add('tokens-unused', TOKENS_FILE, null, 'no var(--…) in any stylesheet', 'Write token values as CSS custom properties (--color-accent) and use var(--color-accent), so the inspector and kaloko tokens check see them.')
+  } else add('no-tokens', '.', null, 'no tokens.json in the folder', 'Add a W3C DTCG token set (kaloko tokens pull, or write tokens.json).')
+  // per step: everything under its folder plus the shared files (an upper bound of what a revision carries)
+  const tops = [...new Set([...files.keys()].filter((p) => p.includes('/')).map((p) => p.split('/')[0]))].filter((d) => d !== SHARED_DIR)
+  const shared = [...files].filter(([p]) => p.startsWith(`${SHARED_DIR}/`)).reduce((s, [, f]) => s + f.bytes, 0)
+  for (const d of tops) {
+    const own = [...files].filter(([p]) => p.startsWith(`${d}/`)).reduce((s, [, f]) => s + f.bytes, 0)
+    if (own + shared > BUNDLE_LIMITS.max_revision_bytes) add('too-large', `${d}/`, null, `${kb(own + shared)} with the shared files: over the ${Math.round(BUNDLE_LIMITS.max_revision_bytes / 1048576)} MB limit of a step`, 'Move big media out or compress it.')
+    else if (own + shared > BUDGET.step_bytes) add('large-file', `${d}/`, null, `${kb(own + shared)} with the shared files: over the ${kb(BUDGET.step_bytes)} budget of a step`, 'Compress images and fonts; drop unused files from _shared/.')
+    if (steps && !steps.includes(d)) add('stray-folder', `${d}/`, null, `${d}/ is not a step of the scenario`, 'Rename it to a step id, or move shared files into _shared/.')
+  }
+  if (steps) for (const s of steps) if (!has(`${s}/index.html`) && ![...files.keys()].some((p) => p.startsWith(`${s}/`) && p.endsWith('/index.html'))) add('missing-step', `${s}/`, null, `step ${s} has no ${s}/index.html`, `Add ${s}/index.html.`)
+  const order = { error: 0, warn: 1, info: 2 }
+  return out.sort((a, b) => order[a.level] - order[b.level] || a.file.localeCompare(b.file) || (a.line || 0) - (b.line || 0))
+}
+
+/** Reads a design folder (hidden files and .qawalk/ left out) into the shape lintFiles takes. */
+export async function readDesignFolder (dir) {
+  const files = new Map()
+  const walk = async (d) => {
+    let entries = []
+    try { entries = await readdir(d, { withFileTypes: true }) } catch { return }
+    for (const e of entries) {
+      if (e.name.startsWith('.') || e.name === 'node_modules') continue
+      const full = join(d, e.name)
+      if (e.isDirectory()) { await walk(full); continue }
+      const path = relative(dir, full).split(sep).join('/')
+      const bytes = (await stat(full)).size
+      files.set(path, { bytes, ...(TEXT_TYPES.has(extOf(path)) && bytes <= BUNDLE_LIMITS.max_file_bytes ? { text: await readFile(full, 'utf8') } : {}) })
+    }
+  }
+  await walk(dir)
+  return files
+}
+
+/** Lints a design folder; `scenario` (optional) names the steps. */
+export async function lintDesign ({ dir, scenario = null }) {
+  const files = await readDesignFolder(dir)
+  const steps = scenario ? scenario.nodes.filter((n) => n.kind !== 'decision' && n.kind !== 'external').map((n) => n.id) : null
+  const findings = lintFiles(files, { steps })
+  return { dir, files: files.size, findings, errors: findings.filter((f) => f.level === 'error').length, warnings: findings.filter((f) => f.level === 'warn').length }
+}
+
+/** Human report: errors and warnings (info with `all`), grouped like a compiler, at most `max` lines. */
+export function formatLint (report, { all = false, max = 40, cwd = process.cwd() } = {}) {
+  const shown = report.findings.filter((f) => all || f.level !== 'info')
+  const where = relative(cwd, report.dir) || '.'
+  if (!shown.length) return `✓ ${where}: ${report.files} file(s) follow the portable HTML rules.`
+  const mark = { error: '✕', warn: '!', info: '·' }
+  const lines = shown.slice(0, max).map((f) => `  ${mark[f.level]} ${f.file}${f.line ? `:${f.line}` : ''}  ${f.message} [${f.rule}]${f.fix ? `\n      fix: ${f.fix}` : ''}`)
+  return `${where}: ${report.errors} error(s), ${report.warnings} warning(s)\n${lines.join('\n')}${shown.length > max ? `\n  … ${shown.length - max} more (kaloko design lint --json lists them all)` : ''}`
+}

package/src/lib/design.mjs

@@ -115,6 +115,13 @@ export async function copyLive (runDir, dir, rev) {
     await mkdir(dirname(to), { recursive: true })
     await copyFile(join(dir, path), to)
   }
+  // and one merged tree of the run (live/site/<path>, the design folder layout): plain links between steps work from
+  // disk there, so the local preview and an offline export present the prototype like the live origin does
+  for (const path of Object.keys(rev.files)) {
+    const to = join(runDir, 'live', 'site', path)
+    await mkdir(dirname(to), { recursive: true })
+    await copyFile(join(dir, path), to)
+  }
 }
 
 // ---- render cache: a capture is reused when the same revision was rendered in the same viewport ----

package/src/lib/zip.mjs

@@ -0,0 +1,58 @@
+// Streaming ZIP writer (method "store", data descriptors) for run and design exports, shared by the service and the CLI.
+// Files are appended as they are read from R2; nothing is buffered beyond one chunk.
+
+const CRC_TABLE = (() => { const t = new Uint32Array(256); for (let n = 0; n < 256; n++) { let c = n; for (let k = 0; k < 8; k++) c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1; t[n] = c >>> 0 } return t })()
+export function crc32 (crc, bytes) { crc = ~crc; for (let i = 0; i < bytes.length; i++) crc = CRC_TABLE[(crc ^ bytes[i]) & 0xff] ^ (crc >>> 8); return ~crc >>> 0 }
+
+const enc = new TextEncoder()
+const u16 = (v, out, o) => { out[o] = v & 0xff; out[o + 1] = (v >>> 8) & 0xff }
+const u32 = (v, out, o) => { out[o] = v & 0xff; out[o + 1] = (v >>> 8) & 0xff; out[o + 2] = (v >>> 16) & 0xff; out[o + 3] = (v >>> 24) & 0xff }
+const dosTime = (d) => ({ time: (d.getUTCHours() << 11) | (d.getUTCMinutes() << 5) | (d.getUTCSeconds() >> 1), date: ((d.getUTCFullYear() - 1980) << 9) | ((d.getUTCMonth() + 1) << 5) | d.getUTCDate() })
+
+/**
+ * @param {Array<{ name: string, body: ReadableStream|Uint8Array|string, modified?: Date }>} entries lazily opened: `body` may be a function returning a promise of the stream
+ * @returns {ReadableStream<Uint8Array>}
+ */
+export function zipStream (entries) {
+  const central = []
+  let offset = 0
+  let i = 0
+  const now = new Date()
+  return new ReadableStream({
+    async pull (controller) {
+      const push = (bytes) => { controller.enqueue(bytes); offset += bytes.length }
+      if (i < entries.length) {
+        const e = entries[i++]
+        const name = enc.encode(e.name)
+        const { time, date } = dosTime(e.modified || now)
+        const local = new Uint8Array(30 + name.length)
+        u32(0x04034b50, local, 0); u16(20, local, 4); u16(0x0808, local, 6) /* bit 3: sizes in the descriptor, bit 11: UTF-8 */; u16(0, local, 8); u16(time, local, 10); u16(date, local, 12)
+        u32(0, local, 14); u32(0, local, 18); u32(0, local, 22); u16(name.length, local, 26); u16(0, local, 28); local.set(name, 30)
+        const start = offset
+        push(local)
+        let body = typeof e.body === 'function' ? await e.body() : e.body
+        let crc = 0, size = 0
+        if (typeof body === 'string') body = enc.encode(body)
+        if (body instanceof Uint8Array) { crc = crc32(crc, body); size = body.length; push(body) } else if (body) {
+          const reader = body.getReader()
+          for (;;) { const { done, value } = await reader.read(); if (done) break; crc = crc32(crc, value); size += value.length; push(value) }
+        }
+        const desc = new Uint8Array(16); u32(0x08074b50, desc, 0); u32(crc, desc, 4); u32(size, desc, 8); u32(size, desc, 12); push(desc)
+        central.push({ name, crc, size, time, date, start })
+        return
+      }
+      // central directory
+      const cdStart = offset
+      for (const c of central) {
+        const h = new Uint8Array(46 + c.name.length)
+        u32(0x02014b50, h, 0); u16(20, h, 4); u16(20, h, 6); u16(0x0808, h, 8); u16(0, h, 10); u16(c.time, h, 12); u16(c.date, h, 14)
+        u32(c.crc, h, 16); u32(c.size, h, 20); u32(c.size, h, 24); u16(c.name.length, h, 28); u16(0, h, 30); u16(0, h, 32); u16(0, h, 34); u16(0, h, 36); u32(0, h, 38); u32(c.start, h, 42); h.set(c.name, 46)
+        push(h)
+      }
+      const end = new Uint8Array(22)
+      u32(0x06054b50, end, 0); u16(0, end, 4); u16(0, end, 6); u16(central.length, end, 8); u16(central.length, end, 10); u32(offset - cdStart, end, 12); u32(cdStart, end, 16); u16(0, end, 20)
+      push(end)
+      controller.close()
+    }
+  })
+}

package/viewer/index.html

@@ -77,7 +77,7 @@ svg.i{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stro
 
 @media (min-width:821px){.bar{flex-wrap:nowrap}.picker{flex:0 1 auto;min-width:0}.task{min-width:0}.task b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar > *{flex-shrink:0}.bar > .picker{flex:0 1 auto;min-width:0;max-width:clamp(200px,30vw,640px);overflow:hidden}.bar > .spacer{flex:0 0 0}.task span{display:block;overflow:hidden;text-overflow:ellipsis}}
 @media (max-width:1680px){.bar .ctl .seg-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.bar{gap:8px 12px}.picker kbd{display:none}}
-@media (max-width:1400px) and (min-width:1101px){.bar{gap:6px 8px}#viewBtn span[data-t]{display:none}#viewBtn{padding:5px 8px}.bar > .picker{max-width:clamp(140px,18vw,400px)}#rpBtn span{display:none}#rpBtn{padding:5px 8px}#cmpSel{max-width:130px}.appnav a{padding:4px 6px}.brand small{display:none}.seg button{padding:3px 8px}.bar .btn,.seg button,.appnav{font-size:12px}}
+@media (max-width:1400px) and (min-width:1101px){.bar{gap:6px 8px}#viewBtn span[data-t]{display:none}#viewBtn{padding:5px 8px}.bar > .picker{max-width:clamp(140px,18vw,400px)}#rpBtn span,#ptBtn span{display:none}#rpBtn,#ptBtn{padding:5px 8px}#cmpSel{max-width:130px}.appnav a{padding:4px 6px}.brand small{display:none}.seg button{padding:3px 8px}.bar .btn,.seg button,.appnav{font-size:12px}}
 .appnav{display:flex;align-items:center;gap:4px;font-size:13px}
 .appnav a{padding:4px 9px;border-radius:6px;text-decoration:none;color:var(--muted)}
 .appnav a:hover{background:var(--panel-2);color:var(--ink)}
@@ -236,9 +236,9 @@ table.runs{border-collapse:collapse;width:100%;font-size:12.5px}
 @media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
 body.embed .helpwrap{display:none}
 .bar-break{display:none}
-@media (max-width:820px){.bar{flex-wrap:wrap;gap:6px 8px;padding:8px 10px}.bar > *{order:1}.bar-break{display:block;order:2;flex-basis:100%;height:0}.bar > .picker,#rpBtn,#modeSeg,#locSeg,#dbar{order:3}.bar > .picker{flex:1 1 0;min-width:0;max-width:none}.task b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.task span{display:none!important}.bar .spacer{flex:1 1 auto;order:1}.picker .kchip{display:none}}
+@media (max-width:820px){.bar{flex-wrap:wrap;gap:6px 8px;padding:8px 10px}.bar > *{order:1}.bar-break{display:block;order:2;flex-basis:100%;height:0}.bar > .picker,#rpBtn,#ptBtn,#modeSeg,#locSeg,#dbar{order:3}.bar > .picker{flex:1 1 0;min-width:0;max-width:none}.task b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.task span{display:none!important}.bar .spacer{flex:1 1 auto;order:1}.picker .kchip{display:none}}
 .legend-in{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}.legend-in span{display:inline-flex;gap:5px;align-items:center}
-@media (max-width:1100px){.bar .ctl .seg-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}#viewBtn span[data-t],#rpBtn span{display:none}.picker kbd{display:none}.bar > .picker{max-width:clamp(140px,40vw,420px)}}
+@media (max-width:1100px){.bar .ctl .seg-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}#viewBtn span[data-t],#rpBtn span,#ptBtn span{display:none}.picker kbd{display:none}.bar > .picker{max-width:clamp(140px,40vw,420px)}}
 /* canvas */
 .viewport{position:relative;overflow:hidden;cursor:grab;touch-action:none;
   background-color:var(--ground);background-image:radial-gradient(var(--dots) 1px,transparent 1.2px);background-size:22px 22px}
@@ -534,6 +534,26 @@ details summary{cursor:pointer;font-size:12.5px;font-weight:500}
 .lb__stage{min-width:0}.lb__live{margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.08)}
 .lb__live iframe{display:block;border:0;background:#fff}
 .lb__cmp .lb__live{margin:0}
+/* prototype presentation: full screen, one step at a time, click-through in the live page */
+.pt{position:fixed;inset:0;z-index:30;display:grid;grid-template-rows:auto 1fr auto;color-scheme:dark;--panel:#1f1f1d;--panel-2:#262624;--ink:#f0f0ec;--muted:#9d9d96;--line:#35352f;background:#111110;color:var(--ink)}
+.pt__bar{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;padding:8px 14px;background:#161615;border-bottom:1px solid var(--line)}
+.pt__bar--foot{border-bottom:0;border-top:1px solid var(--line);justify-content:center}
+.pt__bar .spacer{flex:1}.pt__title{font-weight:600;font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:40vw}
+.pt__stage{position:relative;overflow:hidden;display:grid;place-items:center;min-height:0;padding:16px}
+.pt__fit{position:relative}
+.pt__dev{position:absolute;left:0;top:0;transform-origin:0 0;background:#000;box-shadow:0 20px 60px rgba(0,0,0,.5)}
+.pt__dev--phone{border-radius:44px;padding:14px;border:1px solid #3a3a36}
+.pt__dev--phone .pt__screen{border-radius:32px}
+.pt__dev--desk{border-radius:10px;padding:30px 0 0;border:1px solid #3a3a36}
+.pt__dev--desk::before{content:"";position:absolute;left:14px;top:11px;width:44px;height:8px;background:radial-gradient(circle at 4px 4px,#e4572e 3.5px,transparent 4px),radial-gradient(circle at 22px 4px,#f0a83c 3.5px,transparent 4px),radial-gradient(circle at 40px 4px,#52c784 3.5px,transparent 4px)}
+.pt__dev--bare{padding:0;border-radius:0;border:0}.pt__dev--bare::before{display:none}.pt__dev--bare .pt__screen{border-radius:0}
+.pt__screen{overflow:auto;background:#fff}
+.pt__screen iframe{display:block;border:0;background:#fff}
+.pt__screen img{display:block;width:100%;height:auto}
+.pt__empty{color:var(--muted);text-align:center;padding:40px}
+.pt__bar .note{color:var(--muted)}
+@media (max-width:700px){.pt__title{max-width:60vw}.pt__bar{padding:6px 10px}.pt__stage{padding:6px}}
+@media (prefers-reduced-motion:no-preference){.pt__dev{transition:transform .15s ease-out}}
 .insp{font:12px/1.4 var(--mono)}
 .insp table{width:100%;border-collapse:collapse}.insp td{padding:3px 4px;border-bottom:1px solid var(--line);vertical-align:top}
 .insp td:first-child{color:var(--muted);white-space:nowrap}
@@ -571,6 +591,7 @@ details summary{cursor:pointer;font-size:12.5px;font-weight:500}
       <kbd>K</kbd>
     </button>
     <button class="btn" id="rpBtn" title="R"><svg class="i" viewBox="0 0 24 24"><path d="M7 5v14l11-7z"/></svg><span data-t="replay"></span></button>
+    <button class="btn" id="ptBtn" title="P" hidden><svg class="i" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="13" rx="1.5"/><path d="M8 21h8M12 17v4"/></svg><span data-t="prototype"></span></button>
     <div class="dbar" id="dbar" hidden></div>
     <div class="spacer"></div>
     <div class="seg" id="modeSeg" aria-label="Layout"></div>
@@ -637,6 +658,7 @@ details summary{cursor:pointer;font-size:12.5px;font-weight:500}
   </div>
 </div>
 <div class="rp" id="rp" hidden role="dialog" aria-modal="true" aria-label="Replay"></div>
+<div class="pt" id="pt" hidden role="dialog" aria-modal="true" aria-label="Prototype"></div>
 <div class="toast" id="toast" hidden></div>
 <script>
 /* Kaloko viewer. Data source:
@@ -646,7 +668,7 @@ details summary{cursor:pointer;font-size:12.5px;font-weight:500}
 const EMBEDDED = /*__QAWALK_RUN__*/null;
 if (!window.QAWALK_APP) { const el = document.getElementById('qawalk-app'); if (el) { try { window.QAWALK_APP = JSON.parse(el.textContent); } catch {} } }
 const I18N = {
-  cs: { makePublicVersion:'Zveřejnit verzi', draft:'Koncept', liveShared:'živě, sdíleno', publishHint:'Publikovat verzi uloží celé flow jako %V; nezměněné kroky se znovu použijí.', htmlView:'HTML pohled', htmlViewNote:'Statická kopie stránky: bez skriptů zákazníka, s přenesenými styly a obrázky, bez tajných údajů.', editTitle:'Upravit v plátně', editText:'Text', editKeep:'ponechat', editSave:'Uložit úpravu', editSaved:'Úprava uložena jako nová revize', editRebased:'Krok se mezitím změnil; úprava je na nejnovější revizi', editUnapplied:'Neuplatněno (prvek už neexistuje)', staleCapture:'Snímek je z předchozí revize; Živě ukazuje poslední úpravu.', branches:'Větve', mergeBranch:'Sloučit do main', mergeConflict:'Krok se změnil v obou větvích:', mergeTakeBranch:'Vzít z větve? (Zrušit = ponechat main)', branchMerged:'Sloučeno', acceptVersion:'Přijmout verzi', returnVersion:'Vrátit verzi', versionVerdict:'Verdikt verze', draftInfo:'Tento koncept je živý a sdílený: všichni, kdo ho mají otevřený, vidí změny hned, i změny agentů. Kroky ukládá kaloko sync nebo úprava v plátně; tlačítko Publikovat verzi uloží celé flow jako novou verzi.', changedSince:'Změněno od', noChangeSince:'Beze změny od', designEnv:'design', version:'Verze', versions:'Verze flow', publish:'Publikovat verzi', publishName:'Název verze (nepovinný)', published:'Publikováno', designRef:'reference designu', setDesignRef:'Nastavit jako referenci designu', unsetDesignRef:'Zrušit referenci designu', designRefHint:'Implementace se kontroluje proti referenci designu (pack design).', openDraft:'Otevřít koncept', liveMode:'Živě', shotMode:'Snímek', inspect:'Inspektor', pinComment:'Komentář k prvku', pickHint:'Klikněte na prvek v náhledu.', pinnedOn:'K prvku', unchangedSince:'beze změny od', unchangedSteps:'kroků beze změny', changedOnly:'Jen změněné', stepStatus:'Stav kroku', st_in_progress:'rozpracováno', st_ready_for_review:'k revizi', st_ready_for_dev:'připraveno pro vývoj', present:'Prezentovat', presenting:'Prezentujete', stopPresent:'Ukončit prezentaci', updatedSteps:'upravil', viaAgent:'přes', here:'tady', copyCss:'Kopírovat CSS', cssCopied:'CSS zkopírováno', noToken:'mimo sadu tokenů', tokenSet:'token', revisionBy:'revize', noLiveOrigin:'Živé kroky nejsou na této instanci zapnuté.', draftEmpty:'Koncept zatím nemá žádné kroky; spusťte kaloko sync.', prototypeTo:'Prototyp: přechod na', outdated:'zastaralé',     hint:'Táhněte pro posun · Ctrl + kolečko zoom · <span class="kbd">F</span> režim soustředění · <span class="kbd">K</span> scénáře a běhy · <span class="kbd">R</span> projít · <span class="kbd">I</span> mapa / index · <span class="kbd">←</span><span class="kbd">→</span> předchozí / další krok (v detailu) · <span class="kbd">Esc</span> zavřít', locale:'Testovaný jazyk', view:'Náhled', both:'Oba', shownRun:'Zobrazený běh', allRuns:'Všechny běhy', steps:'Kroky flow', fit:'Celé flow', stepsWord:'kroků', passedWord:'prošlo', fitLane:'Zobrazit celou sekci', following:'Sledujete', followEsc:'Esc ukončí', followHint:'Sledovat, co dělá', visOn:'Vidí mě ostatní', visOff:'Jsem skrytý',
+  cs: { makePublicVersion:'Zveřejnit verzi', draft:'Koncept', liveShared:'živě, sdíleno', publishHint:'Publikovat verzi uloží celé flow jako %V; nezměněné kroky se znovu použijí.', htmlView:'HTML pohled', htmlViewNote:'Statická kopie stránky: bez skriptů zákazníka, s přenesenými styly a obrázky, bez tajných údajů.', editTitle:'Upravit v plátně', editText:'Text', editKeep:'ponechat', editSave:'Uložit úpravu', editSaved:'Úprava uložena jako nová revize', editRebased:'Krok se mezitím změnil; úprava je na nejnovější revizi', editUnapplied:'Neuplatněno (prvek už neexistuje)', staleCapture:'Snímek je z předchozí revize; Živě ukazuje poslední úpravu.', branches:'Větve', mergeBranch:'Sloučit do main', mergeConflict:'Krok se změnil v obou větvích:', mergeTakeBranch:'Vzít z větve? (Zrušit = ponechat main)', branchMerged:'Sloučeno', acceptVersion:'Přijmout verzi', returnVersion:'Vrátit verzi', versionVerdict:'Verdikt verze', draftInfo:'Tento koncept je živý a sdílený: všichni, kdo ho mají otevřený, vidí změny hned, i změny agentů. Kroky ukládá kaloko sync nebo úprava v plátně; tlačítko Publikovat verzi uloží celé flow jako novou verzi.', changedSince:'Změněno od', noChangeSince:'Beze změny od', designEnv:'design', version:'Verze', versions:'Verze flow', publish:'Publikovat verzi', publishName:'Název verze (nepovinný)', published:'Publikováno', designRef:'reference designu', setDesignRef:'Nastavit jako referenci designu', unsetDesignRef:'Zrušit referenci designu', designRefHint:'Implementace se kontroluje proti referenci designu (pack design).', openDraft:'Otevřít koncept', liveMode:'Živě', shotMode:'Snímek', inspect:'Inspektor', pinComment:'Komentář k prvku', pickHint:'Klikněte na prvek v náhledu.', pinnedOn:'K prvku', unchangedSince:'beze změny od', unchangedSteps:'kroků beze změny', changedOnly:'Jen změněné', stepStatus:'Stav kroku', st_in_progress:'rozpracováno', st_ready_for_review:'k revizi', st_ready_for_dev:'připraveno pro vývoj', present:'Prezentovat', presenting:'Prezentujete', stopPresent:'Ukončit prezentaci', updatedSteps:'upravil', viaAgent:'přes', here:'tady', copyCss:'Kopírovat CSS', cssCopied:'CSS zkopírováno', noToken:'mimo sadu tokenů', tokenSet:'token', revisionBy:'revize', noLiveOrigin:'Živé kroky nejsou na této instanci zapnuté.', draftEmpty:'Koncept zatím nemá žádné kroky; spusťte kaloko sync.', prototypeTo:'Prototyp: přechod na', outdated:'zastaralé', prototype:'Prototyp', protoTitle:'Prezentovat prototyp', protoHint:'Klikejte v prototypu; ← → předchozí / další krok, Esc konec.', protoShot:'Jen snímky: živé kroky tu nejsou k dispozici. ← → procházejí flow.', protoLocal:'Odkazy otevírají stránky z disku; ← → procházejí flow.', protoDevice:'Rámeček zařízení', protoFull:'Celá obrazovka', protoExit:'Ukončit prototyp', protoNoStep:'Odkaz nevede na žádný krok flow',     hint:'Táhněte pro posun · Ctrl + kolečko zoom · <span class="kbd">F</span> režim soustředění · <span class="kbd">K</span> scénáře a běhy · <span class="kbd">R</span> projít · <span class="kbd">P</span> prototyp · <span class="kbd">I</span> mapa / index · <span class="kbd">←</span><span class="kbd">→</span> předchozí / další krok (v detailu) · <span class="kbd">Esc</span> zavřít', locale:'Testovaný jazyk', view:'Náhled', both:'Oba', shownRun:'Zobrazený běh', allRuns:'Všechny běhy', steps:'Kroky flow', fit:'Celé flow', stepsWord:'kroků', passedWord:'prošlo', fitLane:'Zobrazit celou sekci', following:'Sledujete', followEsc:'Esc ukončí', followHint:'Sledovat, co dělá', visOn:'Vidí mě ostatní', visOff:'Jsem skrytý',
     pass:'Splněno', partial:'Částečně', fail:'Nesplněno', skip:'Neprověřeno', crop:'výřez', html:'HTML snapshot', email:'e-mail', external:'třetí strana',
     branch:'Větev', commit:'Commit', author:'Autor', pr:'PR', issue:'Issue', env:'Prostředí', duration:'Délka', noPr:'bez PR', open:'otevřený', merged:'sloučený', closed:'zavřený',
     older:'Starší běh', newer:'Novější běh', purpose:'Účel obrazovky ze scénáře', criteria:'Akceptační kritéria', jevTitle:'Sémantické hodnocení',
@@ -667,10 +689,10 @@ const I18N = {
     onlyLocal:'Tento běh je jen lokálně; otevřete jeho složku.', linksExpired:'Odkazy na snímky vypršely. Obnovte stránku.', captured:'Zachyceno', console:'Konzole', errors:'chyb', blocked:'blokovaných požadavků', files:'Soubory',
     pagesWord:'stránek', firstScreen:'první obrazovka', layout:'Rozložení', uploadedBy:'Nahrál', addNote:'Přidat poznámku', viewOptions:'Zobrazení', keyComment:'komentář ke kroku (v detailu)', keyHelp:'tato nápověda', helpTitle:'Zkratky a nápověda', flowComments:'Komentáře k flow', runComments:'Komentáře k běhu', commentsTitle:'Komentáře', allOpen:'Otevřené', openWord:'otevřených', flowCommentsLead:'Platí pro celé flow napříč běhy: chybějící krok, obecná připomínka, nápad.', noStepComments:'Ke kroku zatím nikdo nic nenapsal.', noComments:'Zatím žádné komentáře.', showResolved:'Vyřešené', hideResolved:'Skrýt vyřešené', replyAct:'Odpovědět', reopenAct:'Znovu otevřít', editAct:'Upravit', deleteAct:'Smazat', saveAct:'Uložit', cancel:'Zrušit', edited:'upraveno', commentDeleted:'Komentář byl smazán.', viaAgent:'Napsal agent', showPin:'Ukázat na snímku', pinOnShot:'Připnout na snímek', pinClickShot:'Klikněte do snímku', pinnedOnShot:'Připnuto na snímek', replyPh:'Odpověď… (@jméno upozorní)', flowPh:'Komentář k celému flow… (@jméno upozorní)', runPh:'Komentář k celému běhu… (@jméno upozorní)', commentLabel:'Komentář', ctrlEnter:'Ctrl+Enter odešle', confirmDelete:'Smazat komentář?', deletedToast:'Smazáno', openCommentsN:'Nevyřízené komentáře', showAllN:'Zobrazit všech %N%', screenWord:'obrazovka aplikace', uiTree:'UI strom', platformWord:'Platforma', treeHint:'Klikněte na prvek: ukáže ho na snímku.', treeSearch:'Hledat v UI stromu…', treeOcr:'Text rozpoznaný ze snímku (OCR): bez rolí a ovládacích prvků.', treeLoadFail:'UI strom se nepodařilo načíst.', treeEmpty:'Strom je prázdný.', mapView:'Mapa', indexView:'Index', searchSteps:'Hledat v krocích, kritériích a stránkách…', criteriaCol:'Kritéria', notesCol:'Poznámky', noStepsMatch:'Žádný krok neodpovídá filtru.', riKeys:'/ hledat · ↑↓ vybrat · Enter otevřít · I mapa', consoleWord:'chyb v konzoli', loadingPages:'hledám i ve stránkách stacků…', sortTitle:'Název', runWord:'Běh', openIndex:'Otevřít index', pagesNeedAttention:'stránek chce pozornost', allPagesPass:'všechny stránky prošly', stackLoadFail:'Index stránek se nepodařilo načíst', semanticSample:'sémantický vzorek', downloadCsv:'Stáhnout CSV', allWord:'Vše', criterionFilter:'Neprošlé kritérium', anyCriterion:'Jakékoli kritérium', searchPages:'Hledat v titulku, URL a polích…', sortBy:'Řadit podle', sortOrder:'Pořadí', sortStatus:'Stav (nejhorší první)', sortDir:'Směr řazení', pageWord:'Stránka', statusWord:'Stav', failingCriteria:'Neprošlo', stackKeys:'/ hledat · ↑↓ vybrat · Enter otevřít · Esc zavřít', listView:'Seznam', gridView:'Mřížka', noPagesMatch:'Filtru neodpovídá žádná stránka.', backToIndex:'Zpět na index',
     subject:'Předmět', from:'Od', to:'Komu', received:'Přijato', mailBeforeRun:'přišel před začátkem běhu', noCapture:'Bez snímku', viewEval:'eval.json', decision:'rozhodnutí', mainLane:'Hlavní průchod',
-    downloadZip:'Stáhnout ZIP', filesWord:'souborů', publicAccess:'veřejný odkaz', orgAccess:'přístup po přihlášení do organizace', projectAll:'Všechny projekty', packNote:'Kritérium z balíčku kontrol (packs ve scénáři)', coverage:'Pokrytí plánu', coverageLine:'kritérií z ACCEPTANCE.md má kontrolu', coverageExtra:'kontrol mimo plán', coverageFull:'Každé plánované kritérium má kontrolu.', coverageSteps:'Kroky v plánu bez uzlu', flakyTitle:'Nestabilní kritéria', flaky:'nestabilní', flakyNote:'Verdikt se liší mezi běhy na stejném commitu a prostředí.', people:'Lidé ve flow', peopleHint:'Klik na osobu zvýrazní její kroky; přerušované šipky jsou předání mezi lidmi.', awaiting:'Čeká na schválení od', approvedBy:'schválili', approvedByAll:'Schválili všichni povinní schvalovatelé.', publicRun:'Veřejný běh', publicNote:'Plachta je čitelná bez přihlášení; jména hodnotitelů jsou skrytá.', makePublic:'Zveřejnit běh', makePrivate:'Zrušit zveřejnění', publicHint:'Jen pro scénáře bez osobních údajů', publicConfirm:'Zveřejnit tento běh? Uvidí ho kdokoli s odkazem, bez přihlášení. Použijte jen u scénářů bez osobních údajů.', openInApp:'Otevřít v Kaloku', signInLink:'Přihlásit', replay:'Projít', rpStep:'Krok', rpNext:'Další', rpPrev:'Zpět', rpEnd:'Konec průchodu.', rpRestart:'Znovu od začátku', rpChoose:'Kudy dál?', rpOr:'nebo', rpKeys:'← → krok · čísla volí větev · Esc zavře', rpDecision:'Rozhodnutí', rpBranch:'větev', rpAltOnly:'jiná větev',
+    downloadZip:'Stáhnout ZIP', downloadZipNote:'Všechny soubory v otevřených formátech a plátno, které se otevře offline z disku', filesWord:'souborů', publicAccess:'veřejný odkaz', orgAccess:'přístup po přihlášení do organizace', projectAll:'Všechny projekty', packNote:'Kritérium z balíčku kontrol (packs ve scénáři)', coverage:'Pokrytí plánu', coverageLine:'kritérií z ACCEPTANCE.md má kontrolu', coverageExtra:'kontrol mimo plán', coverageFull:'Každé plánované kritérium má kontrolu.', coverageSteps:'Kroky v plánu bez uzlu', flakyTitle:'Nestabilní kritéria', flaky:'nestabilní', flakyNote:'Verdikt se liší mezi běhy na stejném commitu a prostředí.', people:'Lidé ve flow', peopleHint:'Klik na osobu zvýrazní její kroky; přerušované šipky jsou předání mezi lidmi.', awaiting:'Čeká na schválení od', approvedBy:'schválili', approvedByAll:'Schválili všichni povinní schvalovatelé.', publicRun:'Veřejný běh', publicNote:'Plachta je čitelná bez přihlášení; jména hodnotitelů jsou skrytá.', makePublic:'Zveřejnit běh', makePrivate:'Zrušit zveřejnění', publicHint:'Jen pro scénáře bez osobních údajů', publicConfirm:'Zveřejnit tento běh? Uvidí ho kdokoli s odkazem, bez přihlášení. Použijte jen u scénářů bez osobních údajů.', openInApp:'Otevřít v Kaloku', signInLink:'Přihlásit', replay:'Projít', rpStep:'Krok', rpNext:'Další', rpPrev:'Zpět', rpEnd:'Konec průchodu.', rpRestart:'Znovu od začátku', rpChoose:'Kudy dál?', rpOr:'nebo', rpKeys:'← → krok · čísla volí větev · Esc zavře', rpDecision:'Rozhodnutí', rpBranch:'větev', rpAltOnly:'jiná větev',
     compare:'Porovnat', cmpOff:'nic', cmpBaseline:'referenční', cmpPrev:'předchozí', cmpTitle:'Rozdíly oproti', cmpNone:'Statusy, verdikty i evidence jsou stejné.', pxChanged:'pixelů jinak', cmpSide:'Vedle sebe', cmpDiff:'Rozdíl', cmpLoadErr:'Porovnávaný běh se nepodařilo načíst.', pxUnavail:'Pixelový rozdíl se počítá jen ve službě (snímky ze stejného původu).', was:'předtím', thisRun:'tento běh', cmpNoCap:'v porovnávaném běhu bez snímku', cmpAdded:'nové kroky', cmpRemoved:'kroky, které zmizely', cmpHint:'Ctrl/⌘ + klik na krok otevře porovnání',
     reviewTitle:'Akceptace a komentáře', approve:'Schválit', reject:'Zamítnout', comment:'Komentovat', notePh:'Co je potřeba změnit, nebo poznámka · @jméno pošle kolegovi upozornění', approved:'schváleno', rejected:'zamítnuto', commented:'komentář', resolved:'vyřešeno', resolve:'Vyřešit', openFeedback:'Otevřená zpětná vazba', noFeedback:'Žádná otevřená zpětná vazba.', saved:'Uloženo', noteRequired:'Napište, co je potřeba změnit.', expires:'Platí do' },
-  en: { makePublicVersion:'Make version public', draft:'Draft', liveShared:'live, shared', publishHint:'Publish version saves the whole flow as %V; unchanged steps are reused.', htmlView:'HTML view', htmlViewNote:'A static copy of the page: no scripts of the site, styles and images rehosted, secrets removed.', editTitle:'Edit in the canvas', editText:'Text', editKeep:'keep', editSave:'Save edit', editSaved:'Edit saved as a new revision', editRebased:'The step changed meanwhile; the edit is on the latest revision', editUnapplied:'Not applied (the element no longer exists)', staleCapture:'The screenshot is from the previous revision; Live shows the latest edit.', branches:'Branches', mergeBranch:'Merge into main', mergeConflict:'Step changed on both branches:', mergeTakeBranch:'Take the branch version? (Cancel = keep main)', branchMerged:'Merged', acceptVersion:'Accept version', returnVersion:'Return version', versionVerdict:'Version verdict', draftInfo:'This draft is live and shared: everyone who has it open sees changes as they happen, agents’ changes too. kaloko sync and canvas edits save steps; Publish version saves the whole flow as a new version.', changedSince:'Changed since', noChangeSince:'No change since', designEnv:'design', version:'Version', versions:'Flow versions', publish:'Publish version', publishName:'Version name (optional)', published:'Published', designRef:'design reference', setDesignRef:'Set as design reference', unsetDesignRef:'Unset design reference', designRefHint:'Implementation is checked against the design reference (pack design).', openDraft:'Open the draft', liveMode:'Live', shotMode:'Screenshot', inspect:'Inspect', pinComment:'Comment on element', pickHint:'Click an element in the preview.', pinnedOn:'On element', unchangedSince:'unchanged since', unchangedSteps:'steps unchanged', changedOnly:'Changed only', stepStatus:'Step status', st_in_progress:'in progress', st_ready_for_review:'ready for review', st_ready_for_dev:'ready for dev', present:'Present', presenting:'You are presenting', stopPresent:'Stop presenting', updatedSteps:'updated', viaAgent:'via', here:'here', copyCss:'Copy CSS', cssCopied:'CSS copied', noToken:'outside the token set', tokenSet:'token', revisionBy:'revision', noLiveOrigin:'Live steps are not enabled on this instance.', draftEmpty:'The draft has no steps yet; run kaloko sync.', prototypeTo:'Prototype: go to', outdated:'outdated',     hint:'Drag to pan · Ctrl + wheel to zoom · <span class="kbd">F</span> focus mode · <span class="kbd">K</span> scenarios and runs · <span class="kbd">R</span> replay · <span class="kbd">I</span> map / index · <span class="kbd">←</span><span class="kbd">→</span> previous / next step (in the detail) · <span class="kbd">Esc</span> close', locale:'Tested locale', view:'View', both:'Both', shownRun:'Shown run', allRuns:'All runs', steps:'Flow steps', fit:'Fit flow', stepsWord:'steps', passedWord:'passed', fitLane:'Show the whole section', following:'Following', followEsc:'Esc to stop', followHint:'Follow what they do', visOn:'Others see me', visOff:'Hidden',
+  en: { makePublicVersion:'Make version public', draft:'Draft', liveShared:'live, shared', publishHint:'Publish version saves the whole flow as %V; unchanged steps are reused.', htmlView:'HTML view', htmlViewNote:'A static copy of the page: no scripts of the site, styles and images rehosted, secrets removed.', editTitle:'Edit in the canvas', editText:'Text', editKeep:'keep', editSave:'Save edit', editSaved:'Edit saved as a new revision', editRebased:'The step changed meanwhile; the edit is on the latest revision', editUnapplied:'Not applied (the element no longer exists)', staleCapture:'The screenshot is from the previous revision; Live shows the latest edit.', branches:'Branches', mergeBranch:'Merge into main', mergeConflict:'Step changed on both branches:', mergeTakeBranch:'Take the branch version? (Cancel = keep main)', branchMerged:'Merged', acceptVersion:'Accept version', returnVersion:'Return version', versionVerdict:'Version verdict', draftInfo:'This draft is live and shared: everyone who has it open sees changes as they happen, agents’ changes too. kaloko sync and canvas edits save steps; Publish version saves the whole flow as a new version.', changedSince:'Changed since', noChangeSince:'No change since', designEnv:'design', version:'Version', versions:'Flow versions', publish:'Publish version', publishName:'Version name (optional)', published:'Published', designRef:'design reference', setDesignRef:'Set as design reference', unsetDesignRef:'Unset design reference', designRefHint:'Implementation is checked against the design reference (pack design).', openDraft:'Open the draft', liveMode:'Live', shotMode:'Screenshot', inspect:'Inspect', pinComment:'Comment on element', pickHint:'Click an element in the preview.', pinnedOn:'On element', unchangedSince:'unchanged since', unchangedSteps:'steps unchanged', changedOnly:'Changed only', stepStatus:'Step status', st_in_progress:'in progress', st_ready_for_review:'ready for review', st_ready_for_dev:'ready for dev', present:'Present', presenting:'You are presenting', stopPresent:'Stop presenting', updatedSteps:'updated', viaAgent:'via', here:'here', copyCss:'Copy CSS', cssCopied:'CSS copied', noToken:'outside the token set', tokenSet:'token', revisionBy:'revision', noLiveOrigin:'Live steps are not enabled on this instance.', draftEmpty:'The draft has no steps yet; run kaloko sync.', prototypeTo:'Prototype: go to', outdated:'outdated', prototype:'Prototype', protoTitle:'Present the prototype', protoHint:'Click through the prototype; ← → previous / next step, Esc to leave.', protoShot:'Screenshots only: live steps are not available here. ← → move through the flow.', protoLocal:'Links open the pages from disk; ← → move through the flow.', protoDevice:'Device frame', protoFull:'Full screen', protoExit:'Leave the prototype', protoNoStep:'The link does not lead to a step of the flow',     hint:'Drag to pan · Ctrl + wheel to zoom · <span class="kbd">F</span> focus mode · <span class="kbd">K</span> scenarios and runs · <span class="kbd">R</span> replay · <span class="kbd">P</span> prototype · <span class="kbd">I</span> map / index · <span class="kbd">←</span><span class="kbd">→</span> previous / next step (in the detail) · <span class="kbd">Esc</span> close', locale:'Tested locale', view:'View', both:'Both', shownRun:'Shown run', allRuns:'All runs', steps:'Flow steps', fit:'Fit flow', stepsWord:'steps', passedWord:'passed', fitLane:'Show the whole section', following:'Following', followEsc:'Esc to stop', followHint:'Follow what they do', visOn:'Others see me', visOff:'Hidden',
     pass:'Passed', partial:'Partial', fail:'Failed', skip:'Not checked', crop:'crop', html:'HTML snapshot', email:'e-mail', external:'third party',
     branch:'Branch', commit:'Commit', author:'Author', pr:'PR', issue:'Issue', env:'Environment', duration:'Duration', noPr:'no PR', open:'open', merged:'merged', closed:'closed',
     older:'Older run', newer:'Newer run', purpose:'Screen purpose from the scenario', criteria:'Acceptance criteria', jevTitle:'Semantic evaluation',
@@ -691,7 +713,7 @@ const I18N = {
     onlyLocal:'This run exists locally only; open its folder.', linksExpired:'Links to the captures expired. Reload the page.', captured:'Captured', console:'Console', errors:'errors', blocked:'blocked requests', files:'Files',
     pagesWord:'pages', firstScreen:'first screen', layout:'Layout', uploadedBy:'Uploaded by', addNote:'Add a note', viewOptions:'View', keyComment:'comment on the step (in the detail)', keyHelp:'this help', helpTitle:'Shortcuts and help', flowComments:'Flow comments', runComments:'Run comments', commentsTitle:'Comments', allOpen:'Open', openWord:'open', flowCommentsLead:'For the whole flow across runs: a missing step, a general remark, an idea.', noStepComments:'No comments on this step yet.', noComments:'No comments yet.', showResolved:'Resolved', hideResolved:'Hide resolved', replyAct:'Reply', reopenAct:'Reopen', editAct:'Edit', deleteAct:'Delete', saveAct:'Save', cancel:'Cancel', edited:'edited', commentDeleted:'This comment was deleted.', viaAgent:'Written by an agent', showPin:'Show on the screenshot', pinOnShot:'Pin on the screenshot', pinClickShot:'Click on the screenshot', pinnedOnShot:'Pinned on the screenshot', replyPh:'Reply… (@name notifies)', flowPh:'Comment on the whole flow… (@name notifies)', runPh:'Comment on the whole run… (@name notifies)', commentLabel:'Comment', ctrlEnter:'Ctrl+Enter sends', confirmDelete:'Delete this comment?', deletedToast:'Deleted', openCommentsN:'Open comments', showAllN:'Show all %N%', screenWord:'app screen', uiTree:'UI tree', platformWord:'Platform', treeHint:'Click an element to show it on the screen.', treeSearch:'Search the UI tree…', treeOcr:'Text recognized from the screenshot (OCR): no roles or controls.', treeLoadFail:'The UI tree could not be loaded.', treeEmpty:'The tree is empty.', mapView:'Map', indexView:'Index', searchSteps:'Search steps, criteria and pages…', criteriaCol:'Criteria', notesCol:'Notes', noStepsMatch:'No step matches the filter.', riKeys:'/ search · ↑↓ select · Enter open · I map', consoleWord:'console errors', loadingPages:'also searching the pages of stacks…', sortTitle:'Title', runWord:'Run', openIndex:'Open index', pagesNeedAttention:'pages need attention', allPagesPass:'all pages pass', stackLoadFail:'The page index could not be loaded', semanticSample:'semantic sample', downloadCsv:'Download CSV', allWord:'All', criterionFilter:'Failing criterion', anyCriterion:'Any criterion', searchPages:'Search title, URL and fields…', sortBy:'Sort by', sortOrder:'Order', sortStatus:'Status (worst first)', sortDir:'Sort direction', pageWord:'Page', statusWord:'Status', failingCriteria:'Failing', stackKeys:'/ search · ↑↓ select · Enter open · Esc close', listView:'List', gridView:'Grid', noPagesMatch:'No page matches the filter.', backToIndex:'Back to index',
     subject:'Subject', from:'From', to:'To', received:'Received', mailBeforeRun:'arrived before the run started', noCapture:'No capture', viewEval:'eval.json', decision:'decision', mainLane:'Main path',
-    downloadZip:'Download ZIP', filesWord:'files', publicAccess:'public link', orgAccess:'access after signing in to the organization', projectAll:'All projects', packNote:'Criterion from a check pack (packs in the scenario)', coverage:'Plan coverage', coverageLine:'criteria from ACCEPTANCE.md have a check', coverageExtra:'checks outside the plan', coverageFull:'Every planned criterion has a check.', coverageSteps:'Steps in the plan without a node', flakyTitle:'Flaky criteria', flaky:'flaky', flakyNote:'The verdict differs between runs on the same commit and environment.', people:'People in the flow', peopleHint:'Click a person to highlight their steps; dashed arrows are hand-offs between people.', awaiting:'Awaiting approval from', approvedBy:'approved by', approvedByAll:'Every required approver has approved.', publicRun:'Public run', publicNote:'The canvas is readable without sign-in; reviewer names are hidden.', makePublic:'Make public', makePrivate:'Make private', publicHint:'Only for scenarios without personal data', publicConfirm:'Make this run public? Anyone with the link can read it without signing in. Use it only for scenarios without personal data.', openInApp:'Open in Kaloko', signInLink:'Sign in', replay:'Replay', rpStep:'Step', rpNext:'Next', rpPrev:'Back', rpEnd:'End of the walkthrough.', rpRestart:'Start over', rpChoose:'Which way?', rpOr:'or', rpKeys:'← → step · digits pick a branch · Esc closes', rpDecision:'Decision', rpBranch:'branch', rpAltOnly:'other branch',
+    downloadZip:'Download ZIP', downloadZipNote:'Every file in open formats and the canvas, which opens offline from disk', filesWord:'files', publicAccess:'public link', orgAccess:'access after signing in to the organization', projectAll:'All projects', packNote:'Criterion from a check pack (packs in the scenario)', coverage:'Plan coverage', coverageLine:'criteria from ACCEPTANCE.md have a check', coverageExtra:'checks outside the plan', coverageFull:'Every planned criterion has a check.', coverageSteps:'Steps in the plan without a node', flakyTitle:'Flaky criteria', flaky:'flaky', flakyNote:'The verdict differs between runs on the same commit and environment.', people:'People in the flow', peopleHint:'Click a person to highlight their steps; dashed arrows are hand-offs between people.', awaiting:'Awaiting approval from', approvedBy:'approved by', approvedByAll:'Every required approver has approved.', publicRun:'Public run', publicNote:'The canvas is readable without sign-in; reviewer names are hidden.', makePublic:'Make public', makePrivate:'Make private', publicHint:'Only for scenarios without personal data', publicConfirm:'Make this run public? Anyone with the link can read it without signing in. Use it only for scenarios without personal data.', openInApp:'Open in Kaloko', signInLink:'Sign in', replay:'Replay', rpStep:'Step', rpNext:'Next', rpPrev:'Back', rpEnd:'End of the walkthrough.', rpRestart:'Start over', rpChoose:'Which way?', rpOr:'or', rpKeys:'← → step · digits pick a branch · Esc closes', rpDecision:'Decision', rpBranch:'branch', rpAltOnly:'other branch',
     compare:'Compare', cmpOff:'nothing', cmpBaseline:'baseline', cmpPrev:'previous', cmpTitle:'Differences from', cmpNone:'Statuses, verdicts and evidence are the same.', pxChanged:'pixels changed', cmpSide:'Side by side', cmpDiff:'Diff', cmpLoadErr:'Could not load the compared run.', pxUnavail:'Pixel diff works in the service only (same-origin images).', was:'was', thisRun:'this run', cmpNoCap:'no capture in the compared run', cmpAdded:'new steps', cmpRemoved:'steps that disappeared', cmpHint:'Ctrl/⌘ + click a step to open the comparison',
     reviewTitle:'Sign-off and comments', approve:'Approve', reject:'Reject', comment:'Comment', notePh:'What should change, or a note · @name notifies a colleague', approved:'approved', rejected:'rejected', commented:'comment', resolved:'resolved', resolve:'Resolve', openFeedback:'Open feedback', noFeedback:'No open feedback.', saved:'Saved', noteRequired:'Write what should change.', expires:'Expires' }
 };
@@ -2083,7 +2105,7 @@ function openLb (id, vpName, opts = {}) {
   const lb = $('lb');
   const html = `<div class="lb__box">
     <div class="lb__stage">
-      <div class="lb__tools"><div class="seg" id="lbVp"></div>${liveSrc(cap) || viewSrc(cap) ? `<div class="seg" id="lbMode"></div>` : ''}${(liveSrc(cap) && S.lbMode === 'live') || (viewSrc(cap) && S.lbMode === 'view') ? `<span id="lbLiveTools" class="share__row"></span>` : ''}${S.cmp ? `<div class="seg" id="lbCmpSeg"></div>` : ''}<span class="note">${v.w} × ${v.h}, ${cap?.platform && cap.platform !== 'electron' ? T('screenWord') : cap?.first_screen ? T('firstScreen') : T('fullPage')} · ${esc(S.loc)}</span><span class="spacer"></span><span class="note">${S.cmp ? `${T('cmpTitle')} ${esc(cmpLabel())}` : T('hover')}</span></div>
+      <div class="lb__tools"><div class="seg" id="lbVp"></div>${isDesign() || liveSrc(cap) ? `<button class="btn" id="lbProto" title="${esc(T('protoTitle'))} (P)">${T('prototype')}</button>` : ''}${liveSrc(cap) || viewSrc(cap) ? `<div class="seg" id="lbMode"></div>` : ''}${(liveSrc(cap) && S.lbMode === 'live') || (viewSrc(cap) && S.lbMode === 'view') ? `<span id="lbLiveTools" class="share__row"></span>` : ''}${S.cmp ? `<div class="seg" id="lbCmpSeg"></div>` : ''}<span class="note">${v.w} × ${v.h}, ${cap?.platform && cap.platform !== 'electron' ? T('screenWord') : cap?.first_screen ? T('firstScreen') : T('fullPage')} · ${esc(S.loc)}</span><span class="spacer"></span><span class="note">${S.cmp ? `${T('cmpTitle')} ${esc(cmpLabel())}` : T('hover')}</span></div>
       <div class="lb__scroll" id="lbScroll">${(() => {
         const bn0 = S.cmp && cmpNode(n.id), bcap0 = bn0?.captures?.[S.loc]?.[v.name];
         if (S.lbMode === 'view' && viewSrc(cap) && !S.cmp) return `<p class="note" style="margin:0 0 8px">${T('htmlViewNote')}</p>` + liveStage(cap, v, 'lbFrame', RUN.live_bases, true);
@@ -2146,6 +2168,7 @@ function openLb (id, vpName, opts = {}) {
   seg($('lbVp'), (n.item ? viewports().filter((x) => n.captures?.[S.loc]?.[x.name]) : viewports()).map((x) => [x.name, vpLabel(x)]), v.name, (nv) => openLb(id, nv));
   if ($('lbMode')) seg($('lbMode'), [...(liveSrc(cap) ? [['live', T('liveMode')]] : []), ...(viewSrc(cap) ? [['view', T('htmlView')]] : []), ['shot', T('shotMode')]], S.lbMode, (m) => { S.lbMode = m; LIVE.mode = null; openLb(id, v.name); });
   if ($('lbLiveTools')) renderLiveTools();
+  if ($('lbProto')) $('lbProto').onclick = () => ptOpen(id, v.name);
   wireStepStatus(n); wireCopyCss();
   // pins of comments made on elements, drawn over the screenshot too
   const pimg = $('lbImg');
@@ -2233,6 +2256,10 @@ function applyHash () {
   if (p.get('replay')) { const path = (p.get('path') || p.get('step') || '').split(',').filter((id) => byId(id)); if (!S.rp || S.rp.path.join(',') !== path.join(',')) rpOpen(path); return; }
   if (S.rp) rpClose();
   if (p.get('comments')) showCommentsFromHash(p.get('comments'));
+  // a shared link straight into the prototype: #present=<step>&loc=…&vp=…
+  const pres = p.get('present');
+  if (pres && byId(pres)) { if (p.get('loc') && RUN.scope.locales.includes(p.get('loc')) && p.get('loc') !== S.loc) { S.loc = p.get('loc'); renderAll(); } ptOpen(pres, p.get('vp')); return; }
+  if (!$('pt').hidden) { $('pt').hidden = true; $('pt').innerHTML = ''; }
   const step = p.get('step');
   if (step && step.includes('~') && !byId(step) && byId(step.split('~')[0])?.kind === 'stack') { loadStack(byId(step.split('~')[0])).then((d) => { if (d) { S.itemList = d.items.map((it) => ensureItemNode(byId(step.split('~')[0]), d, it).id); applyHash(); } }); return; }
   if (!step || !byId(step)) return;
@@ -2353,7 +2380,7 @@ function renderReport () {
    ${isDesign() ? '' : `<div class="sec"><h4>${T('changes')}</h4>`}${isDesign() ? '' : pr ? (changes.length ? `<ul class="issues">${changes.map((n) => `<li><button data-go="${esc(n.id)}"><span class="badge st-${esc(n.status)}">Δ</span><span><b>${esc(loc(n.title))}</b></span><small>${esc(T(pr.statuses[n.id]))} (${esc(pr.git?.commit || '')}) → ${esc(T(n.status))} (${esc(RUN.git?.commit || '')})</small></button></li>`).join('')}</ul>` : `<p class="note">${T('noChanges')}</p>`) : `<p class="note">${T('noPrev')}</p>`}${isDesign() ? '' : '</div>'}
    <div class="sec share"><h4>${ICON.share} ${T('share')}</h4>${APP()
      ? `<div class="url" id="shareUrl">${esc(location.origin + location.pathname)}</div>
-        <div class="share__row"><button class="btn btn--primary" id="shareCopy">${ICON.copy} ${T('copyLink')}</button>${APP().user && APP().run ? `<a class="btn" href="${esc(`${APP().api}/orgs/${APP().org}/runs/${APP().run}/export.zip`)}" download>${ICON.download} ${T('downloadZip')}</a>` : ''}</div>
+        <div class="share__row"><button class="btn btn--primary" id="shareCopy">${ICON.copy} ${T('copyLink')}</button>${APP().user && APP().run ? `<a class="btn" href="${esc(`${APP().api}/orgs/${APP().org}/runs/${APP().run}/export.zip`)}" download title="${esc(T("downloadZipNote"))}">${ICON.download} ${T("downloadZip")}</a>` : ''}</div>
         <p class="note">${[RUN.expires_at && `${T('expires')} ${fmtDate(RUN.expires_at)}`, RUN.usage && `${T('storage')}: ${fmtBytes(RUN.usage.bytes)} · ${RUN.usage.files} ${T('filesWord')}`, RUN.public ? T('publicAccess') : T('orgAccess')].filter(Boolean).map(esc).join(' · ')}</p>`
      : `<div class="url">kaloko share</div><p class="note">${T('shareLocal')}</p>`}</div>`;
   $('rsClose').onclick = () => { S.right = false; setPanels(); };
@@ -2440,7 +2467,8 @@ const scenarioApi = (p) => { const a = APP(); return `${a.api}/orgs/${a.org}/sce
 const branchQ = () => RUN.draft && RUN.draft.branch !== 'main' ? `?branch=${enc(RUN.draft.branch)}` : '';
 function liveSrc (cap, bases = RUN.live_bases) {
   const l = cap?.live; if (!l) return null;
-  if (!APP()) return `live/${l.revision}/${l.entry}`;
+  // from disk: the merged tree of the run (links between steps resolve there), else the revision's own copy
+  if (!APP()) return RUN.live_site === 'live/site/' ? RUN.live_site + l.entry : `live/${l.revision}/${l.entry}`;
   const b = bases?.[l.revision];
   return b ? b + l.entry : null;
 }
@@ -2471,7 +2499,7 @@ async function reloadDraft () {
   const m = await apiJson('GET', scenarioApi(`/draft/manifest${branchQ()}`)).catch(() => null);
   if (!m) return;
   swapBase(BASE, m.files_base); BASE = m.files_base || BASE; a.files = m.files_base;
-  RUN = m; applyReviewerVerdicts(); renderAll(); if (S.open) openLb(S.open, S.lbVp, { keepFrame: true });
+  RUN = m; applyReviewerVerdicts(); renderAll(); if (S.open && $('pt').hidden) openLb(S.open, S.lbVp, { keepFrame: true });
 }
 
 function renderDesignBar () {
@@ -2534,7 +2562,7 @@ function liveStage (cap, v, id = 'lbFrame', bases, view = false) {
   // an HTML view gets no forms and runs only the frame helper (its origin's CSP enforces that too)
   return `<div class="lb__live"><iframe id="${id}" title="${view ? T('htmlView') : T('liveMode')}" sandbox="${view ? 'allow-scripts' : 'allow-scripts allow-forms'}" referrerpolicy="no-referrer" src="${esc(src)}" style="width:${v.w}px;height:${Math.min(v.h, 2000)}px"></iframe></div>`;
 }
-const frames = () => [...document.querySelectorAll('#lbFrame, #lbFrameB')];
+const frames = () => [...document.querySelectorAll('#lbFrame, #lbFrameB, #ptIframe')];
 // a live step renders at its real viewport width and is scaled to fit the stage, like the screenshot
 function fitLive () {
   for (const f of frames()) {
@@ -2565,6 +2593,13 @@ addEventListener('message', (e) => {
   if (!frames().some((f) => e.source === f.contentWindow)) return;
   const m = e.data || {};
   const n = S.open && byId(S.open);
+  // presenting: the frame moves between steps (links, data-kaloko-go) and hands over the keys it does not use
+  if (!$('pt').hidden) {
+    const str = (x) => typeof x === 'string' ? x.slice(0, 300).replace(/[#\s]/g, '') : '';
+    if (m.type === 'qawalk:go' && typeof m.node === 'string') { if (byId(m.node) && byId(m.node).kind !== 'decision') ptOpen(m.node, PT.vp, { query: str(m.query), hash: str(m.hash) }); else toast(T('protoNoStep')); }
+    if (m.type === 'qawalk:key') ptKey({ key: String(m.key), preventDefault () {} });
+    return;
+  }
   if (m.type === 'qawalk:ready' && n) { toFrame({ type: 'qawalk:pins', pins: pinsFor(n, S.lbVp) }); if (LIVE.mode) toFrame({ type: 'qawalk:mode', mode: LIVE.mode }); }
   if (m.type === 'qawalk:go' && typeof m.node === 'string' && byId(m.node)) { toast(`${T('prototypeTo')} ${loc(byId(m.node).title)}`); openLb(m.node, S.lbVp); }
   if (m.type === 'qawalk:hover' && LIVE.mode === 'inspect' && m.el) { LIVE.insp = sanitizeEl(m.el); const sec = $('inspSec'); if (sec) sec.outerHTML = inspectorHtml(); else $('lbSideTop')?.insertAdjacentHTML('afterend', inspectorHtml()); wireCopyCss(); }
@@ -2626,6 +2661,69 @@ function wireStepStatus (n) {
 }
 
 
+// ---- prototype presentation (#42): full screen, live pages where the run has them, screenshots otherwise ----
+const PT = { id: null, vp: null, device: true, query: '', hash: '', from: null };
+const ptList = () => flowOrder().filter((n) => n.kind !== 'decision' && n.kind !== 'stack' && !n.item);
+function ptOpen (id, vpName, extra = {}) {
+  const list = ptList(); if (!list.length) return;
+  const n = list.includes(byId(id)) ? byId(id) : list[0];
+  if ($('pt').hidden) { PT.from = $('lb').hidden ? null : S.open; PT.device = innerWidth > 700; }
+  $('lb').hidden = true; LIVE.mode = null;
+  PT.id = n.id; PT.query = extra.query || ''; PT.hash = extra.hash || '';
+  PT.vp = viewports().some((v) => v.name === vpName) ? vpName : PT.vp || S.lbVp || (S.vp === 'mobile' ? mVp() : dVp())?.name || viewports()[0].name;
+  renderPt();
+  setHash({ present: n.id, loc: S.loc, vp: PT.vp });
+}
+function ptClose () {
+  if (document.fullscreenElement) document.exitFullscreen?.().catch(() => {});
+  $('pt').hidden = true; $('pt').innerHTML = '';
+  if (PT.from && byId(PT.id)) openLb(PT.id, PT.vp); else setHash(null);
+}
+function ptKey (e) {
+  const list = ptList(), i = list.indexOf(byId(PT.id));
+  if (e.key === 'Escape') { e.preventDefault(); ptClose(); }
+  else if ((e.key === 'ArrowRight' || e.key === 'PageDown' || e.key === ' ') && i < list.length - 1) { e.preventDefault(); ptOpen(list[i + 1].id, PT.vp); }
+  else if ((e.key === 'ArrowLeft' || e.key === 'PageUp') && i > 0) { e.preventDefault(); ptOpen(list[i - 1].id, PT.vp); }
+  else if (e.key === 'Home') { e.preventDefault(); ptOpen(list[0].id, PT.vp); }
+  else if (e.key === 'End') { e.preventDefault(); ptOpen(list[list.length - 1].id, PT.vp); }
+  else if (e.key === 'f' || e.key === 'F') { e.preventDefault(); $('ptFull')?.click(); }
+  else if (e.key === 'd' || e.key === 'D') { e.preventDefault(); $('ptDev')?.click(); }
+}
+function renderPt () {
+  const el = $('pt'), list = ptList(), n = byId(PT.id), i = list.indexOf(n);
+  const v = viewports().find((x) => x.name === PT.vp) || viewports()[0];
+  const cap = n.captures?.[S.loc]?.[v.name];
+  const src = liveSrc(cap);
+  const url = src ? src + (PT.query ? `?${PT.query}` : '') + (PT.hash ? `#${PT.hash}` : '') : null;
+  const kind = v.mobile ? 'phone' : 'desk';
+  const screen = url ? `<iframe id="ptIframe" title="${esc(loc(n.title))}" sandbox="allow-scripts allow-forms" referrerpolicy="no-referrer" src="${esc(url)}" style="width:${v.w}px;height:${v.h}px"></iframe>`
+    : cap ? `<img src="${esc(asset(cap.image || cap.png))}" alt="${esc(loc(n.title))}">` : `<p class="pt__empty">${T('notReached')}</p>`;
+  const note = !src ? T('protoShot') : APP() ? T('protoHint') : T('protoLocal');
+  el.innerHTML = `<div class="pt__bar"><span class="pt__title" id="ptTitle">${esc(loc(n.title))}</span><span class="note">${i + 1} / ${list.length}</span><span class="spacer"></span><div class="seg" id="ptVp"></div>${RUN.scope.locales.length > 1 ? '<div class="seg" id="ptLoc"></div>' : ''}<button class="btn" id="ptDev" aria-pressed="${PT.device}">${T('protoDevice')}</button>${document.fullscreenEnabled ? `<button class="btn" id="ptFull" aria-pressed="${!!document.fullscreenElement}">${T('protoFull')}</button>` : ''}<button class="btn" id="ptLink">${ICON.external} ${T('copyLink')}</button><button class="icon-btn" id="ptClose" aria-label="${esc(T('protoExit'))}" title="${esc(T('protoExit'))} (Esc)">${ICON.close}</button></div>
+    <div class="pt__stage" id="ptStage"><div class="pt__fit" id="ptFit"><div class="pt__dev pt__dev--${kind} ${PT.device ? '' : 'pt__dev--bare'}" id="ptDevBox"><div class="pt__screen" style="width:${v.w}px;height:${v.h}px">${screen}</div></div></div></div>
+    <div class="pt__bar pt__bar--foot"><button class="icon-btn" id="ptPrev" aria-label="Previous" ${i <= 0 ? 'disabled' : ''}>${ICON.prev}</button><span class="note">${esc(note)}</span><button class="icon-btn" id="ptNext" aria-label="Next" ${i >= list.length - 1 ? 'disabled' : ''}>${ICON.next}</button></div>`;
+  el.hidden = false;
+  seg($('ptVp'), viewports().map((x) => [x.name, vpLabel(x)]), v.name, (nv) => ptOpen(PT.id, nv, PT));
+  if ($('ptLoc')) seg($('ptLoc'), RUN.scope.locales.map((l) => [l, l]), S.loc, (l) => { S.loc = l; renderAll(); ptOpen(PT.id, PT.vp, PT); });
+  $('ptDev').onclick = () => { PT.device = !PT.device; renderPt(); };
+  if ($('ptFull')) $('ptFull').onclick = () => { (document.fullscreenElement ? document.exitFullscreen() : el.requestFullscreen()).catch(() => {}).finally(() => setTimeout(fitPt, 120)); };
+  $('ptLink').onclick = async () => { try { await navigator.clipboard.writeText(location.href); toast(T('linkCopied')); } catch { toast(location.href); } };
+  $('ptClose').onclick = ptClose;
+  $('ptPrev').onclick = () => ptKey({ key: 'ArrowLeft', preventDefault () {} });
+  $('ptNext').onclick = () => ptKey({ key: 'ArrowRight', preventDefault () {} });
+  fitPt(); requestAnimationFrame(fitPt);
+  $('ptClose').focus();
+}
+// the device keeps the viewport's real size and is scaled to the stage, like a live step in the detail
+function fitPt () {
+  const st = $('ptStage'), box = $('ptDevBox'), fitEl = $('ptFit'); if (!st || !box) return;
+  const w = box.offsetWidth, h = box.offsetHeight, pad = innerWidth > 700 ? 32 : 12;
+  const k = Math.min(1, (st.clientWidth - pad) / w, (st.clientHeight - pad) / h);
+  box.style.transform = `scale(${k})`; fitEl.style.width = `${Math.floor(w * k)}px`; fitEl.style.height = `${Math.floor(h * k)}px`;
+}
+addEventListener('resize', () => { if (!$('pt').hidden) fitPt(); });
+document.addEventListener('fullscreenchange', () => { const b = $('ptFull'); if (b) b.setAttribute('aria-pressed', String(!!document.fullscreenElement)); setTimeout(fitPt, 60); });
+
 /* ---------- boot ---------- */
 let tt; function toast (msg) { const el = $('toast'); el.textContent = msg; el.hidden = false; clearTimeout(tt); tt = setTimeout(() => { el.hidden = true; }, 2600); }
 async function load () {
@@ -2713,6 +2811,7 @@ load().then((data) => {
   $('togLeft').onclick = () => { S.left = !S.left; setPanels(); savePanels(); };
   $('togRight').onclick = () => { S.right = !S.right; setPanels(); savePanels(); };
   $('rpBtn').onclick = () => rpOpen(null);
+  $('ptBtn').hidden = !isDesign(); $('ptBtn').onclick = () => ptOpen(null);
   wireComments($('lb')); wireComments($('rside')); wireComments($('rp'));
   // small menus of the top bar: one open at a time, closed by a click elsewhere or Escape
   // wide screens show navigation, language and view options in the bar; narrower ones fold them into ☰
@@ -2736,6 +2835,7 @@ load().then((data) => {
     // (the draft stays); the next Escape closes the overlay. Search boxes keep their own arrow and Enter keys.
     const field = e.target.closest?.('textarea,select,[contenteditable="true"],input:not([type=checkbox]):not([type=radio]):not([type=button])');
     if (field && !['siQ', 'riQ', 'brSearch'].includes(field.id)) { if (e.key === 'Escape') { e.preventDefault(); field.blur(); } return; }
+    if (!$('pt').hidden) { if (!e.metaKey && !e.ctrlKey && !e.altKey) ptKey(e); return; }
     if (!$('si').hidden) { if (stackKey(e)) return; if (e.target.closest('input,select,textarea')) return; return; }
     if (S.rp && !$('rp').hidden) { if (!e.target.closest('input,select,textarea')) { e.preventDefault(); rpKey(e); } return; }
     if (!$('br').hidden) { if (e.key === 'Escape') closeBrowser(); return; }
@@ -2745,6 +2845,7 @@ load().then((data) => {
       if (e.key === 'ArrowRight') $('lbNext')?.click();
       if (e.key === 'ArrowLeft') $('lbPrev')?.click();
       if (e.key === 'c' || e.key === 'C') { e.preventDefault(); focusComposer(); }
+      if (e.key === 'p' || e.key === 'P') { e.preventDefault(); ptOpen(S.open, S.lbVp); }
       return;
     }
     if (S.mode === 'index' && !e.metaKey && !e.ctrlKey && !e.altKey) { if (S.st?.inline ? stackKey(e) : riKey(e)) return; }
@@ -2754,6 +2855,7 @@ load().then((data) => {
     if (e.key === 'f' || e.key === 'F') { const any = S.left || S.right; S.left = S.right = !any; setPanels(); }
     if (e.key === 'k' || e.key === 'K' || (e.key === '/' && S.mode !== 'index')) { e.preventDefault(); openBrowser(); }
     if (e.key === 'r' || e.key === 'R') { e.preventDefault(); rpOpen(null); }
+    if (e.key === 'p' || e.key === 'P') { e.preventDefault(); ptOpen(null); }
     if (e.key === '0') fit();
     if (e.key === '1') startView();
   });