TAO CODING Download
All topics

Docs /

Web preview

The Website tab (globe icon) is a browser column docked beside the terminals, with a real address bar and working back/forward/reload.

  • Each terminal keeps its own page and the preview follows your focus; an agent in a background pane updates its own preview without stealing the one you're looking at.
  • Type into the address bar yourself — localhost:3000 opens as a page, free text becomes a Google search.
  • Sites that refuse to be embedded render anyway — GitHub, Google, most SaaS dashboards.
  • Popups and window.open navigate the preview in place (press Back to return); the pop-out button breaks the page out into a real OS window.
  • Zoom — the percentage button in the address bar (default 80%, so more of a page fits the side column; change the default in Settings → Web Preview). Each pane keeps its own level.
  • Responsive — the device button switches between Desktop (fills the column), the built-in iPad (820×1180) and iPhone (390×844), and any presets you added. A device gives the page its real viewport width and User-Agent, so sites that choose their mobile version by browser detection switch too. The page reloads when you switch device — like Chrome's device mode — and when the device doesn't fit the column it is shown smaller so you always see all of it. Portrait / Landscape in the same menu rotates the viewport without a reload.
  • Your own devices — Settings → Web Preview → Device presets → Add device: a name, width × height in CSS px (portrait) and a User-Agent (Android Chrome, iPhone or iPad Safari). The same page sets the default zoom, device and orientation a new preview starts with.
  • Dev servers — when a pane prints a local URL (Vite's localhost:5173, Next, Metro…), a link chip appears in the pane header; click it to open the preview. In Settings → Web Preview → When a dev server starts choose Open preview to open it automatically (only for a new address — a hot-reload banner never reopens a preview you closed), or Nothing to turn the chip off.

Point an agent at part of the page

Two address-bar buttons turn "that button looks wrong" into a precise request, using the same card tray as the Mobile tab (drag a card onto any pane, or Send all):

  • ✂ Capture a region — the page freezes as a snapshot; drag a box, type what should change, press Enter. The crop becomes a card with its own PNG in .taocoding/captures/. Esc goes back to the live page. Linux only for now; on Windows and macOS the button says so — use the element picker there.
  • 🎯 Pick an element — hover the page (each element is outlined with its tag and size), click the one you mean, and a request box opens right under it in the page — type, press Enter. The card is text only: the element's CSS selector, text, box, key styles, a short HTML excerpt and — in a dev build — the source file and component (Vue, Svelte and React 18 give file:line; React 19 gives the file and an approximate line). The click never reaches the page, so picking a link or a button does not trigger it. Esc cancels.

Network panel

The ⇅ button in the address bar shows or hides the Network panel, docked under the page (drag the line between them to resize; TAO CODING remembers both choices). It is a devtools-style request log for the focused pane's preview: every fetch and XHR the page makes — status, method, name, type, size, time — plus scripts, stylesheets and images. Failed requests (no response, or status 400+) are red; Failed narrows the list to them and shows their count, Fetch/XHR hides static files, and the filter box matches URL text or a method.

  • Click a row for its Headers, Payload (request body) and Response (JSON is pretty-printed).
  • Send to agent pastes a summary of that request — method, URL, status, both bodies — into the pane's agent, without pressing Enter: add your question ("why does this 500?") and submit.
  • cURL copies the request as a bash curl command to replay it in a terminal.
  • The bug icon opens the real DevTools for the preview page when you need the full inspector.
  • Credentials never leave the page: Authorization, Cookie, Set-Cookie, X-Api-Key and X-Auth-Token values show as «redacted» (and are left out of cURL). Bodies are text-only and cut at 16 KB.
  • The log restarts when the page navigates, keeps the latest 500 requests, and only lists a request once its answer arrives. The page records even while the panel is hidden, so opening it later still shows what already happened.

Agents get the same log over MCP: preview.network_log, preview.network_request (headers and bodies), preview.reload, and preview.wait_for_request — "reload the page and wait for POST /api/cart" — so an agent can check its own fix end to end.