@ibealec/create-zed-bridge 1.0.13 → 1.0.15

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

@@ -32,16 +32,24 @@ var index_exports = {};
 __export(index_exports, {
   ClaudeBridgeProvider: () => ClaudeBridgeProvider,
   ClaudeTerminal: () => ClaudeTerminal,
+  SessionPanel: () => SessionPanel,
+  SessionTabs: () => SessionTabs,
   TaskStatusToast: () => TaskStatusToast,
+  VoiceInput: () => VoiceInput,
   captureContext: () => captureContext,
   captureElementScreenshot: () => captureElementScreenshot,
   capturePageContext: () => capturePageContext,
-  useClaudeBridge: () => useClaudeBridge
+  getSessionDisplayName: () => getSessionDisplayName,
+  isSessionActive: () => isSessionActive,
+  useClaudeBridge: () => useClaudeBridge,
+  useSessionStorage: () => useSessionStorage,
+  useSessions: () => useSessions,
+  useVoiceInput: () => useVoiceInput
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/ClaudeBridgeProvider.tsx
-var import_react6 = require("react");
+var import_react9 = require("react");
 
 // src/websocket-client.ts
 var BridgeWebSocketClient = class {
@@ -704,275 +712,564 @@ function SelectionOverlay({
   ] });
 }
 
-// src/PromptDialog.tsx
+// src/components/SessionPanel.tsx
+var import_react7 = require("react");
+
+// src/ClaudeTerminal.tsx
 var import_react2 = 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_runtime2 = require("react/jsx-runtime");
-function PromptDialog({
-  open,
-  element,
-  onSubmit,
-  onClose,
-  onSwitchToQuestionMode,
-  isSubmitting = false
+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 [prompt, setPrompt] = (0, import_react2.useState)("");
-  const inputRef = (0, import_react2.useRef)(null);
+  const containerRef = (0, import_react2.useRef)(null);
+  const terminalRef = (0, import_react2.useRef)(null);
+  const fitAddonRef = (0, import_react2.useRef)(null);
+  const wsRef = (0, import_react2.useRef)(null);
+  const handleMessageRef = (0, import_react2.useRef)(null);
+  const [connected, setConnected] = (0, import_react2.useState)(false);
+  const [sessions, setSessions] = (0, import_react2.useState)([]);
+  const [attachedSessionId, setAttachedSessionId] = (0, import_react2.useState)(null);
+  const [error, setError] = (0, import_react2.useState)(null);
   (0, import_react2.useEffect)(() => {
-    if (open && inputRef.current) {
-      inputRef.current.focus();
+    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);
     }
-  }, [open]);
+    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_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
-                )
-              )
+    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_react2.useRef)(null);
+  attachedSessionIdRef.current = attachedSessionId;
+  (0, import_react2.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);
             }
-          )
-        ] }),
-        /* @__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"
+            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_react2.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_react2.useEffect)(() => {
+    if (sessionId && connected && !attachedSessionId) {
+      wsRef.current?.send(JSON.stringify({
+        type: "attach_terminal",
+        sessionId
+      }));
+    }
+  }, [sessionId, connected, attachedSessionId]);
+  (0, import_react2.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_react2.useCallback)(() => {
+    terminalRef.current?.focus();
+  }, []);
+  const handleSelectSession = (0, import_react2.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_runtime2.jsx)(
+      "div",
+      {
+        className,
+        style: {
+          background: "#1a1a1a",
+          color: "#f0f0f0",
+          padding: "20px",
+          fontFamily: 'Menlo, Monaco, "Courier New", monospace',
+          ...style
+        },
+        children: !connected ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: "Connecting to server..." }) : error ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { color: "#ff5555" }, children: [
+          "Error: ",
+          error
+        ] }) : sessions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: "No Claude sessions available" }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { marginBottom: "10px", fontSize: "14px" }, children: "Select a Claude session:" }),
+          sessions.map((session) => /* @__PURE__ */ (0, import_jsx_runtime2.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_runtime2.jsx)("div", { style: { fontWeight: "bold" }, children: session.displayName || session.name }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontSize: "12px", color: "#888", marginTop: "4px" }, children: session.workingDir })
+              ]
             },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            session.id
