Browser previews

When a change is ready to try, bring the app into the conversation. A web pane is a real browser inside the desktop app. Use it to try an app, review a generated page or mockup, or work on a site with an agent while its explanation stays in view. You can open a local HTML file with no development server, or connect the pane to the server your project already uses.

Web panes need the hob desktop app. The browser IDE and hob mobile show a notice in their place. To have an agent click, type, and check a page while you watch, see Agents on web pages.

Open a page beside your conversation

Choose Browser from a new-pane launcher, then enter a URL in the address field. Use your app's actual address, such as the localhost URL printed by its development server.

For an HTML file, open it from Files, then choose Pane actions → Open rendered in web pane in its source pane. This works well for the example guestbook: hob serves index.html for you, so it needs no install or server command.

Back and Forward move through the pane's history; hold either button to choose an entry. The pane has one history: the toolbar, your mouse's back and forward buttons, the page's own navigation, and an agent's steps all move through it. Refresh becomes Stop while a page is loading. Expand pane gives the page more room without losing its place in the workspace. Bookmark the pane to return to it later.

When a page tries to open a new window, hob asks before it opens a new web pane. Web panes do not download files.

Sign-ins and zoom

Sign-ins and other site data persist after you close the pane or restart hob. By default, each project keeps its own site data, and every web pane in the project shares it. To use one sign-in in every project, choose Use Global Data in the pane's menu, or add the site under Settings → Web → Websites that share data across projects. After a crash, you may need to sign in to a site again.

Each pane has its own zoom, separate from hob's interface zoom. Use the Zoom row in the pane's menu, the usual browser zoom keys, or pinch. When the zoom is not 100%, the address bar shows the level; select it to change or reset it.

Local HTML files and saved data

hob serves an HTML file that is inside your project. The page gets its own address for that project and folder, so the data it saves (for example with localStorage, IndexedDB, or cookies) stays after you reload the page or restart hob. Each folder and each project keeps its own data.

The pane's Preview server menu has the same controls as a development server: Start server, Stop server, Restart server, Show server output, and Copy server command. To remove the page's saved data, choose Clear saved data. Saved data stays on the computer that shows the page. If you open the project from another computer, that computer keeps its own data, and Clear saved data clears only the computer you use.

A served page can read every file in its folder except hidden files (such as .env and .git) and private keys. To serve a site that spans a folder, ask an agent to run hob serve start <folder>, and serve the smallest folder that holds the site. Service workers do not run on served pages. The page does not send its address as a referrer; some requests to other sites, such as fonts or modules from a CDN, still show its local address as their origin.

An HTML file outside your project, such as a download, opens as a sandboxed page. It has no saved data, and it asks before it reads other files in its folder. HTML from an automation run opens the same way.

Keep file previews up to date

A local HTML preview watches its HTML file automatically. When the agent changes a stylesheet or script too, add those files to the watch list:

1. Open the web pane's Pane actions menu.
2. Choose Preview server → Configure preview server…. For a sandboxed page, choose Static artifact → Configure static artifact….
3. Under Reload when these files change, enter one pattern per line, relative to the served folder, then choose Save.

For the guestbook, use:

style.css
app.js

The dialog shows whether live reload is running. Patterns support **, braces, and character ranges; prefix a pattern with ! to exclude matches. Keep patterns inside the page's folder, with no more than 64 patterns. If a sandboxed page tries to read other files in its folder, the dialog asks you first; choose Allow only for a page you trust.

This is useful beyond apps: an agent can generate an HTML report or mockup, open it once, then refine it while you watch the result.

Save a development-server recipe

For a project that needs a server, hob can keep its start command with the preview. First open the server's intended localhost URL, then choose Pane actions → Preview server → Configure preview server….

Enter the project's real start command and working directory. For example, a project with a dev script in package.json might use npm run dev from its root. The guestbook has no such script and does not need this setup.

Choose Save, then Start server when you want hob to run the command. If the address already responds, hob uses that server instead of starting another process on the same port. Leave the command empty when you always manage the server elsewhere, such as in a terminal pane.

For a server started by the pane, open Show server output to read its output. The same menu offers Stop server, Restart server, and Copy server command. If startup fails, inspect the output and check the command, directory, dependencies, and expected URL.

Saving the recipe preserves how to start the server; it does not preserve a running process across a hob restart. A restored workspace can bring back the preview and its setup, ready for you to resume the work.

Mark an element for your agent

Choose Mark up (the pencil) in the web pane header, then pick elements and describe the changes you want. Send the notes to an agent as a composer attachment. Web batches include element context without image crops. “Tighten this spacing” has more meaning when it names the element you selected. You can also select text on the page and send it to an agent.

Agents can point in the other direction too. They can read the live page, open a preview, and offer attention links to the detail you should review. See Working with your agent for the character-counter example and the difference between attention, annotations, and walkthroughs.

Choose where links open

The compass control marks a browseable pane: the web pane hob uses as the workspace's target for in-app web navigation. Each workspace has one such target at a time. This is useful when you want incoming links to use a particular pane while another preview stays beside your work.

Mobile view, under Appearance in the pane menu, shows the page in a narrow mobile viewport. Use it for a quick layout check; it is separate from hob mobile, which lets you work away from your desk.

Control what agents can do on a site

Agents can read and operate web panes. You decide where. Site access in the pane menu sets a level for the current site, separately for agents and for automations and scripts: Full access, Read only, or No access. Pane access limits every caller in one pane. Manage all sites in Settings → Web → Site rules. See Agents on web pages for how these rules apply.

hob pane open web --file index.html --watch 'style.css,app.js'

hob pane open web --url http://localhost:5173 --command 'npm run dev' --cwd . --start

Next