Skip to content
Kangentic

Embedded Browser

The embedded browser pane lets you point an isolated Chromium webview at any URL inside the task detail dialog, then capture the rendered frame plus annotations and submit it to the active agent as a multi-modal prompt. Useful for visual regression work, “make this match the design” loops, and DOM-level bug hunting where a screenshot beats a paragraph of description.

Opening the Browser Pane

Section titled “Opening the Browser Pane”
  1. Open a task with an active agent session.
  2. Click the Browser pill in the task detail dialog header (mutually exclusive with Changes).
  3. The first time you open it in a project, an empty-state prompt asks for a URL. Pick a quick-pick (localhost:3000, 5173, 4321, 8080) or type one. Submitting auto-saves it as the project default.

The URL bar supports back, forward, reload, pin to project default, and pin to task override. Per-task URLs persist in .kangentic/browser-urls.json. The project default lives in AppConfig.browser.defaultUrl. Resolution rule: task override > project default > empty state.

Modes

Section titled “Modes”

Draw

Section titled “Draw”

Press Ctrl+D (Cmd+D on macOS) to enable Draw mode. Free-draw strokes appear on a transparent overlay above the webview. Pointer events route to the canvas while drawing so the page below doesn’t intercept them.

Inspect

Section titled “Inspect”

Press Ctrl+I (Cmd+I) to enter Inspect mode - a red highlight tracks the element under your cursor. Click an element to capture a structured fingerprint: selector, ARIA role, ARIA name, data-testid, classes, ancestor chain, computed styles, and outerHTML. The picked element then keeps a persistent blue overlay that follows scroll and resize until you re-enter Inspect or press Escape.

Zoom

Section titled “Zoom”

The browser pane has Chrome-style zoom controls. Three ways to use them:

  • Toolbar pill - the URL bar has a - / % / + group next to the Pin button. Click - or + to step zoom; the middle pill shows the current percentage.
  • Keyboard - Ctrl+= / Ctrl++ to zoom in, Ctrl+- to zoom out, Ctrl+0 to reset to 100%. Shortcuts are gated on the browser pane being hovered or focused, so they don’t fight other dialogs.
  • Ctrl+Wheel - scroll the wheel with Ctrl held inside the webview. Handled in the main process via webContents zoom-changed, with a broadcast back to the toolbar so the percentage pill stays in sync.

Zoom snaps to a fixed ladder from 25% to 500% (matching Chrome’s rungs). The ladder is shared between main and renderer in src/shared/zoom-steps.ts.

Sending to the Agent

Section titled “Sending to the Agent”

Press Ctrl+Enter (Cmd+Enter) to submit. Kangentic:

  1. Composites the webview frame and your strokes into a single PNG written to <projectRoot>/.kangentic/sessions/<sessionId>/captures/capture-<timestamp>.png.
  2. Builds an XML-tagged prompt: a top-level Screenshot: @<path> for bare-token @-parsers (Claude Code, Gemini CLI), then a <browser_context> envelope with <url>, optional <picked_element>, and any selected text.
  3. Submits via the paste engine to the active agent’s PTY.

Captures live under the session directory, so they’re cleaned up automatically when the task moves to Backlog, Done, or is deleted.

Settings

Section titled “Settings”

Open Settings > Browser:

SettingDefaultDescription
Browser EnabledOnWhen off, the Browser pill is hidden in the task detail dialog header
Default URLemptyProject-overridable fallback URL when a task has no per-task override
Clear Browser Data(action)Destructive button. Clears cookies, localStorage, IndexedDB, cache, and service workers from the shared browser partition. Per-task and project URL overrides are intentionally left alone - those are workflow state, not browsing identity

Security

Section titled “Security”

The webview runs in its own renderer process with nodeIntegration: false, contextIsolation: true, sandbox: true, and webSecurity: true. Non-http(s): URLs are rewritten to about:blank. Pop-ups and target="_blank" are denied. The host renderer can only reach the webview through the inspector’s executeJavaScript and the navigation/capture APIs.

Cross-Platform Notes

Section titled “Cross-Platform Notes”
PlatformBehavior
WindowsWSL-localhost is not reachable from the Windows host. The empty state surfaces a hint with the wsl hostname -I workaround
macOSNativeImage capture includes the alpha channel; composited correctly into the PNG
AllSelf-signed HTTPS dev servers show the standard Chromium interstitial - accept it once or use plain HTTP

See Also

Section titled “See Also”