kaloko 0.7.1 → 0.9.0

package/src/lib/stack.mjs

@@ -66,7 +66,7 @@ export async function resolveItems ({ node, base, page, scenarioDir, env, locale
     if (first.index) { locs = []; for (const u of first.locs.slice(0, 50)) locs.push(...sitemapLocs(await get(u)).locs) }
     raw = locs.map((u) => ({ path: u }))
   } else if (src.crawl) {
-    if (!page) throw new UserError('items.crawl needs a browser page.')
+    if (!page) throw new UserError('items.crawl needs the browser. Walk the step with kaloko walk (not offline), or list the pages with items.file or items.sitemap.')
     let url = toUrl(src.crawl.from)
     for (let i = 0; i < (src.crawl.pages || 1) && url; i++) {
       await page.goto(url, { waitUntil: 'domcontentloaded' })
@@ -129,3 +129,13 @@ export function readFields (specs) {
   }
   return out
 }
+
+/** "about 4 min left" after `done` of `total` pages took `ms`; '' before the first page or after the last. */
+export function timeLeft (done, total, ms) {
+  if (!(done > 0) || done >= total || !(ms >= 0)) return ''
+  const s = Math.round((ms / done) * (total - done) / 1000)
+  if (s < 60) return `about ${Math.max(5, Math.round(s / 5) * 5)} s left`
+  if (s < 3600) return `about ${Math.round(s / 60)} min left`
+  const h = Math.floor(s / 3600); const m = Math.round((s % 3600) / 60)
+  return `about ${h} h${m ? ` ${m} min` : ''} left`
+}

package/src/lib/unzip.mjs

@@ -2,30 +2,48 @@
 // deflated entries from the central directory. No ZIP64; entries are read when asked for.
 import { inflateRawSync } from 'node:zlib'
 
+// a zip comes from someone else (a trace, a downloaded export): an entry inflates to at most what the central directory
+// declares, the declarations have a ceiling, and entries may not share their data (overlapping entries multiply a small
+// deflate stream, the "non-recursive zip bomb")
+export const MAX_ENTRY_BYTES = 1024 * 1024 * 1024
+export const MAX_TOTAL_BYTES = 4 * 1024 * 1024 * 1024
+
 /** Entries of a zip archive: Map name → () => Buffer. */
 export function readZip (buf) {
   let eocd = -1
   for (let i = buf.length - 22; i >= Math.max(0, buf.length - 65557); i--) if (buf.readUInt32LE(i) === 0x06054b50) { eocd = i; break }
   if (eocd < 0) throw new Error('not a zip archive (no end of central directory)')
+  const broken = (why) => new Error(`broken zip archive: ${why}`)
   const count = buf.readUInt16LE(eocd + 10)
   let at = buf.readUInt32LE(eocd + 16)
   const out = new Map()
+  const spans = []
+  let total = 0
   for (let n = 0; n < count; n++) {
-    if (buf.readUInt32LE(at) !== 0x02014b50) throw new Error('broken zip central directory')
+    if (at + 46 > eocd || buf.readUInt32LE(at) !== 0x02014b50) throw new Error('broken zip central directory')
     const method = buf.readUInt16LE(at + 10)
     const size = buf.readUInt32LE(at + 20)
+    const declared = buf.readUInt32LE(at + 24)
     const nameLen = buf.readUInt16LE(at + 28); const extraLen = buf.readUInt16LE(at + 30); const commentLen = buf.readUInt16LE(at + 32)
     const local = buf.readUInt32LE(at + 42)
+    if (at + 46 + nameLen > eocd) throw broken('a name runs past the central directory')
     const name = buf.subarray(at + 46, at + 46 + nameLen).toString('utf8')
     at += 46 + nameLen + extraLen + commentLen
     if (name.endsWith('/')) continue
+    if (local + 30 > buf.length || buf.readUInt32LE(local) !== 0x04034b50) throw broken(`${name} has no local header`)
+    const start = local + 30 + buf.readUInt16LE(local + 26) + buf.readUInt16LE(local + 28)
+    if (start + size > buf.length) throw broken(`${name} runs past the end`)
+    if (declared > MAX_ENTRY_BYTES || (total += declared) > MAX_TOTAL_BYTES) throw broken(`${name} would inflate beyond the size we accept`)
+    spans.push([start, start + size, name])
     out.set(name, () => {
-      const start = local + 30 + buf.readUInt16LE(local + 26) + buf.readUInt16LE(local + 28)
       const data = buf.subarray(start, start + size)
-      if (method === 0) return Buffer.from(data)
-      if (method === 8) return inflateRawSync(data)
+      if (method === 0) { if (size !== declared) throw broken(`${name}: stored size differs from its declared size`); return Buffer.from(data) }
+      // inflating stops at the declared size: an entry that claims little and inflates to more is refused
+      if (method === 8) { try { return inflateRawSync(data, { maxOutputLength: Math.max(1, declared) }) } catch (e) { throw broken(`${name}: ${e.code === 'ERR_BUFFER_TOO_LARGE' ? 'inflates beyond its declared size' : 'cannot be inflated'}`) } }
       throw new Error(`${name}: unsupported compression method ${method}`)
     })
   }
+  spans.sort((a, b) => a[0] - b[0])
+  for (let k = 1; k < spans.length; k++) if (spans[k][0] < spans[k - 1][1]) throw broken(`${spans[k][2]} overlaps ${spans[k - 1][2]}`)
   return out
 }

package/src/lib/util.mjs

@@ -67,6 +67,12 @@ export function globToRegExp (glob) {
 
 export class UserError extends Error {}
 
+/** Every CLI error ends with a way to a person (docs/HARDENING.md phase 6, item 12). */
+export const SUPPORT_EMAIL = 'support@sinfin.cz'
+/** No `org:` in the config: where the slug comes from. */
+export const NO_ORG = 'No organization in kaloko.config.yml. Add org: <slug> (the part after kaloko.app/ when you are signed in), or run kaloko login.'
+export const SUPPORT_LINE = `Stuck? Write to ${SUPPORT_EMAIL} with the command you ran and this message.`
+
 /**
  * Tracks consecutive step failures per session. When `limit` steps in a row fail with the same first
  * error line, the remaining steps of that session are almost certainly failing on a shared

package/src/lib/video.mjs

@@ -188,7 +188,12 @@ function install () {
         if (this.enc) {
           const f = new VideoFrame(this.canvas, { timestamp: Math.round(tk.t * 1000), duration: Math.round(1e6 / c.fps) })
           this.enc.encode(f, { keyFrame: this.n % c.keyEvery === 0 }); f.close(); this.n++
-          while (this.enc.encodeQueueSize > 6) await new Promise((resolve) => setTimeout(resolve, 2))
+          // a stalled encoder (seen under heavy load) must not hold the walk: after 20 s the recording gives up
+          const until = Date.now() + 20000
+          while (this.enc && this.enc.encodeQueueSize > 6) {
+            if (Date.now() > until) { this.error = 'the video encoder stopped responding'; try { this.enc.close() } catch {} this.enc = null; break }
+            await new Promise((resolve) => setTimeout(resolve, 2))
+          }
         }
         if (tk.preview) {
           this.pg.drawImage(this.canvas, 0, 0, c.pw, c.ph)
@@ -199,7 +204,11 @@ function install () {
       return { ...out, chunks: this.chunks.splice(0), error: this.error }
     },
     async finish () {
-      if (this.enc) { try { await this.enc.flush() } catch (e) { this.error = String(e?.message || e) } this.enc.close() }
+      if (this.enc) {
+        // flush has no time limit of its own: a stalled encoder ends the recording with an error instead of hanging
+        try { await Promise.race([this.enc.flush(), new Promise((resolve, reject) => setTimeout(() => reject(new Error('the video encoder did not finish within 30 s')), 30000))]) } catch (e) { this.error = String(e?.message || e) }
+        try { this.enc.close() } catch {}
+      }
       for (const bm of this.bitmaps.values()) bm.close()
       this.bitmaps.clear()
       return { chunks: this.chunks.splice(0), error: this.error }

package/src/lib/vision.mjs

@@ -120,7 +120,7 @@ export function hostedVisionSender (config, report) {
     try { if (!client) { const { service } = await import('./service.mjs'); client = service(config) } } catch { return { skipped: 'no vision key (ANTHROPIC_API_KEY) and no service token (KALOKO_TOKEN) for hosted evaluation' } }
     try { return { response: await client.request('POST', `/orgs/${config.org}/semantic/vision`, payload) } } catch (e) {
       const m = String(e.message || e)
-      if (/HTTP (402|403|404|503)/.test(m)) { report.visionStop = m.replace(/^.*HTTP \d+: /, ''); return { skipped: report.visionStop } }
+      if (/HTTP (402|403|404|503)/.test(m)) { report.visionStop = e.serviceMessage ?? m.replace(/^.*HTTP \d+: /, ''); return { skipped: report.visionStop } }
       return { error: m }
     }
   }

package/templates/scenario.yml

@@ -30,6 +30,7 @@ nodes:
     title: Landing page
     path: /
     purpose: A visitor understands the offer and can start the flow.
+    page: landing              # landing | work | list | settings | form | doc: the usability questions fit the type
     # packs: [seo, usability]   # adds the SEO basics (AC101…) and usability questions (AC201…) to this step
     execution:
       strategy: playwright   # playwright | agent | manual

package/viewer/index.html

@@ -14,7 +14,7 @@
 @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;
+  --ink:#151514; --muted:#6a6a64; --line:#d7d7d1; --line-strong:#151514; --field:#7a7a73;
   --accent:#ffe452; --accent-ink:#151514; --focus:#151514;
   --pass:#1d8249; --fail:#c8102e; --partial:#b86e00; --skip:#8d8d86;
   --pass-bg:#e3f3e9; --fail-bg:#fbe5e8; --partial-bg:#fbf0dc; --skip-bg:#ececea;
@@ -26,7 +26,7 @@
 @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
   color-scheme:dark;
   --ground:#151514; --dots:#2c2c29; --panel:#1f1f1d; --panel-2:#262624;
-  --ink:#f0f0ec; --muted:#9d9d96; --line:#35352f; --line-strong:#f0f0ec;
+  --ink:#f0f0ec; --muted:#9d9d96; --line:#35352f; --field:#7d7d76; --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;
@@ -35,7 +35,7 @@
 :root[data-theme="dark"]{
   color-scheme:dark;
   --ground:#151514; --dots:#2c2c29; --panel:#1f1f1d; --panel-2:#262624;
-  --ink:#f0f0ec; --muted:#9d9d96; --line:#35352f; --line-strong:#f0f0ec;
+  --ink:#f0f0ec; --muted:#9d9d96; --line:#35352f; --field:#7d7d76; --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;
@@ -124,6 +124,8 @@ svg.i{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stro
 .picker .kchip{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 6px;border-radius:4px;background:var(--accent);color:var(--accent-ink);flex:none}
 .picker .kchip--flow{background:var(--ink);color:var(--panel)}
 .picker kbd,.kbd{font-family:var(--mono);font-size:10.5px;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 5px;color:var(--muted);flex:none}
+/* a key inside a button takes the button's text colour: grey on the yellow primary button is unreadable */
+.btn .kbd{color:inherit}
 .tog{width:30px;height:30px;display:inline-grid;place-items:center;border-radius:6px;border:1px solid var(--line);background:var(--panel)}
 .tog[aria-pressed="true"]{background:var(--ink);color:var(--panel);border-color:var(--ink)}
 .tog svg.i{width:16px;height:16px}
@@ -294,6 +296,10 @@ table.runs{border-collapse:collapse;width:100%;font-size:12.5px}
 }
 
 .toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--ink);color:var(--panel);padding:8px 14px;border-radius:999px;font-size:13px;z-index:30;box-shadow:var(--shadow)}