+          ))
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: XTERM_CRITICAL_CSS }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        ref: containerRef,
+        className,
+        onClick: handleContainerClick,
+        style: {
+          width: "100%",
+          height: "100%",
+          ...style
+        }
+      }
+    )
+  ] });
+}
+
+// src/components/SessionTabs.tsx
+var import_react4 = require("react");
+
+// src/hooks/useSessions.ts
+var import_react3 = require("react");
+function useSessions({
+  sessions,
+  projectRoot
+}) {
+  const isProjectSession = (0, import_react3.useMemo)(() => {
+    return (session) => {
+      if (!projectRoot) return true;
+      return session.workingDir === projectRoot || session.workingDir.startsWith(projectRoot + "/");
+    };
+  }, [projectRoot]);
+  const projectSessions = (0, import_react3.useMemo)(() => {
+    if (!projectRoot) return sessions;
+    return sessions.filter(isProjectSession);
+  }, [sessions, projectRoot, isProjectSession]);
+  const sortedProjectSessions = (0, import_react3.useMemo)(() => {
+    return [...projectSessions].sort((a, b) => {
+      return new Date(b.lastActivity).getTime() - new Date(a.lastActivity).getTime();
+    });
+  }, [projectSessions]);
+  return {
+    projectSessions: sortedProjectSessions,
+    allSessions: sessions,
+    isProjectSession
+  };
+}
+function getSessionDisplayName(session) {
+  return session.displayName || session.name || session.tmuxSession;
+}
+function isSessionActive(session) {
+  const lastActivity = new Date(session.lastActivity).getTime();
+  const now = Date.now();
+  const sixtySecondsAgo = now - 60 * 1e3;
+  return lastActivity > sixtySecondsAgo;
+}
+
+// src/components/SessionTabs.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function SessionTabs({
+  sessions,
+  activeSessionId,
+  onSessionSelect,
+  onSessionClose,
+  taskSessionId
+}) {
+  const handleTabClick = (0, import_react4.useCallback)(
+    (e, sessionId) => {
+      e.stopPropagation();
+      onSessionSelect(sessionId);
+    },
+    [onSessionSelect]
+  );
+  const handleCloseClick = (0, import_react4.useCallback)(
+    (e, sessionId) => {
+      e.stopPropagation();
+      onSessionClose?.(sessionId);
+    },
+    [onSessionClose]
+  );
+  if (sessions.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        style: {
+          padding: "8px 12px",
+          color: "rgba(255, 255, 255, 0.5)",
+          fontSize: 12
+        },
+        children: "No active sessions"
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 2,
+        padding: "4px 8px",
+        overflowX: "auto",
+        flex: 1,
+        minWidth: 0
+      },
+      children: [
+        sessions.map((session) => {
+          const isActive = session.id === activeSessionId;
+          const isRunning = isSessionActive(session);
+          const isTaskSession = session.id === taskSessionId;
+          const displayName = getSessionDisplayName(session);
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "button",
+            {
+              onClick: (e) => handleTabClick(e, session.id),
+              title: `${displayName}
+${session.workingDir}`,
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 6,
+                padding: "6px 10px",
+                background: isActive ? "rgba(99, 102, 241, 0.2)" : "rgba(255, 255, 255, 0.05)",
+                border: isActive ? "1px solid rgba(99, 102, 241, 0.4)" : "1px solid transparent",
+                borderRadius: 6,
+                color: isActive ? "rgba(255, 255, 255, 0.95)" : "rgba(255, 255, 255, 0.7)",
+                fontSize: 12,
+                fontWeight: isActive ? 500 : 400,
+                cursor: "pointer",
+                whiteSpace: "nowrap",
+                maxWidth: 180,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                transition: "all 0.15s ease"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   "span",
                   {
                     style: {
-                      color: "rgba(255, 255, 255, 0.4)",
-                      fontSize: 12
-                    },
-                    children: [
-                      navigator.platform.includes("Mac") ? "\u2318" : "Ctrl",
-                      "+Enter to submit"
-                    ]
+                      width: 6,
+                      height: 6,
+                      borderRadius: "50%",
+                      background: isTaskSession ? "#22c55e" : isRunning ? "#f59e0b" : "rgba(255, 255, 255, 0.3)",
+                      flexShrink: 0,
+                      animation: isTaskSession ? "claude-bridge-pulse 1.5s infinite" : "none"
+                    }
                   }
                 ),
-                onSwitchToQuestionMode && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                  "button",
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "span",
                   {
-                    onClick: onSwitchToQuestionMode,
-                    disabled: isSubmitting,
                     style: {
-                      background: "transparent",
-                      border: "none",
-                      color: "#22c55e",
-                      fontSize: 12,
-                      cursor: "pointer",
-                      padding: 0,
-                      textDecoration: "underline"
+                      overflow: "hidden",
+                      textOverflow: "ellipsis"
                     },
-                    children: "Just ask a question instead"
+                    children: displayName
                   }
-                )
-              ] }),
-              /* @__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); }
+                ),
+                onSessionClose && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "span",
+                  {
+                    onClick: (e) => handleCloseClick(e, session.id),
+                    style: {
+                      marginLeft: 2,
+                      padding: "0 2px",
+                      color: "rgba(255, 255, 255, 0.4)",
+                      cursor: "pointer",
+                      fontSize: 14,
+                      lineHeight: 1,
+                      flexShrink: 0
+                    },
+                    onMouseOver: (e) => {
+                      e.currentTarget.style.color = "rgba(255, 255, 255, 0.8)";
+                    },
+                    onMouseOut: (e) => {
+                      e.currentTarget.style.color = "rgba(255, 255, 255, 0.4)";
+                    },
+                    children: "\xD7"
+                  }
+                )
+              ]
+            },
+            session.id
+          );
+        }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { children: `
+          @keyframes claude-bridge-pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
           }
         ` })
       ]
@@ -980,343 +1277,984 @@ function PromptDialog({
   );
 }
 
-// src/QuestionDialog.tsx
-var import_react3 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-function QuestionDialog({
-  open,
+// src/components/VoiceInput.tsx
+var import_react6 = __toESM(require("react"), 1);
+
+// src/hooks/useVoiceInput.ts
+var import_react5 = require("react");
+function useVoiceInput(options = {}) {
+  const {
+    onTranscript,
+    onError,
+    onStart,
+    onEnd,
+    language = "en-US"
+  } = options;
+  const [isListening, setIsListening] = (0, import_react5.useState)(false);
+  const [transcript, setTranscript] = (0, import_react5.useState)("");
+  const [interimTranscript, setInterimTranscript] = (0, import_react5.useState)("");
+  const [error, setError] = (0, import_react5.useState)(null);
+  const recognitionRef = (0, import_react5.useRef)(null);
+  const isSupported = typeof window !== "undefined" && (!!window.SpeechRecognition || !!window.webkitSpeechRecognition);
+  (0, import_react5.useEffect)(() => {
+    return () => {
+      if (recognitionRef.current) {
+        recognitionRef.current.abort();
+        recognitionRef.current = null;
+      }
+    };
+  }, []);
+  const startListening = (0, import_react5.useCallback)(() => {
+    if (!isSupported) {
+      const errMsg = "Speech recognition is not supported in this browser";
+      setError(errMsg);
+      onError?.(errMsg);
+      return;
+    }
+    if (recognitionRef.current) {
+      recognitionRef.current.abort();
+    }
+    setError(null);
+    setTranscript("");
+    setInterimTranscript("");
+    const SpeechRecognitionClass = window.SpeechRecognition || window.webkitSpeechRecognition;
+    if (!SpeechRecognitionClass) return;
+    const recognition = new SpeechRecognitionClass();
+    recognitionRef.current = recognition;
+    recognition.continuous = false;
+    recognition.interimResults = true;
+    recognition.lang = language;
+    recognition.onstart = () => {
+      setIsListening(true);
+      onStart?.();
+    };
+    recognition.onresult = (event) => {
+      let finalTranscript = "";
+      let interimText = "";
+      for (let i = event.resultIndex; i < event.results.length; i++) {
+        const result = event.results[i];
+        if (result.isFinal) {
+          finalTranscript += result[0].transcript;
+        } else {
+          interimText += result[0].transcript;
+        }
+      }
+      if (finalTranscript) {
+        setTranscript((prev) => prev + finalTranscript);
+        setInterimTranscript("");
+        onTranscript?.(finalTranscript, true);
+      } else {
+        setInterimTranscript(interimText);
+        onTranscript?.(interimText, false);
+      }
+    };
+    recognition.onerror = (event) => {
+      if (event.error === "no-speech" || event.error === "aborted") {
+        return;
+      }
+      const errMsg = `Speech recognition error: ${event.error}`;
+      setError(errMsg);
+      setIsListening(false);
+      onError?.(errMsg);
+    };
+    recognition.onend = () => {
+      setIsListening(false);
+      setInterimTranscript("");
+      onEnd?.();
+      recognitionRef.current = null;
+    };
+    try {
+      recognition.start();
+    } catch (err) {
+      const errMsg = "Failed to start speech recognition";
+      setError(errMsg);
+      onError?.(errMsg);
+    }
+  }, [isSupported, language, onTranscript, onError, onStart, onEnd]);
+  const stopListening = (0, import_react5.useCallback)(() => {
+    if (recognitionRef.current) {
+      recognitionRef.current.stop();
+    }
+  }, []);
+  return {
+    isListening,
+    isSupported,
+    transcript,
+    interimTranscript,
+    startListening,
+    stopListening,
+    error
+  };
+}
+
+// src/components/VoiceInput.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function VoiceInput({
+  onTranscript,
+  onListeningChange,
+  disabled = false,
+  size = "medium",
+  autoStart = false
+}) {
+  const autoStartTriggeredRef = import_react6.default.useRef(false);
+  const {
+    isListening,
+    isSupported,
+    transcript,
+    interimTranscript,
+    startListening,
+    stopListening
+  } = useVoiceInput({
+    onTranscript: (text, isFinal) => {
+      if (isFinal) {
+        onTranscript(text);
+      }
+    }
+  });
+  (0, import_react6.useEffect)(() => {
+    if (autoStart && isSupported && !disabled && !autoStartTriggeredRef.current) {
+      autoStartTriggeredRef.current = true;
+      const timer = setTimeout(() => {
+        startListening();
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [autoStart, isSupported, disabled, startListening]);
+  (0, import_react6.useEffect)(() => {
+    onListeningChange?.(isListening);
+  }, [isListening, onListeningChange]);
+  (0, import_react6.useEffect)(() => {
+    if (!isListening && transcript) {
+      onTranscript(transcript);
+    }
+  }, [isListening, transcript, onTranscript]);
+  const handleClick = (0, import_react6.useCallback)(() => {
+    if (isListening) {
+      stopListening();
+    } else {
+      startListening();
+    }
+  }, [isListening, startListening, stopListening]);
+  if (!isSupported) {
+    return null;
+  }
+  const buttonSize = size === "small" ? 32 : 40;
+  const iconSize = size === "small" ? 16 : 20;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { position: "relative", display: "inline-flex", alignItems: "center" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick: handleClick,
+        disabled,
+        title: isListening ? "Stop listening" : "Start voice input",
+        style: {
+          width: buttonSize,
+          height: buttonSize,
+          borderRadius: "50%",
+          border: "none",
+          background: isListening ? "#ef4444" : disabled ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.1)",
+          cursor: disabled ? "not-allowed" : "pointer",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          transition: "all 0.2s ease",
+          position: "relative",
+          overflow: "visible"
+        },
+        children: [
+          isListening && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "span",
+              {
+                style: {
+                  position: "absolute",
+                  top: -4,
+                  left: -4,
+                  right: -4,
+                  bottom: -4,
+                  borderRadius: "50%",
+                  border: "2px solid #ef4444",
+                  animation: "claude-voice-pulse 1.5s ease-out infinite"
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "span",
+              {
+                style: {
+                  position: "absolute",
+                  top: -8,
+                  left: -8,
+                  right: -8,
+                  bottom: -8,
+                  borderRadius: "50%",
+                  border: "2px solid #ef4444",
+                  animation: "claude-voice-pulse 1.5s ease-out infinite 0.5s"
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            "svg",
+            {
+              width: iconSize,
+              height: iconSize,
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: isListening ? "white" : disabled ? "rgba(255, 255, 255, 0.3)" : "rgba(255, 255, 255, 0.7)",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "12", x2: "12", y1: "19", y2: "22" })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    isListening && (interimTranscript || transcript) && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          bottom: "100%",
+          left: "50%",
+          transform: "translateX(-50%)",
+          marginBottom: 8,
+          padding: "8px 12px",
+          background: "rgba(0, 0, 0, 0.9)",
+          borderRadius: 8,
+          maxWidth: 300,
+          whiteSpace: "pre-wrap",
+          color: "white",
+          fontSize: 13,
+          boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { color: "rgba(255, 255, 255, 0.5)", fontSize: 11, marginBottom: 4 }, children: "Listening..." }),
+          transcript,
+          interimTranscript && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { color: "rgba(255, 255, 255, 0.5)" }, children: interimTranscript })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: `
+          @keyframes claude-voice-pulse {
+            0% {
+              transform: scale(1);
+              opacity: 0.8;
+            }
+            100% {
+              transform: scale(1.5);
+              opacity: 0;
+            }
+          }
+        ` })
+  ] });
+}
+
+// src/components/SessionPanel.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 SessionPanel({
+  sessions,
+  activeSessionId,
+  onSessionSelect,
+  onSessionClose,
+  serverUrl,
+  token,
+  expanded,
+  onExpandedChange,
   selectedElement,
-  onSubmit,
+  mode,
+  onModeChange,
+  onPromptSubmit,
+  onQuestionSubmit,
   onClose,
-  onSwitchToTaskMode,
-  isSubmitting = false
+  isSubmitting,
+  voiceInputActive = false,
+  onVoiceInputStart,
+  activeTask
 }) {
-  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) {
+  const [size, setSize] = (0, import_react7.useState)({ width: DEFAULT_WIDTH, height: DEFAULT_HEIGHT });
+  const [isResizing, setIsResizing] = (0, import_react7.useState)(false);
+  const [isSaving, setIsSaving] = (0, import_react7.useState)(false);
+  const [prompt, setPrompt] = (0, import_react7.useState)("");
+  const [includeElement, setIncludeElement] = (0, import_react7.useState)(true);
+  const [isVoiceListening, setIsVoiceListening] = (0, import_react7.useState)(false);
+  const resizeRef = (0, import_react7.useRef)(null);
+  const inputRef = (0, import_react7.useRef)(null);
+  (0, import_react7.useEffect)(() => {
+    setIncludeElement(!!selectedElement);
+  }, [selectedElement]);
+  (0, import_react7.useEffect)(() => {
+    if (mode === "terminal") {
+      setPrompt("");
+    }
+  }, [mode]);
+  (0, import_react7.useEffect)(() => {
+    if ((mode === "prompt" || mode === "question") && inputRef.current) {
       inputRef.current.focus();
     }
-  }, [open]);
-  (0, import_react3.useEffect)(() => {
-    if (!open) {
-      setPrompt("");
+  }, [mode]);
+  const handleResizeStart = (0, import_react7.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_react7.useCallback)((sessionId, taskPrompt) => {
+    return new Promise((resolve) => {
+      const wsUrl = serverUrl.replace(/^http/, "ws").replace(/\/$/, "");
+      const ws = new WebSocket(`${wsUrl}/ws/bridge?token=${encodeURIComponent(token)}`);
+      let resolved = false;
+      const cleanup = () => {
+        if (!resolved) {
+          resolved = true;
+          ws.close();
+          resolve();
+        }
+      };
+      ws.onopen = () => {
+        ws.send(JSON.stringify({
+          type: "kill_session",
+          sessionId,
+          taskPrompt,
+          autoCommit: true
+        }));
+      };
+      ws.onmessage = (event) => {
+        try {
+          const message = JSON.parse(event.data);
+          if (message.type === "session_killed" || message.type === "error") {
+            cleanup();
+          }
+        } catch {
+        }
+      };
+      ws.onerror = () => cleanup();
+      ws.onclose = () => {
+        if (!resolved) {
+          resolved = true;
+          resolve();
+        }
+      };
+      setTimeout(cleanup, 35e3);
+    });
+  }, [serverUrl, token]);
+  const handleSessionClose = (0, import_react7.useCallback)(async (sessionId) => {
+    setIsSaving(true);
+    try {
+      await killSession(sessionId);
+      onSessionClose?.(sessionId);
+    } finally {
+      setIsSaving(false);
     }
-  }, [open]);
-  (0, import_react3.useEffect)(() => {
-    setIncludeElement(!!selectedElement);
-  }, [selectedElement]);
-  const handleSubmit = () => {
+  }, [killSession, onSessionClose]);
+  const handleToggleExpand = (0, import_react7.useCallback)(() => {
+    onExpandedChange(!expanded);
+  }, [expanded, onExpandedChange]);
+  const handleDismiss = (0, import_react7.useCallback)(() => {
+    onClose();
+    onExpandedChange(false);
+  }, [onClose, onExpandedChange]);
+  const handleVoiceTranscript = (0, import_react7.useCallback)((text) => {
+    setPrompt((prev) => {
+      const separator = prev.trim() ? " " : "";
+      return prev + separator + text;
+    });
+    inputRef.current?.focus();
+  }, []);
+  const handleVoiceListeningChange = (0, import_react7.useCallback)((listening) => {
+    setIsVoiceListening(listening);
+    if (listening) {
+      onVoiceInputStart?.();
+    }
+  }, [onVoiceInputStart]);
+  const handleSubmit = (0, import_react7.useCallback)(() => {
     if (!prompt.trim() || isSubmitting) return;
-    onSubmit(prompt.trim(), includeElement && !!selectedElement);
-  };
-  const handleKeyDown = (e) => {
+    if (mode === "prompt") {
+      onPromptSubmit(prompt.trim());
+    } else if (mode === "question") {
+      onQuestionSubmit(prompt.trim(), includeElement && !!selectedElement);
+    }
+    setPrompt("");
+  }, [prompt, isSubmitting, mode, onPromptSubmit, onQuestionSubmit, includeElement, selectedElement]);
+  const handleKeyDown = (0, import_react7.useCallback)((e) => {
     if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
       e.preventDefault();
       handleSubmit();
     }
     if (e.key === "Escape") {
       e.preventDefault();
-      onClose();
+      if (mode !== "terminal") {
+        onModeChange("terminal");
+      } else {
+        handleDismiss();
+      }
     }
-  };
-  if (!open) return null;
-  const pageContext = capturePageContext();
+  }, [handleSubmit, mode, onModeChange, handleDismiss]);
+  const handleOpenZed = (0, import_react7.useCallback)(() => {
+    const zedUrl = activeSessionId ? `${serverUrl}?token=${encodeURIComponent(token)}&session=${activeSessionId}` : `${serverUrl}?token=${encodeURIComponent(token)}`;
+    window.open(zedUrl, "_blank");
+  }, [serverUrl, token, activeSessionId]);
+  const hasContent = sessions.length > 0 || mode !== "terminal";
+  if (!hasContent && !activeTask) return null;
   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"
-                }
-              )
-            ]
+  const pageContext = capturePageContext();
+  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" },
+    saving: { bg: "#f59e0b", text: "Saving..." }
+  };
+  const status = isSaving ? statusColors.saving : activeTask ? statusColors[activeTask.status] || statusColors.queued : null;
+  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: 280,
+          maxWidth: 400
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            "div",
+            {
+              style: {
+                padding: "12px 16px",
+                display: "flex",
+                alignItems: "center",
+                gap: 10
+              },
+              children: [
+                status && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "div",
+                  {
+                    style: {
+                      width: 10,
+                      height: 10,
+                      borderRadius: "50%",
+                      background: status.bg,
+                      animation: activeTask?.status === "running" || activeTask?.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: [
+                      sessions.length > 0 ? `${sessions.length} session${sessions.length > 1 ? "s" : ""}` : "Claude",
+                      status && `: ${status.text}`
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "button",
+                  {
+                    onClick: handleToggleExpand,
+                    style: {
+                      background: "#374151",
+                      border: "none",
+                      borderRadius: 6,
+                      padding: "6px 12px",
+                      color: "white",
+                      fontSize: 12,
+                      fontWeight: 500,
+                      cursor: "pointer"
+                    },
+                    children: "Expand"
+                  }
+                ),
+                /* @__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.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",
+        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
+            }
           }
         ),
-        selectedElement && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "div",
           {
+            onMouseDown: (e) => handleResizeStart(e, "w"),
             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}` : "",
-                          ")"
-                        ] })
-                      ]
-                    }
-                  )
-                ]
-              }
-            )
+              position: "absolute",
+              left: 0,
+              top: 20,
+              bottom: 20,
+              width: 6,
+              cursor: "ew-resize",
+              zIndex: 10
+            }
           }
         ),
-        /* @__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_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_runtime3.jsxs)(
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
           "div",
           {
             style: {
-              padding: "12px 16px",
-              borderTop: "1px solid rgba(255, 255, 255, 0.1)",
+              borderBottom: "1px solid rgba(255, 255, 255, 0.1)",
               display: "flex",
-              justifyContent: "space-between",
-              alignItems: "center"
+              alignItems: "center",
+              flexShrink: 0
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-                  "span",
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                SessionTabs,
+                {
+                  sessions,
+                  activeSessionId,
+                  onSessionSelect,
+                  onSessionClose: handleSessionClose,
+                  taskSessionId: activeTask?.sessionId
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 4, padding: "4px 8px" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "button",
                   {
+                    onClick: handleToggleExpand,
+                    title: "Minimize",
                     style: {
-                      color: "rgba(255, 255, 255, 0.4)",
-                      fontSize: 12
+                      background: "transparent",
+                      border: "none",
+                      color: "rgba(255, 255, 255, 0.5)",
+                      cursor: "pointer",
+                      padding: 4,
+                      fontSize: 14,
+                      lineHeight: 1
                     },
-                    children: [
-                      navigator.platform.includes("Mac") ? "\u2318" : "Ctrl",
-                      "+Enter to submit"
-                    ]
+                    children: "\u2212"
                   }
                 ),
-                onSwitchToTaskMode && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   "button",
                   {
-                    onClick: onSwitchToTaskMode,
-                    disabled: isSubmitting,
+                    onClick: handleOpenZed,
+                    title: "Open in Zed Controller",
                     style: {
                       background: "transparent",
                       border: "none",
-                      color: "#6366f1",
-                      fontSize: 12,
+                      color: "rgba(255, 255, 255, 0.5)",
                       cursor: "pointer",
-                      padding: 0,
-                      textDecoration: "underline"
+                      padding: 4,
+                      fontSize: 14,
+                      lineHeight: 1
                     },
-                    children: "Make changes instead"
+                    children: "\u2197"
                   }
-                )
-              ] }),
-              /* @__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",
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "button",
+                  {
+                    onClick: handleDismiss,
+                    disabled: isSaving,
+                    title: isSaving ? "Saving changes..." : "Close",
+                    style: {
+                      background: "transparent",
+                      border: "none",
+                      color: isSaving ? "rgba(255, 255, 255, 0.3)" : "rgba(255, 255, 255, 0.5)",
+                      cursor: isSaving ? "not-allowed" : "pointer",
+                      padding: 4,
+                      fontSize: 18,
+                      lineHeight: 1
+                    },
+                    children: isSaving ? "..." : "\xD7"
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        isSaving && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              background: "rgba(0, 0, 0, 0.7)",
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              zIndex: 10,
+              borderRadius: 12
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { color: "#f59e0b", fontSize: 14, fontWeight: 500, marginBottom: 8 }, children: "Saving changes..." }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { color: "rgba(255, 255, 255, 0.6)", fontSize: 12 }, children: "Generating commit message with AI" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { flex: 1, minHeight: 0 }, children: activeSessionId ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          ClaudeTerminal,
+          {
+            serverUrl,
+            token,
+            sessionId: activeSessionId,
+            style: { width: "100%", height: "100%" }
+          }
+        ) : sessions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              height: "100%",
+              color: "rgba(255, 255, 255, 0.5)",
+              fontSize: 14
+            },
+            children: "Select a session to view"
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              height: "100%",
+              color: "rgba(255, 255, 255, 0.5)",
+              fontSize: 14
+            },
+            children: "No active sessions"
+          }
+        ) }),
+        mode !== "terminal" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "div",
+          {
+            style: {
+              borderTop: "1px solid rgba(255, 255, 255, 0.1)",
+              padding: 12,
+              flexShrink: 0
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                "div",
+                {
+                  style: {
                     display: "flex",
                     alignItems: "center",
-                    gap: 6
+                    gap: 8,
+                    marginBottom: 8
                   },
-                  children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                      "span",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                      "div",
                       {
                         style: {
-                          width: 14,
-                          height: 14,
-                          border: "2px solid rgba(255, 255, 255, 0.3)",
-                          borderTopColor: "white",
+                          width: 8,
+                          height: 8,
                           borderRadius: "50%",
-                          animation: "claude-bridge-spin 0.8s linear infinite"
+                          background: mode === "prompt" ? "#6366f1" : "#22c55e"
                         }
                       }
                     ),
-                    "Asking..."
-                  ] }) : "Ask Claude"
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                      "span",
+                      {
+                        style: {
+                          color: "rgba(255, 255, 255, 0.9)",
+                          fontSize: 12,
+                          fontWeight: 500
+                        },
+                        children: [
+                          mode === "prompt" ? "Task" : "Question",
+                          elementContext && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { color: "rgba(255, 255, 255, 0.5)", marginLeft: 8 }, children: [
+                            elementContext.componentName || elementContext.selectedElement.tagName,
+                            elementContext.sourceFile && ` (${elementContext.sourceFile})`
+                          ] })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { flex: 1 } }),
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                      "button",
+                      {
+                        onClick: () => onModeChange(mode === "prompt" ? "question" : "prompt"),
+                        style: {
+                          background: "transparent",
+                          border: "none",
+                          color: mode === "prompt" ? "#22c55e" : "#6366f1",
+                          fontSize: 11,
+                          cursor: "pointer",
+                          padding: 0
+                        },
+                        children: [
+                          "Switch to ",
+                          mode === "prompt" ? "Question" : "Task"
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              mode === "question" && selectedElement && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                "label",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 8,
+                    marginBottom: 8,
+                    fontSize: 12,
+                    color: "rgba(255, 255, 255, 0.7)",
+                    cursor: "pointer"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                      "input",
+                      {
+                        type: "checkbox",
+                        checked: includeElement,
+                        onChange: (e) => setIncludeElement(e.target.checked)
+                      }
+                    ),
+                    "Include selected element"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { position: "relative" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "textarea",
+                  {
+                    ref: inputRef,
+                    value: prompt,
+                    onChange: (e) => setPrompt(e.target.value),
+                    onKeyDown: handleKeyDown,
+                    placeholder: isVoiceListening ? "Listening..." : mode === "prompt" ? "What would you like Claude to change?" : "Ask a question about this page or codebase...",
+                    disabled: isSubmitting || isVoiceListening,
+                    style: {
+                      width: "100%",
+                      minHeight: 60,
+                      maxHeight: 120,
+                      padding: 10,
+                      paddingRight: 44,
+                      background: isVoiceListening ? "rgba(239, 68, 68, 0.1)" : "rgba(255, 255, 255, 0.05)",
+                      border: isVoiceListening ? "1px solid rgba(239, 68, 68, 0.3)" : "1px solid rgba(255, 255, 255, 0.1)",
+                      borderRadius: 8,
+                      color: "white",
+                      fontSize: 13,
+                      fontFamily: "inherit",
+                      resize: "none",
+                      outline: "none"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { position: "absolute", right: 8, top: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  VoiceInput,
+                  {
+                    onTranscript: handleVoiceTranscript,
+                    onListeningChange: handleVoiceListeningChange,
+                    disabled: isSubmitting,
+                    size: "small",
+                    autoStart: voiceInputActive
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    marginTop: 8
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { color: "rgba(255, 255, 255, 0.4)", fontSize: 11 }, children: [
+                      navigator.platform.includes("Mac") ? "\u2318" : "Ctrl",
+                      "+Enter to submit"
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                      "button",
+                      {
+                        onClick: handleSubmit,
+                        disabled: !prompt.trim() || isSubmitting,
+                        style: {
+                          background: prompt.trim() && !isSubmitting ? mode === "prompt" ? "#6366f1" : "#22c55e" : "rgba(99, 102, 241, 0.3)",
+                          border: "none",
+                          borderRadius: 6,
+                          padding: "6px 14px",
+                          color: "white",
+                          fontSize: 13,
+                          fontWeight: 500,
+                          cursor: prompt.trim() && !isSubmitting ? "pointer" : "not-allowed",
+                          display: "flex",
+                          alignItems: "center",
+                          gap: 6
+                        },
+                        children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                            "span",
+                            {
+                              style: {
+                                width: 12,
+                                height: 12,
+                                border: "2px solid rgba(255, 255, 255, 0.3)",
+                                borderTopColor: "white",
+                                borderRadius: "50%",
+                                animation: "claude-bridge-spin 0.8s linear infinite"
+                              }
+                            }
+                          ),
+                          "Sending..."
+                        ] }) : mode === "prompt" ? "Send to Claude" : "Ask Claude"
+                      }
+                    )
+                  ]
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { children: `
+        activeTask?.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: ",
+              activeTask.error
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: `
+          @keyframes claude-bridge-pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+          }
           @keyframes claude-bridge-spin {
             to { transform: rotate(360deg); }
           }
@@ -1326,463 +2264,605 @@ function QuestionDialog({
   );
 }
 
-// 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;
+// src/hooks/useSessionStorage.ts
+var import_react8 = require("react");
+var STORAGE_KEY = "claude-bridge-session";
+var EXPIRY_MS = 24 * 60 * 60 * 1e3;
+function useSessionStorage(projectRoot) {
+  const getStoredSessionId = (0, import_react8.useCallback)(() => {
+    if (!projectRoot) return null;
+    try {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      if (!stored) return null;
+      const data = JSON.parse(stored);
+      if (data.projectRoot === projectRoot && Date.now() - data.timestamp < EXPIRY_MS) {
+        return data.lastSessionId;
+      }
+    } catch {
+    }
+    return null;
+  }, [projectRoot]);
+  const setStoredSessionId = (0, import_react8.useCallback)(
+    (sessionId) => {
+      if (sessionId && projectRoot) {
+        const data = {
+          lastSessionId: sessionId,
+          projectRoot,
+          timestamp: Date.now()
+        };
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+      } else {
+        localStorage.removeItem(STORAGE_KEY);
+      }
+    },
+    [projectRoot]
+  );
+  const clearStoredSession = (0, import_react8.useCallback)(() => {
+    localStorage.removeItem(STORAGE_KEY);
+  }, []);
+  return {
+    getStoredSessionId,
+    setStoredSessionId,
+    clearStoredSession
+  };
 }
-.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;
+
+// src/ClaudeBridgeProvider.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var initialState = {
+  connected: false,
+  selectionMode: false,
+  questionMode: false,
+  selectedElement: null,
+  activeTask: null,
+  tasks: [],
+  voiceInputPending: false,
+  // Session state
+  sessions: [],
+  activeSessionId: null,
+  panelExpanded: false,
+  panelMode: "terminal"
+};
+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,
+        selectedElement: action.enabled ? state.selectedElement : null
+      };
+    case "SET_QUESTION_MODE":
+      return {
+        ...state,
+        questionMode: action.enabled,
+        selectionMode: action.enabled ? false : state.selectionMode
+      };
+    case "SET_SELECTED_ELEMENT":
+      return { ...state, selectedElement: action.element };
+    case "ELEMENT_SELECTED":
+      return {
+        ...state,
+        selectedElement: action.element,
+        selectionMode: false,
+        panelExpanded: true
+      };
+    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 };
+    case "SET_VOICE_INPUT_PENDING":
+      return { ...state, voiceInputPending: action.pending };
+    // Session actions
+    case "SET_SESSIONS":
+      return { ...state, sessions: action.sessions };
+    case "SET_ACTIVE_SESSION":
+      return { ...state, activeSessionId: action.sessionId };
+    case "SET_PANEL_EXPANDED":
+      return { ...state, panelExpanded: action.expanded };
+    case "SET_PANEL_MODE":
+      return { ...state, panelMode: action.mode };
+    default:
+      return state;
+  }
 }
-.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({
+var ClaudeBridgeContext = (0, import_react9.createContext)(null);
+function ClaudeBridgeProvider({
+  children,
   serverUrl,
   token,
-  sessionId,
-  onSessionSelect,
-  onConnectionChange,
-  onSessionsUpdate,
-  terminalOptions = {},
-  style,
-  className
+  enabled = true,
+  projectRoot,
+  shortcut = "Meta+Shift+K",
+  questionShortcut = "Meta+Shift+?",
+  voiceShortcut = "Meta+Shift+V",
+  onTaskCreated,
+  onTaskProgress,
+  onTaskCompleted,
+  onTaskFailed,
+  onError
 }) {
-  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 [state, dispatch] = (0, import_react9.useReducer)(reducer, initialState);
+  const wsClientRef = (0, import_react9.useRef)(null);
+  const pendingTaskResolveRef = (0, import_react9.useRef)(null);
+  const config = {
+    serverUrl,
+    token,
+    enabled,
+    projectRoot,
+    shortcut,
+    questionShortcut,
+    voiceShortcut,
+    onTaskCreated,
+    onTaskProgress,
+    onTaskCompleted,
+    onTaskFailed,
+    onError
+  };
+  (0, import_react9.useEffect)(() => {
+    if (!enabled) return;
+    const client = new BridgeWebSocketClient(config);
+    wsClientRef.current = client;
+    const unsubConnection = client.onConnection((connected) => {
+      dispatch({ type: "SET_CONNECTED", connected });
     });
-    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
-          }));
-        }
-      });
+    const unsubMessage = client.onMessage((message) => {
+      handleMessage(message);
     });
-    resizeObserver.observe(containerRef.current);
+    client.connect();
     return () => {
-      resizeObserver.disconnect();
-      terminal.dispose();
-      terminalRef.current = null;
-      fitAddonRef.current = null;
+      unsubConnection();
+      unsubMessage();
+      client.disconnect();
+      wsClientRef.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
-        }));
+  }, [enabled, serverUrl, token]);
+  const { getStoredSessionId, setStoredSessionId } = useSessionStorage(projectRoot);
+  const { projectSessions } = useSessions({
+    sessions: state.sessions,
+    projectRoot
+  });
+  (0, import_react9.useEffect)(() => {
+    if (state.connected && wsClientRef.current) {
+      wsClientRef.current.send({ type: "get_sessions" });
+    }
+  }, [state.connected]);
+  (0, import_react9.useEffect)(() => {
+    if (state.connected && projectSessions.length > 0 && !state.activeSessionId) {
+      const storedSessionId = getStoredSessionId();
+      if (storedSessionId) {
+        const sessionExists = projectSessions.some((s) => s.id === storedSessionId);
+        if (sessionExists) {
+          dispatch({ type: "SET_ACTIVE_SESSION", sessionId: storedSessionId });
+          dispatch({ type: "SET_PANEL_EXPANDED", expanded: true });
+        }
       }
-    });
-    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
-                }));
-              }
+    }
+  }, [state.connected, projectSessions, state.activeSessionId, getStoredSessionId]);
+  (0, import_react9.useEffect)(() => {
+    if (state.activeSessionId) {
+      setStoredSessionId(state.activeSessionId);
+    }
+  }, [state.activeSessionId, setStoredSessionId]);
+  (0, import_react9.useEffect)(() => {
+    if (state.activeTask?.sessionId) {
+      dispatch({ type: "SET_ACTIVE_SESSION", sessionId: state.activeTask.sessionId });
+      dispatch({ type: "SET_PANEL_EXPANDED", expanded: true });
+    }
+  }, [state.activeTask?.sessionId]);
+  const handleMessage = (0, import_react9.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()
             }
-            break;
-          case "terminal_output":
-            if (message.data && terminalRef.current && message.sessionId === attachedSessionIdRef.current) {
-              terminalRef.current.write(message.data);
+          });
+          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()
             }
-            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;
+          });
+          onTaskFailed?.(message.taskId, message.error || "Unknown error");
+          pendingTaskResolveRef.current?.(null);
+          pendingTaskResolveRef.current = null;
         }
-      } 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);
+        break;
+      case "pong":
+        break;
+      case "sessions_list":
+        if (message.sessions) {
+          dispatch({ type: "SET_SESSIONS", sessions: message.sessions });
+        }
+        break;
+      default:
+        console.log("[ClaudeBridge] Unknown message type:", message.type);
     }
-  }, [attachedSessionId]);
-  const handleContainerClick = (0, import_react4.useCallback)(() => {
-    terminalRef.current?.focus();
+  }, [onTaskCreated, onTaskProgress, onTaskCompleted, onTaskFailed]);
+  const matchesShortcut = (0, import_react9.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();
   }, []);
-  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
+  (0, import_react9.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;
       }
-    )
-  ] });
-}
-
-// 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 [isSaving, setIsSaving] = (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);
+      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;
       }
-    }
-  }, [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 (matchesShortcut(e, voiceShortcut)) {
+        e.preventDefault();
+        if (!state.selectionMode && !state.selectedElement) {
+          dispatch({ type: "SET_ACTIVE_TASK", task: null });
+          dispatch({ type: "SET_SELECTION_MODE", enabled: true });
+        }
+        dispatch({ type: "SET_VOICE_INPUT_PENDING", pending: true });
+        return;
       }
-      if (direction.includes("n")) {
-        newHeight = resizeRef.current.startHeight - (moveEvent.clientY - resizeRef.current.startY);
+      if (e.key === "Escape") {
+        if (state.selectionMode) {
+          dispatch({ type: "SET_SELECTION_MODE", enabled: false });
+        }
+        if (state.questionMode) {
+          dispatch({ type: "SET_QUESTION_MODE", enabled: false });
+        }
+        dispatch({ type: "SET_VOICE_INPUT_PENDING", pending: false });
       }
-      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);
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [enabled, shortcut, questionShortcut, voiceShortcut, state.selectionMode, state.questionMode, state.selectedElement, matchesShortcut]);
+  const enableSelectionMode = (0, import_react9.useCallback)(() => {
+    dispatch({ type: "SET_ACTIVE_TASK", task: null });
+    dispatch({ type: "SET_SELECTION_MODE", enabled: true });
+  }, []);
+  const disableSelectionMode = (0, import_react9.useCallback)(() => {
+    dispatch({ type: "SET_SELECTION_MODE", enabled: false });
+  }, []);
+  const enableQuestionMode = (0, import_react9.useCallback)(() => {
+    dispatch({ type: "SET_ACTIVE_TASK", task: null });
+    dispatch({ type: "SET_QUESTION_MODE", enabled: true });
+  }, []);
+  const disableQuestionMode = (0, import_react9.useCallback)(() => {
+    dispatch({ type: "SET_QUESTION_MODE", enabled: false });
+  }, []);
+  const submitTask = (0, import_react9.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
     };
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-  }, [size]);
-  const killSession = (0, import_react5.useCallback)((sessionId, taskPrompt) => {
-    return new Promise((resolve) => {
+    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_react9.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_react9.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_react9.useCallback)((element) => {
+    dispatch({ type: "ELEMENT_SELECTED", element });
+  }, []);
+  const handlePromptSubmit = (0, import_react9.useCallback)(async (prompt) => {
+    await submitTask(prompt);
+  }, [submitTask]);
+  const handlePromptClose = (0, import_react9.useCallback)(() => {
+    dispatch({ type: "SET_SELECTED_ELEMENT", element: null });
+  }, []);
+  const handleQuestionSubmit = (0, import_react9.useCallback)(async (prompt, includeElement) => {
+    await submitQuestion(prompt, includeElement);
+  }, [submitQuestion]);
+  const handleQuestionClose = (0, import_react9.useCallback)(() => {
+    dispatch({ type: "SET_QUESTION_MODE", enabled: false });
+  }, []);
+  const handleSwitchToQuestionMode = (0, import_react9.useCallback)(() => {
+    dispatch({ type: "SET_QUESTION_MODE", enabled: true });
+  }, []);
+  const handleSwitchToTaskMode = (0, import_react9.useCallback)(() => {
+    dispatch({ type: "SET_QUESTION_MODE", enabled: false });
+    if (!state.selectedElement) {
+      dispatch({ type: "SET_SELECTION_MODE", enabled: true });
+    }
+  }, [state.selectedElement]);
+  const handleToastDismiss = (0, import_react9.useCallback)(() => {
+    dispatch({ type: "SET_ACTIVE_TASK", task: null });
+  }, []);
+  const handleSessionClose = (0, import_react9.useCallback)((sessionId) => {
+    if (state.activeSessionId === sessionId) {
+      dispatch({ type: "SET_ACTIVE_SESSION", sessionId: null });
+    }
+  }, [state.activeSessionId]);
+  const handleVoiceInputStart = (0, import_react9.useCallback)(() => {
+    dispatch({ type: "SET_VOICE_INPUT_PENDING", pending: false });
+  }, []);
+  const setActiveSession = (0, import_react9.useCallback)((sessionId) => {
+    dispatch({ type: "SET_ACTIVE_SESSION", sessionId });
+  }, []);
+  const setPanelExpanded = (0, import_react9.useCallback)((expanded) => {
+    dispatch({ type: "SET_PANEL_EXPANDED", expanded });
+  }, []);
+  const setPanelMode = (0, import_react9.useCallback)((mode) => {
+    dispatch({ type: "SET_PANEL_MODE", mode });
+  }, []);
+  const handlePanelModeChange = (0, import_react9.useCallback)((mode) => {
+    dispatch({ type: "SET_PANEL_MODE", mode });
+    if (mode === "prompt") {
+      dispatch({ type: "SET_QUESTION_MODE", enabled: false });
+    } else if (mode === "question") {
+      dispatch({ type: "SET_QUESTION_MODE", enabled: true });
+    } else {
+      dispatch({ type: "SET_QUESTION_MODE", enabled: false });
+      dispatch({ type: "SET_SELECTION_MODE", enabled: false });
+    }
+  }, []);
+  const handlePanelClose = (0, import_react9.useCallback)(() => {
+    dispatch({ type: "SET_PANEL_EXPANDED", expanded: false });
+    dispatch({ type: "SET_PANEL_MODE", mode: "terminal" });
+    dispatch({ type: "SET_SELECTION_MODE", enabled: false });
+    dispatch({ type: "SET_QUESTION_MODE", enabled: false });
+    dispatch({ type: "SET_SELECTED_ELEMENT", element: null });
+  }, []);
+  const effectivePanelMode = state.questionMode ? "question" : state.selectedElement !== null ? "prompt" : "terminal";
+  const contextValue = {
+    state,
+    config,
+    enableSelectionMode,
+    disableSelectionMode,
+    enableQuestionMode,
+    disableQuestionMode,
+    submitTask,
+    submitQuestion,
+    continueTask,
+    setActiveSession,
+    setPanelExpanded,
+    setPanelMode
+  };
+  const shouldShowPanel = projectSessions.length > 0 || state.activeTask !== null || effectivePanelMode !== "terminal";
+  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
+        }
+      ),
+      shouldShowPanel && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        SessionPanel,
+        {
+          sessions: projectSessions,
+          activeSessionId: state.activeSessionId,
+          onSessionSelect: setActiveSession,
+          onSessionClose: handleSessionClose,
+          serverUrl,
+          token,
+          expanded: state.panelExpanded || effectivePanelMode !== "terminal",
+          onExpandedChange: setPanelExpanded,
+          selectedElement: state.selectedElement,
+          mode: effectivePanelMode,
+          onModeChange: handlePanelModeChange,
+          onPromptSubmit: handlePromptSubmit,
+          onQuestionSubmit: handleQuestionSubmit,
+          onClose: handlePanelClose,
+          isSubmitting: state.activeTask?.status === "starting" || state.activeTask?.status === "running",
+          voiceInputActive: state.voiceInputPending,
+          onVoiceInputStart: handleVoiceInputStart,
+          activeTask: state.activeTask
+        }
+      )
+    ] })
+  ] });
+}
+function useClaudeBridge() {
+  const context = (0, import_react9.useContext)(ClaudeBridgeContext);
+  if (!context) {
+    throw new Error("useClaudeBridge must be used within a ClaudeBridgeProvider");
+  }
+  return context;
+}
+
+// src/TaskStatusToast.tsx
+var import_react10 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var MIN_WIDTH2 = 400;
+var MIN_HEIGHT2 = 300;
+var DEFAULT_WIDTH2 = 700;
+var DEFAULT_HEIGHT2 = 500;
+function TaskStatusToast({
+  task,
+  serverUrl,
+  token,
+  onDismiss,
+  killOnClose = true
+}) {
+  const [visible, setVisible] = (0, import_react10.useState)(false);
+  const [expanded, setExpanded] = (0, import_react10.useState)(false);
+  const [size, setSize] = (0, import_react10.useState)({ width: DEFAULT_WIDTH2, height: DEFAULT_HEIGHT2 });
+  const [isResizing, setIsResizing] = (0, import_react10.useState)(false);
+  const [isSaving, setIsSaving] = (0, import_react10.useState)(false);
+  const resizeRef = (0, import_react10.useRef)(null);
+  (0, import_react10.useEffect)(() => {
+    if (task) {
+      setVisible(true);
+      if (task.sessionId && (task.status === "running" || task.status === "starting")) {
+        setExpanded(true);
+      }
+    }
+  }, [task, task?.sessionId, task?.status]);
+  (0, import_react10.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_react10.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_WIDTH2, newWidth),
+        height: Math.max(MIN_HEIGHT2, 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_react10.useCallback)((sessionId, taskPrompt) => {
+    return new Promise((resolve) => {
       const wsUrl = serverUrl.replace(/^http/, "ws").replace(/\/$/, "");
       const ws = new WebSocket(`${wsUrl}/ws/bridge?token=${encodeURIComponent(token)}`);
       let resolved = false;
@@ -1823,7 +2903,7 @@ function TaskStatusToast({
       setTimeout(cleanup, 35e3);
     });
   }, [serverUrl, token]);
-  const handleDismiss = (0, import_react5.useCallback)(async () => {
+  const handleDismiss = (0, import_react10.useCallback)(async () => {
     if (killOnClose && task?.sessionId) {
       setIsSaving(true);
       try {
@@ -1836,7 +2916,7 @@ function TaskStatusToast({
     setExpanded(false);
     setTimeout(onDismiss, 300);
   }, [killOnClose, task?.sessionId, task?.prompt, killSession, onDismiss]);
-  const handleToggleExpand = (0, import_react5.useCallback)(() => {
+  const handleToggleExpand = (0, import_react10.useCallback)(() => {
     setExpanded(!expanded);
   }, [expanded]);
   if (!task || !visible) return null;
@@ -1854,7 +2934,7 @@ function TaskStatusToast({
     window.open(zedUrl, "_blank");
   };
   if (!expanded) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "div",
       {
         style: {
@@ -1873,7 +2953,7 @@ function TaskStatusToast({
           transition: "opacity 0.3s, transform 0.3s"
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
             "div",
             {
               style: {
@@ -1884,7 +2964,7 @@ function TaskStatusToast({
                 gap: 10
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   "div",
                   {
                     style: {
@@ -1896,7 +2976,7 @@ function TaskStatusToast({
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
                   "span",
                   {
                     style: {
@@ -1911,7 +2991,7 @@ function TaskStatusToast({
                     ]
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   "button",
                   {
                     onClick: handleDismiss,
@@ -1931,8 +3011,8 @@ function TaskStatusToast({
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { padding: "12px 16px" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { padding: "12px 16px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "p",
               {
                 style: {
@@ -1949,7 +3029,7 @@ function TaskStatusToast({
                 children: task.prompt
               }
             ),
-            task.error && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            task.error && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
               "p",
               {
                 style: {
@@ -1964,7 +3044,7 @@ function TaskStatusToast({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
             "div",
             {
               style: {
@@ -1975,7 +3055,7 @@ function TaskStatusToast({
                 gap: 8
               },
               children: [
-                task.sessionId && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                task.sessionId && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   "button",
                   {
                     onClick: handleToggleExpand,
@@ -1995,7 +3075,7 @@ function TaskStatusToast({
                     children: "Show Terminal"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
                   "button",
                   {
                     onClick: handleOpenZed,
@@ -2014,14 +3094,14 @@ function TaskStatusToast({
                     },
                     children: [
                       "Open in Zed Controller",
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { fontSize: 11 }, children: "\u2197" })
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { fontSize: 11 }, children: "\u2197" })
                     ]
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: `
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { children: `
             @keyframes claude-bridge-pulse {
               0%, 100% { opacity: 1; }
               50% { opacity: 0.5; }
@@ -2031,7 +3111,7 @@ function TaskStatusToast({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
       style: {
@@ -2052,7 +3132,7 @@ function TaskStatusToast({
         overflow: "hidden"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "div",
           {
             onMouseDown: (e) => handleResizeStart(e, "n"),
@@ -2067,7 +3147,7 @@ function TaskStatusToast({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "div",
           {
             onMouseDown: (e) => handleResizeStart(e, "w"),
@@ -2082,7 +3162,7 @@ function TaskStatusToast({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "div",
           {
             onMouseDown: (e) => handleResizeStart(e, "nw"),
@@ -2097,7 +3177,7 @@ function TaskStatusToast({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
           "div",
           {
             style: {
@@ -2109,7 +3189,7 @@ function TaskStatusToast({
               flexShrink: 0
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "div",
                 {
                   style: {
@@ -2121,7 +3201,7 @@ function TaskStatusToast({
                   }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
                 "span",
                 {
                   style: {
@@ -2142,7 +3222,7 @@ function TaskStatusToast({
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "button",
                 {
                   onClick: handleToggleExpand,
@@ -2159,7 +3239,7 @@ function TaskStatusToast({
                   children: "\u2212"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "button",
                 {
                   onClick: handleOpenZed,
@@ -2176,7 +3256,7 @@ function TaskStatusToast({
                   children: "\u2197"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "button",
                 {
                   onClick: handleDismiss,
@@ -2197,7 +3277,7 @@ function TaskStatusToast({
             ]
           }
         ),
-        isSaving && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        isSaving && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
           "div",
           {
             style: {
@@ -2215,7 +3295,7 @@ function TaskStatusToast({
               borderRadius: 12
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "div",
                 {
                   style: {
@@ -2227,7 +3307,7 @@ function TaskStatusToast({
                   children: "Saving changes..."
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "div",
                 {
                   style: {
@@ -2240,7 +3320,7 @@ function TaskStatusToast({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { flex: 1, minHeight: 0 }, children: task.sessionId ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { flex: 1, minHeight: 0 }, children: task.sessionId ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           ClaudeTerminal,
           {
             serverUrl,
@@ -2248,7 +3328,7 @@ function TaskStatusToast({
             sessionId: task.sessionId,
             style: { width: "100%", height: "100%" }
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "div",
           {
             style: {
@@ -2261,7 +3341,7 @@ function TaskStatusToast({
             children: "Waiting for session..."
           }
         ) }),
-        task.error && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        task.error && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
           "div",
           {
             style: {
@@ -2278,7 +3358,7 @@ function TaskStatusToast({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: `
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { children: `
           @keyframes claude-bridge-pulse {
             0%, 100% { opacity: 1; }
             50% { opacity: 0.5; }
@@ -2288,393 +3368,22 @@ function TaskStatusToast({
     }
   );
 }
-
-// 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,
+  SessionPanel,
+  SessionTabs,
   TaskStatusToast,
+  VoiceInput,
   captureContext,
   captureElementScreenshot,
   capturePageContext,
-  useClaudeBridge
+  getSessionDisplayName,
+  isSessionActive,
+  useClaudeBridge,
+  useSessionStorage,
+  useSessions,
+  useVoiceInput
 });
 //# sourceMappingURL=index.cjs.map