srcStateMachine:
  - key: start
    code: |
      await $.fn("visit-google");
      await $.fn("search");
srcFunctions:
  - key: visit-google
    code: |
      // Navigate to Google and wait for page to load
      await $.navLoad("https://google.com/");
  - key: search
    code: |
      // Accept the terms
      const acceptBtn = await $.doAwaitPresent('[role="dialog"] button:nth-of-type(2)', {
        timeout: 3
      });
      if (acceptBtn) {
        await $.doScrollTo(acceptBtn);
        await $.doClick(acceptBtn);
      }

      // Find the input field
      const inputKey = await $.doQuery("[name='q']");
      if ("string" !== typeof inputKey) {
        throw new Error("Could not find input field");
      }

      // Get search term from user settings
      const searchTerm = $.ioInputString("search-term");

      // Replace previous string and send enter key
      await $.doType(inputKey, searchTerm, { replace: true, submit: true });
srcInputs:
  - key: search-term
    type: string
    name: Search term
    desc: A search term for Google
    max: 1024
    isList: false
    default: uindow
srcOutputs: []

srcStateMachine:
  - key: start
    code: |
      // Generate a random number locally (or use $.osRand())
      const randomNumber = await $.fn("random", [2, 10]);

      // Pass it to the next state
      return { next: "math", args: [randomNumber] };
  - key: math
    code: |
      // Passed with { next: "surprise", args: [randomNumber] };
      const randomNumber = $.args[0];
      $.log(`The number I was thinking of was ${randomNumber}`);

      // Put the LLM to work
      const prompt = `Multiply ${randomNumber} by itself.`;
      const response = await $.llm(prompt);
srcFunctions:
  - key: random
    code: |
      if (2 !== $.args.length) {
        throw new Error("Expecting 2 arguments");
      }

      // Destructure the function arguments
      const [from, to] = $.args;

      // Generate a random number
      return Math.floor(Math.random() * (to - from + 1)) + from;
srcInputs: []
srcOutputs: []

srcStateMachine:
  - key: start
    code: |
      await $.fn("write-haiku");

      return { next: "middle" };
  - key: middle
    code: |
      await $.fn("write-haiku");

      return { next: "end" };
  - key: end
    code: |
      await $.fn("write-haiku");
srcFunctions:
  - key: write-haiku
    code: |
      switch ($.current) {
        case "start":
          $.log("An old silent pond");

          break;

        case "middle":
          $.log("A frog jumps into the pond");

          break;

        case "end":
          $.log("Splash! Silence again.");
          await $.sleep(1000);
          $.log("-- The Old Pond by Matsuo Bashō (1644-1694)", "success");

          break;
      }

      await $.sleep(1000);
srcInputs: []
srcOutputs: []

srcStateMachine:
  - key: start
    code: |
      await $.fn("write-haiku");

      return { next: "middle" };
  - key: middle
    code: |
      await $.fn("write-haiku");

      return { next: "end" };
  - key: end
    code: |
      await $.fn("write-haiku");
srcFunctions:
  - key: write-haiku
    code: |
      // The Old Pond by Matsuo Bashō (1644-1694)
      switch ($.previous) {
        case null:
          $.log("An old silent pond");

          break;

        case "start":
          $.log("A frog jumps into the pond");

          break;

        case "middle":
          $.log("Splash! Silence again.");
          await $.sleep(1000);
          $.log("-- The Old Pond by Matsuo Bashō (1644-1694)", "success");

          break;
      }

      await $.sleep(1000);
srcInputs: []
srcOutputs: []

srcStateMachine:
  - key: start
    code: |
      await $.fn("countdown", [3]);

      $.log("That was easy");
srcFunctions:
  - key: countdown
    code: |
      const number = $.args[0];

      if (number <= 0) {
        return;
      }

      $.log(number, "success");
      await $.sleep(1000);

      // Recursion is fun!
      await $.fn("countdown", [number - 1]);
srcInputs: []
srcOutputs: []

srcStateMachine:
  - key: start
    code: |
      const startTime = performance.now();

      // Ask the magic box
      const response = await $.llm("Answer with one number: 2 + 2");

      // Log the execution time
      $.log(`Finished in ${((performance.now() - startTime) / 1000).toFixed(2)} seconds`);
srcFunctions: []
srcInputs: []
srcOutputs: []

srcStateMachine:
  - key: start
    code: |
      $.log("🍰 A new cake recipe was added.", "info");
      $.log("🧁 The cake has baked successfully!", "success");
      $.log("🔥 The oven temperature is far too high.", "warning");
      $.log("💀 Cake failed to rise, check your ingredients.", "error");
srcFunctions: []
srcInputs: []
srcOutputs: []

srcStateMachine:
  - key: start
    code: |
      $.log("It's the final countdown:", "warning");
      await $.sleep(1000);

      let counter = 5;
      while (counter-- > 0) {
        $.log(`⌛ ${counter + 1}...`);

        // Wait for it...
        await $.sleep(1000);
      }

      $.log("🚀 Liftoff!", "success");
srcFunctions: []
srcInputs: []
srcOutputs: []

srcStateMachine:
  - key: start
    code: |
      // Check if we already asked the user to perform action
      if ($.globalRunGet("asked-user")) {
        $.log("🧙 Mischief managed");
        return;
      }

      // Mark this so we don't enter an infinite loop
      $.globalRunSet("asked-user", true);

      // Ooops! (reCaptcha, login wall etc.)
      $.pause("Some actions simply cannot continue without a human touch.");
srcFunctions: []
srcInputs: []
srcOutputs: []

srcStateMachine:
  - key: start
    code: |
      // Check if we already asked the user to log in
      if (await $.globalEnvGet("asked-user")) {
        return { next: "work" };
      }

      // Mark this so we don't enter an infinite loop
      // Use the environment cache instead of the run store
      await $.globalEnvSet("asked-user", true);

      // Abandon the current run (and clear values in the run store)
      $.stop("Work your magic, then restart the agent.");
  - key: work
    code: |
      $.log("🧙 Mischief managed");
srcFunctions: []
srcInputs: []
srcOutputs: []

srcStateMachine:
  - key: start
    code: |
      // Open test page
      await $.navLoad("about:home/test");

      // Wait for "Get source" button to be present
      const buttonKey = await $.doAwaitPresent("[data-role=dl-source]");

      // Trigger download of "test.js.yaml" in the future
      $.setTimeout(async () => await $.doClick(buttonKey), 500);

      // Grab the next download and store it in outputs
      await $.ioSaveDownload("yaml");

      // Mark the download
      $.doTick("download");
      $.log("Successfully triggered click 500ms into the future");
srcFunctions: []
srcInputs: []
srcOutputs:
  - key: yaml
    type: files
    name: Yaml files
    desc: ""
    extensions:
      - yaml
    visible: true

