Using the workspace

Browser and live preview

The Browser panel beside the chat shows your app and any website in tabs shared with Dus. Watch Dus, take over, annotate, and replay tests with Show me.

The Browser panel sits on the right of the chat. Its first tab, Your app, is the session's own app: each session can run your project's dev server on a port of its own, and it reloads as Dus edits. Its other tabs are websites, opened by you or by Dus, and shared between you. When Dus works in a tab, you watch it happen there.

Open the Preview

1. Click the session title in the top bar.
2. Choose Start preview.

The Browser panel opens on Your app and the dev server starts. Once it runs, the top bar shows its address, such as localhost:5110. To show or hide the panel any time, click the Browser button (the globe) in the top bar's tools, or press Alt+P; on a phone it's in the ⋯ menu. If the server isn't running, Start preview is in the panel too.

While the server starts, the tab shows Installing dependencies… (if node_modules is missing), then Starting preview…, with the last lines of its log. Then your app appears.

Like the editor, the Browser is a wide tab; drag its edge to resize it. On a phone it opens full screen, with Back to the chat. ← Back, Esc or Alt+P again return to the tab you came from. The app keeps its page and state while you look at other tabs.

To stop the dev server, use Stop preview in the session menu. Finishing a session, or stopping Duscode, stops its preview too.

Using the Preview

• Address bar. The app's localhost:<port> is fixed, and you type the path after it, such as /login. Press Enter to go. Only pages of this app open here.
• Back, forward and reload. Back and forward move through the addresses you opened from the address bar. Links you click inside the app aren't tracked yet.
• Desktop, Tablet (768 px) and Phone (390 px). Your choice is remembered.
• Open in browser opens the same page in a normal browser tab.

Apps that refuse to be shown in a frame

Some apps send headers (X-Frame-Options or a CSP frame-ancestors rule) that forbid showing them inside another page. Duscode checks for this. If the app refuses, the tab says why and offers Open in browser. If a page hasn't loaded after 15 seconds, the tab says so and offers the same choice.

Safety

The Preview shows only this session's own local app, never another site or Duscode's own port. The app runs in a sandboxed frame on a different origin from Duscode, so it can't navigate Duscode's tab, read the workspace or call Duscode's API.

Websites in the Browser

The panel works like a browser:

• Tabs. + opens a new tab; × closes one. Tabs Dus opened show a small Dus mark while it uses them. A site that opens a new window gets a new tab.
• Address bar. Type an address (dovesure.com, localhost:3000/login) or words to search for, and press Enter.
• Back, forward and reload, a loading bar, and each tab's title and icon.
• Fill, Tablet (768 px) and Phone (390 px) widths. With Fill, the page takes the panel's size, sharp on high-resolution screens.
• Use the page yourself: click, drag, scroll, type (including accented and Asian input), copy with Ctrl/Cmd+C and paste. When a page asks for a file, you choose it; when it shows a dialog, you answer it in the panel.
• ⋯ → Open in system browser opens the page in your normal browser. ⋯ → Clear browsing data for this project signs you out of every site in this project.

Websites run in Duscode's own browser on your computer, not in your normal browser, and look the same in the web app, VS Code and the desktop app. Each project has its own profile: sign-ins and cookies are kept for the project and never shared with another. Downloads are saved in the session's folder under .duscode/downloads and are never opened or run. Tabs stay open between tasks, and close after 30 minutes with nobody using or watching them.

The panel never opens Duscode itself, file:// or chrome:// addresses, cloud metadata or private-network addresses. With Browser checks of internet pages off (Settings → Models & keys → Privacy), only pages on this computer open, and the panel links to the setting.

When a page doesn't open, the panel says why and what to do: an address that can't be found, a certificate problem, an error status, a blocked address, or the browser not installed yet (Install browser).

Take over

While Dus drives, the panel says Dus is driving. Take over pauses Dus at its next step and lets you use the page; Hand back to Dus lets it carry on. When Dus needs you (to sign in, enter a code or complete a check), the panel comes forward with Dus needs you, the tab shows !, and the session is marked as needing you. Nothing from the page reaches Dus while you drive.

Annotate (Design mode)

1. Click Annotate.
2. Mark what should change:
   • Select (S): click an element, or Shift-drag a rectangle over an area.
   • Circle (C): drag to draw a circle around it.
   • Arrow (A): drag from anywhere to what you mean.
3. Write what should change, such as Make this button bigger, and choose Add to message.

