kaloko 0.12.1 → 0.12.2

package/package.json

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

package/src/lib/build.mjs

@@ -97,7 +97,7 @@ async function recEntry (run, e) {
   if (!r?.files || !Object.values(r.files).some(Boolean)) return null
   const files = Object.fromEntries(Object.entries(r.files).filter(([k, f]) => f && ['webm', 'mp4', 'preview', 'poster'].includes(k) && existsSync(join(run.dir, f))))
   if (!files.webm && !files.mp4) return null
-  return { ...files, duration_ms: r.duration_ms, ...(r.width ? { size: [r.width, r.height] } : {}), codec: r.codec || null, mode: r.mode, source: r.source || null, bytes: Object.values(r.bytes || {}).reduce((n, b) => n + (b || 0), 0), ...(r.failed ? { failed: true } : {}), ...(r.error ? { error: r.error } : {}), ...(r.trimmed ? { trimmed: true } : {}), ...(r.offset_ms ? { offset_ms: r.offset_ms } : {}), ...(r.taps?.length ? { taps: r.taps.slice(0, 200) } : {}), ...(r.chapters ? { chapters: r.chapters } : {}) }
+  return { ...files, ...(r.still ? { still: true } : {}), duration_ms: r.duration_ms, ...(r.width ? { size: [r.width, r.height] } : {}), codec: r.codec || null, mode: r.mode, source: r.source || null, bytes: Object.values(r.bytes || {}).reduce((n, b) => n + (b || 0), 0), ...(r.failed ? { failed: true } : {}), ...(r.error ? { error: r.error } : {}), ...(r.trimmed ? { trimmed: true } : {}), ...(r.offset_ms ? { offset_ms: r.offset_ms } : {}), ...(r.taps?.length ? { taps: r.taps.slice(0, 200) } : {}), ...(r.chapters ? { chapters: r.chapters } : {}) }
 }
 
 /**

package/src/lib/capture.mjs

@@ -11,7 +11,7 @@ import { maskSpec, maskList, inPage, maskInPage, rememberPii, knownPii, maskMail
  * Encodes a PNG screenshot inside the page (no native dependency): the image as WebP (or PNG, lossless) and a
  * WebP thumbnail for the canvas grid; `marks` are numbered circles drawn on the image (documentation captures).
  */