+.sess-lost{position:fixed;left:50%;top:16px;transform:translateX(-50%);z-index:60;display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;background:var(--panel);color:var(--ink);border:1px solid var(--fail);border-radius:10px;padding:10px 14px;font-size:13px;box-shadow:var(--shadow);width:max-content;max-width:calc(100vw - 32px)}
+.net-bar{position:fixed;left:50%;top:16px;transform:translateX(-50%);z-index:59;display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;background:var(--panel);color:var(--ink);border:1px solid var(--partial);border-radius:10px;padding:10px 14px;font-size:13px;box-shadow:var(--shadow);width:max-content;max-width:calc(100vw - 32px)}
+.net-bar .note{color:var(--muted)}
+.sess-lost ~ .net-bar{top:76px}
 
 @media (max-width:1100px){
   .main{grid-template-columns:minmax(0,1fr)}
@@ -783,7 +789,7 @@ details summary{cursor:pointer;font-size:12.5px;font-weight:500}
 .c-note{margin:4px 0 2px;font-size:13.5px;overflow-wrap:anywhere}.c-at{color:var(--ink);background:color-mix(in srgb,var(--accent,#ffe452) 45%,transparent);border-radius:3px;padding:0 2px;font-weight:600}
 .c-acts{display:flex;gap:10px;font-size:12px}.c-acts button,.linkish{all:unset;cursor:pointer;color:var(--muted);text-decoration:underline;text-underline-offset:3px}.c-acts button:hover,.linkish:hover{color:var(--ink)}
 .c-pin{all:unset;cursor:pointer;min-width:18px;height:18px;padding:0 4px;border-radius:9px 9px 9px 2px;background:#e4572e;color:#fff;font:600 10.5px/18px system-ui,sans-serif;text-align:center}
-.c-compose{margin-top:6px}.c-compose .c-text{width:100%;box-sizing:border-box;font:inherit;padding:8px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink);margin:4px 0 8px;resize:vertical}
+.c-compose{margin-top:6px}.c-compose .c-text{width:100%;box-sizing:border-box;font:inherit;padding:8px;border:1px solid var(--field,var(--line));border-radius:6px;background:var(--panel);color:var(--ink);margin:4px 0 8px;resize:vertical}
 .c-hint{margin-left:auto;font-size:11.5px}@media (hover:none) and (pointer:coarse){.c-hint{display:none}}.c-pinrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12.5px}.c-pinned{display:inline-flex;gap:5px;align-items:center}.c-pinbtn[aria-pressed="true"]{background:var(--ink);color:var(--panel)}
 .c-tabs{margin:0 0 10px}.cmt{display:inline-flex;align-items:center;gap:3px;font:600 11px/1 system-ui,sans-serif;color:var(--ink);padding:2px 6px;border-radius:999px;background:color-mix(in srgb,var(--partial) 22%,transparent)}.cmt .i{width:12px;height:12px}
 .lb__img.is-pinning,.lb__img.is-pinning img{cursor:crosshair}.pinmark.pin-xy{border:0;cursor:pointer;transform:translate(-2px,-100%)}.pinmark.pin-xy.is-done{background:#8a8a84}.pinmark.pin-xy.is-new{background:var(--ink)}.pinmark.flash{animation:pinflash 1s 2}
@@ -868,6 +874,10 @@ details summary{cursor:pointer;font-size:12.5px;font-weight:500}
 .rvm__side{overflow:auto;background:var(--panel);border-left:1px solid var(--line)}
 .rvm__foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--panel);border-top:1px solid var(--line)}
 .rvm__foot .btn .kbd,.rvm__top .kbd{margin-left:4px}
+.rvm__flash{flex:1 1 100%;margin:0;padding:8px 12px;border-radius:8px;font-size:14px;animation:rvflash .25s ease-out}
+.rvm__flash--approved{background:var(--pass-bg);color:var(--pass-ink)}.rvm__flash--returned{background:var(--fail-bg);color:var(--fail-ink)}
+@keyframes rvflash{from{opacity:0;transform:translateY(6px)}}
+@media (prefers-reduced-motion:reduce){.rvm__flash{animation:none}}
 .rvm__why{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
 .rvm__dec{display:grid;gap:6px}
 .rvm__dec p{margin:0}
@@ -882,6 +892,8 @@ details summary{cursor:pointer;font-size:12.5px;font-weight:500}
 #rvBtn .rv-count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-left:4px;border-radius:999px;background:var(--ink);color:var(--panel);font-size:11px;font-weight:600}
 .badge.rv-carry{margin-left:auto}
 @media (max-width:900px){.rvm__body{grid-template-columns:1fr;grid-template-rows:minmax(220px,55%) 1fr}.rvm__side{border-left:0;border-top:1px solid var(--line)}.rvm__stage{padding:12px}.rvm__bar{width:72px}.rvm__keys{display:none}}
+/* a phone: the decisions sit in the bottom row, under the thumb (Approve on the right, wide), moving on above them */
+@media (max-width:560px){.rvm__foot--act{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"flash flash flash" "prev cmt next" "ret ok ok"}.rvm__foot--act .rvm__flash{grid-area:flash}.rvm__foot--act #rvPrev{grid-area:prev}.rvm__foot--act #rvCmt{grid-area:cmt}.rvm__foot--act #rvNext{grid-area:next}.rvm__foot--act #rvRet{grid-area:ret}.rvm__foot--act #rvOk{grid-area:ok}.rvm__foot--act #rvRet,.rvm__foot--act #rvOk{min-height:52px;font-size:16px}.rvm__foot .btn{min-height:44px}.rvm__foot--act .btn{min-width:0}}
 @media (max-width:560px){.rvm__foot{gap:6px;padding:8px 10px calc(8px + env(safe-area-inset-bottom))}.rvm__foot .btn{flex:1 1 auto;justify-content:center;padding:9px 8px}.rvm__foot .spacer{display:none}.rvm__top{padding:8px 10px}.rvm__top .brand small{display:none}}
 @media (hover:none) and (pointer:coarse){.rvm .kbd,.rvm__keys{display:none}}
 @media (max-width:1400px){#rvBtn span[data-t]{display:none}#rvBtn{padding:5px 8px}}
@@ -1099,6 +1111,14 @@ Object.assign(I18N.cs, { dim_browser:'Prohlížeč', dim_color_scheme:'Barevné
 Object.assign(I18N.en, { dim_browser:'Browser', dim_color_scheme:'Colour scheme', dim_reduced_motion:'Motion', dim_forced_colors:'Forced colours', dim_display_mode:'Display mode', frame:'Frame', frameTitle:'Show the capture in the device frame', safeAreas:'Safe areas', safeTitle:'Show the notch, the home indicator and where the first screen ends', safeArea:'Safe area: keep content out of it', firstScreenEnd:'end of the first screen', altCompare:'Beside:', pickSearch:'Search…', pickNone:'Nothing matches.', pickFailing:'How many values have failing steps', keyLoc:'L picks the locale, [ and ] move to the previous and next' });
 Object.assign(I18N.cs, { devMode:'Dev mode', devTab:'Dev', devTitle:'Míry, tokeny a stavy prvků pro vývoj', devTabEl:'Prvek', devTabTokens:'Tokeny', devEmpty:'Najeďte myší na prvek v náhledu a klikněte na něj. Shift + šipky procházejí strom prvků, se stisknutým Alt uvidíte vzdálenosti k dalšímu prvku.', devStart:'Vybrat hlavní obsah', devNavLabel:'Procházet prvky', navParent:'Rodič', navChild:'Potomek', navPrev:'Předchozí', navNext:'Další', g_type:'Typografie', g_color:'Barvy', g_space:'Mezery', g_size:'Rozměry', g_shape:'Tvar', g_layout:'Rozložení', notToken:'není token', nearest:'nejbližší', typedRaw:'Hodnota je v CSS napsaná natvrdo, i když token existuje; použijte proměnnou.', typedRawShort:'natvrdo', copyTokenPath:'Kopírovat cestu tokenu', contrast:'Kontrast', aaPass:'splňuje AA', aaFail:'nesplňuje AA', aaNeed:'potřeba', largeText:'velký text', contrastApprox:'Pod textem je obrázek, kontrast je přibližný.', states:'Stavy', stDefault:'výchozí', stNone:'Styly stránky pro tento prvek žádné stavy nedefinují.', changedInState:'Zvýrazněné hodnoty se v tomto stavu mění.', distances:'Vzdálenosti', toParent:'K rodiči', toTarget:'K prvku', measure:'Měřit', measureHint:'Podržte Alt a najeďte na jiný prvek, nebo zapněte Měřit a klepněte na něj.', assets:'Obrázky a ikony', download:'Stáhnout', assetFail:'Soubor se nepodařilo stáhnout.', copyCssVars:'Kopírovat CSS s proměnnými', copyTokens:'Kopírovat tokeny (JSON)', copyPrompt:'Kopírovat pokyn pro agenta', copyLine:'Kopírovat pokyn k této hodnotě', pinFromDev:'Komentovat tento prvek', tokUsed:'Použité na tomto kroku', tokOff:'Hodnoty mimo sadu tokenů', tokHard:'V CSS natvrdo místo tokenu', tokUnused:'Nepoužité', tokNone:'Krok nemá sadu tokenů (tokens.json).', tokHlN:'Zvýrazněno prvků:', tokHint:'Klikněte na token a náhled zvýrazní prvky, které ho používají.', devShotNote:'Míry a tokeny jsou ze snímku, jak ho zachytilo CLI; stavy a stahování obrázků potřebují živou stránku.', devNoSpec:'Tento snímek nemá spec. Projděte krok znovu aktuálním CLI (kaloko walk).', devLocalLive:'Ze souboru na disku čte Dev mode snímek; živou stránku měří na kaloko.app.', devAgentHint:'Totéž dostane agent: kaloko spec %N nebo MCP get_step_spec.', devLoading:'Načítám…', keyDev:'Dev mode v detailu kroku: míry, tokeny a stavy prvků (M měří, Shift + šipky procházejí prvky)', promptHead:'Postavte %E podle schváleného návrhu v Kaloku (krok %S).', promptUse:'Pro %W použijte token %T.', promptOff:'%P %V není token; nejbližší je %T. Pevnou hodnotu použijte jen po domluvě s designérem.', promptOffNone:'%P %V není token.', promptSpec:'Spec celého kroku: kaloko spec %N' });
 Object.assign(I18N.en, { devMode:'Dev mode', devTab:'Dev', devTitle:'Measurements, tokens and states of elements for development', devTabEl:'Element', devTabTokens:'Tokens', devEmpty:'Hover an element in the preview and click it. Shift + arrows move through the element tree; hold Alt to see the distances to another element.', devStart:'Select the main content', devNavLabel:'Move through elements', navParent:'Parent', navChild:'Child', navPrev:'Previous', navNext:'Next', g_type:'Typography', g_color:'Colors', g_space:'Spacing', g_size:'Size', g_shape:'Shape', g_layout:'Layout', notToken:'not a token', nearest:'nearest', typedRaw:'The CSS has this value typed raw although a token exists; use the custom property.', typedRawShort:'typed raw', copyTokenPath:'Copy the token path', contrast:'Contrast', aaPass:'passes AA', aaFail:'fails AA', aaNeed:'needs', largeText:'large text', contrastApprox:'There is an image behind the text; the contrast is approximate.', states:'States', stDefault:'default', stNone:'The page styles define no states for this element.', changedInState:'Highlighted values change in this state.', distances:'Distances', toParent:'To the parent', toTarget:'To', measure:'Measure', measureHint:'Hold Alt and hover another element, or turn on Measure and tap it.', assets:'Images and icons', download:'Download', assetFail:'The file could not be downloaded.', copyCssVars:'Copy CSS with variables', copyTokens:'Copy tokens (JSON)', copyPrompt:'Copy prompt for an agent', copyLine:'Copy the prompt line for this value', pinFromDev:'Comment on this element', tokUsed:'Used on this step', tokOff:'Values outside the token set', tokHard:'Typed raw in the CSS instead of a token', tokUnused:'Not used', tokNone:'This step has no token set (tokens.json).', tokHlN:'Elements highlighted:', tokHint:'Click a token to highlight the elements that use it.', devShotNote:'Measurements and tokens come from the screenshot as the CLI captured it; states and image downloads need the live page.', devNoSpec:'This capture has no spec. Walk the step again with the current CLI (kaloko walk).', devLocalLive:'From disk, Dev mode reads the screenshot; the live page is measured on kaloko.app.', devAgentHint:'An agent gets the same: kaloko spec %N or MCP get_step_spec.', devLoading:'Loading…', keyDev:'Dev mode in the step detail: measurements, tokens and states of elements (M measures, Shift + arrows move through elements)', promptHead:'Build %E as approved in Kaloko (step %S).', promptUse:'Use token %T for the %W.', promptOff:'%P %V is not a token; the nearest is %T. Use the raw value only if the designer agrees.', promptOffNone:'%P %V is not a token.', promptSpec:'Spec of the whole step: kaloko spec %N' });
+Object.assign(I18N.cs, { sessionLost:'Přihlášení vypršelo. Přihlaste se znovu, rozepsaný text tu na vás počká.', signInAgain:'Přihlásit se znovu' });
+Object.assign(I18N.en, { sessionLost:'Your session has expired. Sign in again; what you were writing waits here.', signInAgain:'Sign in again' });
+// the connection drops or the service fails while the canvas is open (NET, netSend)
+Object.assign(I18N.cs, { netOffline:'Jste offline. Co napíšete, tu počká, než se připojení vrátí.', netOfflineN:(n) => `Jste offline. ${n === 1 ? '1 změna čeká' : n < 5 ? `${n} změny čekají` : `${n} změn čeká`} tady a odešle se, až se připojení vrátí.`, netFailedN:(n, why) => `Kaloko ${n === 1 ? '1 změnu' : n < 5 ? `${n} změny` : `${n} změn`} zatím neuložilo (${why}). Nic se neztratilo.`, netNoAnswer:'služba neodpovídá', netError:(c) => c === 429 ? 'příliš mnoho požadavků' : `chyba ${c}`, netAgainIn:(s) => `Zkusím to znovu za ${s} s.`, netRetry:'Zkusit znovu', netSending:'Odesílám…', netBack:'Připojení je zpět, všechno se odeslalo.', netLeave:'Některé změny ještě nejsou odeslané.' });
+Object.assign(I18N.en, { netOffline:'You are offline. What you write waits here until the connection is back.', netOfflineN:(n) => `You are offline. ${n === 1 ? '1 change waits here and goes' : `${n} changes wait here and go`} out when the connection is back.`, netFailedN:(n, why) => `Kaloko has not saved ${n === 1 ? '1 change' : `${n} changes`} yet (${why}). Nothing is lost.`, netNoAnswer:'the service does not answer', netError:(c) => c === 429 ? 'too many requests' : `error ${c}`, netAgainIn:(s) => `Trying again in ${s} s.`, netRetry:'Try again', netSending:'Sending…', netBack:'Back online; everything has been sent.', netLeave:'Some changes have not been sent yet.' });
+// back after signing in again: the session expired on the canvas (sessionLost), the server kept the path, but the
+// sign-in mail cannot carry the fragment (the open step, the comments), so the canvas stored it for this moment
+(() => { try { const r = JSON.parse(localStorage.getItem('qawalk-return') || 'null'); if (!r) return; localStorage.removeItem('qawalk-return'); if (r.path === location.pathname && r.hash && !location.hash && Date.now() - r.at < 864e5) history.replaceState(null, '', location.pathname + location.search + r.hash); } catch {} })();
 const storedLang = (() => { try { return localStorage.getItem('qawalk.lang'); } catch { return null; } })();
 // #lang=cs|en in a link forces the language of the canvas for that page (a shared link, a walk in another locale):
 // it wins over the account, the cookie and the browser, and stays in the address while the canvas rewrites it
@@ -1357,7 +1377,7 @@ const sessColor = (key) => SESSION_COLORS[Math.max(0, sessions().indexOf(key)) %
 const sessTitle = (key) => key ? loc(RUN.sessions?.[key]?.title) || key : '';
 const sessChip = (key) => key && RUN.sessions?.[key] ? `<span class="sess" style="--sc:${sessColor(key)}" title="${esc(key)}"><i></i>${esc(sessTitle(key))}</span>` : '';
 const nodeSt = (n) => { const status = n.by_locale?.[S.loc] || n.status; return ['pass', 'partial', 'fail', 'skip'].includes(status) ? status : 'skip'; };
-const critVerdict = (c, l = S.loc) => { if (c.counts) return c.verdict || 'not_reached'; const vs = viewports().map((v) => c.by_locale?.[l]?.[v.name]?.verdict || 'not_reached'); return vs.every((v) => v === 'not_reached') ? 'not_reached' : worst(vs.map((v) => v === 'not_reached' ? 'not_evaluated' : v)); };
+const critVerdict = (c, l = S.loc) => { if (c.not_applicable) return 'not_reached'; if (c.counts) return c.verdict || 'not_reached'; const vs = viewports().map((v) => c.by_locale?.[l]?.[v.name]?.verdict || 'not_reached'); return vs.every((v) => v === 'not_reached') ? 'not_reached' : worst(vs.map((v) => v === 'not_reached' ? 'not_evaluated' : v)); };
 const critSt = (c) => VSTAT[critVerdict(c)];
 const prevRun = () => (RUN.history || []).find((h) => h.started_at < RUN.started_at);
 const fmtDate = (iso) => { if (!iso) return ''; const d = new Date(iso); return `${d.getDate()}. ${d.getMonth() + 1}. ${d.getFullYear()} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`; };
@@ -1425,7 +1445,9 @@ function commentsBase (scope) {
   return scope === 'flow' ? `${a.api}/orgs/${a.org}/scenarios/${encodeURIComponent(RUN.scenario.id)}/comments` : `${a.api}/orgs/${a.org}/runs/${a.run}/comments`;
 }
 async function cApi (scope, path, method, body) {
-  const res = await fetch(commentsBase(scope) + path, { method, credentials: 'same-origin', headers: body ? { 'Content-Type': 'application/json' } : {}, body: body ? JSON.stringify({ ...body, ...(isDraft() ? { branch: RUN.draft.branch } : {}) }) : undefined });
+  const init = { method, credentials: 'same-origin', headers: body ? { 'Content-Type': 'application/json' } : {}, body: body ? JSON.stringify({ ...body, ...(isDraft() ? { branch: RUN.draft.branch } : {}) }) : undefined };
+  const res = method === 'GET' ? await fetch(commentsBase(scope) + path, init) : await netSend(commentsBase(scope) + path, init, method === 'POST' && !path ? { find: commentSent(scope, body) } : {});
+  if (res.status === 401) throw sessionLost();
   const data = await res.json().catch(() => ({}));
   if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
   return data;
@@ -1452,6 +1474,8 @@ function rerenderComments (all = false) {
 const draftKey = (scope, nodeId, sub) => `qawalk-draft|${APP()?.org || 'local'}|${scope === 'flow' ? `flow:${RUN.scenario.id}` : isDraft() ? `draft:${RUN.scenario.id}` : RUN.id}|${nodeId || ''}|${sub || 'new'}`;
 const loadDraft = (k) => { try { return localStorage.getItem(k) || ''; } catch { return ''; } };
 const saveDraft = (k, v) => { try { if (v) localStorage.setItem(k, v); else localStorage.removeItem(k); } catch {} };
+// notes outside the comment composer (verdict, return, issue) carry their draft key: typed text is kept the same way
+document.addEventListener('input', (e) => { const k = e.target?.dataset?.draft; if (k) saveDraft(k, e.target.value); });
 const noteHtml = (s) => esc(s).replace(/(^|\s)@([\w.+-]+(?:@[\w.-]+)?)/g, '$1<b class="c-at">@$2</b>').replace(/\n/g, '<br>');
 /** Numbers of the threads pinned on this step's screenshot (the same numbers as the marks on the image). */
 function pinNumbers (nodeId) {
@@ -2197,9 +2221,13 @@ function closeStack (keepHash) {
   if (S.st?.inline) { if (keepHash === true) return; const id = S.st.id; S.st = null; riRender({ focus: id }); setHash(null); return; } // folder → back to the run index
   $('si').hidden = true; if (keepHash !== true) setHash(null);
 }
+// a CSV cell: text from crawled pages that starts like a formula (= + - @ tab CR) gets a leading ' so a spreadsheet
+// shows it instead of running it, also after a ; or a line break (Excel with a semicolon separator splits there; the
+// same rule as the audit CSV, worker/src/audit-log.js); numbers stay numbers
+function csvCell (v) { if (typeof v === 'number') return String(v); const s = v == null ? '' : String(v); const x = (/^[=+\-@\t\r]/.test(s) ? `'${s}` : s).replace(/([;\r\n]["\s]*)(?=[=+\-@])/g, "$1'"); return /[",\n\r]/.test(x) ? `"${x.replace(/"/g, '""')}"` : x; }
 function stackCsv (n, data) {
   const cols = data.fields || [];
-  const q = (v) => { const x = v == null ? '' : String(v); return /[",\n;]/.test(x) ? `"${x.replace(/"/g, '""')}"` : x; };
+  const q = csvCell;
   const rows = [['path', 'url', 'status', 'failing', 'review', ...cols.map((f) => f.label || f.id)], ...S.st.filtered.map((it) => [it.path, it.url, it.status, (it.fails || []).join(' '), (it.review || []).join(' '), ...cols.map((f) => it.fields?.[f.id])])];
   const blob = new Blob(['' + rows.map((r) => r.map(q).join(',')).join('\n')], { type: 'text/csv;charset=utf-8' });
   const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = `${RUN.scenario?.id || 'run'}-${n.id}.csv`; document.body.appendChild(a); a.click(); a.remove(); setTimeout(() => URL.revokeObjectURL(a.href), 1000);
@@ -2359,7 +2387,7 @@ function riKey (e) {
   return false;
 }
 function riCsv () {
-  const q = (v) => { const x = v == null ? '' : String(v); return /[",\n;]/.test(x) ? `"${x.replace(/"/g, '""')}"` : x; };
+  const q = csvCell;
   const rows = [['step', 'title', 'kind', 'path', 'status', 'criteria_passed', 'criteria', 'failing', 'http', 'console_errors', 'pages']];
   for (const e of S.ri.entries || []) {
     if (e.type === 'page') { rows.push([`${e.n.id}~${e.it.id}`, e.it.title || '', 'page', e.it.path, e.it.status, '', '', (e.it.fails || []).join(' '), e.it.fields?.http ?? '', '', '']); continue; }
@@ -2640,6 +2668,7 @@ function renderAll () { renderChrome(); renderNodes(); if (S.right) renderReport
 /* Evidence of the built-in checks is a fixed English template (kept as is in the data, for agents and the API);
    the canvas says it as a sentence in the reader's language. Unknown text and HTML snippets stay as they are. */
 const EVIDENCE = [
+  [/^Applies on (.+) only; this walk ran on (.+)\.$/, (m) => [`Does not apply on ${m[2]}: this check runs on ${m[1]} only`, `Na prostředí ${m[2]} se netýká: tahle kontrola běží jen na ${m[1]}`]],
   [/^no visible link to the home page$/, () => ['No visible link to the home page', 'Chybí viditelný odkaz na úvodní stránku']],
   [/^no visible (.+)$/, (m) => [`Nothing visible matches ${m[1]}`, `Na stránce není vidět nic, co odpovídá ${m[1]}`]],
   [/^(\d+)× (.+)$/, (m) => [`Found ${m[1]}× ${m[2]}`, `Nalezeno ${m[1]}× ${m[2]}`]],
@@ -3545,9 +3574,9 @@ function renderReport () {
    ${APP() && isDraft() ? `<div class="sec"><h4>${T('draft')} #${esc(RUN.draft.seq)}</h4><p class="note">${T('draftInfo')}</p><div id="draftChanges" class="note"></div></div>` : ''}
    ${versionNotesHtml()}
    ${APP() && !isDraft() ? `<div class="sec verdict-sec"><h4 class="vhead"><span>${isDesign() ? T('versionVerdict') : T('runVerdict')}</span><span class="badge st-${RUN.verdict?.verdict === 'accepted' ? 'pass' : RUN.verdict?.verdict === 'returned' ? 'fail' : 'skip'}">${T(RUN.verdict?.verdict || 'pending')}</span>${RUN.verdict?.baseline ? `<span class="badge st-partial">${T('baseline')}</span>` : ''}</h4>${RUN.verdict?.by || (RUN.baseline_id && RUN.baseline_id !== RUN.id) ? `<p class="note" style="margin:0 0 8px">${RUN.verdict?.by ? `${esc(RUN.verdict.by)}${RUN.verdict.via === 'token' || RUN.verdict.via === 'agent' ? ` <span class="badge st-skip">${T(RUN.verdict.via === 'agent' ? 'viaAgent' : 'viaToken')}</span>` : ''} · ${fmtDate(RUN.verdict.at)}` : ''}${RUN.baseline_id && RUN.baseline_id !== RUN.id ? `${RUN.verdict?.by ? ' · ' : ''}<a class="pr" href="${runHref(RUN.baseline_id)}">${T('baseline')} →</a>` : ''}</p>` : ''}${RUN.verdict?.note ? `<p class="note">${esc(RUN.verdict.note)}</p>` : ''}${RUN.verdict?.approvers ? `<p class="note">${RUN.verdict.awaiting.length ? `${T('awaiting')}: <b>${RUN.verdict.awaiting.map(esc).join(', ')}</b>` : `${T('approvedByAll')}`}${RUN.verdict.approved_by.length ? ` · ${T('approvedBy')}: ${RUN.verdict.approved_by.map(esc).join(', ')}` : ''}${RUN.verdict.approved_by_tokens?.length ? ` · ${T('approvedBy')} ${T('approvedByTokens')}: ${RUN.verdict.approved_by_tokens.map((a) => esc(a.email)).join(', ')}` : ''}</p>` : ''}
-     ${canWrite() ? `<textarea id="rvVerdictNote" hidden rows="2" placeholder="${T('verdictNotePh')}" style="width:100%;font:inherit;padding:8px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink);margin:0 0 8px"></textarea>
+     ${canWrite() ? `<textarea id="rvVerdictNote" ${loadDraft(draftKey('run', '', 'verdict')) ? '' : 'hidden '}rows="2" placeholder="${T('verdictNotePh')}" data-draft="${esc(draftKey('run', '', 'verdict'))}" style="width:100%;font:inherit;padding:8px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink);margin:0 0 8px">${esc(loadDraft(draftKey('run', '', 'verdict')))}</textarea>
      <div class="share__row"><button class="btn btn--primary" data-verdict="accepted">${isDesign() ? T('acceptVersion') : T('accept')}</button><button class="btn" data-verdict="returned">${isDesign() ? T('returnVersion') : T('ret')}</button></div>
-     <div class="vmore"><button class="linkish" id="rvNoteShow">${T('addNote')}</button>${RUN.verdict?.verdict === 'accepted' && !isDesign() ? `<button class="linkish" data-baseline="${RUN.verdict.baseline ? 'unset' : 'set'}">${RUN.verdict.baseline ? T('unsetBaseline') : T('setBaseline')}</button>` : ''}${APP().user?.role === 'admin' ? `<button class="linkish" data-public="${RUN.public ? 'off' : 'on'}" title="${T('publicHint')}">${RUN.public ? T('makePrivate') : isDesign() ? T('makePublicVersion') : T('makePublic')}</button>` : ''}</div>` : ''}${RUN.public ? `<p class="note" style="margin:6px 0 0"><span class="badge st-partial">${T('publicRun')}</span> ${T('publicNote')}</p>` : ''}${signoffHtml()}</div>` : ''}
+     <div class="vmore">${loadDraft(draftKey('run', '', 'verdict')) ? '' : `<button class="linkish" id="rvNoteShow">${T('addNote')}</button>`}${RUN.verdict?.verdict === 'accepted' && !isDesign() ? `<button class="linkish" data-baseline="${RUN.verdict.baseline ? 'unset' : 'set'}">${RUN.verdict.baseline ? T('unsetBaseline') : T('setBaseline')}</button>` : ''}${APP().user?.role === 'admin' ? `<button class="linkish" data-public="${RUN.public ? 'off' : 'on'}" title="${T('publicHint')}">${RUN.public ? T('makePrivate') : isDesign() ? T('makePublicVersion') : T('makePublic')}</button>` : ''}</div>` : ''}${RUN.public ? `<p class="note" style="margin:6px 0 0"><span class="badge st-partial">${T('publicRun')}</span> ${T('publicNote')}</p>` : ''}${signoffHtml()}</div>` : ''}
    ${commentsPanel()}
    <div class="sec"><p class="verdict">${esc(c.pass)} / ${tot} ${T('stepsDone')} <em>· ${ok}/${all.length} ${T('criteriaWord')} (${esc(S.loc)})</em></p>
      <div class="stack">${['pass', 'partial', 'fail', 'skip'].map((k) => `<i style="width:${c[k] / tot * 100}%;background:var(--${k})"></i>`).join('')}</div>
@@ -3578,7 +3607,7 @@ function renderReport () {
   const sc = $('shareCopy'); if (sc) sc.onclick = async () => { const link = $('shareUrl').textContent; try { await navigator.clipboard.writeText(link); toast(T('linkCopied')); } catch { toast(link); } };
   const showNote = () => { const t = $('rvVerdictNote'); if (!t) return; t.hidden = false; $('rvNoteShow')?.remove(); t.focus(); };
   if ($('rvNoteShow')) $('rvNoteShow').onclick = showNote;
-  $('rside').querySelectorAll('[data-verdict]').forEach((b) => { b.onclick = async () => { const note = $('rvVerdictNote').value.trim(); if (b.dataset.verdict === 'returned' && !note) { showNote(); toast(T('noteRequired')); return; } b.disabled = true; try { await postJson('/verdict', { verdict: b.dataset.verdict, note }); toast(T('saved')); await reloadRun(); } catch (e) { toast(e.message); b.disabled = false; } }; });
+  $('rside').querySelectorAll('[data-verdict]').forEach((b) => { b.onclick = async () => { const note = $('rvVerdictNote').value.trim(); if (b.dataset.verdict === 'returned' && !note) { showNote(); toast(T('noteRequired')); return; } b.disabled = true; try { await postJson('/verdict', { verdict: b.dataset.verdict, note }); saveDraft(draftKey('run', '', 'verdict'), ''); toast(T('saved')); await reloadRun(); } catch (e) { toast(e.message); b.disabled = false; } }; });
   $('rside').querySelectorAll('[data-public]').forEach((b) => { b.onclick = async () => { if (b.dataset.public === 'on' && !confirm(T('publicConfirm'))) return; b.disabled = true; try { await postJson('/public', { public: b.dataset.public === 'on' }); toast(T('saved')); await reloadRun(); } catch (e) { toast(e.message); b.disabled = false; } }; });
   $('rside').querySelectorAll('[data-baseline]').forEach((b) => { b.onclick = async () => { b.disabled = true; try { await postJson('/verdict', { verdict: 'accepted', note: RUN.verdict?.note || '', baseline: b.dataset.baseline === 'set' }); toast(T('saved')); await reloadRun(); } catch (e) { toast(e.message); b.disabled = false; } }; });
   $('rside').querySelectorAll('[data-go],tr[data-id]').forEach((el) => { el.onclick = () => { if (byId(el.dataset.go || el.dataset.id)) openLb(el.dataset.go || el.dataset.id); }; });
@@ -3756,13 +3785,98 @@ const sameAsCmp = (n) => !!(S.cmp && isDesign() && n.kind !== 'decision' && revO
 const headOf = (n, loc = S.loc) => RUN.revisions?.[`${n.id}|${loc}`] || null;
 const who = (a) => a ? (a.agent ? `${a.agent} (${T('viaAgent')} ${a.email})` : a.email) : '';
 
+/**
+ * The session ended while the canvas was open (an API call answered 401): one bar says so and links to sign in with
+ * the way back; every unsent text is already in localStorage (drafts) and stays. Returns the error to throw.
+ */
+function sessionLost () {
+  try { localStorage.setItem('qawalk-return', JSON.stringify({ path: location.pathname, hash: location.hash, at: Date.now() })); } catch {}
+  if (!$('sessLost')) document.body.insertAdjacentHTML('beforeend', `<div id="sessLost" class="sess-lost" role="alert"><span>${esc(T('sessionLost'))}</span><a class="btn btn--primary" href="/login?next=${encodeURIComponent(location.pathname + location.search)}">${esc(T('signInAgain'))}</a></div>`);
+  return new Error(T('sessionLost'));
+}
 async function apiJson (method, url, body) {
-  const res = await fetch(url, { method, credentials: 'same-origin', headers: body ? { 'Content-Type': 'application/json' } : {}, body: body ? JSON.stringify(body) : undefined });
+  const init = { method, credentials: 'same-origin', headers: body ? { 'Content-Type': 'application/json' } : {}, body: body ? JSON.stringify(body) : undefined };
+  const res = method === 'GET' ? await fetch(url, init) : await netSend(url, init);
+  if (res.status === 401) throw sessionLost();
   const data = await res.json().catch(() => ({}));
   if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
   return data;
 }
 
+/**
+ * Writes survive a dropped connection. A request that cannot reach the service (offline, a dropped connection) or that
+ * the service could not handle (5xx, 429, 408) waits in a queue the bar at the top names; it goes out again when the
+ * browser is back online, on a timer (Retry-After when the service sends one) or on "Try again". The caller's promise
+ * only settles with a real answer, so its button stays busy and nothing is lost silently; leaving the page while
+ * something waits asks first. `find` looks for what the first attempt may already have created (a new comment), so a
+ * request that did arrive is not sent twice.
+ */
+const NET = { pending: [], timer: null, tick: null, was: false };
+const netTrouble = (res) => !res || res.status >= 500 || res.status === 429 || res.status === 408;
+async function netSend (url, init, { find } = {}) {
+  const started = Date.now();
+  for (let attempt = 0; ; attempt++) {
+    if (attempt && find) {
+      let hit;
+      try { hit = await find(started); } catch { hit = undefined; }
+      if (hit) return new Response(JSON.stringify(hit), { status: 200, headers: { 'Content-Type': 'application/json' } });
+      if (hit === undefined) { await netWait({ status: 0, attempt }); continue; } // cannot look yet: wait again
+    }
+    let res = null;
+    if (navigator.onLine !== false) { try { res = await fetch(url, init); } catch { res = null; } }
+    if (!netTrouble(res)) { if (NET.was && !NET.pending.length) { NET.was = false; toast(T('netBack')); } return res; }
+    const after = Number(res?.headers.get('retry-after'));
+    await netWait({ status: res?.status || 0, attempt, after: Number.isFinite(after) && after > 0 ? Math.min(after, 300) : 0 });
+  }
+}
+function netWait (entry) {
+  return new Promise((resolve) => {
+    entry.go = () => { NET.pending = NET.pending.filter((x) => x !== entry); resolve(); };
+    // the service failed or did not answer: try again by itself a few times (3, 10, 30 s), then wait for a person
+    const delay = entry.after ? entry.after * 1000 : [3000, 10000, 30000][entry.attempt];
+    entry.at = navigator.onLine === false || !delay ? 0 : Date.now() + delay;
+    NET.pending.push(entry); NET.was = true;
+    netBar();
+  });
+}
+/** Sends everything waiting now (back online, "Try again", or a timer that came due). */
+function netFlush (only) {
+  const due = NET.pending.filter((x) => !only || only(x));
+  for (const x of due) x.go();
+  netBar();
+}
+function netBar () {
+  clearTimeout(NET.timer); clearInterval(NET.tick); NET.tick = null;
+  const offline = navigator.onLine === false;
+  const n = NET.pending.length;
+  let bar = $('netBar');
+  if (!n && !offline) { bar?.remove(); return; }
+  if (!bar) { document.body.insertAdjacentHTML('beforeend', '<div id="netBar" class="net-bar" role="status" aria-live="polite"><span class="net-bar__msg"></span><span class="note net-bar__when"></span><button type="button" class="btn net-bar__retry"></button></div>'); bar = $('netBar'); bar.querySelector('.net-bar__retry').onclick = () => { bar.querySelector('.net-bar__when').textContent = T('netSending'); netFlush(); }; }
+  const last = NET.pending.at(-1);
+  bar.querySelector('.net-bar__msg').textContent = offline ? (n ? T('netOfflineN')(n) : T('netOffline')) : T('netFailedN')(n, last?.status ? T('netError')(last.status) : T('netNoAnswer'));
+  const btn = bar.querySelector('.net-bar__retry'); btn.textContent = T('netRetry'); btn.hidden = !n;
+  const next = offline ? 0 : Math.min(...NET.pending.map((x) => x.at || Infinity));
+  const when = bar.querySelector('.net-bar__when');
+  const show = () => { const s = Math.max(1, Math.ceil((next - Date.now()) / 1000)); when.textContent = T('netAgainIn')(s); };
+  if (Number.isFinite(next) && next > 0) {
+    show(); NET.tick = setInterval(show, 1000);
+    NET.timer = setTimeout(() => netFlush((x) => x.at && x.at <= Date.now() + 50), Math.max(0, next - Date.now()));
+  } else when.textContent = '';
+}
+addEventListener('online', () => { if (NET.pending.length) netFlush(); else netBar(); });
+addEventListener('offline', () => { if (APP()) netBar(); });
+addEventListener('beforeunload', (e) => { if (NET.pending.length) { e.preventDefault(); e.returnValue = T('netLeave'); return T('netLeave'); } });
+/** A new comment the first attempt may have created already: same step, text, status and thread, by this person. */
+function commentSent (scope, body) {
+  return async (since) => {
+    const me = APP()?.user?.email;
+    const res = await fetch(commentsBase(scope) + (isDraft() ? branchQ() : ''), { credentials: 'same-origin' });
+    if (!res.ok) return undefined;
+    const list = await res.json();
+    return (Array.isArray(list) ? list : []).find((c) => c.node_id === body.node_id && (c.note || '') === (body.note || '') && (c.status || 'comment') === (body.status || 'comment') && (c.parent_id || null) === (body.parent_id || null) && (!me || c.email === me) && Date.parse(c.created_at) >= since - 120000) || null;
+  };
+}
+
 // the draft is live: re-read it when someone (a person or an agent) changes it
 let reloadTimer = null;
 function reloadDraftSoon () { clearTimeout(reloadTimer); reloadTimer = setTimeout(reloadDraft, 350); }
@@ -4710,7 +4824,7 @@ function issuesBlock (n, v) {
       ${trackers.length > 1 ? `<label>${esc(T('issTracker'))} <select id="issTracker">${trackers.map((t) => `<option value="${esc(t.kind)}">${esc(t.label)} · ${esc(t.target)}</option>`).join('')}</select></label>` : ''}
       <label>${esc(T('issCriterion'))} <select id="issCrit"><option value="">${esc(T('issWholeStep'))}</option>${crit.map((c) => `<option value="${esc(c.id)}" ${pick && pick.id === c.id ? 'selected' : ''}>${esc(c.id)} · ${esc(String(critText(c)).slice(0, 60))}</option>`).join('')}</select></label>
       <label>${esc(T('issName'))} <input id="issName" maxlength="200" placeholder="${esc(T('issNamePh'))}"></label>
-      <label>${esc(T('issNote'))} <textarea id="issNote" rows="2"></textarea></label>
+      <label>${esc(T('issNote'))} <textarea id="issNote" rows="2" data-draft="${esc(draftKey('step', n.id, 'issue'))}">${esc(loadDraft(draftKey('step', n.id, 'issue')))}</textarea></label>
       <div class="share__row"><button class="btn btn--primary" data-iss-send="${esc(n.id)}" data-iss-vp="${esc(v?.name || '')}">${esc(T('issSend'))}</button><button class="btn" data-iss-cancel>${esc(T('cancel'))}</button></div></div>`;
   } else if (can) tail = `<div class="share__row">${trackers.map((t) => `<button class="btn" data-iss-new="${esc(n.id)}" data-iss-kind="${esc(t.kind)}">${esc(T('issNew')(t.label))}</button>`).join('')}</div>`;
   return `<div class="sec iss"><h4>${esc(T('issTitle'))}</h4>${items}${tail}</div>`;
@@ -4722,9 +4836,10 @@ async function issSend (step, vp) {
   ISS.busy = true; toast(T('issSending'));
   try {
     const res = await fetch(`${a.api}/orgs/${a.org}/issues`, { method: 'POST', credentials: 'same-origin', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ run_id: a.run, step, to, criterion: $('issCrit')?.value || undefined, title: $('issName')?.value.trim() || undefined, note: $('issNote')?.value.trim() || undefined, locale: S.loc, viewport: vp || undefined }) });
+    if (res.status === 401) throw sessionLost();
     const out = await res.json().catch(() => ({}));
     if (!res.ok) throw new Error(out.error || `HTTP ${res.status}`);
-    ISS.form = null;
+    ISS.form = null; saveDraft(draftKey('step', step, 'issue'), '');
     toast(T('issSent')(out.key));
     await issLoad();
     await refreshComments();
@@ -4759,7 +4874,7 @@ Object.assign(I18N.cs, {
   rvCarriedWhy: 'Snímky i kritéria jsou stejné jako v přijatém běhu a automatické kontroly prošly.',
   rvRevoke: 'Zrušit převzaté schválení', rvRevoked: 'Převzaté schválení je zrušené; krok čeká na kontrolu.',
   rvUnconfirmed: 'Rozhodnutí agenta nebo tokenu; za rozhodnutí člověka se nepočítá', rvChangedIn: 'Změněné snímky', rvCritChanged: 'Kritéria se od přijatého běhu změnila.',
-  rvApprovedToast: 'Schváleno', rvReturnedToast: 'Vráceno autorovi běhu', rvReadOnly: 'Jen ke čtení', rvLocal: 'Rozhodovat se dá na kaloko.app, až se běh nasdílí.',
+  rvApprovedToast: 'Schváleno', rvFlashNext: 'další:', rvReturnedToast: 'Vráceno autorovi běhu', rvReadOnly: 'Jen ke čtení', rvLocal: 'Rozhodovat se dá na kaloko.app, až se běh nasdílí.',
   rvDone: 'Všechny kroky jsou rozhodnuté', rvLeft: (n) => `Na rozhodnutí ${n === 1 ? 'čeká 1 krok' : n < 5 ? `čekají ${n} kroky` : `čeká ${n} kroků`}`,
   rvNothing: 'Nic nečeká na člověka: kroky prošly a od přijatého běhu se nezměnily.', rvSumApproved: 'schváleno', rvSumReturned: 'vráceno', rvSumClear: 'beze změny a bez připomínek',
   rvCarriedTitle: 'Převzatá schválení', rvCarriedLead: 'Tyto kroky vypadají stejně jako v přijatém běhu a jejich automatické kontroly prošly. U každého je, kdo ho schválil.',
@@ -4780,27 +4895,27 @@ Object.assign(I18N.en, {
   rvCarriedWhy: 'The screenshots and criteria are the same as in the accepted run and the automatic checks passed.',
   rvRevoke: 'Revoke the carried approval', rvRevoked: 'Carried approval revoked; the step waits for review.',
   rvUnconfirmed: 'An agent’s or token’s decision; it does not count as a person’s', rvChangedIn: 'Changed screenshots', rvCritChanged: 'The criteria changed since the accepted run.',
-  rvApprovedToast: 'Approved', rvReturnedToast: 'Returned to the author of the run', rvReadOnly: 'Read only', rvLocal: 'Decisions are made on kaloko.app once the run is shared.',
+  rvApprovedToast: 'Approved', rvFlashNext: 'next:', rvReturnedToast: 'Returned to the author of the run', rvReadOnly: 'Read only', rvLocal: 'Decisions are made on kaloko.app once the run is shared.',
   rvDone: 'Every step is decided', rvLeft: (n) => `${n} step${n === 1 ? '' : 's'} still wait${n === 1 ? 's' : ''} for a decision`,
   rvNothing: 'Nothing waits for a person: the steps passed and did not change since the accepted run.', rvSumApproved: 'approved', rvSumReturned: 'returned', rvSumClear: 'unchanged, nothing to look at',
   rvCarriedTitle: 'Carried-over approvals', rvCarriedLead: 'These steps look the same as in the accepted run and their automatic checks passed. Each says who approved it.',
   rvShow: 'Show', rvVerdictLead: 'Carried approvals do not count as accepting the run: a person accepts the run as a whole.',
   rvReturnedHint: 'The author of the run sees returned steps in the inbox, the agent in kaloko feedback.', rvCarriedShort: 'carried over', rvToEnd: 'Summary', rvHint: 'review step by step', rvQueue: 'Steps to review', rvRefFailed: 'The accepted run could not be loaded.', rvComparedWith: 'Compared with the accepted run'
 })
-const RV = { open: false, data: null, idx: 0, view: null, vp: null, refBase: {}, ret: false, busy: false, extra: [] };
+const RV = { open: false, data: null, idx: 0, view: null, vp: null, refBase: {}, ret: false, busy: false, extra: [], flash: null };
 const rvService = () => !!(APP()?.user && APP()?.run && !isDraft());
 const rvWritable = () => rvService() && canWrite();
 const rvItems = () => [...(RV.data?.items || []), ...RV.extra];
 const rvCur = () => rvItems()[RV.idx] || null;
 const RV_GROUP = { fail: 0, returned: 0, needs_review: 1, not_evaluated: 1, revoked: 1, changed: 2, new: 2, comments: 3 };
 const rvDay = (iso) => (iso ? fmtDate(iso).replace(/ \d{2}:\d{2}$/, '') : '');
-const rvOpenCrit = (c) => Object.values(c.by_locale || {}).some((vps) => Object.values(vps || {}).some((r) => ['needs_review', 'not_evaluated'].includes(r?.verdict)));
+const rvOpenCrit = (c) => !c.not_applicable && Object.values(c.by_locale || {}).some((vps) => Object.values(vps || {}).some((r) => ['needs_review', 'not_evaluated'].includes(r?.verdict)));
 
 /** A read-only queue from the run itself (local preview, export, public run): no carry-over, no comparison. */
 function rvLocalQueue () {
   const items = []; let clear = 0;
   flowOrder().forEach((n, position) => {
-    const vs = (n.criteria || []).map((c) => c.verdict).filter(Boolean);
+    const vs = (n.criteria || []).filter((c) => !c.not_applicable).map((c) => c.verdict).filter(Boolean);
     const reasons = [];
     if (n.status === 'fail' || vs.includes('fail')) reasons.push('fail');
     if (vs.includes('needs_review')) reasons.push('needs_review');
@@ -4948,7 +5063,9 @@ function rvFootHtml (it) {
   const items = rvItems();
   const act = it && rvWritable() ? `<button class="btn" id="rvRet">${esc(T('rvReturn'))} <span class="kbd">R</span></button><button class="btn" id="rvCmt">${ICON.comment} ${esc(T('comment'))} <span class="kbd">C</span></button><button class="btn btn--primary" id="rvOk">${esc(T('rvApprove'))} <span class="kbd">A</span></button>`
     : it ? `<span class="note">${esc(T(rvService() ? 'rvReadOnly' : 'rvLocal'))}</span>` : '';
-  return `<div class="rvm__foot"><button class="btn" id="rvPrev" ${RV.idx <= 0 ? 'disabled' : ''}>${ICON.prev} ${esc(T('rvPrev'))} <span class="kbd">K</span></button><span class="spacer"></span>${act}${RV.idx < items.length ? `<button class="btn" id="rvNext">${esc(RV.idx === items.length - 1 ? T('rvToEnd') : T('rvNext'))} ${ICON.next} <span class="kbd">J</span></button>` : ''}</div>`;
+  const f = RV.flash && Date.now() - RV.flash.at < 4000 ? RV.flash : null;
+  const flash = f ? `<p class="rvm__flash rvm__flash--${f.state}" id="rvFlash" role="status">${f.state === 'approved' ? '✓' : '↩'} ${esc(T(f.state === 'approved' ? 'rvApprovedToast' : 'rvReturnedToast'))}: <b>${esc(f.title)}</b>${it ? ` · ${esc(T('rvFlashNext'))} ${esc(loc(byId(it.step)?.title) || it.step)}` : ''}</p>` : '';
+  return `<div class="rvm__foot${it && rvWritable() ? ' rvm__foot--act' : ''}">${flash}<button class="btn" id="rvPrev" ${RV.idx <= 0 ? 'disabled' : ''}>${ICON.prev} ${esc(T('rvPrev'))} <span class="kbd">K</span></button><span class="spacer"></span>${act}${RV.idx < items.length ? `<button class="btn" id="rvNext">${esc(RV.idx === items.length - 1 ? T('rvToEnd') : T('rvNext'))} ${ICON.next} <span class="kbd">J</span></button>` : ''}</div>`;
 }
 function rvEndHtml () {
   const d = RV.data, c = d.counts || {}, items = d.items || [];
@@ -4960,7 +5077,7 @@ function rvEndHtml () {
   const carried = (d.carried || []).length ? `<div class="sec"><h4>${esc(T('rvCarriedTitle'))}</h4><p class="note">${esc(T('rvCarriedLead'))}</p><ul class="rvm__list">${d.carried.map((x) => `<li><span class="badge st-pass">✓</span><button class="linkish" data-rv-show="${esc(x.step)}">${esc(loc(byId(x.step)?.title) || x.step)}</button><span class="note">${esc((x.kind === 'run' ? T('rvCarriedRun') : T('rvCarriedStep'))(x.from_run, x.approved_by, rvDay(x.approved_at)))}</span>${rvWritable() ? `<button class="linkish" data-rv-revoke="${esc(x.step)}">${esc(T('rvRevoke'))}</button>` : ''}</li>`).join('')}</ul></div>` : '';
   const v = RUN.verdict || d.verdict || {};
   const verdict = rvWritable() ? `<div class="sec verdict-sec"><h4 class="vhead"><span>${T('runVerdict')}</span><span class="badge st-${v.verdict === 'accepted' ? 'pass' : v.verdict === 'returned' ? 'fail' : 'skip'}">${T(v.verdict || 'pending')}</span></h4><p class="note">${esc(T('rvVerdictLead'))}${returned ? ` ${esc(T('rvReturnedHint'))}` : ''}</p>${v.approvers ? `<p class="note">${v.awaiting?.length ? `${T('awaiting')}: <b>${v.awaiting.map(esc).join(', ')}</b>` : T('approvedByAll')}</p>` : ''}
-    <textarea id="rvVNote" rows="2" placeholder="${esc(T('verdictNotePh'))}" style="width:100%;font:inherit;padding:8px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink);margin:0 0 8px"></textarea>
+    <textarea id="rvVNote" rows="2" placeholder="${esc(T('verdictNotePh'))}" data-draft="${esc(draftKey('run', '', 'verdict'))}" style="width:100%;font:inherit;padding:8px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink);margin:0 0 8px">${esc(loadDraft(draftKey('run', '', 'verdict')))}</textarea>
     <div class="share__row"><button class="btn btn--primary" data-rv-verdict="accepted">${T('accept')}</button><button class="btn" data-rv-verdict="returned">${T('ret')}</button></div></div>` : '';
   return `<div class="rvm__end"><h3>${esc(head)}</h3><p class="note">${esc(sum)}</p>${d.reference ? `<p class="note">${esc(T('rvComparedWith'))}: <a class="pr" href="${runHref(d.reference.id)}">${fmtDate(d.reference.started_at)}${d.reference.accepted_by ? ` · ${esc(d.reference.accepted_by)}` : ''}</a></p>` : ''}${list}${carried}${verdict}</div>`;
 }
@@ -5049,10 +5166,16 @@ async function rvApprove () {
     // the person's look answers what the evaluator could not decide: open criteria pass, then the step is approved
     if (n.kind !== 'stack') for (const c of (n.criteria || []).filter((x) => x.type !== 'deterministic' && rvOpenCrit(x))) await postJson('/criteria', { node_id: n.id, criterion_id: c.id, verdict: 'pass', note: '' });
     await cApi('step', '', 'POST', { node_id: n.id, status: 'approved', note: '' });
-    toast(T('rvApprovedToast'));
+    rvFlash('approved', n);
     await rvAfter(it.step);
   } catch (e) { toast(e.message); if (b) b.disabled = false; } finally { RV.busy = false; }
 }
+/** Feedback after a decision that stays readable on a phone: a line above the buttons (with the next step), a short buzz. */
+function rvFlash (state, n) {
+  RV.flash = { state, title: loc(n?.title) || '', at: Date.now() };
+  try { if (lbPhone()) navigator.vibrate?.(state === 'approved' ? 15 : [15, 60, 15]); } catch {}
+  clearTimeout(RV.flashT); RV.flashT = setTimeout(() => { RV.flash = null; $('rvFlash')?.remove(); }, 4000);
+}
 function rvReturn () { if (!rvCur() || !rvWritable()) return; RV.ret = true; rvRender(); }
 async function rvReturnSend () {
   const it = rvCur(); const t = $('rvRetNote'); if (!it || !t || RV.busy) return;
@@ -5062,7 +5185,7 @@ async function rvReturnSend () {
   try {
     await cApi('step', '', 'POST', { node_id: it.step, status: 'rejected', note, locale: S.loc, viewport: RV.vp || null });
     saveDraft(draftKey('step', it.step, 'return'), '');
-    toast(T('rvReturnedToast'));
+    rvFlash('returned', byId(it.step) || { title: it.title });
     await rvAfter(it.step);
   } catch (e) { toast(e.message); $('rvRetSend') && ($('rvRetSend').disabled = false); } finally { RV.busy = false; }
 }
@@ -5088,7 +5211,7 @@ async function rvVerdict (verdict, b) {
   const note = $('rvVNote')?.value.trim() || '';
   if (verdict === 'returned' && !note) { toast(T('noteRequired')); $('rvVNote')?.focus(); return; }
   b.disabled = true;
-  try { await postJson('/verdict', { verdict, note }); toast(T('saved')); await reloadRun(); await rvLoad(); rvRender(); } catch (e) { toast(e.message); b.disabled = false; }
+  try { await postJson('/verdict', { verdict, note }); saveDraft(draftKey('run', '', 'verdict'), ''); toast(T('saved')); await reloadRun(); await rvLoad(); rvRender(); } catch (e) { toast(e.message); b.disabled = false; }
 }
 /** Starts review mode support once the run is on screen: the button, its count and the hash. */
 function rvInit () {
@@ -5150,16 +5273,19 @@ function applyReviewerVerdicts () {
   const summary = { pass: 0, partial: 0, fail: 0, skip: 0 };
   for (const n of RUN.nodes) {
     if (n.kind === 'decision') continue;
-    for (const c of n.criteria) { const vs = RUN.scope.locales.map((l) => { const vps = Object.values(c.by_locale?.[l] || {}); return vps.length ? worstV(vps.map((v) => v.verdict)) : 'not_reached'; }).filter((v) => v !== 'not_reached'); c.verdict = vs.length ? worstV(vs) : 'not_reached'; }
-    n.by_locale = Object.fromEntries(RUN.scope.locales.map((l) => [l, statusOf(n.criteria.map((c) => { const vps = Object.values(c.by_locale?.[l] || {}); return vps.length ? worstV(vps.map((v) => v.verdict)) : 'not_reached'; }), !!n.captures?.[l])]));
-    n.status = statusOf(n.criteria.filter((c) => c.verdict !== 'not_reached').map((c) => c.verdict), Object.keys(n.captures || {}).length > 0);
+    // a criterion limited to another environment (not_applicable) stays out of the status
+    const live = n.criteria.filter((c) => !c.not_applicable);
+    for (const c of live) { const vs = RUN.scope.locales.map((l) => { const vps = Object.values(c.by_locale?.[l] || {}); return vps.length ? worstV(vps.map((v) => v.verdict)) : 'not_reached'; }).filter((v) => v !== 'not_reached'); c.verdict = vs.length ? worstV(vs) : 'not_reached'; }
+    n.by_locale = Object.fromEntries(RUN.scope.locales.map((l) => [l, statusOf(live.map((c) => { const vps = Object.values(c.by_locale?.[l] || {}); return vps.length ? worstV(vps.map((v) => v.verdict)) : 'not_reached'; }), !!n.captures?.[l])]));
+    n.status = statusOf(live.filter((c) => c.verdict !== 'not_reached').map((c) => c.verdict), Object.keys(n.captures || {}).length > 0);
     summary[n.status]++;
   }
   RUN.summary = { ...RUN.summary, ...summary };
 }
 async function postJson (path, body) {
   const a = APP();
-  const res = await fetch(`${a.api}/orgs/${a.org}/runs/${a.run}${path}`, { method: 'POST', credentials: 'same-origin', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
+  const res = await netSend(`${a.api}/orgs/${a.org}/runs/${a.run}${path}`, { method: 'POST', credentials: 'same-origin', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
+  if (res.status === 401) throw sessionLost();
   if (!res.ok) throw new Error((await res.json().catch(() => ({}))).error || `HTTP ${res.status}`);
   return res.json();
 }