vite-plugin-ai-annotator 1.16.0 → 1.16.2

package/dist/annotator-toolbar.d.ts

@@ -19,6 +19,7 @@ export declare class AnnotatorToolbar extends LitElement {
     private commentPopover;
     private tooltip;
     private toastMessage;
+    private channelListenerCount;
     private popoverCleanup;
     private tooltipCleanup;
     private toastTimeout;
@@ -72,11 +73,14 @@ export declare class AnnotatorToolbar extends LitElement {
     private renderTrashIcon;
     private renderCloseIcon;
     private renderHelpIcon;
+    private renderSendIcon;
     private renderClipboardIcon;
     private showToast;
     private showTooltip;
     private hideTooltip;
-    private copySessionId;
+    private buildFeedbackPrompt;
+    private copyFeedbackToClipboard;
+    private sendFeedbackToClaude;
     private renderErrorIcon;
     private openHelpPage;
     render(): import("lit-html").TemplateResult<1>;

package/dist/annotator-toolbar.js

@@ -7528,6 +7528,7 @@
       this.commentPopover = { visible: false, element: null, comment: "" };
       this.tooltip = { visible: false, text: "", x: 0, y: 0 };
       this.toastMessage = "";
+      this.channelListenerCount = 0;
       this.popoverCleanup = null;
       this.tooltipCleanup = null;
       this.toastTimeout = null;
@@ -7670,6 +7671,9 @@
         const prefix = data.status === "done" ? "\u2713 " : data.status === "error" ? "\u2717 " : data.status === "progress" ? "\u2026 " : "";
         this.showToast(prefix + data.message);
       });
+      this.socket.on("channel:status", (data) => {
+        this.channelListenerCount = typeof data?.listenerCount === "number" ? data.listenerCount : 0;
+      });
     }
     wrapRpcHandler(name, handler) {
       return (async (...args) => {
@@ -8067,16 +8071,18 @@
         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) {
+      const willSend = this.socket?.connected && this.channelListenerCount > 0;
+      if (willSend) {
         this.socket.emit("feedback:submitted", { count: elements.length });
       }
+      const successToast = willSend ? `Sent ${elements.length} element(s) to Claude` : `Copied ${elements.length} element(s)`;
       try {
         await navigator.clipboard.writeText(text);
-        this.showToast(`Sent ${elements.length} element(s) to Claude`);
+        this.showToast(successToast);
         this.exitInspectingMode();
       } catch (error) {
-        this.showToast(`Sent ${elements.length} element(s) to Claude`);
-        this.log("Clipboard copy failed (channel push still sent):", error);
+        this.showToast(willSend ? successToast : "Failed to copy");
+        this.log("Clipboard copy failed:", error);
         this.exitInspectingMode();
       }
     }
@@ -8119,6 +8125,11 @@
       <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>`;
     }
+    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="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>`;
+    }
     renderClipboardIcon() {
       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" />
@@ -8167,7 +8178,14 @@
       }
       this.tooltip = { visible: false, text: "", x: 0, y: 0 };
     }
