Skip to main content

Floating Indicator

A draggable on-page widget injected by the proxy. It shows connection status, hosts a text input for the developer to message the AI agent, and is the launch point for screenshot capture, element selection, and the sketch / design / responsive modes.

The indicator is visible by default and remembers its position across reloads.

API​

window.__devtool.indicator.show()        // show the indicator
window.__devtool.indicator.hide()        // hide it
window.__devtool.indicator.toggle()      // toggle visibility
window.__devtool.indicator.togglePanel() // open/close the message panel
window.__devtool.indicator.destroy()     // remove it from the page entirely

Messaging the Agent​

The indicator's panel holds a text input. When the developer types a message and sends it, the proxy logs a panel_message event that the agent receives — through the channel sink (channel mode), the PTY stdin injection (agnt run), or the proxy log (pull).

proxylog {proxy_id: "dev", types: ["panel_message"]}
{
  type: "panel_message",
  message: "the submit button does nothing on mobile",
  page: "http://localhost:3000/checkout",
  timestamp: 1699999999999
}

This is the human → agent back-channel that pairs with channel_reply (agent → human).

Quick Actions​

From the indicator the developer can:

  • Capture a screenshot of the page (or a selected element)
  • Select an element to attach to a message (feeds getLastClickContext)
  • Open sketch mode — see Sketch Mode
  • Open design mode — see Design Mode
  • Open responsive mode — see Responsive Mode

Connection Status​

The indicator reflects the proxy WebSocket connection state, so the developer can see at a glance whether diagnostics are live. Programmatically:

window.__devtool.isConnected()  // true when the metrics socket is up

See Also​