kaloko 0.10.0 → 0.11.0

package/package.json

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

package/src/cli.mjs

@@ -9,7 +9,7 @@ import { loadConfig, environment, urlFor, baseUrl, CONFIG_FILE, LEGACY_CONFIG_FI
 import { loadScenario, parseScenario, validateScenario, scenarioWarnings } from './lib/scenario.mjs'
 import { createRun, resolveRun, readCaptures, listRuns } from './lib/run.mjs'
 import { gitMeta, projectAndIssue, appVersion } from './lib/git.mjs'
-import { startBrowser, stopBrowser, connectBrowser, currentPage, launchEphemeral, consoleLog, allStates, resetSession, acquireWalkLock } from './lib/browser.mjs'
+import { startBrowser, stopBrowser, connectBrowser, currentPage, launchEphemeral, launchWithRetry, consoleLog, allStates, resetSession, acquireWalkLock } from './lib/browser.mjs'
 import { captureStep, captureCrop, captureOptions, acceptDialogs } from './lib/capture.mjs'
 import { observeConsole } from './lib/console.mjs'
 import { mailClient, waitForMessage, recipient, readMessageFile } from './lib/mail.mjs'
@@ -1663,7 +1663,7 @@ const commands = {
     if (!account.configured) throw new UserError(`Add the account first: environments.${env.name}.accounts.${args.account} in ${CONFIG_FILE} (it may be empty: {}).`)
     if (!process.stdin.isTTY) throw new UserError('kaloko auth save needs a person at the terminal: they sign in in the browser window and press Enter.')
     const { chromium } = await import('playwright')
-    const browser = await chromium.launch({ headless: false, channel: config.browser.channel || undefined })
+    const browser = await launchWithRetry(chromium, { headless: false, channel: config.browser.channel || undefined })
     try {
       const page = await (await newContext(browser, env, { root, config })).newPage()
       await page.goto(typeof args.url === 'string' ? args.url : baseUrl(env), { waitUntil: 'domcontentloaded' })
@@ -2274,7 +2274,8 @@ const commands = {
       const product = pickProduct(config, root, args.product)
       const printPdf = async (htmlFile, outFile) => {
         const { chromium } = await import('playwright')
-        const browser = await chromium.launch(config.browser?.channel ? { channel: config.browser.channel } : {}).catch(() => chromium.launch())
+        // the configured channel when it is installed, else Playwright's Chromium; a browser that stalls is not retried twice over
+        const browser = await launchWithRetry(chromium, config.browser?.channel ? { channel: config.browser.channel } : {}).catch((e) => e?.name === 'TimeoutError' || !config.browser?.channel ? Promise.reject(e) : launchWithRetry(chromium, {}))
         try {
           const page = await browser.newPage()
           await page.goto(pathToFileURL(htmlFile).href, { waitUntil: 'load', timeout: 60000 })

package/src/lib/assertions.mjs

@@ -200,10 +200,12 @@ export async function jsValues (page, checks, timeout = JS_TIMEOUT) {
       return { type, value }
     })()`
     try {
+      // the page's own timer limits the expression; this one only guards against a page that stopped answering, with
+      // room for a slow round trip on a busy machine (a 1 s margin failed true checks under load)
       let timer
       const result = await Promise.race([
         page.evaluate(wrapped),
-        new Promise((_, no) => { timer = setTimeout(() => no(new Error(`did not finish within ${timeout} ms`)), timeout + 1000) })
+        new Promise((_, no) => { timer = setTimeout(() => no(new Error(`the page did not answer within ${Math.round((timeout + 15000) / 1000)} s`)), timeout + 15000) })
       ]).finally(() => clearTimeout(timer))
       const text = JSON.stringify(result.value)
       out[id] = { expression, result: text && text.length > 2000 ? { type: result.type, value: `${text.slice(0, 2000)}…` } : result }

package/src/lib/browser-daemon.mjs

@@ -5,10 +5,12 @@
 import { chromium } from 'playwright'
 import { writeJson, appendJsonl } from './util.mjs'
 import { prepareContext, clientCertificates } from './access.mjs'
+import { launchPersistentWithRetry } from './browser.mjs'
 
 const opts = JSON.parse(process.argv[2])
 const certs = opts.env ? clientCertificates(opts.env, opts.root) : []
-const context = await chromium.launchPersistentContext(opts.profile, {
+// a time limit and one more try (KALOKO_LAUNCH_TIMEOUT): a start that stalls on a busy machine does not hang here
+const context = await launchPersistentWithRetry(chromium, opts.profile, {
   headless: !opts.headed,
   channel: opts.channel || undefined,
   viewport: { width: 1280, height: 800 },

package/src/lib/browser.mjs

@@ -69,12 +69,16 @@ export async function startBrowser ({ root, config, env, headed }) {
   })
   const child = spawn(process.execPath, [join(here, 'browser-daemon.mjs'), args], { detached: true, stdio: 'ignore' })
   child.unref()
-  for (let i = 0; i < 100; i++) {
+  // the daemon launches with launchLimit() and tries once more after a timeout
+  const wait = 2 * launchLimit() + 10000
+  for (const until = Date.now() + wait; Date.now() < until;) {
     await new Promise((r) => setTimeout(r, 200))
     const state = await readJson(stateFile, null)
     if (state && state.pid === child.pid) return state
+    if (!await alive(child.pid)) throw new UserError('Browser did not start (its process ended). Try "kaloko browser start --headed" to see what happens, or "kaloko doctor".')
   }
-  throw new UserError('Browser did not start within 20 s. Try "kaloko browser start --headed" to see what happens.')
+  try { process.kill(child.pid, 'SIGTERM') } catch {} // Playwright ends the browser it was starting
+  throw new UserError(`Browser did not start within ${Math.round(wait / 1000)} s. Try "kaloko browser start --headed" to see what happens; on a busy machine raise KALOKO_LAUNCH_TIMEOUT (seconds).`)
 }
 
 /** Stops the browser of one environment, or every shared browser of the project. */
@@ -102,7 +106,7 @@ export async function connectBrowser ({ root, config, env }) {
   if (!state) return null
   assertPolicy(state, env)
   const { chromium } = await import('playwright')
-  const browser = await chromium.connectOverCDP(state.cdp)
+  const browser = await connectWithRetry(chromium, state.cdp)
   return { browser, context: browser.contexts()[0], state }
 }
 
@@ -138,17 +142,82 @@ export async function currentPage (context, match) {
   return real[real.length - 1] || pages[pages.length - 1] || context.newPage()
 }
 
+/** The time limit of a browser launch or connection: KALOKO_LAUNCH_TIMEOUT seconds, default 45. */
+export const launchLimit = () => (Number(process.env.KALOKO_LAUNCH_TIMEOUT) || 45) * 1000
+/** The time limit of the first context of a new browser and of every later newContext/newPage: 20 s, or KALOKO_LAUNCH_TIMEOUT when set. */
+export const answerLimit = () => (Number(process.env.KALOKO_LAUNCH_TIMEOUT) > 0 ? launchLimit() : 20000)
+
+const isTimeout = (e) => /Timeout|did not (finish|answer)/i.test(String(e?.name) + ' ' + String(e?.message))
+
+/** `promise`, or a TimeoutError naming `what` when it has not settled within `ms`. */
+export function withTimeout (promise, ms, what) {
+  let timer
+  const limit = new Promise((resolve, reject) => {
+    timer = setTimeout(() => reject(Object.assign(new Error(`${what} did not answer within ${Math.round(ms / 1000)} s (KALOKO_LAUNCH_TIMEOUT)`), { name: 'TimeoutError' })), ms)
+  })
+  return Promise.race([promise, limit]).finally(() => clearTimeout(timer))
+}
+
+/** Runs `attempt` and, when it timed out, once more; any other error reaches the caller. */
+export async function retryOnTimeout (attempt) {
+  try { return await attempt() } catch (e) {
+    if (!isTimeout(e)) throw e
+    return attempt()
+  }
+}
+
+/**
+ * Puts a time limit on newContext and newPage of a browser: a browser that stopped answering (seen on loaded
+ * machines: launched fine, then Target.createBrowserContext never returned) fails the command instead of holding it
+ * forever. A context that arrives after the limit is closed.
+ */
+export function limitBrowser (browser, ms = answerLimit()) {
+  if (!browser || typeof browser.newContext !== 'function' || browser.__kalokoLimited) return browser
+  for (const name of ['newContext', 'newPage']) {
+    const call = browser[name].bind(browser)
+    browser[name] = (...a) => {
+      const pending = call(...a)
+      return withTimeout(pending, ms, `browser.${name}`).catch((e) => {
+        if (isTimeout(e)) pending.then((x) => x?.close?.().catch(() => {}), () => {})
+        throw e
+      })
+    }
+  }
+  browser.__kalokoLimited = true
+  return browser
+}
+
 /**
  * Launches a browser with a time limit and one more try: on a busy machine a browser now and then starts but never
- * answers, and Playwright would wait for it forever. Playwright ends the process of a launch that timed out.
- * KALOKO_LAUNCH_TIMEOUT (seconds, default 45) sets the limit.
+ * answers, and Playwright would wait for it forever. Playwright ends the process of a launch that timed out. A
+ * launched browser must open a context within answerLimit(); one that does not is closed (Playwright kills it when it
+ * does not close within 30 s) and the launch is tried once more. KALOKO_LAUNCH_TIMEOUT (seconds, default 45).
  */
 export async function launchWithRetry (browserType, options = {}) {
-  const timeout = (Number(process.env.KALOKO_LAUNCH_TIMEOUT) || 45) * 1000
-  try { return await browserType.launch({ timeout, ...options }) } catch (e) {
-    if (!/Timeout/i.test(String(e?.name) + String(e?.message))) throw e
-    return browserType.launch({ timeout, ...options })
-  }
+  const timeout = launchLimit()
+  return retryOnTimeout(async () => {
+    const browser = await browserType.launch({ timeout, ...options })
+    if (typeof browser?.newContext !== 'function') return browser
+    try {
+      await withTimeout(browser.newContext().then((c) => c.close()), answerLimit(), 'the new browser')
+    } catch (e) {
+      browser.close().catch(() => {}) // not awaited: the next try starts while Playwright closes or kills this one
+      throw e
+    }
+    return limitBrowser(browser)
+  })
+}
+
+/** chromium.connectOverCDP with a time limit and one more try; the browser's newContext/newPage are limited too. */
+export async function connectWithRetry (browserType, endpoint, options = {}) {
+  const timeout = launchLimit()
+  return limitBrowser(await retryOnTimeout(() => browserType.connectOverCDP(endpoint, { timeout, ...options })))
+}
+
+/** chromium.launchPersistentContext with a time limit and one more try (the shared browser's daemon). */
+export async function launchPersistentWithRetry (browserType, profile, options = {}) {
+  const timeout = launchLimit()
+  return retryOnTimeout(() => browserType.launchPersistentContext(profile, { timeout, ...options }))
 }
 
 export async function launchEphemeral (config) {

package/src/lib/doctor.mjs

@@ -237,7 +237,8 @@ async function defaultInstall (engine) {
 
 async function defaultEngine (engine) {
   const pw = await import('playwright')
-  const browser = await pw[engine].launch({ headless: true })
+  const { launchWithRetry } = await import('./browser.mjs')
+  const browser = await launchWithRetry(pw[engine], { headless: true })
   const version = browser.version()
   await browser.close()
   return { version }
@@ -245,7 +246,8 @@ async function defaultEngine (engine) {
 
 async function defaultLaunch (config) {
   const { chromium } = await import('playwright')
-  const browser = await chromium.launch({ headless: true, channel: config.browser?.channel || undefined })
+  const { launchWithRetry } = await import('./browser.mjs')
+  const browser = await launchWithRetry(chromium, { headless: true, channel: config.browser?.channel || undefined })
   const version = browser.version()
   await browser.close()
   return { version }

package/viewer/index.html

@@ -2502,7 +2502,11 @@ function renderPresence () {
   // a phone shows two faces at most (one when the bar is tight), a computer six; the rest is a count
   const tight = !!$('presence').closest('.bar')?.classList.contains('is-tight'); const max = phoneBar() ? (tight ? 1 : 2) : tight ? 2 : 6;
   const faces = [...[...PR.agents.values()].map((x) => `<span class="pav pav--agent" style="--c:#151514" title="${esc(x.name)} ${esc(T('viaAgent'))} ${esc(x.email)}${x.step ? ` · ${esc(x.step)}` : ''}">AI</span>`), ...peers.map((p) => `<button class="pav" style="--c:${peerColor(p.email)}" data-follow="${esc(p.id)}" aria-pressed="${PR.follow === p.id}" title="${esc(p.email)} · ${esc(T('followHint'))}">${esc(initials(p.name || p.email))}</button>`)];
+  // the list is redrawn on every presence update: keep keyboard focus on the same control instead of losing it
+  const had = el.contains(document.activeElement) ? document.activeElement : null
+  const keep = had && (had.dataset.follow ? `[data-follow="${CSS.escape(had.dataset.follow)}"]` : had.matches('[data-present]') ? '[data-present]' : had.matches('[data-vis]') ? '[data-vis]' : had.matches('[data-pmenu]') ? '[data-pmenu]' : null)
   el.innerHTML = faces.slice(0, max).join('') + (faces.length > max ? `<span class="muted">+${faces.length - max}</span>` : '') + menu;
+  if (keep) el.querySelector(keep)?.focus({ preventScroll: true })
   requestAnimationFrame(fitBar);
   el.onclick = (e) => {
     if (e.target.closest('[data-pmenu]')) { e.stopPropagation(); S.closeMenus?.('pmenu'); PR.menu = !PR.menu; renderPresence(); placePop(el.querySelector('.pmenu')); return; }