Browser panel — live specimen

The real BrowserChrome primitive in Full mode: a clickable tab strip, the pill address bar, and a live same-origin viewport. Click a tab to navigate between two showcase pages inside the panel. The anatomy section below documents the static chrome structure generated from the component YAML.

Interactive browser panel — click the tabs

Element Panels

chromeless-panel

#existingsource

The interactive opened-browser surface for a `chromeless` element. Unlike the miniature (a presentational tile), the panel is a stateful portal component: it owns the BrowserManager session, the SSE frame stream, the WebSocket/CDP target lifecycle, transport selection, and disposal-safe teardown. It renders a functional superset of the shared `<BrowserChrome>`: a multi-tab bar with per-tab context menus, agent-owner badges, close affordances and a new-tab button; an editable omnibox with back/forward/reload nav buttons and a bookmark star; a drag-reorderable favourites grid; and a live screencast viewport. A per-element `view-transition-name` (`browser-tile-{id}`) morphs the overview tile into this panel on open.

Readiness
complete
Preview
live
Props
2
Examples
2
Code
implementation mapped

When to use

  • The user opens a chromeless element to drive a real browser session
  • Single-pane focus on one browser with full interaction (typing URLs, clicking, tab management)
  • Any flow that needs the live screencast + CDP input forwarding, not just a preview

When not to use

  • A non-interactive preview in a grid / palette — use the chromeless miniature
  • Showing chromeless element metadata (owner, activity) — use the element card representation
  • A static showcase specimen — this panel is stateful and has no static render

Accessibility

Role: region

  • Tab — Moves focus across tabs, omnibox, nav buttons, bookmark star, and favourites
  • Enter — Omnibox: navigate to the typed address / search. Tab/nav buttons: activate.
  • F5 — Reload the active tab (when focus is in the panel)
  • Escape — Closes a per-tab context menu when open

Screen reader: The tab bar is a tablist; each tab exposes its title, an agent-owner badge label when the tab is owned by an agent, and a close control. The omnibox is a labelled text input announcing the active URL. The favourites grid items are buttons labelled by site name. The screencast viewport is a labelled live region; CDP input forwarding means keyboard/pointer events inside the viewport are relayed to the remote page.

Notes: The panel currently keeps its bespoke chrome (a functional superset of `<BrowserChrome>`); the accessibility contract above describes that superset, not the minimal shared primitive.

Props

NameTypeDefaultDescription
element_idstring—Chromeless element UUID — keys the BrowserManager session and the view-transition-name.
element_namestring—Display name shown in the panel header / used for the morph source.

Examples

Chromeless panel chrome anatomy

Panel chrome anatomy: tabs, address row, and active browser context.

YAML
type: browser-chrome
props:
  mode: full
  address: https://triform.dev/components
  tabs:
  - id: tab-1
    title: Components
    active: true
  - id: tab-2
    title: Docs
    active: false
Browser panel — two-tab structure

Two-tab navigation structure (Components / Miniatures) — the tab model the live BrowserPanelSpecimen drives. The address bar is a pill-shaped readonly input in Full mode.

YAML
type: browser-chrome
props:
  mode: full
  address: https://triform.dev/components/element-panels
  tabs:
  - id: tab-0
    title: Components
    active: true
    loading: false
  - id: tab-1
    title: Miniatures
    active: false
    loading: false
Edit YAML