Preview pages and use the browser

Desktop can show what Haarness builds without leaving the window: an HTML page, a chart or a report opens as a live preview, and a browser next to the chat lets you and the agent try a website or your dev server.

You need: Desktop with a project open. Previews and the browser show in Desktop; a chat in the terminal UI can use this browser only while the same chat is open in Desktop. To let agents work in your own Chrome instead, from Desktop or the terminal UI, see Use your Chrome.

Preview a page Haarness makes

Ask for something you can look at, inside your project:

Create an interactive sales dashboard in sales.html using embedded sample data and inline
JavaScript, then preview it.

When Haarness has written the file, the Files panel opens beside the chat with the page running. It refreshes each time Haarness previews the file again.

Preview runs the page; Code shows the source, which you can edit. Preview runs your unsaved edits too.
HTML, SVG, Markdown and images can be previewed.
Each preview in the chat is a card that keeps the exact version from that moment. Expand it, or click Open preview to put that version in the panel.

Go back to an earlier version

Earlier preview cards offer Compare, to see what changed since, and Restore, to put that version back in the file. Restore saves the current file first, so Undo restore brings it back. A version open in the panel offers Show current and Restore this version.

If the file changed since you opened the version, the restore fails rather than overwrite the newer change. Versions are kept with your Haarness data, not in your project or its Git history. Each version can be up to 5 MiB, and the newest 500 are kept.

What a preview page can do

A preview runs in a locked-down frame. It cannot reach your files, the app's storage, other websites or forms that submit somewhere, and it cannot open pop-ups. Inline JavaScript and CSS work, and libraries load from the public unpkg.com CDN; links to jsDelivr, cdnjs and D3 are loaded from there instead. Embed images and data in the page, and use system fonts.

Browse next to the chat

Open the side panel and choose Browser, or press ⌘⇧B (Ctrl+Shift+B on Windows and Linux). Use + for another tab, type an address, and use Back, Forward and Reload as in any browser.

Each chat has its own tabs, cookies and logins. Logins are temporary: they reset when Desktop restarts. This browser never uses your Chrome profile; for a task that needs your own sign-ins, use your Chrome.
You can browse from a new chat before sending anything. When you send the first message, those tabs move into the chat, so the agent can use them right away.
Pages load through the computer that runs your Haarness server, so localhost is that computer, which makes it handy for a dev server. Links to localhost in a chat open in this browser by default; other web links open in your system browser. Change both in Settings → Browser.
The camera, microphone and screen sharing are blocked for every page.

Ask Haarness to use it: "open localhost:3000, fill in the sign-up form and tell me what fails", or "take a screenshot of the pricing page". The agent uses the same tabs you see. When it opens a page while the side panel is closed, the panel opens on the Browser, unless you put the Browser away in this chat; then Show side panel gets a dot instead.

Show the agent part of a page

To point at exactly what you mean, such as a broken button:

Click Pick an element (the crosshair beside the address bar), or press ⌘⇧C (Ctrl+Shift+C elsewhere).
Hover over the page: the element under the pointer is outlined. Click it.
It becomes a chip in the message box, with the keyboard there, so you can type your note and send.

Shift-click picks several elements, and Esc stops. While you pick, your clicks and keys never reach the page, so nothing on it runs. The chip carries the element's address, text and a short piece of its HTML, not a screenshot; ask the agent for one if you need it.

Control what the agent may do in the browser

Browser actions go through the same permissions as everything else. Out of the box the agent may use any website in this browser without asking, in Review too. To be asked first, set the site, or the Default row for every site, to Requires approval under Agent site permissions below.

Settings → Browser has more control. Choose This project or Global default first:

Agent browser control turns the agent's browser tools on or off. You can still browse yourself.
Agent site permissions sets, for a site such as https://example.com or http://localhost:5173, whether the agent may browse it, download from it and upload to it: Always allow, Requires approval or Block.
Remember site approvals, off by default, lets an "always" answer cover a site, so you are not asked again for it.

The rest of the page applies to this computer: where links open, Browsing history, Download history, Ask where to save downloads, and Clear browsing data, which closes this project's tabs and clears its cookies, site storage, cache, history and downloads.

The Chrome group on the same page sets up and controls your own Chrome. Its settings apply to every project on this computer, whichever scope you chose, and it asks about every site by default. A site you Block under Agent site permissions is blocked in Chrome too. When a chat also has tabs in Chrome, the Browser panel says so. See Use your Chrome.

The browser is not offered for a project on one of your other computers.

Settings: everything else you can change in Desktop
Use your Chrome: let agents work in your own Chrome, signed in as you
Permissions: what Haarness may do without asking