vite-plugin-ai-annotator 1.0.1 → 1.0.3

package/dist/annotator-toolbar.js

@@ -6508,6 +6508,7 @@
       document.body.appendChild(badge);
       const cleanup = autoUpdate(element, badge, () => {
         computePosition2(element, badge, {
+          strategy: "fixed",
           placement: "top-start",
           middleware: [
             offset2({ mainAxis: -5, crossAxis: 7 }),
@@ -6569,14 +6570,17 @@
         const color = colors[colorIndex % colors.length];
         const index = selectedElements.size + 1;
         colorIndex++;
-        element.style.outline = `3px solid ${color}`;
-        element.style.outlineOffset = "-1px";
+        const el = element;
+        const originalOutline = el.style.outline;
+        const originalOutlineOffset = el.style.outlineOffset;
+        el.style.outline = `3px solid ${color}`;
+        el.style.outlineOffset = "-1px";
         const badge = createBadge(index, color, element, componentFinder);
         badges.set(element, badge);
         selectedElements.set(element, {
           color,
-          originalOutline: element.style.outline,
-          originalOutlineOffset: element.style.outlineOffset,
+          originalOutline,
+          originalOutlineOffset,
           index
         });
       },
@@ -6584,11 +6588,10 @@
         const elementData = selectedElements.get(element);
         if (elementData) {
           ;
-          element.style.outline = "";
-          element.style.outlineOffset = "";
+          element.style.outline = elementData.originalOutline;
+          element.style.outlineOffset = elementData.originalOutlineOffset;
           const badge = badges.get(element);
           if (badge) {
-            ;
             badge._cleanup?.();
             badge.remove();
             badges.delete(element);
@@ -6598,13 +6601,12 @@
         }
       },
       clearAllSelections() {
-        selectedElements.forEach((_2, element) => {
+        selectedElements.forEach((data, element) => {
           ;
-          element.style.outline = "";
-          element.style.outlineOffset = "";
+          element.style.outline = data.originalOutline;
+          element.style.outlineOffset = data.originalOutlineOffset;
         });
         badges.forEach((badge) => {
-          ;
           badge._cleanup?.();
           badge.remove();
         });
@@ -6700,7 +6702,8 @@
   }
 
   // src/annotator/inspection.ts
-  function createInspectionManager(onElementSelect, shouldIgnoreElement, isElementSelected) {
+  function createInspectionManager(callbacks = {}) {
+    const { onElementSelect, shouldIgnoreElement, isElementSelected, onEscape, onCopy } = callbacks;
     let isInspecting = false;
     let currentHoveredElement = null;
     let inspectionStyleElement = null;
@@ -6709,8 +6712,15 @@
       inspectionStyleElement.id = "annotator-toolbar-styles";
       inspectionStyleElement.textContent = `
       * {
+        pointer-events: none !important;
         cursor: crosshair !important;
       }
+      annotator-toolbar, annotator-toolbar *,
+      .annotator-badge, .annotator-badge *,
+      .annotator-ignore {
+        pointer-events: auto !important;
+        cursor: default !important;
+      }
     `;
       document.head.appendChild(inspectionStyleElement);
     }
@@ -6730,29 +6740,36 @@
         currentHoveredElement = null;
       }
     }
-    function handleMouseOver(e5) {
-      const target = e5.target;
-      if (shouldIgnoreElement?.(target)) return;
+    function getElementAtPoint(x2, y3) {
+      if (inspectionStyleElement) {
+        inspectionStyleElement.disabled = true;
+      }
+      const element = document.elementFromPoint(x2, y3);
+      if (inspectionStyleElement) {
+        inspectionStyleElement.disabled = false;
+      }
+      return element;
+    }
+    function handleMouseMove(e5) {
+      const target = getElementAtPoint(e5.clientX, e5.clientY);
+      if (!target || shouldIgnoreElement?.(target)) {
+        removeHoverHighlight();
+        return;
+      }
+      if (target === currentHoveredElement) return;
       removeHoverHighlight();
       target.style.outline = "3px solid #3B82F6";
       target.style.outlineOffset = "-1px";
       currentHoveredElement = target;
     }
-    function handleMouseOut(e5) {
-      const target = e5.target;
-      if (shouldIgnoreElement?.(target)) return;
-      if (!isElementSelected?.(target)) {
-        ;
-        target.style.outline = "";
-        target.style.outlineOffset = "";
-      }
-    }
-    function handleElementClick(e5) {
-      const target = e5.target;
-      if (shouldIgnoreElement?.(target)) return;
+    function handleClick(e5) {
+      const clickedElement = e5.target;
+      if (shouldIgnoreElement?.(clickedElement)) return;
       e5.preventDefault();
       e5.stopPropagation();
       e5.stopImmediatePropagation();
+      const target = getElementAtPoint(e5.clientX, e5.clientY);
+      if (!target || shouldIgnoreElement?.(target)) return;
       onElementSelect?.(target);
     }
     function preventMouseEvents(e5) {
@@ -6762,30 +6779,44 @@
       e5.stopPropagation();
       e5.stopImmediatePropagation();
     }
+    function handleKeyDown(e5) {
+      if (e5.key === "Escape") {
+        e5.preventDefault();
+        onEscape?.();
+        return;
+      }
+      if ((e5.metaKey || e5.ctrlKey) && e5.key === "c") {
+        const selection = window.getSelection();
+        if (!selection || selection.isCollapsed) {
+          e5.preventDefault();
+          onCopy?.();
+        }
+      }
+    }
     return {
       enterInspectionMode() {
         if (isInspecting) return;
         isInspecting = true;
         addInspectionStyles();
-        document.addEventListener("mouseover", handleMouseOver, true);
-        document.addEventListener("mouseout", handleMouseOut, true);
-        document.addEventListener("click", handleElementClick, true);
+        document.addEventListener("mousemove", handleMouseMove, true);
+        document.addEventListener("click", handleClick, true);
         document.addEventListener("mousedown", preventMouseEvents, true);
         document.addEventListener("mouseup", preventMouseEvents, true);
         document.addEventListener("dblclick", preventMouseEvents, true);
         document.addEventListener("contextmenu", preventMouseEvents, true);
+        document.addEventListener("keydown", handleKeyDown);
       },
       exitInspectionMode() {
         if (!isInspecting) return;
         isInspecting = false;
         removeInspectionStyles();
-        document.removeEventListener("mouseover", handleMouseOver, true);
-        document.removeEventListener("mouseout", handleMouseOut, true);
-        document.removeEventListener("click", handleElementClick, true);
+        document.removeEventListener("mousemove", handleMouseMove, true);
+        document.removeEventListener("click", handleClick, true);
         document.removeEventListener("mousedown", preventMouseEvents, true);
         document.removeEventListener("mouseup", preventMouseEvents, true);
         document.removeEventListener("dblclick", preventMouseEvents, true);
         document.removeEventListener("contextmenu", preventMouseEvents, true);
+        document.removeEventListener("keydown", handleKeyDown);
         removeHoverHighlight();
       },
       isInInspectionMode() {
@@ -6795,13 +6826,13 @@
         if (isInspecting) {
           isInspecting = false;
           removeInspectionStyles();
-          document.removeEventListener("mouseover", handleMouseOver, true);
-          document.removeEventListener("mouseout", handleMouseOut, true);
-          document.removeEventListener("click", handleElementClick, true);
+          document.removeEventListener("mousemove", handleMouseMove, true);
+          document.removeEventListener("click", handleClick, true);
           document.removeEventListener("mousedown", preventMouseEvents, true);
           document.removeEventListener("mouseup", preventMouseEvents, true);
           document.removeEventListener("dblclick", preventMouseEvents, true);
           document.removeEventListener("contextmenu", preventMouseEvents, true);
+          document.removeEventListener("keydown", handleKeyDown);
           removeHoverHighlight();
         }
       }
@@ -6828,14 +6859,15 @@
     const logger = createLogger(verbose);
     try {
       let componentInfo = getVueComponentInfo(element);
+      const el = element;
       if (componentInfo) {
         logger.log("\u{1F7E2} Vue component found:", componentInfo);
       } else {
         logger.log("\u{1F50D} No Vue component found for element:", element.tagName, "Checking properties:", {
-          __vnode: !!element.__vnode,
-          __vueParentComponent: !!element.__vueParentComponent,
-          __vue__: !!element.__vue__,
-          __v_inspector: !!element.__v_inspector
+          __vnode: !!el.__vnode,
+          __vueParentComponent: !!el.__vueParentComponent,
+          __vue__: !!el.__vue__,
+          __v_inspector: !!el.__v_inspector
         });
       }
       if (!componentInfo) {
@@ -6877,14 +6909,14 @@
   }
   function getReactComponentInfo(element) {
     if (!element) return null;
-    const elementAny = element;
-    const fiberKey = Object.keys(elementAny).find(
+    const el = element;
+    const fiberKey = Object.keys(el).find(
       (key) => key.startsWith("__reactFiber") || key.startsWith("__reactInternalInstance") || key.startsWith("_reactInternalFiber")
     );
     if (!fiberKey) {
       return null;
     }
-    const fiber = elementAny[fiberKey];
+    const fiber = el[fiberKey];
     if (!fiber) {
       return null;
     }
@@ -6902,18 +6934,18 @@
     let componentName = "";
     let componentFile = "";
     while (currentFiber) {
-      if (currentFiber.type && typeof currentFiber.type === "function") {
-        componentName = currentFiber.type.name || currentFiber.type.displayName || "Anonymous";
-        if (currentFiber.type.__source) {
-          componentFile = currentFiber.type.__source.fileName || "";
+      const fiberType = currentFiber.type;
+      if (fiberType && typeof fiberType === "object") {
+        componentName = fiberType.name || fiberType.displayName || "Anonymous";
+        if (fiberType.__source) {
+          componentFile = fiberType.__source.fileName || "";
+        }
+        if (fiberType.prototype?.render) {
+          componentName = fiberType.name || "Component";
         }
         break;
       }
-      if (currentFiber.type && currentFiber.type.prototype && currentFiber.type.prototype.render) {
-        componentName = currentFiber.type.name || "Component";
-        break;
-      }
-      currentFiber = currentFiber.return || currentFiber._debugOwner;
+      currentFiber = currentFiber.return ?? currentFiber._debugOwner;
     }
     if (!componentName && !componentFile) {
       return null;
@@ -6958,13 +6990,14 @@
       const parts2 = [];
       let currentFiber = fiber;
       while (currentFiber && parts2.length < 3) {
-        if (currentFiber.type && typeof currentFiber.type === "function") {
-          const name = currentFiber.type.name || currentFiber.type.displayName;
+        const fiberType = currentFiber.type;
+        if (fiberType && typeof fiberType === "object") {
+          const name = fiberType.name || fiberType.displayName;
           if (name && name !== "Fragment") {
             parts2.unshift(name);
           }
-        } else if (currentFiber.type && typeof currentFiber.type === "string") {
-          parts2.push(currentFiber.type);
+        } else if (fiberType && typeof fiberType === "string") {
+          parts2.push(fiberType);
         }
         currentFiber = currentFiber.return;
       }
@@ -6982,11 +7015,13 @@
   function extractReactSourceMap(fiber) {
     try {
       if (fiber._debugSource) {
+        const fiberType = fiber.type;
+        const typeName = fiberType && typeof fiberType === "object" ? fiberType.name || fiberType.displayName : void 0;
         return {
           originalLine: fiber._debugSource.lineNumber || 0,
           originalColumn: fiber._debugSource.columnNumber || 0,
           originalSource: fiber._debugSource.fileName || "",
-          originalName: fiber.type?.name || fiber.type?.displayName
+          originalName: typeName
         };
       }
       return null;
@@ -7007,26 +7042,26 @@
   }
   function getVueComponentInfo(element) {
     if (!element) return null;
-    const elementAny = element;
-    let codeLocation = elementAny.__vnode?.props?.__v_inspector;
+    const el = element;
+    let codeLocation = el.__vnode?.props?.__v_inspector;
     let vueInstance = null;
     let vnode = null;
     if (!codeLocation) {
-      codeLocation = elementAny.__vueParentComponent?.vnode?.props?.__v_inspector;
-      vueInstance = elementAny.__vueParentComponent;
-      vnode = elementAny.__vueParentComponent?.vnode;
+      codeLocation = el.__vueParentComponent?.vnode?.props?.__v_inspector;
+      vueInstance = el.__vueParentComponent ?? null;
+      vnode = el.__vueParentComponent?.vnode ?? null;
     }
     if (!codeLocation) {
-      codeLocation = elementAny.__v_inspector;
+      codeLocation = el.__v_inspector;
     }
     if (!codeLocation) {
-      vueInstance = elementAny.__vue__ || elementAny.__vueParentComponent;
+      vueInstance = el.__vue__ ?? el.__vueParentComponent ?? null;
       if (vueInstance) {
         codeLocation = vueInstance.__v_inspector || vueInstance.$options?.__v_inspector || vueInstance.type?.__v_inspector;
       }
     }
     if (!codeLocation && !vnode) {
-      vnode = elementAny.__vnode || elementAny.$vnode;
+      vnode = el.__vnode ?? el.$vnode ?? null;
       if (vnode) {
         codeLocation = vnode.__v_inspector || vnode.props?.__v_inspector || vnode.componentOptions?.__v_inspector;
       }
@@ -7287,6 +7322,7 @@
   }
 
   // src/annotator-toolbar.ts
+  var CONSOLE_METHODS = ["log", "info", "warn", "error", "debug"];
   var AnnotatorToolbar = class extends i4 {
     constructor() {
       super(...arguments);
@@ -7297,7 +7333,9 @@
       this.selectionCount = 0;
       this.isInspecting = false;
       this.commentPopover = { visible: false, element: null, comment: "" };
+      this.toastMessage = "";
       this.popoverCleanup = null;
+      this.toastTimeout = null;
       this.socket = null;
       this.rpc = null;
       this.selectionManager = null;
@@ -7329,24 +7367,27 @@
       this.selectionManager.setOnEditClick((element) => {
         this.showCommentPopoverForElement(element);
       });
-      this.inspectionManager = createInspectionManager(
-        (element) => this.handleElementSelected(element),
-        (element) => this.shouldIgnoreElement(element),
-        (element) => this.selectionManager?.hasElement(element) || false
-      );
+      this.inspectionManager = createInspectionManager({
+        onElementSelect: (element) => this.handleElementSelected(element),
+        shouldIgnoreElement: (element) => this.shouldIgnoreElement(element),
+        isElementSelected: (element) => this.selectionManager?.hasElement(element) || false,
+        onEscape: () => this.exitInspectingMode(),
+        onCopy: () => this.copySelectedElements()
+      });
     }
     initializeConsoleCapture() {
-      const methods = ["log", "info", "warn", "error", "debug"];
-      methods.forEach((method) => {
+      CONSOLE_METHODS.forEach((method) => {
         this.originalConsoleMethods[method] = console[method].bind(console);
         console[method] = (...args) => {
+          const MAX_ARG_LENGTH = 1e4;
           this.consoleBuffer.push({
             type: method,
             args: args.map((arg) => {
               try {
-                return typeof arg === "object" ? JSON.stringify(arg) : String(arg);
+                const str = typeof arg === "object" ? JSON.stringify(arg) : String(arg);
+                return str.length > MAX_ARG_LENGTH ? str.slice(0, MAX_ARG_LENGTH) + "...[truncated]" : str;
               } catch {
-                return String(arg);
+                return "[circular or unserializable]";
               }
             }),
             timestamp: Date.now()
@@ -7359,8 +7400,7 @@
       });
     }
     restoreConsoleMethods() {
-      const methods = ["log", "info", "warn", "error", "debug"];
-      methods.forEach((method) => {
+      CONSOLE_METHODS.forEach((method) => {
         if (this.originalConsoleMethods[method]) {
           console[method] = this.originalConsoleMethods[method];
         }
@@ -7431,9 +7471,8 @@
       );
       const addComments = (items, selectedElements) => {
         for (const item of items) {
-          for (const [element] of selectedElements) {
-            const info = selectedElements.get(element);
-            if (info?.index === item.index) {
+          for (const [element, info] of selectedElements) {
+            if (info.index === item.index) {
               const comment = this.elementComments.get(element);
               if (comment) {
                 item.comment = comment;
@@ -7536,7 +7575,7 @@
     injectCSS(css) {
       try {
         const style = document.createElement("style");
-        style.setAttribute("data-injected-by", "instantcode");
+        style.setAttribute("data-injected-by", "ai-annotator");
         style.textContent = css;
         document.head.appendChild(style);
         return { success: true };
@@ -7613,14 +7652,17 @@
       document.addEventListener("keydown", this.handlePopoverKeydown);
       this.updateComplete.then(() => {
         const popoverEl = this.shadowRoot?.querySelector(".popover");
+        const inputEl = this.shadowRoot?.querySelector(".popover-input");
         if (!popoverEl || !element) return;
+        inputEl?.focus();
         this.popoverCleanup = autoUpdate(element, popoverEl, () => {
           computePosition2(element, popoverEl, {
-            placement: "bottom",
+            strategy: "fixed",
+            placement: "bottom-start",
             middleware: [
-              offset2(10),
-              flip2({ fallbackPlacements: ["top", "right", "left"] }),
-              shift2({ padding: 10 })
+              offset2(8),
+              flip2({ fallbackPlacements: ["top-start", "bottom-end", "top-end", "right", "left"] }),
+              shift2({ padding: 8 })
             ]
           }).then(({ x: x2, y: y3 }) => {
             Object.assign(popoverEl.style, {
@@ -7631,6 +7673,16 @@
         });
       });
     }
+    handlePopoverInputKeydown(e5) {
+      if (e5.key === "Enter") {
+        e5.preventDefault();
+        this.hideCommentPopover();
+      } else if (e5.key === "Escape") {
+        e5.preventDefault();
+        e5.stopPropagation();
+        this.hideCommentPopover();
+      }
+    }
     hideCommentPopover() {
       document.removeEventListener("keydown", this.handlePopoverKeydown);
       if (this.popoverCleanup) {
@@ -7656,9 +7708,20 @@
       }
     }
     shouldIgnoreElement(element) {
-      if (element.closest("annotator-toolbar")) return true;
-      if (element.classList.contains("annotator-badge")) return true;
-      if (element.classList.contains("annotator-ignore")) return true;
+      let current = element;
+      while (current) {
+        if (current instanceof Element) {
+          if (current.tagName.toLowerCase() === "annotator-toolbar") return true;
+          if (current.classList.contains("annotator-badge")) return true;
+          if (current.classList.contains("annotator-ignore")) return true;
+        }
+        const parent = current.parentNode;
+        if (parent instanceof ShadowRoot) {
+          current = parent.host;
+        } else {
+          current = parent;
+        }
+      }
       return false;
     }
     cleanup() {
@@ -7674,22 +7737,43 @@
     }
     log(...args) {
       if (this.verbose) {
-        console.log("[InstantCode]", ...args);
+        console.log("[AI Annotator]", ...args);
       }
     }
-    toggleInspect() {
+    exitInspectingMode() {
       if (this.isInspecting) {
         this.inspectionManager?.exitInspectionMode();
         this.isInspecting = false;
         if (this.commentPopover.visible) {
           this.hideCommentPopover();
         }
+      }
+    }
+    async copySelectedElements() {
+      const elements = this.getSelectedElements();
+      if (elements.length === 0) {
+        this.showToast("No elements selected");
+        return;
+      }
+      const text = JSON.stringify(elements, null, 2);
+      try {
+        await navigator.clipboard.writeText(text);
+        this.showToast(`Copied ${elements.length} element(s)`);
+      } catch (error) {
+        this.showToast("Failed to copy");
+        this.log("Failed to copy:", error);
+      }
+    }
+    toggleInspect() {
+      if (this.isInspecting) {
+        this.exitInspectingMode();
       } else {
         this.inspectionManager?.enterInspectionMode();
         this.isInspecting = true;
       }
     }
     handleClearClick() {
+      this.exitInspectingMode();
       this.clearSelection();
       if (this.socket?.connected) {
         this.socket.emit("selectionChanged", {
@@ -7719,13 +7803,44 @@
       <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() {
+      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" />
+    </svg>`;
+    }
+    showToast(message) {
+      if (this.toastTimeout) {
+        clearTimeout(this.toastTimeout);
+      }
+      this.toastMessage = message;
+      this.toastTimeout = setTimeout(() => {
+        this.toastMessage = "";
+      }, 2e3);
+    }
+    async copySessionId() {
+      this.exitInspectingMode();
+      if (!this.sessionId) {
+        this.showToast("No session ID");
+        return;
+      }
+      const text = `use annotator tool (session: ${this.sessionId}) to read my live feedback`;
+      try {
+        await navigator.clipboard.writeText(text);
+        this.showToast("Copied!");
+        this.log("Copied to clipboard:", text);
+      } catch (error) {
+        this.showToast("Failed to copy");
+        this.log("Failed to copy:", error);
+      }
+    }
     renderErrorIcon() {
       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="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
     </svg>`;
     }
     openHelpPage() {
-      window.open("https://instantcode.dev", "_blank");
+      this.exitInspectingMode();
+      window.open("https://ai-annotator.dev", "_blank");
     }
     render() {
       if (!this.connected) {
@@ -7733,18 +7848,13 @@
         <div class="toolbar">
           <div class="error-message">
             ${this.renderErrorIcon()}
-            <span>Cannot connect to InstantCode server</span>
+            <span>Cannot connect to AI Annotator server</span>
           </div>
         </div>
       `;
       }
       return x`
       <div class="toolbar">
-        ${this.selectionCount > 0 ? x`
-          <span class="selection-badge">${this.selectionCount}</span>
-          <div class="divider"></div>
-        ` : ""}
-
         <button
           class="toolbar-btn ${this.isInspecting ? "active" : ""}"
           @click=${this.toggleInspect}
@@ -7753,17 +7863,28 @@
           ${this.renderCursorIcon()}
         </button>
 
+        <div class="btn-with-badge">
+          <button
+            class="toolbar-btn"
+            @click=${this.handleClearClick}
+            title="Clear all selections"
+            ?disabled=${this.selectionCount === 0}
+          >
+            ${this.renderTrashIcon()}
+          </button>
+          ${this.selectionCount > 0 ? x`<span class="badge">${this.selectionCount}</span>` : ""}
+        </div>
+
+        <div class="divider"></div>
+
         <button
           class="toolbar-btn"
-          @click=${this.handleClearClick}
-          title="Clear all selections"
-          ?disabled=${this.selectionCount === 0}
+          @click=${this.copySessionId}
+          title="Copy session ID"
         >
-          ${this.renderTrashIcon()}
+          ${this.renderClipboardIcon()}
         </button>
 
-        <div class="divider"></div>
-
         <button
           class="toolbar-btn"
           @click=${this.openHelpPage}
@@ -7771,27 +7892,27 @@
         >
           ${this.renderHelpIcon()}
         </button>
+
+        ${this.toastMessage ? x`<div class="toast">${this.toastMessage}</div>` : ""}
       </div>
 
       ${this.commentPopover.visible ? x`
         <div class="popover">
-          <div class="popover-header">
-            <div class="popover-title">
-              ${this.elementComments.has(this.commentPopover.element) ? "Edit Comment" : "Add Comment"}
-              <span class="tag">${this.commentPopover.element?.tagName?.toLowerCase() || "element"}</span>
-            </div>
-            <button class="popover-close" @click=${this.hideCommentPopover}>
-              ${this.renderCloseIcon()}
-            </button>
-          </div>
-          <textarea
-            class="popover-textarea"
-            placeholder="Describe what you want to change about this element..."
+          <input
+            type="text"
+            class="popover-input"
+            placeholder="Add a note..."
             .value=${this.commentPopover.comment}
             @input=${this.handlePopoverInput}
-          ></textarea>
+            @keydown=${this.handlePopoverInputKeydown}
+          />
           <div class="popover-actions">
-            <button class="popover-btn popover-btn-danger" @click=${this.removeSelectedElement}>Remove</button>
+            <button class="popover-btn danger" @click=${this.removeSelectedElement} title="Remove selection">
+              ${this.renderTrashIcon()}
+            </button>
+            <button class="popover-btn" @click=${this.hideCommentPopover} title="Close (Esc)">
+              ${this.renderCloseIcon()}
+            </button>
           </div>
         </div>
       ` : ""}
@@ -7808,6 +7929,7 @@
     }
 
     .toolbar {
+      position: relative;
       display: flex;
       align-items: center;
       gap: 4px;
@@ -7862,13 +7984,26 @@
       margin: 0 4px;
     }
 
-    .selection-badge {
+    .btn-with-badge {
+      position: relative;
+    }
+
+    .badge {
+      position: absolute;
+      top: -4px;
+      right: -4px;
+      min-width: 16px;
+      height: 16px;
+      padding: 0 4px;
       background: #3b82f6;
-      padding: 2px 8px;
-      border-radius: 10px;
-      font-size: 11px;
+      border-radius: 8px;
+      font-size: 10px;
       font-weight: 600;
       color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      pointer-events: none;
     }
 
     .error-message {
@@ -7886,117 +8021,113 @@
       flex-shrink: 0;
     }
 
-    /* Popover styles */
+    /* Minimal Popover */
     .popover {
       position: fixed;
       top: 0;
       left: 0;
       z-index: 1000000;
-      background: white;
-      border-radius: 10px;
-      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
-      padding: 12px;
-      min-width: 280px;
-      max-width: 350px;
-    }
-
-    .popover-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-bottom: 10px;
-      padding-bottom: 8px;
-      border-bottom: 1px solid #eee;
-    }
-
-    .popover-title {
-      font-size: 13px;
-      font-weight: 600;
-      color: #333;
       display: flex;
-      align-items: center;
-      gap: 6px;
+      align-items: stretch;
+      background: #1a1a1a;
+      border-radius: 8px;
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
+      overflow: hidden;
+      animation: popover-in 0.15s ease-out;
     }
 
-    .popover-title .tag {
-      background: #f0f0f0;
-      padding: 2px 6px;
-      border-radius: 4px;
-      font-size: 11px;
-      color: #666;
-      font-weight: 500;
+    @keyframes popover-in {
+      from {
+        opacity: 0;
+        transform: scale(0.95) translateY(-4px);
+      }
+      to {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+      }
     }
 
-    .popover-close {
-      background: none;
+    .popover-input {
+      flex: 1;
+      min-width: 180px;
+      max-width: 260px;
+      padding: 10px 12px;
       border: none;
-      color: #999;
-      cursor: pointer;
-      padding: 4px;
-      border-radius: 4px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .popover-close:hover {
-      background: #f0f0f0;
-      color: #333;
-    }
-
-    .popover-close svg {
-      width: 16px;
-      height: 16px;
-    }
-
-    .popover-textarea {
-      width: 100%;
-      min-height: 80px;
-      border: 1px solid #ddd;
-      border-radius: 6px;
-      padding: 10px;
+      background: transparent;
+      color: #fff;
       font-size: 13px;
       font-family: inherit;
-      resize: vertical;
-      box-sizing: border-box;
+      outline: none;
     }
 
-    .popover-textarea:focus {
-      outline: none;
-      border-color: #3b82f6;
-      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
+    .popover-input::placeholder {
+      color: #555;
     }
 
     .popover-actions {
       display: flex;
       align-items: center;
-      gap: 8px;
-      margin-top: 10px;
+      border-left: 1px solid rgba(255, 255, 255, 0.06);
     }
 
     .popover-btn {
-      padding: 6px 14px;
-      border-radius: 6px;
-      font-size: 12px;
-      font-weight: 500;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 36px;
+      height: 100%;
+      border: none;
+      background: transparent;
+      color: #666;
       cursor: pointer;
-      transition: all 0.15s ease;
+      transition: all 0.12s ease;
     }
 
-    .popover-btn-danger {
-      background: transparent;
-      border: 1px solid #ef4444;
-      color: #ef4444;
+    .popover-btn:hover {
+      background: rgba(255, 255, 255, 0.06);
+      color: #fff;
     }
 
-    .popover-btn-danger:hover {
-      background: #ef4444;
-      color: white;
+    .popover-btn.danger:hover {
+      background: rgba(239, 68, 68, 0.15);
+      color: #f87171;
+    }
+
+    .popover-btn svg {
+      width: 14px;
+      height: 14px;
     }
 
     .hidden {
       display: none;
     }
+
+    /* Toast */
+    .toast {
+      position: absolute;
+      bottom: 100%;
+      right: 0;
+      margin-bottom: 8px;
+      padding: 8px 12px;
+      background: rgba(0, 0, 0, 0.9);
+      border-radius: 6px;
+      font-size: 12px;
+      color: #10b981;
+      white-space: nowrap;
+      animation: toast-in 0.2s ease-out;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    }
+
+    @keyframes toast-in {
+      from {
+        opacity: 0;
+        transform: translateY(4px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
   `;
   __decorateClass([
     n4({ attribute: "ws-endpoint" })
@@ -8019,6 +8150,9 @@
   __decorateClass([
     r5()
   ], AnnotatorToolbar.prototype, "commentPopover", 2);
+  __decorateClass([
+    r5()
+  ], AnnotatorToolbar.prototype, "toastMessage", 2);
   AnnotatorToolbar = __decorateClass([
     t3("annotator-toolbar")
   ], AnnotatorToolbar);