srcStateMachine:
  - key: start
    code: |
      // Set the bomb
      const timerId = $.setTimeout(async () => {
        $.log("💥 Boom!", "error");
      }, 500);

      // Clear the bomb
      $.clearTimeout(timerId);
      $.log("All clear", "success");
srcFunctions: []
srcInputs: []
srcOutputs: []

srcStateMachine:
  - key: start
    code: |
      const url = "http://localhost:7199/manifest.json";

      // JSON request (CORS is bypassed)
      $.log(`Fetching ${url} from OS`, "success");
      const response = await $.osRequest(url);
      $.log([response?.status, response?.headers, response?.data]);

      // Fetch headers only
      $.log(`Fetching ${url} without data from OS`, "success");
      const responseNoData = await $.osRequest(url, { resData: false });
      $.log([responseNoData?.status, responseNoData?.headers, responseNoData?.data]);
srcFunctions: []
srcInputs: []
srcOutputs: []

srcStateMachine:
  - key: start
    code: |
      // Read input URL
      const url = $.ioInputString("url");

      // Load page
      await $.navLoad(url);

      // Get page title
      const pageTitle = await $.navGetTitle();

      // Save a screenshot - but the file explorer is hidden for this output (visible = false)
      const { path, width, height } = await $.ioSaveScreenshot("screenshots", { extension: "png" });

      // Prepare the screenshot string
      const screenshot = $.osFileGetUrl(path) + ` (${width}x${height})`;

      // Store complete data as a table row
      await $.ioOutputRow("pages", { url, screenshot });

      // Increment the temporary tick
      $.doTick("screenshot");
srcFunctions: []
srcInputs:
  - key: url
    type: string
    name: Page URL
    desc: ""
    max: 1024
    isList: false
    default: https://uindow.com/
srcOutputs:
  - key: screenshots
    type: files
    name: Screenshots
    desc: Page screenshots
    max: 32
    extensions:
      - png
    visible: false
  - key: pages
    type: table
    name: Visited pages
    desc: ""
    columns:
      - url
      - screenshot

srcStateMachine:
  - key: start
    code: |
      const filePath = await $.ioSaveUrl("downloads", "http://localhost:7199/manifest.json");
      if (null === filePath) {
        throw new Error("$.ioSaveUrl failed");
      }

      const size = await $.osFileGetSize(filePath);
      if (null === size) {
        throw new Error("Could not read the file size");
      }

      // A near-empty file usually means an error page was saved instead of the real thing
      if (size.int < 128) {
        $.log(`Only ${size.int} bytes - looks truncated, skipping`, "warning");

        return;
      }

      // "size.int" is for comparisons, "size.string" is for humans
      $.log(`Outputs total: ${size.string}`);
      await $.ioOutputRow("files", { path: filePath, size: size.string });

      // Add-up input file sizes
      let totalBytes = 0;
      for (const inputPath of $.ioInputFiles("attachments")) {
        const size = await $.osFileGetSize(inputPath);
        if (null === size) {
          continue;
        }

        totalBytes += size.int;
      }
      $.log(`Inputs total: ${totalBytes} B`);
srcFunctions: []
srcInputs:
  - key: attachments
    type: files
    name: Attachments
    desc: ""
    extensions:
      - json
      - txt
    multiple: false
srcOutputs:
  - key: downloads
    type: files
    name: Downloads
    desc: ""
    max: 1024
    extensions:
      - json
    visible: false
  - key: files
    type: table
    name: Saved files
    desc: ""
    columns:
      - path
      - size

srcStateMachine:
  - key: start
    code: |
      const url = "http://localhost:7199/manifest.json";

      // Save the file to disk
      const filePath = await $.ioSaveUrl("json-files", url);

      // Open containing folder (if the user allows it)
      if ($.ioInputBoolean("show-file-after-download")) {
        await $.osFileShow(filePath);
      }
srcFunctions: []
srcInputs:
  - key: show-file-after-download
    type: boolean
    name: Show files
    desc: Show downloaded files when the script finishes
srcOutputs:
  - key: json-files
    type: files
    name: JSON files
    desc: ""
    max: 1024
    extensions:
      - json

srcStateMachine:
  - key: start
    code: |
      const minTemp = -15;
      const maxTemp = 25;

      const predictedTemp = $.osRand(minTemp, maxTemp);

      $.log(`🌤️ Forecast says: ${predictedTemp}°C`, "success");

      switch (true) {
        case predictedTemp < 0:
          $.log("Brrr... this is cold! 🥶");
          break;

        case predictedTemp < 20:
          $.log("Perfect for a walk. 😄");
          break;

        default:
          $.log("Time for some ice cream. 😎");
          break;
      }
srcFunctions: []
srcInputs: []
srcOutputs: []

srcStateMachine:
  - key: start
    code: |
      // Prepare date in YYYY-MM-DD format
      const dateToday = new Date().toISOString().split("T")[0];

      // Fetch the date stored in environment cache (persistent between runs)
      const dateStored = await $.globalEnvGet("date");

      if (dateToday !== dateStored) {
        // Do something new!
        $.log("New day, new possibilities ☀️");

        // Store today in environment cache
        await $.globalEnvSet("date", dateToday);
      }
srcFunctions: []
srcInputs: []
srcOutputs: []

srcStateMachine:
  - key: start
    code: |
      // Set some random values to environment cache (persistent between runs)
      for (let i = 1; i <= 3; i++) {
        const randomInt = $.osRand(10, 99);
        const randomString = $.osRand(10, 15, { string: true });
        await $.globalEnvSet(`key-${randomInt}`, randomString);
      }

      // Get all values stored in environment cache
      const envValues = await $.globalEnvGet();

      // Log them as an object
      $.log(envValues);

      // Log them individually
      for (const envKey of Object.keys(envValues)) {
        $.log(`✨ ${envKey} = ${envValues[envKey]}`, "success");
      }

      // Clean the cache
      for (const envKey of Object.keys(envValues)) {
        // Setting value to null deletes it from the environment cache
        await $.globalEnvSet(envKey, null);
        $.log(`🗑️ ${envKey} environment value removed`, "warning");
      }
srcFunctions: []
srcInputs: []
srcOutputs: []

srcStateMachine:
  - key: start
    code: |
      if ($.globalRunGet("visited")) {
        $.log("Done!");

        return;
      }

      $.log("Visiting the test page...");
      await $.navLoad("about:home/test/");

      $.globalRunSet("visited", true);

      return { next: "start" };
srcFunctions: []
srcInputs: []
srcOutputs: []

