Run & Preview

The loop of fix → run → check results finishes inside Blyck. Errors come back as editor markers, the web screen embeds right into a panel, and the AI sees and verifies the screen directly.

Run & Observe — run and observe

When you press the ▶ Run button, the output doesn’t just scroll by. The Problem Matcher parses errors from the live output and structures them by file · line · severity, placing editor markers (red underlines) at those locations. You no longer have to chase error messages with your eyes to find the file.

Automatic run-command detection

It looks at marker files in the project root and auto-suggests a default run command.

Detected file	Suggested command
package.json	npm start (also recognizes build · test scripts)
go.mod	go run .
Cargo.toml	cargo run
*.csproj / .sln	dotnet run
pyproject.toml / setup.py	pytest
Makefile	make
Single .py / .js file	python <file> / node <file>

The command is freely editable and saved per project. The output panel streams the command ($) · standard output (white) · standard error (red) in real time, showing up to 5,000 lines. While running, the button changes to ■ Stop and clicking it stops the process immediately.

Per-language error parsing (Problem Matcher)

Language / tool	Parse target
Python	Traceback (File "...", line N)
Go / Rust	Compile errors (filename:line:col)
C / C++ (gcc · clang)	Warnings · errors
C# (MSBuild · dotnet)	Build errors
Node.js	Stack traces
Custom	Add your own matcher with a regex

Parsed errors are highlighted in the output panel as filename:line, and clicking moves the editor to that line.

Using it with AI

AI Chat uses the same path. The AI runs tests with the run_observe tool and fixes the code itself based on the parsed error locations. It works in Act (⚡ Act + Review) · Auto (🚀 Auto) modes, and for server-type processes it collects results after a 30-second timeout.

Locally saved files only

The ▶ Run button appears only for files saved locally. It does not appear for remote (SFTP) files or unsaved Untitled files.

---

Live Preview — a browser inside the app

After running a dev server, embed the web screen right into a panel. Without opening a separate browser and switching windows, keep code · terminal · screen in a single view.

Opening the preview

1. First run the dev server in a terminal (npm run dev, python -m http.server, etc.).
2. New tab menu (+) → select 🌐 Web preview….
3. Enter the server address in the URL field (e.g. http://localhost:3000).

Dev server required

Opening the preview while the dev server isn’t running will fail to load. Always run the server first, then enter the URL.

Header controls

Button	Action
Refresh	Reload the current URL
Zoom 25%~500%	Adjust scale. Click the percentage number to instantly return to 100%
URL bar	Navigate directly to another path

Console logs and fetch/XHR network responses are each auto-collected up to the most recent 200. The AI uses this data when diagnosing.

---

AI Live Preview tools

In AI Chat you can drive the preview panel directly. The tools below are enabled in AI Chat’s Act (⚡) or Auto (🚀) modes.

Tool	Action
panel_screenshot	Capture the current screen → the AI checks it as an image (auto-detects the panel kind, whatever it is)
preview_navigate	Navigate to a given URL
preview_click	Click at coordinates or a selector
preview_type	Type text
preview_eval	Run JavaScript inside the page and return the result
preview_wait	Wait for a selector or N seconds (to wait for page load)
preview_console_logs	View console errors/warnings
preview_network	View the list of network requests

If you omit paneId, it applies to the currently active preview panel.

Example prompt:

Enter a test account (test@example.com / 1234) in the login form and submit.
If there are console errors, find the cause and fix it.

The AI runs automatically in the order preview_type → preview_click → preview_wait → panel_screenshot → preview_console_logs.

Page load timing

If preview_eval fails immediately, the page is still loading. Run preview_wait first to wait for the load to complete, then retry.

---

AI visual regression verification

Instead of saying “fixed,” it proves it on screen. It compares the screens before and after a code change pixel by pixel to automatically detect unintended visual changes.

Visual regression flow

1. Save baseline — Run preview_baseline_set in the desired state before the change
2. Edit code — Via AI or directly
3. Compare — Run preview_baseline_diff → returns the change rate (%) and an image with the changed regions composited as red boxes

The AI reads the screenshots with vision and cross-checks the console logs, so it automatically catches whether only the intended change occurred and whether anything else broke (visual regression).

Tool	Action
preview_baseline_set	Save the current screen as the baseline
preview_baseline_diff	Pixel-compare the current screen with the baseline, return the change rate + diff image

Desktop apps supported too

Non-web desktop apps use the same flow via desktop mirror. New tab menu → 🖥️ Desktop capture… → select an app window for live streaming (view-only). The AI captures the window with the panel_screenshot tool, and even if the app restarts it finds and reconnects by window title.

---

Limitations

• Live Preview’s automatic actions (click · type) work only inside the embedded preview panel. External browser windows can’t be controlled.
• Visual regression comparison is based on the window size at the time the baseline was saved. If the panel size changes, save the baseline again.
• The ▶ Run button appears only for locally saved files. It’s disabled for remote SFTP files.
• The run_observe tool (AI autonomous execution) works only in ⚡ Act + Review · 🚀 Auto modes. It’s unavailable in 💬 Chat · 📋 Plan modes.
• Server-type processes (npm run dev, etc.) have the run_observe timeout limited to 30 seconds.

---

FAQ

Q. The ▶ Run button isn’t visible. → It’s a remote (SFTP) file or a file not yet saved. Save it locally and reopen, and it appears.

Q. The preview won’t load. → Check that the dev server is running. It won’t work without a server. Run the server first in a terminal with npm run dev or similar. See the Troubleshooting page for details.

Q. How do I use the AI preview tools? → In AI Chat, switch to ⚡ Act + Review (Ctrl+3) or 🚀 Auto (Ctrl+4) mode, then make your request with the preview panel open.

Q. preview_eval fails immediately. → The page is still loading. Wait for the load to complete with preview_wait, then retry.

Q. Error markers aren’t placed in the editor. → Check that it’s a language the Problem Matcher supports. You can register custom error formats by adding a regex matcher.

Q. Visual regression comparison comes out wrong. → The panel size may have changed since saving the baseline. Save the baseline again with preview_baseline_set, then compare.

Q. How do I make the AI run tests automatically? → In 🚀 Auto mode, ask something like “run the tests and fix the errors” and the AI autonomously repeats the run → parse errors → fix code loop with run_observe. See the AI Chat page for related content.