Skip to content
The Terminal

Browser Panel

import { Aside } from ‘@astrojs/starlight/components’;

The Browser panel is a full Chromium rendering engine embedded in your workspace. It’s not a simplified preview — it renders exactly what Chrome would render, because it is Chrome (via Electron’s webview).

Features

Section titled “Features”
  • Full Chromium rendering — JavaScript, CSS, Web APIs, everything
  • URL bar with navigation controls (back, forward, reload)
  • Multiple browser panels — open different URLs side by side
  • DevTools API — exposed to external tools like Gee-Code
  • Stable zoom during layout changes — browser zoom is kept consistent when panels resize or move

Why a Built-In Browser?

Section titled “Why a Built-In Browser?”

Two reasons:

  1. Proximity — Your app’s output is right next to the terminal running it. No window switching.
  2. DevTools API — This is the feature that makes The Terminal unique. The browser exposes a DevTools protocol that Gee-Code can connect to, giving your AI real-time access to console output, DOM structure, and the ability to interact with the page.

Using the Browser

Section titled “Using the Browser”

Point the URL bar at your dev server — typically localhost:3000, localhost:5173, or whatever port your framework uses. The browser renders your app just as Chrome would.

Standard navigation works:

  • Click the back/forward buttons or use keyboard shortcuts
  • Type a URL in the address bar
  • Click links within the page

DevTools API

Section titled “DevTools API”

The browser panel exposes its DevTools protocol on a local port. This is how Gee-Code connects to “see” your running application.

The connection details are written to ~/.the-terminal/devtools.json:

{
  "port": 9876,
  "url": "http://localhost:9876"
}

When Gee-Code starts inside The Terminal, it reads this file and connects automatically. You don’t need to configure anything.

What the AI Can See

Section titled “What the AI Can See”

Through the DevTools API, Gee-Code can:

CapabilityExample
Read consoleconsole.log, console.error, console.warn
Inspect DOMElement structure, attributes, computed styles
Execute JSRun code in the page context
Take screenshotsCapture what the page looks like
Click elementsInteract with buttons, links, form elements
Fill formsType into input fields
Read networkSee API requests and responses

This turns debugging from a conversation (“what does the console say?”) into direct observation (“I can see the error is…”).

Multiple Browser Panels

Section titled “Multiple Browser Panels”

You can have multiple browser panels showing different URLs:

┌──────────────────┬──────────────────┐
│  Browser:         │  Browser:         │
│  localhost:3000   │  localhost:3001   │
│  (frontend)      │  (admin panel)   │
└──────────────────┴──────────────────┘

Each panel is independent with its own navigation state and history.

Browser panels also preserve state across panel/layout swaps, so URLs and history are retained when you switch views or Spaces.

Next Steps

Section titled “Next Steps”