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

package/dist/{chunk-K6L6NDH6.js → chunk-ZVX26LV7.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.19";
+var AGENT_VERSION = "0.1.0-beta.20";
 async function prepareBrowsers() {
   if (browsersReady()) {
     return { ok: true, already: true, message: "chromium is already installed" };
@@ -1457,6 +1457,39 @@ function describeAssertion(a, subject) {
   const label = check.label.replace("attribute", `attribute${attr}`);
   return who ? `\u201C${who}\u201D ${label}${expects}` : `${label}${expects}`;
 }
+var STEP_PRESENTATION = {
+  fill: { label: "Fill", tone: "accent" },
+  select: { label: "Select", tone: "accent" },
+  // Click, press and the double/right variants share a tone: all of them
+  // commit the page and can produce an outcome.
+  click: { label: "Click", tone: "pass" },
+  press: { label: "Press", tone: "pass" },
+  dblclick: { label: "Double-click", tone: "pass" },
+  rightclick: { label: "Right-click", tone: "pass" },
+  check: { label: "Check", tone: "warn" },
+  hover: { label: "Hover", tone: "warn" },
+  drag: { label: "Drag", tone: "accent" },
+  upload: { label: "Upload", tone: "accent" },
+  scroll: { label: "Scroll", tone: "skip" },
+  setRange: { label: "Set", tone: "accent" },
+  // A check, not an action. "assert" is the schema's word; "Check" is the
+  // word the product uses everywhere a person reads it.
+  assert: { label: "Check", tone: "accent" },
+  back: { label: "Back", tone: "skip" },
+  forward: { label: "Forward", tone: "skip" },
+  navigate: { label: "Go to", tone: "skip" },
+  closePage: { label: "Close tab", tone: "skip" },
+  // Steps that act on the SESSION rather than on the page. Drawn apart from
+  // the actions on purpose: these are the rows that explain why a later step
+  // saw what it saw, and falling through to "Click" drew a sign-in as a mouse
+  // click on a button nobody could find in the recording.
+  signIn: { label: "Sign in", tone: "accent" },
+  signOut: { label: "Sign out", tone: "accent" },
+  useActor: { label: "Continue as", tone: "accent" },
+  resetActor: { label: "Start over as", tone: "skip" },
+  capture: { label: "Capture", tone: "warn" },
+  unsupported: { label: "Unsupported", tone: "warn" }
+};
 
 // ../engine-playwright/dist/index.js
 import fs4 from "fs";
@@ -2441,6 +2474,12 @@ function installDebugPanel() {
       /** 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. */
+      /** Each step card's type pill, as label and tone — the two things that
+       *  have to agree with the flow editor. */
+      stepPills: () => Array.from(root.querySelectorAll(".t")).map((el) => ({
+        label: el.textContent ?? "",
+        tone: Array.from(el.classList).find((c) => c !== "t") ?? ""
+      })),
       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. */
@@ -2594,10 +2633,13 @@ function installDebugPanel() {
     "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: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)}",
+    // FOUR TONES, the same four the Flows page spells as Tailwind classes.
+    // Keyed by meaning rather than by step type, so a type added to the
+    // catalogue is drawn correctly here without touching this stylesheet.
+    ".t.accent{background:var(--accent-soft);color:var(--accent-ink)}",
+    ".t.pass{background:var(--pass-soft);color:var(--pass)}",
+    ".t.warn{background:var(--warn-soft);color:var(--warn)}",
+    ".t.skip{background:var(--skip-soft);color:var(--skip)}",
     ".nm{font:500 12px ui-monospace,SFMono-Regular,Menlo,monospace;",
     "color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}",
     ".sc{font-size:10px;color:var(--subtle);overflow:hidden;",
@@ -2629,18 +2671,10 @@ function installDebugPanel() {
     }
     return to;
   };
-  const label = (t) => ({
-    fill: "Fill",
-    select: "Select",
-    click: "Click",
-    check: "Check",
-    press: "Press",
-    // "assert" is the schema's word for the step type. "Check" is the word
-    // the product uses everywhere a person reads it.
-    assert: "Check",
-    back: "Back",
-    forward: "Forward"
-  })[t] || t;
+  const STEPS = w.__flSteps ?? {};
+  const presentation = (t) => STEPS[t] ?? STEPS["click"] ?? { label: t, tone: "pass" };
+  const label = (t) => presentation(t).label;
+  const tone = (t) => presentation(t).tone;
   const esc = (s2) => String(s2).replace(
     /[&<>"]/g,
     (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]
@@ -2680,7 +2714,7 @@ function installDebugPanel() {
         state.recorded.includes(st.id) ? "new" : ""
       ].filter(Boolean).join(" ");
       const val = st.secret ? "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" : st.value || "";
-      return '<div class="' + cls + '" data-id="' + esc(st.id) + '" data-i="' + i + '">' + (state.mode === "record" ? "" : '<button class="bp ' + (state.breakpoints.includes(st.id) ? "on" : "") + '" data-bp="' + esc(st.id) + '" title="Breakpoint"></button>') + '<button class="x" data-del="' + esc(st.id) + '" title="Delete step">&#215;</button><div class="h"><span class="o">' + String(i + 1).padStart(2, "0") + '</span><span class="t ' + esc(st.type) + '">' + esc(label(st.type)) + '</span></div><div class="nm"' + (st.detail ? ' title="' + esc(st.detail) + '"' : "") + ">" + // A check names the assertion, because two checks on one element are
+      return '<div class="' + cls + '" data-id="' + esc(st.id) + '" data-i="' + i + '">' + (state.mode === "record" ? "" : '<button class="bp ' + (state.breakpoints.includes(st.id) ? "on" : "") + '" data-bp="' + esc(st.id) + '" title="Breakpoint"></button>') + '<button class="x" data-del="' + esc(st.id) + '" title="Delete step">&#215;</button><div class="h"><span class="o">' + String(i + 1).padStart(2, "0") + '</span><span class="t ' + esc(tone(st.type)) + '">' + esc(label(st.type)) + '</span></div><div class="nm"' + (st.detail ? ' title="' + esc(st.detail) + '"' : "") + ">" + // A check names the assertion, because two checks on one element are
       // two different steps and the element's name renders them the same.
       (st.detail ? esc(st.detail) : st.name ? "&quot;" + esc(st.name) + "&quot;" : "&#8212;") + "</div>" + (st.scope ? '<div class="sc">in ' + esc(st.scope) + "</div>" : "") + (val ? '<div class="vl">' + esc(val) + "</div>" : "") + "</div>";
     }).join("");
@@ -4888,7 +4922,7 @@ async function startRecordingSession(opts) {
     } else if (msg.command === "record") void session.setPaused(!msg.on);
   });
   const INIT_SCRIPT = `${accNameScript()}
-;window.__flChecks=${JSON.stringify(CHECKS)};
+;window.__flChecks=${JSON.stringify(CHECKS)};window.__flSteps=${JSON.stringify(STEP_PRESENTATION)};
 ;(${installRecorder.toString()})();
 ;(${installDebugPanel.toString()})();`;
   const page = await context.newPage();
@@ -5322,7 +5356,7 @@ async function startDebugSession(opts) {
     });
     await context2.addInitScript({
       content: `${accNameScript2()}
-;window.__flChecks=${JSON.stringify(CHECKS)};
+;window.__flChecks=${JSON.stringify(CHECKS)};window.__flSteps=${JSON.stringify(STEP_PRESENTATION)};
 ;(${installRecorder.toString()})();
 ;(${installDebugPanel.toString()})();`
     });

package/dist/cli.js

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

package/dist/engine.js

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

package/package.json

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