-    async copySessionId() {
+    // Builds the paste-prompt text that lets a Claude session fetch feedback
+    // via REST. Used by both the Copy button (clipboard) and is conceptually
+    // what the Send button replaces (channel push -> Claude already knows the
+    // session, no text needed).
+    buildFeedbackPrompt() {
+      return `I have feedback in the browser (session: ${this.sessionId}). Fetch them via GET ${this.wsEndpoint}/api/sessions/${this.sessionId}/feedback`;
+    }
+    async copyFeedbackToClipboard() {
       this.exitInspectingMode();
       if (this.demo) {
         this.showToast("Demo mode \u2014 no server");
@@ -8177,18 +8195,36 @@
         this.showToast("No session ID");
         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 });
-      }
+      const text = this.buildFeedbackPrompt();
       try {
         await navigator.clipboard.writeText(text);
-        this.showToast("Sent to Claude");
+        this.showToast("Copied!");
         this.log("Copied to clipboard:", text);
       } catch (error) {
-        this.showToast("Sent to Claude");
-        this.log("Clipboard copy failed (channel push still sent):", error);
+        this.showToast("Failed to copy");
+        this.log("Failed to copy:", error);
+      }
+    }
+    sendFeedbackToClaude() {
+      this.exitInspectingMode();
+      if (this.demo) {
+        this.showToast("Demo mode \u2014 no server");
+        return;
+      }
+      if (!this.sessionId) {
+        this.showToast("No session ID");
+        return;
+      }
+      if (!this.socket?.connected) {
+        this.showToast("Not connected");
+        return;
+      }
+      if (this.channelListenerCount === 0) {
+        this.showToast("No Claude listening");
+        return;
       }
+      this.socket.emit("feedback:submitted", { count: 0 });
+      this.showToast("Sent to Claude");
     }
     renderErrorIcon() {
       return x`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
@@ -8244,15 +8280,28 @@
 
         <button
           class="toolbar-btn"
-          @click=${this.copySessionId}
-          @mouseenter=${(e5) => this.showTooltip("Copy session", e5.currentTarget)}
+          @click=${this.copyFeedbackToClipboard}
+          @mouseenter=${(e5) => this.showTooltip("Copy prompt for Claude", e5.currentTarget)}
           @mouseleave=${() => this.hideTooltip()}
-          aria-label="Copy session ID to clipboard"
-          title="Copy session"
+          aria-label="Copy feedback prompt to clipboard"
+          title="Copy"
         >
           ${this.renderClipboardIcon()}
         </button>
 
+        <button
+          class="toolbar-btn"
+          @click=${this.sendFeedbackToClaude}
+          @mouseenter=${(e5) => this.showTooltip(this.channelListenerCount > 0 ? "Send to Claude" : "No Claude listening \u2014 install the channel plugin", e5.currentTarget)}
+          @mouseleave=${() => this.hideTooltip()}
+          ?disabled=${this.channelListenerCount === 0}
+          aria-label="${this.channelListenerCount > 0 ? "Send selections to Claude Code" : "Send to Claude (no listener connected)"}"
+          aria-disabled="${this.channelListenerCount === 0}"
+          title="${this.channelListenerCount > 0 ? "Send to Claude" : "No Claude listening"}"
+        >
+          ${this.renderSendIcon()}
+        </button>
+
         <button
           class="toolbar-btn"
           @click=${this.openHelpPage}
@@ -8586,6 +8635,9 @@
   __decorateClass([
     r5()
   ], AnnotatorToolbar.prototype, "toastMessage", 2);
+  __decorateClass([
+    r5()
+  ], AnnotatorToolbar.prototype, "channelListenerCount", 2);
   if (!customElements.get("annotator-toolbar")) {
     customElements.define("annotator-toolbar", AnnotatorToolbar);
   }

package/dist/index.cjs

@@ -66,7 +66,7 @@ const toolbar = document.createElement('annotator-toolbar');
 toolbar.setAttribute('ws-endpoint', '${e.replace("http://","ws://").replace("https://","wss://")}');
 toolbar.setAttribute('verbose', '${i}');
 document.body.prepend(toolbar);
-`;s.send(c+l)}catch(o){console.error("Error reading annotator-toolbar.js:",o),s.status(404).send("File not found")}}),a.get("/health",(t,s)=>{s.json({status:"ok",sessions:n.size})}),a.get("/api/sessions",(t,s)=>{s.json(kn(n))})}function kn(a){return Array.from(a.values()).map(e=>e.session)}function i0(a,e){if(e){let i=a.get(e);return i?{rpc:i.rpc,sessionId:e}:null}if(a.size===1){let i=a.entries().next().value;if(i){let[n,t]=i;return{rpc:t.rpc,sessionId:n}}}return null}var Jb="channels";function i5(a,e,i){a.on("connection",n=>{if(n.handshake.query.role==="channel"){n.join(Jb),e.log(`Channel client connected (sid: ${n.id})`),n.on("channel:notify",c=>{if(!c?.sessionId||typeof c.message!="string")return;let p=i.get(c.sessionId);p&&p.socket.emit("channel:notify",{message:c.message,status:c.status??"info"})}),n.on("disconnect",()=>{e.log(`Channel client disconnected (sid: ${n.id})`)});return}let s=e5(),o={id:s,url:"",title:"",connectedAt:Date.now(),lastActivity:Date.now()},r=Gb(n);i.set(s,{socket:n,rpc:r,session:o}),e.log(`Browser connected: ${s} (total: ${i.size})`),r.handle.getSessions(async()=>kn(i)),r.handle.ping(async()=>"pong"),r.handle.rpcError(c=>{e.error("RPC Error:",c)}),n.emit("connected",{sessionId:s}),n.on("pageContextChanged",c=>{o.url=c.url,o.title=c.title,o.lastActivity=Date.now()}),n.on("feedback:submitted",c=>{let p=typeof c?.count=="number"?c.count:0;o.lastActivity=Date.now(),a.to(Jb).emit("feedback:submitted",{sessionId:s,pageUrl:o.url,pageTitle:o.title,count:p})}),n.on("disconnect",()=>{r.dispose(),i.delete(s),e.log(`Browser disconnected: ${s} (total: ${i.size})`)})})}function n5(a,e){let i=i0(a,e);if(!i){let n=kn(a);return n.length===0?{error:"No browser connected. Add the annotator script to your webpage."}:{error:`Multiple sessions available. Specify sessionId. Available: ${n.map(t=>t.id).join(", ")}`}}return{rpc:i.rpc,sessionId:i.sessionId}}function t5(a,e,i){function n(t,s){let o=n5(i,s);return"error"in o?(t.status(400).json({error:o.error}),null):o.rpc}a.get("/api/sessions",(t,s)=>{s.json(kn(i))}),a.get("/api/sessions/:id/page-context",async(t,s)=>{let o=n(s,t.params.id);if(o)try{let r=await o.client.getPageContext(1e4);s.json(r)}catch(r){s.status(500).json({error:r instanceof Error?r.message:String(r)})}}),a.post("/api/sessions/:id/select",async(t,s)=>{let o=n(s,t.params.id);if(!o)return;let{mode:r="inspect",selector:c,selectorType:p="css"}=t.body||{};try{let l=await o.client.triggerSelection(r,c,p,1e4);s.json(l)}catch(l){s.status(500).json({error:l instanceof Error?l.message:String(l)})}}),a.get("/api/sessions/:id/feedback",async(t,s)=>{let o=n(s,t.params.id);if(o)try{let r=await o.client.getSelectedElements(15e3);if(Array.isArray(r)&&r.length===0){s.json([]);return}let p=t.query.fields?.split(",").filter(Boolean),l=Qb(r,p);s.json(l)}catch(r){s.status(500).json({error:r instanceof Error?r.message:String(r)})}}),a.delete("/api/sessions/:id/feedback",(t,s)=>{let o=n(s,t.params.id);o&&(o.client.clearSelection(),s.json({success:!0}))}),a.post("/api/sessions/:id/screenshot",async(t,s)=>{let o=n(s,t.params.id);if(!o)return;let{type:r="viewport",selector:c,quality:p=.7}=t.body||{};try{let l=await o.client.captureScreenshot(r,c,p,3e4);if("success"in l&&l.success&&"base64"in l&&l.base64){let u=Yb(l.base64);s.json({success:!0,filePath:u})}else s.json(l)}catch(l){s.status(500).json({error:l instanceof Error?l.message:String(l)})}}),a.post("/api/sessions/:id/inject-css",async(t,s)=>{let o=n(s,t.params.id);if(!o)return;let{css:r}=t.body||{};if(!r){s.status(400).json({error:"css field is required"});return}try{let c=await o.client.injectCSS(r,1e4);s.json(c)}catch(c){s.status(500).json({error:c instanceof Error?c.message:String(c)})}}),a.post("/api/sessions/:id/inject-js",async(t,s)=>{let o=n(s,t.params.id);if(!o)return;let{code:r}=t.body||{};if(!r){s.status(400).json({error:"code field is required"});return}try{let c=await o.client.injectJS(r,15e3);s.json(c)}catch(c){s.status(500).json({error:c instanceof Error?c.message:String(c)})}}),a.get("/api/sessions/:id/console",async(t,s)=>{let o=n(s,t.params.id);if(!o)return;let r=t.query.clear==="true";try{let c=await o.client.getConsole(r,15e3);s.json(c)}catch(c){s.status(500).json({error:c instanceof Error?c.message:String(c)})}}),e.log("REST API routes registered at /api/*")}async function n0(a,e,i,n=!1){let t=Kb(n),s=(0,yp.default)(),o=new Map;s.use((0,a0.default)({origin:"*",methods:["GET","POST","OPTIONS"],allowedHeaders:["Content-Type","Authorization"]})),s.use(yp.default.json({limit:"10mb"})),a5(s,i,n,o),t5(s,t,o);let r=await s5(s,a,e),c=new Vb(r,{cors:{origin:"*",methods:["GET","POST"]},path:"/socket.io",maxHttpBufferSize:5e7});return i5(c,t,o),{app:s,server:r,io:c,port:a,listenAddress:e,publicAddress:i,verbose:n,getAllSessions:()=>kn(o),getRpc:p=>i0(o,p)}}async function t0(a){return new Promise(e=>{a.io.close(()=>{e()})})}function s5(a,e,i){return new Promise((n,t)=>{let s=a.listen(e,i,()=>n(s));s.on("error",o=>{t(o)})})}var o0=require("net");var Ss=require("node:fs"),_s=require("node:path");function s0(){let a=[(0,_s.join)(__dirname,"..","package.json"),(0,_s.join)(__dirname,"package.json"),(0,_s.join)(process.cwd(),"package.json")];for(let e of a)if((0,Ss.existsSync)(e))try{let i=JSON.parse((0,Ss.readFileSync)(e,"utf-8"));if(i.name==="vite-plugin-ai-annotator"&&i.version)return i.version}catch{continue}return"0.0.0"}var o5=s0(),te=process.argv.slice(2);r5();async function r5(){let a=te.includes("--help")||te.includes("-h"),e=te.includes("--version")||te.includes("-v"),i=te.includes("--verbose")||te.includes("-V"),n=te.findIndex(x=>x==="--port"||x==="-p"),t=te.findIndex(x=>x==="--listen"||x==="-l"),s=te.findIndex(x=>x==="--public-address"||x==="-a");a&&(console.log(`
+`;s.send(c+l)}catch(o){console.error("Error reading annotator-toolbar.js:",o),s.status(404).send("File not found")}}),a.get("/health",(t,s)=>{s.json({status:"ok",sessions:n.size})}),a.get("/api/sessions",(t,s)=>{s.json(kn(n))})}function kn(a){return Array.from(a.values()).map(e=>e.session)}function i0(a,e){if(e){let i=a.get(e);return i?{rpc:i.rpc,sessionId:e}:null}if(a.size===1){let i=a.entries().next().value;if(i){let[n,t]=i;return{rpc:t.rpc,sessionId:n}}}return null}var Jb="channels";function i5(a,e,i){let n=0,t=()=>{for(let s of i.values())s.socket.emit("channel:status",{listenerCount:n})};a.on("connection",s=>{if(s.handshake.query.role==="channel"){s.join(Jb),n++,t(),e.log(`Channel client connected (sid: ${s.id}, total: ${n})`),s.on("channel:notify",l=>{if(!l?.sessionId||typeof l.message!="string")return;let u=i.get(l.sessionId);u&&u.socket.emit("channel:notify",{message:l.message,status:l.status??"info"})}),s.on("disconnect",()=>{n=Math.max(0,n-1),t(),e.log(`Channel client disconnected (sid: ${s.id}, total: ${n})`)});return}let r=e5(),c={id:r,url:"",title:"",connectedAt:Date.now(),lastActivity:Date.now()},p=Gb(s);i.set(r,{socket:s,rpc:p,session:c}),e.log(`Browser connected: ${r} (total: ${i.size})`),p.handle.getSessions(async()=>kn(i)),p.handle.ping(async()=>"pong"),p.handle.rpcError(l=>{e.error("RPC Error:",l)}),s.emit("connected",{sessionId:r}),s.emit("channel:status",{listenerCount:n}),s.on("pageContextChanged",l=>{c.url=l.url,c.title=l.title,c.lastActivity=Date.now()}),s.on("feedback:submitted",l=>{let u=typeof l?.count=="number"?l.count:0;c.lastActivity=Date.now(),a.to(Jb).emit("feedback:submitted",{sessionId:r,pageUrl:c.url,pageTitle:c.title,count:u})}),s.on("disconnect",()=>{p.dispose(),i.delete(r),e.log(`Browser disconnected: ${r} (total: ${i.size})`)})})}function n5(a,e){let i=i0(a,e);if(!i){let n=kn(a);return n.length===0?{error:"No browser connected. Add the annotator script to your webpage."}:{error:`Multiple sessions available. Specify sessionId. Available: ${n.map(t=>t.id).join(", ")}`}}return{rpc:i.rpc,sessionId:i.sessionId}}function t5(a,e,i){function n(t,s){let o=n5(i,s);return"error"in o?(t.status(400).json({error:o.error}),null):o.rpc}a.get("/api/sessions",(t,s)=>{s.json(kn(i))}),a.get("/api/sessions/:id/page-context",async(t,s)=>{let o=n(s,t.params.id);if(o)try{let r=await o.client.getPageContext(1e4);s.json(r)}catch(r){s.status(500).json({error:r instanceof Error?r.message:String(r)})}}),a.post("/api/sessions/:id/select",async(t,s)=>{let o=n(s,t.params.id);if(!o)return;let{mode:r="inspect",selector:c,selectorType:p="css"}=t.body||{};try{let l=await o.client.triggerSelection(r,c,p,1e4);s.json(l)}catch(l){s.status(500).json({error:l instanceof Error?l.message:String(l)})}}),a.get("/api/sessions/:id/feedback",async(t,s)=>{let o=n(s,t.params.id);if(o)try{let r=await o.client.getSelectedElements(15e3);if(Array.isArray(r)&&r.length===0){s.json([]);return}let p=t.query.fields?.split(",").filter(Boolean),l=Qb(r,p);s.json(l)}catch(r){s.status(500).json({error:r instanceof Error?r.message:String(r)})}}),a.delete("/api/sessions/:id/feedback",(t,s)=>{let o=n(s,t.params.id);o&&(o.client.clearSelection(),s.json({success:!0}))}),a.post("/api/sessions/:id/screenshot",async(t,s)=>{let o=n(s,t.params.id);if(!o)return;let{type:r="viewport",selector:c,quality:p=.7}=t.body||{};try{let l=await o.client.captureScreenshot(r,c,p,3e4);if("success"in l&&l.success&&"base64"in l&&l.base64){let u=Yb(l.base64);s.json({success:!0,filePath:u})}else s.json(l)}catch(l){s.status(500).json({error:l instanceof Error?l.message:String(l)})}}),a.post("/api/sessions/:id/inject-css",async(t,s)=>{let o=n(s,t.params.id);if(!o)return;let{css:r}=t.body||{};if(!r){s.status(400).json({error:"css field is required"});return}try{let c=await o.client.injectCSS(r,1e4);s.json(c)}catch(c){s.status(500).json({error:c instanceof Error?c.message:String(c)})}}),a.post("/api/sessions/:id/inject-js",async(t,s)=>{let o=n(s,t.params.id);if(!o)return;let{code:r}=t.body||{};if(!r){s.status(400).json({error:"code field is required"});return}try{let c=await o.client.injectJS(r,15e3);s.json(c)}catch(c){s.status(500).json({error:c instanceof Error?c.message:String(c)})}}),a.get("/api/sessions/:id/console",async(t,s)=>{let o=n(s,t.params.id);if(!o)return;let r=t.query.clear==="true";try{let c=await o.client.getConsole(r,15e3);s.json(c)}catch(c){s.status(500).json({error:c instanceof Error?c.message:String(c)})}}),e.log("REST API routes registered at /api/*")}async function n0(a,e,i,n=!1){let t=Kb(n),s=(0,yp.default)(),o=new Map;s.use((0,a0.default)({origin:"*",methods:["GET","POST","OPTIONS"],allowedHeaders:["Content-Type","Authorization"]})),s.use(yp.default.json({limit:"10mb"})),a5(s,i,n,o),t5(s,t,o);let r=await s5(s,a,e),c=new Vb(r,{cors:{origin:"*",methods:["GET","POST"]},path:"/socket.io",maxHttpBufferSize:5e7});return i5(c,t,o),{app:s,server:r,io:c,port:a,listenAddress:e,publicAddress:i,verbose:n,getAllSessions:()=>kn(o),getRpc:p=>i0(o,p)}}async function t0(a){return new Promise(e=>{a.io.close(()=>{e()})})}function s5(a,e,i){return new Promise((n,t)=>{let s=a.listen(e,i,()=>n(s));s.on("error",o=>{t(o)})})}var o0=require("net");var Ss=require("node:fs"),_s=require("node:path");function s0(){let a=[(0,_s.join)(__dirname,"..","package.json"),(0,_s.join)(__dirname,"package.json"),(0,_s.join)(process.cwd(),"package.json")];for(let e of a)if((0,Ss.existsSync)(e))try{let i=JSON.parse((0,Ss.readFileSync)(e,"utf-8"));if(i.name==="vite-plugin-ai-annotator"&&i.version)return i.version}catch{continue}return"0.0.0"}var o5=s0(),te=process.argv.slice(2);r5();async function r5(){let a=te.includes("--help")||te.includes("-h"),e=te.includes("--version")||te.includes("-v"),i=te.includes("--verbose")||te.includes("-V"),n=te.findIndex(x=>x==="--port"||x==="-p"),t=te.findIndex(x=>x==="--listen"||x==="-l"),s=te.findIndex(x=>x==="--public-address"||x==="-a");a&&(console.log(`
 AI Annotator - AI-powered web inspection tool
 
 Usage:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-ai-annotator",
-  "version": "1.16.0",
+  "version": "1.16.2",
   "description": "AI-powered element annotator for Vite - Pick elements and get instant AI code modifications",
   "type": "module",
   "main": "dist/vite-plugin.js",