srcStateMachine:
  - key: start
    code: |
      // Store any JSON serializable value
      $.globalRunSet("cursor", 0);
      $.globalRunSet("temporary", ["alpha", "beta"]);

      // Writing the same value again reports false (nothing changed)
      if (!$.globalRunSet("cursor", 0)) {
        $.log("The cursor was already 0");
      }

      // Remove the temporary value
      $.globalRunSet("temporary", null);
      if (Object.keys($.globalRunGet()).includes("temporary")) {
        throw new Error("$.globalRunSet failed to delete the key");
      }

      return { next: "ask-user" };
  - key: ask-user
    code: |
      // A paused state re-runs from the top when the agent resumes,
      // so a flag is what keeps this from asking twice
      if (!$.globalRunGet("asked-user")) {
        $.globalRunSet("asked-user", true);

        $.pause("Unpause the agent to continue");
      }

      $.log("Carrying on where we left off...", "success");
      $.doTick("success");
srcFunctions: []
srcInputs: []
srcOutputs: []

srcStateMachine:
  - key: start
    code: |
      // How many tries does the machine get?
      const tries = $.ioInputInt("tries");

      // Which numbers should the machine guess?
      const numbers = $.ioInputInt("lucky-numbers");

      // Roll the dice
      return { next: "roll-dice", args: [tries, numbers] };
  - key: roll-dice
    code: |
      const [tries, numbers] = $.args;

      // Let's roll the dice
      for (let i = 1; i <= tries; i++) {
        // Guess a number (same min,max restrictions as input lucky-numbers)
        const guess = $.osRand(1, 100);

        // Did we get it?
        if (numbers.includes(guess)) {
          $.log(`Guessed it - you were thinking of ${guess}!`, "success");
          $.doTick("success");
          return;
        }
      }

      $.log("No luck this time. Try again!", "warning");
      $.doTick("warning");
srcFunctions: []
srcInputs:
  - key: tries
    type: int
    name: Number of tries
    desc: How many times should the machine attempt to guess one of our lucky numbers?
    min: 1
    max: 100
    isList: false
    default: 10
  - key: lucky-numbers
    type: int
    name: Lucky numbers
    desc: List of lucky numbers - if the machine guesses just one of them, we win!
    min: 1
    max: 100
    isList: true
srcOutputs: []

srcStateMachine:
  - key: start
    code: |
      const mood = $.ioInputString("mood");
      const wishes = $.ioInputString("wishes");

      const wish = wishes[$.osRand(0, wishes.length - 1)];
      const fortune = await $.llm(`Grant this wish in one ${mood} sentence: ${wish}`);

      $.log(`🔮 ${fortune}`, "success");
srcFunctions: []
srcInputs:
  - key: mood
    type: string
    name: Oracle mood
    desc: How should the oracle feel today?
    max: 16
    isList: false
    options:
      - cheerful
      - grumpy
      - cryptic
    default: cheerful
  - key: wishes
    type: string
    name: Your wishes
    desc: One wish per line - the oracle picks one at random
    max: 128
    isList: true
srcOutputs: []

srcStateMachine:
  - key: start
    code: |
      const dryRun = $.ioInputBoolean("dry-run");
      const verbose = $.ioInputBoolean("verbose");

      verbose && $.log("Verbose logging is on");

      if (dryRun) {
        verbose && $.log("Dry run", "warning");

        // Not home yet
        if (!(await $.navGetUrl()).match(/\/home\/?$/)) {
          verbose && $.log("Navigating home...");
          await $.navLoad("about:home/");
        }

        return;
      }

      verbose && $.log("Visiting test page...");
      await $.navLoad("about:home/test/");

      verbose && $.log("Typing some words of wisdom...");
      await $.doType('[name="input-textfield"]', "Code is poetry");
      await $.ioSaveScreenshot("previews");

      verbose && $.log("Navigating home...");
      await $.navLoad("about:home/");
srcFunctions: []
srcInputs:
  - key: dry-run
    type: boolean
    name: Dry run
    desc: Preview the result without typ anything
  - key: verbose
    type: boolean
    name: Verbose logging
    desc: ""
srcOutputs:
  - key: previews
    type: files
    name: Previews
    desc: ""
    max: 128
    extensions:
      - png

srcStateMachine:
  - key: start
    code: |
      // Go through the clients table one row at a time
      let row = null;
      while ((row = await $.ioInputRow("clients"))) {
        $.log(`Client name: ${row.name}`);
        $.log(`Client age: ${row.age}`);
      }
srcFunctions: []
srcInputs:
  - key: clients
    type: table
    name: Company clients
    desc: List of clients
    columns:
      - name
      - age
srcOutputs: []

srcStateMachine:
  - key: start
    code: |
      const files = $.ioInputFiles("uploads");
      const lucky = files[$.osRand(0, files.length - 1)];

      $.log(`🎁 Picking 1 of your ${files.length} files at random...`, "success");
      await $.osFileShow(lucky);
srcFunctions: []
srcInputs:
  - key: uploads
    type: files
    name: Your files
    desc: Pick a few - the module opens one of them at random
    extensions:
      - png
      - jpg
      - jpeg
      - pdf
    multiple: true
    max: 25
srcOutputs: []

srcStateMachine:
  - key: start
    code: |
      await $.navLoad("about:home/test/");

      const sections = await $.doQueryAll("h2");
      await $.ioOutputInt("sections", sections.length);

      $.log(`📈 ${sections.length} sections on the test page`, "success");

      await $.navLoad("about:home/");
srcFunctions: []
srcInputs: []
srcOutputs:
  - key: sections
    type: int
    name: Sections found
    desc: ""
    min: 0

srcStateMachine:
  - key: start
    code: |
      await $.navLoad("about:home/test/");

      const title = await $.navGetTitle();

      await $.ioOutputString("headline", title);
      await $.ioOutputString("verdict", await $.llm(`Review "${title}" in under 40 characters. Be dramatic.`));

      $.log("📰 Today's edition is in the Results tab", "success");
srcFunctions: []
srcInputs: []
srcOutputs:
  - key: headline
    type: string
    name: Headline
    desc: ""
    max: 120
  - key: verdict
    type: string
    name: Dramatic verdict
    desc: ""
    max: 40

srcStateMachine:
  - key: start
    code: |
      // Get the current minute
      const minute = new Date().getMinutes();

      // This minute is even (divisible by 2)
      const rightTime = 0 === minute % 2;

      // Save/override the result as a boolean flag
      await $.ioOutputBoolean("right-time", rightTime);
srcFunctions: []
srcInputs: []
srcOutputs:
  - key: right-time
    type: boolean
    name: Right time
    desc: The agent ran at an even minute

