@flowriki/agent 0.1.0-beta.18 → 0.1.0-beta.19

package/dist/{chunk-ZGXVQ2QA.js → chunk-K6L6NDH6.js}

@@ -6,7 +6,7 @@ import os from "os";
 import path from "path";
 import { createRequire } from "module";
 import { spawnSync } from "child_process";
-var AGENT_VERSION = "0.1.0-beta.18";
+var AGENT_VERSION = "0.1.0-beta.19";
 async function prepareBrowsers() {
   if (browsersReady()) {
     return { ok: true, already: true, message: "chromium is already installed" };
@@ -1113,8 +1113,22 @@ var AuthNavigationSchema = z32.discriminatedUnion("kind", [
   z32.object({ kind: z32.literal("open"), path: z32.string().min(1) })
 ]);
 var AuthFieldSchema = z32.object({
-  /** The step in the recorded procedure this value is typed into. */
+  /** The step in the recorded procedure this value is typed into. Where a
+   *  recording types into the same box more than once, this is the FIRST of
+   *  them — the one an account's values are keyed by. */
   stepId: z32.string().min(1),
+  /** EVERY step that types into this box, when there is more than one.
+   *
+   * A login typed twice — a first attempt with a typo, a page that re-rendered
+   * and was filled again — records two steps for one field, because keystrokes
+   * coalesce only with the step immediately before them. Asking an account for
+   * "Username" twice is the visible half of that; the dangerous half is that
+   * substituting only the first leaves the second typing whatever was
+   * recorded, so a run signs in as the person who made the recording.
+   *
+   * Empty means the one step in `stepId`, so every profile written before this
+   * reads correctly without being migrated. */
+  stepIds: z32.array(z32.string().min(1)).default([]),
   /** What it is called where somebody fills it in — the field's own name on
    *  the page, so an account form reads "Username" rather than "st_9f2a". */
   label: z32.string().min(1),
@@ -2255,6 +2269,29 @@ function installDebugPanel() {
     const head = first.filter((id) => !seen.has(id) && (seen.add(id), checkById(id)));
     return [...head.map((id) => checkById(id)), ...CHECKS2.filter((c) => !seen.has(c.id))];
   }
+  const GROUP_LABELS = {
+    state: "State",
+    text: "Text",
+    value: "Value",
+    attributes: "Attributes",
+    count: "How many",
+    page: "The page"
+  };
+  function optionsHtml(options, selected) {
+    const option = (c) => `<option value="${c.id}"${c.id === selected ? " selected" : ""}>${esc(c.label)}</option>`;
+    const suggested = options.slice(0, 3);
+    const rest = options.slice(3);
+    const byGroup = /* @__PURE__ */ new Map();
+    for (const c of rest) {
+      const key = c.group ?? "state";
+      const list = byGroup.get(key) ?? [];
+      list.push(c);
+      byGroup.set(key, list);
+    }
+    return (suggested.length ? `<optgroup label="Most likely">${suggested.map(option).join("")}</optgroup>` : "") + [...byGroup.entries()].map(
+      ([group, list]) => `<optgroup label="${esc(GROUP_LABELS[group] ?? group)}">${list.map(option).join("")}</optgroup>`
+    ).join("");
+  }
   function prefill(c, r) {
     if (c.kind === "url") return location.pathname + location.search;
     if (c.kind === "title") return document.title;
@@ -2278,9 +2315,7 @@ function installDebugPanel() {
     const current = checkById(checkId) ?? options[0];
     const target = picked?.target;
     const subject = target ? `${esc(String(target.role || "element"))}${target.name ? " \xB7 <b>" + esc(String(target.name)) + "</b>" : ""}` : "the page";
-    return `<div class="as"><div class="row"><span class="tgt">${subject}</span><span class="sp"></span>` + (picked ? '<button id="arepick">Pick another</button>' : "") + '</div><div class="row"><select id="acheck">' + options.map(
-      (c) => `<option value="${c.id}"${c.id === current.id ? " selected" : ""}>${esc(c.label)}</option>`
-    ).join("") + "</select>" + (current.attr ? `<input type="text" id="aattr" placeholder="attribute" value="${esc(defaultAttr(r))}">` : "") + (current.input ? `<input type="text" id="aval" placeholder="expected" value="${esc(prefill(current, r))}">` : "") + `</div><div class="row"><label class="lb"><input type="checkbox" id="asoft"${softCheck ? " checked" : ""}>Keep going if this fails</label><span class="sp"></span><button id="aclose">Cancel</button><button id="aadd" class="primary"${trouble && !checkById(checkId)?.page ? " disabled" : ""}>Add check</button></div>` + (trouble ? `<div class="err">${esc(trouble)}</div>` : "") + (pickError ? `<div class="err">${esc(pickError)}</div>` : "") + "</div>";
+    return `<div class="as"><div class="row"><span class="tgt">${subject}</span><span class="sp"></span>` + (picked ? '<button id="arepick">Pick another</button>' : "") + '</div><div class="row"><select id="acheck">' + optionsHtml(options, current.id) + "</select>" + (current.attr ? `<input type="text" id="aattr" placeholder="attribute" value="${esc(defaultAttr(r))}">` : "") + (current.input ? `<input type="text" id="aval" placeholder="expected" value="${esc(prefill(current, r))}">` : "") + `</div><div class="row"><label class="lb"><input type="checkbox" id="asoft"${softCheck ? " checked" : ""}>Keep going if this fails</label><span class="sp"></span><button id="aclose">Cancel</button><button id="aadd" class="primary"${trouble && !checkById(checkId)?.page ? " disabled" : ""}>Add check</button></div>` + (trouble ? `<div class="err">${esc(trouble)}</div>` : "") + (pickError ? `<div class="err">${esc(pickError)}</div>` : "") + "</div>";
   }
   function bindAssert() {
     const el = (id) => root.getElementById(id);
@@ -2403,6 +2438,13 @@ function installDebugPanel() {
         unresolvable: picked?.unresolvable ?? false
       }),
       checkOptions: () => Array.from(root.querySelectorAll("#acheck option")).map((o) => o.value),
+      /** The dropdown's headings, in order. Thirty-one options in one layer
+       *  is a list nobody reads, and whether they are grouped is invisible to
+       *  a test that only looks at the values. */
+      checkGroups: () => Array.from(root.querySelectorAll("#acheck optgroup")).map((g) => g.label),
+      /** Options sitting directly under the select rather than inside a
+       *  group — the flat list this was, and the thing that must be empty. */
+      looseCheckOptions: () => Array.from(root.getElementById("acheck")?.children ?? []).filter((c) => c.tagName === "OPTION").length,
       set: (id, value) => {
         const el = root.getElementById(id);
         if (!el) return false;
@@ -2450,12 +2492,23 @@ function installDebugPanel() {
   };
   const STYLE = [
     "<style>",
-    ":host{all:initial}",
+    ":host{all:initial;",
+    "--surface:oklch(20% 0.018 285);--sunken:oklch(13% 0.013 285);",
+    "--raised:oklch(24% 0.018 285);",
+    "--border:oklch(29% 0.018 285);--border-strong:oklch(38% 0.022 285);",
+    "--ink:oklch(97% 0.003 285);--muted:oklch(72% 0.012 285);--subtle:oklch(56% 0.014 285);",
+    "--accent:oklch(70% 0.19 295);--accent-soft:oklch(29% 0.075 295);",
+    "--accent-ink:oklch(82% 0.14 295);--accent-fg:oklch(16% 0.02 285);",
+    "--pass:var(--pass);--pass-soft:var(--pass-soft);",
+    "--fail:var(--fail);--fail-soft:oklch(27% 0.06 22);--fail-fg:var(--fail-fg);",
+    "--warn:var(--warn);--warn-soft:var(--warn-soft);",
+    "--skip:var(--skip);--skip-soft:var(--skip-soft);",
+    "--live:oklch(72% 0.15 250)}",
     ".p{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);",
-    "max-width:min(96vw,1100px);background:oklch(17.5% 0.006 265);",
-    "border:1px solid oklch(28% 0.009 265);border-radius:12px;padding:10px;",
+    "max-width:min(96vw,1100px);background:var(--surface);",
+    "border:1px solid var(--border);border-radius:12px;padding:10px;",
     "box-shadow:0 12px 48px oklch(0% 0 0 / 0.6);",
-    "color:oklch(96% 0.003 265);",
+    "color:var(--ink);",
     "font:500 12px/1.3 'Inter var',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif}",
     ".p.v{top:16px;bottom:auto;left:16px;transform:none;width:300px}",
     // No margin-bottom here: the gap belongs to the steps list, which is not
@@ -2465,7 +2518,7 @@ function installDebugPanel() {
     "cursor:move;user-select:none}",
     ".grip{display:inline-flex;flex-direction:column;gap:2px;padding:4px 2px;opacity:.45}",
     ".grip i{display:block;width:12px;height:2px;border-radius:1px;",
-    "background:oklch(70% 0.008 265)}",
+    "background:var(--muted)}",
     ".p.moved{left:auto;right:auto;bottom:auto;transform:none}",
     // Collapsed: a small pill, not the full panel with nothing in it. The
     // point of minimising is to get out of the way.
@@ -2478,50 +2531,55 @@ function installDebugPanel() {
     // Discard falls off the edge.
     "button{white-space:nowrap}",
     ".sp{flex:1}",
+    // WHAT BELONGS WITH WHAT. Eight controls in an unbroken row is a row you
+    // read left to right every time; a hairline between the groups — what the
+    // run is doing, what you are adding to it, and how you leave — means the
+    // one you want is found by position instead.
+    ".dv{width:1px;align-self:stretch;margin:2px 2px;background:var(--border);flex:0 0 auto}",
     "button{font:inherit;border:0;border-radius:6px;cursor:pointer;padding:6px 10px;",
-    "background:oklch(21% 0.008 265);color:oklch(96% 0.003 265);",
-    "border:1px solid oklch(28% 0.009 265);transition:background .15s}",
-    "button:hover{background:oklch(14.5% 0.006 265)}",
-    "button.primary{background:oklch(68% 0.16 275);color:oklch(17% 0.02 275);border-color:transparent}",
-    "button.danger{background:oklch(68% 0.18 22);color:oklch(17% 0.02 22);border-color:transparent}",
+    "background:var(--raised);color:var(--ink);",
+    "border:1px solid var(--border);transition:background .15s}",
+    "button:hover{background:var(--sunken)}",
+    "button.primary{background:var(--accent);color:var(--accent-fg);border-color:transparent}",
+    "button.danger{background:var(--fail);color:var(--fail-fg);border-color:transparent}",
     "button:disabled{opacity:.4;cursor:default}",
     // The assertion form. A card of its own rather than controls jammed into
     // the bar: it is a different job from driving the recording, and it is
     // only on screen while that job is being done.
     ".as{margin-top:8px;padding:9px;border-radius:8px;",
-    "background:oklch(21% 0.008 265);border:1px solid oklch(28% 0.009 265);",
+    "background:var(--raised);border:1px solid var(--border);",
     "display:flex;flex-direction:column;gap:7px}",
     ".as .row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}",
-    ".as .tgt{font-size:11px;color:oklch(70% 0.008 265);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}",
-    ".as .tgt b{color:oklch(96% 0.003 265);font-weight:600}",
+    ".as .tgt{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}",
+    ".as .tgt b{color:var(--ink);font-weight:600}",
     ".as select,.as input[type=text]{font:inherit;padding:5px 7px;border-radius:6px;",
-    "background:oklch(14.5% 0.006 265);color:oklch(96% 0.003 265);",
-    "border:1px solid oklch(28% 0.009 265);min-width:0}",
+    "background:var(--sunken);color:var(--ink);",
+    "border:1px solid var(--border);min-width:0}",
     ".as select{flex:1 1 150px}",
     ".as input[type=text]{flex:1 1 140px}",
     ".as .lb{display:inline-flex;align-items:center;gap:5px;font-size:11px;",
-    "color:oklch(70% 0.008 265);cursor:pointer}",
-    ".as .err{color:oklch(72% 0.17 22);font-size:11px}",
-    ".as .hint{font-size:11px;color:oklch(70% 0.008 265)}",
+    "color:var(--muted);cursor:pointer}",
+    ".as .err{color:var(--fail);font-size:11px}",
+    ".as .hint{font-size:11px;color:var(--muted)}",
     ".steps{display:flex;gap:4px;align-items:stretch;overflow:auto;padding:2px 0;margin-top:8px}",
     ".steps::-webkit-scrollbar{height:8px;width:8px}",
-    ".steps::-webkit-scrollbar-thumb{background:oklch(36% 0.011 265);border-radius:99px}",
+    ".steps::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:99px}",
     ".p.v .steps{flex-direction:column;max-height:70vh}",
     // The step card, matching the Flows page: ordinal + type pill, then the
     // accessible name, its scope, and its value.
     ".c{position:relative;display:flex;flex-direction:column;gap:5px;width:176px;flex:0 0 auto;",
-    "background:oklch(21% 0.008 265);border:1px solid oklch(28% 0.009 265);",
+    "background:var(--raised);border:1px solid var(--border);",
     "border-radius:8px;padding:9px}",
     ".p.v .c{width:auto}",
-    ".c.cur{border-color:oklch(68% 0.16 275);box-shadow:0 0 0 1px oklch(68% 0.16 275)}",
-    ".c.passed{border-color:oklch(72% 0.15 155 / .5);background:oklch(26% 0.05 155 / .3)}",
-    ".c.failed{border-color:oklch(68% 0.18 22 / .6);background:oklch(27% 0.06 22 / .4)}",
-    ".c.skipped{border-color:oklch(74% 0.11 237 / .5);background:oklch(27% 0.045 237 / .4)}",
+    ".c.cur{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}",
+    ".c.passed{border-color:color-mix(in oklch, var(--pass) 50%, transparent);background:color-mix(in oklch, var(--pass-soft) 55%, transparent)}",
+    ".c.failed{border-color:color-mix(in oklch, var(--fail) 60%, transparent);background:color-mix(in oklch, var(--fail-soft) 60%, transparent)}",
+    ".c.skipped{border-color:color-mix(in oklch, var(--skip) 50%, transparent);background:color-mix(in oklch, var(--skip-soft) 60%, transparent)}",
     // Recorded in THIS session — the steps about to be committed. A colour of
     // their own, because "new" is not a run outcome and reusing pass green or
     // skip sky would say something untrue about whether they ran.
-    ".c.new{border-color:oklch(68% 0.16 275 / .7);background:oklch(28% 0.06 275 / .45)}",
-    ".c.new .o::after{content:' new';color:oklch(80% 0.12 275);font-size:9px}",
+    ".c.new{border-color:color-mix(in oklch, var(--accent) 70%, transparent);background:color-mix(in oklch, var(--accent-soft) 80%, transparent)}",
+    ".c.new .o::after{content:' new';color:var(--accent-ink);font-size:9px}",
     ".c{cursor:grab}.c:active{cursor:grabbing}",
     // Real sorting, not a drop hint. The card you grab is the card that moves,
     // and the others slide to their new places as you go — so the list always
@@ -2530,34 +2588,34 @@ function installDebugPanel() {
     "will-change:transform}",
     ".c.drag{transition:none;z-index:50;cursor:grabbing;",
     "box-shadow:0 14px 36px oklch(0% 0 0 / .55);",
-    "border-color:oklch(68% 0.16 275)}",
+    "border-color:var(--accent)}",
     ".h{display:flex;align-items:center;gap:6px}",
     ".o{font:500 10px ui-monospace,SFMono-Regular,Menlo,monospace;",
-    "font-variant-numeric:tabular-nums;color:oklch(56% 0.009 265)}",
+    "font-variant-numeric:tabular-nums;color:var(--subtle)}",
     ".t{display:inline-flex;align-items:center;border-radius:999px;padding:2px 7px;",
     "font-size:10px;font-weight:500}",
-    ".t.fill,.t.select{background:oklch(28% 0.06 275);color:oklch(80% 0.12 275)}",
-    ".t.click,.t.press{background:oklch(26% 0.05 155);color:oklch(72% 0.15 155)}",
-    ".t.check{background:oklch(28% 0.05 75);color:oklch(80% 0.14 75)}",
-    ".t.back,.t.forward{background:oklch(27% 0.045 237);color:oklch(74% 0.11 237)}",
+    ".t.fill,.t.select{background:var(--accent-soft);color:var(--accent-ink)}",
+    ".t.click,.t.press{background:var(--pass-soft);color:var(--pass)}",
+    ".t.check{background:var(--warn-soft);color:var(--warn)}",
+    ".t.back,.t.forward{background:var(--skip-soft);color:var(--skip)}",
     ".nm{font:500 12px ui-monospace,SFMono-Regular,Menlo,monospace;",
-    "color:oklch(96% 0.003 265);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}",
-    ".sc{font-size:10px;color:oklch(56% 0.009 265);overflow:hidden;",
+    "color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}",
+    ".sc{font-size:10px;color:var(--subtle);overflow:hidden;",
     "text-overflow:ellipsis;white-space:nowrap}",
     ".vl{font:500 10px ui-monospace,SFMono-Regular,Menlo,monospace;",
-    "color:oklch(70% 0.008 265);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}",
+    "color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}",
     ".bp{position:absolute;top:7px;right:24px;width:10px;height:10px;border-radius:50%;",
-    "border:1px solid oklch(56% 0.009 265);background:transparent;padding:0;cursor:pointer}",
-    ".bp:hover{border-color:oklch(68% 0.18 22)}",
-    ".bp.on{background:oklch(68% 0.18 22);border-color:oklch(68% 0.18 22)}",
+    "border:1px solid var(--subtle);background:transparent;padding:0;cursor:pointer}",
+    ".bp:hover{border-color:var(--fail)}",
+    ".bp.on{background:var(--fail);border-color:var(--fail)}",
     ".x{position:absolute;top:4px;right:4px;background:transparent;border:0;padding:2px 4px;",
-    "color:oklch(56% 0.009 265);font-size:13px;line-height:1;cursor:pointer}",
-    ".x:hover{background:transparent;color:oklch(68% 0.18 22)}",
+    "color:var(--subtle);font-size:13px;line-height:1;cursor:pointer}",
+    ".x:hover{background:transparent;color:var(--fail)}",
     ".err{margin-top:8px;padding:7px 9px;border-radius:8px;",
-    "background:oklch(27% 0.06 22 / .5);border:1px solid oklch(68% 0.18 22 / .4);",
-    "color:oklch(68% 0.18 22);white-space:normal;max-width:640px}",
+    "background:color-mix(in oklch, var(--fail-soft) 70%, transparent);border:1px solid color-mix(in oklch, var(--fail) 45%, transparent);",
+    "color:var(--fail);white-space:normal;max-width:640px}",
     ".rec{display:inline-flex;align-items:center;gap:6px}",
-    ".dot{width:7px;height:7px;border-radius:50%;background:oklch(68% 0.18 22);",
+    ".dot{width:7px;height:7px;border-radius:50%;background:var(--fail);",
     "animation:b 1.6s infinite}",
     "@keyframes b{0%,100%{opacity:1}50%{opacity:.25}}",
     "</style>"
@@ -2628,16 +2686,13 @@ function installDebugPanel() {
     }).join("");
     const ran = Object.keys(state.results).length;
     if (state.mode === "record") {
-      p.innerHTML = '<div class="bar"><span class="grip" title="Drag to move"><i></i><i></i><i></i></span><span class="st ' + (state.recording ? "running" : "paused") + '"><span class="d"></span><span>' + (state.recording ? "recording" : "paused") + '</span><span class="prog">&#160;&#183;&#160;' + state.steps.length + (state.steps.length === 1 ? " step" : " steps") + "</span></span>" + // Pausing capture matters: navigating to the part you actually want
-      // to record should not fill the flow with the steps you took to get
-      // there.
-      (state.recording ? '<button id="rec">Pause capture</button>' : '<button id="rec" class="primary">Resume</button>') + // Authoring a check is a first-class part of recording, not something
+      p.innerHTML = '<div class="bar"><span class="grip" title="Drag to move"><i></i><i></i><i></i></span><span class="st ' + (state.recording ? "running" : "paused") + '"><span class="d"></span><span>' + (state.recording ? "recording" : "paused") + '</span><span class="prog">&#160;&#183;&#160;' + state.steps.length + (state.steps.length === 1 ? " step" : " steps") + '</span></span><span class="dv"></span>' + (state.recording ? '<button id="rec" title="Stop capturing while you navigate">Pause capture</button>' : '<button id="rec" class="primary" title="Capture again from here">Resume</button>') + // Authoring a check is a first-class part of recording, not something
       // to go back to the Flowriki tab for — the state worth asserting on is
       // frequently the one that disappears the moment you look away.
       // Hidden rather than disabled while the form is open: the form has an
       // Add check button of its own, and two on screen at once reads as a
       // mistake even when only one of them works.
-      (assertMode === "off" ? '<button id="assert" title="Check something on the page">Add check</button>' : "") + '<span class="sp"></span><button id="orient" title="Switch layout">' + (vertical ? "&#8596;" : "&#8597;") + '</button><button id="hide" title="Collapse">&#8211;</button>' + // Throwing a recording away has to be possible from HERE, in the page.
+      (assertMode === "off" ? '<button id="assert" title="Check something on the page">Add check</button>' : "") + '<span class="sp"></span><button id="orient" title="Switch layout">' + (vertical ? "&#8596;" : "&#8597;") + '</button><button id="hide" title="Collapse">&#8211;</button><span class="dv"></span>' + // Throwing a recording away has to be possible from HERE, in the page.
       // Without it a mis-recording had to be saved and then deleted, which
       // means a wrong flow briefly exists and a wrong secret is briefly on
       // disk.
@@ -2693,9 +2748,14 @@ function installDebugPanel() {
       });
       return;
     }
-    p.innerHTML = '<div class="bar"><span class="grip" title="Drag to move"><i></i><i></i><i></i></span><span class="st ' + esc(stCls) + '"><span class="d"></span><span>' + esc(stLabel) + '</span><span class="prog">&#160;&#183;&#160;' + ran + "/" + state.steps.length + '</span></span><button id="play" class="primary" ' + (running || done ? "disabled" : "") + ">" + (state.failure ? "Skip &amp; continue" : "Play") + "</button>" + (state.failure ? '<button id="retry">Retry</button>' : "") + '<button id="step" ' + (running || done ? "disabled" : "") + '>Step</button><button id="pause" ' + (running ? "" : "disabled") + '>Pause</button><button id="replay" ' + (running ? "disabled" : "") + ">Replay</button>" + // While armed, this is the only way to stop it — so it says so, rather
+    p.innerHTML = '<div class="bar"><span class="grip" title="Drag to move"><i></i><i></i><i></i></span><span class="st ' + esc(stCls) + '"><span class="d"></span><span>' + esc(stLabel) + '</span><span class="prog">&#160;&#183;&#160;' + ran + "/" + state.steps.length + '</span></span><span class="dv"></span><button id="play" class="primary" title="' + (state.failure ? "Give up on this step and carry on" : "Run until the next breakpoint or failure") + '" ' + (running || done ? "disabled" : "") + ">" + (state.failure ? "Skip &amp; continue" : "Play") + "</button>" + (state.failure ? '<button id="retry" title="Run this step again">Retry</button>' : "") + '<button id="step" title="Run exactly one step" ' + (running || done ? "disabled" : "") + '>Step</button><button id="pause" title="Stop after the step in flight" ' + (running ? "" : "disabled") + '>Pause</button><button id="replay" title="Start over from the first step" ' + (running ? "disabled" : "") + '>Replay</button><span class="dv"></span>' + // While armed, this is the only way to stop it — so it says so, rather
     // than reading as a status label nobody realises is a button.
-    (state.recording ? '<button id="rec" class="danger"><span class="rec"><span class="dot"></span>Stop recording</span></button>' : '<button id="rec">Record</button>') + '<span class="sp"></span><button id="orient" title="Switch layout">' + (vertical ? "&#8596;" : "&#8597;") + '</button><button id="hide" title="Collapse">&#8211;</button><button id="finish" class="primary">Save &amp; close</button><button id="discard" class="danger">Discard</button></div>' + // Only when there is something to show. An empty .steps container is
+    (state.recording ? '<button id="rec" class="danger" title="Stop capturing"><span class="rec"><span class="dot"></span>Stop recording</span></button>' : '<button id="rec" title="Capture new steps at the cursor">Record</button>') + // AUTHORING A CHECK BELONGS HERE MOST OF ALL. Recording had it and
+    // debugging did not, which is the wrong way round: the moment worth
+    // adding a check is while looking at a failure, when the state that
+    // explains it is on the screen — and going back to the flow editor to
+    // add one means describing from memory a page that has since moved on.
+    (assertMode === "off" ? '<button id="assert" title="Check something on the page">Add check</button>' : "") + '<span class="sp"></span><button id="orient" title="Switch layout">' + (vertical ? "&#8596;" : "&#8597;") + '</button><button id="hide" title="Collapse">&#8211;</button><span class="dv"></span><button id="finish" class="primary" title="Keep the edits and close">Save &amp; close</button><button id="discard" class="danger" title="Close without keeping the edits">Discard</button></div>' + assertHtml() + // Only when there is something to show. An empty .steps container is
     // still 4px of padding, which left the bar with 10px above it and 14px
     // below — visibly off-centre before anything has been captured.
     (cards ? '<div class="steps">' + cards + "</div>" : "") + (state.failure ? '<div class="err">' + esc(state.failure.error) + "</div>" : "");
@@ -2709,6 +2769,14 @@ function installDebugPanel() {
     on("pause", () => cmd("pause"));
     on("replay", () => cmd("replay"));
     on("rec", () => cmd("record", { on: !state.recording }));
+    on("assert", () => {
+      assertMode = "picking";
+      picked = null;
+      pickError = null;
+      beginPick();
+      render();
+    });
+    bindAssert();
     on("finish", () => cmd("end", { commit: true }));
     on("discard", () => cmd("end", { commit: false }));
     on("orient", () => {
@@ -4517,6 +4585,36 @@ async function replayCase(opts) {
     warnings
   };
 }
+async function describePick(page, payload) {
+  try {
+    const all = await locateAll(page, {
+      id: "pick",
+      type: "click",
+      value: "",
+      secret: false,
+      legacySelector: "",
+      proposals: [],
+      scope: "",
+      ...payload.target
+    });
+    const handles = await all.elementHandles();
+    if (handles.length > 1) {
+      for (const [index, handle] of handles.entries()) {
+        const isIt = await handle.evaluate((el) => el === window.__flPickedEl).catch(() => false);
+        if (isIt) {
+          payload.target["nth"] = index;
+          break;
+        }
+      }
+      if (payload.target["nth"] === void 0) payload.ambiguous = handles.length;
+    } else if (handles.length === 0) {
+      payload.unresolvable = true;
+    }
+    await Promise.all(handles.map((h) => h.dispose().catch(() => {
+    })));
+  } catch {
+  }
+}
 var OUTCOME_WINDOW_MS = 2500;
 var sleep = (ms) => new Promise((r) => setTimeout(r, ms));
 var COMMITS = /* @__PURE__ */ new Set([
@@ -4768,37 +4866,7 @@ async function startRecordingSession(opts) {
     const chain = src?.frame ? frameChains.get(src.frame) : void 0;
     if (chain?.length) payload.target.frame = chain;
     if (src.page) payload.target.pageId = pageIds.get(src.page) ?? "main";
-    try {
-      const on = src.page ?? page;
-      const all = await locateAll(on, {
-        id: "pick",
-        type: "click",
-        value: "",
-        secret: false,
-        legacySelector: "",
-        proposals: [],
-        scope: "",
-        ...payload.target
-      });
-      const handles = await all.elementHandles();
-      if (handles.length > 1) {
-        for (const [i, handle] of handles.entries()) {
-          const isIt = await handle.evaluate((el) => el === window.__flPickedEl).catch(() => false);
-          if (isIt) {
-            payload.target.nth = i;
-            break;
-          }
-        }
-        if (payload.target.nth === void 0) {
-          payload.ambiguous = handles.length;
-        }
-      } else if (handles.length === 0) {
-        payload.unresolvable = true;
-      }
-      await Promise.all(handles.map((h) => h.dispose().catch(() => {
-      })));
-    } catch {
-    }
+    await describePick(src.page ?? page, payload);
     void session.setPicking(false);
     void toPanel({ picked: payload });
   });
@@ -5179,6 +5247,13 @@ async function startDebugSession(opts) {
     );
   }
   const targetIds = /* @__PURE__ */ new Map();
+  const toPanel = async (msg) => {
+    await context.pages()[0]?.evaluate(
+      (v) => window.__flPanelMessage?.(v),
+      msg
+    ).catch(() => {
+    });
+  };
   async function installContext(context2) {
     await context2.exposeBinding("__flRecord", (_src, payload) => {
       if (!recording || !payload || payload.__sig !== void 0 || actors && _src.page.context() !== actors.current.context) return;
@@ -5227,6 +5302,17 @@ async function startDebugSession(opts) {
       };
       publish();
     });
+    await context2.exposeBinding("__flPicked", async (src, payload) => {
+      if (payload?.cancelled) {
+        void session.setPicking(false);
+        void toPanel({ picked: null });
+        return;
+      }
+      if (!payload?.target) return;
+      await describePick(src.page ?? page, payload);
+      void session.setPicking(false);
+      void toPanel({ picked: payload });
+    });
     await context2.exposeBinding("__flCmd", (_src, msg) => {
       void handleCommand(msg).catch((error) => {
         failure = { stepId: cursor ?? steps[0]?.id ?? "", error: firstLine2(error) };
@@ -5234,9 +5320,12 @@ async function startDebugSession(opts) {
         void paint(snapshot());
       });
     });
-    await context2.addInitScript({ content: `${accNameScript2()}
+    await context2.addInitScript({
+      content: `${accNameScript2()}
+;window.__flChecks=${JSON.stringify(CHECKS)};
 ;(${installRecorder.toString()})();
-;(${installDebugPanel.toString()})();` });
+;(${installDebugPanel.toString()})();`
+    });
     context2.on("page", (p) => p.on("domcontentloaded", () => void paint(snapshot())));
   }
   await installContext(context);
@@ -5297,6 +5386,18 @@ async function startDebugSession(opts) {
       case "record":
         await session.setRecording(Boolean(msg.on));
         break;
+      case "pick":
+        await session.setPicking(msg.on !== false);
+        break;
+      case "assert": {
+        await session.setPicking(false);
+        try {
+          session.addAssertion(msg.assertion);
+        } catch (err) {
+          void toPanel({ pickError: firstLine2(err) });
+        }
+        break;
+      }
       case "moveStep":
         session.moveStep(String(msg.stepId), Number(msg.toIndex));
         break;
@@ -5488,6 +5589,42 @@ async function startDebugSession(opts) {
       await setMuted(!on);
       return publish();
     },
+    async setPicking(on) {
+      if (on) await setMuted(true);
+      await Promise.all(
+        (actors?.all().flatMap((s2) => s2.context.pages()) ?? context.pages()).map(
+          (p) => p.evaluate((v) => window.__flSetPicking?.(v), on).catch(() => {
+          })
+        )
+      );
+      if (!on) await setMuted(!recording);
+    },
+    addAssertion(assertion) {
+      const parsed = RecordedAssertionSchema.parse({ enabled: true, ...assertion });
+      const step = {
+        id: `st_${crypto.randomUUID().slice(0, 8)}`,
+        type: "assert",
+        // Mirrored from the target so the step list can name what is being
+        // checked without reaching inside the assertion to find out.
+        role: parsed.target?.role ?? "",
+        name: parsed.target?.name ?? "",
+        ...parsed.target?.nameFrom ? { nameFrom: parsed.target.nameFrom } : {},
+        scope: parsed.target?.scope ?? "",
+        ...parsed.target?.scopeRole ? { scopeRole: parsed.target.scopeRole } : {},
+        ...parsed.target?.frame?.length ? { frame: parsed.target.frame } : {},
+        ...parsed.target?.locator ? { locator: parsed.target.locator } : {},
+        value: "",
+        secret: false,
+        legacySelector: "",
+        proposals: [parsed]
+      };
+      RecordedStepSchema.parse(step);
+      const at = cursor ? steps.findIndex((s2) => s2.id === cursor) : steps.length;
+      const insertAt = at === -1 ? steps.length : at;
+      steps.splice(insertAt, 0, step);
+      recordedInSession.add(step.id);
+      return publish();
+    },
     async finish() {
       closed = true;
       status2 = "finished";

package/dist/cli.js

@@ -8,7 +8,7 @@ import {
   resolveCheckouts,
   start,
   status
-} from "./chunk-ZGXVQ2QA.js";
+} from "./chunk-K6L6NDH6.js";
 
 // src/cli.ts
 import { parseArgs } from "util";

package/dist/engine.js

@@ -9,7 +9,7 @@ import {
   resolveCheckouts,
   start,
   status
-} from "./chunk-ZGXVQ2QA.js";
+} from "./chunk-K6L6NDH6.js";
 export {
   AGENT_VERSION,
   browsersReady,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowriki/agent",
-  "version": "0.1.0-beta.18",
+  "version": "0.1.0-beta.19",
   "description": "Run Flowriki UI tests on your own computer. Connects this machine to your Flowriki account.",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",