ui-agent-annotation 0.1.4

package/dist/cjs/index.cjs

@@ -0,0 +1,1783 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  AgentAnnotationProvider: () => AgentAnnotationProvider2,
+  AnnotationInput: () => AnnotationInput,
+  AnnotationList: () => AnnotationList,
+  Draggable: () => Draggable,
+  ErrorBoundary: () => ErrorBoundary,
+  Highlighter: () => Highlighter,
+  Toolbar: () => Toolbar,
+  captureScreenshot: () => captureScreenshot,
+  getComponentDisplayName: () => getComponentDisplayName,
+  getElementFromFiber: () => getElementFromFiber,
+  getPlatform: () => getPlatform,
+  getReactFiber: () => getReactFiber,
+  isNative: () => isNative,
+  isTauriEnv: () => isTauriEnv2,
+  isWeb: () => isWeb,
+  useAgentAnnotation: () => useAgentAnnotation
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/store.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var initialState = {
+  mode: "disabled",
+  annotations: [],
+  hoveredElement: null,
+  hoveredComponentInfo: null,
+  isMinimized: false,
+  showList: false
+};
+var AnnotationContext = (0, import_react.createContext)(void 0);
+function reducer(state, action) {
+  switch (action.type) {
+    case "SET_MODE":
+      return { ...state, mode: action.payload };
+    case "ADD_ANNOTATION":
+      return { ...state, annotations: [...state.annotations, action.payload] };
+    case "REMOVE_ANNOTATION":
+      return {
+        ...state,
+        annotations: state.annotations.filter((a) => a.id !== action.payload)
+      };
+    case "CLEAR_ALL_ANNOTATIONS":
+      return {
+        ...state,
+        annotations: []
+      };
+    case "SET_HOVERED":
+      if (state.hoveredElement === action.payload.element) return state;
+      return {
+        ...state,
+        hoveredElement: action.payload.element,
+        hoveredComponentInfo: action.payload.name ? { name: action.payload.name, details: action.payload.details } : null
+      };
+    case "RESET_HOVER":
+      return { ...state, hoveredElement: null, hoveredComponentInfo: null };
+    case "TOGGLE_MINIMIZED":
+      return { ...state, isMinimized: !state.isMinimized };
+    case "TOGGLE_LIST":
+      return { ...state, showList: !state.showList };
+    default:
+      return state;
+  }
+}
+function AgentAnnotationProvider({ children }) {
+  const [state, dispatch] = (0, import_react.useReducer)(reducer, initialState);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AnnotationContext.Provider, { value: { state, dispatch }, children });
+}
+function useAgentAnnotation() {
+  const context = (0, import_react.useContext)(AnnotationContext);
+  if (!context) {
+    throw new Error("useAgentAnnotation must be used within an AgentAnnotationProvider");
+  }
+  return context;
+}
+
+// src/components/Toolbar.tsx
+var import_react6 = require("react");
+
+// src/components/Draggable.tsx
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Draggable({ children, initialPos = { x: 20, y: 20 } }) {
+  const [pos, setPos] = (0, import_react2.useState)(initialPos);
+  const [dragging, setDragging] = (0, import_react2.useState)(false);
+  const [rel, setRel] = (0, import_react2.useState)({ x: 0, y: 0 });
+  const nodeRef = (0, import_react2.useRef)(null);
+  const onMouseDown = (e) => {
+    if (e.button !== 0) return;
+    const node = nodeRef.current;
+    if (!node) return;
+    const rect = node.getBoundingClientRect();
+    setDragging(true);
+    setRel({
+      x: e.pageX - rect.left - window.scrollX,
+      y: e.pageY - rect.top - window.scrollY
+    });
+    e.preventDefault();
+  };
+  const onMouseMove = (e) => {
+    if (!dragging) return;
+    setPos({
+      x: e.pageX - rel.x,
+      y: e.pageY - rel.y
+    });
+    e.preventDefault();
+  };
+  const onMouseUp = () => {
+    setDragging(false);
+  };
+  (0, import_react2.useEffect)(() => {
+    if (dragging) {
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+    } else {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    }
+    return () => {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    };
+  }, [dragging]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      ref: nodeRef,
+      style: {
+        position: "fixed",
+        left: pos.x,
+        top: pos.y,
+        zIndex: 9999,
+        cursor: dragging ? "grabbing" : "grab"
+      },
+      onMouseDown,
+      children
+    }
+  );
+}
+
+// src/components/Toolbar.tsx
+var import_lucide_react3 = require("lucide-react");
+
+// src/components/Highlighter.tsx
+var import_react4 = require("react");
+
+// src/components/AnnotationInput.tsx
+var import_react3 = require("react");
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function formatComponentDetails(details) {
+  const lines = [];
+  lines.push("## Element");
+  let elementStr = `<${details.elementInfo.tagName}`;
+  if (details.elementInfo.id) elementStr += ` id="${details.elementInfo.id}"`;
+  if (details.elementInfo.className) elementStr += ` class="${details.elementInfo.className}"`;
+  elementStr += ">";
+  lines.push(elementStr);
+  if (details.elementInfo.textContent) {
+    lines.push(`Text: "${details.elementInfo.textContent}"`);
+  }
+  lines.push(`Child elements: ${details.elementInfo.childElementCount}`);
+  if (Object.keys(details.elementInfo.attributes).length > 0) {
+    lines.push("");
+    lines.push("## Attributes");
+    for (const [key, value] of Object.entries(details.elementInfo.attributes)) {
+      lines.push(`${key}="${value}"`);
+    }
+  }
+  if (details.parentHierarchy.length > 0) {
+    lines.push("");
+    lines.push("## Parent Components");
+    lines.push(details.parentHierarchy.join(" \u2192 "));
+  }
+  if (details.childComponents.length > 0) {
+    lines.push("");
+    lines.push(`## Child Components (${details.childComponents.length})`);
+    const childLines = details.childComponents.slice(0, 15).map((child) => {
+      let str = child.name;
+      if (child.count > 1) str += ` \xD7${child.count}`;
+      if (child.hasChildren) str += " (has children)";
+      return str;
+    });
+    lines.push(childLines.join(", "));
+    if (details.childComponents.length > 15) {
+      lines.push(`... and ${details.childComponents.length - 15} more`);
+    }
+  }
+  return lines.join("\n");
+}
+function AnnotationInput({ onClose, componentName, componentDetails }) {
+  const { dispatch } = useAgentAnnotation();
+  const [note, setNote] = (0, import_react3.useState)("");
+  const [includeDetails, setIncludeDetails] = (0, import_react3.useState)(true);
+  const [isVisible, setIsVisible] = (0, import_react3.useState)(false);
+  const [isClosing, setIsClosing] = (0, import_react3.useState)(false);
+  (0, import_react3.useEffect)(() => {
+    requestAnimationFrame(() => {
+      setIsVisible(true);
+    });
+  }, []);
+  (0, import_react3.useEffect)(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        handleClose();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, []);
+  const handleClose = () => {
+    setIsClosing(true);
+    setTimeout(() => {
+      onClose();
+    }, 200);
+  };
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!note.trim()) return;
+    let finalNote = note.trim();
+    if (includeDetails && componentDetails) {
+      const detailsText = formatComponentDetails(componentDetails);
+      finalNote = `${note.trim()}
+
+---
+${detailsText}`;
+    }
+    dispatch({
+      type: "ADD_ANNOTATION",
+      payload: {
+        id: Date.now().toString(),
+        componentName,
+        note: finalNote,
+        timestamp: Date.now(),
+        details: componentDetails
+      }
+    });
+    handleClose();
+  };
+  const detailsPreview = componentDetails ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: {
+    fontSize: "0.75rem",
+    color: "rgba(255, 255, 255, 0.6)",
+    marginTop: "4px"
+  }, children: [
+    componentDetails.parentHierarchy.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+      "Parents: ",
+      componentDetails.parentHierarchy.slice(0, 3).join(" \u2192 "),
+      componentDetails.parentHierarchy.length > 3 ? "..." : ""
+    ] }),
+    componentDetails.childComponents.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+      "Children: ",
+      componentDetails.childComponents.slice(0, 3).map((c) => c.name).join(", "),
+      componentDetails.childComponents.length > 3 ? "..." : ""
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+      "Element: <",
+      componentDetails.elementInfo.tagName,
+      "> (",
+      componentDetails.elementInfo.childElementCount,
+      " children)"
+    ] })
+  ] }) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: isVisible && !isClosing ? "rgba(0,0,0,0.5)" : "rgba(0,0,0,0)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 1e4,
+        transition: "background-color 0.2s ease"
+      },
+      "data-ai-annotation-ui": true,
+      onClick: handleClose,
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "div",
+        {
+          style: {
+            backgroundColor: "#1e1e1e",
+            color: "#e5e7eb",
+            padding: "20px",
+            borderRadius: "8px",
+            width: "500px",
+            maxWidth: "90%",
+            maxHeight: "80vh",
+            overflow: "auto",
+            boxShadow: "0 4px 6px rgba(0,0,0,0.3)",
+            transform: isVisible && !isClosing ? "scale(1) translateY(0)" : "scale(0.95) translateY(-10px)",
+            opacity: isVisible && !isClosing ? 1 : 0,
+            transition: "transform 0.2s ease, opacity 0.2s ease"
+          },
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: "16px" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { style: { margin: 0, fontSize: "1.1rem" }, children: "Add Annotation" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { onClick: handleClose, style: { background: "none", border: "none", color: "inherit", cursor: "pointer" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.X, { size: 20 }) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "12px", fontSize: "0.9rem", opacity: 0.8 }, children: [
+              "Component: ",
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: componentName })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("form", { onSubmit: handleSubmit, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "textarea",
+                {
+                  value: note,
+                  onChange: (e) => setNote(e.target.value),
+                  placeholder: "Describe what this component does or what changes you need...",
+                  style: {
+                    width: "100%",
+                    height: "120px",
+                    padding: "8px",
+                    borderRadius: "4px",
+                    backgroundColor: "#2d2d2d",
+                    border: "1px solid #404040",
+                    color: "white",
+                    marginBottom: "12px",
+                    resize: "vertical",
+                    fontFamily: "inherit"
+                  },
+                  autoFocus: true
+                }
+              ),
+              componentDetails && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { marginBottom: "16px" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                "label",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "flex-start",
+                    gap: "8px",
+                    cursor: "pointer",
+                    fontSize: "0.85rem"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      "input",
+                      {
+                        type: "checkbox",
+                        checked: includeDetails,
+                        onChange: (e) => setIncludeDetails(e.target.checked),
+                        style: { marginTop: "2px" }
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { color: "#10b981", fontWeight: 500 }, children: "Include component details in annotation" }),
+                      includeDetails && detailsPreview
+                    ] })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", justifyContent: "flex-end", gap: "8px" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handleClose,
+                    style: {
+                      padding: "6px 12px",
+                      borderRadius: "4px",
+                      backgroundColor: "transparent",
+                      border: "1px solid #404040",
+                      color: "white",
+                      cursor: "pointer"
+                    },
+                    children: "Cancel"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "button",
+                  {
+                    type: "submit",
+                    style: {
+                      padding: "6px 12px",
+                      borderRadius: "4px",
+                      backgroundColor: "#3b82f6",
+                      border: "none",
+                      color: "white",
+                      cursor: "pointer"
+                    },
+                    children: "Save Annotation"
+                  }
+                )
+              ] })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/utils/screenshot.ts
+var import_html2canvas = __toESM(require("html2canvas"));
+function isTauriEnv() {
+  return typeof window !== "undefined" && "__TAURI_INTERNALS__" in window;
+}
+async function copyToClipboardTauri(blob) {
+  if (typeof window.__TAURI_CLIPBOARD_WRITE_IMAGE__ === "function") {
+    const arrayBuffer = await blob.arrayBuffer();
+    const bytes = new Uint8Array(arrayBuffer);
+    await window.__TAURI_CLIPBOARD_WRITE_IMAGE__(bytes);
+    return;
+  }
+  throw new Error("Tauri clipboard function not available");
+}
+async function copyToClipboardBrowser(blob, dataUrl) {
+  try {
+    await navigator.clipboard.write([
+      new ClipboardItem({
+        "image/png": blob
+      })
+    ]);
+  } catch (clipboardError) {
+    console.warn("Failed to copy to clipboard:", clipboardError);
+    try {
+      await navigator.clipboard.writeText(dataUrl);
+    } catch {
+    }
+  }
+}
+async function captureScreenshot(element, options = {}) {
+  const {
+    scale = 2,
+    backgroundColor = null,
+    copyToClipboard = true,
+    download = false,
+    filename = "screenshot.png"
+  } = options;
+  try {
+    const canvas = await (0, import_html2canvas.default)(element, {
+      scale,
+      backgroundColor,
+      logging: false,
+      useCORS: true,
+      allowTaint: true,
+      // Capture just the element
+      x: window.scrollX,
+      y: window.scrollY,
+      scrollX: -window.scrollX,
+      scrollY: -window.scrollY,
+      windowWidth: document.documentElement.scrollWidth,
+      windowHeight: document.documentElement.scrollHeight,
+      // Ignore annotation UI elements
+      ignoreElements: (el) => {
+        return el.hasAttribute("data-ai-annotation-ui");
+      }
+    });
+    const blob = await new Promise((resolve, reject) => {
+      canvas.toBlob((b) => {
+        if (b) resolve(b);
+        else reject(new Error("Failed to create blob"));
+      }, "image/png");
+    });
+    const dataUrl = canvas.toDataURL("image/png");
+    if (copyToClipboard) {
+      if (isTauriEnv()) {
+        try {
+          await copyToClipboardTauri(blob);
+        } catch (tauriErr) {
+          console.warn("Tauri clipboard failed, falling back to browser API:", tauriErr);
+          await copyToClipboardBrowser(blob, dataUrl);
+        }
+      } else {
+        await copyToClipboardBrowser(blob, dataUrl);
+      }
+    }
+    if (download) {
+      const link = document.createElement("a");
+      link.href = dataUrl;
+      link.download = filename;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    }
+    return {
+      success: true,
+      dataUrl,
+      blob
+    };
+  } catch (error) {
+    const message = error instanceof Error ? error.message : "Unknown error";
+    console.error("Screenshot capture failed:", message);
+    return {
+      success: false,
+      error: message
+    };
+  }
+}
+
+// src/utils/fiber.ts
+function getReactFiber(dom) {
+  const key = Object.keys(dom).find(
+    (key2) => key2.startsWith("__reactFiber$")
+  );
+  return key ? dom[key] : null;
+}
+function getComponentDisplayName(fiber) {
+  let curr = fiber;
+  while (curr) {
+    const name = curr.type?.displayName || curr.type?.name;
+    if (name && typeof curr.type === "function") return name;
+    curr = curr.return;
+  }
+  return "Unknown";
+}
+function getElementFromFiber(fiber) {
+  let curr = fiber;
+  while (curr) {
+    if (curr.stateNode instanceof HTMLElement) {
+      return curr.stateNode;
+    }
+    curr = curr.child;
+  }
+  return null;
+}
+function getParentHierarchy(fiber, maxDepth = 10) {
+  const hierarchy = [];
+  let curr = fiber?.return;
+  let depth = 0;
+  while (curr && depth < maxDepth) {
+    const name = curr.type?.displayName || curr.type?.name;
+    if (name && typeof curr.type === "function") {
+      if (!name.includes("$") && !name.startsWith("_")) {
+        hierarchy.push(name);
+      }
+    }
+    curr = curr.return;
+    depth++;
+  }
+  return hierarchy;
+}
+function getChildComponents(fiber, maxDepth = 5) {
+  const children = /* @__PURE__ */ new Map();
+  function traverse(node, depth) {
+    if (!node || depth > maxDepth) return;
+    const name = node.type?.displayName || node.type?.name;
+    if (name && typeof node.type === "function" && !name.includes("$") && !name.startsWith("_")) {
+      const existing = children.get(name);
+      const hasChildComponents = checkHasChildComponents(node.child);
+      if (existing) {
+        existing.count++;
+        if (depth < existing.depth) {
+          existing.depth = depth;
+        }
+        existing.hasChildren = existing.hasChildren || hasChildComponents;
+      } else {
+        children.set(name, { count: 1, depth, hasChildren: hasChildComponents });
+      }
+    }
+    if (node.child) traverse(node.child, depth + 1);
+    if (node.sibling) traverse(node.sibling, depth);
+  }
+  if (fiber?.child) {
+    traverse(fiber.child, 1);
+  }
+  return Array.from(children.entries()).map(([name, info]) => ({
+    name,
+    depth: info.depth,
+    count: info.count,
+    hasChildren: info.hasChildren
+  })).sort((a, b) => a.depth - b.depth);
+}
+function checkHasChildComponents(fiber, maxDepth = 3) {
+  if (!fiber || maxDepth <= 0) return false;
+  const name = fiber.type?.displayName || fiber.type?.name;
+  if (name && typeof fiber.type === "function" && !name.includes("$")) {
+    return true;
+  }
+  if (fiber.child && checkHasChildComponents(fiber.child, maxDepth - 1)) return true;
+  if (fiber.sibling && checkHasChildComponents(fiber.sibling, maxDepth - 1)) return true;
+  return false;
+}
+function getElementInfo(element) {
+  const importantAttributes = ["data-testid", "role", "aria-label", "type", "name", "href", "src"];
+  const attributes = {};
+  importantAttributes.forEach((attr) => {
+    const value = element.getAttribute(attr);
+    if (value) {
+      attributes[attr] = value;
+    }
+  });
+  let textContent;
+  const directText = Array.from(element.childNodes).filter((node) => node.nodeType === Node.TEXT_NODE).map((node) => node.textContent?.trim()).filter(Boolean).join(" ");
+  if (directText) {
+    textContent = directText.length > 100 ? directText.substring(0, 100) + "..." : directText;
+  }
+  return {
+    tagName: element.tagName.toLowerCase(),
+    id: element.id || void 0,
+    className: element.className && typeof element.className === "string" ? element.className.split(" ").slice(0, 5).join(" ") + (element.className.split(" ").length > 5 ? "..." : "") : void 0,
+    attributes,
+    childElementCount: element.childElementCount,
+    textContent
+  };
+}
+function getComponentProps(fiber, maxProps = 10) {
+  if (!fiber?.memoizedProps) return void 0;
+  const props = fiber.memoizedProps;
+  const safeProps = {};
+  let count = 0;
+  for (const key of Object.keys(props)) {
+    if (count >= maxProps) {
+      safeProps["..."] = `${Object.keys(props).length - maxProps} more props`;
+      break;
+    }
+    if (key === "children") continue;
+    const value = props[key];
+    const type = typeof value;
+    if (type === "function") {
+      safeProps[key] = "[Function]";
+    } else if (type === "object" && value !== null) {
+      if (Array.isArray(value)) {
+        safeProps[key] = `[Array(${value.length})]`;
+      } else if (value.$$typeof) {
+        safeProps[key] = "[ReactElement]";
+      } else {
+        try {
+          const json = JSON.stringify(value);
+          safeProps[key] = json.length > 100 ? "[Object]" : value;
+        } catch {
+          safeProps[key] = "[Object]";
+        }
+      }
+    } else {
+      safeProps[key] = value;
+    }
+    count++;
+  }
+  return Object.keys(safeProps).length > 0 ? safeProps : void 0;
+}
+function getComponentDetails(element, options) {
+  const { includeProps = false, maxParentDepth = 10, maxChildDepth = 5 } = options || {};
+  const fiber = getReactFiber(element);
+  const name = fiber ? getComponentDisplayName(fiber) : "Unknown";
+  let componentFiber = fiber;
+  while (componentFiber && typeof componentFiber.type !== "function") {
+    componentFiber = componentFiber.return;
+  }
+  return {
+    name,
+    parentHierarchy: getParentHierarchy(componentFiber, maxParentDepth),
+    childComponents: getChildComponents(componentFiber, maxChildDepth),
+    elementInfo: getElementInfo(element),
+    props: includeProps ? getComponentProps(componentFiber) : void 0
+  };
+}
+
+// src/components/Highlighter.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function Highlighter() {
+  const { state, dispatch } = useAgentAnnotation();
+  const { hoveredElement, mode, hoveredComponentInfo } = state;
+  const [rect, setRect] = (0, import_react4.useState)(null);
+  const [showInput, setShowInput] = (0, import_react4.useState)(false);
+  const [mousePos, setMousePos] = (0, import_react4.useState)({ x: 0, y: 0 });
+  const [isLocked, setIsLocked] = (0, import_react4.useState)(false);
+  const [lockedPos, setLockedPos] = (0, import_react4.useState)({ x: 0, y: 0 });
+  const [isCapturing, setIsCapturing] = (0, import_react4.useState)(false);
+  const [captureSuccess, setCaptureSuccess] = (0, import_react4.useState)(false);
+  const [showDetails, setShowDetails] = (0, import_react4.useState)(false);
+  const componentName = hoveredComponentInfo?.name || "";
+  const componentDetails = hoveredComponentInfo?.details;
+  (0, import_react4.useEffect)(() => {
+    if (mode !== "inspecting") return;
+    const handleMouseOver = (e) => {
+      if (isLocked) return;
+      const target = e.target;
+      if (target.closest("[data-ai-annotation-ui]") || target.closest("[data-annotation-tooltip]")) {
+        return;
+      }
+      const details = getComponentDetails(target, {
+        includeProps: false,
+        maxParentDepth: 10,
+        maxChildDepth: 5
+      });
+      dispatch({
+        type: "SET_HOVERED",
+        payload: { element: target, name: details.name, details }
+      });
+    };
+    document.addEventListener("mouseover", handleMouseOver);
+    return () => {
+      document.removeEventListener("mouseover", handleMouseOver);
+    };
+  }, [mode, isLocked, dispatch]);
+  (0, import_react4.useEffect)(() => {
+    if (mode !== "inspecting") return;
+    const handleGlobalEsc = (e) => {
+      if (e.key === "Escape" && !isLocked) {
+        e.preventDefault();
+        e.stopPropagation();
+        dispatch({ type: "SET_MODE", payload: "disabled" });
+      }
+    };
+    document.addEventListener("keydown", handleGlobalEsc);
+    return () => document.removeEventListener("keydown", handleGlobalEsc);
+  }, [mode, isLocked, dispatch]);
+  (0, import_react4.useEffect)(() => {
+    if (mode === "disabled") {
+      setRect(null);
+      setShowInput(false);
+      setIsLocked(false);
+      setMousePos({ x: 0, y: 0 });
+      setLockedPos({ x: 0, y: 0 });
+      setIsCapturing(false);
+      setCaptureSuccess(false);
+      setShowDetails(false);
+      dispatch({ type: "RESET_HOVER" });
+    }
+  }, [mode, dispatch]);
+  (0, import_react4.useEffect)(() => {
+    if (!hoveredElement) {
+      setRect(null);
+      setShowInput(false);
+      setIsLocked(false);
+      return;
+    }
+    const updateRect = () => {
+      const newRect = hoveredElement.getBoundingClientRect();
+      setRect(newRect);
+    };
+    updateRect();
+    const handleMouseMove = (e) => {
+      if (!isLocked) {
+        setMousePos({ x: e.clientX, y: e.clientY });
+      }
+    };
+    const handleClick = (e) => {
+      const target = e.target;
+      if (target.closest("[data-annotation-tooltip]")) {
+        return;
+      }
+      if (target.closest("[data-ai-annotation-ui]")) {
+        return;
+      }
+      if (!isLocked) {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsLocked(true);
+        setLockedPos({ x: e.clientX, y: e.clientY });
+      } else {
+        setIsLocked(false);
+      }
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape" && isLocked) {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsLocked(false);
+        setShowInput(false);
+      }
+    };
+    window.addEventListener("scroll", updateRect, true);
+    window.addEventListener("resize", updateRect);
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("click", handleClick, true);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("scroll", updateRect, true);
+      window.removeEventListener("resize", updateRect);
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("click", handleClick, true);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [hoveredElement, isLocked]);
+  const handleScreenshot = async (e) => {
+    e.stopPropagation();
+    if (!hoveredElement || isCapturing) return;
+    setIsCapturing(true);
+    try {
+      const result = await captureScreenshot(hoveredElement, {
+        copyToClipboard: true,
+        scale: 2
+      });
+      if (result.success) {
+        setCaptureSuccess(true);
+        setTimeout(() => {
+          setCaptureSuccess(false);
+          setIsLocked(false);
+        }, 1500);
+      }
+    } catch (error) {
+      console.error("Screenshot failed:", error);
+    } finally {
+      setIsCapturing(false);
+    }
+  };
+  const handleAddClick = (e) => {
+    e.stopPropagation();
+    setShowInput(true);
+    setShowDetails(false);
+    setIsLocked(false);
+  };
+  const handleDetailsClick = (e) => {
+    e.stopPropagation();
+    setShowDetails(!showDetails);
+  };
+  const handleCloseInput = () => {
+    setShowInput(false);
+  };
+  if (mode !== "inspecting" || !rect) return null;
+  const tooltipX = isLocked ? lockedPos.x : mousePos.x;
+  const tooltipY = isLocked ? lockedPos.y : mousePos.y;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        "data-annotation-ui": "true",
+        style: {
+          position: "fixed",
+          left: rect.left - 2,
+          top: rect.top - 2,
+          width: rect.width + 4,
+          height: rect.height + 4,
+          border: "2px solid #3b82f6",
+          borderRadius: 4,
+          pointerEvents: "none",
+          zIndex: 99998,
+          backgroundColor: "rgba(59, 130, 246, 0.1)"
+        }
+      }
+    ),
+    componentName && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        "data-annotation-ui": "true",
+        style: {
+          position: "fixed",
+          left: rect.left,
+          top: rect.top - 24,
+          backgroundColor: "#3b82f6",
+          color: "white",
+          padding: "2px 8px",
+          borderRadius: 4,
+          fontSize: 12,
+          fontFamily: "monospace",
+          pointerEvents: "none",
+          zIndex: 99999
+        },
+        children: componentName
+      }
+    ),
+    !showInput && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "div",
+      {
+        "data-annotation-ui": "true",
+        "data-annotation-tooltip": "true",
+        style: {
+          position: "fixed",
+          left: tooltipX + 16,
+          top: tooltipY + 16,
+          display: "flex",
+          flexDirection: "column",
+          gap: 6,
+          padding: 6,
+          backgroundColor: isLocked ? "rgba(0, 0, 0, 0.95)" : "rgba(0, 0, 0, 0.85)",
+          borderRadius: 8,
+          boxShadow: isLocked ? "0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(59, 130, 246, 0.5)" : "0 4px 12px rgba(0, 0, 0, 0.3)",
+          zIndex: 1e5,
+          pointerEvents: isLocked ? "auto" : "none",
+          backdropFilter: "blur(8px)",
+          transition: isLocked ? "none" : "left 0.05s ease-out, top 0.05s ease-out",
+          maxWidth: showDetails ? 400 : "auto"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", gap: 6 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "button",
+              {
+                onClick: handleScreenshot,
+                disabled: isCapturing || !isLocked,
+                style: {
+                  width: 32,
+                  height: 32,
+                  borderRadius: 6,
+                  border: "none",
+                  backgroundColor: captureSuccess ? "#22c55e" : isCapturing ? "#6b7280" : "#8b5cf6",
+                  color: "white",
+                  cursor: isLocked ? "pointer" : "default",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  fontSize: 16,
+                  transition: "all 0.15s ease",
+                  opacity: isLocked ? 1 : 0.7
+                },
+                title: "Capture screenshot",
+                children: captureSuccess ? "\u2713" : isCapturing ? "..." : "\u{1F4F7}"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "button",
+              {
+                onClick: handleAddClick,
+                disabled: !isLocked,
+                style: {
+                  width: 32,
+                  height: 32,
+                  borderRadius: 6,
+                  border: "none",
+                  backgroundColor: "#3b82f6",
+                  color: "white",
+                  cursor: isLocked ? "pointer" : "default",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  fontSize: 18,
+                  fontWeight: "bold",
+                  transition: "all 0.15s ease",
+                  opacity: isLocked ? 1 : 0.7
+                },
+                title: "Add annotation",
+                children: "+"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "button",
+              {
+                onClick: handleDetailsClick,
+                disabled: !isLocked,
+                style: {
+                  width: 32,
+                  height: 32,
+                  borderRadius: 6,
+                  border: showDetails ? "2px solid #10b981" : "none",
+                  backgroundColor: showDetails ? "#10b981" : "#6b7280",
+                  color: "white",
+                  cursor: isLocked ? "pointer" : "default",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  fontSize: 14,
+                  transition: "all 0.15s ease",
+                  opacity: isLocked ? 1 : 0.7
+                },
+                title: "Show component details",
+                children: "\u24D8"
+              }
+            )
+          ] }),
+          !isLocked && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                bottom: -20,
+                left: "50%",
+                transform: "translateX(-50%)",
+                fontSize: 10,
+                color: "rgba(255, 255, 255, 0.7)",
+                whiteSpace: "nowrap",
+                pointerEvents: "none"
+              },
+              children: "Click to lock"
+            }
+          ),
+          showDetails && componentDetails && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            "div",
+            {
+              style: {
+                padding: "8px 4px 4px 4px",
+                borderTop: "1px solid rgba(255, 255, 255, 0.2)",
+                fontSize: 11,
+                color: "rgba(255, 255, 255, 0.9)",
+                maxHeight: 300,
+                overflowY: "auto"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { marginBottom: 8 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { color: "#60a5fa", fontWeight: "bold", marginBottom: 4 }, children: "Element" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { fontFamily: "monospace", color: "#f59e0b" }, children: [
+                    "<",
+                    componentDetails.elementInfo.tagName,
+                    componentDetails.elementInfo.id && ` id="${componentDetails.elementInfo.id}"`,
+                    componentDetails.elementInfo.className && ` class="${componentDetails.elementInfo.className}"`,
+                    ">"
+                  ] }),
+                  componentDetails.elementInfo.textContent && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { color: "rgba(255, 255, 255, 0.6)", marginTop: 2, fontStyle: "italic" }, children: [
+                    '"',
+                    componentDetails.elementInfo.textContent,
+                    '"'
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { color: "rgba(255, 255, 255, 0.5)", marginTop: 2 }, children: [
+                    componentDetails.elementInfo.childElementCount,
+                    " child element(s)"
+                  ] })
+                ] }),
+                componentDetails.parentHierarchy.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { marginBottom: 8 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { color: "#60a5fa", fontWeight: "bold", marginBottom: 4 }, children: "Parent Components" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { fontFamily: "monospace" }, children: [
+                    componentDetails.parentHierarchy.slice(0, 5).map((parent, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { color: "#a78bfa", paddingLeft: i * 8 }, children: [
+                      "\u2190 ",
+                      parent
+                    ] }, i)),
+                    componentDetails.parentHierarchy.length > 5 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { color: "rgba(255, 255, 255, 0.5)" }, children: [
+                      "... and ",
+                      componentDetails.parentHierarchy.length - 5,
+                      " more"
+                    ] })
+                  ] })
+                ] }),
+                componentDetails.childComponents.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { marginBottom: 8 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { color: "#60a5fa", fontWeight: "bold", marginBottom: 4 }, children: [
+                    "Child Components (",
+                    componentDetails.childComponents.length,
+                    ")"
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { fontFamily: "monospace" }, children: [
+                    componentDetails.childComponents.slice(0, 10).map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          justifyContent: "space-between",
+                          gap: 8,
+                          color: "#34d399"
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { children: [
+                            "\u2192 ",
+                            child.name,
+                            child.hasChildren && " \u25BE"
+                          ] }),
+                          child.count > 1 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { style: { color: "rgba(255, 255, 255, 0.5)" }, children: [
+                            "\xD7",
+                            child.count
+                          ] })
+                        ]
+                      },
+                      i
+                    )),
+                    componentDetails.childComponents.length > 10 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { color: "rgba(255, 255, 255, 0.5)" }, children: [
+                      "... and ",
+                      componentDetails.childComponents.length - 10,
+                      " more"
+                    ] })
+                  ] })
+                ] }),
+                Object.keys(componentDetails.elementInfo.attributes).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { color: "#60a5fa", fontWeight: "bold", marginBottom: 4 }, children: "Attributes" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontFamily: "monospace" }, children: Object.entries(componentDetails.elementInfo.attributes).map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { color: "#fbbf24" }, children: [
+                    key,
+                    '="',
+                    value,
+                    '"'
+                  ] }, key)) })
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    showInput && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      AnnotationInput,
+      {
+        onClose: handleCloseInput,
+        componentName: componentName || "Unknown",
+        componentDetails
+      }
+    )
+  ] });
+}
+
+// src/components/AnnotationList.tsx
+var import_react5 = require("react");
+var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function AnnotationList() {
+  const { state, dispatch } = useAgentAnnotation();
+  const [expandedId, setExpandedId] = (0, import_react5.useState)(null);
+  if (!state.showList) return null;
+  const toggleExpand = (id) => {
+    setExpandedId(expandedId === id ? null : id);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: "rgba(0,0,0,0.5)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 1e4
+      },
+      "data-ai-annotation-ui": true,
+      onClick: () => dispatch({ type: "TOGGLE_LIST" }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        "div",
+        {
+          style: {
+            backgroundColor: "#1e1e1e",
+            color: "#e5e7eb",
+            padding: "20px",
+            borderRadius: "8px",
+            width: "600px",
+            maxWidth: "90%",
+            maxHeight: "80vh",
+            display: "flex",
+            flexDirection: "column",
+            boxShadow: "0 4px 6px rgba(0,0,0,0.3)"
+          },
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: "16px", alignItems: "center" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("h3", { style: { margin: 0 }, children: [
+                "Annotations (",
+                state.annotations.length,
+                ")"
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                state.annotations.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                  "button",
+                  {
+                    onClick: () => dispatch({ type: "CLEAR_ALL_ANNOTATIONS" }),
+                    style: {
+                      background: "#ef4444",
+                      border: "none",
+                      color: "white",
+                      cursor: "pointer",
+                      padding: "6px 12px",
+                      borderRadius: "4px",
+                      fontSize: "12px",
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "4px"
+                    },
+                    title: "Clear all annotations",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.Trash, { size: 14 }),
+                      "Clear All"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "button",
+                  {
+                    onClick: () => dispatch({ type: "TOGGLE_LIST" }),
+                    style: { background: "none", border: "none", color: "inherit", cursor: "pointer" },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.X, { size: 20 })
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { overflowY: "auto", flex: 1, display: "flex", flexDirection: "column", gap: "8px" }, children: state.annotations.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { style: { textAlign: "center", opacity: 0.6, padding: "20px" }, children: "No annotations yet." }) : state.annotations.map((ann) => {
+              const isExpanded = expandedId === ann.id;
+              const hasDetails = !!ann.details;
+              return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                "div",
+                {
+                  style: {
+                    backgroundColor: "#2d2d2d",
+                    borderRadius: "4px",
+                    overflow: "hidden"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                      "div",
+                      {
+                        style: {
+                          padding: "12px",
+                          display: "flex",
+                          justifyContent: "space-between",
+                          alignItems: "flex-start",
+                          gap: "12px"
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { flex: 1 }, children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginBottom: "4px" }, children: [
+                              hasDetails && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                                "button",
+                                {
+                                  onClick: () => toggleExpand(ann.id),
+                                  style: {
+                                    background: "none",
+                                    border: "none",
+                                    color: "#60a5fa",
+                                    cursor: "pointer",
+                                    padding: 0,
+                                    display: "flex",
+                                    alignItems: "center"
+                                  },
+                                  children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.ChevronDown, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.ChevronRight, { size: 16 })
+                                }
+                              ),
+                              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { fontWeight: "bold", fontSize: "0.9rem", color: "#60a5fa" }, children: ann.componentName })
+                            ] }),
+                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { fontSize: "0.9rem", whiteSpace: "pre-wrap", marginLeft: hasDetails ? 24 : 0 }, children: ann.note })
+                          ] }),
+                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                            "button",
+                            {
+                              onClick: () => dispatch({ type: "REMOVE_ANNOTATION", payload: ann.id }),
+                              style: {
+                                background: "none",
+                                border: "none",
+                                color: "#ef4444",
+                                cursor: "pointer",
+                                padding: "4px",
+                                flexShrink: 0
+                              },
+                              title: "Remove annotation",
+                              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.Trash2, { size: 16 })
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    isExpanded && ann.details && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                      "div",
+                      {
+                        style: {
+                          padding: "12px",
+                          paddingTop: 0,
+                          borderTop: "1px solid #404040",
+                          marginTop: "8px",
+                          fontSize: "0.8rem"
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { marginBottom: "12px" }, children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { color: "#10b981", fontWeight: "bold", marginBottom: "4px" }, children: "Element" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { fontFamily: "monospace", color: "#f59e0b", fontSize: "0.75rem" }, children: [
+                              "<",
+                              ann.details.elementInfo.tagName,
+                              ann.details.elementInfo.id && ` id="${ann.details.elementInfo.id}"`,
+                              ann.details.elementInfo.className && ` class="${ann.details.elementInfo.className}"`,
+                              ">"
+                            ] }),
+                            ann.details.elementInfo.textContent && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { color: "rgba(255, 255, 255, 0.6)", marginTop: "4px", fontStyle: "italic" }, children: [
+                              'Text: "',
+                              ann.details.elementInfo.textContent,
+                              '"'
+                            ] })
+                          ] }),
+                          ann.details.parentHierarchy.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { marginBottom: "12px" }, children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { color: "#10b981", fontWeight: "bold", marginBottom: "4px" }, children: "Parent Components" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { fontFamily: "monospace", fontSize: "0.75rem" }, children: ann.details.parentHierarchy.map((parent, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { color: "#a78bfa" }, children: [
+                              i > 0 && " \u2192 ",
+                              parent
+                            ] }, i)) })
+                          ] }),
+                          ann.details.childComponents.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { marginBottom: "12px" }, children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { color: "#10b981", fontWeight: "bold", marginBottom: "4px" }, children: [
+                              "Child Components (",
+                              ann.details.childComponents.length,
+                              ")"
+                            ] }),
+                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: "6px" }, children: ann.details.childComponents.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                              "span",
+                              {
+                                style: {
+                                  backgroundColor: "#374151",
+                                  padding: "2px 8px",
+                                  borderRadius: "4px",
+                                  fontFamily: "monospace",
+                                  fontSize: "0.75rem",
+                                  color: "#34d399"
+                                },
+                                children: [
+                                  child.name,
+                                  child.count > 1 && ` \xD7${child.count}`,
+                                  child.hasChildren && " \u25BE"
+                                ]
+                              },
+                              i
+                            )) })
+                          ] }),
+                          Object.keys(ann.details.elementInfo.attributes).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { color: "#10b981", fontWeight: "bold", marginBottom: "4px" }, children: "Attributes" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { fontFamily: "monospace", fontSize: "0.75rem" }, children: Object.entries(ann.details.elementInfo.attributes).map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { color: "#fbbf24" }, children: [
+                              key,
+                              '="',
+                              value,
+                              '"'
+                            ] }, key)) })
+                          ] })
+                        ]
+                      }
+                    )
+                  ]
+                },
+                ann.id
+              );
+            }) })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/components/Toolbar.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function Toolbar() {
+  const { state, dispatch } = useAgentAnnotation();
+  const [showCopied, setShowCopied] = (0, import_react6.useState)(false);
+  const [isAnimating, setIsAnimating] = (0, import_react6.useState)(false);
+  const contentRef = (0, import_react6.useRef)(null);
+  const [contentWidth, setContentWidth] = (0, import_react6.useState)(null);
+  (0, import_react6.useEffect)(() => {
+    if (contentRef.current && !state.isMinimized) {
+      requestAnimationFrame(() => {
+        if (contentRef.current) {
+          setContentWidth(contentRef.current.scrollWidth);
+        }
+      });
+    }
+  }, [state.isMinimized, showCopied, state.annotations.length]);
+  const handleToggleMinimized = () => {
+    setIsAnimating(true);
+    dispatch({ type: "TOGGLE_MINIMIZED" });
+    setTimeout(() => setIsAnimating(false), 300);
+  };
+  const handleCopy = () => {
+    if (state.annotations.length === 0) return;
+    const sections = state.annotations.map((a, index) => {
+      const lines = [];
+      lines.push(`${"=".repeat(50)}`);
+      lines.push(`Annotation ${index + 1}`);
+      lines.push(`Component: ${a.componentName}`);
+      lines.push(`${"=".repeat(50)}`);
+      lines.push("");
+      lines.push("## Instruction");
+      lines.push(a.note);
+      return lines.join("\n");
+    });
+    const text = sections.join("\n\n");
+    navigator.clipboard.writeText(text).then(() => {
+      setShowCopied(true);
+      setTimeout(() => setShowCopied(false), 2e3);
+    });
+  };
+  const toggleMode = () => {
+    dispatch({
+      type: "SET_MODE",
+      payload: state.mode === "disabled" ? "inspecting" : "disabled"
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Highlighter, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AnnotationList, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Draggable, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      "div",
+      {
+        style: {
+          backgroundColor: "#1e1e1e",
+          border: "1px solid #333",
+          borderRadius: "8px",
+          padding: "8px",
+          boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
+          display: "flex",
+          alignItems: "center",
+          gap: "8px",
+          color: "#e5e7eb",
+          transition: "width 0.2s"
+        },
+        "data-ai-annotation-ui": true,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { cursor: "grab", color: "#666", display: "flex" }, title: "Drag", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react3.GripVertical, { size: 20 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "div",
+            {
+              ref: contentRef,
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "8px",
+                overflow: "hidden",
+                transition: "max-width 0.3s ease, opacity 0.2s ease",
+                maxWidth: state.isMinimized ? 0 : contentWidth || 300,
+                opacity: state.isMinimized ? 0 : 1,
+                paddingTop: "4px",
+                paddingBottom: "4px",
+                marginTop: "-4px",
+                marginBottom: "-4px"
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { width: "1px", height: "24px", backgroundColor: "#333" } }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  "button",
+                  {
+                    onClick: toggleMode,
+                    title: state.mode === "inspecting" ? "Disable Inspection" : "Enable Inspection",
+                    style: {
+                      background: state.mode === "inspecting" ? "#3b82f6" : "transparent",
+                      border: "none",
+                      borderRadius: "4px",
+                      padding: "6px",
+                      color: state.mode === "inspecting" ? "white" : "inherit",
+                      cursor: "pointer",
+                      display: "flex"
+                    },
+                    children: state.mode === "inspecting" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react3.MousePointer2, { size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react3.Ban, { size: 18 })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                  "button",
+                  {
+                    onClick: () => dispatch({ type: "TOGGLE_LIST" }),
+                    title: "List Annotations",
+                    style: {
+                      background: "transparent",
+                      border: "none",
+                      borderRadius: "4px",
+                      padding: "6px",
+                      color: "inherit",
+                      cursor: "pointer",
+                      display: "flex",
+                      position: "relative"
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react3.List, { size: 18 }),
+                      state.annotations.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: {
+                        position: "absolute",
+                        top: -2,
+                        right: -2,
+                        background: "#ef4444",
+                        color: "white",
+                        fontSize: "9px",
+                        width: "14px",
+                        height: "14px",
+                        borderRadius: "50%",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center"
+                      }, children: state.annotations.length })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  "button",
+                  {
+                    onClick: handleCopy,
+                    title: "Copy Annotations",
+                    style: {
+                      background: showCopied ? "#22c55e" : "transparent",
+                      border: "none",
+                      borderRadius: "4px",
+                      padding: "6px",
+                      color: showCopied ? "white" : "inherit",
+                      cursor: "pointer",
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "4px",
+                      transition: "background-color 0.2s, color 0.2s",
+                      minWidth: showCopied ? "75px" : "auto"
+                    },
+                    children: showCopied ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react3.Check, { size: 18 }),
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { fontSize: "12px", whiteSpace: "nowrap" }, children: "Copied!" })
+                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react3.Copy, { size: 18 })
+                  }
+                )
+              ] })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { width: "1px", height: "24px", backgroundColor: "#333", marginLeft: state.isMinimized ? 0 : "auto" } }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "button",
+            {
+              onClick: handleToggleMinimized,
+              title: state.isMinimized ? "Expand" : "Minimize",
+              style: {
+                background: "transparent",
+                border: "none",
+                borderRadius: "4px",
+                padding: "6px",
+                color: "inherit",
+                cursor: "pointer",
+                display: "flex"
+              },
+              children: state.isMinimized ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react3.Maximize2, { size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react3.Minus, { size: 18 })
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+}
+
+// src/components/ErrorBoundary.tsx
+var import_react7 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var defaultStyles = {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    minHeight: "100vh",
+    padding: "24px",
+    backgroundColor: "#1e1e1e",
+    color: "#e5e7eb",
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+  },
+  content: {
+    maxWidth: "600px",
+    width: "100%",
+    textAlign: "center"
+  },
+  icon: {
+    fontSize: "48px",
+    marginBottom: "16px"
+  },
+  title: {
+    fontSize: "24px",
+    fontWeight: 600,
+    marginBottom: "8px",
+    color: "#f87171"
+  },
+  subtitle: {
+    fontSize: "16px",
+    color: "#9ca3af",
+    marginBottom: "24px"
+  },
+  errorBox: {
+    backgroundColor: "#2d2d2d",
+    border: "1px solid #404040",
+    borderRadius: "8px",
+    padding: "16px",
+    marginBottom: "24px",
+    textAlign: "left",
+    maxHeight: "200px",
+    overflow: "auto"
+  },
+  errorText: {
+    fontFamily: "monospace",
+    fontSize: "12px",
+    color: "#f87171",
+    whiteSpace: "pre-wrap",
+    wordBreak: "break-word",
+    margin: 0
+  },
+  buttonContainer: {
+    display: "flex",
+    gap: "12px",
+    justifyContent: "center",
+    flexWrap: "wrap"
+  },
+  button: {
+    padding: "10px 20px",
+    borderRadius: "6px",
+    border: "none",
+    fontSize: "14px",
+    fontWeight: 500,
+    cursor: "pointer",
+    transition: "all 0.2s"
+  },
+  primaryButton: {
+    backgroundColor: "#3b82f6",
+    color: "white"
+  },
+  secondaryButton: {
+    backgroundColor: "#404040",
+    color: "#e5e7eb"
+  },
+  successButton: {
+    backgroundColor: "#22c55e",
+    color: "white"
+  }
+};
+var ErrorBoundary = class extends import_react7.Component {
+  constructor(props) {
+    super(props);
+    __publicField(this, "handleReset", () => {
+      this.props.onReset?.();
+      this.setState({
+        hasError: false,
+        error: null,
+        errorInfo: null,
+        copied: false
+      });
+    });
+    __publicField(this, "handleCopyToClipboard", async () => {
+      const text = this.formatError();
+      try {
+        await navigator.clipboard.writeText(text);
+        this.setState({ copied: true });
+        setTimeout(() => this.setState({ copied: false }), 2e3);
+      } catch (err) {
+        console.error("Failed to copy error details:", err);
+      }
+    });
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null,
+      copied: false
+    };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, errorInfo) {
+    this.setState({ errorInfo });
+    this.props.onError?.(error, errorInfo);
+  }
+  formatError() {
+    const { error, errorInfo } = this.state;
+    if (!error) return "";
+    const lines = [
+      "=".repeat(50),
+      "ERROR REPORT",
+      "=".repeat(50),
+      "",
+      `Error: ${error.name}`,
+      `Message: ${error.message}`,
+      "",
+      "Stack Trace:",
+      error.stack || "No stack trace available"
+    ];
+    if (errorInfo?.componentStack) {
+      lines.push("", "Component Stack:", errorInfo.componentStack);
+    }
+    lines.push("", `Timestamp: ${(/* @__PURE__ */ new Date()).toISOString()}`);
+    lines.push(`User Agent: ${typeof navigator !== "undefined" ? navigator.userAgent : "N/A"}`);
+    return lines.join("\n");
+  }
+  getErrorInfo() {
+    return {
+      error: this.state.error,
+      errorInfo: this.state.errorInfo,
+      formattedError: this.formatError(),
+      reset: this.handleReset
+    };
+  }
+  renderDefaultFallback() {
+    const {
+      title = "Something went wrong",
+      subtitle = "An unexpected error occurred",
+      showErrorDetails = true,
+      showCopyButton = true,
+      showRetryButton = true,
+      retryButtonLabel = "Try Again",
+      copyButtonLabel = "Copy Error Details",
+      customButtons = [],
+      containerStyle,
+      errorDetailsStyle
+    } = this.props;
+    const { error, copied } = this.state;
+    const errorInfo = this.getErrorInfo();
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { ...defaultStyles.container, ...containerStyle }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: defaultStyles.content, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: defaultStyles.icon, children: "\u26A0\uFE0F" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h1", { style: defaultStyles.title, children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { style: defaultStyles.subtitle, children: subtitle }),
+      showErrorDetails && error && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { ...defaultStyles.errorBox, ...errorDetailsStyle }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("pre", { style: defaultStyles.errorText, children: [
+        error.name,
+        ": ",
+        error.message,
+        error.stack && `
+
+${error.stack.split("\n").slice(1, 5).join("\n")}`
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: defaultStyles.buttonContainer, children: [
+        showRetryButton && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "button",
+          {
+            onClick: this.handleReset,
+            style: { ...defaultStyles.button, ...defaultStyles.primaryButton },
+            children: retryButtonLabel
+          }
+        ),
+        showCopyButton && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "button",
+          {
+            onClick: this.handleCopyToClipboard,
+            style: {
+              ...defaultStyles.button,
+              ...copied ? defaultStyles.successButton : defaultStyles.secondaryButton
+            },
+            children: copied ? "\u2713 Copied!" : copyButtonLabel
+          }
+        ),
+        customButtons.map((btn, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "button",
+          {
+            onClick: () => btn.onClick(errorInfo),
+            style: { ...defaultStyles.button, ...defaultStyles.secondaryButton, ...btn.style },
+            className: btn.className,
+            children: btn.label
+          },
+          index
+        ))
+      ] })
+    ] }) });
+  }
+  render() {
+    const { hasError } = this.state;
+    const { children, fallback: FallbackComponent, fallbackElement } = this.props;
+    if (hasError) {
+      if (FallbackComponent) {
+        const errorInfo = this.getErrorInfo();
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          FallbackComponent,
+          {
+            ...errorInfo,
+            copyToClipboard: this.handleCopyToClipboard
+          }
+        );
+      }
+      if (fallbackElement) {
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: fallbackElement });
+      }
+      return this.renderDefaultFallback();
+    }
+    return children;
+  }
+};
+
+// src/utils/platform.ts
+var isWeb = typeof document !== "undefined" && typeof window !== "undefined";
+var isNative = !isWeb && typeof global !== "undefined";
+function getPlatform() {
+  if (isWeb) return "web";
+  try {
+    const { Platform } = require("react-native");
+    if (Platform.OS === "ios") return "ios";
+    if (Platform.OS === "android") return "android";
+    return "native";
+  } catch {
+    return "native";
+  }
+}
+function isTauriEnv2() {
+  return isWeb && typeof window !== "undefined" && "__TAURI_INTERNALS__" in window;
+}
+
+// src/index.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function AgentAnnotationProvider2({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(AgentAnnotationProvider, { children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Toolbar, {})
+  ] });
+}
+//# sourceMappingURL=index.cjs.map