@itmetsam/samurai-framework 0.7.1 → 0.8.0

package/dist/recorder/recorder.js

@@ -1,12 +1,18 @@
 import { randomUUID } from "node:crypto";
+import { mkdtemp, open, rm } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import path from "node:path";
 import logger from "../logger/index.js";
 import { addPreload, runInLoadedContexts } from "../script/preload.js";
 import { callFunction } from "../script/call-function.js";
 import { ChannelArg, fromRemoteValue } from "../script/serialize.js";
 import { ElementHandle } from "../script/element-handle.js";
 import { locatorFromSpec } from "../steps/build.js";
-import { addVariable, setSecret } from "../project/index.js";
+import { addVariable, cleanFileName, filesFolder, RECORD_LIMIT, setSecret, storeFile, } from "../project/index.js";
+import { humanSize } from "../steps/files.js";
 import { CAPTURE_MUTE, CAPTURE_OFF, CAPTURE_SOURCE, CAPTURE_UNMUTE, } from "./capture.js";
+import { FILES_SANDBOX, filesCaptureSource } from "./files-capture.js";
+import { disposeFilesCapture, readPageFile, releasePageFile, } from "./files-reader.js";
 import { Normaliser, } from "./normalise.js";
 import { rankLocator } from "./ranking.js";
 import { ToolbarController, } from "./toolbar/controller.js";
@@ -36,6 +42,13 @@ export class Recorder {
         this.queue = { tail: Promise.resolve() };
         this.known = new Map();
         this.stopped = false;
+        /** Set when stopping begins: files messages after it are not taken */
+        this.ending = false;
+        /** The files capture script's channel, handed only to its sandbox */
+        this.filesChannel = `samurai-files-${randomUUID()}`;
+        this.filesRealms = new Set();
+        this.stored = new Set();
+        this.missing = [];
         /** The context's `samurai-toolbar` sandbox realms, as last listed: the only realms toolbar messages are taken from */
         this.toolbarRealms = new Set();
         /** Toolbar messages waiting for a realm lookup, and those that arrived behind them (kept in order) */
@@ -56,6 +69,23 @@ export class Recorder {
                     this.enqueue(async () => this.handle(message));
                 return;
             }
+            if (params.channel === this.filesChannel) {
+                if (this.ending)
+                    return;
+                const realm = params.source.realm ?? "";
+                const data = params.data;
+                // In order with the page's messages: a picker follows the click that opened it
+                this.enqueue(async () => {
+                    if (!this.filesRealms.has(realm))
+                        await this.listFilesRealms();
+                    if (!this.filesRealms.has(realm)) {
+                        logger.warn("Recorder ignored a files message from outside the files sandbox");
+                        return;
+                    }
+                    await this.fromFiles(fromRemoteValue(data));
+                });
+                return;
+            }
             if (params.channel !== this.toolbarChannel || !this.controller)
                 return;
             const realm = params.source.realm ?? "";
@@ -96,6 +126,14 @@ export class Recorder {
             });
         };
     }