srcStateMachine:
  - key: start
    code: |
      // Read the input table one row at a time and write a result row for each
      let row = null;
      while ((row = await $.ioInputRow("subjects"))) {
        const subject = row.subject;
        $.log(`Working on ${subject}`);

        const joke = await $.llm(`Tell me a short joke about ${subject}`);

        // Keys map onto the columns declared in srcOutputs.
        // A row that isn't an object returns false rather than throwing.
        const saved = await $.ioOutputRow("jokes", { subject, joke });
        if (!saved) {
          $.log(`Could not append a row for ${subject}`, "warning");
        }
      }

      $.log("Every subject has been written to the output table", "success");
srcFunctions: []
srcInputs:
  - key: subjects
    type: table
    name: Subjects
    desc: A list of subjects to joke about
    columns:
      - subject
srcOutputs:
  - key: jokes
    type: table
    name: Jokes
    desc: One joke per subject
    columns:
      - subject
      - joke

srcStateMachine:
  - key: start
    code: |
      await $.navLoad("about:home/test/");

      // Anything you can build as a string: JSON, YAML, INI, CSV
      const report = JSON.stringify(
        {
          url: await $.navGetUrl(),
          title: await $.navGetTitle(),
          at: new Date().toISOString()
        },
        null,
        2
      );

      const jsonPath = await $.ioSaveText("reports", report, { extension: "json" });
      if (null === jsonPath) {
        throw new Error("$.ioSaveText failed");
      }

      $.log(`Wrote ${report.length} characters to ${jsonPath}`, "success");

      return { next: "csv" };
  - key: csv
    code: |
      // Building a CSV by hand is worth it when the shape doesn't
      // suit a table output, or when the file is the deliverable
      const rows = [["url", "heading"]];
      const pageUrl = await $.navGetUrl();

      for (const headingKey of await $.doQueryAll("h2")) {
        rows.push([pageUrl, await $.doGetContent(headingKey)]);
      }

      const escape = (value) => '"' + String(value).replace(/"/g, '""') + '"';
      const csv = rows.map((cells) => cells.map(escape).join(",")).join("\n");

      const csvPath = await $.ioSaveText("reports", csv, { extension: "csv" });
      if (null !== csvPath) {
        $.log(`Saved ${rows.length - 1} rows`, "success");
        $.doTick("collect", rows.length - 1);
      }
srcFunctions: []
srcInputs: []
srcOutputs:
  - key: reports
    type: files
    name: Reports
    desc: ""
    max: 64
    extensions:
      - json
      - csv
      - txt

srcStateMachine:
  - key: start
    code: |
      await $.navLoad("about:home/test/");

      // Arm the capture first, then let the click happen while it waits
      const srcButton = await $.doQuery('[data-role="dl-source"]');
      $.setTimeout(async () => await $.doClick(srcButton), 500);

      const savePath = await $.ioSaveDownload("yaml", { timeout: 120 });
      if (null === savePath) {
        throw new Error("$.ioSaveDownload failed");
      }

      $.log(`Saved to ${savePath}`, "success");
      $.doTick("download");

      return { next: "custom-extension" };
  - key: custom-extension
    code: |
      const logoButton = await $.doQuery('[data-role="dl-logo"]');
      if (null === logoButton) {
        return;
      }

      $.setTimeout(async () => await $.doClick(logoButton), 500);

      // Stored under a declared extension whatever the URL happens to say
      const imgPath = await $.ioSaveDownload("images", { extension: "jpeg" });
      if (null === imgPath) {
        $.log("Nothing was downloaded", "warning");

        return;
      }

      $.log(`Image saved as ${imgPath}`);
srcFunctions: []
srcInputs: []
srcOutputs:
  - key: yaml
    type: files
    name: Yaml files
    desc: ""
    max: 512
    extensions:
      - yaml
  - key: images
    type: files
    name: Images
    desc: ""
    max: 512
    extensions:
      - jpeg
      - png

srcStateMachine:
  - key: start
    code: |
      await $.navLoad("about:home/test/");

      // Just what the user would see, as PNG
      const viewportShot = await $.ioSaveScreenshot("images", { extension: "png" });
      if (null === viewportShot.path) {
        throw new Error(`Screenshot failed: ${viewportShot.error}`);
      }
      $.log(`Saved ${viewportShot.width}x${viewportShot.height} to ${viewportShot.path}`, "success");

      // The whole document as JPEG, giving lazy-loaded images a moment to settle
      const fullShot = await $.ioSaveScreenshot("images", {
        extension: "jpeg",
        full: true,
        wait: 1500
      });
      if (null === fullShot.path) {
        throw new Error(`Full page screenshot failed: ${fullShot.error}`);
      }
      $.log(`Full page is ${fullShot.height} pixels tall`);

      return { next: "evidence" };
  - key: evidence
    code: |
      // Screenshots are cheap - grab one whenever something goes wrong
      try {
        await $.doClick(await $.doQuery("button", { contains: "submit" }));
      } catch (error) {
        const shot = await $.ioSaveScreenshot("images", { full: true, dpr: true });
        $.log(`Click failed, evidence saved to ${shot.path}`, "error");
      }
srcFunctions: []
srcInputs: []
srcOutputs:
  - key: images
    type: files
    name: Screenshots
    desc: ""
    max: 1024
    extensions:
      - png
      - jpeg

srcStateMachine:
  - key: start
    code: |
      // Go home
      await $.navLoad("about:home/");

      // Start recording
      const recStop = await $.ioSaveVideo("video");
      
      // Wait, then load the test page
      await $.sleep(1000);
      await $.navLoad("about:home/test/");

      // Smooth-scroll through the entire page
      await $.doScroll(750, { speed: 150 });

      // Log recorded video file path
      const filePath = await recStop();
      $.log(filePath);
srcFunctions: []
srcInputs: []
srcOutputs:
  - key: video
    type: files
    name: Recordings
    desc: ""
    max: 512
    extensions:
      - mp4

srcStateMachine:
  - key: start
    code: |
      // Save an asset that is never exposed as a link on the page
      const imgPath = await $.ioSaveUrl("images", "http://localhost:7199/img/pages/page-404.png");
      if (null === imgPath) {
        throw new Error("$.ioSaveUrl failed");
      }
      $.log(`Saved to ${imgPath}`, "success");

      // Store it under a different declared extension, and allow longer for a big file
      const jpegPath = await $.ioSaveUrl("images", "http://localhost:7199/img/pages/page-401.png", {
        extension: "jpeg",
        timeout: 120
      });
      $.log(`Saved as ${jpegPath}`);

      return { next: "scrape-gallery" };
  - key: scrape-gallery
    code: |
      await $.navLoad("http://localhost:7199/");

      // Relative URLs are resolved against the page that is currently loaded
      await $.ioSaveUrl("images", "/img/pages/page-404.png");

      // Pull every image the page references
      const imageKeys = await $.doQueryAll("img[src]");
      for (const imageKey of imageKeys) {
        const src = await $.doGetAttribute(imageKey, "src");
        if (null === src) {
          continue;
        }

        const savedPath = await $.ioSaveUrl("images", src);
        if (null === savedPath) {
          $.log(`Skipped ${src}`, "warning");

          continue;
        }

        $.doTick("download");
      }
srcFunctions: []
srcInputs: []
srcOutputs:
  - key: images
    type: files
    name: Images
    desc: ""
    max: 1024
    extensions:
      - png
      - jpeg

srcStateMachine:
  - key: start
    code: |
      const url = "http://localhost:7199/manifest.json";

      // Navigate to origin so the browser allows the request (CORS)
      await $.navLoad(new URL(url).origin);

      $.log("Saving JSON as simple text file...");
      const jsonPath = await $.ioSaveRequest("manifest", url, { extension: "txt" });
      if ("string" !== typeof jsonPath) {
        throw new Error("$.ioSaveRequest failed");
      }
srcFunctions: []
srcInputs: []
srcOutputs:
  - key: manifest
    type: files
    name: JSON files
    desc: ""
    max: 1024
    extensions:
      - json
      - txt

srcStateMachine:
  - key: start
    code: |
      // Open the home page and wait for DOM ready
      await $.navLoad("about:home/");

      // Give a slow page a shorter leash than the default 60 seconds
      await $.navLoad("about:home/test/", { timeout: 15 });

      // Confirm we landed where we expected to
      const url = await $.navGetUrl();
      const title = await $.navGetTitle();
      $.log(`Loaded "${title}" at ${url}`, "success");

      return { next: "risky-page" };
  - key: risky-page
    code: |
      // A page that may be down, slow, or blocked - don't let it kill the run
      try {
        await $.navLoad("https://example.com/", { timeout: 10 });
        $.log("Third party page is up", "success");
      } catch (error) {
        $.log(`Navigation failed: ${error.message}`, "warning");
      }
srcFunctions: []
srcInputs: []
srcOutputs: []

srcStateMachine:
  - key: start
    code: |
      await $.navLoad("about:home/test/");

      // Plain reload - same URL, same history entry
      await $.navReload();
      $.log(`Still on ${await $.navGetUrl()}`);

      // Bypass the cache when stale assets are the problem
      await $.navReload({ skipCache: true, timeout: 30 });

      return { next: "retry" };
  - key: retry
    code: |
      // A reload is the cheapest fix for a page that rendered badly
      // or never finished populating
      for (let attempt = 1; attempt <= 3; attempt++) {
        if (await $.doAwaitPresent("[data-role=row]", { timeout: 10 })) {
          $.log(`Rows appeared on attempt ${attempt}`, "success");

          return;
        }

        $.log(`Nothing rendered, reloading (${attempt}/3)`, "warning");
        await $.navReload({ skipCache: true });
      }

      $.stop("The page never rendered its rows.");
srcFunctions: []
srcInputs: []
srcOutputs: []

srcStateMachine:
  - key: start
    code: |
      await $.navLoad("about:home/");
      await $.navLoad("about:home/test/");

      let steps = 0;
      while (await $.navGoBack({ timeout: 10 })) {
        steps++;
      }

      $.log(`🥖 ${steps} breadcrumbs later, back at ${await $.navGetUrl()}`, "success");
srcFunctions: []
srcInputs: []
srcOutputs: []

srcStateMachine:
  - key: start
    code: |
      await $.navLoad("about:home/");
      await $.navLoad("about:home/test/");

      // Step back, peek at the previous page, then return
      await $.navGoBack();
      $.log(`After going back: ${await $.navGetUrl()}`);

      await $.navGoForth();
      $.log(`After going forward: ${await $.navGetUrl()}`, "success");

      return { next: "lost-history" };
  - key: lost-history
    code: |
      // Step back, then navigate somewhere new - this drops the forward entry
      await $.navGoBack();
      await $.navLoad("about:home/");

      if (!(await $.navGoForth({ timeout: 10 }))) {
        $.log("Nothing to go forward to", "warning");
      }
srcFunctions: []
srcInputs: []
srcOutputs: []

srcStateMachine:
  - key: start
    code: |
      await $.navLoad("about:home/test/");

      // Where did we actually end up?
      const currentUrl = await $.navGetUrl();
      $.log(`Landed on ${currentUrl}`);

      // Branch on the path rather than on what we asked for
      if (currentUrl.match(/\/home\/test\/?$/)) {
        $.log("We're on the test page", "success");

        return { next: "scrape" };
      }

      // Redirected to a login wall, a consent page, or an error
      $.log("Unexpected page, nothing to scrape here", "warning");
  - key: scrape
    code: |
      // Keep the origin so relative links can be resolved later
      const { origin } = new URL(await $.navGetUrl());
      $.log(`Working within ${origin}`);
srcFunctions: []
srcInputs: []
srcOutputs: []

srcStateMachine:
  - key: start
    code: |
      await $.navLoad("about:home/test/");

      // The title is the cheapest way to sanity check a page
      const pageTitle = await $.navGetTitle();
      $.log(`Page title: ${pageTitle}`);

      // Many sites answer with 200 OK and an error page
      if (pageTitle.match(/^(404|403|not found|error)/i)) {
        $.log("Served an error page, giving up on this URL", "warning");

        return;
      }

      $.log("Page looks right, carrying on", "success");
      return { next: "wait-for-title" };
  - key: wait-for-title
    code: |
      // Single page apps swap the title instead of reloading,
      // so poll it to know when the view has changed
      const titleBefore = await $.navGetTitle();
      await $.doClick(await $.doQuery("a", { contains: "buttons" }));

      for (let i = 0; i < 10; i++) {
        if (titleBefore !== (await $.navGetTitle())) {
          $.log("The view has changed", "success");

          return;
        }

        await $.sleep(500);
      }

      $.log("Title never changed, the click may not have registered", "warning");
srcFunctions: []
srcInputs: []
srcOutputs: []

srcStateMachine:
  - key: start
    code: |
      await $.navLoad("about:home/test/");

      // Disarm the dialog before the click that raises it
      await $.handleAlert();
      await $.doClick(await $.doQuery('[data-role="alert"]'));

      // The guard covers exactly one dialog, so a second alert
      // needs a second call
      await $.handleAlert();
      await $.doClick(await $.doQuery('[data-role="alert"]'));

      $.log("Both alerts handled", "success");
srcFunctions: []
srcInputs: []
srcOutputs: []

srcStateMachine:
  - key: start
    code: |
      await $.navLoad("about:home/test/");

      const confirmButton = await $.doQuery('[data-role="confirm"]');
      const resultKey = await $.doQuery('[data-role="confirm-result"]');

      // Accept the next confirmation
      await $.handleConfirm();
      await $.doClick(confirmButton);
      $.log(`The page received: ${await $.doGetContent(resultKey)}`);

      // Reject the one after that
      await $.handleConfirm(false);
      await $.doClick(confirmButton);
      $.log(`The page received: ${await $.doGetContent(resultKey)}`);

      return { next: "guarded-delete" };
  - key: guarded-delete
    code: |
      // Rejecting matters more than accepting: an unhandled confirmation
      // is accepted for you, which is the wrong default for a dry run
      const dryRun = $.ioInputBoolean("dry-run");

      const deleteKey = await $.doQuery("button", { contains: "delete" });
      if (null === deleteKey) {
        return;
      }

      await $.handleConfirm(!dryRun);
      await $.doClick(deleteKey);

      $.log(dryRun ? "Deletion cancelled" : "Deletion confirmed", dryRun ? "warning" : "success");
srcFunctions: []
srcInputs:
  - key: dry-run
    type: boolean
    name: Dry run
    desc: Cancel destructive confirmations instead of accepting them
srcOutputs: []

srcStateMachine:
  - key: start
    code: |
      await $.navLoad("about:home/test/");

      // Queue the answer, then trigger the prompt
      await $.handlePrompt("foo");
      await $.doClick(await $.doQuery('[data-role="prompt"]'));

      const answer = await $.doGetContent(await $.doQuery('[data-role="prompt-result"]'));
      if ("foo" !== answer) {
        throw new Error(`The page received "${answer}" instead`);
      }

      $.log("Prompt answered", "success");

      return { next: "answer-from-input" };
  - key: answer-from-input
    code: |
      // The answer usually comes from somewhere else - an input,
      // a table row, or a value carried over from an earlier state
      const code = $.ioInputString("code");

      await $.handlePrompt(code);
      await $.doClick(await $.doQuery('[data-role="prompt"]'));

      $.log(`Answered the prompt with ${code.length} characters`);
srcFunctions: []
srcInputs:
  - key: code
    type: string
    name: Confirmation code
    desc: Sent as the answer to the page's prompt
    max: 64
    default: uindow
srcOutputs: []

srcStateMachine:
  - key: start
    code: |
      await $.navLoad("about:home/test/");

      const treasure = await $.doQuery(".MuiButton-root", { contains: "foo" });

      await $.doHighlight(treasure);
      $.log(`🎯 Found a <${await $.doGetTag(treasure)}> saying "${await $.doGetContent(treasure)}"`, "success");
srcFunctions: []
srcInputs: []
srcOutputs: []

srcStateMachine:
  - key: start
    code: |
      await $.navLoad("about:home/test/");

      // Every match, in document order
      const headingKeys = await $.doQueryAll("h2");
      $.log(`Found ${headingKeys.length} sections`);

      for (const headingKey of headingKeys) {
        $.log(await $.doGetContent(headingKey));
      }

      return { next: "scrape-rows" };
  - key: scrape-rows
    code: |
      // The usual shape of a scrape: find the repeated container,
      // then query inside each one with { parent }
      const rowKeys = await $.doQueryAll("[data-role=row]");
      if (!rowKeys.length) {
        $.log("Nothing to scrape on this page", "warning");

        return;
      }

      for (const rowKey of rowKeys) {
        const nameKey = await $.doQuery(".name", { parent: rowKey });
        const linkKey = await $.doQuery("a[href]", { parent: rowKey });
        if (null === nameKey || null === linkKey) {
          continue;
        }

        await $.ioOutputRow("items", {
          name: await $.doGetContent(nameKey),
          url: (await $.doGetAttribute(linkKey, "href")) ?? ""
        });

        $.doTick("collect");
      }
srcFunctions: []
srcInputs: []
srcOutputs:
  - key: items
    type: table
    name: Scraped items
    desc: ""
    columns:
      - name
      - url

srcStateMachine:
  - key: start
    code: |
      await $.navLoad("about:home/test/");

      const switchKey = await $.doQuery("input[name='s1'][value='1']");

      // With no selector, you get the immediate ancestor
      const firstParent = await $.doQueryParent(switchKey);
      $.log(await $.doGetAttribute(firstParent, "class"));

      // With one, it climbs until something matches
      const groupKey = await $.doQueryParent(switchKey, { selector: "div", contains: "Switches" });
      if (null === groupKey) {
        throw new Error("Could not find the enclosing group");
      }

      $.log(`Group: ${await $.doGetAttribute(groupKey, "data-stack")}`);

      return { next: "climb-to-row" };
  - key: climb-to-row
    code: |
      // The usual shape: find the one thing you can identify,
      // then climb to the container holding everything you want
      const priceKey = await $.doQuery("[data-role=price]", { contains: "99" });
      if (null === priceKey) {
        $.log("No matching price on this page", "warning");

        return;
      }

      const rowKey = await $.doQueryParent(priceKey, { selector: "[data-role=row]" });
      if (null === rowKey) {
        return;
      }

      // Now query downwards again, scoped to that row
      const nameKey = await $.doQuery(".name", { parent: rowKey });
      $.log(await $.doGetContent(nameKey));
srcFunctions: []
srcInputs: []
srcOutputs: []

srcStateMachine:
  - key: start
    code: |
      await $.navLoad("about:home/test/");

      const switchKey = await $.doQuery("input[name='s1'][value='1']");
      const switchRoot = await $.doQueryParent(switchKey, { selector: ".MuiSwitch-root" });

      // The element you started from is never included in the result
      const siblingKeys = await $.doQuerySiblings(switchRoot);
      $.log(`${siblingKeys.length} sibling switches`);

      for (const siblingKey of siblingKeys) {
        const checkboxKey = await $.doQuery("input[type='checkbox']", { parent: siblingKey });
        if (null === checkboxKey) {
          continue;
        }

        $.log(`Sibling value: ${await $.doGetAttribute(checkboxKey, "value")}`);
      }

      return { next: "narrow" };
  - key: narrow
    code: |
      const switchKey = await $.doQuery("input[name='s1'][value='1']");
      const switchRoot = await $.doQueryParent(switchKey, { selector: ".MuiSwitch-root" });

      // Narrow by selector, or by the text the sibling contains
      const labelKeys = await $.doQuerySiblings(switchRoot, { selector: "label" });
      $.log(`${labelKeys.length} labels alongside it`);
srcFunctions: []
srcInputs: []
srcOutputs: []

srcStateMachine:
  - key: start
    code: |
      await $.navLoad("about:home/test/");

      // What is sitting at this point in the viewport?
      const elementKey = await $.doQueryAt(50, 20);
      if (null === elementKey) {
        $.log("Nothing at that point", "warning");

        return;
      }

      $.log(`Found a <${await $.doGetTag(elementKey)}>`);

      // The topmost element is often a wrapper or an overlay.
      // A selector climbs to the ancestor you actually meant.
      const buttonKey = await $.doQueryAt(50, 20, { selector: "button" });
      $.log(null === buttonKey ? "Not inside a button" : "Inside a button");

      return { next: "follow-pointer" };
  - key: follow-pointer
    code: |
      // Check what a coordinate click would hit before committing to it
      await $.doHoverAt(400, 400);

      const { left, top } = await $.doGetMouse();
      const targetKey = await $.doQueryAt(left, top);
      if (null === targetKey) {
        $.log("The pointer is over empty space", "warning");

        return;
      }

      $.log(await $.doGetContent(targetKey));
      await $.doClickAt(left, top);
srcFunctions: []
srcInputs: []
srcOutputs: []

srcStateMachine:
  - key: start
    code: |
      const url = "http://localhost:7199/manifest.json";

      // Navigate to origin so the browser allows the request (CORS)
      await $.navLoad(new URL(url).origin);

      // JSON request
      $.log(`Fetching ${url} from browser`, "success");
      const response = await $.doRequest(url);
      $.log([response?.status, response?.headers, response?.data]);

      // Fetch headers only
      $.log(`Fetching ${url} without data from browser`, "success");
      const responseNoData = await $.doRequest(url, { resData: false });
      $.log([responseNoData?.status, responseNoData?.headers, responseNoData?.data]);
srcFunctions: []
srcInputs: []
srcOutputs: []

srcStateMachine:
  - key: start
    code: |
      await $.navLoad("about:home/test/");

      // Counters are the cheapest progress signal in a long run
      const rowKeys = await $.doQueryAll("[data-role=row]");
      for (const rowKey of rowKeys) {
        await $.ioOutputRow("items", { name: await $.doGetContent(rowKey) });

        // No await - ticking is synchronous
        $.doTick("collect");
      }

      return { next: "named-counters" };
  - key: named-counters
    code: |
      // These names render as icons rather than text
      $.doTick("screenshot");
      $.doTick("download", 3);
      $.doTick("success");

      // Anything else is shown as a plain label
      $.doTick("pages");

      // An amount of 0 is accepted but changes nothing
      $.doTick("collect", 0);
srcFunctions: []
srcInputs: []
srcOutputs:
  - key: items
    type: table
    name: Collected items
    desc: ""
    columns:
      - name

srcStateMachine:
  - key: start
    code: |
      await $.navLoad("about:home/test/");

      // Show what the agent is about to touch before it touches it
      const inputKey = await $.doQuery("[name=input-textfield]");
      await $.doHighlight(inputKey);
      await $.doType(inputKey, "uindow", { replace: true });

      // Already on screen, and the mouse is needed elsewhere
      await $.doHighlight("h1", { scroll: false, hover: false });

      return { next: "tour" };
  - key: tour
    code: |
      // Walking a set of matches makes a recording much easier to follow
      const headingKeys = await $.doQueryAll("h2");
      for (const headingKey of headingKeys) {
        await $.doHighlight(headingKey);
      }

      $.log(`Highlighted ${headingKeys.length} sections`, "success");
srcFunctions: []
srcInputs: []
srcOutputs: []

srcStateMachine:
  - key: start
    code: |
      await $.navLoad("about:home/test/");

      const box = await $.doGetBox("[name=input-textfield]");
      if (null === box) {
        return;
      }

      // A box from $.doGetBox can be passed straight through
      await $.doHighlightBox(box);
      await $.sleep(1200);

      // Or adjusted to point at part of an element
      await $.doHighlightBox({ left: box.left, top: box.top, width: 50, height: 50 });
      await $.sleep(1200);

      // Boxes thinner than 2px in either direction are not drawn at all
      await $.doHighlightBox({ left: box.left, top: box.top, width: 1, height: 1 });

      return { next: "region" };
  - key: region
    code: |
      // The box doesn't have to correspond to an element - here we mark
      // the top third of the viewport before capturing it
      const viewport = await $.doGetViewport();

      await $.doHighlightBox({
        left: 0,
        top: 0,
        width: viewport.width,
        height: Math.round(viewport.height / 3)
      });

      await $.sleep(1200);
srcFunctions: []
srcInputs: []
srcOutputs: []

srcStateMachine:
  - key: start
    code: |
      await $.navLoad("about:home/test/");

      // Park the pointer in the middle of the viewport
      const viewport = await $.doGetViewport();
      await $.doHoverAt(viewport.width / 2, viewport.height / 2);

      // Read it back
      const { left, top } = await $.doGetMouse();
      $.log(`Mouse is at ${left} x ${top}`);

      // Walk it to the right in small steps, relative to wherever it is now
      for (let i = 0; i < 5; i++) {
        const position = await $.doGetMouse();
        await $.doHoverAt(position.left + 40, position.top);
        await $.sleep(200);
      }

      const moved = await $.doGetMouse();
      $.log(`Mouse travelled ${moved.left - left} pixels`, "success");

      return { next: "inspect" };
  - key: inspect
    code: |
      // Mouse position carries across states, so you can pick up where you left off
      const { left, top } = await $.doGetMouse();

      // What is sitting under the pointer right now?
      const elementKey = await $.doQueryAt(left, top);
      if (null === elementKey) {
        $.log("Nothing under the pointer", "warning");

        return;
      }

      $.log(`Hovering a <${await $.doGetTag(elementKey)}> element`, "success");
srcFunctions: []
srcInputs: []
srcOutputs: []

srcStateMachine:
  - key: start
    code: |
      await $.navLoad("about:home/test/");

      const inputKey = await $.doQuery("[name=input-text]");
      const box = await $.doGetBox(inputKey);
      if (null === box) {
        throw new Error("$.doGetBox failed");
      }

      $.log(`${box.width}x${box.height} at ${box.left},${box.top}`);

      // Coordinates are viewport-relative, so they feed the *At methods directly
      await $.doTypeAt(box.left + box.width / 2, box.top + box.height / 2, "baz", {
        replace: true
      });

      // Highlight a region of your own choosing
      await $.doHighlightBox({ left: box.left, top: box.top, width: 50, height: 50 });

      return { next: "detect-inner-scroll" };
  - key: detect-inner-scroll
    code: |
      // scrollHeight larger than height means the element holds more
      // than it can show - a panel that scrolls on its own
      const listBox = await $.doGetBox("[data-role=long-list]");
      if (null === listBox) {
        return;
      }

      if (listBox.scrollHeight > listBox.height) {
        $.log(`List shows ${listBox.height}px of ${listBox.scrollHeight}px`, "warning");

        // Wheel events land wherever the pointer is
        await $.doHover("[data-role=long-list]");
        await $.doScroll(listBox.scrollHeight - listBox.height);
      }
srcFunctions: []
srcInputs: []
srcOutputs: []

srcStateMachine:
  - key: start
    code: |
      await $.navLoad("about:home/test/");

      // Matching on visible text is convenient, but the text may be
      // translated, reworded, or simply slow to find on a large page
      const buttonKey = await $.doQuery(".MuiButton-root", { contains: "foo" });
      if (null === buttonKey) {
        throw new Error("Could not find the 'foo' button");
      }

      // Turn the match into a plain CSS selector
      const selector = await $.doGetSelector(buttonKey);
      $.log(`Matched: ${selector}`);

      // Selectors are ordinary strings, so they can be stored
      $.globalRunSet("action-button", selector);

      return { next: "reuse" };
  - key: reuse
    code: |
      const selector = $.globalRunGet("action-button");
      if (null === selector) {
        return;
      }

      // Every $.do* method takes a CSS selector wherever it takes an element key
      await $.doHighlight(selector);
      await $.doClick(selector);
srcFunctions: []
srcInputs: []
srcOutputs: []

srcStateMachine:
  - key: start
    code: |
      await $.navLoad("about:home/test/");

      await $.doHoverAt(50, 20);
      const spot = await $.doQueryAt(50, 20);

      $.log(`Under the pointer: <${await $.doGetTag(spot)}>`);
srcFunctions: []
srcInputs: []
srcOutputs: []

srcStateMachine:
  - key: start
    code: |
      await $.navLoad("about:home/test/");

      const field = await $.doQuery("[name=input-text]");
      await $.doType(field, "uindow", { replace: true });
      $.log(await $.doGetValue(field));

      const boxes = await $.doQuery("input[type=checkbox][name=c1]");
      await $.doCheck(boxes, ["2", "4"]);
      $.log(await $.doGetValue(boxes));
srcFunctions: []
srcInputs: []
srcOutputs: []

srcStateMachine:
  - key: start
    code: |
      await $.navLoad("about:home/test/");

      const selectKey = await $.doQuery("[data-role=select]");

      // Find out what the dropdown actually offers before touching it
      const options = await $.doGetOptions(selectKey);
      $.log(`${options.length} options available`);

      // What is selected right now?
      const current = options.find((o) => o.selected);
      $.log(`Currently selected: ${current ? current.text : "nothing"}`);

      return { next: "choose-by-label" };
  - key: choose-by-label
    code: |
      const selectKey = await $.doQuery("[data-role=select]");
      const options = await $.doGetOptions(selectKey);

      // Users think in labels, but $.doSelect works on values.
      // Match the visible text, then pass along the value behind it.
      const wanted = $.ioInputString("choice").toLowerCase();
      const match = options.find((o) => o.text.toLowerCase().includes(wanted));

      if (!match) {
        $.log(`No option matching "${wanted}"`, "warning");
        $.log(options.map((o) => o.text));

        return;
      }

      await $.doSelect(selectKey, match.value);
      $.log(`Chose "${match.text}"`, "success");

      return { next: "choose-many" };
  - key: choose-many
    code: |
      // Multi-selects work the same way, with an array of values
      const multiKey = await $.doQuery("[data-role=select-multi]");
      const multiOptions = await $.doGetOptions(multiKey);

      await $.doSelect(
        multiKey,
        multiOptions.slice(0, 2).map((o) => o.value)
      );
srcFunctions: []
srcInputs:
  - key: choice
    type: string
    name: Option to pick
    desc: Matched against the visible label of the dropdown
    max: 64
    default: "8"
srcOutputs: []

srcStateMachine:
  - key: start
    code: |
      await $.navLoad("about:home/test/");

      const radio = await $.doQuery("input[type=radio][name=r1]");
      $.log(await $.doGetAttribute(radio, "value"));

      const disabled = await $.doGetAttribute(await $.doQuery("button"), "disabled");
      $.log(null === disabled ? "Button is enabled" : "Button is disabled");
srcFunctions: []
srcInputs: []
srcOutputs: []

srcStateMachine:
  - key: start
    code: |
      await $.navLoad("about:home/test/");

      const linkKey = await $.doQuery("a[href]");
      if (null === linkKey) {
        return;
      }

      // Ask for the ones you need, in a single round trip
      const attrs = await $.doGetAttributes(linkKey, ["href", "target", "rel"]);
      $.log(`href=${attrs.href} target=${attrs.target ?? "(none)"}`);

      // Omit the list to see everything the element carries -
      // handy while working out which attributes are worth reading
      $.log(await $.doGetAttributes(linkKey));

      return { next: "scrape" };
  - key: scrape
    code: |
      // Attributes that aren't set are simply missing from the map,
      // so fall back rather than assuming every key is there
      for (const cardKey of await $.doQueryAll("[data-role=card]")) {
        const attrs = await $.doGetAttributes(cardKey, ["data-id", "data-price"]);

        await $.ioOutputRow("cards", {
          id: attrs["data-id"] ?? "",
          price: attrs["data-price"] ?? ""
        });
      }
srcFunctions: []
srcInputs: []
srcOutputs:
  - key: cards
    type: table
    name: Cards
    desc: ""
    columns:
      - id
      - price

srcStateMachine:
  - key: start
    code: |
      await $.navLoad("about:home/test/");

      const heading = await $.doQuery("h1");

      $.log(await $.doGetContent(heading));
      $.log(await $.doGetContent(heading, true));
srcFunctions: []
srcInputs: []
srcOutputs: []

srcStateMachine:
  - key: start
    code: |
      await $.navLoad("about:home/test/");

      const buttonKey = await $.doQuery(".MuiButton-root", { contains: "foo" });
      if (null === buttonKey) {
        return;
      }

      // Ask for the handful of properties you care about
      const style = await $.doGetStyle(buttonKey, ["display", "visibility", "opacity", "color"]);
      if (null === style) {
        throw new Error("$.doGetStyle failed");
      }

      $.log(style);

      // Values are resolved, so state driven by a class is readable
      if ("none" === style.display || "0" === style.opacity) {
        $.log("The button is hidden by CSS", "warning");

        return;
      }

      await $.doClick(buttonKey);

      return { next: "explore" };
  - key: explore
    code: |
      // Omit the list to get everything - a lot of output, but useful
      // once while working out which properties carry the state you need
      const all = await $.doGetStyle("h1");
      if (null === all) {
        return;
      }

      $.log(`${Object.keys(all).length} properties resolved`);
srcFunctions: []
srcInputs: []
srcOutputs: []

srcStateMachine:
  - key: start
    code: |
      await $.navLoad("about:home/test/");

      const ghost = await $.doQuery("#alert-visible");
      $.log(`Before: ${await $.doGetVisible(ghost)}`);

      await $.doClick(await $.doQuery('[data-role="toggle-visible"]'));
      $.log(`After: ${await $.doGetVisible(ghost)}`);
srcFunctions: []
srcInputs: []
srcOutputs: []