@ibealec/create-zed-bridge 1.0.0 → 1.0.2

package/templates/@zed-controller/react-bridge/dist/index.cjs

@@ -0,0 +1,2572 @@
+"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 __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);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ClaudeBridgeProvider: () => ClaudeBridgeProvider,
+  ClaudeTerminal: () => ClaudeTerminal,
+  TaskStatusToast: () => TaskStatusToast,
+  captureContext: () => captureContext,
+  captureElementScreenshot: () => captureElementScreenshot,
+  capturePageContext: () => capturePageContext,
+  useClaudeBridge: () => useClaudeBridge
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/ClaudeBridgeProvider.tsx
+var import_react6 = require("react");
+
+// src/websocket-client.ts
+var BridgeWebSocketClient = class {
+  constructor(config) {
+    this.ws = null;
+    this.messageHandlers = /* @__PURE__ */ new Set();
+    this.connectionHandlers = /* @__PURE__ */ new Set();
+    this.reconnectAttempts = 0;
+    this.maxReconnectAttempts = 5;
+    this.reconnectDelay = 1e3;
+    this.reconnectTimeout = null;
+    this.pingInterval = null;
+    this.config = config;
+  }
+  connect() {
+    if (this.ws?.readyState === WebSocket.OPEN) {
+      return;
+    }
+    try {
+      const wsUrl = this.config.serverUrl.replace(/^http/, "ws").replace(/\/$/, "");
+      this.ws = new WebSocket(`${wsUrl}/ws/bridge?token=${encodeURIComponent(this.config.token)}`);
+      this.ws.onopen = () => {
+        console.log("[ClaudeBridge] WebSocket connected");
+        this.reconnectAttempts = 0;
+        this.notifyConnectionHandlers(true);
+        this.startPingInterval();
+      };
+      this.ws.onmessage = (event) => {
+        try {
+          const message = JSON.parse(event.data);
+          this.notifyMessageHandlers(message);
+        } catch (error) {
+          console.error("[ClaudeBridge] Failed to parse message:", error);
+        }
+      };
+      this.ws.onclose = () => {
+        console.log("[ClaudeBridge] WebSocket disconnected");
+        this.notifyConnectionHandlers(false);
+        this.stopPingInterval();
+        this.scheduleReconnect();
+      };
+      this.ws.onerror = (error) => {
+        console.error("[ClaudeBridge] WebSocket error:", error);
+        this.config.onError?.(new Error("WebSocket connection error"));
+      };
+    } catch (error) {
+      console.error("[ClaudeBridge] Failed to connect:", error);
+      this.scheduleReconnect();
+    }
+  }
+  disconnect() {
+    this.stopPingInterval();
+    if (this.reconnectTimeout) {
+      clearTimeout(this.reconnectTimeout);
+      this.reconnectTimeout = null;
+    }
+    if (this.ws) {
+      this.ws.close();
+      this.ws = null;
+    }
+  }
+  scheduleReconnect() {
+    if (this.reconnectAttempts >= this.maxReconnectAttempts) {
+      console.log("[ClaudeBridge] Max reconnect attempts reached");
+      return;
+    }
+    const delay = this.reconnectDelay * Math.pow(2, this.reconnectAttempts);
+    this.reconnectAttempts++;
+    console.log(`[ClaudeBridge] Reconnecting in ${delay}ms (attempt ${this.reconnectAttempts})`);
+    this.reconnectTimeout = setTimeout(() => this.connect(), delay);
+  }
+  startPingInterval() {
+    this.pingInterval = setInterval(() => {
+      if (this.ws?.readyState === WebSocket.OPEN) {
+        this.send({ type: "ping" });
+      }
+    }, 3e4);
+  }
+  stopPingInterval() {
+    if (this.pingInterval) {
+      clearInterval(this.pingInterval);
+      this.pingInterval = null;
+    }
+  }
+  send(message) {
+    if (this.ws?.readyState !== WebSocket.OPEN) {
+      console.warn("[ClaudeBridge] Cannot send message: not connected");
+      return false;
+    }
+    try {
+      this.ws.send(JSON.stringify(message));
+      return true;
+    } catch (error) {
+      console.error("[ClaudeBridge] Failed to send message:", error);
+      return false;
+    }
+  }
+  createTask(prompt, context) {
+    console.log("[ClaudeBridge] createTask context:", {
+      sourceFile: context.sourceFile,
+      sourceLine: context.sourceLine,
+      componentName: context.componentName
+    });
+    const request = {
+      prompt,
+      context,
+      projectPath: this.config.projectRoot
+    };
+    return this.send({
+      type: "create_task",
+      ...request
+    });
+  }
+  continueTask(taskId, prompt, context) {
+    return this.send({
+      type: "continue_task",
+      taskId,
+      prompt,
+      context
+    });
+  }
+  onMessage(handler) {
+    this.messageHandlers.add(handler);
+    return () => this.messageHandlers.delete(handler);
+  }
+  onConnection(handler) {
+    this.connectionHandlers.add(handler);
+    return () => this.connectionHandlers.delete(handler);
+  }
+  notifyMessageHandlers(message) {
+    for (const handler of this.messageHandlers) {
+      try {
+        handler(message);
+      } catch (error) {
+        console.error("[ClaudeBridge] Message handler error:", error);
+      }
+    }
+  }
+  notifyConnectionHandlers(connected) {
+    for (const handler of this.connectionHandlers) {
+      try {
+        handler(connected);
+      } catch (error) {
+        console.error("[ClaudeBridge] Connection handler error:", error);
+      }
+    }
+  }
+  get isConnected() {
+    return this.ws?.readyState === WebSocket.OPEN;
+  }
+};
+
+// src/context-capture.ts
+function captureContext(element) {
+  return {
+    selectedText: getSelectedText(),
+    selectedElement: {
+      tagName: element.tagName.toLowerCase(),
+      className: element.className,
+      id: element.id || void 0,
+      innerText: truncateText(element.innerText, 200)
+    },
+    sourceFile: getSourceFile(element),
+    sourceLine: getSourceLine(element),
+    sourceColumn: getSourceColumn(element),
+    componentName: getComponentName(element),
+    domPath: getDomPath(element),
+    parentComponents: getParentComponents(element),
+    currentUrl: window.location.href,
+    pageTitle: document.title
+  };
+}
+function getSelectedText() {
+  const selection = window.getSelection();
+  if (selection && selection.toString().trim()) {
+    return selection.toString().trim();
+  }
+  return void 0;
+}
+function truncateText(text, maxLength) {
+  const cleaned = text.replace(/\s+/g, " ").trim();
+  if (cleaned.length <= maxLength) {
+    return cleaned;
+  }
+  return cleaned.slice(0, maxLength) + "...";
+}
+function getSourceFile(element) {
+  let current = element;
+  while (current) {
+    const locatorId = current.getAttribute("data-locatorjs-id");
+    if (locatorId) {
+      const [filePath] = locatorId.split(":");
+      return filePath;
+    }
+    const sourceFile = current.getAttribute("data-source-file");
+    if (sourceFile) {
+      return sourceFile;
+    }
+    current = current.parentElement;
+  }
+  return void 0;
+}
+function getSourceLine(element) {
+  let current = element;
+  while (current) {
+    const locatorId = current.getAttribute("data-locatorjs-id");
+    if (locatorId) {
+      const parts = locatorId.split(":");
+      if (parts.length >= 2) {
+        const line = parseInt(parts[1], 10);
+        if (!isNaN(line)) return line;
+      }
+    }
+    const sourceLine = current.getAttribute("data-source-line");
+    if (sourceLine) {
+      const line = parseInt(sourceLine, 10);
+      if (!isNaN(line)) return line;
+    }
+    current = current.parentElement;
+  }
+  return void 0;
+}
+function getSourceColumn(element) {
+  let current = element;
+  while (current) {
+    const locatorId = current.getAttribute("data-locatorjs-id");
+    if (locatorId) {
+      const parts = locatorId.split(":");
+      if (parts.length >= 3) {
+        const col = parseInt(parts[2], 10);
+        if (!isNaN(col)) return col;
+      }
+    }
+    current = current.parentElement;
+  }
+  return void 0;
+}
+function getComponentName(element) {
+  const fiber = getReactFiber(element);
+  if (fiber) {
+    const name = getFiberComponentName(fiber);
+    if (name) return name;
+  }
+  let current = element;
+  while (current) {
+    const componentName = current.getAttribute("data-component");
+    if (componentName) return componentName;
+    current = current.parentElement;
+  }
+  return void 0;
+}
+function getReactFiber(element) {
+  const keys = Object.keys(element);
+  for (const key of keys) {
+    if (key.startsWith("__reactFiber$") || key.startsWith("__reactInternalInstance$")) {
+      return element[key];
+    }
+  }
+  return null;
+}
+function getFiberComponentName(fiber) {
+  if (!fiber) return void 0;
+  if (fiber.type) {
+    if (typeof fiber.type === "function") {
+      return fiber.type.displayName || fiber.type.name || void 0;
+    }
+    if (typeof fiber.type === "string") {
+      return void 0;
+    }
+    if (fiber.type.displayName) {
+      return fiber.type.displayName;
+    }
+    if (fiber.type.render?.displayName || fiber.type.render?.name) {
+      return fiber.type.render.displayName || fiber.type.render.name;
+    }
+  }
+  if (fiber.return) {
+    return getFiberComponentName(fiber.return);
+  }
+  return void 0;
+}
+function getDomPath(element) {
+  const path = [];
+  let current = element;
+  while (current && current !== document.body) {
+    let selector = current.tagName.toLowerCase();
+    if (current.id) {
+      selector += `#${current.id}`;
+    } else if (current.className) {
+      const classes = current.className.split(/\s+/).filter((c) => c && !c.startsWith("__")).slice(0, 2).join(".");
+      if (classes) {
+        selector += `.${classes}`;
+      }
+    }
+    path.unshift(selector);
+    current = current.parentElement;
+  }
+  path.unshift("body");
+  return path.join(" > ");
+}
+function getParentComponents(element) {
+  const components = [];
+  const seen = /* @__PURE__ */ new Set();
+  let fiber = getReactFiber(element);
+  while (fiber) {
+    const name = getFiberComponentName(fiber);
+    if (name && !seen.has(name) && !isBuiltInComponent(name)) {
+      seen.add(name);
+      components.push(name);
+    }
+    fiber = fiber.return;
+  }
+  return components.reverse().slice(0, 10);
+}
+function isBuiltInComponent(name) {
+  const builtIns = [
+    "Fragment",
+    "Suspense",
+    "StrictMode",
+    "Profiler",
+    "Provider",
+    "Consumer",
+    "Context"
+  ];
+  return builtIns.some((b) => name.includes(b));
+}
+function capturePageContext() {
+  const mainContent = document.querySelector("main") || document.querySelector('[role="main"]');
+  const pageStructure = getPageStructure();
+  return {
+    selectedText: getSelectedText(),
+    selectedElement: {
+      tagName: "body",
+      className: document.body.className || "",
+      id: document.body.id || void 0,
+      innerText: truncateText(getVisibleTextContent(), 500)
+    },
+    componentName: mainContent ? getComponentName(mainContent) : void 0,
+    domPath: "body",
+    parentComponents: getRootComponents(),
+    currentUrl: window.location.href,
+    pageTitle: document.title
+    // Include page structure info in the innerText
+  };
+}
+function getPageStructure() {
+  const parts = [];
+  const landmarks = [
+    { selector: 'header, [role="banner"]', name: "header" },
+    { selector: 'nav, [role="navigation"]', name: "navigation" },
+    { selector: 'main, [role="main"]', name: "main content" },
+    { selector: 'aside, [role="complementary"]', name: "sidebar" },
+    { selector: 'footer, [role="contentinfo"]', name: "footer" }
+  ];
+  for (const { selector, name } of landmarks) {
+    if (document.querySelector(selector)) {
+      parts.push(name);
+    }
+  }
+  const buttons = document.querySelectorAll('button, [role="button"]').length;
+  const links = document.querySelectorAll("a[href]").length;
+  const forms = document.querySelectorAll("form").length;
+  const inputs = document.querySelectorAll("input, textarea, select").length;
+  if (buttons > 0) parts.push(`${buttons} buttons`);
+  if (links > 0) parts.push(`${links} links`);
+  if (forms > 0) parts.push(`${forms} forms`);
+  if (inputs > 0) parts.push(`${inputs} inputs`);
+  return parts.join(", ");
+}
+function getVisibleTextContent() {
+  const clone = document.body.cloneNode(true);
+  const toRemove = clone.querySelectorAll('script, style, noscript, [hidden], [aria-hidden="true"]');
+  toRemove.forEach((el) => el.remove());
+  const text = clone.innerText || clone.textContent || "";
+  return text.replace(/\s+/g, " ").trim();
+}
+function getRootComponents() {
+  const components = [];
+  const seen = /* @__PURE__ */ new Set();
+  const root = document.getElementById("root") || document.getElementById("app") || document.querySelector("[data-reactroot]");
+  if (root) {
+    const fiber = getReactFiber(root);
+    if (fiber) {
+      let current = fiber;
+      let depth = 0;
+      while (current && depth < 5) {
+        const name = getFiberComponentName(current);
+        if (name && !seen.has(name) && !isBuiltInComponent(name)) {
+          seen.add(name);
+          components.push(name);
+        }
+        current = current.child;
+        depth++;
+      }
+    }
+  }
+  return components;
+}
+
+// src/screenshot-capture.ts
+var import_html2canvas = __toESM(require("html2canvas"), 1);
+async function captureElementScreenshot(element, options = {}) {
+  const { padding = 20, maxWidth = 800, maxHeight = 600 } = options;
+  try {
+    const rect = element.getBoundingClientRect();
+    const x = Math.max(0, rect.left - padding + window.scrollX);
+    const y = Math.max(0, rect.top - padding + window.scrollY);
+    const width = Math.min(rect.width + padding * 2, maxWidth);
+    const height = Math.min(rect.height + padding * 2, maxHeight);
+    const canvas = await (0, import_html2canvas.default)(document.body, {
+      x,
+      y,
+      width,
+      height,
+      scrollX: -window.scrollX,
+      scrollY: -window.scrollY,
+      windowWidth: document.documentElement.scrollWidth,
+      windowHeight: document.documentElement.scrollHeight,
+      useCORS: true,
+      allowTaint: true,
+      backgroundColor: null,
+      logging: false
+    });
+    return canvas.toDataURL("image/png");
+  } catch (error) {
+    console.error("[ClaudeBridge] Screenshot capture failed:", error);
+    return void 0;
+  }
+}
+function createHighlightOverlay() {
+  const overlay = document.createElement("div");
+  overlay.id = "claude-bridge-highlight";
+  overlay.style.cssText = `
+    position: fixed;
+    pointer-events: none;
+    border: 2px solid #6366f1;
+    background: rgba(99, 102, 241, 0.1);
+    border-radius: 4px;
+    z-index: 999998;
+    transition: all 0.1s ease-out;
+    display: none;
+  `;
+  document.body.appendChild(overlay);
+  const label = document.createElement("div");
+  label.style.cssText = `
+    position: absolute;
+    top: -24px;
+    left: 0;
+    background: #6366f1;
+    color: white;
+    font-size: 11px;
+    font-family: ui-monospace, monospace;
+    padding: 2px 6px;
+    border-radius: 3px;
+    white-space: nowrap;
+  `;
+  overlay.appendChild(label);
+  return {
+    show: (element) => {
+      const rect = element.getBoundingClientRect();
+      overlay.style.display = "block";
+      overlay.style.top = `${rect.top}px`;
+      overlay.style.left = `${rect.left}px`;
+      overlay.style.width = `${rect.width}px`;
+      overlay.style.height = `${rect.height}px`;
+      let labelText = element.tagName.toLowerCase();
+      if (element.id) {
+        labelText += `#${element.id}`;
+      } else if (element.className) {
+        const firstClass = element.className.split(/\s+/)[0];
+        if (firstClass && !firstClass.startsWith("__")) {
+          labelText += `.${firstClass}`;
+        }
+      }
+      label.textContent = labelText;
+    },
+    hide: () => {
+      overlay.style.display = "none";
+    },
+    destroy: () => {
+      overlay.remove();
+    }
+  };
+}
+
+// src/SelectionOverlay.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function SelectionOverlay({
+  active,
+  onElementSelect,
+  selectedElement
+}) {
+  const highlightRef = (0, import_react.useRef)(null);
+  const hoveredElementRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    highlightRef.current = createHighlightOverlay();
+    return () => {
+      highlightRef.current?.destroy();
+      highlightRef.current = null;
+    };
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (selectedElement) {
+      highlightRef.current?.show(selectedElement);
+    } else if (!active) {
+      highlightRef.current?.hide();
+    }
+  }, [selectedElement, active]);
+  const handleMouseMove = (0, import_react.useCallback)(
+    (e) => {
+      if (!active || selectedElement) return;
+      const target = e.target;
+      if (target.id === "claude-bridge-highlight" || target.id === "claude-bridge-overlay" || target.closest("#claude-bridge-prompt-dialog")) {
+        return;
+      }
+      if (target === hoveredElementRef.current) return;
+      hoveredElementRef.current = target;
+      highlightRef.current?.show(target);
+    },
+    [active, selectedElement]
+  );
+  const handleClick = (0, import_react.useCallback)(
+    (e) => {
+      if (!active) return;
+      const target = e.target;
+      if (target.id === "claude-bridge-highlight" || target.id === "claude-bridge-overlay" || target.closest("#claude-bridge-prompt-dialog")) {
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+      onElementSelect(target);
+    },
+    [active, onElementSelect]
+  );
+  (0, import_react.useEffect)(() => {
+    if (!active) {
+      highlightRef.current?.hide();
+      return;
+    }
+    document.addEventListener("mousemove", handleMouseMove, true);
+    document.addEventListener("click", handleClick, true);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove, true);
+      document.removeEventListener("click", handleClick, true);
+    };
+  }, [active, handleMouseMove, handleClick]);
+  if (!active) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        id: "claude-bridge-overlay",
+        style: {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          zIndex: 999997,
+          pointerEvents: "none",
+          background: "rgba(0, 0, 0, 0.02)"
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: 16,
+          left: "50%",
+          transform: "translateX(-50%)",
+          zIndex: 999999,
+          background: "#6366f1",
+          color: "white",
+          padding: "8px 16px",
+          borderRadius: 8,
+          fontSize: 14,
+          fontFamily: "system-ui, -apple-system, sans-serif",
+          boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+          display: "flex",
+          alignItems: "center",
+          gap: 8
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
+            {
+              style: {
+                width: 8,
+                height: 8,
+                borderRadius: "50%",
+                background: "#22c55e",
+                animation: "claude-bridge-pulse 1.5s infinite"
+              }
+            }
+          ),
+          "Click an element to select it",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
+            {
+              style: {
+                opacity: 0.7,
+                fontSize: 12,
+                marginLeft: 4
+              },
+              children: "(ESC to cancel)"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
+          @keyframes claude-bridge-pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+          }
+        ` })
+  ] });
+}
+
+// src/PromptDialog.tsx
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function PromptDialog({
+  open,
+  element,
+  onSubmit,
+  onClose,
+  onSwitchToQuestionMode,
+  isSubmitting = false
+}) {
+  const [prompt, setPrompt] = (0, import_react2.useState)("");
+  const inputRef = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
+    if (open && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [open]);
+  (0, import_react2.useEffect)(() => {
+    if (!open) {
+      setPrompt("");
+    }
+  }, [open]);
+  const handleSubmit = () => {
+    if (!prompt.trim() || isSubmitting) return;
+    onSubmit(prompt.trim());
+  };
+  const handleKeyDown = (e) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+      e.preventDefault();
+      handleSubmit();
+    }
+    if (e.key === "Escape") {
+      e.preventDefault();
+      onClose();
+    }
+  };
+  if (!open || !element) return null;
+  const context = captureContext(element);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      id: "claude-bridge-prompt-dialog",
+      style: {
+        position: "fixed",
+        bottom: 24,
+        left: "50%",
+        transform: "translateX(-50%)",
+        zIndex: 1e6,
+        width: "100%",
+        maxWidth: 600,
+        background: "#1e1e2e",
+        borderRadius: 12,
+        boxShadow: "0 8px 32px rgba(0, 0, 0, 0.3)",
+        fontFamily: "system-ui, -apple-system, sans-serif",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "div",
+          {
+            style: {
+              padding: "12px 16px",
+              borderBottom: "1px solid rgba(255, 255, 255, 0.1)",
+              display: "flex",
+              alignItems: "center",
+              gap: 8
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "div",
+                {
+                  style: {
+                    width: 8,
+                    height: 8,
+                    borderRadius: "50%",
+                    background: "#6366f1"
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "span",
+                {
+                  style: {
+                    color: "rgba(255, 255, 255, 0.9)",
+                    fontSize: 13,
+                    fontWeight: 500
+                  },
+                  children: context.componentName || context.selectedElement.tagName
+                }
+              ),
+              context.sourceFile && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                "span",
+                {
+                  style: {
+                    color: "rgba(255, 255, 255, 0.5)",
+                    fontSize: 12,
+                    fontFamily: "ui-monospace, monospace"
+                  },
+                  children: [
+                    context.sourceFile,
+                    context.sourceLine ? `:${context.sourceLine}` : ""
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { flex: 1 } }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "button",
+                {
+                  onClick: onClose,
+                  style: {
+                    background: "transparent",
+                    border: "none",
+                    color: "rgba(255, 255, 255, 0.5)",
+                    cursor: "pointer",
+                    padding: 4,
+                    borderRadius: 4,
+                    fontSize: 18,
+                    lineHeight: 1
+                  },
+                  children: "\xD7"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { padding: 16 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "textarea",
+            {
+              ref: inputRef,
+              value: prompt,
+              onChange: (e) => setPrompt(e.target.value),
+              onKeyDown: handleKeyDown,
+              placeholder: "What would you like Claude to change?",
+              disabled: isSubmitting,
+              style: {
+                width: "100%",
+                minHeight: 80,
+                maxHeight: 200,
+                padding: 12,
+                background: "rgba(255, 255, 255, 0.05)",
+                border: "1px solid rgba(255, 255, 255, 0.1)",
+                borderRadius: 8,
+                color: "white",
+                fontSize: 14,
+                fontFamily: "inherit",
+                resize: "vertical",
+                outline: "none"
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "div",
+            {
+              style: {
+                display: "flex",
+                flexWrap: "wrap",
+                gap: 8,
+                marginTop: 12
+              },
+              children: ["Make this bigger", "Change the color", "Add padding", "Hide this element"].map(
+                (suggestion) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "button",
+                  {
+                    onClick: () => setPrompt(suggestion),
+                    disabled: isSubmitting,
+                    style: {
+                      background: "rgba(255, 255, 255, 0.05)",
+                      border: "1px solid rgba(255, 255, 255, 0.1)",
+                      borderRadius: 4,
+                      padding: "4px 8px",
+                      color: "rgba(255, 255, 255, 0.7)",
+                      fontSize: 12,
+                      cursor: "pointer"
+                    },
+                    children: suggestion
+                  },
+                  suggestion
+                )
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "div",
+          {
+            style: {
+              padding: "12px 16px",
+              borderTop: "1px solid rgba(255, 255, 255, 0.1)",
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                  "span",
+                  {
+                    style: {
+                      color: "rgba(255, 255, 255, 0.4)",
+                      fontSize: 12
+                    },
+                    children: [
+                      navigator.platform.includes("Mac") ? "\u2318" : "Ctrl",
+                      "+Enter to submit"
+                    ]
+                  }
+                ),
+                onSwitchToQuestionMode && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "button",
+                  {
+                    onClick: onSwitchToQuestionMode,
+                    disabled: isSubmitting,
+                    style: {
+                      background: "transparent",
+                      border: "none",
+                      color: "#22c55e",
+                      fontSize: 12,
+                      cursor: "pointer",
+                      padding: 0,
+                      textDecoration: "underline"
+                    },
+                    children: "Just ask a question instead"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "button",
+                {
+                  onClick: handleSubmit,
+                  disabled: !prompt.trim() || isSubmitting,
+                  style: {
+                    background: prompt.trim() && !isSubmitting ? "#6366f1" : "rgba(99, 102, 241, 0.3)",
+                    border: "none",
+                    borderRadius: 6,
+                    padding: "8px 16px",
+                    color: "white",
+                    fontSize: 14,
+                    fontWeight: 500,
+                    cursor: prompt.trim() && !isSubmitting ? "pointer" : "not-allowed",
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 6
+                  },
+                  children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "span",
+                      {
+                        style: {
+                          width: 14,
+                          height: 14,
+                          border: "2px solid rgba(255, 255, 255, 0.3)",
+                          borderTopColor: "white",
+                          borderRadius: "50%",
+                          animation: "claude-bridge-spin 0.8s linear infinite"
+                        }
+                      }
+                    ),
+                    "Sending..."
+                  ] }) : "Send to Claude"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: `
+          @keyframes claude-bridge-spin {
+            to { transform: rotate(360deg); }
+          }
+        ` })
+      ]
+    }
+  );
+}
+
+// src/QuestionDialog.tsx
+var import_react3 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function QuestionDialog({
+  open,
+  selectedElement,
+  onSubmit,
+  onClose,
+  onSwitchToTaskMode,
+  isSubmitting = false
+}) {
+  const [prompt, setPrompt] = (0, import_react3.useState)("");
+  const [includeElement, setIncludeElement] = (0, import_react3.useState)(true);
+  const inputRef = (0, import_react3.useRef)(null);
+  (0, import_react3.useEffect)(() => {
+    if (open && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [open]);
+  (0, import_react3.useEffect)(() => {
+    if (!open) {
+      setPrompt("");
+    }
+  }, [open]);
+  (0, import_react3.useEffect)(() => {
+    setIncludeElement(!!selectedElement);
+  }, [selectedElement]);
+  const handleSubmit = () => {
+    if (!prompt.trim() || isSubmitting) return;
+    onSubmit(prompt.trim(), includeElement && !!selectedElement);
+  };
+  const handleKeyDown = (e) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+      e.preventDefault();
+      handleSubmit();
+    }
+    if (e.key === "Escape") {
+      e.preventDefault();
+      onClose();
+    }
+  };
+  if (!open) return null;
+  const pageContext = capturePageContext();
+  const elementContext = selectedElement ? captureContext(selectedElement) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      id: "claude-bridge-question-dialog",
+      style: {
+        position: "fixed",
+        bottom: 24,
+        left: "50%",
+        transform: "translateX(-50%)",
+        zIndex: 1e6,
+        width: "100%",
+        maxWidth: 600,
+        background: "#1e1e2e",
+        borderRadius: 12,
+        boxShadow: "0 8px 32px rgba(0, 0, 0, 0.3)",
+        fontFamily: "system-ui, -apple-system, sans-serif",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "div",
+          {
+            style: {
+              padding: "12px 16px",
+              borderBottom: "1px solid rgba(255, 255, 255, 0.1)",
+              display: "flex",
+              alignItems: "center",
+              gap: 8
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "div",
+                {
+                  style: {
+                    width: 8,
+                    height: 8,
+                    borderRadius: "50%",
+                    background: "#22c55e"
+                    // Green to differentiate from task dialog
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "span",
+                {
+                  style: {
+                    color: "rgba(255, 255, 255, 0.9)",
+                    fontSize: 13,
+                    fontWeight: 500
+                  },
+                  children: "Ask a Question"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "span",
+                {
+                  style: {
+                    color: "rgba(255, 255, 255, 0.5)",
+                    fontSize: 12
+                  },
+                  children: pageContext.pageTitle
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { flex: 1 } }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "button",
+                {
+                  onClick: onClose,
+                  style: {
+                    background: "transparent",
+                    border: "none",
+                    color: "rgba(255, 255, 255, 0.5)",
+                    cursor: "pointer",
+                    padding: 4,
+                    borderRadius: 4,
+                    fontSize: 18,
+                    lineHeight: 1
+                  },
+                  children: "\xD7"
+                }
+              )
+            ]
+          }
+        ),
+        selectedElement && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            style: {
+              padding: "8px 16px",
+              background: "rgba(34, 197, 94, 0.1)",
+              borderBottom: "1px solid rgba(255, 255, 255, 0.1)",
+              display: "flex",
+              alignItems: "center",
+              gap: 8
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+              "label",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 8,
+                  cursor: "pointer",
+                  flex: 1
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "input",
+                    {
+                      type: "checkbox",
+                      checked: includeElement,
+                      onChange: (e) => setIncludeElement(e.target.checked),
+                      style: { cursor: "pointer" }
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "span",
+                    {
+                      style: {
+                        color: "rgba(255, 255, 255, 0.7)",
+                        fontSize: 12
+                      },
+                      children: "Include selected element:"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                    "span",
+                    {
+                      style: {
+                        color: "rgba(255, 255, 255, 0.9)",
+                        fontSize: 12,
+                        fontFamily: "ui-monospace, monospace"
+                      },
+                      children: [
+                        elementContext?.componentName || elementContext?.selectedElement.tagName,
+                        elementContext?.sourceFile && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { style: { color: "rgba(255, 255, 255, 0.5)", marginLeft: 4 }, children: [
+                          "(",
+                          elementContext.sourceFile,
+                          elementContext.sourceLine ? `:${elementContext.sourceLine}` : "",
+                          ")"
+                        ] })
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { padding: 16 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "textarea",
+            {
+              ref: inputRef,
+              value: prompt,
+              onChange: (e) => setPrompt(e.target.value),
+              onKeyDown: handleKeyDown,
+              placeholder: "Ask a question about this page or codebase...",
+              disabled: isSubmitting,
+              style: {
+                width: "100%",
+                minHeight: 80,
+                maxHeight: 200,
+                padding: 12,
+                background: "rgba(255, 255, 255, 0.05)",
+                border: "1px solid rgba(255, 255, 255, 0.1)",
+                borderRadius: 8,
+                color: "white",
+                fontSize: 14,
+                fontFamily: "inherit",
+                resize: "vertical",
+                outline: "none"
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "div",
+            {
+              style: {
+                display: "flex",
+                flexWrap: "wrap",
+                gap: 8,
+                marginTop: 12
+              },
+              children: [
+                "What does this page do?",
+                "Where are the backend routes?",
+                "How does this component work?",
+                "What API calls does this make?"
+              ].map((suggestion) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "button",
+                {
+                  onClick: () => setPrompt(suggestion),
+                  disabled: isSubmitting,
+                  style: {
+                    background: "rgba(255, 255, 255, 0.05)",
+                    border: "1px solid rgba(255, 255, 255, 0.1)",
+                    borderRadius: 4,
+                    padding: "4px 8px",
+                    color: "rgba(255, 255, 255, 0.7)",
+                    fontSize: 12,
+                    cursor: "pointer"
+                  },
+                  children: suggestion
+                },
+                suggestion
+              ))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "div",
+          {
+            style: {
+              padding: "12px 16px",
+              borderTop: "1px solid rgba(255, 255, 255, 0.1)",
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                  "span",
+                  {
+                    style: {
+                      color: "rgba(255, 255, 255, 0.4)",
+                      fontSize: 12
+                    },
+                    children: [
+                      navigator.platform.includes("Mac") ? "\u2318" : "Ctrl",
+                      "+Enter to submit"
+                    ]
+                  }
+                ),
+                onSwitchToTaskMode && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "button",
+                  {
+                    onClick: onSwitchToTaskMode,
+                    disabled: isSubmitting,
+                    style: {
+                      background: "transparent",
+                      border: "none",
+                      color: "#6366f1",
+                      fontSize: 12,
+                      cursor: "pointer",
+                      padding: 0,
+                      textDecoration: "underline"
+                    },
+                    children: "Make changes instead"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "button",
+                {
+                  onClick: handleSubmit,
+                  disabled: !prompt.trim() || isSubmitting,
+                  style: {
+                    background: prompt.trim() && !isSubmitting ? "#22c55e" : "rgba(34, 197, 94, 0.3)",
+                    border: "none",
+                    borderRadius: 6,
+                    padding: "8px 16px",
+                    color: "white",
+                    fontSize: 14,
+                    fontWeight: 500,
+                    cursor: prompt.trim() && !isSubmitting ? "pointer" : "not-allowed",
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 6
+                  },
+                  children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      "span",
+                      {
+                        style: {
+                          width: 14,
+                          height: 14,
+                          border: "2px solid rgba(255, 255, 255, 0.3)",
+                          borderTopColor: "white",
+                          borderRadius: "50%",
+                          animation: "claude-bridge-spin 0.8s linear infinite"
+                        }
+                      }
+                    ),
+                    "Asking..."
+                  ] }) : "Ask Claude"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { children: `
+          @keyframes claude-bridge-spin {
+            to { transform: rotate(360deg); }
+          }
+        ` })
+      ]
+    }
+  );
+}
+
+// src/TaskStatusToast.tsx
+var import_react5 = require("react");
+
+// src/ClaudeTerminal.tsx
+var import_react4 = require("react");
+var import_xterm = require("@xterm/xterm");
+var import_addon_fit = require("@xterm/addon-fit");
+var import_addon_webgl = require("@xterm/addon-webgl");
+var import_xterm2 = require("@xterm/xterm/css/xterm.css");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var XTERM_CRITICAL_CSS = `
+.xterm {
+  cursor: text;
+  position: relative;
+  user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+}
+.xterm.focus,
+.xterm:focus {
+  outline: none;
+}
+.xterm .xterm-helpers {
+  position: absolute;
+  top: 0;
+  z-index: 5;
+}
+.xterm .xterm-helper-textarea {
+  padding: 0;
+  border: 0;
+  margin: 0;
+  position: absolute;
+  opacity: 0;
+  left: -9999em;
+  top: 0;
+  width: 0;
+  height: 0;
+  z-index: -5;
+  white-space: nowrap;
+  overflow: hidden;
+  resize: none;
+}
+.xterm .xterm-helper-textarea:focus {
+  outline: none;
+}
+.xterm .composition-view {
+  background: #000;
+  color: #FFF;
+  display: none;
+  position: absolute;
+  white-space: nowrap;
+  z-index: 1;
+}
+.xterm .composition-view.active {
+  display: block;
+}
+.xterm .xterm-viewport {
+  background-color: #000;
+  overflow-y: scroll;
+  cursor: default;
+  position: absolute;
+  right: 0;
+  left: 0;
+  top: 0;
+  bottom: 0;
+}
+.xterm .xterm-screen {
+  position: relative;
+}
+.xterm .xterm-screen canvas {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.xterm-char-measure-element {
+  display: inline-block;
+  visibility: hidden;
+  position: absolute;
+  top: 0;
+  left: -9999em;
+  line-height: normal;
+}
+.xterm.enable-mouse-events {
+  cursor: default;
+}
+.xterm .xterm-cursor-pointer {
+  cursor: pointer;
+}
+.xterm.xterm-cursor-style-block .xterm-cursor:not(.xterm-cursor-blink),
+.xterm.xterm-cursor-style-bar .xterm-cursor:not(.xterm-cursor-blink),
+.xterm.xterm-cursor-style-underline .xterm-cursor:not(.xterm-cursor-blink) {
+  visibility: visible;
+}
+`;
+function ClaudeTerminal({
+  serverUrl,
+  token,
+  sessionId,
+  onSessionSelect,
+  onConnectionChange,
+  onSessionsUpdate,
+  terminalOptions = {},
+  style,
+  className
+}) {
+  const containerRef = (0, import_react4.useRef)(null);
+  const terminalRef = (0, import_react4.useRef)(null);
+  const fitAddonRef = (0, import_react4.useRef)(null);
+  const wsRef = (0, import_react4.useRef)(null);
+  const handleMessageRef = (0, import_react4.useRef)(null);
+  const [connected, setConnected] = (0, import_react4.useState)(false);
+  const [sessions, setSessions] = (0, import_react4.useState)([]);
+  const [attachedSessionId, setAttachedSessionId] = (0, import_react4.useState)(null);
+  const [error, setError] = (0, import_react4.useState)(null);
+  (0, import_react4.useEffect)(() => {
+    if (!containerRef.current) return;
+    const terminal = new import_xterm.Terminal({
+      cursorBlink: true,
+      cursorStyle: "block",
+      fontSize: terminalOptions.fontSize ?? 14,
+      fontFamily: terminalOptions.fontFamily ?? 'Menlo, Monaco, "Courier New", monospace',
+      theme: {
+        background: terminalOptions.theme?.background ?? "#1a1a1a",
+        foreground: terminalOptions.theme?.foreground ?? "#f0f0f0",
+        cursor: terminalOptions.theme?.cursor ?? "#f0f0f0",
+        cursorAccent: "#1a1a1a",
+        black: "#1a1a1a",
+        red: "#ff5555",
+        green: "#50fa7b",
+        yellow: "#f1fa8c",
+        blue: "#6272a4",
+        magenta: "#ff79c6",
+        cyan: "#8be9fd",
+        white: "#f8f8f2",
+        brightBlack: "#6272a4",
+        brightRed: "#ff6e6e",
+        brightGreen: "#69ff94",
+        brightYellow: "#ffffa5",
+        brightBlue: "#d6acff",
+        brightMagenta: "#ff92df",
+        brightCyan: "#a4ffff",
+        brightWhite: "#ffffff"
+      },
+      allowProposedApi: true,
+      scrollback: 1e4,
+      disableStdin: false,
+      allowTransparency: true
+    });
+    const fitAddon = new import_addon_fit.FitAddon();
+    terminal.loadAddon(fitAddon);
+    terminal.open(containerRef.current);
+    try {
+      const webglAddon = new import_addon_webgl.WebglAddon();
+      webglAddon.onContextLoss(() => {
+        webglAddon.dispose();
+      });
+      terminal.loadAddon(webglAddon);
+    } catch (e) {
+      console.warn("[ClaudeTerminal] WebGL addon could not be loaded:", e);
+    }
+    terminalRef.current = terminal;
+    fitAddonRef.current = fitAddon;
+    requestAnimationFrame(() => {
+      fitAddon.fit();
+    });
+    const resizeObserver = new ResizeObserver(() => {
+      requestAnimationFrame(() => {
+        fitAddon.fit();
+        if (wsRef.current?.readyState === WebSocket.OPEN && attachedSessionId) {
+          wsRef.current.send(JSON.stringify({
+            type: "terminal_resize",
+            sessionId: attachedSessionId,
+            cols: terminal.cols,
+            rows: terminal.rows
+          }));
+        }
+      });
+    });
+    resizeObserver.observe(containerRef.current);
+    return () => {
+      resizeObserver.disconnect();
+      terminal.dispose();
+      terminalRef.current = null;
+      fitAddonRef.current = null;
+    };
+  }, [terminalOptions.fontSize, terminalOptions.fontFamily, terminalOptions.theme]);
+  (0, import_react4.useEffect)(() => {
+    const terminal = terminalRef.current;
+    if (!terminal) return;
+    const disposable = terminal.onData((data) => {
+      if (wsRef.current?.readyState === WebSocket.OPEN && attachedSessionId) {
+        wsRef.current.send(JSON.stringify({
+          type: "terminal_input",
+          sessionId: attachedSessionId,
+          data
+        }));
+      }
+    });
+    return () => disposable.dispose();
+  }, [attachedSessionId]);
+  const attachedSessionIdRef = (0, import_react4.useRef)(null);
+  attachedSessionIdRef.current = attachedSessionId;
+  (0, import_react4.useEffect)(() => {
+    handleMessageRef.current = (event) => {
+      try {
+        const message = JSON.parse(event.data);
+        switch (message.type) {
+          case "connected":
+            wsRef.current?.send(JSON.stringify({ type: "get_sessions" }));
+            break;
+          case "sessions_list":
+            if (message.sessions) {
+              setSessions(message.sessions);
+              onSessionsUpdate?.(message.sessions);
+            }
+            break;
+          case "terminal_attached":
+            if (message.sessionId) {
+              setAttachedSessionId(message.sessionId);
+              setError(null);
+              if (message.scrollback && terminalRef.current) {
+                terminalRef.current.write(message.scrollback);
+              }
+              if (fitAddonRef.current && terminalRef.current) {
+                fitAddonRef.current.fit();
+                wsRef.current?.send(JSON.stringify({
+                  type: "terminal_resize",
+                  sessionId: message.sessionId,
+                  cols: terminalRef.current.cols,
+                  rows: terminalRef.current.rows
+                }));
+              }
+            }
+            break;
+          case "terminal_output":
+            if (message.data && terminalRef.current && message.sessionId === attachedSessionIdRef.current) {
+              terminalRef.current.write(message.data);
+            }
+            break;
+          case "terminal_detached":
+            if (message.sessionId === attachedSessionIdRef.current) {
+              setAttachedSessionId(null);
+            }
+            break;
+          case "error":
+            setError(message.error || "Unknown error");
+            console.error("[ClaudeTerminal] Error:", message.error);
+            break;
+          case "pong":
+            break;
+        }
+      } catch (e) {
+        console.error("[ClaudeTerminal] Failed to parse message:", e);
+      }
+    };
+  }, [onSessionsUpdate]);
+  (0, import_react4.useEffect)(() => {
+    const wsUrl = serverUrl.replace(/^http/, "ws").replace(/\/$/, "");
+    const ws = new WebSocket(`${wsUrl}/ws/bridge?token=${encodeURIComponent(token)}`);
+    ws.onopen = () => {
+      setConnected(true);
+      setError(null);
+      onConnectionChange?.(true);
+    };
+    ws.onmessage = (event) => {
+      handleMessageRef.current?.(event);
+    };
+    ws.onclose = () => {
+      setConnected(false);
+      setAttachedSessionId(null);
+      onConnectionChange?.(false);
+    };
+    ws.onerror = () => {
+      setError("WebSocket connection error");
+    };
+    wsRef.current = ws;
+    const pingInterval = setInterval(() => {
+      if (ws.readyState === WebSocket.OPEN) {
+        ws.send(JSON.stringify({ type: "ping" }));
+      }
+    }, 3e4);
+    return () => {
+      clearInterval(pingInterval);
+      ws.close();
+      wsRef.current = null;
+    };
+  }, [serverUrl, token, onConnectionChange]);
+  (0, import_react4.useEffect)(() => {
+    if (sessionId && connected && !attachedSessionId) {
+      wsRef.current?.send(JSON.stringify({
+        type: "attach_terminal",
+        sessionId
+      }));
+    }
+  }, [sessionId, connected, attachedSessionId]);
+  (0, import_react4.useEffect)(() => {
+    if (attachedSessionId && terminalRef.current && fitAddonRef.current) {
+      const timer = setTimeout(() => {
+        fitAddonRef.current?.fit();
+        terminalRef.current?.focus();
+      }, 50);
+      return () => clearTimeout(timer);
+    }
+  }, [attachedSessionId]);
+  const handleContainerClick = (0, import_react4.useCallback)(() => {
+    terminalRef.current?.focus();
+  }, []);
+  const handleSelectSession = (0, import_react4.useCallback)((session) => {
+    terminalRef.current?.clear();
+    if (attachedSessionId) {
+      wsRef.current?.send(JSON.stringify({
+        type: "detach_terminal",
+        sessionId: attachedSessionId
+      }));
+    }
+    wsRef.current?.send(JSON.stringify({
+      type: "attach_terminal",
+      sessionId: session.id
+    }));
+    onSessionSelect?.(session);
+  }, [attachedSessionId, onSessionSelect]);
+  if (!sessionId && !attachedSessionId) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        className,
+        style: {
+          background: "#1a1a1a",
+          color: "#f0f0f0",
+          padding: "20px",
+          fontFamily: 'Menlo, Monaco, "Courier New", monospace',
+          ...style
+        },
+        children: !connected ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { children: "Connecting to server..." }) : error ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { color: "#ff5555" }, children: [
+          "Error: ",
+          error
+        ] }) : sessions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { children: "No Claude sessions available" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { marginBottom: "10px", fontSize: "14px" }, children: "Select a Claude session:" }),
+          sessions.map((session) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            "div",
+            {
+              onClick: () => handleSelectSession(session),
+              style: {
+                padding: "10px",
+                margin: "5px 0",
+                background: "#2a2a2a",
+                borderRadius: "4px",
+                cursor: "pointer",
+                border: "1px solid #3a3a3a"
+              },
+              onMouseOver: (e) => {
+                e.currentTarget.style.background = "#3a3a3a";
+              },
+              onMouseOut: (e) => {
+                e.currentTarget.style.background = "#2a2a2a";
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontWeight: "bold" }, children: session.displayName || session.name }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: "12px", color: "#888", marginTop: "4px" }, children: session.workingDir })
+              ]
+            },
+            session.id
+          ))
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: XTERM_CRITICAL_CSS }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        ref: containerRef,
+        className,
+        onClick: handleContainerClick,
+        style: {
+          width: "100%",
+          height: "100%",
+          ...style
+        }
+      }
+    )
+  ] });
+}
+
+// src/TaskStatusToast.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var MIN_WIDTH = 400;
+var MIN_HEIGHT = 300;
+var DEFAULT_WIDTH = 700;
+var DEFAULT_HEIGHT = 500;
+function TaskStatusToast({
+  task,
+  serverUrl,
+  token,
+  onDismiss,
+  killOnClose = true
+}) {
+  const [visible, setVisible] = (0, import_react5.useState)(false);
+  const [expanded, setExpanded] = (0, import_react5.useState)(false);
+  const [size, setSize] = (0, import_react5.useState)({ width: DEFAULT_WIDTH, height: DEFAULT_HEIGHT });
+  const [isResizing, setIsResizing] = (0, import_react5.useState)(false);
+  const resizeRef = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
+    if (task) {
+      setVisible(true);
+      if (task.sessionId && (task.status === "running" || task.status === "starting")) {
+        setExpanded(true);
+      }
+    }
+  }, [task, task?.sessionId, task?.status]);
+  (0, import_react5.useEffect)(() => {
+    if (task && !expanded && (task.status === "completed" || task.status === "failed")) {
+      const timer = setTimeout(() => {
+        setVisible(false);
+        setTimeout(onDismiss, 300);
+      }, 1e4);
+      return () => clearTimeout(timer);
+    }
+  }, [task?.status, expanded, onDismiss]);
+  const handleResizeStart = (0, import_react5.useCallback)((e, direction) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsResizing(true);
+    resizeRef.current = {
+      startX: e.clientX,
+      startY: e.clientY,
+      startWidth: size.width,
+      startHeight: size.height
+    };
+    const handleMouseMove = (moveEvent) => {
+      if (!resizeRef.current) return;
+      let newWidth = resizeRef.current.startWidth;
+      let newHeight = resizeRef.current.startHeight;
+      if (direction.includes("w")) {
+        newWidth = resizeRef.current.startWidth - (moveEvent.clientX - resizeRef.current.startX);
+      }
+      if (direction.includes("n")) {
+        newHeight = resizeRef.current.startHeight - (moveEvent.clientY - resizeRef.current.startY);
+      }
+      setSize({
+        width: Math.max(MIN_WIDTH, newWidth),
+        height: Math.max(MIN_HEIGHT, newHeight)
+      });
+    };
+    const handleMouseUp = () => {
+      setIsResizing(false);
+      resizeRef.current = null;
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+  }, [size]);
+  const killSession = (0, import_react5.useCallback)((sessionId) => {
+    return new Promise((resolve) => {
+      const wsUrl = serverUrl.replace(/^http/, "ws").replace(/\/$/, "");
+      const ws = new WebSocket(`${wsUrl}/ws/bridge?token=${encodeURIComponent(token)}`);
+      ws.onopen = () => {
+        ws.send(JSON.stringify({
+          type: "kill_session",
+          sessionId
+        }));
+        setTimeout(() => {
+          ws.close();
+          resolve();
+        }, 100);
+      };
+      ws.onerror = () => {
+        ws.close();
+        resolve();
+      };
+      setTimeout(() => {
+        if (ws.readyState !== WebSocket.CLOSED) {
+          ws.close();
+        }
+        resolve();
+      }, 2e3);
+    });
+  }, [serverUrl, token]);
+  const handleDismiss = (0, import_react5.useCallback)(async () => {
+    if (killOnClose && task?.sessionId) {
+      await killSession(task.sessionId);
+    }
+    setVisible(false);
+    setExpanded(false);
+    setTimeout(onDismiss, 300);
+  }, [killOnClose, task?.sessionId, killSession, onDismiss]);
+  const handleToggleExpand = (0, import_react5.useCallback)(() => {
+    setExpanded(!expanded);
+  }, [expanded]);
+  if (!task || !visible) return null;
+  const statusColors = {
+    queued: { bg: "#6366f1", text: "Queued" },
+    starting: { bg: "#f59e0b", text: "Starting..." },
+    running: { bg: "#22c55e", text: "Running" },
+    completed: { bg: "#22c55e", text: "Completed" },
+    failed: { bg: "#ef4444", text: "Failed" }
+  };
+  const status = statusColors[task.status] || statusColors.queued;
+  const zedUrl = task.sessionId ? `${serverUrl}?token=${encodeURIComponent(token)}&session=${task.sessionId}` : `${serverUrl}?token=${encodeURIComponent(token)}`;
+  const handleOpenZed = () => {
+    window.open(zedUrl, "_blank");
+  };
+  if (!expanded) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          bottom: 24,
+          right: 24,
+          zIndex: 1000001,
+          background: "#1e1e2e",
+          borderRadius: 12,
+          boxShadow: "0 8px 32px rgba(0, 0, 0, 0.3)",
+          fontFamily: "system-ui, -apple-system, sans-serif",
+          minWidth: 320,
+          maxWidth: 400,
+          opacity: visible ? 1 : 0,
+          transform: visible ? "translateY(0)" : "translateY(20px)",
+          transition: "opacity 0.3s, transform 0.3s"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            "div",
+            {
+              style: {
+                padding: "12px 16px",
+                borderBottom: "1px solid rgba(255, 255, 255, 0.1)",
+                display: "flex",
+                alignItems: "center",
+                gap: 10
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "div",
+                  {
+                    style: {
+                      width: 10,
+                      height: 10,
+                      borderRadius: "50%",
+                      background: status.bg,
+                      animation: task.status === "running" || task.status === "starting" ? "claude-bridge-pulse 1.5s infinite" : "none"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                  "span",
+                  {
+                    style: {
+                      color: "rgba(255, 255, 255, 0.9)",
+                      fontSize: 14,
+                      fontWeight: 500,
+                      flex: 1
+                    },
+                    children: [
+                      "Claude Task: ",
+                      status.text
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "button",
+                  {
+                    onClick: handleDismiss,
+                    style: {
+                      background: "transparent",
+                      border: "none",
+                      color: "rgba(255, 255, 255, 0.5)",
+                      cursor: "pointer",
+                      padding: 4,
+                      fontSize: 18,
+                      lineHeight: 1
+                    },
+                    children: "\xD7"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { padding: "12px 16px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "p",
+              {
+                style: {
+                  color: "rgba(255, 255, 255, 0.7)",
+                  fontSize: 13,
+                  margin: 0,
+                  lineHeight: 1.5,
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  display: "-webkit-box",
+                  WebkitLineClamp: 2,
+                  WebkitBoxOrient: "vertical"
+                },
+                children: task.prompt
+              }
+            ),
+            task.error && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+              "p",
+              {
+                style: {
+                  color: "#ef4444",
+                  fontSize: 12,
+                  margin: "8px 0 0"
+                },
+                children: [
+                  "Error: ",
+                  task.error
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            "div",
+            {
+              style: {
+                padding: "12px 16px",
+                borderTop: "1px solid rgba(255, 255, 255, 0.1)",
+                display: "flex",
+                justifyContent: "flex-end",
+                gap: 8
+              },
+              children: [
+                task.sessionId && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "button",
+                  {
+                    onClick: handleToggleExpand,
+                    style: {
+                      background: "#374151",
+                      border: "none",
+                      borderRadius: 6,
+                      padding: "8px 16px",
+                      color: "white",
+                      fontSize: 13,
+                      fontWeight: 500,
+                      cursor: "pointer",
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 6
+                    },
+                    children: "Show Terminal"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                  "button",
+                  {
+                    onClick: handleOpenZed,
+                    style: {
+                      background: "#6366f1",
+                      border: "none",
+                      borderRadius: 6,
+                      padding: "8px 16px",
+                      color: "white",
+                      fontSize: 13,
+                      fontWeight: 500,
+                      cursor: "pointer",
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 6
+                    },
+                    children: [
+                      "Open in Zed Controller",
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { fontSize: 11 }, children: "\u2197" })
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: `
+            @keyframes claude-bridge-pulse {
+              0%, 100% { opacity: 1; }
+              50% { opacity: 0.5; }
+            }
+          ` })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        bottom: 24,
+        right: 24,
+        zIndex: 1000001,
+        width: size.width,
+        height: size.height,
+        background: "#1e1e2e",
+        borderRadius: 12,
+        boxShadow: "0 8px 32px rgba(0, 0, 0, 0.4)",
+        fontFamily: "system-ui, -apple-system, sans-serif",
+        display: "flex",
+        flexDirection: "column",
+        opacity: visible ? 1 : 0,
+        transition: isResizing ? "none" : "opacity 0.3s",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "div",
+          {
+            onMouseDown: (e) => handleResizeStart(e, "n"),
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 20,
+              right: 20,
+              height: 6,
+              cursor: "ns-resize",
+              zIndex: 10
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "div",
+          {
+            onMouseDown: (e) => handleResizeStart(e, "w"),
+            style: {
+              position: "absolute",
+              left: 0,
+              top: 20,
+              bottom: 20,
+              width: 6,
+              cursor: "ew-resize",
+              zIndex: 10
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "div",
+          {
+            onMouseDown: (e) => handleResizeStart(e, "nw"),
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: 20,
+              height: 20,
+              cursor: "nwse-resize",
+              zIndex: 11
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "div",
+          {
+            style: {
+              padding: "10px 16px",
+              borderBottom: "1px solid rgba(255, 255, 255, 0.1)",
+              display: "flex",
+              alignItems: "center",
+              gap: 10,
+              flexShrink: 0
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "div",
+                {
+                  style: {
+                    width: 10,
+                    height: 10,
+                    borderRadius: "50%",
+                    background: status.bg,
+                    animation: task.status === "running" || task.status === "starting" ? "claude-bridge-pulse 1.5s infinite" : "none"
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                "span",
+                {
+                  style: {
+                    color: "rgba(255, 255, 255, 0.9)",
+                    fontSize: 14,
+                    fontWeight: 500,
+                    flex: 1,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap"
+                  },
+                  title: task.prompt,
+                  children: [
+                    status.text,
+                    ": ",
+                    task.prompt.slice(0, 50),
+                    task.prompt.length > 50 ? "..." : ""
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "button",
+                {
+                  onClick: handleToggleExpand,
+                  title: "Minimize",
+                  style: {
+                    background: "transparent",
+                    border: "none",
+                    color: "rgba(255, 255, 255, 0.5)",
+                    cursor: "pointer",
+                    padding: 4,
+                    fontSize: 14,
+                    lineHeight: 1
+                  },
+                  children: "\u2212"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "button",
+                {
+                  onClick: handleOpenZed,
+                  title: "Open in Zed Controller",
+                  style: {
+                    background: "transparent",
+                    border: "none",
+                    color: "rgba(255, 255, 255, 0.5)",
+                    cursor: "pointer",
+                    padding: 4,
+                    fontSize: 14,
+                    lineHeight: 1
+                  },
+                  children: "\u2197"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "button",
+                {
+                  onClick: handleDismiss,
+                  title: "Close",
+                  style: {
+                    background: "transparent",
+                    border: "none",
+                    color: "rgba(255, 255, 255, 0.5)",
+                    cursor: "pointer",
+                    padding: 4,
+                    fontSize: 18,
+                    lineHeight: 1
+                  },
+                  children: "\xD7"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { flex: 1, minHeight: 0 }, children: task.sessionId ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          ClaudeTerminal,
+          {
+            serverUrl,
+            token,
+            sessionId: task.sessionId,
+            style: { width: "100%", height: "100%" }
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              height: "100%",
+              color: "rgba(255, 255, 255, 0.5)"
+            },
+            children: "Waiting for session..."
+          }
+        ) }),
+        task.error && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "div",
+          {
+            style: {
+              padding: "8px 16px",
+              background: "rgba(239, 68, 68, 0.2)",
+              borderTop: "1px solid rgba(239, 68, 68, 0.3)",
+              color: "#ef4444",
+              fontSize: 12,
+              flexShrink: 0
+            },
+            children: [
+              "Error: ",
+              task.error
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: `
+          @keyframes claude-bridge-pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+          }
+        ` })
+      ]
+    }
+  );
+}
+
+// src/ClaudeBridgeProvider.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var initialState = {
+  connected: false,
+  selectionMode: false,
+  questionMode: false,
+  selectedElement: null,
+  activeTask: null,
+  tasks: []
+};
+function reducer(state, action) {
+  switch (action.type) {
+    case "SET_CONNECTED":
+      return { ...state, connected: action.connected };
+    case "SET_SELECTION_MODE":
+      return {
+        ...state,
+        selectionMode: action.enabled,
+        questionMode: action.enabled ? false : state.questionMode,
+        // Turn off question mode when entering selection mode
+        selectedElement: action.enabled ? state.selectedElement : null
+      };
+    case "SET_QUESTION_MODE":
+      return {
+        ...state,
+        questionMode: action.enabled,
+        selectionMode: action.enabled ? false : state.selectionMode
+        // Turn off selection mode when entering question mode
+      };
+    case "SET_SELECTED_ELEMENT":
+      return { ...state, selectedElement: action.element };
+    case "SET_ACTIVE_TASK":
+      return { ...state, activeTask: action.task };
+    case "ADD_TASK":
+      return { ...state, tasks: [...state.tasks, action.task] };
+    case "UPDATE_TASK":
+      return {
+        ...state,
+        tasks: state.tasks.map(
+          (t) => t.id === action.taskId ? { ...t, ...action.updates } : t
+        ),
+        activeTask: state.activeTask?.id === action.taskId ? { ...state.activeTask, ...action.updates } : state.activeTask
+      };
+    case "CLEAR_TASKS":
+      return { ...state, tasks: [], activeTask: null };
+    default:
+      return state;
+  }
+}
+var ClaudeBridgeContext = (0, import_react6.createContext)(null);
+function ClaudeBridgeProvider({
+  children,
+  serverUrl,
+  token,
+  enabled = true,
+  projectRoot,
+  shortcut = "Meta+Shift+K",
+  questionShortcut = "Meta+Shift+?",
+  onTaskCreated,
+  onTaskProgress,
+  onTaskCompleted,
+  onTaskFailed,
+  onError
+}) {
+  const [state, dispatch] = (0, import_react6.useReducer)(reducer, initialState);
+  const wsClientRef = (0, import_react6.useRef)(null);
+  const pendingTaskResolveRef = (0, import_react6.useRef)(null);
+  const config = {
+    serverUrl,
+    token,
+    enabled,
+    projectRoot,
+    shortcut,
+    questionShortcut,
+    onTaskCreated,
+    onTaskProgress,
+    onTaskCompleted,
+    onTaskFailed,
+    onError
+  };
+  (0, import_react6.useEffect)(() => {
+    if (!enabled) return;
+    const client = new BridgeWebSocketClient(config);
+    wsClientRef.current = client;
+    const unsubConnection = client.onConnection((connected) => {
+      dispatch({ type: "SET_CONNECTED", connected });
+    });
+    const unsubMessage = client.onMessage((message) => {
+      handleMessage(message);
+    });
+    client.connect();
+    return () => {
+      unsubConnection();
+      unsubMessage();
+      client.disconnect();
+      wsClientRef.current = null;
+    };
+  }, [enabled, serverUrl, token]);
+  const handleMessage = (0, import_react6.useCallback)((message) => {
+    switch (message.type) {
+      case "task_created":
+        if (message.task) {
+          dispatch({ type: "ADD_TASK", task: message.task });
+          dispatch({ type: "SET_ACTIVE_TASK", task: message.task });
+          onTaskCreated?.(message.task.id);
+          pendingTaskResolveRef.current?.(message.task.id);
+          pendingTaskResolveRef.current = null;
+        }
+        break;
+      case "task_progress":
+        if (message.taskId && message.output) {
+          dispatch({
+            type: "UPDATE_TASK",
+            taskId: message.taskId,
+            updates: { status: "running" }
+          });
+          onTaskProgress?.(message.taskId, message.output);
+        }
+        break;
+      case "task_completed":
+        if (message.taskId) {
+          dispatch({
+            type: "UPDATE_TASK",
+            taskId: message.taskId,
+            updates: {
+              status: "completed",
+              completedAt: (/* @__PURE__ */ new Date()).toISOString()
+            }
+          });
+          onTaskCompleted?.(message.taskId);
+        }
+        break;
+      case "task_failed":
+        if (message.taskId) {
+          dispatch({
+            type: "UPDATE_TASK",
+            taskId: message.taskId,
+            updates: {
+              status: "failed",
+              error: message.error,
+              completedAt: (/* @__PURE__ */ new Date()).toISOString()
+            }
+          });
+          onTaskFailed?.(message.taskId, message.error || "Unknown error");
+          pendingTaskResolveRef.current?.(null);
+          pendingTaskResolveRef.current = null;
+        }
+        break;
+      case "pong":
+        break;
+      default:
+        console.log("[ClaudeBridge] Unknown message type:", message.type);
+    }
+  }, [onTaskCreated, onTaskProgress, onTaskCompleted, onTaskFailed]);
+  const matchesShortcut = (0, import_react6.useCallback)((e, shortcutStr) => {
+    const keys = shortcutStr.split("+");
+    const requiresMeta = keys.includes("Meta");
+    const requiresCtrl = keys.includes("Ctrl");
+    const requiresShift = keys.includes("Shift");
+    const requiresAlt = keys.includes("Alt");
+    const key = keys.find((k) => !["Meta", "Ctrl", "Shift", "Alt"].includes(k));
+    return (requiresMeta ? e.metaKey : true) && (requiresCtrl ? e.ctrlKey : true) && (requiresShift ? e.shiftKey : true) && (requiresAlt ? e.altKey : true) && e.key.toUpperCase() === key?.toUpperCase();
+  }, []);
+  (0, import_react6.useEffect)(() => {
+    if (!enabled) return;
+    const handleKeyDown = (e) => {
+      if (matchesShortcut(e, shortcut)) {
+        e.preventDefault();
+        if (!state.selectionMode) {
+          dispatch({ type: "SET_ACTIVE_TASK", task: null });
+        }
+        dispatch({ type: "SET_SELECTION_MODE", enabled: !state.selectionMode });
+        return;
+      }
+      if (matchesShortcut(e, questionShortcut)) {
+        e.preventDefault();
+        if (!state.questionMode) {
+          dispatch({ type: "SET_ACTIVE_TASK", task: null });
+        }
+        dispatch({ type: "SET_QUESTION_MODE", enabled: !state.questionMode });
+        return;
+      }
+      if (e.key === "Escape") {
+        if (state.selectionMode) {
+          dispatch({ type: "SET_SELECTION_MODE", enabled: false });
+        }
+        if (state.questionMode) {
+          dispatch({ type: "SET_QUESTION_MODE", enabled: false });
+        }
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [enabled, shortcut, questionShortcut, state.selectionMode, state.questionMode, matchesShortcut]);
+  const enableSelectionMode = (0, import_react6.useCallback)(() => {
+    dispatch({ type: "SET_ACTIVE_TASK", task: null });
+    dispatch({ type: "SET_SELECTION_MODE", enabled: true });
+  }, []);
+  const disableSelectionMode = (0, import_react6.useCallback)(() => {
+    dispatch({ type: "SET_SELECTION_MODE", enabled: false });
+  }, []);
+  const enableQuestionMode = (0, import_react6.useCallback)(() => {
+    dispatch({ type: "SET_ACTIVE_TASK", task: null });
+    dispatch({ type: "SET_QUESTION_MODE", enabled: true });
+  }, []);
+  const disableQuestionMode = (0, import_react6.useCallback)(() => {
+    dispatch({ type: "SET_QUESTION_MODE", enabled: false });
+  }, []);
+  const submitTask = (0, import_react6.useCallback)(async (prompt) => {
+    if (!state.selectedElement || !wsClientRef.current?.isConnected) {
+      return null;
+    }
+    const context = captureContext(state.selectedElement);
+    console.log("[ClaudeBridge] submitTask captured context:", {
+      sourceFile: context.sourceFile,
+      sourceLine: context.sourceLine,
+      componentName: context.componentName,
+      element: state.selectedElement.tagName
+    });
+    const screenshot = await captureElementScreenshot(state.selectedElement);
+    const fullContext = {
+      ...context,
+      screenshot
+    };
+    const taskIdPromise = new Promise((resolve) => {
+      pendingTaskResolveRef.current = resolve;
+      setTimeout(() => {
+        if (pendingTaskResolveRef.current === resolve) {
+          pendingTaskResolveRef.current = null;
+          resolve(null);
+        }
+      }, 1e4);
+    });
+    const sent = wsClientRef.current.createTask(prompt, fullContext);
+    if (!sent) {
+      pendingTaskResolveRef.current = null;
+      return null;
+    }
+    dispatch({ type: "SET_SELECTION_MODE", enabled: false });
+    return taskIdPromise;
+  }, [state.selectedElement]);
+  const continueTask = (0, import_react6.useCallback)(async (taskId, prompt) => {
+    if (!wsClientRef.current?.isConnected) {
+      throw new Error("Not connected");
+    }
+    let context = void 0;
+    if (state.selectedElement) {
+      const baseContext = captureContext(state.selectedElement);
+      const screenshot = await captureElementScreenshot(state.selectedElement);
+      context = { ...baseContext, screenshot };
+    }
+    const sent = wsClientRef.current.continueTask(taskId, prompt, context);
+    if (!sent) {
+      throw new Error("Failed to send continue task message");
+    }
+  }, [state.selectedElement]);
+  const submitQuestion = (0, import_react6.useCallback)(async (prompt, includeSelectedElement = false) => {
+    if (!wsClientRef.current?.isConnected) {
+      return null;
+    }
+    let context;
+    if (includeSelectedElement && state.selectedElement) {
+      const baseContext = captureContext(state.selectedElement);
+      const screenshot = await captureElementScreenshot(state.selectedElement);
+      context = { ...baseContext, screenshot };
+    } else {
+      context = capturePageContext();
+    }
+    const questionPrompt = `[QUESTION - No code changes expected, just provide information]
+
+${prompt}`;
+    const taskIdPromise = new Promise((resolve) => {
+      pendingTaskResolveRef.current = resolve;
+      setTimeout(() => {
+        if (pendingTaskResolveRef.current === resolve) {
+          pendingTaskResolveRef.current = null;
+          resolve(null);
+        }
+      }, 1e4);
+    });
+    const sent = wsClientRef.current.createTask(questionPrompt, context);
+    if (!sent) {
+      pendingTaskResolveRef.current = null;
+      return null;
+    }
+    dispatch({ type: "SET_QUESTION_MODE", enabled: false });
+    return taskIdPromise;
+  }, [state.selectedElement]);
+  const handleElementSelect = (0, import_react6.useCallback)((element) => {
+    dispatch({ type: "SET_SELECTED_ELEMENT", element });
+  }, []);
+  const handlePromptSubmit = (0, import_react6.useCallback)(async (prompt) => {
+    await submitTask(prompt);
+  }, [submitTask]);
+  const handlePromptClose = (0, import_react6.useCallback)(() => {
+    dispatch({ type: "SET_SELECTED_ELEMENT", element: null });
+  }, []);
+  const handleQuestionSubmit = (0, import_react6.useCallback)(async (prompt, includeElement) => {
+    await submitQuestion(prompt, includeElement);
+  }, [submitQuestion]);
+  const handleQuestionClose = (0, import_react6.useCallback)(() => {
+    dispatch({ type: "SET_QUESTION_MODE", enabled: false });
+  }, []);
+  const handleSwitchToQuestionMode = (0, import_react6.useCallback)(() => {
+    dispatch({ type: "SET_QUESTION_MODE", enabled: true });
+  }, []);
+  const handleSwitchToTaskMode = (0, import_react6.useCallback)(() => {
+    dispatch({ type: "SET_QUESTION_MODE", enabled: false });
+    if (!state.selectedElement) {
+      dispatch({ type: "SET_SELECTION_MODE", enabled: true });
+    }
+  }, [state.selectedElement]);
+  const handleToastDismiss = (0, import_react6.useCallback)(() => {
+    dispatch({ type: "SET_ACTIVE_TASK", task: null });
+  }, []);
+  const contextValue = {
+    state,
+    config,
+    enableSelectionMode,
+    disableSelectionMode,
+    enableQuestionMode,
+    disableQuestionMode,
+    submitTask,
+    submitQuestion,
+    continueTask
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(ClaudeBridgeContext.Provider, { value: contextValue, children: [
+    children,
+    enabled && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        SelectionOverlay,
+        {
+          active: state.selectionMode,
+          onElementSelect: handleElementSelect,
+          selectedElement: state.selectedElement
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        PromptDialog,
+        {
+          open: state.selectedElement !== null && !state.questionMode,
+          element: state.selectedElement,
+          onSubmit: handlePromptSubmit,
+          onClose: handlePromptClose,
+          onSwitchToQuestionMode: handleSwitchToQuestionMode,
+          isSubmitting: state.activeTask?.status === "starting" || state.activeTask?.status === "running"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        QuestionDialog,
+        {
+          open: state.questionMode,
+          selectedElement: state.selectedElement,
+          onSubmit: handleQuestionSubmit,
+          onClose: handleQuestionClose,
+          onSwitchToTaskMode: handleSwitchToTaskMode,
+          isSubmitting: state.activeTask?.status === "starting" || state.activeTask?.status === "running"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        TaskStatusToast,
+        {
+          task: state.activeTask,
+          serverUrl,
+          token,
+          onDismiss: handleToastDismiss
+        }
+      )
+    ] })
+  ] });
+}
+function useClaudeBridge() {
+  const context = (0, import_react6.useContext)(ClaudeBridgeContext);
+  if (!context) {
+    throw new Error("useClaudeBridge must be used within a ClaudeBridgeProvider");
+  }
+  return context;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ClaudeBridgeProvider,
+  ClaudeTerminal,
+  TaskStatusToast,
+  captureContext,
+  captureElementScreenshot,
+  capturePageContext,
+  useClaudeBridge
+});
+//# sourceMappingURL=index.cjs.map