+    /** Files stored or reused in the files folder by this recording, project-relative */
+    get storedFiles() {
+        return [...this.stored];
+    }
+    /** Files whose steps point at a path that wasn't written */
+    get missingFiles() {
+        return [...this.missing];
+    }
     static async start(target, options) {
         const at = options.at ?? 0;
         const normaliser = new Normaliser({
@@ -108,6 +146,15 @@ export class Recorder {
         await recorder.begin(options.initialGoto ?? true);
         return recorder;
     }
+    async listFilesRealms() {
+        const { realms } = await this.connector.send("script.getRealms", {
+            context: this.context,
+            type: "window",
+        });
+        this.filesRealms = new Set(realms
+            .filter((info) => info.type === "window" && info.sandbox === FILES_SANDBOX)
+            .map((info) => info.realm));
+    }
     async listToolbarRealms() {
         const { realms } = await this.connector.send("script.getRealms", {
             context: this.context,
@@ -157,6 +204,17 @@ export class Recorder {
                 arguments: [new ChannelArg(this.channel)],
                 onRunError: "log",
             });
+            if (this.options.files) {
+                this.filesPreload = await addPreload(this.connector, {
+                    source: filesCaptureSource({
+                        trustSynthetic: this.options.files.trustSynthetic === true,
+                    }),
+                    sandbox: FILES_SANDBOX,
+                    contexts: [this.context],
+                    arguments: [new ChannelArg(this.filesChannel)],
+                    onRunError: "log",
+                });
+            }
             if (this.controller) {
                 this.toolbarPreload = await addPreload(this.connector, {
                     source: TOOLBAR_SOURCE,
@@ -225,6 +283,8 @@ export class Recorder {
             this.options.onEvent(event);
             if (event.op === "insert")
                 this.controller?.stepAdded(event.step);
+            else if (event.op === "remove")
+                this.controller?.stepRemoved();
         }
     }
     async locatorFor(message) {
@@ -269,6 +329,93 @@ export class Recorder {
                     };
         this.emit(this.normaliser.observe(observation, Date.now()));
     }
+    async fromFiles(message) {
+        const now = Date.now();
+        if (message.type !== "files") {
+            if (!this.controller?.paused)
+                this.emit(this.normaliser.observe(message, now));
+            return;
+        }
+        const release = (from) => Promise.allSettled(message.files
+            .slice(from)
+            .map((file) => releasePageFile(this.connector, this.context, file.id)));
+        if (this.controller?.paused)
+            return void (await release(0));
+        // storePageFile releases its own file; whatever it never reached is released here, on any exit
+        let started = 0;
+        try {
+            const locator = await this.locatorFor(message);
+            if (!locator) {
+                logger.warn("Recorder found no locator that matches only the element the files were %s; the upload was skipped", message.via === "drop" ? "dropped on" : "set on");
+                return;
+            }
+            const files = [];
+            for (const file of message.files) {
+                started++;
+                files.push({ path: await this.storePageFile(file) });
+            }
+            this.emit(this.normaliser.observe({ type: "files", via: message.via, locator, files }, now));
+        }
+        finally {
+            await release(started);
+        }
+    }
+    /** Saves one kept file to the files folder; returns the path its step gets */
+    async storePageFile(file) {
+        const recording = this.options.files;
+        const folder = filesFolder(recording.projectDir, recording.filesDir);
+        const notSaved = (reason) => {
+            const missing = {
+                path: folder.relative
+                    ? `${folder.relative}/${cleanFileName(file.name)}`
+                    : cleanFileName(file.name),
+                name: file.name,
+                size: file.size,
+                reason,
+            };
+            this.missing.push(missing);
+            recording.onMissing?.(missing);
+            this.controller?.warn(missingFileText(missing, folder.relative));
+            return missing.path;
+        };
+        if (file.size > RECORD_LIMIT) {
+            await releasePageFile(this.connector, this.context, file.id).catch(() => undefined);
+            return notSaved("too-big");
+        }
+        this.controller?.saving(file.name);
+        let temp;
+        try {
+            temp = await mkdtemp(path.join(tmpdir(), "samurai-upload-"));
+            const content = path.join(temp, "content");
+            const out = await open(content, "w");
+            try {
+                await readPageFile(this.connector, this.context, file.id, file.size, (bytes) => out.write(bytes));
+            }
+            finally {
+                await out.close();
+            }
+            const stored = await storeFile({
+                projectDir: recording.projectDir,
+                ...(recording.filesDir !== undefined && {
+                    filesDir: recording.filesDir,
+                }),
+                name: file.name,
+                content,
+            });
+            this.stored.add(stored.path);
+            return stored.path;
+        }
+        catch (err) {
+            logger.warn("Recorder could not save %s", file.name, { err });
+            return notSaved("unreadable");
+        }
+        finally {
+            this.controller?.saving(undefined);
+            if (temp)
+                await rm(temp, { recursive: true, force: true }).catch(() => undefined);
+            await releasePageFile(this.connector, this.context, file.id).catch(() => undefined);
+        }
+    }
     async release() {
         this.connector.offEvent("script.message", this.onMessage);
         this.connector.offEvent("browsingContext.navigationStarted", this.onNavigation);
@@ -277,6 +424,7 @@ export class Recorder {
             this.subscription?.unsubscribe(),
             this.preload?.dispose(),
             this.toolbarPreload?.dispose(),
+            this.filesPreload?.dispose(),
         ]);
     }
     /**
@@ -305,6 +453,7 @@ export class Recorder {
     async end() {
         if (this.stopped)
             return;
+        this.ending = true;
         this.controller?.dispose();
         await runInLoadedContexts(this.connector, {
             source: CAPTURE_OFF,
@@ -324,7 +473,17 @@ export class Recorder {
             }).catch(() => undefined);
         }
         await this.queue.tail;
+        // Only now: started and queued transfers need the kept Files
+        if (this.filesPreload)
+            await disposeFilesCapture(this.connector, this.context).catch(() => undefined);
         this.stopped = true;
         await this.release();
     }
 }
+/** The warning for a file that isn't saved, as the toolbar and the CLI show it */
+export function missingFileText(file, folder) {
+    const where = folder === "" ? "the project folder" : `${folder}/`;
+    return file.reason === "too-big"
+        ? `${file.name} is ${humanSize(file.size)}. Files over 50 MB aren't saved: add it to ${where} yourself, or use a generated file.`
+        : `${file.name} couldn't be read, so it isn't saved: add it to ${where} yourself, or use a generated file.`;
+}

package/dist/recorder/session.d.ts

@@ -5,6 +5,7 @@ import { type ProjectOptions } from "../runner/project.js";
 import type { SamuraiTestConfig } from "../types/config.js";
 import type { ControllerOptions } from "./toolbar/controller.js";
 import type { RecorderEvent } from "./normalise.js";
+import { type MissingFile } from "./recorder.js";
 export interface RecordSpecOptions extends ProjectOptions {
     /** The spec file, absolute or relative to the project folder. Created when `create` is given and it doesn't exist */
     file: string;
@@ -35,6 +36,8 @@ export interface RecordSpecOptions extends ProjectOptions {
         state: "recording" | "paused";
         toolbar: boolean;
     }) => void;
+    /** A picked or dropped file wasn't saved (over 50 MB, or unreadable); `text` is the warning to show */
+    onMissingFile?: (file: MissingFile, text: string) => void;
     /** Called once the browser is open and recording */
     onStarted?: (context: {
         page: Page;
@@ -50,11 +53,21 @@ export interface RecordResult {
     secrets: string[];
     /** Those of `secrets` that have no value in the recording's environment yet, read when the recording ended */
     unsetSecrets: string[];
+    /** Files stored in (or reused from) the files folder, project-relative */
+    files: string[];
+    /** Files the steps point at that weren't saved: they must be added before the test can run */
+    missingFiles: MissingFile[];
+    /** The files folder is git-ignored: CI won't have the files */
+    filesIgnored: boolean;
+    /** The files folder, relative to the project with forward slashes ("" for the project root) */
+    filesFolder: string;
+    /** The files folder was created by this recording */
+    firstFiles: boolean;
 }
 /** What the toolbar shows of the project: its environment, variables, secrets and the test's screenshots */
 export declare function toolbarOptions(run: Pick<PreparedRun, "settings" | "secrets">, source: string, dir: string, config: Pick<SamuraiTestConfig, "environments">, testIndex: number): Promise<ControllerOptions>;
 /** The secrets a recording needs set: those its steps read, then those added from the panel, once each */
-export declare function resultSecrets(events: readonly Pick<RecorderEvent, "step">[], added: Iterable<string>): string[];
+export declare function resultSecrets(events: readonly RecorderEvent[], added: Iterable<string>): string[];
 /** The index of the test `selector` names (see `RecordSpecOptions.test`) */
 export declare function pickTest(tests: readonly {
     name: string;

package/dist/recorder/session.js

@@ -4,10 +4,11 @@ import { Browser } from "../browser/browser.js";
 import { ensureWarm } from "../browser/warm-up.js";
 import { loadConfig, projectDir } from "../config/config.js";
 import { loadSecrets } from "../config/secrets.js";
-import { isGitIgnored } from "../project/index.js";
+import { filesFolder, isFolderIgnored, isGitIgnored, } from "../project/index.js";
 import { withProject } from "../runner/project.js";
 import { parseSpec } from "../steps/parse.js";
 import { applyRecorderEvent } from "./apply.js";
+import { missingFileText, } from "./recorder.js";
 const NEW_SPEC_HEADER = `import { expect, test } from "@itmetsam/samurai-framework";\n\n`;
 function addTest(source, title) {
     const header = source.trim() === ""
@@ -49,8 +50,10 @@ export async function toolbarOptions(run, source, dir, config, testIndex) {
 export function resultSecrets(events, added) {
     return [
         ...new Set([
-            ...events.flatMap(({ step }) => step.kind === "fill" && step.value.kind === "secret"
-                ? [step.value.name]
+            ...events.flatMap((event) => event.op !== "remove" &&
+                event.step.kind === "fill" &&
+                event.step.value.kind === "secret"
+                ? [event.step.value.name]
                 : []),
             ...added,
         ]),
@@ -118,6 +121,10 @@ export async function recordSpec(options) {
             port: options.port ?? 9223,
             headless: options.headless ?? settings.headless,
         }, options.signal);
+        const loaded = await loadConfig();
+        const folder = filesFolder(projectDir(), loaded.filesDir);
+        const hadFolder = existsSync(folder.absolute);
+        let recorder;
         const events = [];
         const addedSecrets = new Set();
         let stopRequested;
@@ -128,17 +135,22 @@ export async function recordSpec(options) {
                 await page.goto(options.url);
             else if (settings.baseURL !== undefined)
                 await page.navigateTo(settings.baseURL);
-            const recorder = await page.record({
+            recorder = await page.record({
                 at,
                 initialGoto: at === 0 && start !== undefined,
                 ...(settings.baseURL !== undefined && { baseURL: settings.baseURL }),
                 toolbar: {
-                    ...(await toolbarOptions(run, source, projectDir(), await loadConfig(), testIndex)),
+                    ...(await toolbarOptions(run, source, projectDir(), loaded, testIndex)),
                     projectDir: projectDir(),
                     ...(options.onStatus && { onStatus: options.onStatus }),
                     onSecretAdded: (name) => addedSecrets.add(name),
                     onStop: () => stopRequested(),
                 },
+                files: {
+                    projectDir: projectDir(),
+                    ...(loaded.filesDir !== undefined && { filesDir: loaded.filesDir }),
+                    onMissing: (file) => options.onMissingFile?.(file, missingFileText(file, folder.relative)),
+                },
                 onEvent: (event) => {
                     source = applyRecorderEvent(source, testIndex, event);
                     writeFileSync(file, source);
@@ -169,6 +181,20 @@ export async function recordSpec(options) {
         // Read again: the toolbar may have written new ones to the .env file
         const set = loadSecrets(settings.environment);
         const unsetSecrets = secrets.filter((name) => !set.has(name));
-        return { file, test: test.name, events, secrets, unsetSecrets };
+        const files = recorder?.storedFiles ?? [];
+        const missingFiles = recorder?.missingFiles ?? [];
+        return {
+            file,
+            test: test.name,
+            events,
+            secrets,
+            unsetSecrets,
+            files,
+            missingFiles,
+            filesFolder: folder.relative,
+            filesIgnored: files.length + missingFiles.length > 0 &&
+                (await isFolderIgnored(projectDir(), folder.relative)),
+            firstFiles: !hadFolder && files.length > 0,
+        };
     });
 }

package/dist/recorder/toolbar/controller.d.ts

@@ -66,6 +66,9 @@ export declare class ToolbarController {
     private question;
     private toast;
     private toastId;
+    private savingName;
+    private warnings;
+    private warningId;
     /** The picked element an `assert` with the same id refers to */
     private pick;
     /** Ids of `assert`, `insert` and `add-insertable` being processed */
@@ -88,6 +91,10 @@ export declare class ToolbarController {
     private reply;
     private reportStatus;
     private setToolbar;
+    /** A picked or dropped file is being saved; undefined when done */
+    saving(name: string | undefined): void;
+    /** Shows a warning that stays until the tester dismisses it */
+    warn(text: string): void;
     private showToast;
     handle(message: Message): Promise<void>;
     /** A top-level document finished loading: push state; start the 2 s ready watchdog */
@@ -99,6 +106,8 @@ export declare class ToolbarController {
     navigating(): void;
     /** A step was emitted (any source): count it */
     stepAdded(step: Step): void;
+    /** A recorded step was taken out again (a cancelled file picker's click) */
+    stepRemoved(): void;
     /** The recording ended: no more pushes, replies or status */
     dispose(): void;
     /**

package/dist/recorder/toolbar/controller.js

@@ -31,6 +31,8 @@ export class ToolbarController {
         this.position = null;
         this.steps = 0;
         this.toastId = 0;
+        this.warnings = [];
+        this.warningId = 0;
         /** Ids of `assert`, `insert` and `add-insertable` being processed */
         this.inFlight = new Set();
         /** Ids `accept` let through whose `handle` hasn't started yet */
@@ -70,6 +72,8 @@ export class ToolbarController {
             resumeQuestion: this.question !== undefined,
             nextScreenshot: `screenshot-${this.screenshots + 1}`,
             ...(this.toast && { toast: this.toast }),
+            ...(this.savingName !== undefined && { saving: this.savingName }),
+            warnings: this.warnings.map((w) => ({ ...w })),
         };
     }
     push() {
@@ -90,6 +94,16 @@ export class ToolbarController {
         this.toolbar = loaded;
         this.reportStatus();
     }
+    /** A picked or dropped file is being saved; undefined when done */
+    saving(name) {
+        this.savingName = name;
+        this.push();
+    }
+    /** Shows a warning that stays until the tester dismisses it */
+    warn(text) {
+        this.warnings.push({ id: ++this.warningId, text });
+        this.push();
+    }
     showToast(text) {
         this.toast = { id: ++this.toastId, text };
     }
@@ -116,6 +130,9 @@ export class ToolbarController {
                 this.collapsed = message.collapsed === true;
                 this.pick = undefined;
                 return this.push();
+            case "dismiss":
+                this.warnings = this.warnings.filter((w) => w.id !== message.id);
+                return this.push();
             case "pick":
                 return this.picked(message);
             case "assert":
@@ -188,6 +205,11 @@ export class ToolbarController {
             this.screenshots++;
         this.push();
     }
+    /** A recorded step was taken out again (a cancelled file picker's click) */
+    stepRemoved() {
+        this.steps = Math.max(0, this.steps - 1);
+        this.push();
+    }
     /** The recording ended: no more pushes, replies or status */
     dispose() {
         this.disposed = true;

package/dist/recorder/toolbar/protocol.d.ts

@@ -36,6 +36,13 @@ export interface ToolbarState {
         id: number;
         text: string;
     };
+    /** The name of the file being saved to the project, while a transfer runs */
+    saving?: string;
+    /** Shown until the tester dismisses each (a file that wasn't saved) */
+    warnings: {
+        id: number;
+        text: string;
+    }[];
 }
 /** Element-carrying messages send the element itself (it arrives as a handle) and its candidates */
 export type ToolbarMessage = {
@@ -61,6 +68,9 @@ export type ToolbarMessage = {
 } | {
     action: "collapse";
     collapsed: boolean;
+} | {
+    action: "dismiss";
+    id: number;
 } | {
     action: "pick";
     id: number;

package/dist/recorder/toolbar/source.d.ts

@@ -18,7 +18,7 @@
  *   `matcher { matcher }`, `not`, `assert-add` (Assert panel);
  *   `insert-item { kind, name }`, `insert-first`, `insert-new { kind }` (Insert list);
  *   `new-kind { kind }`, `new-save`, `new-cancel` (New variable or secret);
- *   `wait-add`, `screenshot-add`; `escape` (the Esc key).
+ *   `wait-add`, `screenshot-add`; `escape` (the Esc key); `dismiss { id }` (a warning's Dismiss button).
  *   Form inputs carry `data-field` (`expected`, `attribute`, `countIndex`, `filter`, `name`, `value`,
  *   `waitKind`, `seconds`, `shotName`, `fullPage`) and update on `input`/`change`.
  * - `rebind(send)`: used by a second run in the same document (a new recording), which keeps the host and

package/dist/recorder/toolbar/source.js

@@ -21,7 +21,7 @@ import { TOOLBAR_CSS } from "./styles.js";
  *   `matcher { matcher }`, `not`, `assert-add` (Assert panel);
  *   `insert-item { kind, name }`, `insert-first`, `insert-new { kind }` (Insert list);
  *   `new-kind { kind }`, `new-save`, `new-cancel` (New variable or secret);
- *   `wait-add`, `screenshot-add`; `escape` (the Esc key).
+ *   `wait-add`, `screenshot-add`; `escape` (the Esc key); `dismiss { id }` (a warning's Dismiss button).
  *   Form inputs carry `data-field` (`expected`, `attribute`, `countIndex`, `filter`, `name`, `value`,
  *   `waitKind`, `seconds`, `shotName`, `fullPage`) and update on `input`/`change`.
  * - `rebind(send)`: used by a second run in the same document (a new recording), which keeps the host and
@@ -46,6 +46,7 @@ export const TOOLBAR_SOURCE = String.raw `(send) => {
   const DEFAULTS = {
     status: "recording", collapsed: false, position: null, steps: 0, environment: "", canAddVariables: false,
     variables: [], secrets: [], secretsIgnored: true, resumeQuestion: false, nextScreenshot: "screenshot-1",
+    warnings: [],
   };
   const MATCHERS = [
     ["toBeVisible", "Visible"], ["toHaveText", "Has text"], ["toContainText", "Contains text"],
@@ -109,6 +110,7 @@ export const TOOLBAR_SOURCE = String.raw `(send) => {
   const container = h("div", { class: "ui" });
   const outline = h("div", { class: "outline", hidden: true });
   const toast = h("div", { class: "toast ui", hidden: true });
+  const notices = h("div", { class: "notices ui" });
   let adopted = false;
   try {
     const sheet = new CSSStyleSheet();
@@ -119,7 +121,7 @@ export const TOOLBAR_SOURCE = String.raw `(send) => {
     adopted = false;
   }
   // Without constructed sheets: a <style> element, which a strict CSP blocks
-  root.append(...(adopted ? [] : [h("style", null, CSS)]), frame, outline, container, toast);
+  root.append(...(adopted ? [] : [h("style", null, CSS)]), frame, outline, container, toast, notices);
 
   const viewport = () => ({ w: frame.clientWidth || innerWidth, h: frame.clientHeight || innerHeight });
 
@@ -366,6 +368,34 @@ export const TOOLBAR_SOURCE = String.raw `(send) => {
   ];
   const PANELS = { assert: assertPanel, insert: insertPanel, new: newPanel, wait: waitPanel, screenshot: screenshotPanel };
 
+  // Notice nodes live as long as their warning: rebuilding them would make screen readers announce each alert again
+  const noticeNodes = new Map();
+  let savingNode = null;
+  let savingText = null;
+  const renderNotices = () => {
+    const ids = new Set(state.warnings.map((w) => w.id));
+    for (const [id, node] of noticeNodes) {
+      if (ids.has(id)) continue;
+      node.remove();
+      noticeNodes.delete(id);
+    }
+    for (const w of state.warnings) {
+      if (noticeNodes.has(w.id)) continue;
+      const node = h("div", { class: "notice warning", "data-warning": String(w.id), role: "alert" },
+        h("span", null, w.text),
+        h("button", { class: "dismiss", "data-action": "dismiss", "data-id": String(w.id) }, "Dismiss"));
+      noticeNodes.set(w.id, node);
+      // Before the saving line, which stays last
+      notices.insertBefore(node, savingNode);
+    }
+    const saving = state.saving || null;
+    if (saving !== savingText) {
+      savingText = saving;
+      if (savingNode) savingNode.remove();
+      savingNode = saving ? h("div", { class: "notice saving" }, "Saving " + saving + "…") : null;
+      if (savingNode) notices.append(savingNode);
+    }
+  };
   const render = () => {
     const active = root.activeElement;
     const kept = active && active.type !== "radio" ? active.getAttribute("data-field") : null;
@@ -373,6 +403,7 @@ export const TOOLBAR_SOURCE = String.raw `(send) => {
     try { selection = kept ? [active.selectionStart, active.selectionEnd] : null; } catch (err) { selection = null; }
     const panel = ui.panel && !state.collapsed ? h("div", { class: ui.panel === "new" || ui.panel === "insert" ? "panel wide" : "panel" }, PANELS[ui.panel]()) : null;
     container.replaceChildren(state.collapsed ? chipView() : railView(), ...(panel ? [panel] : []));
+    renderNotices();
     placeAll();
     const focus = ui.focus || kept;
     ui.focus = null;
@@ -457,6 +488,7 @@ export const TOOLBAR_SOURCE = String.raw `(send) => {
 
   // Every action is what a click on its control does; press() runs the same functions
   const handlers = {
+    dismiss: (d) => post({ action: "dismiss", id: Number(d.id) }),
     pause: () => { if (!paused()) post({ action: "pause" }); },
     resume: () => { if (paused()) post({ action: "resume" }); },
     stop: () => {
@@ -670,6 +702,7 @@ export const TOOLBAR_SOURCE = String.raw `(send) => {
       kind: control.getAttribute("data-kind"),
       name: control.getAttribute("data-name"),
       matcher: control.getAttribute("data-matcher"),
+      id: control.getAttribute("data-id"),
     });
   });
   root.addEventListener("pointerdown", (event) => {

package/dist/recorder/toolbar/styles.d.ts

@@ -3,4 +3,4 @@
  * outline and the toast, as in the approved mockups. Everything inside is `position: fixed` against the
  * viewport; the host itself takes no space.
  */
-export declare const TOOLBAR_CSS = "\n:host { all: initial; }\n* { box-sizing: border-box; }\n.ui { font: 12px/1.3 system-ui, -apple-system, \"Segoe UI\", sans-serif; color: #222; color-scheme: light; }\nbutton, input, select { font: inherit; color: inherit; margin: 0; }\nbutton { appearance: none; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }\nbutton:disabled { cursor: default; }\ncode { font: 11.5px ui-monospace, SFMono-Regular, Menlo, monospace; }\n\n.rail, .chip { position: fixed; z-index: 3; box-shadow: 0 6px 20px rgba(0,0,0,.28); background: #17181c; color: #e9eaee; user-select: none; }\n.rail { display: flex; flex-direction: column; gap: 2px; border-radius: 10px; padding: 5px; width: 112px; }\n.rail.wide { width: 150px; }\n.top { display: flex; align-items: center; justify-content: space-between; color: #6b6e78; padding: 0 2px 2px; }\n[data-grip] { cursor: grab; flex: 1; touch-action: none; }\n[data-grip]:active { cursor: grabbing; }\n.chev { color: #6b6e78; padding: 0 3px; border-radius: 4px; }\n.chev:hover { color: #e9eaee; }\n.st { display: flex; align-items: center; gap: 6px; padding: 4px 6px; font-weight: 600; }\n.dot { width: 8px; height: 8px; border-radius: 50%; background: #ff4d4f; box-shadow: 0 0 0 3px rgba(255,77,79,.25); flex: none; }\n.dot.pause { background: #f5b301; box-shadow: 0 0 0 3px rgba(245,179,1,.25); }\n.b { padding: 5px 7px; border-radius: 6px; display: flex; align-items: center; gap: 6px; width: 100%; }\n.b:hover:not(:disabled) { background: #2a2c33; }\n.b.on, .b.on:hover:not(:disabled) { background: #2f6fed; color: #fff; }\n.b:disabled { opacity: .38; }\n.sep { height: 1px; background: #34363d; margin: 2px 3px; }\n.stop { color: #ff8a8c; }\n.ico { width: 14px; text-align: center; flex: none; }\n.note { font-size: 10.5px; color: #c9cbd2; padding: 4px 6px 2px; line-height: 1.35; }\n.ask { display: flex; gap: 4px; padding: 2px 6px 4px; }\n.ask button { flex: 1; text-align: center; border-radius: 5px; padding: 3px 0; background: #2a2c33; }\n.ask button.yes { background: #2f6fed; color: #fff; font-weight: 600; }\n\n.chip { display: flex; align-items: center; gap: 7px; border-radius: 999px; padding: 6px 10px 6px 8px; font-weight: 600; }\n.chip [data-grip] { color: #6b6e78; flex: none; }\n.chip .chev { color: #9a9ca5; }\n\n.panel { position: fixed; z-index: 2; width: 230px; max-height: calc(100vh - 16px); overflow: auto; background: #fff; border: 1px solid #d9dce1; border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.18); color: #222; }\n.panel.wide { width: 236px; }\n.h { padding: 8px 10px; border-bottom: 1px solid #eceef1; font-weight: 600; display: flex; justify-content: space-between; gap: 8px; }\n.h.stack { display: block; }\n.h code { font-size: 11px; color: #555; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.h small { display: block; font-weight: 400; color: #777; margin-top: 2px; }\n.msg { padding: 10px; color: #555; }\n.err { padding: 6px 10px; color: #c22b2e; }\n.opts { padding: 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }\n.o { border: 1px solid #e3e5e8; border-radius: 6px; padding: 5px 6px; }\n.o:hover:not(:disabled) { border-color: #b9c6e4; }\n.o.sel { border-color: #2f6fed; background: #eef3fe; color: #1d4fc4; font-weight: 600; }\n.o:disabled { opacity: .45; }\n.val { margin: 2px 8px 8px; display: flex; flex-direction: column; gap: 4px; }\n.in { width: 100%; border: 1px solid #cfd3d8; border-radius: 4px; padding: 5px 6px; background: #fff; outline: none; }\n.in:focus { border-color: #2f6fed; box-shadow: 0 0 0 2px rgba(47,111,237,.15); }\n.in.code { font: 11.5px ui-monospace, SFMono-Regular, Menlo, monospace; }\n.row { display: flex; justify-content: space-between; align-items: center; padding: 0 8px 8px; }\n.neg { color: #555; display: flex; align-items: center; gap: 4px; }\n.add { background: #2f6fed; color: #fff; border-radius: 6px; padding: 5px 12px; font-weight: 600; text-align: center; }\n.add:disabled { opacity: .5; }\n.cancel { padding: 5px 10px; color: #555; }\n.foot { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 10px; border-top: 1px solid #eceef1; }\n.foot.plain { border-top: 0; padding-top: 10px; }\n\n.search { display: block; margin: 6px 8px; width: calc(100% - 16px); }\n.grp { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: #888; padding: 6px 10px 2px; }\n.it { display: flex; justify-content: space-between; gap: 8px; padding: 5px 10px; width: 100%; }\n.it:hover, .it.sel { background: #eef3fe; }\n.it .v { color: #777; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.warn { color: #b26a00; }\n.empty { padding: 4px 10px; color: #777; }\n.act { padding: 6px 10px; color: #1d4fc4; font-weight: 600; width: 100%; }\n.act:hover { background: #eef3fe; }\n\n.seg { display: flex; margin: 8px 10px 0; border: 1px solid #cfd3d8; border-radius: 6px; overflow: hidden; }\n.seg button { flex: 1; text-align: center; padding: 4px; }\n.seg .sel { background: #eef3fe; color: #1d4fc4; font-weight: 600; }\n.lbl { font-size: 11px; color: #666; padding: 6px 10px 2px; }\n.f { padding: 0 10px; }\n.field-error { color: #c22b2e; font-size: 11px; padding: 3px 10px 0; }\n.hint { padding: 6px 10px 0; color: #666; font-size: 11px; line-height: 1.35; }\n.hint code { font-size: 10.5px; }\n\n.radio { padding: 6px 10px; display: flex; gap: 7px; align-items: center; }\n.radio input[type=radio] { accent-color: #2f6fed; margin: 0; }\n.sub { color: #777; font-size: 11px; padding: 0 10px 2px 30px; margin-top: -4px; }\n.num { width: 52px; border: 1px solid #cfd3d8; border-radius: 4px; padding: 3px 5px; }\n\n.outline { position: fixed; z-index: 1; pointer-events: none; outline: 2px solid #2f6fed; outline-offset: 2px; border-radius: 4px; background: rgba(47,111,237,.06); }\n.toast { position: fixed; z-index: 4; left: 50%; bottom: 14px; transform: translateX(-50%); background: #17181c; color: #e9eaee; border-radius: 8px; padding: 6px 12px; box-shadow: 0 6px 20px rgba(0,0,0,.28); pointer-events: none; transition: opacity .3s; }\n.toast.gone { opacity: 0; }\n.frame { position: fixed; inset: 0; pointer-events: none; visibility: hidden; }\n";
+export declare const TOOLBAR_CSS = "\n:host { all: initial; }\n* { box-sizing: border-box; }\n.ui { font: 12px/1.3 system-ui, -apple-system, \"Segoe UI\", sans-serif; color: #222; color-scheme: light; }\nbutton, input, select { font: inherit; color: inherit; margin: 0; }\nbutton { appearance: none; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }\nbutton:disabled { cursor: default; }\ncode { font: 11.5px ui-monospace, SFMono-Regular, Menlo, monospace; }\n\n.rail, .chip { position: fixed; z-index: 3; box-shadow: 0 6px 20px rgba(0,0,0,.28); background: #17181c; color: #e9eaee; user-select: none; }\n.rail { display: flex; flex-direction: column; gap: 2px; border-radius: 10px; padding: 5px; width: 112px; }\n.rail.wide { width: 150px; }\n.top { display: flex; align-items: center; justify-content: space-between; color: #6b6e78; padding: 0 2px 2px; }\n[data-grip] { cursor: grab; flex: 1; touch-action: none; }\n[data-grip]:active { cursor: grabbing; }\n.chev { color: #6b6e78; padding: 0 3px; border-radius: 4px; }\n.chev:hover { color: #e9eaee; }\n.st { display: flex; align-items: center; gap: 6px; padding: 4px 6px; font-weight: 600; }\n.dot { width: 8px; height: 8px; border-radius: 50%; background: #ff4d4f; box-shadow: 0 0 0 3px rgba(255,77,79,.25); flex: none; }\n.dot.pause { background: #f5b301; box-shadow: 0 0 0 3px rgba(245,179,1,.25); }\n.b { padding: 5px 7px; border-radius: 6px; display: flex; align-items: center; gap: 6px; width: 100%; }\n.b:hover:not(:disabled) { background: #2a2c33; }\n.b.on, .b.on:hover:not(:disabled) { background: #2f6fed; color: #fff; }\n.b:disabled { opacity: .38; }\n.sep { height: 1px; background: #34363d; margin: 2px 3px; }\n.stop { color: #ff8a8c; }\n.ico { width: 14px; text-align: center; flex: none; }\n.note { font-size: 10.5px; color: #c9cbd2; padding: 4px 6px 2px; line-height: 1.35; }\n.ask { display: flex; gap: 4px; padding: 2px 6px 4px; }\n.ask button { flex: 1; text-align: center; border-radius: 5px; padding: 3px 0; background: #2a2c33; }\n.ask button.yes { background: #2f6fed; color: #fff; font-weight: 600; }\n\n.chip { display: flex; align-items: center; gap: 7px; border-radius: 999px; padding: 6px 10px 6px 8px; font-weight: 600; }\n.chip [data-grip] { color: #6b6e78; flex: none; }\n.chip .chev { color: #9a9ca5; }\n\n.panel { position: fixed; z-index: 2; width: 230px; max-height: calc(100vh - 16px); overflow: auto; background: #fff; border: 1px solid #d9dce1; border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.18); color: #222; }\n.panel.wide { width: 236px; }\n.h { padding: 8px 10px; border-bottom: 1px solid #eceef1; font-weight: 600; display: flex; justify-content: space-between; gap: 8px; }\n.h.stack { display: block; }\n.h code { font-size: 11px; color: #555; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.h small { display: block; font-weight: 400; color: #777; margin-top: 2px; }\n.msg { padding: 10px; color: #555; }\n.err { padding: 6px 10px; color: #c22b2e; }\n.opts { padding: 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }\n.o { border: 1px solid #e3e5e8; border-radius: 6px; padding: 5px 6px; }\n.o:hover:not(:disabled) { border-color: #b9c6e4; }\n.o.sel { border-color: #2f6fed; background: #eef3fe; color: #1d4fc4; font-weight: 600; }\n.o:disabled { opacity: .45; }\n.val { margin: 2px 8px 8px; display: flex; flex-direction: column; gap: 4px; }\n.in { width: 100%; border: 1px solid #cfd3d8; border-radius: 4px; padding: 5px 6px; background: #fff; outline: none; }\n.in:focus { border-color: #2f6fed; box-shadow: 0 0 0 2px rgba(47,111,237,.15); }\n.in.code { font: 11.5px ui-monospace, SFMono-Regular, Menlo, monospace; }\n.row { display: flex; justify-content: space-between; align-items: center; padding: 0 8px 8px; }\n.neg { color: #555; display: flex; align-items: center; gap: 4px; }\n.add { background: #2f6fed; color: #fff; border-radius: 6px; padding: 5px 12px; font-weight: 600; text-align: center; }\n.add:disabled { opacity: .5; }\n.cancel { padding: 5px 10px; color: #555; }\n.foot { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 10px; border-top: 1px solid #eceef1; }\n.foot.plain { border-top: 0; padding-top: 10px; }\n\n.search { display: block; margin: 6px 8px; width: calc(100% - 16px); }\n.grp { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: #888; padding: 6px 10px 2px; }\n.it { display: flex; justify-content: space-between; gap: 8px; padding: 5px 10px; width: 100%; }\n.it:hover, .it.sel { background: #eef3fe; }\n.it .v { color: #777; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.warn { color: #b26a00; }\n.empty { padding: 4px 10px; color: #777; }\n.act { padding: 6px 10px; color: #1d4fc4; font-weight: 600; width: 100%; }\n.act:hover { background: #eef3fe; }\n\n.seg { display: flex; margin: 8px 10px 0; border: 1px solid #cfd3d8; border-radius: 6px; overflow: hidden; }\n.seg button { flex: 1; text-align: center; padding: 4px; }\n.seg .sel { background: #eef3fe; color: #1d4fc4; font-weight: 600; }\n.lbl { font-size: 11px; color: #666; padding: 6px 10px 2px; }\n.f { padding: 0 10px; }\n.field-error { color: #c22b2e; font-size: 11px; padding: 3px 10px 0; }\n.hint { padding: 6px 10px 0; color: #666; font-size: 11px; line-height: 1.35; }\n.hint code { font-size: 10.5px; }\n\n.radio { padding: 6px 10px; display: flex; gap: 7px; align-items: center; }\n.radio input[type=radio] { accent-color: #2f6fed; margin: 0; }\n.sub { color: #777; font-size: 11px; padding: 0 10px 2px 30px; margin-top: -4px; }\n.num { width: 52px; border: 1px solid #cfd3d8; border-radius: 4px; padding: 3px 5px; }\n\n.outline { position: fixed; z-index: 1; pointer-events: none; outline: 2px solid #2f6fed; outline-offset: 2px; border-radius: 4px; background: rgba(47,111,237,.06); }\n.toast { position: fixed; z-index: 4; left: 50%; bottom: 14px; transform: translateX(-50%); background: #17181c; color: #e9eaee; border-radius: 8px; padding: 6px 12px; box-shadow: 0 6px 20px rgba(0,0,0,.28); pointer-events: none; transition: opacity .3s; }\n.toast.gone { opacity: 0; }\n.notices {\n  position: fixed;\n  z-index: 4;\n  left: 50%;\n  bottom: 52px;\n  transform: translateX(-50%);\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  max-width: min(520px, calc(100vw - 32px));\n}\n.notice {\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  background: #17181c;\n  color: #e9eaee;\n  border-radius: 8px;\n  padding: 8px 12px;\n  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);\n}\n.notice.warning {\n  background: #3b2a06;\n  color: #ffe7b0;\n  border: 1px solid #8a6514;\n}\n.notice .dismiss {\n  margin-left: auto;\n  text-decoration: underline;\n  white-space: nowrap;\n}\n.frame { position: fixed; inset: 0; pointer-events: none; visibility: hidden; }\n";

package/dist/recorder/toolbar/styles.js

@@ -91,5 +91,36 @@ code { font: 11.5px ui-monospace, SFMono-Regular, Menlo, monospace; }
 .outline { position: fixed; z-index: 1; pointer-events: none; outline: 2px solid #2f6fed; outline-offset: 2px; border-radius: 4px; background: rgba(47,111,237,.06); }
 .toast { position: fixed; z-index: 4; left: 50%; bottom: 14px; transform: translateX(-50%); background: #17181c; color: #e9eaee; border-radius: 8px; padding: 6px 12px; box-shadow: 0 6px 20px rgba(0,0,0,.28); pointer-events: none; transition: opacity .3s; }
 .toast.gone { opacity: 0; }
+.notices {
+  position: fixed;
+  z-index: 4;
+  left: 50%;
+  bottom: 52px;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-width: min(520px, calc(100vw - 32px));
+}
+.notice {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  background: #17181c;
+  color: #e9eaee;
+  border-radius: 8px;
+  padding: 8px 12px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
+}
+.notice.warning {
+  background: #3b2a06;
+  color: #ffe7b0;
+  border: 1px solid #8a6514;
+}
+.notice .dismiss {
+  margin-left: auto;
+  text-decoration: underline;
+  white-space: nowrap;
+}
 .frame { position: fixed; inset: 0; pointer-events: none; visibility: hidden; }
 `;

package/dist/runner/project.js

@@ -1,3 +1,4 @@
+import { removeGeneratedFiles } from "../browser/generated-files.js";
 import { loadConfig, projectDir, setActiveProject } from "../config/config.js";
 import { resetSecrets } from "../config/mask.js";
 import { setRunSettings } from "../config/run-settings.js";
@@ -27,6 +28,7 @@ export async function withProject(options, work) {
         return await work(run);
     }
     finally {
+        await removeGeneratedFiles().catch(() => undefined);
         setRunSettings(undefined);
         setActiveProject(undefined);
         active = false;