vite-plugin-ai-annotator 1.15.0 → 1.16.1

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.d.ts

@@ -72,7 +72,7 @@ export declare class AnnotatorToolbar extends LitElement {
     private renderTrashIcon;
     private renderCloseIcon;
     private renderHelpIcon;
-    private renderClipboardIcon;
+    private renderSendIcon;
     private showToast;
     private showTooltip;
     private hideTooltip;

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")}"]`);
@@ -8119,9 +8119,9 @@
       <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
     </svg>`;
     }
-    renderClipboardIcon() {
+    renderSendIcon() {
       return x`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-      <path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9.75a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184" />
+      <path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" />
     </svg>`;
     }
     showToast(message) {
@@ -8245,12 +8245,12 @@
         <button
           class="toolbar-btn"
           @click=${this.copySessionId}
-          @mouseenter=${(e5) => this.showTooltip("Copy session", e5.currentTarget)}
+          @mouseenter=${(e5) => this.showTooltip("Send to Claude", e5.currentTarget)}
           @mouseleave=${() => this.hideTooltip()}
-          aria-label="Copy session ID to clipboard"
-          title="Copy session"
+          aria-label="Send selections to Claude Code"
+          title="Send to Claude"
         >
-          ${this.renderClipboardIcon()}
+          ${this.renderSendIcon()}
         </button>
 
         <button

package/dist/nuxt-module.js

@@ -5,7 +5,8 @@ import { defineNuxtModule, addVitePlugin } from "@nuxt/kit";
 import { spawn } from "node:child_process";
 import { fileURLToPath } from "node:url";
 import { dirname as dirname2, join as join2, relative } from "node:path";
-import { existsSync as existsSync2 } from "node:fs";
+import { existsSync as existsSync2, readFileSync as readFileSync2 } from "node:fs";
+import { homedir } from "node:os";
 
 // node_modules/@jridgewell/sourcemap-codec/dist/sourcemap-codec.mjs
 var comma = ",".charCodeAt(0);
@@ -1221,6 +1222,27 @@ ${body}
 }
 
 // src/vite-plugin.ts
+var CHANNEL_PLUGIN_KEY = "claude-annotator-plugin@claude-annotator-plugin";
+var CHANNEL_PLUGIN_REPO = "nguyenvanduocit/claude-annotator-plugin";
+function isChannelPluginEnabled() {
+  try {
+    const settingsPath = join2(homedir(), ".claude", "settings.json");
+    if (!existsSync2(settingsPath)) return false;
+    const settings = JSON.parse(readFileSync2(settingsPath, "utf-8"));
+    return Boolean(settings?.enabledPlugins?.[CHANNEL_PLUGIN_KEY]);
+  } catch {
+    return false;
+  }
+}
+function printChannelPluginSuggestion() {
+  console.log(
+    `[ai-annotator] \u{1F4A1} Channel push plugin not detected. For instant push to Claude Code (instead of copy-paste), run once:
+  /plugin marketplace add ${CHANNEL_PLUGIN_REPO}
+  /plugin install ${CHANNEL_PLUGIN_KEY}
+  claude --dangerously-load-development-channels plugin:${CHANNEL_PLUGIN_KEY}
+  (Claude Code v2.1.80+; set autoSetupChannelPlugin: false in your vite.config to hide this.)`
+  );
+}
 var SOURCE_LOC_ATTR = "data-source-loc";
 function injectSourceLocations(code, id, root) {
   if (!code.includes("<")) return null;
@@ -1304,7 +1326,8 @@ var AiAnnotatorServer = class {
       publicAddress: options.publicAddress ?? `http://${listenAddress}:${port}`,
       verbose: options.verbose ?? false,
       injectSourceLoc: options.injectSourceLoc ?? true,
-      autoSetupSkills: options.autoSetupSkills ?? true
+      autoSetupSkills: options.autoSetupSkills ?? true,
+      autoSetupChannelPlugin: options.autoSetupChannelPlugin ?? true
     };
     const currentFileDir = dirname2(fileURLToPath(import.meta.url));
     this.isRunningFromSource = currentFileDir.endsWith("/src") || currentFileDir.endsWith("\\src");
@@ -1454,6 +1477,9 @@ function aiAnnotator(options = {}) {
           console.log(`[ai-annotator] \u2705 AI skills updated: ${skillsResult.updated.map((f) => f.replace(root + "/", "")).join(", ")}`);
         }
       }
+      if (options.autoSetupChannelPlugin !== false && !isChannelPluginEnabled()) {
+        printChannelPluginSuggestion();
+      }
     },
     async buildStart() {
       await serverManager.start();