-export async function encodeImage (page, png, { format = 'webp', quality = 0.82, thumbWidth = 320, thumbQuality = 0.7, marks = [], scale = 1, masks = [] } = {}) {
+export async function encodeImage (page, png, { format = 'webp', quality = 0.82, thumbWidth = 640, thumbQuality = 0.8, marks = [], scale = 1, masks = [] } = {}) {
   const result = await page.evaluate(async ({ dataUrl, format, quality, thumbWidth, thumbQuality, marks, scale, masks }) => {
     const img = new Image()
     await new Promise((res, rej) => { img.onload = res; img.onerror = rej; img.src = dataUrl })
@@ -32,9 +32,18 @@ export async function encodeImage (page, png, { format = 'webp', quality = 0.82,
     }
     // the blob's own type: WebKit cannot write WebP and silently returns PNG
     const blob = (c, type, q) => new Promise((res, rej) => c.toBlob((b) => (b ? b.arrayBuffer().then((buf) => res({ bytes: Array.from(new Uint8Array(buf)), type: b.type })) : rej(new Error('encode failed'))), type, q))
+    // the card thumbnail: halved step by step with high-quality smoothing (one 4× or 8× jump makes text fall apart),
+    // 640 wide so a card stays sharp on a 2× screen
     const k = Math.min(1, thumbWidth / img.width)
-    const t = document.createElement('canvas'); t.width = Math.round(img.width * k); t.height = Math.round(img.height * k)
-    t.getContext('2d').drawImage(full, 0, 0, t.width, t.height)
+    const tw = Math.round(img.width * k); const th = Math.round(img.height * k)
+    let src = full
+    while (src.width / 2 >= tw * 1.4) {
+      const half = document.createElement('canvas'); half.width = Math.round(src.width / 2); half.height = Math.round(src.height / 2)
+      const hg = half.getContext('2d'); hg.imageSmoothingEnabled = true; hg.imageSmoothingQuality = 'high'; hg.drawImage(src, 0, 0, half.width, half.height)
+      src = half
+    }
+    const t = document.createElement('canvas'); t.width = tw; t.height = th
+    const tg = t.getContext('2d'); tg.imageSmoothingEnabled = true; tg.imageSmoothingQuality = 'high'; tg.drawImage(src, 0, 0, tw, th)
     return { image: await blob(full, format === 'png' ? 'image/png' : 'image/webp', quality), thumb: await blob(t, 'image/webp', thumbQuality) }
   }, { dataUrl: `data:image/png;base64,${png.toString('base64')}`, format, quality, thumbWidth, thumbQuality, marks, scale, masks })
   return { image: Buffer.from(result.image.bytes), thumb: Buffer.from(result.thumb.bytes), imageType: result.image.type, thumbType: result.thumb.type }

package/src/lib/changelog-core.mjs

@@ -86,7 +86,9 @@ export function versionOfTag (pattern, tag) {
 // ---------- Keep a Changelog ----------
 
 export const GROUPS = ['Added', 'Changed', 'Deprecated', 'Removed', 'Fixed', 'Security']
-const GROUP_ALIASES = { added: 'Added', new: 'Added', features: 'Added', 'minor changes': 'Added', changed: 'Changed', 'patch changes': 'Fixed', 'major changes': 'Changed', improvements: 'Changed', deprecated: 'Deprecated', removed: 'Removed', fixed: 'Fixed', 'bug fixes': 'Fixed', fixes: 'Fixed', security: 'Security', 'performance improvements': 'Changed' }
+const GROUP_ALIASES = { added: 'Added', new: 'Added', features: 'Added', 'minor changes': 'Added', changed: 'Changed', 'patch changes': 'Fixed', 'major changes': 'Changed', improvements: 'Changed', deprecated: 'Deprecated', removed: 'Removed', fixed: 'Fixed', 'bug fixes': 'Fixed', fixes: 'Fixed', security: 'Security', 'performance improvements': 'Changed',
+  // Czech Keep a Changelog headings (Squared, other Czech projects)
+  'přidáno': 'Added', 'nové': 'Added', 'změněno': 'Changed', 'zastaralé': 'Deprecated', 'odstraněno': 'Removed', 'opraveno': 'Fixed', 'bezpečnost': 'Security' }
 /** A group heading as written by people or release tools ("Bug Fixes", "Minor Changes") in Keep a Changelog terms. */
 export const groupName = (h) => GROUP_ALIASES[String(h || '').trim().toLowerCase()] || String(h || '').trim()
 

package/src/lib/recording.mjs

@@ -12,7 +12,7 @@ import { tmpdir } from 'node:os'
 import { join, relative, dirname } from 'node:path'
 import { writeJson, localized } from './util.mjs'
 import { addCapture, runPaths } from './run.mjs'
-import { encodeClip, preset, MAX_SECONDS } from './video.mjs'
+import { encodeClip, preset, MAX_SECONDS, MIN_STEP_MS } from './video.mjs'
 import { PAGE_HOOK, networkEntries, actionEntries, summarizeTrace, cleanText, TRACE_LIMITS } from './trace.mjs'
 import { maskSpec, scenarioMasks, paintMasks, scrubDeep, loadKnownPii } from './pii.mjs'
 
@@ -250,11 +250,17 @@ export async function recordingSession ({ page, run, scenario, locale, settings,
       const keepClip = want && (want.mode !== 'failed' || failed)
       if (!keepClip) { await obs.prune(t2); return }
       const clip = obs.clip(s.t0, error ? t2 : t1)
+      // the screencast sends a frame only when the picture changes, and a fast step is captured before the new page's
+      // frame even arrives: with fewer than two frames in the step nothing moved worth watching, so no video is kept
+      // and the canvas shows the screenshot (a failed step keeps its recording whatever it shows)
+      const still = clip.frames.filter((f) => f.t > s.t0).length < 2
+      if (still && !failed) { await obs.prune(t2); return }
+      const end = Math.max(error ? t2 : t1, s.t0 + MIN_STEP_MS)
       // the frames stay on disk until the encoder has them; pruning waits in the same queue
       enqueue(async () => {
         const base = recBase(run.dir, node.id, locale, vp)
         await mkdir(dirname(base), { recursive: true })
-        const r = await encodeClip({ page: await encoder(), frames: clip.frames, events: want.cursor === false ? [] : clip.events, start: s.t0, end: error ? t2 : t1, out: base, quality: want.quality, maxSeconds: want.max_seconds, codec: want.codec || 'auto', mp4: want.mp4 ?? 'auto' })
+        const r = await encodeClip({ page: await encoder(), frames: clip.frames, events: want.cursor === false ? [] : clip.events, start: s.t0, end, out: base, quality: want.quality, maxSeconds: want.max_seconds, codec: want.codec || 'auto', mp4: want.mp4 ?? 'auto' })
         // offset_ms: where the clip starts after the step's start (a trimmed long step keeps its end); the trace aligns by it
         if (r) await saveRecording({ run, node, locale, viewport: vp, result: { ...r, offset_ms: Math.max(0, Math.round(r.start - s.t0)) }, mode: want.mode, failed, error, captured_at: records?.[0]?.captured_at || null, source: 'screencast' })
         for (const n of r?.notes || []) notes.add(n)
@@ -308,6 +314,8 @@ export async function saveRecording ({ run, node, locale, viewport, result, mode
     fps: result.fps || null,
     codec: result.codec,
     ...(result.trimmed ? { trimmed: true } : {}),
+    // nothing moved during the step: the canvas shows the screenshot in its place
+    ...(result.still ? { still: true } : {}),
     ...(result.offset_ms ? { offset_ms: result.offset_ms } : {}),
     files,
     bytes: result.bytes || {},

package/src/lib/video.mjs

@@ -257,6 +257,8 @@ export async function encoderCaps (page) {
  * { files: { webm, mp4, preview, poster }, duration_ms, width, height, codec, fps, trimmed, notes }.
  */
 // the encoder page holds one clip at a time: parallel locales and named sessions take turns
+// a step clip shorter than this is held on its last frame: a one-second video jumps past before anyone can look
+export const MIN_STEP_MS = 2500
 const LOCKS = new WeakMap()
 export function encodeClip (opts) {
   if (!opts.page) return encodeClipNow(opts)

package/viewer/index.html

@@ -1908,7 +1908,7 @@ function shot (n, v, w, h) {
   if (att) return `<span class="shot shot--${v.mobile ? 'm' : 'd'}" data-vp="${esc(v.name)}"${att.preview ? ` data-prev="${esc(asset(att.preview))}"` : ''}><img loading="lazy" src="${esc(asset(att.poster))}" alt="" style="opacity:.75"><span class="shot__rec" title="${esc(T('recFailed'))}">▶ ✕</span><span class="shot__tag">${v.w}</span></span>`;
   if (!c) return `<span class="shot shot--${v.mobile ? 'm' : 'd'} shot--empty" style="width:${w}px;height:${h}px">${T('noCapture')}</span>`;
   const prev = c.rec?.preview && !RUN.recordings_expired ? asset(c.rec.preview) : null;
-  return `<span class="shot shot--${v.mobile ? 'm' : 'd'}" data-vp="${esc(v.name)}"${prev ? ` data-prev="${esc(prev)}"` : ''}><img loading="lazy" src="${esc(asset(c.thumb || c.image || c.png))}" alt="">${c.rec ? `<span class="shot__rec" title="${esc(T('recHint'))}">▶</span>` : ''}<span class="shot__tag">${v.w}</span></span>`;
+  return `<span class="shot shot--${v.mobile ? 'm' : 'd'}" data-vp="${esc(v.name)}"${prev ? ` data-prev="${esc(prev)}"` : ''}><img loading="lazy" src="${esc(asset(c.thumb || c.image || c.png))}"${c.thumb && (c.image || c.png) ? ` data-full="${esc(asset(c.image || c.png))}"` : ''} alt="">${c.rec ? `<span class="shot__rec" title="${esc(T('recHint'))}">▶</span>` : ''}<span class="shot__tag">${v.w}</span></span>`;
 }
 /* Quick signals of a capture (probabilities of "yes"): which ones deserve a look. Purpose and language are good
    when high, broken is good when low; the evaluator is calibrated, so 30 % / 70 % are honest cut-offs. */
@@ -2639,7 +2639,24 @@ function setInv (v) {
   INV_CSS ||= $('invCss') || document.head.appendChild(document.createElement('style'));
   INV_CSS.textContent = `#world :focus-visible,#world .pxd,#world .lane-head,#world .node__title,#world .cur{--inv:${v}}`;
 }
-function applyView () { const v = S.view; $('world').style.transform = `translate(${v.x}px,${v.y}px) scale(${v.k})`; { const far = v.k < 0.6; if ($('world').classList.contains('far') !== far) { $('world').classList.toggle('far', far); requestAnimationFrame(drawEdges); } $('world').classList.toggle('tiny', v.k < 0.25); } setInv(String(Math.min(6, 1 / v.k))); $('zVal').textContent = Math.round(v.k * 100) + ' %'; $('vp').style.backgroundSize = `${22 * v.k}px ${22 * v.k}px`; $('vp').style.backgroundPosition = `${v.x}px ${v.y}px`; renderMini(); presenceView(); }
+/* A card's thumbnail is made for the card at about 100 %; zoomed in (or on a 2× screen with an older, smaller
+   thumbnail) the visible cards load the full screenshot instead of stretching the thumbnail. */
+let sharpenT = null;
+function sharpenShots () {
+  clearTimeout(sharpenT);
+  sharpenT = setTimeout(() => {
+    const dpr = window.devicePixelRatio || 1; const vw = innerWidth; const vh = innerHeight;
+    for (const img of document.querySelectorAll('#nodes .shot img[data-full]')) {
+      if (!img.complete || !img.naturalWidth || img.closest('.shot')?.dataset.playing) continue;
+      const r = img.getBoundingClientRect();
+      if (r.right < 0 || r.bottom < 0 || r.left > vw || r.top > vh || !r.width) continue;
+      if (r.width * dpr > img.naturalWidth * 1.15) { img.src = img.dataset.full; delete img.dataset.full; }
+    }
+  }, 250);
+}
+// a thumbnail that finishes loading is checked too (cards render before their images arrive)
+document.addEventListener('load', (e) => { if (e.target?.matches?.('#nodes .shot img[data-full]')) sharpenShots(); }, true);
+function applyView () { sharpenShots(); const v = S.view; $('world').style.transform = `translate(${v.x}px,${v.y}px) scale(${v.k})`; { const far = v.k < 0.6; if ($('world').classList.contains('far') !== far) { $('world').classList.toggle('far', far); requestAnimationFrame(drawEdges); } $('world').classList.toggle('tiny', v.k < 0.25); } setInv(String(Math.min(6, 1 / v.k))); $('zVal').textContent = Math.round(v.k * 100) + ' %'; $('vp').style.backgroundSize = `${22 * v.k}px ${22 * v.k}px`; $('vp').style.backgroundPosition = `${v.x}px ${v.y}px`; renderMini(); presenceView(); }
 /* minimap: every node as a status-coloured block, the visible area as a frame; click or drag to move */
 let MINI = null, MINI_NODES = null;
 function renderMini () {
@@ -3046,11 +3063,14 @@ function metaSection (n, cap, v) {
 
 /* ---------- recordings and traces (batch D, #12): video of a step, its markers, the trace timeline ---------- */
 /** A step's video: its own recording, a failed attempt's, or its chapter of the flow recording (from/to in s). */
+/* A clip where nothing moved, or one so short it only flickers (older runs, before clips were held to 2.5 s), shows
+   as the screenshot instead. */
+const stillRec = (r) => !!r && (r.still === true || (Number(r.duration_ms) > 0 && Number(r.duration_ms) < 1000));
 function recOf (n, cap, v) {
   if (!n || n.kind === 'decision' || n.kind === 'stack') return null;
-  if (cap?.rec && (cap.rec.webm || cap.rec.mp4)) return { ...cap.rec, kind: 'step' };
+  if (cap?.rec && (cap.rec.webm || cap.rec.mp4) && !stillRec(cap.rec)) return { ...cap.rec, kind: 'step' };
   const f = (n.recordings || []).filter((r) => r.locale === S.loc && (r.viewport === v?.name || !cap)).pop();
-  if (f && (f.webm || f.mp4)) return { ...f, kind: 'failed' };
+  if (f && (f.webm || f.mp4) && !stillRec(f)) return { ...f, kind: 'failed' };
   const fl = RUN.recordings?.flow?.[S.loc]; const ch = fl?.chapters?.find((c) => c.node === n.id);
   if (ch && (fl.webm || fl.mp4) && (!fl.viewport || !v || fl.viewport === v.name)) return { ...fl, kind: 'chapter', from: ch.start / 1000, to: Math.max(ch.capture, ch.start + 300) / 1000, title: ch.title };
   return null;
@@ -3090,7 +3110,7 @@ function wireVideo (root, rec, cap) {
   vid.ontimeupdate = () => {
     const t = vid.currentTime - from;
     if (pos) pos.style.left = `${Math.min(100, Math.max(0, t / d * 100))}%`;
-    if (to && vid.currentTime >= to) vid.pause();
+    if (to && vid.currentTime >= to) { vid.dataset.autoPause = '1'; vid.pause(); vid.dispatchEvent(new Event('clipend')); }
     if (taps && rec.taps?.length) taps.innerHTML = rec.taps.filter((x) => Math.abs(x.t / 1000 - (rec.offset_ms || 0) / 1000 - t) < 0.45).map((x) => `<span class="vtap" style="left:${x.x * 100}%;top:${x.y * 100}%"></span>`).join('');
     // the trace row of this moment, when the Technical tab shows the trace of this capture
     const ms = t * 1000 + (rec.kind === 'step' || rec.kind === 'failed' ? (rec.offset_ms || 0) : 0);
@@ -3098,7 +3118,21 @@ function wireVideo (root, rec, cap) {
     for (const r of rows) { r.classList.remove('is-now'); if (Number(r.dataset.t) <= ms) now = r; }
     now?.classList.add('is-now');
   };
+  // once someone plays a video, the next step's video plays by itself (until they pause one)
+  vid.addEventListener('play', () => { S.vAuto = true; });
+  vid.addEventListener('pause', () => { if (!vid.ended && !vid.dataset.autoPause && !(to && vid.currentTime >= to - 0.05)) S.vAuto = false; delete vid.dataset.autoPause; });
   if (S.vseek != null) { const t = S.vseek; S.vseek = null; seekVideo(vid, t, true); }
+  else if (S.vAuto) { vid.muted = true; seekVideo(vid, 0, true); }
+}
+/* The next step's video starts loading while this one plays, so moving on does not wait for the network. */
+const PRELOADED = [];
+function preloadNext (n, v) {
+  const next = outEdges(n.id).map((e) => byId(e.to)).find((x) => x && x.kind !== 'decision');
+  const rec = next ? recOf(next, next.captures?.[S.loc]?.[v.name], v) : null;
+  const src = rec && (rec.webm && document.createElement('video').canPlayType('video/webm') ? rec.webm : rec.mp4 || rec.webm);
+  if (!src || RUN.recordings_expired || PRELOADED.some((x) => x.dataset.src === src)) return;
+  const pre = document.createElement('video'); pre.preload = 'auto'; pre.muted = true; pre.dataset.src = src; pre.src = asset(src);
+  PRELOADED.push(pre); if (PRELOADED.length > 3) PRELOADED.shift().removeAttribute('src');
 }
 const TRACES = new Map();
 function loadTrace (cap) {
@@ -3165,6 +3199,8 @@ function wireReplayVideo (n, cap, v) {
   const rec = rpVideoOf(n, cap, v); const stage = $('rpStage'); if (!rec || !stage) return;
   wireVideo(stage, rec, cap);
   const vid = stage.querySelector('video.rec'); if (!vid) return;
+  // a step's own video (not the flow's) hands over to the next step when it ends
+  if (rec.kind !== 'flow') { vid.addEventListener('ended', () => rpAutoNext(n)); vid.addEventListener('clipend', () => rpAutoNext(n)); }
   const chaps = rec.chapters || [];
   stage.querySelectorAll('[data-chap]').forEach((b) => { b.onclick = () => seekVideo(vid, Number(b.dataset.seek), true); });
   // the replay's step and the video's chapter move together: a step change seeks, playing past a chapter marks it
@@ -3301,6 +3337,7 @@ function openLb (id, vpName, opts = {}) {
   if ($('lbMode')) seg($('lbMode'), [...(liveSrc(cap) ? [['live', T('liveMode')]] : []), ...(viewSrc(cap) ? [['view', T('htmlView')]] : []), ...(recOf(n, cap, v) ? [['video', T('videoMode')]] : []), ['shot', T('shotMode')]], S.lbMode === 'video' && !recOf(n, cap, v) ? 'shot' : S.lbMode, (m) => { S.lbMode = m; LIVE.mode = null; openLb(id, v.name); });
   // the step's video and the trace timeline (batch D): markers seek, trace rows jump into the video
   wireVideo(lb, recOf(n, cap, v), cap);
+  if (S.lbMode === 'video') preloadNext(n, v);
   if (cap?.trace || cap?.trace_inline) fillTrace(lb, n, cap, v);
   if ($('lbLiveTools')) renderLiveTools();
   if ($('lbProto')) $('lbProto').onclick = () => ptOpen(id, v.name);
@@ -3597,12 +3634,22 @@ function rpOpen (path) {
   $('lb').hidden = true; S.open = null; closeBrowser();
   renderReplay();
 }
-function rpClose () { S.rp = null; $('rp').hidden = true; setHash(null); }
+function rpClose () { clearTimeout(S.rpTimer); S.rp = null; $('rp').hidden = true; setHash(null); }
+/* Replay with video plays on by itself: at the end of a step's video (or after a still step has shown for a while) it
+   moves to the next step when there is one way on. A decision waits for the person; the end of the flow stops. */
+const STILL_MS = 3000;
+function rpAutoNext (n) {
+  clearTimeout(S.rpTimer);
+  if (!S.rp || !S.rpVideo || !S.vAuto || S.rp.path[S.rp.path.length - 1] !== n.id) return;
+  const opts = rpNextOptions(n);
+  if (opts.length === 1 && opts[0].n) rpGo(opts[0].n.id);
+}
 function rpGo (id) { if (!byId(id)) return; S.rp.path.push(id); renderReplay(); }
 function rpBack () { if (S.rp.path.length > 1) { S.rp.path.pop(); renderReplay(); } }
 function rpJump (i) { S.rp.path = S.rp.path.slice(0, i + 1); renderReplay(); }
 function rpNextOptions (n) { return outEdges(n.id).map((e, k) => ({ e, n: byId(e.to), k })); }
 function renderReplay () {
+  clearTimeout(S.rpTimer);
   const cur = S.rp.path[S.rp.path.length - 1], n = byId(cur);
   const v = (S.vp === 'mobile' ? mVp() : dVp()) || viewports()[0];
   const cap = n.captures?.[S.loc]?.[v.name];
@@ -3644,7 +3691,12 @@ function renderReplay () {
   $('rp').querySelectorAll('[data-stack-open]').forEach((b) => { b.onclick = () => openStack(b.dataset.stackOpen); });
   $('rp').querySelector('[data-restart]')?.addEventListener('click', () => rpOpen(null));
   if ($('rpVid')) $('rpVid').onclick = () => { S.rpVideo = !S.rpVideo; renderReplay(); };
-  if (S.rpVideo) wireReplayVideo(n, cap, v);
+  if (S.rpVideo) {
+    wireReplayVideo(n, cap, v);
+    // a step without a video of its own (a still page) shows its screenshot for a moment, then playing goes on
+    if (S.vAuto && n.kind !== 'decision' && !rpVideoOf(n, cap, v)) S.rpTimer = setTimeout(() => rpAutoNext(n), STILL_MS);
+    preloadNext(n, v);
+  }
   $('rpStage').scrollTop = 0;
   setHash({ replay: 1, step: cur, path: S.rp.path.join(',') });
   focusNode(cur);