kaloko 0.4.1 → 0.4.4

package/package.json

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

package/skills/kaloko/reference/evaluation.md

@@ -39,7 +39,9 @@ cannot be repeated (data created, an e-mail sent once, a state that moved
 on), fix the scenario and run `kaloko evaluate --recheck [--steps a,b]`: the
 deterministic checks run again against the stored HTML with page scripts off
 and are marked `rechecked`; console errors, overflow and performance keep
-their live result. When the page content itself is in question, capture again.
+their live result. The same command asks changed or new semantic questions
+again on the stored captures, so a reworded semantic criterion needs no new
+walk. When the page content itself is in question, capture again.
 
 ## Quick signals
 

package/skills/kaloko/reference/stacks.md

@@ -54,14 +54,22 @@ Item sources:
 - `urls: [/a, /b]` is a short fixed list.
 - `file: qa/data/products.csv` is a list next to the scenario. Accepted
   formats are text with one path per line, CSV (first column), or JSON:
-  `["/a"]` or `[{ path, title, key }]`, where `key` gives a stable id.
+  `["/a"]` or `[{ path, title, key, purpose }]`, where `key` gives a stable id.
 - `sitemap: /sitemap.xml` also follows a sitemap index (up to 50 sitemaps).
 - `crawl: { from: /clanky, links: "a.card", next: "a.next", pages: 20 }`
   collects links from a listing and follows its pagination.
 - `script: qa/steps/items.mjs` uses the default export
-  `({ page, env, locale, url }) => [paths | { path, title, key }]` for
+  `({ page, env, locale, url }) => [paths | { path, title, key, purpose }]` for
   anything else, such as an API or a search.
 
+An item's `purpose` (for example its title and meta description) is what the
+semantic evaluator reads as `screen_purpose` for that page instead of the
+step's generic purpose, so one question asked of forty different pages is
+judged against each page's own intent. A script also decides which pages
+belong to which locale: return only the pages of `locale` when the pages
+are language-specific (`/cs/…` in cs, the rest in en), so no page is judged
+in the wrong language.
+
 Pages are deduplicated. External URLs are allowed (e.g. an old domain).
 `{locale}` in any source string is replaced by the walked locale. This is
 how one sitemap with every language is split:

package/src/cli.mjs

@@ -98,7 +98,8 @@ Run
 
 Results
   evaluate                          Deterministic checks + semantic evaluator (default JEV) for all captures
-  evaluate --recheck [--steps a,b]  After a scenario fix: re-run deterministic checks on the stored HTML (no walk);
+  evaluate --recheck [--steps a,b]  After a scenario change: re-run deterministic checks on the stored HTML and ask
+                                    the semantic questions again on the stored captures (no walk);
                                     console, overflow and performance keep their live result
   build                             Write run.json and the local preview (index.html)
   preview                           Build and print the preview path
