[Browser Agent] Visible Automation Overlay — Pulsating Blue Border

[gsquared94]

Summary

When the browser agent is actively controlling a Chrome instance, there is no visual indication to the user that automation is in progress. A faint blue pulsating border overlay around the browser viewport would provide clear, non-intrusive feedback that the browser is under AI control.

Problem

The browser agent launches Chrome and performs actions via CDP (click, fill, navigate, etc.) through chrome-devtools-mcp. In non-headless mode, the user sees a Chrome window that looks identical to a regular browser — there's no visual cue that:

1. An AI agent is controlling the browser
2. Actions are being performed programmatically
3. The user should avoid interfering with the automation

This is confusing and can lead to users accidentally disrupting automation tasks.

Proposed Solution

Inject a CSS overlay via CDP's Page.addStyleOverride or Runtime.evaluate

The overlay should be:

• A faint blue pulsating border (2-4px) around the entire viewport
• Non-interactive (pointer-events: none) — does not block user clicks
• Visible but subtle — uses a soft blue glow animation
• Injected at browser agent startup and removed on cleanup

Implementation Approach

Since chrome-devtools-mcp is the MCP server and we interact with it over stdio, there are two approaches:

Option A: Direct CDP injection via evaluate_script tool (Recommended)

• After MCP connection in browserAgentFactory.ts, call evaluate_script to inject a small CSS overlay
• The overlay uses a <style> tag with a fixed-position pseudo-element and @keyframes animation
• On cleanup, call evaluate_script to remove the overlay

// Injected via evaluate_script after connection
(() => {
  const overlay = document.createElement('div');
  overlay.id = '__gemini_automation_overlay';
  overlay.style.cssText = `
    position: fixed; inset: 0; z-index: 2147483647;
    pointer-events: none;
    border: 3px solid rgba(66, 133, 244, 0.4);
    animation: __gemini_pulse 2s ease-in-out infinite;
  `;
  const style = document.createElement('style');
  style.textContent = `
    @keyframes __gemini_pulse {
      0%, 100% { border-color: rgba(66, 133, 244, 0.2); box-shadow: inset 0 0 8px rgba(66, 133, 244, 0.1); }
      50% { border-color: rgba(66, 133, 244, 0.6); box-shadow: inset 0 0 16px rgba(66, 133, 244, 0.2); }
    }
  `;
  overlay.appendChild(style);
  document.body.appendChild(overlay);
})();

Option B: Request chrome-devtools-mcp to add a built-in automation indicator

• File a feature request upstream to chrome-devtools-mcp for an --automation-overlay or --show-automation-indicator flag
• This would be more maintainable but depends on upstream adoption

Key Considerations

1. Page navigation: The overlay is injected per-page. It must be re-injected after navigation via a navigate_page or new_page call. This can be handled by wrapping the navigate_page and new_page tools to re-inject after navigation.

2. Headless mode: Skip overlay injection entirely when headless: true is configured (BrowserAgentCustomConfig.headless).

3. Accessibility tree interference: The overlay div should have aria-hidden="true" and role="presentation" to avoid polluting the accessibility tree snapshot that the agent relies on for element identification.

4. Z-index conflicts: Use z-index: 2147483647 (max 32-bit int) to ensure it sits above all page content.

5. Performance: Pure CSS animations have negligible impact.

Affected Files

File	Change
browserAgentFactory.ts	Inject overlay after MCP connection
mcpToolWrapper.ts	Re-inject overlay after navigation tools
browserManager.ts	Remove overlay on cleanup
New: automationOverlay.ts	Overlay injection/removal utility functions

Labels

browser-agent, ux, enhancement