vite-plugin-ai-annotator 1.14.16 → 1.16.0

package/README.md

@@ -92,81 +92,54 @@ export default defineNuxtConfig({
 
 **That's it!** Nuxt handles the rest automatically.
 
-#### Configure MCP (Vite and Nuxt)
-
-**Option A: Auto Setup (Recommended)**
-
-Enable automatic MCP configuration in your Vite config:
+#### Step 3: Start your dev server
 
-```typescript
-annotator({
-  autoSetupMcp: true,
-})
+```bash
+bun dev
 ```
 
-For Nuxt, configure in `nuxt.config.ts`:
+The annotator toolbar will automatically appear in your application. The plugin auto-writes a skill file (`.claude/skills/ai-annotator/SKILL.md`) so Claude Code knows how to read your feedback over the REST API on every restart.
 
-```typescript
-export default defineNuxtConfig({
-  modules: ['vite-plugin-ai-annotator/nuxt'],
-  aiAnnotator: {
-    autoSetupMcp: true,
-  }
-})
-```
+## Usage
 
-This automatically creates/updates `.mcp.json`, `.cursor/mcp.json`, and `.vscode/mcp.json` based on your project.
+### With the channel plugin (push, recommended)
 
-**Option B: Manual Setup**
+The Vite plugin prints these install commands on dev-server start when the channel plugin isn't enabled — copy/paste once:
 
 ```bash
-claude mcp add annotator -- npx vite-plugin-ai-annotator mcp -s http://localhost:7318
+/plugin marketplace add nguyenvanduocit/claude-annotator-plugin
+/plugin install claude-annotator-plugin@claude-annotator-plugin
+# Restart with the channel flag (Claude Code v2.1.80+; research preview)
+claude --dangerously-load-development-channels plugin:claude-annotator-plugin@claude-annotator-plugin
 ```
 
-#### Step 3: Start your dev server
-
-```bash
-bun dev
-```
+After that the hint stays silent (the Vite plugin reads `~/.claude/settings.json` to detect it; it never writes to that file). Set `autoSetupChannelPlugin: false` if you want to silence the hint without installing.
 
-The annotator toolbar will automatically appear in your application.
+1. Click the **inspect** button on the toolbar to enter feedback mode
+2. Click any element(s) you want to give feedback on, type a comment
+3. Click **send** — Claude Code's session immediately receives a `<channel source="ai-annotator">` event with your `session_id`, `page_url`, and `count`
+4. Claude fetches the details from the REST API, edits the source files, and pushes a toast back to your toolbar with progress
 
-## Usage
+### Without the channel plugin (pull)
 
-1. Click the **inspect button** on the toolbar to enter feedback mode
-2. Click on any element(s) you want to provide feedback on
-3. Ask Claude Code to modify them - it will use `annotator_get_feedback` to get the selected feedback with their source locations
-4. Claude modifies the source code directly
+Same first three steps. Then ask Claude Code to apply your feedback — it follows the auto-installed skill, calls `GET /api/sessions/<id>/feedback`, edits the files, and `DELETE`s the feedback when done.
 
-Example prompt: *"Make the selected button larger and change its color to blue"*
+Example prompt: *"Apply the feedback I just left in the browser."*
 
 ## Configuration
 
 ```typescript
 annotator({
-  port: 7318,              // Server port (default: 7318)
-  autoSetupMcp: true,      // Auto-configure MCP files (default: false)
-  autoSetupSkills: true,   // Auto-write AI tool skill files (default: true)
-  verbose: false,          // Enable detailed logging (default: false)
+  port: 7318,                     // Server port (default: 7318)
+  autoSetupSkills: true,          // Auto-write AI tool skill files (default: true)
+  autoSetupChannelPlugin: true,   // Print one-time install hint for the Claude Code
+                                  // channel plugin if it isn't already enabled in
+                                  // ~/.claude/settings.json (default: true; read-only)
+  injectSourceLoc: true,          // Inject data-source-loc attrs into HTML (default: true)
+  verbose: false,                 // Enable detailed logging (default: false)
 })
 ```
 
-### Auto MCP Setup
-
-When `autoSetupMcp: true`, the plugin automatically:
-
-1. **Detects your package manager** from lockfile:
-   - `bun.lockb` / `bun.lock` → uses `bunx`
-   - `pnpm-lock.yaml` → uses `pnpm dlx`
-   - Otherwise → uses `npx`
-
-2. **Creates/updates MCP config files**:
-   - `.mcp.json` - Claude Code, Cline, Roo Code
-   - `.cursor/mcp.json` - Cursor (only if `.cursor/` exists)
-   - `.vscode/mcp.json` - VS Code (only if `.vscode/` exists)
-
-3. **Preserves existing config** - merges with other MCP servers, doesn't overwrite
-
 ### Auto AI Skills Setup
 
 When `autoSetupSkills: true` (default), the plugin writes skill/instruction files on every dev server start with the correct server address baked in. This means AI tools automatically know how to call the REST API:

package/dist/annotator-toolbar.js

@@ -6238,14 +6238,14 @@
       while (currentElement && currentElement !== document.body) {
         let selector = currentElement.tagName.toLowerCase();
         if (currentElement.id && this.isUniqueId(currentElement.id)) {
-          selector += `#${currentElement.id}`;
+          selector += `#${CSS.escape(currentElement.id)}`;
           parts2.unshift(selector);
           break;
         }
         if (currentElement.className && typeof currentElement.className === "string") {
-          const classes = currentElement.className.split(" ").filter((c4) => c4 && !c4.includes("css-") && !c4.includes("emotion-")).slice(0, 2);
+          const classes = currentElement.className.split(/\s+/).filter((c4) => c4 && !c4.includes("css-") && !c4.includes("emotion-")).slice(0, 2);
           if (classes.length > 0) {
-            selector += "." + classes.join(".");
+            selector += "." + classes.map((c4) => CSS.escape(c4)).join(".");
           }
         }
         const siblings = Array.from(currentElement.parentElement?.children || []).filter((sibling) => sibling.tagName === currentElement.tagName);
@@ -6344,7 +6344,7 @@
       const primary = this.generateElementSelector(element);
       const fallbacks = [];
       if (element.id && this.isUniqueId(element.id)) {
-        fallbacks.push(`#${element.id}`);
+        fallbacks.push(`#${CSS.escape(element.id)}`);
       }
       if (element.getAttribute("data-testid")) {
         fallbacks.push(`[data-testid="${element.getAttribute("data-testid")}"]`);
@@ -7665,6 +7665,11 @@
       this.socket.on("connect_error", (error) => {
         this.log("Connection error:", error.message);
       });
+      this.socket.on("channel:notify", (data) => {
+        if (typeof data?.message !== "string") return;
+        const prefix = data.status === "done" ? "\u2713 " : data.status === "error" ? "\u2717 " : data.status === "progress" ? "\u2026 " : "";
+        this.showToast(prefix + data.message);
+      });
     }
     wrapRpcHandler(name, handler) {
       return (async (...args) => {
@@ -8062,13 +8067,17 @@
         return;
       }
       const text = `I have selected ${elements.length} feedback item(s) in the browser (session: ${this.sessionId}). Fetch them via GET ${this.wsEndpoint}/api/sessions/${this.sessionId}/feedback and modify the code accordingly.`;
+      if (this.socket?.connected) {
+        this.socket.emit("feedback:submitted", { count: elements.length });
+      }
       try {
         await navigator.clipboard.writeText(text);
-        this.showToast(`Copied ${elements.length} element(s)`);
+        this.showToast(`Sent ${elements.length} element(s) to Claude`);
         this.exitInspectingMode();
       } catch (error) {
-        this.showToast("Failed to copy");
-        this.log("Failed to copy:", error);
+        this.showToast(`Sent ${elements.length} element(s) to Claude`);
+        this.log("Clipboard copy failed (channel push still sent):", error);
+        this.exitInspectingMode();
       }
     }
     toggleInspect() {
@@ -8169,13 +8178,16 @@
         return;
       }
       const text = `I have feedback in the browser (session: ${this.sessionId}). Fetch them via GET ${this.wsEndpoint}/api/sessions/${this.sessionId}/feedback`;
+      if (this.socket?.connected) {
+        this.socket.emit("feedback:submitted", { count: 0 });
+      }
       try {
         await navigator.clipboard.writeText(text);
-        this.showToast("Copied!");
+        this.showToast("Sent to Claude");
         this.log("Copied to clipboard:", text);
       } catch (error) {
-        this.showToast("Failed to copy");
-        this.log("Failed to copy:", error);
+        this.showToast("Sent to Claude");
+        this.log("Clipboard copy failed (channel push still sent):", error);
       }
     }
     renderErrorIcon() {