The Hover VS Code extension: a local-first Playwright cockpit

Most AI testing extensions put a chatbot in your sidebar. Hover does the opposite. The Hover VS Code extension is a console around a loop that runs in the coding agent you already use. It reads your runs, tracks coverage, and hands you a copy-paste heal command. It never drives an agent of its own.

What the Hover VS Code extension is

One icon in the Activity Bar opens one panel. The panel is a cockpit for the Playwright specs under __vibe_tests__/: which passed, which turned flaky, which drifted in CI, and what your suite still doesn't cover. Authoring happens elsewhere (see below), so the extension stays a place to look, not a place that spends tokens.

It works with any framework Hover can reach over the Chrome DevTools Protocol: Vite, Next.js, Nuxt, Astro, webpack.

One panel, four tabs

• Overview is the run cockpit. Toggle Local (.hover/runs) or Remote (Hover Cloud CI runs), read the stat tiles (specs, last pass rate, flaky, tokens over 7 days), and scan a per-spec matrix that colors every run pass, fail, or flaky. Run all, run one spec, or sync CI from the same view.
• Heal is the drift queue. When a spec breaks in CI, a card shows the spec, its environment and branch, a link to the CI log, and a Copy heal command button that copies /mcp__hover__heal <spec> for your agent. CI closes the card only when the spec passes again.
• Env is the environment roster. Set the active run target, edit URLs, store per-account passwords in VS Code SecretStorage, and export the active environment's credentials to .hover/.env for the agent in one click.
• Map is the business-map summary: areas, flows, and covered percent, with a button to open the full coverage graph.

Local-first: no account required

The panel works signed out. You get Overview, Env, and Map on your local runs without an account. Signing in adds two things: the Remote run history from Hover Cloud and the CI Heal queue. Sign-in uses a browser device-link approval, so you never paste a token.

Where authoring happens

Hover writes tests through the Hover MCP, not through a chat in the editor. You call /mcp__hover__test_app in Claude Code, Cursor, or any MCP-capable agent; the agent drives your real Chrome through grounded tools and crystallizes each flow into a plain @playwright/test spec. The extension then reviews what that loop produced. Splitting the two keeps the cockpit fast and keeps your model spend in the agent you already pay for.

Install

Install the extension from the Marketplace (hyperyond.hover-dev), or run code --install-extension hyperyond.hover-dev. Add the MCP to your agent with one command:

npm i -g @hover-dev/mcp && claude mcp add hover -- hover-mcp

Then open the Hover panel and call /mcp__hover__test_app in your agent. Full walkthrough in the quick start.