kaloko 0.21.1 → 0.21.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kaloko",
-  "version": "0.21.1",
+  "version": "0.21.3",
   "description": "Your AI agents build; Kaloko walks every screen, puts it on one canvas and records who approved what.",
   "keywords": [
     "qa",

package/src/cli.mjs

@@ -12,7 +12,7 @@ import { startRefs, normalizePurpose, RUN_PURPOSES } from './lib/run-refs.mjs'
 import { gitMeta, projectAndIssue, appVersion } from './lib/git.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 { observeConsole, pageTarget } from './lib/console.mjs'
 import { mailClient, waitForMessage, recipient, readMessageFile } from './lib/mail.mjs'
 import { newContext, accountFor, gateHeaders, gateOrigins, originMatcher, gateForRequests } from './lib/access.mjs'
 import { configureGate, disposeShared } from './lib/linkcheck.mjs'
@@ -810,7 +810,7 @@ async function exportScenario ({ args, config, root, client }) {
  * Walks a stack step: resolves its pages, then opens and captures each one with the step's criteria and index
  * fields (HTTP status of the main document included). A step script, when given, runs per page with `item`.
  */
-async function walkStack ({ node, locale, page, env, run, scenario, scenarioDir, config, consoleFile, args, keys = null, tag = '', cache = null, gate = null }) {
+async function walkStack ({ node, locale, page, env, run, scenario, scenarioDir, config, consoleFile, consoleBound = null, args, keys = null, tag = '', cache = null, gate = null }) {
   // a rotating sample (items.rotate) remembers between runs how many runs walked it and when each page was checked
   const statePath = (l) => join(run.dir, '..', '.cache', 'stack', scenario.id, `${node.id}.${l}.json`)
   const state = node.items?.rotate ? await rotationState(statePath(locale), run.meta.id) : null
@@ -854,13 +854,17 @@ async function walkStack ({ node, locale, page, env, run, scenario, scenarioDir,
   const streak = failureStreak(5)
   const failed = []; let ok = 0; const checkedNow = []
   const started = Date.now(); let told = started
+  let from = consoleBound?.since(page) || new Date().toISOString()
   try {
     for (const [i, item] of chosen.entries()) {
       if (streak.stopped('stack')) { failed.push(`${item.id}: not walked after repeated failures`); continue }
       status = null
-      const since = Date.now()
+      // the console counts from the previous page's last capture on this tab (an ISO time: a number never matched an
+      // entry's time, so stack pages never reported a console error)
+      const since = from
       let captured = false
-      const capture = (opts = {}) => { captured = true; return captureStep({ page, node, locale, viewports: opts.viewports ? scopeKeys(run.meta.scope, passKeys, opts.viewports) : viewports, run, consoleFile, since, item, fields, maxChars: config.evaluators?.jev?.max_state_chars, options: captureOptions(scenario, node), extra: { http_status: status } }) }
+      let lastCapture = null
+      const capture = (opts = {}) => { captured = true; lastCapture = new Date().toISOString(); return captureStep({ page, node, locale, viewports: opts.viewports ? scopeKeys(run.meta.scope, passKeys, opts.viewports) : viewports, run, consoleFile, since, item, fields, maxChars: config.evaluators?.jev?.max_state_chars, options: captureOptions(scenario, node), extra: { http_status: status } }) }
       try {
         if (script) await script.default({ page, item, url: () => item.url, locale, env, run: run.meta, capture, acceptDialogs: () => acceptDialogs(page) })
         else await page.goto(item.url, { waitUntil: 'domcontentloaded', timeout: 30000 })
@@ -870,10 +874,11 @@ async function walkStack ({ node, locale, page, env, run, scenario, scenarioDir,
         failed.push(`${item.id} (${item.path}): ${error.message.split('\n')[0]}`)
         if (streak.record('stack', error.message)) say(`  stopping ${node.id} (${locale}${tag}): the last 5 pages failed with the same error`)
       }
+      from = lastCapture || new Date().toISOString()
       // long stacks: progress every 25 pages (or 30 s) with the time left, estimated from the pages so far
       if (i + 1 < chosen.length && ((i + 1) % 25 === 0 || Date.now() - told > 30000)) { told = Date.now(); const left = timeLeft(i + 1, chosen.length, told - started); say(`  ${node.id} ${locale}: ${i + 1}/${chosen.length}${left ? ` · ${left}` : ''}`) }
     }
-  } finally { page.off('response', onResponse) }
+  } finally { page.off('response', onResponse); consoleBound?.done(page, from) }
   // the rotation of this locale goes into the run (the stack index shows it) and the pages checked into the state
   if (state && rotation) {
     const checked = await state.save(checkedNow, all)
@@ -1531,7 +1536,11 @@ const commands = {
         say(`Attached ${entry.file} to ${node.id}`)
         return
       }
-      const since = (await readCaptures(run.dir)).filter((c) => c.node === node.id).map((c) => c.at).pop()
+      // the console counts from the run's start, or from the run's last capture on this tab (#197): what the shared
+      // browser logged before belongs to another run or to the step captured then. A capture that names no tab (an
+      // own browser, an older version) bounds every tab; one on another tab does not (its errors are not ours)
+      const tab = conn ? await pageTarget(page) : null
+      const since = (await readCaptures(run.dir)).filter((c) => c.type !== 'attachment' && c.at && !c.carried_from && (!c.tab || !tab || c.tab === tab)).map((c) => c.at).reduce((a, b) => (b > a ? b : a), run.meta.started_at || '') || undefined
       const results = await captureStep({ page, node, locale, options: captureOptions(scenario, node), viewports: inState(run, node, manualKeys(run, list(args.viewports)), args.state), run, consoleFile: conn ? consoleLog(root, config.output, env.name) : null, maxChars: config.evaluators?.jev?.max_state_chars, since, htmlView: htmlViewAllowed(env, scenario) ? { scenarioId: scenario.id } : null, stability: Number(args.stability) || 0 })
       for (const r of results) {
         const failed = Object.entries(r.checks).filter(([, v]) => v.ok === false).map(([k]) => k)
@@ -1689,6 +1698,10 @@ const commands = {
           const page = await lctx.newPage()
           const shared = conn && !parallel && plain // the shared browser's own context logs its console to a file
           if (!shared) observeConsole(page)
+          // where each page's console counts from (#197): from the walk's start on it, then from the previous step's
+          // last capture on it, so what a page logs between two steps counts in the next one and nothing older does
+          const consoleFrom = new WeakMap([[page, new Date().toISOString()]])
+          const consoleBound = { since: (p) => consoleFrom.get(p) || run.meta.started_at, done: (p, at) => consoleFrom.set(p, at || new Date().toISOString()) }
           // one recorder per page (the walk's tab and each named session's), started on its first step;
           // recordings and traces need CDP: Chromium passes only
           const recorders = new Map()
@@ -1699,7 +1712,7 @@ const commands = {
           }
           try {
             // every locale starts as a new visitor on its first walk in the run (an own context is new already)
-            if (shared && !walked.some((c) => c.locale === locale)) { await resetSession(lctx, page, baseUrl(env, locale)); say(`session reset (new visitor, ${locale}${tag})`) }
+            if (shared && !walked.some((c) => c.locale === locale)) { await resetSession(lctx, page, baseUrl(env, locale)); consoleBound.done(page); say(`session reset (new visitor, ${locale}${tag})`) }
             for (const node of scenario.nodes) {
               if (node.kind === 'decision' || (pick && !pick.includes(node.id))) continue
               if (node.kind !== 'stack' && node.path && !urlFor(env, node, locale)) continue // step does not exist in this locale
@@ -1710,7 +1723,7 @@ const commands = {
               const consoleFile = shared && !sess ? consoleLog(root, config.output, env.name) : null
               if (node.kind === 'stack') {
                 try {
-                  const bad = await walkStack({ node, locale, page: sPage, env, run, scenario, scenarioDir, config, consoleFile, args, keys: pass.keys, tag, cache: stackCache, gate: stackGate })
+                  const bad = await walkStack({ node, locale, page: sPage, env, run, scenario, scenarioDir, config, consoleFile, consoleBound, args, keys: pass.keys, tag, cache: stackCache, gate: stackGate })
                   for (const b of bad) failed.push(`${node.id} (${locale}${tag}) ${b}`)
                 } catch (error) {
                   failed.push(`${node.id} (${locale}${tag}): ${error.message.split('\n')[0]}`)
@@ -1745,11 +1758,15 @@ const commands = {
                 const rec = state === 'default' ? rec0 : null
                 rec?.beforeStep(node)
                 const records = []
-                const capture = (opts = {}) => { captured = true; rec?.beforeCapture(node); return captureStep({ page: sPage, node, locale, options: captureOptions(scenario, node), viewports: scopeKeys(run.meta.scope, stateKeys(run.meta.scope, Object.keys(scopeKeys(run.meta.scope, pass.keys, opts.viewports || null)), state)), run, htmlView: htmlViewAllowed(env, scenario) ? { scenarioId: scenario.id } : null, consoleFile, maxChars: config.evaluators?.jev?.max_state_chars, extra: node.session ? { session: node.session } : {}, stability: Number(args.stability) || 0 }).then((r) => { prefetch?.add(r, run.dir); records.push(...r); return r }) }
+                // the console counts from the previous step's last capture on this page (#197), for every capture the
+                // step takes: a later capture of the same view replaces the earlier one and must still name what it logged
+                const since = consoleBound.since(sPage)
+                let lastCapture = null
+                const capture = (opts = {}) => { captured = true; rec?.beforeCapture(node); lastCapture = new Date().toISOString(); return captureStep({ page: sPage, node, locale, options: captureOptions(scenario, node), viewports: scopeKeys(run.meta.scope, stateKeys(run.meta.scope, Object.keys(scopeKeys(run.meta.scope, pass.keys, opts.viewports || null)), state)), run, htmlView: htmlViewAllowed(env, scenario) ? { scenarioId: scenario.id } : null, consoleFile, since, maxChars: config.evaluators?.jev?.max_state_chars, extra: node.session ? { session: node.session } : {}, stability: Number(args.stability) || 0 }).then((r) => { prefetch?.add(r, run.dir); records.push(...r); return r }) }
                 try {
                   await mod.default({ page: sPage, context: sCtx, locale, state, node: { id: node.id, title: localized(node.title, locale), kind: node.kind, ...(node.states ? { states: nodeStates(run.meta.scope, node) } : {}) }, session: sessionInfo(node.session), url: (id = node.id) => urlFor(env, stepOf(scenario, id), locale), env, run: run.meta, capture, crop: (selector, title, o = {}) => captureCrop({ page: sPage, node, locale, selector, title, run, padding: Number(o.padding) || 0, options: captureOptions(scenario, node) }), acceptDialogs: () => acceptDialogs(sPage) })
                   if (!captured) await capture()
-                } catch (error) { await rec?.afterStep(node, { error }); throw error }
+                } catch (error) { await rec?.afterStep(node, { error }); throw error } finally { consoleBound.done(sPage, lastCapture) }
                 await rec?.afterStep(node, { records })
               }
               try {

package/src/lib/access.mjs

@@ -91,7 +91,7 @@ export async function prepareContext (context, env, { log } = {}) {
     const request = route.request()
     const reason = policyViolation(env, { method: request.method(), url: request.url() })
     if (reason) {
-      log?.({ type: 'blocked', url: request.url(), text: reason })
+      log?.({ type: 'blocked', url: request.url(), text: reason }, request)
       return route.abort('blockedbyclient')
     }
     if (toGate(request.url())) {

package/src/lib/browser-daemon.mjs

@@ -3,9 +3,10 @@
 // policy and gate on every request and records console errors for captures.
 // Secrets are resolved here from the inherited environment, never passed in argv.
 import { chromium } from 'playwright'
-import { writeJson, appendJsonl } from './util.mjs'
+import { writeJson } from './util.mjs'
 import { prepareContext, clientCertificates } from './access.mjs'
 import { launchPersistentWithRetry } from './browser.mjs'
+import { consoleWriter, pageTarget } from './console.mjs'
 
 const opts = JSON.parse(process.argv[2])
 const certs = opts.env ? clientCertificates(opts.env, opts.root) : []
@@ -18,10 +19,29 @@ const context = await launchPersistentWithRetry(chromium, opts.profile, {
   args: [`--remote-debugging-port=${opts.port}`]
 })
 
-const log = (entry) => appendJsonl(opts.consoleFile, { ts: new Date().toISOString(), ...entry }).catch(() => {})
+// the console log starts empty with the browser (once it is up): what an earlier one logged belongs to no page of it
+const consoleLog = await consoleWriter(opts.consoleFile)
+
+// every entry names its tab (#197): a capture counts only the errors of the page it captures, not of other tabs
+const tabs = new WeakMap()
+const tabOf = (page) => {
+  if (!page) return Promise.resolve(null)
+  // a lookup that failed or timed out is tried again with the next entry
+  if (!tabs.has(page)) tabs.set(page, pageTarget(page).then((id) => { if (!id) tabs.delete(page); return id }))
+  return tabs.get(page)
+}
+const pageOf = (request) => { try { return request.frame().page() } catch { return null } }
+const log = (entry, request = null) => {
+  const ts = new Date().toISOString()
+  return consoleLog.append(tabOf(entry.page || pageOf(request)).then((tab) => {
+    const { page, ...rest } = entry
+    return { ts, ...rest, ...(tab ? { tab } : {}) }
+  }))
+}
 const watch = (page) => {
-  page.on('console', (m) => { if (m.type() === 'error') log({ type: 'console', url: page.url(), text: m.text(), src: m.location()?.url || null }) })
-  page.on('pageerror', (e) => log({ type: 'pageerror', url: page.url(), text: e.message }))
+  tabOf(page)
+  page.on('console', (m) => { if (m.type() === 'error') log({ page, type: 'console', url: page.url(), text: m.text(), src: m.location()?.url || null }) })
+  page.on('pageerror', (e) => log({ page, type: 'pageerror', url: page.url(), text: e.message }))
 }
 context.pages().forEach(watch)
 context.on('page', watch)

package/src/lib/capture.mjs

@@ -3,7 +3,7 @@ import { dirname, relative, join } from 'node:path'
 import { buildHtmlView } from './htmlview.mjs'
 import { probe } from './probe.mjs'
 import { pageSpecScript } from './devspec.mjs'
-import { writeJson, readJsonl } from './util.mjs'
+import { writeJson } from './util.mjs'
 import { addCapture, runPaths } from './run.mjs'
 import { maskSpec, maskList, inPage, maskInPage, rememberPii, knownPii, maskMailHeaders, maskHtml, scrubDeep, scrubText, updateMasks, loadKnownPii, saveKnownPii, RECORD_PLAIN_KEYS } from './pii.mjs'
 
@@ -98,7 +98,7 @@ export function captureOptions (scenario, node) {
 }
 
 import { criteriaHash } from './evaluate.mjs'
-import { consoleEntriesFor } from './console.mjs'
+import { consoleEntriesFor, readConsoleLog, pageTarget, entriesSince } from './console.mjs'
 import { redact, redactDeep } from './secrets.mjs'
 import { readFields } from './stack.mjs'
 import { checkLinks, checkHreflang, checkLlmsTxt, requester, walkCache, NETWORK_ASSERTS, isolatedRequest, anonymousRequest, cacheScope } from './linkcheck.mjs'
@@ -203,6 +203,10 @@ export async function captureStep ({ page, node, locale, viewports, run, console
   // batch E: the engine of this page, and per key its colour scheme, motion and display mode (run scope variants)
   const engine = engineOf(page)
   const scope = run.meta?.scope
+  // console entries (#197): only those since `since` (an ISO time; a number is a time in ms) and, in the shared
+  // browser, only those of this page's tab
+  if (typeof since === 'number') since = new Date(since).toISOString()
+  const tab = consoleFile ? await pageTarget(page) : null
   for (const [viewport, [width, height]] of Object.entries(viewports)) {
     const now = page.viewportSize()
     if (!now || now.width !== width || now.height !== height) await page.setViewportSize({ width, height })
@@ -230,8 +234,8 @@ export async function captureStep ({ page, node, locale, viewports, run, console
       Object.assign(result.checks, localeChecks(node.criteria, { locale, meta: result.meta, url: page.url(), state: result.state }))
       // the console is read before the mask: the page's own reaction to masked text never counts as its error
       const url = page.url()
-      const collected = consoleFile ? await readJsonl(consoleFile) : consoleEntriesFor(page)
-      const consoleEntries = (collected || []).filter((e) => !since || e.ts >= since)
+      const collected = consoleFile ? await readConsoleLog(consoleFile) : consoleEntriesFor(page)
+      const consoleEntries = entriesSince(collected, { since, tab })
       // requests blocked by the readonly policy surface as ERR_BLOCKED_BY_CLIENT; they are reported separately
       // an error page's own status ("Failed to load resource: … 404" for the document itself) is not a console error
       const ownStatus = (e) => result.http_status >= 400 && /^Failed to load resource: the server responded with a status of \d+/.test(e.text) && e.src && sameDocument(e.src, url)
@@ -386,7 +390,7 @@ export async function captureStep ({ page, node, locale, viewports, run, console
       if (mask.active) await saveKnownPii(run.dir)
       const file = paths.step(stepId, locale, viewport, 'capture.json')
       await writeJson(file, stored)
-      await addCapture(run.dir, { type: 'capture', node: node.id, ...(item ? { item: item.id } : {}), locale, viewport, file: relative(run.dir, file), at: record.captured_at })
+      await addCapture(run.dir, { type: 'capture', node: node.id, ...(item ? { item: item.id } : {}), locale, viewport, file: relative(run.dir, file), at: record.captured_at, ...(tab ? { tab } : {}) })
       results.push(stored)
     } finally {
       // the page gets its own text back, also when the capture failed half-way

package/src/lib/console.mjs

@@ -1,3 +1,6 @@
+import { appendFile, mkdir, readFile, rename, rm } from 'node:fs/promises'
+import { dirname } from 'node:path'
+
 // In-memory collection for browsers that are not managed by the daemon.
 const logs = new WeakMap()
 
@@ -11,3 +14,77 @@ export function observeConsole (page) {
 }
 
 export const consoleEntriesFor = (page) => logs.get(page) ?? null
+
+// The shared browser's console log (#197): one file per environment, written by the browser daemon only. It starts
+// empty with every browser start and keeps at most two parts of CONSOLE_LIMIT bytes (the current one and the one
+// before), so a browser that runs for days does not grow it without end and a capture reads a few MB at most.
+export const CONSOLE_LIMIT = 2 * 1024 * 1024
+const previousPart = (file) => file.replace(/(\.jsonl)?$/, '.old.jsonl')
+
+/** Appends entries in call order; starts the log afresh and moves it aside as the previous part past `limit` bytes. */
+export async function consoleWriter (file, { limit = CONSOLE_LIMIT } = {}) {
+  await mkdir(dirname(file), { recursive: true })
+  await rm(previousPart(file), { force: true })
+  await rm(file, { force: true })
+  let size = 0
+  let queue = Promise.resolve()
+  const write = async (entry) => {
+    const line = JSON.stringify(entry) + '\n'
+    const bytes = Buffer.byteLength(line)
+    if (size > 0 && size + bytes > limit) { await rename(file, previousPart(file)).catch(() => {}); size = 0 }
+    await appendFile(file, line)
+    size += bytes
+  }
+  // an entry may be a promise (its tab is looked up first): the file keeps the order of the calls
+  const append = (entry) => { queue = queue.then(async () => write(await entry)).catch(() => {}); return queue }
+  return { append, flushed: () => queue }
+}
+
+// one part of the log, line by line: a line cut short (the daemon was writing it) is skipped, never the whole part
+async function readPart (file) {
+  const text = await readFile(file, 'utf8').catch(() => '')
+  const lines = []
+  for (const line of text.split('\n')) {
+    if (!line) continue
+    try { lines.push({ line, entry: JSON.parse(line) }) } catch {}
+  }
+  return lines
+}
+
+/** Every entry the shared browser's console log still holds, the previous part first. */
+export async function readConsoleLog (file) {
+  // the current part first: when the daemon moves it aside between the two reads, its entries are in the previous
+  // part then and are read twice (and kept once), never lost
+  const current = await readPart(file)
+  const previous = await readPart(previousPart(file))
+  const moved = new Set(previous.map(({ line }) => line))
+  return [...previous, ...current.filter(({ line }) => !moved.has(line))].map(({ entry }) => entry)
+}
+
+/**
+ * The browser's own id of a page's tab (a CDP target id). The daemon and every process connected over CDP see the
+ * same id, so a capture keeps only the entries of the tab it captures. Null outside Chromium.
+ */
+export async function pageTarget (page, { timeout = 3000 } = {}) {
+  let session, timer
+  const lookup = (async () => {
+    session = await page.context().newCDPSession(page)
+    const { targetInfo } = await session.send('Target.getTargetInfo')
+    return targetInfo?.targetId || null
+  })()
+  try {
+    // a page that hangs (a modal dialog, a busy renderer) leaves its entries untagged rather than holding the log
+    return await Promise.race([lookup, new Promise((resolve) => { timer = setTimeout(() => resolve(null), timeout) })])
+  } catch { return null } finally {
+    clearTimeout(timer)
+    lookup.then(() => session?.detach(), () => {}).catch(() => {})
+  }
+}
+
+/**
+ * The entries a capture may count: written at or after `since` (an ISO time) and, when the tab is known, on that
+ * tab. Entries without a tab (a browser started by an older version) are kept: the time bound still holds for them.
+ */
+export function entriesSince (entries, { since = null, tab = null } = {}) {
+  return (entries || []).filter((e) => (!since || e.ts >= since) && (!tab || !e.tab || e.tab === tab))
+}

package/src/lib/doctor.mjs

@@ -175,6 +175,9 @@ export async function doctor ({ config, root, file = null, fetchImpl = fetch, la
         // sharing runs needs the Developer / Tester role (or admin) and, on tokens with scope sets, the upload scope
         const canShare = ['tester', 'admin'].includes(me.role) && (!Array.isArray(me.scopes) || me.scopes.includes('upload'))
         add('token', sameOrg, `${me.email} · ${me.role} · org ${me.org}${canShare ? '' : ' (this token cannot share runs)'}`, sameOrg ? '' : `The token belongs to organization "${me.org}" but the config says "${config.org}".`)
+        // doctor --json carries the scopes, so a script can tell before a long walk whether the token may also make
+        // a run public (full), not only share it (upload): scripts/demo-run.mjs (#62)
+        if (Array.isArray(me.scopes)) checks[checks.length - 1].scopes = me.scopes
         if (!canShare) add('token role', false, Array.isArray(me.scopes) ? `${me.role} · ${me.scopes.join(', ')}` : me.role, 'kaloko share needs a Developer / Tester token with the upload scope.')
       }
     } catch (e) { add('token', false, `${service} unreachable: ${e.cause?.code || e.message}`, 'Check your network or VPN; KALOKO_URL points the CLI to another service.') }

package/viewer/index.html

@@ -573,7 +573,7 @@ html.is-panning,html.is-panning *{user-select:none;-webkit-user-select:none}
 /* how a criterion was checked: kind, meaning, AI score between the thresholds */
 .how{grid-column:2;display:grid;gap:4px;margin-top:4px;font-size:12.5px}.how__kind{justify-self:start;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px 7px}.how--ai{color:var(--ink);border-color:var(--ink)}.how__q{color:var(--ink)}.how__line{color:var(--muted)}.how__why{color:var(--ink)}.how__why b{font-weight:600;margin-right:4px}
 .gauge{position:relative;display:block;height:8px;border-radius:4px;background:var(--skip-bg);overflow:visible;margin:2px 0}.gauge__lo{position:absolute;left:0;top:0;bottom:0;background:var(--fail-bg);border-radius:4px 0 0 4px}.gauge__hi{position:absolute;right:0;top:0;bottom:0;background:var(--pass-bg);border-radius:0 4px 4px 0}.gauge b{position:absolute;top:-3px;width:3px;height:14px;margin-left:-1.5px;background:var(--ink);border-radius:2px}
-.ac li .tech{grid-column:2;font-size:11.5px}.ac li .tech summary{cursor:pointer;color:var(--muted)}
+.ac li .tech{font-size:11.5px}.ac li .tech summary{cursor:pointer;color:var(--muted)}
 .ac{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
 .ac li{display:grid;grid-template-columns:22px 1fr;gap:2px 8px;padding:8px;border-radius:6px;border:1px solid var(--line)}
 .ac li:hover{border-color:var(--ink)}