Motivation
When a Claude task drives Firefox/Chromium through the seeded playwright/mcp server (seed_claude_config.py), a user watching the noVNC viewer sees the page change but gets no cue about what the agent just clicked or typed into. That makes agent browsing hard to follow, hard to trust on logged-in sites, and less compelling in demos/fleet clips.
https://github.com/kaascanvas/LensDNA-Extension solves this simply: every automated click/injection flashes a colored box-shadow on the target element for ~1.5 s. We should do the equivalent for our Playwright-driven browser.
Proposal
Add an opt-in "highlight agent actions" layer:
- Mechanism: a small injected script (via Playwright
addInitScript / page.evaluate) that draws a brief outline/box-shadow pulse around the element targeted by each browser_click / browser_type call, plus an optional cursor-trail dot for pointer moves. CSS animation, auto-removes after ~1.5 s, pointer-events: none, high z-index — zero interference with the page.
- Wiring options (pick one):
- Check whether
@playwright/mcp has grown a native highlight/trace option and just enable it in seed_claude_config.py (cheapest).
- A thin wrapper MCP server that proxies the playwright MCP and injects the highlight before delegating click/type.
- A documented skill/snippet (
kc-screenshot-style) that tasks use when the user asks to "show me what you're doing".
- Toggle: default on when the VNC viewer is connected (that's the only time anyone can see it), controllable via an env var in the workspace chart values.
Acceptance
- Watching the VNC viewer while a task runs
browser_click, the clicked element visibly pulses.
- Highlights never alter page behavior (no focus/layout/event side effects).
- Works on the managed Playwright Firefox without killing it (see the PID warning in
docs/in-app/browser.md).
Inspired by the click-feedback animation in https://github.com/kaascanvas/LensDNA-Extension.
Motivation
When a Claude task drives Firefox/Chromium through the seeded
playwright/mcpserver (seed_claude_config.py), a user watching the noVNC viewer sees the page change but gets no cue about what the agent just clicked or typed into. That makes agent browsing hard to follow, hard to trust on logged-in sites, and less compelling in demos/fleet clips.https://github.com/kaascanvas/LensDNA-Extension solves this simply: every automated click/injection flashes a colored box-shadow on the target element for ~1.5 s. We should do the equivalent for our Playwright-driven browser.
Proposal
Add an opt-in "highlight agent actions" layer:
addInitScript/page.evaluate) that draws a brief outline/box-shadow pulse around the element targeted by eachbrowser_click/browser_typecall, plus an optional cursor-trail dot for pointer moves. CSS animation, auto-removes after ~1.5 s,pointer-events: none, highz-index— zero interference with the page.@playwright/mcphas grown a native highlight/trace option and just enable it inseed_claude_config.py(cheapest).kc-screenshot-style) that tasks use when the user asks to "show me what you're doing".Acceptance
browser_click, the clicked element visibly pulses.docs/in-app/browser.md).Inspired by the click-feedback animation in https://github.com/kaascanvas/LensDNA-Extension.