The annotation goes into the message box as an attachment: a cropped screenshot with your circle or arrow drawn on it, the page address, and the element's selector, role and text. On your own app, Duscode also adds the source file and line when the dev server provides them (React, Vue, Svelte, or data-inspector attributes), so Dus changes exactly that place. Add as many as you like, then send. Esc leaves Design mode.

Watch Dus test your app

Dus has a browser tool. It opens your app in a real headless browser, clicks, types, scrolls, waits and checks that text is there, the way a person would. While it works, the Preview tab shows Dus is testing:

• a live picture of the page Dus is using
• a pointer that moves to each target, with the target outlined and a ripple on each click
• a caption for each step, for example Clicking 'Sign in'. It turns green when a check passes and red when it fails.

Each step is shown just before it happens, so you can follow along. On a wide screen, the Preview tab comes forward when Dus starts testing, unless you're in the editor. It never covers the chat on a phone. The tab shows a ● while Dus is testing. When the test ends, your own interactive Preview comes back, reloaded.

The pointer and captions are drawn by Duscode on top of the picture. Nothing is added to your app's page.

Things to know about Dus's browser:

• It opens the session's preview by default, a path such as /login, or any website, within what Dus may do on websites.
• Its tabs stay open between tasks, so a sign-in survives.
• Each step reports any new console or page errors to Dus.
• Only Dus itself uses it, not helper or worker agents. Duscode's own workspace refuses its requests, so Dus can't click its own approvals.
• It needs Chromium's headless shell. See Installing the browser.

Show me how Dus tested it

Every step Dus takes in its browser during a task is recorded as a walkthrough: what it opened, clicked, typed and checked, with the reason Dus gave for each step. You can watch it again at any time. No model is involved, so a replay costs nothing.

• Show me on a task's summary card ("What Dus did / How it was checked") replays that task's walkthrough.
• The Preview tab shows Show me how Dus tested it with the newest walkthrough. All lists the older ones.

A replay runs against the session's preview, and starts it if it isn't running. It looks like watching Dus test: a pointer moves to each target, the target is outlined, clicks ripple, and each caption turns green when the step works as it did when Dus recorded it.

Controls

With reduced motion on (in your system settings or in Settings → General), the pointer jumps to each target instead of gliding.

When a step no longer matches

If your app has changed since Dus recorded the walkthrough, the replay stops at that step and says why, for example This step no longer matches: the 'Sign in' button wasn't found. Ask Dus to update the test sends Dus the task, the step and the reason. Dus fixes the app if it broke, or walks through the flow again to record a new walkthrough. Take over here lets you look at the page yourself.

A target must match exactly one visible element. Duscode looks for it for up to 15 seconds, and never clicks a disabled control.

Run again

Run again replays the walkthrough quickly in the background, without the pointer or pauses, and reports each step as passed, failed, skipped or not run. Dus can do the same with its browser_rerun tool when you ask it to "re-run the browser checks from" an earlier task.

Save it as a video

Save video, in the replay's controls, saves the walkthrough as a WebM video with the captions burned in, in the session's folder: .duscode/show-me/<title>-<task>.webm. Nothing is uploaded.

If the session has a pull request, Attach to pull request commits that one video file to the session's branch, pushes it, and adds a Show me link to the pull request's description. Duscode asks you to confirm first. Attaching again replaces the link instead of adding a second one.

Passwords in walkthroughs

A walkthrough never holds a password or token. When Dus types one from the vault, only its vault name is recorded. When it types one in plain text (into a password field, for example), Duscode saves it to the vault (Settings → Vault) as SHOW_ME_PASSWORD (or similar) and records only that name, so a replay can type it again.

Ask Dus to show you how something works

Ask "show me how the checkout works", or pick the Show me how it works skill from the + menu. Dus walks through the feature in its browser while you watch, changing no code, and the walkthrough becomes replayable like any other.

Ports

Previews use ports from 5100 upwards, ten apart: 5100, 5110, 5120 and so on. There are 20 slots. Duscode skips ports that are busy or that browsers block. If every slot is taken, finish a session first.

How the dev server is chosen

Duscode looks at your project in this order:

Dependencies are installed first with the package manager your lockfile names (pnpm, yarn, bun or npm). The dev server gets PORT, HOST=127.0.0.1 and BROWSER=none, so it listens locally and doesn't open its own browser window.

The dev server's output is in Terminal → Preview log. The Preview tab links to it when something goes wrong.

When the preview fails

The Preview tab shows the error, Start again, and Open the preview log.

Under WSL, keep projects in the Linux file system. File watching on /mnt/c is unreliable, so previews may not reload.