Release Notes

Quieter in the background, steadier on screen, and ready for the newest Claude Code.

What's new

🤫 No more /health noise in your DevTools

Idle tabs used to check the local server every 10 seconds, even with the toolbar closed, so DevTools filled up with failed requests whenever the server wasn't running. Now all server traffic goes through the extension's background worker, which waits longer between checks while the server is down. The toolbar only checks while it's open and the tab is visible. Your page's Network panel and Console show your app, nothing else. (#84)

📌 The toolbar stays where you put it

The toolbar now remembers its position when you close and reopen it, and it stays on screen when you resize the window, open DevTools, or switch to a smaller display. Thanks @luxi78 (#92, #93)

⌨️ Custom hotkeys can't break typing

Recording a bare key like Space or Backspace as your shortcut used to take that key over everywhere, including in text fields. Shortcuts now need Ctrl, Cmd or Alt, and they never fire while you're typing in a field. Bad shortcuts recorded by older versions are ignored as soon as you update. Thanks @Samyak2406 (#87)

🔌 Works with the latest Claude Code

Claude Code now sends a newer MCP protocol version that the server rejected, so every tool call after connecting failed. The server now accepts it. (#95)

🧭 OpenCode support in the setup wizard

npx vibe-annotations-server init now detects OpenCode and configures it for you. Thanks @Samyak2406 (#88) --- Server update recommended: npm update -g vibe-annotations-server (0.5.3), required if you're on a recent Claude Code. 📚 Full documentation: vibe-annotations.com/docs

Vibe Annotations now runs inside Electron apps and other embedded Chromium hosts, not just Chrome.

What's new

🖥️ Annotate your Electron app

Side-load the unpacked extension into your Electron dev session and the toolbar injects into your app just like a browser tab. Because injection rides the static content scripts on localhost, it sidesteps CSP and CORS with no wiring on your side. Screenshots and the toolbar-icon toggle aren't available in embedded hosts, but the core annotate → agent loop works end to end. *(Requires loading the unpacked extension; this build isn't on the Chrome Web Store.)* → Electron & embedded hosts

🧩 Runs cleanly in any Chromium host

The extension now feature-detects Chrome-only APIs (chrome.commands, chrome.action) so it no longer crashes on boot in non-Chrome runtimes, and it hides the close button where there'd be no way to reopen a dismissed toolbar. --- No server update needed. 📚 Full documentation: vibe-annotations.com/docs

A small follow-up to v2.0.0 that makes the variants workflow feel more natural and keeps your annotation queue clean.

What's new

🧬 Just *ask* for variants

Typing something like *"make variants of this"* or *"show me a few versions"* straight into a normal comment will be recognized by your agent — routing the annotation through the same build-preview-and-pick flow, right in your codebase. *(Requires the MCP server.)* → Variants

🧹 Cleaner handoffs

Your agent now reliably clears each annotation once it's implemented, instead of leaving finished ones on the page. This fixes a rough edge with design edits: a leftover edit used to re-apply its live preview on top of your already-changed code on reload. Design edits are now closed out as soon as they land, and a variants request no longer stops the agent from tidying up everything else. --- The MCP server moves to v0.5.1 — update with npx vibe-annotations-server init (or npm i -g vibe-annotations-server). 📚 Full documentation: vibe-annotations.com/docs

Say hello to Vibo 👋

Meet Vibo — our new Cursor-devil, detail-chasing mascot. Little horns, little wings, and an eye for the pixels you missed. Vibo is the face of our biggest release yet: v2.0.0 reworks how you annotate, edit, and hand work off to your coding agent, and rebuilds the extension from the ground up.

What's new

🧬 Component variants

Ask your agent for several variants of a component, preview them right on the page, and pick the winner. The agent builds each one in your real codebase — not a mockup — then finalizes your choice and strips the scaffolding for a clean diff. *(Requires the MCP server.)* → Variants

📸 Screenshots & reference images

Every pin can carry an automatic screenshot of the element you annotated, plus any reference images you paste or attach. Your agent receives both as real files and is told which is *current state* vs *design target*. → Screenshots & images

📤 Share a review in one file

Export a batch of annotations three ways: .md (offline, personal handoff), .html (self-contained, every image embedded — share with anyone, no extension needed), or .json (re-import onto another localhost). → Sharing a review

🧠 Richer element context

Every pin now resolves the React (or Vue) component and its source file from the page's real fiber tree, so your agent jumps straight to the right file instead of guessing from the DOM.

🎨 A single, unified popover

Comment, design edits, and variants now live in one panel with intent tabs, plus a + attachment menu. Design edits still preview live on the page — now a click away from everything else on the pin. → Design edits

⚙️ Under the hood: rebuilt on WXT

The extension is now built with WXT, a modern web-extension framework. What that means for you:

Hot reload while developing — WXT hot-reloads the extension UI and auto-reloads content scripts the moment you save. No more hunting for the "reload" button in chrome://extensions on every change.

A cleaner ES-module codebase and a modern build/zip pipeline for Chrome Web Store submissions.

Contributors: run pnpm dev in packages/extension/, load .output/chrome-mv3 once, and iterate with live reload. See the Architecture docs.

The MCP server moves to v0.5.0 — update with npx vibe-annotations-server init (or npm i -g vibe-annotations-server). --- 📚 Full documentation: vibe-annotations.com/docs

Setup Wizard

One interactive command replaces the 4-step setup (install → start → configure agent → link extension): `bash npx vibe-annotations-server init ` Detects your package manager, installs the server globally, starts it in the background on port 3846, configures your AI coding agent (Claude Code, Cursor, Windsurf, Codex, OpenClaw, VS Code), and points you to the Chrome Web Store. Flags: --agent (repeatable), --project, --non-interactive, --skip-server, --skip-extension, --reset.

What's new

Server (0.4.0)

New init subcommand — interactive setup wizard built on @clack/prompts

Binary alias: vibe-annotations works alongside vibe-annotations-server

Unified agent config codepath: CLI when detected, direct JSON/TOML write otherwise, idempotent on re-run

Final summary surfaces status / logs -f / stop so users know the daemon is running

Extension (1.6.3)

In-extension setup card, MCP workflow, and multi-page workflow screens now lead with npx vibe-annotations-server init

Manual setup steps kept as a fallback below

Docs

Root README, server README, website docs (installation, MCP setup, workflows), llms.txt, and extension CLAUDE.md all lead with init as the recommended path

claude mcp add --scope user (global config) is now the default across all docs

Full changelog: https://github.com/RaphaelRegnier/vibe-annotations/compare/v1.6.2...v1.6.3

What's new

UX & UI refresh, quality of life improvements

Clearer annotation bar with labeled actions, morphing with instructions when annotating

New gradient on buttons, active tabs, and badges (#E85B5C → #D03D68)

Pin color default updated — first option in the settings picker

Extension icon badge uses the same color

Clipboard improvements

Route grouping: Copy from View All now groups annotations by route with ## /path headers

Stylesheet annotations: Show as [Stylesheet change] instead of ?

Copy feedback: Green checkmark flashes on the copy button

Badge count fix

Extension icon badge now counts all annotations for the site (project-wide), matching the toolbar pill — previously only counted the current URL

Codebase refactoring

Split monolith modules: annotation-popover.js (2256→684 lines) and floating-toolbar.js (1807→1375 lines) into focused sub-modules

Removed 3,000+ lines of dead code including the unused popup/ directory from pre-v1.1.0

Storage layer consolidated — all mutations through background.js with lock, removing race-prone fallback writes

Server (vibe-annotations-server)

Removed dead applyAnnotationsUpdate() method

Extracted filterByUrlPattern() utility (was duplicated 3×)

Added max watcher limit (100) to prevent memory leaks

Removed unused node-persist dependency

Full changelog: https://github.com/RaphaelRegnier/vibe-annotations/compare/v1.6.1...v1.6.2

Before / After — MCP output for a comment-only annotation

Before (v1.6.0) `json { "selector": "[data-vibe-id=\"vibe-annotation-...\"]", "element_context": { "tag": "div", "classes": ["rounded-2xl", "border", "border-border", "bg-surface-alt", "p-6"], "text": "📦Multi-Page Batching...", "styles": { "display": "block", "position": "static", "fontSize": "16px", "fontWeight": "400", "lineHeight": "24px", "textAlign": "start", "color": "rgb(248, 250, 252)", "backgroundColor": "rgb(15, 23, 42)", "margin": "0px", "padding": "24px", "paddingTop": "24px", "paddingRight": "24px", "paddingBottom": "24px", "paddingLeft": "24px", "marginTop": "0px", "marginRight": "0px", "marginBottom": "0px", "marginLeft": "0px", "flexDirection": "row", "flexWrap": "nowrap", "justifyContent": "normal", "alignItems": "normal", "gap": "normal", "columnGap": "normal", "rowGap": "normal", "gridTemplateColumns": "none", "gridTemplateRows": "none", "borderTopWidth": "1px", "borderRadius": "16px", "borderStyle": "solid", "borderColor": "rgb(30, 41, 59)", "width": "504px", "minWidth": "auto", "maxWidth": "none", "height": "175.5px", "minHeight": "auto", "maxHeight": "none" }, "position": { "..." : "..." } }, "context_hints": ["UI section: main-content", "Next.js app detected", "CSS-in-JS styling detected"], "_synced": true, "badge_offset": { "x": 138.94, "y": 23.49 }, "source_file_path": null, "source_line_range": null, "source_map_available": false, "has_screenshot": true } ` After (v1.6.1) `json { "selector": "[data-vibe-id=\"vibe-annotation-...\"]", "selector_preview": "