@@ -213,8 +214,8 @@ const list = (v) => (typeof v === 'string' ? v.split(',').map((s) => s.trim()).f
 const say = (...m) => console.log(...m)
 
 async function context (args) {
-  const { config, root } = await loadConfig(process.cwd(), args.config)
-  return { config, root }
+  const { config, root, file } = await loadConfig(process.cwd(), args.config)
+  return { config, root, file }
 }
 
 async function runContext (args) {
@@ -936,7 +937,7 @@ const commands = {
       for (const x of report.skipped) { const [where, ...why] = x.split(': '); const k = why.join(': '); byReason.set(k, [...(byReason.get(k) || []), where]) }
       say(`Semantic criteria not evaluated:\n  - ${[...byReason].slice(0, 8).map(([why, where]) => `${where.length > 1 ? `${where.length} captures (${where.slice(0, 3).join(', ')}${where.length > 3 ? ', …' : ''})` : where[0]}: ${why}`).join('\n  - ')}`)
     }
-    if (report.outdated.length) say(`Criteria changed after capture of ${report.outdated.join(', ')}: not evaluated. Run "kaloko evaluate --recheck --steps ${report.outdated.join(',')}" (deterministic, from the stored HTML) or walk those steps again.`)
+    if (report.outdated.length) say(`Criteria changed after capture of ${report.outdated.join(', ')}: not evaluated. Run "kaloko evaluate --recheck --steps ${report.outdated.join(',')}": it rechecks the stored captures against the new criteria, deterministic and semantic, without walking again.`)
   },
 
   async build (args) {
@@ -1370,8 +1371,8 @@ const commands = {
   },
 
   async doctor (args) {
-    const { config, root } = await context(args)
-    const r = await doctor({ config, root, fix: !!args.fix })
+    const { config, root, file } = await context(args)
+    const r = await doctor({ config, root, file, fix: !!args.fix })
     say(args.json ? JSON.stringify(r, null, 2) : formatDoctor(r))
     if (!r.ok) process.exitCode = 1
   },

package/src/lib/capture.mjs

@@ -189,7 +189,7 @@ export async function captureStep ({ page, node, locale, viewports, run, console
       ...extra,
       http_status: extra.http_status ?? result.http_status ?? null,
       capture: { format: String(image).split('.').pop(), scale: opts.scale, masked: opts.mask.length, annotations, ...(opts.fullPage ? {} : { full_page: false }) },
-      ...(item ? { item: { id: item.id, path: item.path, ...(item.title ? { title: item.title } : {}) } } : {}),
+      ...(item ? { item: { id: item.id, path: item.path, ...(item.title ? { title: item.title } : {}), ...(item.purpose ? { purpose: item.purpose } : {}) } } : {}),
       ...(fields ? { fields: { ...(await page.evaluate(readFields, fields).catch(() => ({}))), ...(fields.some((f) => (f.from || f.id) === 'http') ? Object.fromEntries(fields.filter((f) => (f.from || f.id) === 'http').map((f) => [f.id, extra.http_status ?? result.http_status ?? null])) : {}) } } : {}),
       files: { png: relative(run.dir, image), image: relative(run.dir, image), thumb: thumbWritten ? relative(run.dir, thumb) : null, html: relative(run.dir, html) }
     }
@@ -252,6 +252,7 @@ export async function networkChecks (page, criteria, url, { run = null, locale =
     const doc = await page.evaluate((sels) => ({
       lang: document.documentElement.getAttribute('lang') || '',
       alternates: [...document.querySelectorAll("link[rel~='alternate'][hreflang][href]")].map((l) => ({ hreflang: l.getAttribute('hreflang').toLowerCase(), href: l.href })),
+      canonical: document.querySelector("link[rel='canonical'][href]")?.href || null,
       links: Object.fromEntries(sels.map((sel) => [sel, (() => { try { return [...document.querySelectorAll(sel)].map((a) => a.href).filter(Boolean) } catch { return [] } })()]))
     }), [...new Set(todo.filter((c) => c.check.assert === 'links_ok').map((c) => c.check.selector || 'a[href]'))]).catch(() => null)
     for (const c of todo) {
@@ -259,7 +260,7 @@ export async function networkChecks (page, criteria, url, { run = null, locale =
       try {
         out[c.id] = c.check.assert === 'links_ok'
           ? await checkLinks({ links: doc.links[c.check.selector || 'a[href]'] || [], pageUrl: url, get, max: c.check.max ?? undefined, exclude: c.check.pattern || null })
-          : await checkHreflang({ alternates: doc.alternates, pageUrl: url, lang: doc.lang, get, min: c.check.min ?? 2 })
+          : await checkHreflang({ alternates: doc.alternates, pageUrl: url, canonical: doc.canonical, lang: doc.lang, get, min: c.check.min ?? 2 })
       } catch (error) { out[c.id] = { ok: false, evidence: `check error: ${error.message}` } }
     }
   } finally { await request.dispose().catch(() => {}) }

package/src/lib/doctor.mjs

@@ -32,14 +32,14 @@ async function reach (url, fetchImpl, ms = 6000, headers = {}) {
  * @param {Function} [o.launchChrome] async () => { version } — throws when Chrome is missing
  * @param {object} [o.env] process.env
  */
-export async function doctor ({ config, root, fetchImpl = fetch, launchChrome = defaultLaunch, env = process.env, fix = false }) {
+export async function doctor ({ config, root, file = null, fetchImpl = fetch, launchChrome = defaultLaunch, env = process.env, fix = false }) {
   const checks = []
   const add = (name, ok, detail = '', hint = '') => checks.push({ name, ok, detail, hint })
 
   const major = Number(process.versions.node.split('.')[0])
   add('node', major >= 20, `Node ${process.versions.node}`, major >= 20 ? '' : 'Kaloko needs Node 20 or newer.')
 
-  add('config', true, `${root}/qawalk.config.yml · org ${config.org || '—'} · ${Object.keys(config.environments || {}).length} environments`)
+  add('config', true, `${file || `${root}/kaloko.config.yml`} · org ${config.org || '—'} · ${Object.keys(config.environments || {}).length} environments`)
   if (!config.org) add('org', false, 'no org in config', 'Set org: <slug> (the organization slug from kaloko.app).')
 
   try { const c = await launchChrome(config); add('chrome', true, c.version ? `Chrome ${c.version}` : 'Chrome found') } catch (e) { add('chrome', false, e.message.split('\n')[0].slice(0, 160), config.browser?.channel ? 'Install Google Chrome, or remove browser.channel to use bundled Chromium (npx playwright install chromium).' : 'Run: npx playwright install chromium') }

package/src/lib/jev.mjs

@@ -10,11 +10,13 @@ export const DEFAULTS = { hosted: true, signals: true, concurrency: 6, model: 'j
  * does not count them against the allowance).
  */
 export const SIGNALS = {
-  _purpose: (node) => node.purpose ? 'Does `page` do what `screen_purpose` says this screen must achieve?' : null,
+  _purpose: (node, capture) => purposeOf(node, capture) ? 'Does `page` do what `screen_purpose` says this screen must achieve?' : null,
   _language: (node, capture) => capture.locale ? `Is the visible text of \`page\` mainly in the language with code "${capture.locale}"?` : null,
   _broken: () => 'Does `page` look broken: an error message, placeholder text (lorem ipsum, TODO, {{variables}}), missing content or a blank page?'
 }
 export const SIGNAL_NAMES = { _purpose: 'purpose', _language: 'language', _broken: 'broken' }
+/** What the captured page must achieve: a stack page's own purpose (items: { purpose }) before the step's. */
+export const purposeOf = (node, capture) => capture?.item?.purpose || node.purpose || ''
 
 /** Builds the JEV request for one capture: one `noul` question per semantic criterion, plus the quick signals. */
 export function buildRequest ({ node, capture, criteria, model, signals = false }) {
@@ -37,7 +39,7 @@ export function buildRequest ({ node, capture, criteria, model, signals = false
     }
   }
   const state = {
-    screen_purpose: node.purpose || '',
+    screen_purpose: purposeOf(node, capture),
     url: capture.url,
     locale: capture.locale,
     viewport: capture.viewport,

package/src/lib/linkcheck.mjs

@@ -69,16 +69,18 @@ export async function checkLinks ({ links, pageUrl, get, max = DEFAULT_MAX_LINKS
  * Fails when there are fewer than `min` languages, when the page's own language does not point to the page, or
  * when another language version does not answer 200 or does not link back to the page.
  */
-export async function checkHreflang ({ alternates, pageUrl, lang, get, min = 2 }) {
+export async function checkHreflang ({ alternates, pageUrl, canonical = null, lang, get, min = 2 }) {
   const problems = []
   const langs = alternates.filter((a) => a.hreflang !== 'x-default')
   if (new Set(langs.map((a) => a.hreflang)).size < min) problems.push(`${new Set(langs.map((a) => a.hreflang)).size} hreflang language(s), expected ${min}`)
-  const self = normUrl(pageUrl)
+  // the page's identity is its canonical address (hreflang must match it); tracking or variant parameters in the
+  // walked URL (?v=, utm_*) do not make it another page
+  const self = normUrl(canonical || pageUrl)
   const primary = String(lang || '').toLowerCase().split('-')[0]
   const own = langs.find((a) => a.hreflang === String(lang || '').toLowerCase()) || langs.find((a) => a.hreflang.split('-')[0] === primary)
   if (!primary) problems.push('html lang is not set, so the page\'s own hreflang cannot be identified')
   else if (!own) problems.push(`no hreflang for the page's own language "${lang}"`)
-  else if (normUrl(own.href) !== self) problems.push(`hreflang ${own.hreflang} points to ${own.href}, not to this page (${pageUrl})`)
+  else if (normUrl(own.href) !== self) problems.push(`hreflang ${own.hreflang} points to ${own.href}, not to this page (${canonical || pageUrl})`)
   for (const alt of langs) {
     if (alt === own) continue
     if (actionLink(new URL(alt.href))) { problems.push(`${alt.hreflang} version ${alt.href} looks like an action link; not fetched`); continue }

package/src/lib/stack.mjs

@@ -34,18 +34,18 @@ export function sitemapLocs (xml) {
   return { index: /<sitemapindex[\s>]/i.test(xml), locs }
 }
 
-/** Reads a list file: text (one per line), CSV (first column) or JSON ([path] or [{path|url, title, key}]). */
+/** Reads a list file: text (one per line), CSV (first column) or JSON ([path] or [{path|url, title, key, purpose}]). */
 export async function listFile (file) {
   const text = await readFile(file, 'utf8').catch(() => { throw new UserError(`items.file ${file} cannot be read.`) })
   if (extname(file) === '.json') {
     const data = JSON.parse(text)
-    return (Array.isArray(data) ? data : data.items || []).map((x) => (typeof x === 'string' ? { path: x } : { path: x.path || x.url, title: x.title, key: x.key }))
+    return (Array.isArray(data) ? data : data.items || []).map((x) => (typeof x === 'string' ? { path: x } : { path: x.path || x.url, title: x.title, key: x.key, purpose: x.purpose }))
   }
   return text.split(/\r?\n/).map((l) => l.trim()).filter((l) => l && !l.startsWith('#')).map((l) => ({ path: extname(file) === '.csv' ? l.split(/[,;]/)[0].replace(/^"|"$/g, '') : l })).filter((x) => x.path && !/^(path|url)$/i.test(x.path))
 }
 
 /**
- * The pages of a stack step, deduplicated, filtered (match/exclude), limited: [{ id, path, url, title? }].
+ * The pages of a stack step, deduplicated, filtered (match/exclude), limited: [{ id, path, url, title?, purpose? }].
  * `base` is the environment's URL for the locale; `page` is used for crawl and script sources. `match` and
  * `exclude` are regexes on the path with its query; `{locale}` in any source string is the walked locale.
  */
@@ -79,7 +79,7 @@ export async function resolveItems ({ node, base, page, scenarioDir, env, locale
     const fn = mod.default || mod.items
     if (typeof fn !== 'function') throw new UserError(`items.script ${src.script} must export a default function.`)
     raw = (await fn({ page, env, locale, url: abs })) || []
-    raw = raw.map((x) => (typeof x === 'string' ? { path: x } : { path: x.path || x.url, title: x.title, key: x.key }))
+    raw = raw.map((x) => (typeof x === 'string' ? { path: x } : { path: x.path || x.url, title: x.title, key: x.key, purpose: x.purpose }))
   }
   const match = src.match ? new RegExp(src.match) : null
   const exclude = src.exclude ? new RegExp(src.exclude) : null
@@ -93,7 +93,8 @@ export async function resolveItems ({ node, base, page, scenarioDir, env, locale
     if (exclude && exclude.test(test)) continue
     if (seen.has(path)) continue
     seen.add(path)
-    out.push({ id: r.key ? itemId(String(r.key), taken) : itemId(path, taken), path, url: path.startsWith('http') ? path : toUrl(path), ...(r.title ? { title: r.title } : {}) })
+    // `purpose` of an item (what this one page must achieve) replaces the step's purpose for the evaluator
+    out.push({ id: r.key ? itemId(String(r.key), taken) : itemId(path, taken), path, url: path.startsWith('http') ? path : toUrl(path), ...(r.title ? { title: r.title } : {}), ...(r.purpose ? { purpose: String(r.purpose).slice(0, 500) } : {}) })
     if (out.length >= max) break
   }
   return { items: out, total: seen.size, truncated: out.length >= max && raw.length > out.length }

package/viewer/index.html

@@ -6,16 +6,21 @@
 <meta name="robots" content="noindex">
 <title>Kaloko</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap">
 <style>
+@font-face{font-family:"Instrument Sans Fallback";src:local("Arial");font-weight:400;size-adjust:99.9%;ascent-override:97%;descent-override:25%;line-gap-override:0%}
+@font-face{font-family:"Instrument Sans Fallback";src:local("Arial Bold"),local("Arial");font-weight:600;size-adjust:96.9%;ascent-override:100%;descent-override:26%;line-gap-override:0%}
+@font-face{font-family:"Instrument Sans Fallback";src:local("Arial Bold"),local("Arial");font-weight:700;size-adjust:98.1%;ascent-override:99%;descent-override:25%;line-gap-override:0%}
 :root{
   --ground:#ecece8; --dots:#c9c9c3; --panel:#ffffff; --panel-2:#f5f5f2;
   --ink:#151514; --muted:#6a6a64; --line:#d7d7d1; --line-strong:#151514;
   --accent:#ffe452; --accent-ink:#151514;
   --pass:#1d8249; --fail:#c8102e; --partial:#b86e00; --skip:#8d8d86;
   --pass-bg:#e3f3e9; --fail-bg:#fbe5e8; --partial-bg:#fbf0dc; --skip-bg:#ececea;
+  --pass-ink:#176f3b; --fail-ink:#b40f2a; --partial-ink:#8f5500; --skip-ink:#5f5f59;
   --edge:#55554f; --shadow:0 1px 2px rgba(20,20,18,.08),0 8px 24px rgba(20,20,18,.08);
-  --sans:"Instrument Sans","Helvetica Neue",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
+  --sans:"Instrument Sans","Instrument Sans Fallback","Helvetica Neue",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
   --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
 }
 @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
@@ -24,6 +29,7 @@
   --ink:#f0f0ec; --muted:#9d9d96; --line:#35352f; --line-strong:#f0f0ec;
   --pass:#52c784; --fail:#ff6070; --partial:#f0a83c; --skip:#8d8d86;
   --pass-bg:#18311f; --fail-bg:#3a1a1f; --partial-bg:#372a14; --skip-bg:#2a2a27;
+  --pass-ink:#52c784; --fail-ink:#ff6070; --partial-ink:#f0a83c; --skip-ink:#a9a9a2;
   --edge:#8a8a83; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
 }}
 :root[data-theme="dark"]{
@@ -32,6 +38,7 @@
   --ink:#f0f0ec; --muted:#9d9d96; --line:#35352f; --line-strong:#f0f0ec;
   --pass:#52c784; --fail:#ff6070; --partial:#f0a83c; --skip:#8d8d86;
   --pass-bg:#18311f; --fail-bg:#3a1a1f; --partial-bg:#372a14; --skip-bg:#2a2a27;
+  --pass-ink:#52c784; --fail-ink:#ff6070; --partial-ink:#f0a83c; --skip-ink:#a9a9a2;
   --edge:#8a8a83; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
 }
 html,body{height:100%}
@@ -53,7 +60,7 @@ button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(
 .pop{left:auto;right:0;min-width:280px;gap:12px;padding:12px}.pop .ctl{display:grid;gap:4px}.pop .seg-label{position:static!important;width:auto!important;height:auto!important;clip:auto!important;overflow:visible!important}.pop select{width:100%}
 .inbox-btn{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:inherit;text-decoration:none;padding:4px 8px;border-radius:999px}.inbox-btn:hover{background:var(--panel-2)}.inbox-btn b{background:var(--partial);color:#151514;border-radius:999px;padding:0 6px;font-size:11px}
 #viewBtn{position:relative}.dot-on{position:absolute;top:3px;right:3px;width:7px;height:7px;border-radius:50%;background:var(--accent,#ffe452);box-shadow:0 0 0 2px var(--panel)}
-.pmenu{left:auto;right:0}.pmenu button{all:unset;cursor:pointer;padding:6px 8px;border-radius:6px;font-size:13px}.pmenu button:hover{background:var(--panel-2)}.pmenu-btn{all:unset;cursor:pointer;font-size:12px;color:var(--muted);padding:2px 6px;border-radius:999px;border:1px solid var(--line)}
+.pmenu{left:auto;right:0}.pmenu button{all:unset;cursor:pointer;padding:6px 8px;border-radius:6px;font-size:13px}.pmenu button:hover{background:var(--panel-2)}.pmenu-btn{all:unset;cursor:pointer;font-size:12px;color:var(--muted);padding:2px 6px;border-radius:999px;border:1px solid var(--line);min-width:24px;min-height:24px;box-sizing:border-box;text-align:center}
 .helppop{min-width:320px;font-size:13px}.helppop .kbd{margin-right:4px}.helppop ul{margin:0;padding:0 0 0 2px;list-style:none;display:grid;gap:4px}
 .bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--line-strong);position:relative;z-index:5}
 .brand{display:flex;align-items:baseline;gap:10px;font-weight:700;letter-spacing:-.01em;font-size:15px}
@@ -61,6 +68,8 @@ button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(
 .task{display:flex;flex-direction:column;min-width:0}
 .task b{font-size:14px;font-weight:600}
 .task span{font-family:var(--mono);font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+/* the bar keeps its height while the run loads: empty title lines and switches hold their place (no layout shift) */
+.task b:empty::before,.task span:empty::before{content:"\00a0"}.bar .seg:empty{min-height:29px}
 .spacer{flex:1}
 .seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:2px;background:var(--panel-2)}
 .seg button{padding:3px 11px;border-radius:999px;font-size:12.5px;font-weight:500;color:var(--muted)}
@@ -116,12 +125,12 @@ svg.i{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stro
 .av{width:20px;height:20px;border-radius:50%;display:inline-grid;place-items:center;font-size:9.5px;font-weight:700;background:var(--panel-2);border:1px solid var(--line);flex:none}
 a.pr{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:2px}
 a.pr:hover{text-decoration-color:var(--ink)}
-.prstate{font-size:10.5px;font-weight:600;padding:0 5px;border-radius:4px;background:var(--pass-bg);color:var(--pass);margin-left:4px}
+.prstate{font-size:10.5px;font-weight:600;padding:0 5px;border-radius:4px;background:var(--pass-bg);color:var(--pass-ink);margin-left:4px}
 .prstate--merged{background:var(--skip-bg);color:var(--muted)}
 .run__env{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:1px 6px;border-radius:4px;background:var(--skip-bg);color:var(--muted);white-space:nowrap}
-.run__env--staging{background:var(--partial-bg);color:var(--partial)}
-.run__env--production{background:var(--fail-bg);color:var(--fail)}
-.run__env--review{background:var(--pass-bg);color:var(--pass)}
+.run__env--staging{background:var(--partial-bg);color:var(--partial-ink)}
+.run__env--production{background:var(--fail-bg);color:var(--fail-ink)}
+.run__env--review{background:var(--pass-bg);color:var(--pass-ink)}
 .bar5{display:flex;height:5px;border-radius:3px;overflow:hidden;background:var(--skip-bg);min-width:60px}
 .bar5 i{display:block}
 .steps{list-style:none;margin:0;padding:0 8px 16px}
@@ -166,6 +175,8 @@ table.matrix{border-collapse:collapse;width:100%;font-size:12.5px}
 select,input[type="search"]{font:inherit;font-size:12.5px;padding:4px 8px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink)}
 input[type="search"]:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--ink)}
 .note{font-size:12px;color:var(--muted);margin:0}
+.btn--primary .note{color:#4a4a45}
+.cmpchip{display:inline-flex;align-items:center;gap:4px;font-size:12px;padding:2px 2px 2px 10px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line);white-space:nowrap;max-width:280px;overflow:hidden}.cmpchip>span{overflow:hidden;text-overflow:ellipsis}.cmpchip .icon-btn{width:24px;height:24px}
 .note code{font-family:var(--mono);font-size:11px}
 
 /* semantic evaluation on node */
@@ -180,7 +191,7 @@ input[type="search"]:focus-visible,select:focus-visible{outline:2px solid var(--
 .jev__c b{font-family:var(--mono);font-weight:500;font-size:10.5px;color:var(--muted)}
 .jev__c .ok{color:var(--muted)}
 .jev pre{margin:0;border-top:1px solid var(--line);padding:7px 8px;font-family:var(--mono);font-size:10.5px;line-height:1.45;max-height:190px;overflow:auto;white-space:pre;background:var(--panel);cursor:text;width:338px}
-.json .k{color:var(--muted)}.json .s{color:var(--pass)}.json .n{color:var(--partial)}
+.json .k{color:var(--muted)}.json .s{color:var(--pass-ink)}.json .n{color:var(--partial-ink)}
 
 /* browser: scenarios and runs */
 .br{position:fixed;inset:0;z-index:25;background:rgba(12,12,11,.5);display:flex;justify-content:center;align-items:flex-start;padding:clamp(0px,6vh,64px) clamp(0px,3vw,32px)}
@@ -254,6 +265,8 @@ body.embed .helpwrap{display:none}
 .lane-head{position:absolute;left:16px;top:-30px;font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;display:flex;gap:10px;align-items:baseline}
 .lane-head small{font-size:12px;font-weight:500;color:var(--muted)}
 .world.far .jev,.world.far .node__foot{visibility:hidden}
+/* comparing runs: the pixel difference stays readable when the whole flow is in view */
+.world.far .node__foot .pxd{visibility:visible;font-size:calc(10.5px * min(var(--inv,1), 2.4))}
 /* thumbnails stay while they are still recognisable; below that they would only be a few pixels to decode and paint */
 .world.tiny .shots img{visibility:hidden}
 .world.far .node{outline:6px solid transparent}.world.far .node.st-pass{outline-color:color-mix(in srgb,var(--pass) 55%,transparent)}.world.far .node.st-fail{outline-color:color-mix(in srgb,var(--fail) 55%,transparent)}.world.far .node.st-partial{outline-color:color-mix(in srgb,var(--partial) 55%,transparent)}
@@ -261,7 +274,7 @@ body.embed .helpwrap{display:none}
 .world.far .node.st-pass{background:color-mix(in srgb,var(--pass) 22%,var(--panel))}.world.far .node.st-fail{background:color-mix(in srgb,var(--fail) 28%,var(--panel))}.world.far .node.st-partial{background:color-mix(in srgb,var(--partial) 28%,var(--panel))}
 .world.far .node__title{font-size:calc(12px * min(var(--inv,1), 2.4));line-height:1.1}
 .steps h3[data-lane]{cursor:pointer}
-.mail-old{color:var(--fail);font-weight:600;font-size:12px}
+.mail-old{color:var(--fail-ink);font-weight:600;font-size:12px}
 .presence{display:flex;align-items:center;gap:4px;margin-left:6px}
 .presence .pav{width:26px;height:26px;border-radius:50%;border:2px solid var(--panel);background:var(--c);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;cursor:pointer;padding:0;margin-left:-6px;box-shadow:0 0 0 1px var(--line)}
 .presence .pav[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink)}
@@ -307,7 +320,7 @@ body.embed .helpwrap{display:none}
 .si-row:hover,.si-row.is-sel{background:var(--panel-2)}.si-row img,.si-card img,.si-row .ph,.si-card .ph{width:96px;height:58px;object-fit:cover;object-position:top;border:1px solid var(--line);border-radius:3px;background:var(--panel-2)}
 .si-row .t{min-width:0}.si-row .t b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.si-row .t small{display:block;color:var(--muted);font-family:var(--mono,monospace);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .si-row .f{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}.si-row .f.num{font-family:var(--mono,monospace);text-align:right}
-.si-fails{display:flex;gap:4px;flex-wrap:wrap}.si-fails span{font-size:11px;font-weight:700;border-radius:4px;padding:1px 5px;background:color-mix(in srgb,var(--fail) 16%,transparent);color:var(--fail)}.si-fails i{font-style:normal;font-weight:500;opacity:.75;margin-left:4px}.si-fails span.rv{background:color-mix(in srgb,var(--partial) 16%,transparent);color:var(--partial)}
+.si-fails{display:flex;gap:4px;flex-wrap:wrap}.si-fails span{font-size:11px;font-weight:700;border-radius:4px;padding:1px 5px;background:color-mix(in srgb,var(--fail) 16%,transparent);color:var(--fail-ink)}.si-fails i{font-style:normal;font-weight:500;opacity:.75;margin-left:4px}.si-fails span.rv{background:color-mix(in srgb,var(--partial) 16%,transparent);color:var(--partial-ink)}
 .si-headrow{display:grid;grid-template-columns:104px minmax(140px,2fr) 96px var(--si-cols,repeat(3,minmax(48px,1fr))) minmax(80px,1fr);gap:10px;padding:6px 18px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border-bottom:1px solid var(--line);background:var(--panel-2)}.si-headrow button{all:unset;cursor:pointer}.si-headrow button.num{text-align:right}.si-headrow button[aria-sort]{color:var(--ink);font-weight:700}
 .si-card{position:absolute;width:220px;height:198px;border:1px solid var(--line);border-radius:6px;background:var(--panel);padding:8px;text-align:left;font:inherit;color:var(--ink);cursor:pointer;display:grid;grid-template-rows:auto auto auto;gap:4px}
 .si-card img,.si-card .ph{width:100%;height:120px}.si-card b{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.si-card small{color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@@ -322,10 +335,10 @@ body.embed .helpwrap{display:none}
 .http{font-family:var(--mono);font-size:10.5px;font-weight:600;padding:1px 5px;border-radius:4px;background:var(--ink);color:var(--panel);margin-right:5px;vertical-align:1px}.http--5{background:var(--fail)}
 .node__path{font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .badge{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;padding:2px 7px;border-radius:999px;white-space:nowrap;font-variant-numeric:tabular-nums;flex:none}
-.badge.st-pass{background:var(--pass-bg);color:var(--pass)}
-.badge.st-fail{background:var(--fail-bg);color:var(--fail)}
-.badge.st-partial{background:var(--partial-bg);color:var(--partial)}
-.badge.st-skip{background:var(--skip-bg);color:var(--skip)}
+.badge.st-pass{background:var(--pass-bg);color:var(--pass-ink)}
+.badge.st-fail{background:var(--fail-bg);color:var(--fail-ink)}
+.badge.st-partial{background:var(--partial-bg);color:var(--partial-ink)}
+.badge.st-skip{background:var(--skip-bg);color:var(--skip-ink)}
 /* the status stripe is the card's own top border, so it follows the rounded corners */
 .node::before{content:"";position:absolute;inset:-1px;border-radius:inherit;border-top:3px solid var(--skip);pointer-events:none}
 .node.st-pass::before{border-top-color:var(--pass)}.node.st-fail::before{border-top-color:var(--fail)}.node.st-partial::before{border-top-color:var(--partial)}
@@ -336,15 +349,15 @@ body.embed .helpwrap{display:none}
 /* phones only: the phone screenshot is the card, large enough to read and to keep titles on few lines */
 .shots--mbig .shot--m{width:180px;height:390px;border-radius:14px}.node:has(.shots--mbig){min-width:220px}
 .shot__in{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none}
-.shot__tag{position:absolute;right:4px;bottom:4px;font-size:9.5px;font-family:var(--mono);background:rgba(21,21,20,.72);color:#fff;padding:0 4px;border-radius:3px}
+.shot__tag{position:absolute;right:4px;bottom:4px;font-size:9.5px;font-family:var(--mono);background:#151514;color:#fff;padding:0 4px;border-radius:3px}
 .shots:hover .shot{border-color:var(--ink)}
 .node__foot{display:flex;align-items:center;gap:8px;padding:8px 10px 9px;color:var(--muted);font-size:11.5px}
 .att{display:inline-flex;align-items:center;gap:3px}
 .delta{margin-left:auto;font-size:11px;font-weight:600;padding:1px 6px;border-radius:4px;background:var(--accent);color:var(--accent-ink)}
 .loc-dots{display:inline-flex;gap:3px;align-items:center}
 .loc-dots span{font-family:var(--mono);font-size:10px;padding:0 3px;border-radius:3px;border:1px solid var(--line)}
-.loc-dots span.st-fail{border-color:var(--fail);color:var(--fail)}
-.loc-dots span.st-partial{border-color:var(--partial);color:var(--partial)}
+.loc-dots span.st-fail{border-color:var(--fail);color:var(--fail-ink)}
+.loc-dots span.st-partial{border-color:var(--partial);color:var(--partial-ink)}
 
 .node--decision{display:flex;align-items:center;gap:10px;padding:12px 14px;width:210px;border-style:dashed;border-color:var(--edge);background:var(--panel-2);box-shadow:none}
 .node--decision::before{display:none}
@@ -375,13 +388,13 @@ body.embed .helpwrap{display:none}
 .lb__nav{display:flex;gap:6px;margin-left:auto}
 .sec{padding:14px 18px;border-bottom:1px solid var(--line)}
 .sec h4{margin:0 0 8px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:6px}
-.purpose{margin:0;max-width:62ch}
-.sigb{font-size:11px;font-weight:700;color:var(--partial);background:var(--partial-bg);border-radius:4px;padding:0 5px}
-.sigs{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:12.5px}.sigs li{display:grid;grid-template-columns:1fr 90px 64px;gap:8px;align-items:center}.sigs li.bad{color:var(--partial);font-weight:600}.gauge--sig{background:var(--skip-bg)}
+.purpose{margin:0;max-width:41.3em}
+.sigb{font-size:11px;font-weight:700;color:var(--partial-ink);background:var(--partial-bg);border-radius:4px;padding:0 5px}
+.sigs{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:12.5px}.sigs li{display:grid;grid-template-columns:1fr 90px 64px;gap:8px;align-items:center}.sigs li.bad{color:var(--partial-ink);font-weight:600}.gauge--sig{background:var(--skip-bg)}
 .fixhelp{grid-column:2;font-size:12.5px;margin-top:4px;padding:6px 8px;border-radius:6px;background:var(--panel-2)}.fixhelp p{margin:0 0 3px}.fixhelp p:last-child{margin:0}details.fixhelp{background:none;padding:0}details.fixhelp summary{cursor:pointer;color:var(--muted);font-size:11.5px}
 .ev--text{display:block;grid-column:2;font-size:12.5px;padding:4px 8px;border-radius:6px;background:var(--panel-2)}
 .lbtabs{display:flex;gap:2px;padding:6px 16px 0;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);z-index:2}.lbtabs button{padding:8px 10px;font-size:12.5px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}.lbtabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
-.account{font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted);margin-left:6px}.st-fail-t{color:var(--fail)}
+.account{font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted);margin-left:6px}.st-fail-t{color:var(--fail-ink)}
 .ac li .acbody{grid-column:2;display:grid;gap:4px}.where--go{justify-self:start;text-decoration:underline;color:var(--ink)}.ac li.st-pass:not(.is-on) .acbody{display:none}.ac li.st-pass{padding:5px 8px}.ac li.st-pass:not(.is-on){cursor:pointer}
 .clog{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px;max-height:420px;overflow:auto}.clog li{position:relative;background:#151514;color:#e8e8e2;border-radius:6px}.clog pre{margin:0;padding:8px 34px 8px 10px;font:12px/1.5 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;max-height:220px;overflow:auto}
 .clog__copy{position:absolute;top:4px;right:4px;width:24px;height:24px;display:grid;place-items:center;border-radius:4px;color:#bdbdb6;opacity:.7}.clog__copy:hover{opacity:1;background:rgba(255,255,255,.1)}.clog__all{float:right;font-size:11.5px;padding:2px 8px;text-transform:none;letter-spacing:0}
@@ -395,10 +408,10 @@ body.embed .helpwrap{display:none}
 .ac li{display:grid;grid-template-columns:22px 1fr;gap:2px 8px;padding:8px;border-radius:6px;border:1px solid var(--line)}
 .ac li:hover{border-color:var(--ink)}
 .ac .mark{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700}
-.ac .st-pass .mark,.ac li.st-pass .mark{background:var(--pass-bg);color:var(--pass)}
-.ac li.st-fail .mark{background:var(--fail-bg);color:var(--fail)}
-.ac li.st-partial .mark{background:var(--partial-bg);color:var(--partial)}
-.ac li.st-skip .mark{background:var(--skip-bg);color:var(--skip)}
+.ac .st-pass .mark,.ac li.st-pass .mark{background:var(--pass-bg);color:var(--pass-ink)}
+.ac li.st-fail .mark{background:var(--fail-bg);color:var(--fail-ink)}
+.ac li.st-partial .mark{background:var(--partial-bg);color:var(--partial-ink)}
+.ac li.st-skip .mark{background:var(--skip-bg);color:var(--skip-ink)}
 .ac .id{font-family:var(--mono);font-size:11px;color:var(--muted);margin-right:4px}
 .ac .ev{grid-column:2;font-family:var(--mono);font-size:11px;color:var(--muted);background:var(--panel-2);padding:4px 6px;border-radius:4px;overflow-wrap:anywhere}
 .files{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
@@ -407,7 +420,7 @@ body.embed .helpwrap{display:none}
 .file__prev{height:74px;background:var(--panel-2);position:relative;overflow:hidden;display:grid;place-items:center;color:var(--muted)}
 .file__name{font-size:11.5px;padding:5px 7px;display:flex;gap:5px;align-items:center;line-height:1.25}
 pre.json{margin:0;font-family:var(--mono);font-size:11.5px;line-height:1.5;background:var(--panel-2);border-radius:6px;padding:10px;overflow:auto;max-height:280px;white-space:pre}
-.json .k{color:var(--muted)}.json .s{color:var(--pass)}.json .n{color:var(--partial)}
+.json .k{color:var(--muted)}.json .s{color:var(--pass-ink)}.json .n{color:var(--partial-ink)}
 details summary{cursor:pointer;font-size:12.5px;font-weight:500}
 .kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:12.5px;margin:0}
 .kv dt{color:var(--muted)}.kv dd{margin:0;font-family:var(--mono);font-size:11.5px;overflow-wrap:anywhere}
@@ -448,9 +461,9 @@ details summary{cursor:pointer;font-size:12.5px;font-weight:500}
 .md tr.flash td{animation:mdflash 1.6s ease-out}
 @keyframes mdflash{0%{background:rgba(255,228,82,.7)}100%{background:transparent}}
 .md tr.st-fail td{background:var(--fail-bg)}
-.md tr.st-pass td:first-child{color:var(--pass)}
+.md tr.st-pass td:first-child{color:var(--pass-ink)}
 .md .acb{display:inline-block;font-family:var(--mono);font-size:10px;padding:0 4px;border-radius:3px;margin-left:6px;vertical-align:1px}
-.md .acb.st-pass{background:var(--pass-bg);color:var(--pass)}.md .acb.st-fail{background:var(--fail-bg);color:var(--fail)}.md .acb.st-partial{background:var(--partial-bg);color:var(--partial)}
+.md .acb.st-pass{background:var(--pass-bg);color:var(--pass-ink)}.md .acb.st-fail{background:var(--fail-bg);color:var(--fail-ink)}.md .acb.st-partial{background:var(--partial-bg);color:var(--partial-ink)}
 .md pre{margin:0;padding:8px 10px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;max-height:260px;overflow:auto;background:var(--panel-2)}
 .md .h{display:block;font-size:12px;padding:3px 10px;border-top:1px solid var(--line)}
 .md .h i{font-style:normal;font-family:var(--mono);color:var(--muted);font-size:10.5px;margin-right:6px}
@@ -463,8 +476,8 @@ details summary{cursor:pointer;font-size:12.5px;font-weight:500}
 /* compare mode */
 #cmpSel{max-width:220px}
 .pxd{font-family:var(--mono);font-size:10.5px;font-weight:500;padding:1px 5px;border-radius:4px;background:var(--skip-bg);color:var(--muted);white-space:nowrap}
-.pxd.lv1{background:var(--partial-bg);color:var(--partial)}.pxd.lv2{background:var(--fail-bg);color:var(--fail)}.pxd.lv0{background:var(--pass-bg);color:var(--pass)}
-.cmpd{font-size:11px;font-weight:600;padding:1px 6px;border-radius:4px;background:var(--fail-bg);color:var(--fail)}
+.pxd.lv1{background:var(--partial-bg);color:var(--partial-ink)}.pxd.lv2{background:var(--fail-bg);color:var(--fail-ink)}.pxd.lv0{background:var(--pass-bg);color:var(--pass-ink)}
+.cmpd{font-size:11px;font-weight:600;padding:1px 6px;border-radius:4px;background:var(--fail-bg);color:var(--fail-ink)}
 .lb__cmp{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
 .lb__cmp figure{margin:0;min-width:0}
 .lb__cmp figcaption{font-size:11.5px;color:var(--muted);margin:0 0 6px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
@@ -474,7 +487,7 @@ details summary{cursor:pointer;font-size:12.5px;font-weight:500}
 .lb__diff canvas{display:block;max-width:100%;height:auto}
 .ac .ev--cmp{border-left:3px solid var(--partial)}
 .ac li.cmp-changed{border-color:var(--partial)}
-.ac .dl{font-family:var(--mono);font-size:10px;padding:0 4px;border-radius:3px;background:var(--partial-bg);color:var(--partial);margin-left:4px}
+.ac .dl{font-family:var(--mono);font-size:10px;padding:0 4px;border-radius:3px;background:var(--partial-bg);color:var(--partial-ink);margin-left:4px}
 @media (max-width:900px){.lb__cmp{grid-template-columns:1fr}}
 /* sessions: people in the flow */
 .sess{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;padding:1px 7px;border-radius:999px;border:1px solid var(--line);color:var(--ink);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
@@ -497,6 +510,8 @@ details summary{cursor:pointer;font-size:12.5px;font-weight:500}
 /* replay: guided walkthrough */
 .rp{position:fixed;inset:0;z-index:22;background:var(--ground);display:grid;grid-template-rows:auto 1fr auto}
 .rp__top{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--line-strong)}
+/* keyboard hints mean nothing on a touch screen */
+@media (hover:none) and (pointer:coarse){.rp__top .note{display:none}}
 .rp__top .crumbs{display:flex;align-items:center;gap:4px;flex-wrap:wrap;min-width:0;font-size:12.5px}
 .rp__top .crumbs button{padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted);background:var(--panel)}
 .rp__top .crumbs button[aria-current="step"]{background:var(--ink);color:var(--panel);border-color:var(--ink)}
@@ -522,7 +537,7 @@ details summary{cursor:pointer;font-size:12.5px;font-weight:500}
 .dbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
 .dbar .vchip{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border:1px solid var(--line);border-radius:999px;font:500 12px/1 var(--mono);color:var(--ink);text-decoration:none;white-space:nowrap;background:var(--panel)}
 .dbar .vchip[aria-current="true"]{background:var(--ink);color:var(--panel);border-color:var(--ink)}
-.dbar .vchip .ref{color:#e4a400}
+.vchip .ref{color:var(--partial-ink)}.vchip[aria-current="true"] .ref{color:inherit}
 .dbar .vchip--draft{border-style:dashed}
 #cursors{position:absolute;left:0;top:0;pointer-events:none}
 .node.is-same{opacity:.38}
@@ -593,6 +608,7 @@ details summary{cursor:pointer;font-size:12.5px;font-weight:500}
     <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>
+    <span class="cmpchip" id="cmpChip" hidden></span>
     <div class="spacer"></div>
     <div class="seg" id="modeSeg" aria-label="Layout"></div>
     <div class="seg" id="locSeg" aria-label="Locale"></div>
@@ -610,7 +626,7 @@ details summary{cursor:pointer;font-size:12.5px;font-weight:500}
     <a class="inbox-btn" id="inboxBtn" hidden></a>
     <button class="tog" id="togRight" aria-pressed="true" aria-label="Right panel: summary" title="Summary (F hides both)"><svg class="i" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="1.5"/><path d="M15 4v16"/></svg></button>
   </header>
-  <div class="main" id="main">
+  <main class="main" id="main">
     <aside class="side" id="side">
       <h2><span data-t="shownRun"></span> <button class="btn" id="allRuns" data-t="allRuns"></button></h2>
       <div class="runcard" id="runcard"></div>
@@ -637,7 +653,7 @@ details summary{cursor:pointer;font-size:12.5px;font-weight:500}
     </section>
     <section class="ri" id="ri" hidden aria-label="Index"></section>
     <aside class="rside" id="rside"></aside>
-  </div>
+  </main>
 </div>
 <div class="si" id="si" hidden role="dialog" aria-modal="true" aria-labelledby="siTitle"></div>
 <div class="lb" id="lb" hidden role="dialog" aria-modal="true" aria-labelledby="lbTitle"></div>
@@ -690,7 +706,7 @@ const I18N = {
     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:'Nesplněné 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', downloadZipNote:'Všechny soubory v otevřených formátech a plachta, 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:'Kliknutím na osobu zvýrazníte její kroky; přerušované šipky ukazují 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í',
+    compare:'Porovnat', cmpWith:'Porovnáno s', cmpStop:'Ukončit porovnání', 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: the site’s scripts removed, styles and images rehosted, secrets stripped.', 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, including the agents’. 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',
@@ -714,7 +730,7 @@ const I18N = {
     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', 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',
+    compare:'Compare', cmpWith:'Compared with', cmpStop:'Stop comparing', 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' }
 };
 const storedLang = (() => { try { return localStorage.getItem('qawalk.lang'); } catch { return null; } })();
@@ -1171,6 +1187,11 @@ function fillPixelBadges () {
   Promise.all([worker(), worker(), worker()]);
 }
 function renderCmpControl () {
+  // what the canvas is compared with stays in view, with a way out (the choice itself lives in the menu)
+  const chip = $('cmpChip');
+  chip.hidden = !S.cmp;
+  chip.innerHTML = S.cmp ? `<span>${T('cmpWith')} <b>${esc(cmpLabel())}</b></span><button type="button" class="icon-btn" id="cmpChipOff" aria-label="${esc(T('cmpStop'))}" title="${esc(T('cmpStop'))}">${ICON.close}</button>` : '';
+  if (S.cmp) $('cmpChipOff').onclick = () => loadCmp('');
   const list = cmpCandidates();
   const ctl = $('cmpCtl');
   ctl.hidden = !list.length;
@@ -1184,7 +1205,11 @@ function renderCmpControl () {
 const X0 = 80, Y0 = 90;
 // phones only: the larger phone cards are narrower and taller than the desktop pair
 const COLW = () => S.vp === 'mobile' ? 420 : 580;
-const LANEH = () => (S.jev === 'json' ? 640 : 460) + (S.vp === 'mobile' ? 240 : 0);
+// Lane height grows to the tallest card (a session chip and a three-line title made cards taller than the
+// fixed pitch, so the next lane's heading sat on them). LANE_EXTRA is measured after the cards render.
+let LANE_EXTRA = 0;
+const LANE_GAP = 96;
+const LANEH = () => (S.jev === 'json' ? 640 : 460) + (S.vp === 'mobile' ? 240 : 0) + LANE_EXTRA;
 // long flows wrap: a lane with more than WRAP + 2 columns continues in rows of WRAP steps under itself
 const WRAP = 8;
 let LANE_ROWS = null;
@@ -1243,6 +1268,9 @@ function renderNodes () {
       <div class="node__foot">${attIcons(n)}${cmtBadge(n.id)}${sigBadge(n)}<span class="loc-dots">${RUN.scope.locales.map((l) => `<span class="st-${esc(n.by_locale?.[l] || 'skip')}" title="${esc(l)}: ${esc(T(n.by_locale?.[l] || 'skip'))}">${esc(l)}</span>`).join('')}</span>${S.cmp && cmpNode(n.id) ? `<span class="pxd" data-pxd="${esc(n.id)}" title="${esc(cmpLabel())}">◐ …</span>${cmpCritChanges(n).length ? `<span class="cmpd" title="${esc(T('cmpTitle'))} ${esc(cmpLabel())}">Δ ${cmpCritChanges(n).length}</span>` : ''}` : ''}${changed && !S.cmp ? `<span class="delta" title="${esc(pr.git?.commit || '')}">Δ ${esc(T(before).toLowerCase())} → ${esc(T(n.status).toLowerCase())}</span>` : ''}${reviewState(n.id) ? `<span class="badge st-${reviewState(n.id) === 'approved' ? 'pass' : 'fail'}" style="margin-left:${changed || S.cmp ? '4px' : 'auto'}">${reviewState(n.id) === 'approved' ? '✓ ' + T('approved') : '✕ ' + T('rejected')}</span>` : ''}</div>
     </div>`;
   }).join('');
+  const tallest = Math.max(0, ...[...$('nodes').querySelectorAll('.node:not(.node--decision)')].map((el) => el.offsetHeight));
+  const need = tallest + LANE_GAP - LANEH();
+  if (need > 0 || (LANE_EXTRA > 0 && need < -LANE_GAP)) { LANE_EXTRA = Math.max(0, LANE_EXTRA + need); return renderNodes(); }
   requestAnimationFrame(() => { drawEdges(); renderMini(); });
   fillPixelBadges();
 }
@@ -2604,7 +2632,7 @@ function inspectorHtml () {
   const canEdit = isDraft() && canWrite() && APP().user?.role !== 'viewer' && LIVE.mode === null;
   const kindOf = (prop) => /color/.test(prop) ? 'color' : prop === 'font-family' ? 'font' : 'dim';
   const EDITABLE = ['color', 'background-color', 'border-color', 'font-family', 'font-size', 'border-radius', 'padding', 'margin', 'gap'];
-  const picker = (s) => { const opts = LIVE.tokens.filter((t) => t.kind === kindOf(s.prop)); return EDITABLE.includes(s.prop) && opts.length ? `<select data-edit-prop="${esc(s.prop)}"><option value="">${T('editKeep')}</option>${opts.map((t) => `<option value="${esc(`var(--${t.name.replace(/\./g, '-')}, ${t.value})`)}">${esc(t.name)} · ${esc(t.value)}</option>`).join('')}</select>` : ''; };
+  const picker = (s) => { const opts = LIVE.tokens.filter((t) => t.kind === kindOf(s.prop)); return EDITABLE.includes(s.prop) && opts.length ? `<select data-edit-prop="${esc(s.prop)}" aria-label="${esc(s.prop)}"><option value="">${T('editKeep')}</option>${opts.map((t) => `<option value="${esc(`var(--${t.name.replace(/\./g, '-')}, ${t.value})`)}">${esc(t.name)} · ${esc(t.value)}</option>`).join('')}</select>` : ''; };
   return `<div class="sec insp" id="inspSec"><h4>${T('inspect')} <span class="strategy">${esc(el.tag)} · ${el.size.join(' × ')}</span></h4><div class="anchor-note">${esc(el.selector || '')}</div><table>${el.styles.map((s) => `<tr><td>${esc(s.prop)}</td><td>${esc(s.value)}${s.token ? ` <span class="tok">${esc(s.token)}</span>` : ` <span class="raw">${T('noToken')}</span>`}${canEdit ? `<div>${picker(s)}</div>` : ''}</td></tr>`).join('')}</table>
     ${canEdit ? `<h4 style="margin-top:12px">${T('editTitle')}</h4>${el.editable ? `<label class="note" for="editText">${T('editText')}</label><input id="editText" value="${esc(el.text)}" style="width:100%;font:inherit;padding:6px;border:1px solid var(--line);border-radius:6px;margin:4px 0 8px">` : ''}<button class="btn btn--primary" id="editSave">${T('editSave')}</button> ` : ''}<button class="btn" id="copyCss" data-css="${esc(css)}" style="margin-top:8px">${T('copyCss')}</button></div>`;
 }
@@ -2677,7 +2705,7 @@ function stepStatusHtml (n) {
   const h = headOf(n); if (!h) return '';
   const opts = ['in_progress', 'ready_for_review', 'ready_for_dev'];
   const by = h.agent ? `${h.actor} ${T('viaAgent')} ${h.agent}` : h.actor;
-  return `<div class="sec"><h4>${T('stepStatus')}</h4>${canWrite() && APP().user?.role !== 'viewer' ? `<select id="stepStatus">${opts.map((o) => `<option value="${o}" ${h.status === o ? 'selected' : ''}>${T('st_' + o)}</option>`).join('')}</select>` : `<span class="stchip stchip--${esc(h.status)}">${T('st_' + h.status)}</span>`}<p class="note" style="margin-top:6px">${T('revisionBy')} <span class="mono">${esc(h.revision.slice(0, 8))}</span> · ${esc(by)} · ${fmtDate(h.updated_at)}</p></div>`;
+  return `<div class="sec"><h4>${T('stepStatus')}</h4>${canWrite() && APP().user?.role !== 'viewer' ? `<select id="stepStatus" aria-label="${esc(T('stepStatus'))}">${opts.map((o) => `<option value="${o}" ${h.status === o ? 'selected' : ''}>${T('st_' + o)}</option>`).join('')}</select>` : `<span class="stchip stchip--${esc(h.status)}">${T('st_' + h.status)}</span>`}<p class="note" style="margin-top:6px">${T('revisionBy')} <span class="mono">${esc(h.revision.slice(0, 8))}</span> · ${esc(by)} · ${fmtDate(h.updated_at)}</p></div>`;
 }
 function wireStepStatus (n) {
   const sel = $('stepStatus'); if (!sel) return;
@@ -2816,6 +2844,13 @@ async function postJson (path, body) {
   return res.json();
 }
 async function reloadRun () { const a = APP(); const res = await fetch(`${a.api}/orgs/${a.org}/runs/${a.run}`, { credentials: 'same-origin' }); if (res.ok) { RUN = await res.json(); applyReviewerVerdicts(); renderAll(); if (S.open) openLb(S.open, S.lbVp); } }
+// the panels take their size defaults before the run loads, so the canvas does not jump once it arrives
+{ // the same rule as after loading: phones and embeds without panels, the left one from 1600 px, a saved choice wins
+  let left = innerWidth >= 1600, right = true;
+  if (innerWidth <= 1100 || window.QAWALK_APP?.embed) left = right = false;
+  else { try { const p = JSON.parse(localStorage.getItem(`qawalk-panels-${innerWidth >= 1600 ? 'wide' : 'narrow'}`) || 'null'); if (p) { left = !!p.left; right = !!p.right; } } catch {} }
+  $('main').classList.toggle('no-left', !left); $('main').classList.toggle('no-right', !right);
+}
 load().then((data) => {
   RUN = data;
   requestAnimationFrame(() => setTimeout(loadDetails, 0)); // after the first paint