A typical learning session flows top to bottom: choose the workflow contract, open the site files the agent will edit, seed inputs, run and inspect the browser, collaborate in chat when matching fails, then use traces and logs to tighten stage code until playback is deterministic.
01 · Select workflow
Start from the workflow picker in the top bar. Each registered project exposes its workflow modules; selecting
one starts (or resumes) a runner session scoped to that contract — stages directory, schemas, mission, and
libraries included in projectLocations.
Use Site and Dataset selectors beside the workflow name to aim learning at a
particular hostname folder and a saved input fixture (inputs.yaml under the site).
02 · File tree
The left sidebar lists Project Files — workflows, sites/<hostname>/ stage
modules, playbooks, schemas, and shared libraries. Click a file to open it in the editor. Stage files show a
status dot (idle, matched, executed, failed) and a trace shortcut when a Playwright trace exists for that stage.
During learning the agent creates and updates files here; you can review diffs, rename stages, or open
playbook.md to see site knowledge the agent maintains.
03 · Inputs & outputs
Below the file tree, Inputs and Outputs mirror ctx.inputs and
ctx.outputs for the active session. Click a key to open a structured JSON view in the main panel.
Seed inputs before learning so the agent and playback share the same search URL, dates, or credentials shape.
As stages run, outputs populate incrementally — use them to confirm normalization (rates, policies, IDs) without reading raw network traffic.
04 · File editor
The centre panel is a full code editor for stages, workflows, and project files. Syntax highlighting, auto-save,
and read-only guards on schema folders keep contracts safe. Open a *.stage.ts file to edit
match() and run() directly, or follow links from chat when the agent proposes a fix.
When execution pauses on a breakpoint, the editor highlights the current line and shows whether the session is paused for debugging or running freely.
05 · Screencast
The bottom strip shows a live Screencast of the browser the runner controls — frame-accurate previews tied to session timing, so you can follow navigation and extraction while stepping through stages.
In interact mode you can click and type on the page; the runner forwards events so you can reproduce edge cases before asking the agent to codify them in a stage.
06 · Chat with agent
Threads on the right hold conversations with the learning agent. Start a new thread to describe
the mission, ask for a new stage, or recover when NoStagesMatchError / ambiguous match appears.
The sidebar surfaces a Fix in chat action that attaches the failing stage, error, and trace
summary to the prompt.
The agent uses project file tools, match_stages, execute_stage, and
evaluate — you steer; it edits files under your workflow directories.
07 · Runtime controls
With a live session, the top bar exposes playback controls:
- Play — run matched stages in sequence until success, failure, or pause.
- Match — evaluate
match()on the current page and open the first matching stage. - Stop — halt an in-flight run.
- Reset — clear playback state and outputs while keeping the browser session.
From a stage file you can run a single stage (with optional debug). Keyboard shortcuts mirror a small debugger: continue, step, and run-stage on the paused line.
08 · Debugging
Set breakpoints in stage sources to pause before or after actions. While paused, inspect locals, step over async calls, and resume or abort. The status bar shows whether the workflow debugger is active or the runner is free-running.
Playback errors appear at the top of the sidebar with the stage name, message, and quick path into chat or the trace artifact for that run.
09 · Traces
Failed or instrumented runs record Playwright traces (zip) under the site folder. Open a trace from the file tree, the trace inspector on the right, or an inline timeline in the editor. The summary lists actions, selectors, timings, and the stage line that issued each step — the same timeline the learning agent reads when fixing a stage.
Link out to the full Playwright trace viewer when you need network waterfalls or DOM snapshots at a specific moment.
10 · Logging
The Logs tab streams structured runner output — stage transitions, agent and tool calls, LLM usage, and errors. Filter by severity, expand objects, and jump to the log line that correlates with a failed match or tool timeout.
11 · Other tools
Additional right-rail tabs help you validate and inspect automation state:
| Tab | Purpose |
|---|---|
| WebVision | Live DOM / vision overlay on the current page when selectors are ambiguous. |
| State | Raw workflow and session state instances synced from the runner. |
| QA | Quality runs and regressions across datasets for the active workflow. |
| LLM | Token usage and model calls for the current session. |
| REPL | Evaluate Playwright expressions against the open page (bottom panel). |
Together with screencast, traces, and chat, these panels complete the loop: observe the site, encode it in stages, verify with playback, and ship when outputs match your schemas.
