@ibealec/create-zed-bridge 1.0.13 → 1.0.15

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

@@ -4,8 +4,8 @@ import {
   useContext,
   useReducer,
   useEffect as useEffect6,
-  useCallback as useCallback4,
-  useRef as useRef6
+  useCallback as useCallback8,
+  useRef as useRef5
 } from "react";
 
 // src/websocket-client.ts
@@ -669,275 +669,564 @@ function SelectionOverlay({
   ] });
 }
 
-// src/PromptDialog.tsx
-import { useState, useRef as useRef2, useEffect as useEffect2 } from "react";
+// src/components/SessionPanel.tsx
+import { useEffect as useEffect5, useState as useState3, useRef as useRef4, useCallback as useCallback6 } from "react";
+
+// src/ClaudeTerminal.tsx
+import { useEffect as useEffect2, useRef as useRef2, useCallback as useCallback2, useState } from "react";
+import { Terminal } from "@xterm/xterm";
+import { FitAddon } from "@xterm/addon-fit";
+import { WebglAddon } from "@xterm/addon-webgl";
+import "@xterm/xterm/css/xterm.css";
 import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "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] = useState("");
-  const inputRef = useRef2(null);
+  const containerRef = useRef2(null);
+  const terminalRef = useRef2(null);
+  const fitAddonRef = useRef2(null);
+  const wsRef = useRef2(null);
+  const handleMessageRef = useRef2(null);
+  const [connected, setConnected] = useState(false);
+  const [sessions, setSessions] = useState([]);
+  const [attachedSessionId, setAttachedSessionId] = useState(null);
+  const [error, setError] = useState(null);
   useEffect2(() => {
-    if (open && inputRef.current) {
-      inputRef.current.focus();
+    if (!containerRef.current) return;
+    const terminal = new 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 FitAddon();
+    terminal.loadAddon(fitAddon);
+    terminal.open(containerRef.current);
+    try {
+      const webglAddon = new 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]);
   useEffect2(() => {
-    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__ */ jsxs2(
-    "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__ */ jsxs2(
-          "div",
-          {
-            style: {
-              padding: "12px 16px",
-              borderBottom: "1px solid rgba(255, 255, 255, 0.1)",
-              display: "flex",
-              alignItems: "center",
-              gap: 8
-            },
-            children: [
-              /* @__PURE__ */ jsx2(
-                "div",
-                {
-                  style: {
-                    width: 8,
-                    height: 8,
-                    borderRadius: "50%",
-                    background: "#6366f1"
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsx2(
-                "span",
-                {
-                  style: {
-                    color: "rgba(255, 255, 255, 0.9)",
-                    fontSize: 13,
-                    fontWeight: 500
-                  },
-                  children: context.componentName || context.selectedElement.tagName
-                }
-              ),
-              context.sourceFile && /* @__PURE__ */ jsxs2(
-                "span",
-                {
-                  style: {
-                    color: "rgba(255, 255, 255, 0.5)",
-                    fontSize: 12,
-                    fontFamily: "ui-monospace, monospace"
-                  },
-                  children: [
-                    context.sourceFile,
-                    context.sourceLine ? `:${context.sourceLine}` : ""
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx2("div", { style: { flex: 1 } }),
-              /* @__PURE__ */ jsx2(
-                "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__ */ jsxs2("div", { style: { padding: 16 }, children: [
-          /* @__PURE__ */ jsx2(
-            "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__ */ jsx2(
-            "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__ */ jsx2(
-                  "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 = useRef2(null);
+  attachedSessionIdRef.current = attachedSessionId;
+  useEffect2(() => {
+    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__ */ jsxs2(
-          "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]);
+  useEffect2(() => {
+    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]);
+  useEffect2(() => {
+    if (sessionId && connected && !attachedSessionId) {
+      wsRef.current?.send(JSON.stringify({
+        type: "attach_terminal",
+        sessionId
+      }));
+    }
+  }, [sessionId, connected, attachedSessionId]);
+  useEffect2(() => {
+    if (attachedSessionId && terminalRef.current && fitAddonRef.current) {
+      const timer = setTimeout(() => {
+        fitAddonRef.current?.fit();
+        terminalRef.current?.focus();
+      }, 50);
+      return () => clearTimeout(timer);
+    }
+  }, [attachedSessionId]);
+  const handleContainerClick = useCallback2(() => {
+    terminalRef.current?.focus();
+  }, []);
+  const handleSelectSession = useCallback2((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__ */ jsx2(
+      "div",
+      {
+        className,
+        style: {
+          background: "#1a1a1a",
+          color: "#f0f0f0",
+          padding: "20px",
+          fontFamily: 'Menlo, Monaco, "Courier New", monospace',
+          ...style
+        },
+        children: !connected ? /* @__PURE__ */ jsx2("div", { children: "Connecting to server..." }) : error ? /* @__PURE__ */ jsxs2("div", { style: { color: "#ff5555" }, children: [
+          "Error: ",
+          error
+        ] }) : sessions.length === 0 ? /* @__PURE__ */ jsx2("div", { children: "No Claude sessions available" }) : /* @__PURE__ */ jsxs2("div", { children: [
+          /* @__PURE__ */ jsx2("div", { style: { marginBottom: "10px", fontSize: "14px" }, children: "Select a Claude session:" }),
+          sessions.map((session) => /* @__PURE__ */ jsxs2(
+            "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__ */ jsx2("div", { style: { fontWeight: "bold" }, children: session.displayName || session.name }),
+                /* @__PURE__ */ jsx2("div", { style: { fontSize: "12px", color: "#888", marginTop: "4px" }, children: session.workingDir })
+              ]
             },
-            children: [
-              /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
-                /* @__PURE__ */ jsxs2(
+            session.id
+          ))
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("style", { children: XTERM_CRITICAL_CSS }),
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        ref: containerRef,
+        className,
+        onClick: handleContainerClick,
+        style: {
+          width: "100%",
+          height: "100%",
+          ...style
+        }
+      }
+    )
+  ] });
+}
+
+// src/components/SessionTabs.tsx
+import { useCallback as useCallback3 } from "react";
+
+// src/hooks/useSessions.ts
+import { useMemo } from "react";
+function useSessions({
+  sessions,
+  projectRoot
+}) {
+  const isProjectSession = useMemo(() => {
+    return (session) => {
+      if (!projectRoot) return true;
+      return session.workingDir === projectRoot || session.workingDir.startsWith(projectRoot + "/");
+    };
+  }, [projectRoot]);
+  const projectSessions = useMemo(() => {
+    if (!projectRoot) return sessions;
+    return sessions.filter(isProjectSession);
+  }, [sessions, projectRoot, isProjectSession]);
+  const sortedProjectSessions = 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
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function SessionTabs({
+  sessions,
+  activeSessionId,
+  onSessionSelect,
+  onSessionClose,
+  taskSessionId
+}) {
+  const handleTabClick = useCallback3(
+    (e, sessionId) => {
+      e.stopPropagation();
+      onSessionSelect(sessionId);
+    },
+    [onSessionSelect]
+  );
+  const handleCloseClick = useCallback3(
+    (e, sessionId) => {
+      e.stopPropagation();
+      onSessionClose?.(sessionId);
+    },
+    [onSessionClose]
+  );
+  if (sessions.length === 0) {
+    return /* @__PURE__ */ jsx3(
+      "div",
+      {
+        style: {
+          padding: "8px 12px",
+          color: "rgba(255, 255, 255, 0.5)",
+          fontSize: 12
+        },
+        children: "No active sessions"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs3(
+    "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__ */ jsxs3(
+            "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__ */ jsx3(
                   "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__ */ jsx2(
-                  "button",
+                /* @__PURE__ */ jsx3(
+                  "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__ */ jsx2(
-                "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__ */ jsxs2(Fragment2, { children: [
-                    /* @__PURE__ */ jsx2(
-                      "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__ */ jsx2("style", { children: `
-          @keyframes claude-bridge-spin {
-            to { transform: rotate(360deg); }
+                ),
+                onSessionClose && /* @__PURE__ */ jsx3(
+                  "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__ */ jsx3("style", { children: `
+          @keyframes claude-bridge-pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
           }
         ` })
       ]
@@ -945,911 +1234,502 @@ function PromptDialog({
   );
 }
 
-// src/QuestionDialog.tsx
-import { useState as useState2, useRef as useRef3, useEffect as useEffect3 } from "react";
-import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function QuestionDialog({
-  open,
-  selectedElement,
-  onSubmit,
-  onClose,
-  onSwitchToTaskMode,
-  isSubmitting = false
-}) {
-  const [prompt, setPrompt] = useState2("");
-  const [includeElement, setIncludeElement] = useState2(true);
-  const inputRef = useRef3(null);
+// src/components/VoiceInput.tsx
+import React4, { useCallback as useCallback5, useEffect as useEffect4 } from "react";
+
+// src/hooks/useVoiceInput.ts
+import { useState as useState2, useCallback as useCallback4, useRef as useRef3, useEffect as useEffect3 } from "react";
+function useVoiceInput(options = {}) {
+  const {
+    onTranscript,
+    onError,
+    onStart,
+    onEnd,
+    language = "en-US"
+  } = options;
+  const [isListening, setIsListening] = useState2(false);
+  const [transcript, setTranscript] = useState2("");
+  const [interimTranscript, setInterimTranscript] = useState2("");
+  const [error, setError] = useState2(null);
+  const recognitionRef = useRef3(null);
+  const isSupported = typeof window !== "undefined" && (!!window.SpeechRecognition || !!window.webkitSpeechRecognition);
   useEffect3(() => {
-    if (open && inputRef.current) {
-      inputRef.current.focus();
+    return () => {
+      if (recognitionRef.current) {
+        recognitionRef.current.abort();
+        recognitionRef.current = null;
+      }
+    };
+  }, []);
+  const startListening = useCallback4(() => {
+    if (!isSupported) {
+      const errMsg = "Speech recognition is not supported in this browser";
+      setError(errMsg);
+      onError?.(errMsg);
+      return;
     }
-  }, [open]);
-  useEffect3(() => {
-    if (!open) {
-      setPrompt("");
+    if (recognitionRef.current) {
+      recognitionRef.current.abort();
     }
-  }, [open]);
-  useEffect3(() => {
-    setIncludeElement(!!selectedElement);
-  }, [selectedElement]);
-  const handleSubmit = () => {
-    if (!prompt.trim() || isSubmitting) return;
-    onSubmit(prompt.trim(), includeElement && !!selectedElement);
-  };
-  const handleKeyDown = (e) => {
-    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
-      e.preventDefault();
-      handleSubmit();
+    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);
     }
-    if (e.key === "Escape") {
-      e.preventDefault();
-      onClose();
+  }, [isSupported, language, onTranscript, onError, onStart, onEnd]);
+  const stopListening = useCallback4(() => {
+    if (recognitionRef.current) {
+      recognitionRef.current.stop();
     }
+  }, []);
+  return {
+    isListening,
+    isSupported,
+    transcript,
+    interimTranscript,
+    startListening,
+    stopListening,
+    error
   };
-  if (!open) return null;
-  const pageContext = capturePageContext();
-  const elementContext = selectedElement ? captureContext(selectedElement) : null;
-  return /* @__PURE__ */ jsxs3(
-    "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__ */ jsxs3(
-          "div",
-          {
-            style: {
-              padding: "12px 16px",
-              borderBottom: "1px solid rgba(255, 255, 255, 0.1)",
-              display: "flex",
-              alignItems: "center",
-              gap: 8
-            },
-            children: [
-              /* @__PURE__ */ jsx3(
-                "div",
-                {
-                  style: {
-                    width: 8,
-                    height: 8,
-                    borderRadius: "50%",
-                    background: "#22c55e"
-                    // Green to differentiate from task dialog
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsx3(
-                "span",
-                {
-                  style: {
-                    color: "rgba(255, 255, 255, 0.9)",
-                    fontSize: 13,
-                    fontWeight: 500
-                  },
-                  children: "Ask a Question"
-                }
-              ),
-              /* @__PURE__ */ jsx3(
-                "span",
-                {
-                  style: {
-                    color: "rgba(255, 255, 255, 0.5)",
-                    fontSize: 12
-                  },
-                  children: pageContext.pageTitle
-                }
-              ),
-              /* @__PURE__ */ jsx3("div", { style: { flex: 1 } }),
-              /* @__PURE__ */ jsx3(
-                "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"
+}
+
+// src/components/VoiceInput.tsx
+import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function VoiceInput({
+  onTranscript,
+  onListeningChange,
+  disabled = false,
+  size = "medium",
+  autoStart = false
+}) {
+  const autoStartTriggeredRef = React4.useRef(false);
+  const {
+    isListening,
+    isSupported,
+    transcript,
+    interimTranscript,
+    startListening,
+    stopListening
+  } = useVoiceInput({
+    onTranscript: (text, isFinal) => {
+      if (isFinal) {
+        onTranscript(text);
+      }
+    }
+  });
+  useEffect4(() => {
+    if (autoStart && isSupported && !disabled && !autoStartTriggeredRef.current) {
+      autoStartTriggeredRef.current = true;
+      const timer = setTimeout(() => {
+        startListening();
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [autoStart, isSupported, disabled, startListening]);
+  useEffect4(() => {
+    onListeningChange?.(isListening);
+  }, [isListening, onListeningChange]);
+  useEffect4(() => {
+    if (!isListening && transcript) {
+      onTranscript(transcript);
+    }
+  }, [isListening, transcript, onTranscript]);
+  const handleClick = useCallback5(() => {
+    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__ */ jsxs4("div", { style: { position: "relative", display: "inline-flex", alignItems: "center" }, children: [
+    /* @__PURE__ */ jsxs4(
+      "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__ */ jsxs4(Fragment3, { children: [
+            /* @__PURE__ */ jsx4(
+              "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"
                 }
-              )
-            ]
-          }
-        ),
-        selectedElement && /* @__PURE__ */ jsx3(
-          "div",
-          {
-            style: {
-              padding: "8px 16px",
-              background: "rgba(34, 197, 94, 0.1)",
-              borderBottom: "1px solid rgba(255, 255, 255, 0.1)",
-              display: "flex",
-              alignItems: "center",
-              gap: 8
-            },
-            children: /* @__PURE__ */ jsxs3(
-              "label",
+              }
+            ),
+            /* @__PURE__ */ jsx4(
+              "span",
               {
                 style: {
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 8,
-                  cursor: "pointer",
-                  flex: 1
-                },
-                children: [
-                  /* @__PURE__ */ jsx3(
-                    "input",
-                    {
-                      type: "checkbox",
-                      checked: includeElement,
-                      onChange: (e) => setIncludeElement(e.target.checked),
-                      style: { cursor: "pointer" }
-                    }
-                  ),
-                  /* @__PURE__ */ jsx3(
-                    "span",
-                    {
-                      style: {
-                        color: "rgba(255, 255, 255, 0.7)",
-                        fontSize: 12
-                      },
-                      children: "Include selected element:"
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs3(
-                    "span",
-                    {
-                      style: {
-                        color: "rgba(255, 255, 255, 0.9)",
-                        fontSize: 12,
-                        fontFamily: "ui-monospace, monospace"
-                      },
-                      children: [
-                        elementContext?.componentName || elementContext?.selectedElement.tagName,
-                        elementContext?.sourceFile && /* @__PURE__ */ jsxs3("span", { style: { color: "rgba(255, 255, 255, 0.5)", marginLeft: 4 }, children: [
-                          "(",
-                          elementContext.sourceFile,
-                          elementContext.sourceLine ? `:${elementContext.sourceLine}` : "",
-                          ")"
-                        ] })
-                      ]
-                    }
-                  )
-                ]
+                  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__ */ jsxs3("div", { style: { padding: 16 }, children: [
-          /* @__PURE__ */ jsx3(
-            "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__ */ jsx3(
-            "div",
+          ] }),
+          /* @__PURE__ */ jsxs4(
+            "svg",
             {
-              style: {
-                display: "flex",
-                flexWrap: "wrap",
-                gap: 8,
-                marginTop: 12
-              },
+              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: [
-                "What does this page do?",
-                "Where are the backend routes?",
-                "How does this component work?",
-                "What API calls does this make?"
-              ].map((suggestion) => /* @__PURE__ */ jsx3(
-                "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__ */ jsx4("path", { d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" }),
+                /* @__PURE__ */ jsx4("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
+                /* @__PURE__ */ jsx4("line", { x1: "12", x2: "12", y1: "19", y2: "22" })
+              ]
             }
           )
-        ] }),
-        /* @__PURE__ */ jsxs3(
-          "div",
-          {
-            style: {
-              padding: "12px 16px",
-              borderTop: "1px solid rgba(255, 255, 255, 0.1)",
-              display: "flex",
-              justifyContent: "space-between",
-              alignItems: "center"
-            },
-            children: [
-              /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
-                /* @__PURE__ */ jsxs3(
-                  "span",
-                  {
-                    style: {
-                      color: "rgba(255, 255, 255, 0.4)",
-                      fontSize: 12
-                    },
-                    children: [
-                      navigator.platform.includes("Mac") ? "\u2318" : "Ctrl",
-                      "+Enter to submit"
-                    ]
-                  }
-                ),
-                onSwitchToTaskMode && /* @__PURE__ */ jsx3(
-                  "button",
-                  {
-                    onClick: onSwitchToTaskMode,
-                    disabled: isSubmitting,
-                    style: {
-                      background: "transparent",
-                      border: "none",
-                      color: "#6366f1",
-                      fontSize: 12,
-                      cursor: "pointer",
-                      padding: 0,
-                      textDecoration: "underline"
-                    },
-                    children: "Make changes instead"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx3(
-                "button",
-                {
-                  onClick: handleSubmit,
-                  disabled: !prompt.trim() || isSubmitting,
-                  style: {
-                    background: prompt.trim() && !isSubmitting ? "#22c55e" : "rgba(34, 197, 94, 0.3)",
-                    border: "none",
-                    borderRadius: 6,
-                    padding: "8px 16px",
-                    color: "white",
-                    fontSize: 14,
-                    fontWeight: 500,
-                    cursor: prompt.trim() && !isSubmitting ? "pointer" : "not-allowed",
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 6
-                  },
-                  children: isSubmitting ? /* @__PURE__ */ jsxs3(Fragment3, { children: [
-                    /* @__PURE__ */ jsx3(
-                      "span",
-                      {
-                        style: {
-                          width: 14,
-                          height: 14,
-                          border: "2px solid rgba(255, 255, 255, 0.3)",
-                          borderTopColor: "white",
-                          borderRadius: "50%",
-                          animation: "claude-bridge-spin 0.8s linear infinite"
-                        }
-                      }
-                    ),
-                    "Asking..."
-                  ] }) : "Ask Claude"
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx3("style", { children: `
-          @keyframes claude-bridge-spin {
-            to { transform: rotate(360deg); }
-          }
-        ` })
-      ]
-    }
-  );
+        ]
+      }
+    ),
+    isListening && (interimTranscript || transcript) && /* @__PURE__ */ jsxs4(
+      "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__ */ jsx4("div", { style: { color: "rgba(255, 255, 255, 0.5)", fontSize: 11, marginBottom: 4 }, children: "Listening..." }),
+          transcript,
+          interimTranscript && /* @__PURE__ */ jsx4("span", { style: { color: "rgba(255, 255, 255, 0.5)" }, children: interimTranscript })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx4("style", { children: `
+          @keyframes claude-voice-pulse {
+            0% {
+              transform: scale(1);
+              opacity: 0.8;
+            }
+            100% {
+              transform: scale(1.5);
+              opacity: 0;
+            }
+          }
+        ` })
+  ] });
 }
 
-// src/TaskStatusToast.tsx
-import { useEffect as useEffect5, useState as useState4, useRef as useRef5, useCallback as useCallback3 } from "react";
-
-// src/ClaudeTerminal.tsx
-import { useEffect as useEffect4, useRef as useRef4, useCallback as useCallback2, useState as useState3 } from "react";
-import { Terminal } from "@xterm/xterm";
-import { FitAddon } from "@xterm/addon-fit";
-import { WebglAddon } from "@xterm/addon-webgl";
-import "@xterm/xterm/css/xterm.css";
-import { Fragment as Fragment4, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var XTERM_CRITICAL_CSS = `
-.xterm {
-  cursor: text;
-  position: relative;
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-}
-.xterm.focus,
-.xterm:focus {
-  outline: none;
-}
-.xterm .xterm-helpers {
-  position: absolute;
-  top: 0;
-  z-index: 5;
-}
-.xterm .xterm-helper-textarea {
-  padding: 0;
-  border: 0;
-  margin: 0;
-  position: absolute;
-  opacity: 0;
-  left: -9999em;
-  top: 0;
-  width: 0;
-  height: 0;
-  z-index: -5;
-  white-space: nowrap;
-  overflow: hidden;
-  resize: none;
-}
-.xterm .xterm-helper-textarea:focus {
-  outline: none;
-}
-.xterm .composition-view {
-  background: #000;
-  color: #FFF;
-  display: none;
-  position: absolute;
-  white-space: nowrap;
-  z-index: 1;
-}
-.xterm .composition-view.active {
-  display: block;
-}
-.xterm .xterm-viewport {
-  background-color: #000;
-  overflow-y: scroll;
-  cursor: default;
-  position: absolute;
-  right: 0;
-  left: 0;
-  top: 0;
-  bottom: 0;
-}
-.xterm .xterm-screen {
-  position: relative;
-}
-.xterm .xterm-screen canvas {
-  position: absolute;
-  left: 0;
-  top: 0;
-}
-.xterm-char-measure-element {
-  display: inline-block;
-  visibility: hidden;
-  position: absolute;
-  top: 0;
-  left: -9999em;
-  line-height: normal;
-}
-.xterm.enable-mouse-events {
-  cursor: default;
-}
-.xterm .xterm-cursor-pointer {
-  cursor: pointer;
-}
-.xterm.xterm-cursor-style-block .xterm-cursor:not(.xterm-cursor-blink),
-.xterm.xterm-cursor-style-bar .xterm-cursor:not(.xterm-cursor-blink),
-.xterm.xterm-cursor-style-underline .xterm-cursor:not(.xterm-cursor-blink) {
-  visibility: visible;
-}
-`;
-function ClaudeTerminal({
+// src/components/SessionPanel.tsx
+import { Fragment as Fragment4, jsx as jsx5, jsxs as jsxs5 } from "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,
-  sessionId,
-  onSessionSelect,
-  onConnectionChange,
-  onSessionsUpdate,
-  terminalOptions = {},
-  style,
-  className
+  expanded,
+  onExpandedChange,
+  selectedElement,
+  mode,
+  onModeChange,
+  onPromptSubmit,
+  onQuestionSubmit,
+  onClose,
+  isSubmitting,
+  voiceInputActive = false,
+  onVoiceInputStart,
+  activeTask
 }) {
-  const containerRef = useRef4(null);
-  const terminalRef = useRef4(null);
-  const fitAddonRef = useRef4(null);
-  const wsRef = useRef4(null);
-  const handleMessageRef = useRef4(null);
-  const [connected, setConnected] = useState3(false);
-  const [sessions, setSessions] = useState3([]);
-  const [attachedSessionId, setAttachedSessionId] = useState3(null);
-  const [error, setError] = useState3(null);
-  useEffect4(() => {
-    if (!containerRef.current) return;
-    const terminal = new 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 [size, setSize] = useState3({ width: DEFAULT_WIDTH, height: DEFAULT_HEIGHT });
+  const [isResizing, setIsResizing] = useState3(false);
+  const [isSaving, setIsSaving] = useState3(false);
+  const [prompt, setPrompt] = useState3("");
+  const [includeElement, setIncludeElement] = useState3(true);
+  const [isVoiceListening, setIsVoiceListening] = useState3(false);
+  const resizeRef = useRef4(null);
+  const inputRef = useRef4(null);
+  useEffect5(() => {
+    setIncludeElement(!!selectedElement);
+  }, [selectedElement]);
+  useEffect5(() => {
+    if (mode === "terminal") {
+      setPrompt("");
+    }
+  }, [mode]);
+  useEffect5(() => {
+    if ((mode === "prompt" || mode === "question") && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [mode]);
+  const handleResizeStart = useCallback6((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 = useCallback6((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);
     });
-    const fitAddon = new FitAddon();
-    terminal.loadAddon(fitAddon);
-    terminal.open(containerRef.current);
+  }, [serverUrl, token]);
+  const handleSessionClose = useCallback6(async (sessionId) => {
+    setIsSaving(true);
     try {
-      const webglAddon = new WebglAddon();
-      webglAddon.onContextLoss(() => {
-        webglAddon.dispose();
-      });
-      terminal.loadAddon(webglAddon);
-    } catch (e) {
-      console.warn("[ClaudeTerminal] WebGL addon could not be loaded:", e);
+      await killSession(sessionId);
+      onSessionClose?.(sessionId);
+    } finally {
+      setIsSaving(false);
     }
-    terminalRef.current = terminal;
-    fitAddonRef.current = fitAddon;
-    requestAnimationFrame(() => {
-      fitAddon.fit();
+  }, [killSession, onSessionClose]);
+  const handleToggleExpand = useCallback6(() => {
+    onExpandedChange(!expanded);
+  }, [expanded, onExpandedChange]);
+  const handleDismiss = useCallback6(() => {
+    onClose();
+    onExpandedChange(false);
+  }, [onClose, onExpandedChange]);
+  const handleVoiceTranscript = useCallback6((text) => {
+    setPrompt((prev) => {
+      const separator = prev.trim() ? " " : "";
+      return prev + separator + text;
     });
-    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]);
-  useEffect4(() => {
-    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 = useRef4(null);
-  attachedSessionIdRef.current = attachedSessionId;
-  useEffect4(() => {
-    handleMessageRef.current = (event) => {
-      try {
-        const message = JSON.parse(event.data);
-        switch (message.type) {
-          case "connected":
-            wsRef.current?.send(JSON.stringify({ type: "get_sessions" }));
-            break;
-          case "sessions_list":
-            if (message.sessions) {
-              setSessions(message.sessions);
-              onSessionsUpdate?.(message.sessions);
-            }
-            break;
-          case "terminal_attached":
-            if (message.sessionId) {
-              setAttachedSessionId(message.sessionId);
-              setError(null);
-              if (message.scrollback && terminalRef.current) {
-                terminalRef.current.write(message.scrollback);
-              }
-              if (fitAddonRef.current && terminalRef.current) {
-                fitAddonRef.current.fit();
-                wsRef.current?.send(JSON.stringify({
-                  type: "terminal_resize",
-                  sessionId: message.sessionId,
-                  cols: terminalRef.current.cols,
-                  rows: terminalRef.current.rows
-                }));
-              }
-            }
-            break;
-          case "terminal_output":
-            if (message.data && terminalRef.current && message.sessionId === attachedSessionIdRef.current) {
-              terminalRef.current.write(message.data);
-            }
-            break;
-          case "terminal_detached":
-            if (message.sessionId === attachedSessionIdRef.current) {
-              setAttachedSessionId(null);
-            }
-            break;
-          case "error":
-            setError(message.error || "Unknown error");
-            console.error("[ClaudeTerminal] Error:", message.error);
-            break;
-          case "pong":
-            break;
-        }
-      } catch (e) {
-        console.error("[ClaudeTerminal] Failed to parse message:", e);
-      }
-    };
-  }, [onSessionsUpdate]);
-  useEffect4(() => {
-    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]);
-  useEffect4(() => {
-    if (sessionId && connected && !attachedSessionId) {
-      wsRef.current?.send(JSON.stringify({
-        type: "attach_terminal",
-        sessionId
-      }));
+    inputRef.current?.focus();
+  }, []);
+  const handleVoiceListeningChange = useCallback6((listening) => {
+    setIsVoiceListening(listening);
+    if (listening) {
+      onVoiceInputStart?.();
     }
-  }, [sessionId, connected, attachedSessionId]);
-  useEffect4(() => {
-    if (attachedSessionId && terminalRef.current && fitAddonRef.current) {
-      const timer = setTimeout(() => {
-        fitAddonRef.current?.fit();
-        terminalRef.current?.focus();
-      }, 50);
-      return () => clearTimeout(timer);
+  }, [onVoiceInputStart]);
+  const handleSubmit = useCallback6(() => {
+    if (!prompt.trim() || isSubmitting) return;
+    if (mode === "prompt") {
+      onPromptSubmit(prompt.trim());
+    } else if (mode === "question") {
+      onQuestionSubmit(prompt.trim(), includeElement && !!selectedElement);
     }
-  }, [attachedSessionId]);
-  const handleContainerClick = useCallback2(() => {
-    terminalRef.current?.focus();
-  }, []);
-  const handleSelectSession = useCallback2((session) => {
-    terminalRef.current?.clear();
-    if (attachedSessionId) {
-      wsRef.current?.send(JSON.stringify({
-        type: "detach_terminal",
-        sessionId: attachedSessionId
-      }));
+    setPrompt("");
+  }, [prompt, isSubmitting, mode, onPromptSubmit, onQuestionSubmit, includeElement, selectedElement]);
+  const handleKeyDown = useCallback6((e) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+      e.preventDefault();
+      handleSubmit();
     }
-    wsRef.current?.send(JSON.stringify({
-      type: "attach_terminal",
-      sessionId: session.id
-    }));
-    onSessionSelect?.(session);
-  }, [attachedSessionId, onSessionSelect]);
-  if (!sessionId && !attachedSessionId) {
-    return /* @__PURE__ */ jsx4(
+    if (e.key === "Escape") {
+      e.preventDefault();
+      if (mode !== "terminal") {
+        onModeChange("terminal");
+      } else {
+        handleDismiss();
+      }
+    }
+  }, [handleSubmit, mode, onModeChange, handleDismiss]);
+  const handleOpenZed = useCallback6(() => {
+    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;
+  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__ */ jsxs5(
       "div",
       {
-        className,
         style: {
-          background: "#1a1a1a",
-          color: "#f0f0f0",
-          padding: "20px",
-          fontFamily: 'Menlo, Monaco, "Courier New", monospace',
-          ...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: !connected ? /* @__PURE__ */ jsx4("div", { children: "Connecting to server..." }) : error ? /* @__PURE__ */ jsxs4("div", { style: { color: "#ff5555" }, children: [
-          "Error: ",
-          error
-        ] }) : sessions.length === 0 ? /* @__PURE__ */ jsx4("div", { children: "No Claude sessions available" }) : /* @__PURE__ */ jsxs4("div", { children: [
-          /* @__PURE__ */ jsx4("div", { style: { marginBottom: "10px", fontSize: "14px" }, children: "Select a Claude session:" }),
-          sessions.map((session) => /* @__PURE__ */ jsxs4(
+        children: [
+          /* @__PURE__ */ jsxs5(
             "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";
+                padding: "12px 16px",
+                display: "flex",
+                alignItems: "center",
+                gap: 10
               },
               children: [
-                /* @__PURE__ */ jsx4("div", { style: { fontWeight: "bold" }, children: session.displayName || session.name }),
-                /* @__PURE__ */ jsx4("div", { style: { fontSize: "12px", color: "#888", marginTop: "4px" }, children: session.workingDir })
-              ]
-            },
-            session.id
-          ))
-        ] })
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs4(Fragment4, { children: [
-    /* @__PURE__ */ jsx4("style", { children: XTERM_CRITICAL_CSS }),
-    /* @__PURE__ */ jsx4(
-      "div",
-      {
-        ref: containerRef,
-        className,
-        onClick: handleContainerClick,
-        style: {
-          width: "100%",
-          height: "100%",
-          ...style
-        }
-      }
-    )
-  ] });
-}
-
-// src/TaskStatusToast.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "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] = useState4(false);
-  const [expanded, setExpanded] = useState4(false);
-  const [size, setSize] = useState4({ width: DEFAULT_WIDTH, height: DEFAULT_HEIGHT });
-  const [isResizing, setIsResizing] = useState4(false);
-  const [isSaving, setIsSaving] = useState4(false);
-  const resizeRef = useRef5(null);
-  useEffect5(() => {
-    if (task) {
-      setVisible(true);
-      if (task.sessionId && (task.status === "running" || task.status === "starting")) {
-        setExpanded(true);
-      }
-    }
-  }, [task, task?.sessionId, task?.status]);
-  useEffect5(() => {
-    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 = useCallback3((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 = useCallback3((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,
-          // Include task prompt for auto-commit message
-          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 handleDismiss = useCallback3(async () => {
-    if (killOnClose && task?.sessionId) {
-      setIsSaving(true);
-      try {
-        await killSession(task.sessionId, task.prompt);
-      } finally {
-        setIsSaving(false);
-      }
-    }
-    setVisible(false);
-    setExpanded(false);
-    setTimeout(onDismiss, 300);
-  }, [killOnClose, task?.sessionId, task?.prompt, killSession, onDismiss]);
-  const handleToggleExpand = useCallback3(() => {
-    setExpanded(!expanded);
-  }, [expanded]);
-  if (!task || !visible) return null;
-  const statusColors = {
-    queued: { bg: "#6366f1", text: "Queued" },
-    starting: { bg: "#f59e0b", text: "Starting..." },
-    running: { bg: "#22c55e", text: "Running" },
-    completed: { bg: "#22c55e", text: "Completed" },
-    failed: { bg: "#ef4444", text: "Failed" },
-    saving: { bg: "#f59e0b", text: "Saving..." }
-  };
-  const status = isSaving ? statusColors.saving : statusColors[task.status] || statusColors.queued;
-  const zedUrl = task.sessionId ? `${serverUrl}?token=${encodeURIComponent(token)}&session=${task.sessionId}` : `${serverUrl}?token=${encodeURIComponent(token)}`;
-  const handleOpenZed = () => {
-    window.open(zedUrl, "_blank");
-  };
-  if (!expanded) {
-    return /* @__PURE__ */ jsxs5(
-      "div",
-      {
-        style: {
-          position: "fixed",
-          bottom: 24,
-          right: 24,
-          zIndex: 1000001,
-          background: "#1e1e2e",
-          borderRadius: 12,
-          boxShadow: "0 8px 32px rgba(0, 0, 0, 0.3)",
-          fontFamily: "system-ui, -apple-system, sans-serif",
-          minWidth: 320,
-          maxWidth: 400,
-          opacity: visible ? 1 : 0,
-          transform: visible ? "translateY(0)" : "translateY(20px)",
-          transition: "opacity 0.3s, transform 0.3s"
-        },
-        children: [
-          /* @__PURE__ */ jsxs5(
-            "div",
-            {
-              style: {
-                padding: "12px 16px",
-                borderBottom: "1px solid rgba(255, 255, 255, 0.1)",
-                display: "flex",
-                alignItems: "center",
-                gap: 10
-              },
-              children: [
-                /* @__PURE__ */ jsx5(
+                status && /* @__PURE__ */ jsx5(
                   "div",
                   {
                     style: {
@@ -1857,7 +1737,7 @@ function TaskStatusToast({
                       height: 10,
                       borderRadius: "50%",
                       background: status.bg,
-                      animation: task.status === "running" || task.status === "starting" ? "claude-bridge-pulse 1.5s infinite" : "none"
+                      animation: activeTask?.status === "running" || activeTask?.status === "starting" ? "claude-bridge-pulse 1.5s infinite" : "none"
                     }
                   }
                 ),
@@ -1871,76 +1751,12 @@ function TaskStatusToast({
                       flex: 1
                     },
                     children: [
-                      "Claude Task: ",
-                      status.text
+                      sessions.length > 0 ? `${sessions.length} session${sessions.length > 1 ? "s" : ""}` : "Claude",
+                      status && `: ${status.text}`
                     ]
                   }
                 ),
                 /* @__PURE__ */ jsx5(
-                  "button",
-                  {
-                    onClick: handleDismiss,
-                    disabled: isSaving,
-                    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"
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs5("div", { style: { padding: "12px 16px" }, children: [
-            /* @__PURE__ */ jsx5(
-              "p",
-              {
-                style: {
-                  color: "rgba(255, 255, 255, 0.7)",
-                  fontSize: 13,
-                  margin: 0,
-                  lineHeight: 1.5,
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
-                  display: "-webkit-box",
-                  WebkitLineClamp: 2,
-                  WebkitBoxOrient: "vertical"
-                },
-                children: task.prompt
-              }
-            ),
-            task.error && /* @__PURE__ */ jsxs5(
-              "p",
-              {
-                style: {
-                  color: "#ef4444",
-                  fontSize: 12,
-                  margin: "8px 0 0"
-                },
-                children: [
-                  "Error: ",
-                  task.error
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs5(
-            "div",
-            {
-              style: {
-                padding: "12px 16px",
-                borderTop: "1px solid rgba(255, 255, 255, 0.1)",
-                display: "flex",
-                justifyContent: "flex-end",
-                gap: 8
-              },
-              children: [
-                task.sessionId && /* @__PURE__ */ jsx5(
                   "button",
                   {
                     onClick: handleToggleExpand,
@@ -1948,39 +1764,29 @@ function TaskStatusToast({
                       background: "#374151",
                       border: "none",
                       borderRadius: 6,
-                      padding: "8px 16px",
+                      padding: "6px 12px",
                       color: "white",
-                      fontSize: 13,
+                      fontSize: 12,
                       fontWeight: 500,
-                      cursor: "pointer",
-                      display: "flex",
-                      alignItems: "center",
-                      gap: 6
+                      cursor: "pointer"
                     },
-                    children: "Show Terminal"
+                    children: "Expand"
                   }
                 ),
-                /* @__PURE__ */ jsxs5(
+                /* @__PURE__ */ jsx5(
                   "button",
                   {
-                    onClick: handleOpenZed,
+                    onClick: handleDismiss,
                     style: {
-                      background: "#6366f1",
+                      background: "transparent",
                       border: "none",
-                      borderRadius: 6,
-                      padding: "8px 16px",
-                      color: "white",
-                      fontSize: 13,
-                      fontWeight: 500,
+                      color: "rgba(255, 255, 255, 0.5)",
                       cursor: "pointer",
-                      display: "flex",
-                      alignItems: "center",
-                      gap: 6
+                      padding: 4,
+                      fontSize: 18,
+                      lineHeight: 1
                     },
-                    children: [
-                      "Open in Zed Controller",
-                      /* @__PURE__ */ jsx5("span", { style: { fontSize: 11 }, children: "\u2197" })
-                    ]
+                    children: "\xD7"
                   }
                 )
               ]
@@ -2012,7 +1818,6 @@ function TaskStatusToast({
         fontFamily: "system-ui, -apple-system, sans-serif",
         display: "flex",
         flexDirection: "column",
-        opacity: visible ? 1 : 0,
         transition: isResizing ? "none" : "opacity 0.3s",
         overflow: "hidden"
       },
@@ -2066,99 +1871,76 @@ function TaskStatusToast({
           "div",
           {
             style: {
-              padding: "10px 16px",
               borderBottom: "1px solid rgba(255, 255, 255, 0.1)",
               display: "flex",
               alignItems: "center",
-              gap: 10,
               flexShrink: 0
             },
             children: [
               /* @__PURE__ */ jsx5(
-                "div",
+                SessionTabs,
                 {
-                  style: {
-                    width: 10,
-                    height: 10,
-                    borderRadius: "50%",
-                    background: status.bg,
-                    animation: task.status === "running" || task.status === "starting" ? "claude-bridge-pulse 1.5s infinite" : "none"
-                  }
+                  sessions,
+                  activeSessionId,
+                  onSessionSelect,
+                  onSessionClose: handleSessionClose,
+                  taskSessionId: activeTask?.sessionId
                 }
               ),
-              /* @__PURE__ */ jsxs5(
-                "span",
-                {
-                  style: {
-                    color: "rgba(255, 255, 255, 0.9)",
-                    fontSize: 14,
-                    fontWeight: 500,
-                    flex: 1,
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    whiteSpace: "nowrap"
-                  },
-                  title: task.prompt,
-                  children: [
-                    status.text,
-                    ": ",
-                    task.prompt.slice(0, 50),
-                    task.prompt.length > 50 ? "..." : ""
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx5(
-                "button",
-                {
-                  onClick: handleToggleExpand,
-                  title: "Minimize",
-                  style: {
-                    background: "transparent",
-                    border: "none",
-                    color: "rgba(255, 255, 255, 0.5)",
-                    cursor: "pointer",
-                    padding: 4,
-                    fontSize: 14,
-                    lineHeight: 1
-                  },
-                  children: "\u2212"
-                }
-              ),
-              /* @__PURE__ */ jsx5(
-                "button",
-                {
-                  onClick: handleOpenZed,
-                  title: "Open in Zed Controller",
-                  style: {
-                    background: "transparent",
-                    border: "none",
-                    color: "rgba(255, 255, 255, 0.5)",
-                    cursor: "pointer",
-                    padding: 4,
-                    fontSize: 14,
-                    lineHeight: 1
-                  },
-                  children: "\u2197"
-                }
-              ),
-              /* @__PURE__ */ jsx5(
-                "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"
-                }
-              )
+              /* @__PURE__ */ jsxs5("div", { style: { display: "flex", alignItems: "center", gap: 4, padding: "4px 8px" }, children: [
+                /* @__PURE__ */ jsx5(
+                  "button",
+                  {
+                    onClick: handleToggleExpand,
+                    title: "Minimize",
+                    style: {
+                      background: "transparent",
+                      border: "none",
+                      color: "rgba(255, 255, 255, 0.5)",
+                      cursor: "pointer",
+                      padding: 4,
+                      fontSize: 14,
+                      lineHeight: 1
+                    },
+                    children: "\u2212"
+                  }
+                ),
+                /* @__PURE__ */ jsx5(
+                  "button",
+                  {
+                    onClick: handleOpenZed,
+                    title: "Open in Zed Controller",
+                    style: {
+                      background: "transparent",
+                      border: "none",
+                      color: "rgba(255, 255, 255, 0.5)",
+                      cursor: "pointer",
+                      padding: 4,
+                      fontSize: 14,
+                      lineHeight: 1
+                    },
+                    children: "\u2197"
+                  }
+                ),
+                /* @__PURE__ */ jsx5(
+                  "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"
+                  }
+                )
+              ] })
             ]
           }
         ),
@@ -2180,39 +1962,32 @@ function TaskStatusToast({
               borderRadius: 12
             },
             children: [
-              /* @__PURE__ */ jsx5(
-                "div",
-                {
-                  style: {
-                    color: "#f59e0b",
-                    fontSize: 14,
-                    fontWeight: 500,
-                    marginBottom: 8
-                  },
-                  children: "Saving changes..."
-                }
-              ),
-              /* @__PURE__ */ jsx5(
-                "div",
-                {
-                  style: {
-                    color: "rgba(255, 255, 255, 0.6)",
-                    fontSize: 12
-                  },
-                  children: "Generating commit message with AI"
-                }
-              )
+              /* @__PURE__ */ jsx5("div", { style: { color: "#f59e0b", fontSize: 14, fontWeight: 500, marginBottom: 8 }, children: "Saving changes..." }),
+              /* @__PURE__ */ jsx5("div", { style: { color: "rgba(255, 255, 255, 0.6)", fontSize: 12 }, children: "Generating commit message with AI" })
             ]
           }
         ),
-        /* @__PURE__ */ jsx5("div", { style: { flex: 1, minHeight: 0 }, children: task.sessionId ? /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx5("div", { style: { flex: 1, minHeight: 0 }, children: activeSessionId ? /* @__PURE__ */ jsx5(
           ClaudeTerminal,
           {
             serverUrl,
             token,
-            sessionId: task.sessionId,
+            sessionId: activeSessionId,
             style: { width: "100%", height: "100%" }
           }
+        ) : sessions.length > 0 ? /* @__PURE__ */ jsx5(
+          "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__ */ jsx5(
           "div",
           {
@@ -2221,12 +1996,201 @@ function TaskStatusToast({
               alignItems: "center",
               justifyContent: "center",
               height: "100%",
-              color: "rgba(255, 255, 255, 0.5)"
+              color: "rgba(255, 255, 255, 0.5)",
+              fontSize: 14
             },
-            children: "Waiting for session..."
+            children: "No active sessions"
           }
         ) }),
-        task.error && /* @__PURE__ */ jsxs5(
+        mode !== "terminal" && /* @__PURE__ */ jsxs5(
+          "div",
+          {
+            style: {
+              borderTop: "1px solid rgba(255, 255, 255, 0.1)",
+              padding: 12,
+              flexShrink: 0
+            },
+            children: [
+              /* @__PURE__ */ jsxs5(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 8,
+                    marginBottom: 8
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx5(
+                      "div",
+                      {
+                        style: {
+                          width: 8,
+                          height: 8,
+                          borderRadius: "50%",
+                          background: mode === "prompt" ? "#6366f1" : "#22c55e"
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs5(
+                      "span",
+                      {
+                        style: {
+                          color: "rgba(255, 255, 255, 0.9)",
+                          fontSize: 12,
+                          fontWeight: 500
+                        },
+                        children: [
+                          mode === "prompt" ? "Task" : "Question",
+                          elementContext && /* @__PURE__ */ jsxs5("span", { style: { color: "rgba(255, 255, 255, 0.5)", marginLeft: 8 }, children: [
+                            elementContext.componentName || elementContext.selectedElement.tagName,
+                            elementContext.sourceFile && ` (${elementContext.sourceFile})`
+                          ] })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx5("div", { style: { flex: 1 } }),
+                    /* @__PURE__ */ jsxs5(
+                      "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__ */ jsxs5(
+                "label",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 8,
+                    marginBottom: 8,
+                    fontSize: 12,
+                    color: "rgba(255, 255, 255, 0.7)",
+                    cursor: "pointer"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx5(
+                      "input",
+                      {
+                        type: "checkbox",
+                        checked: includeElement,
+                        onChange: (e) => setIncludeElement(e.target.checked)
+                      }
+                    ),
+                    "Include selected element"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs5("div", { style: { position: "relative" }, children: [
+                /* @__PURE__ */ jsx5(
+                  "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__ */ jsx5("div", { style: { position: "absolute", right: 8, top: 8 }, children: /* @__PURE__ */ jsx5(
+                  VoiceInput,
+                  {
+                    onTranscript: handleVoiceTranscript,
+                    onListeningChange: handleVoiceListeningChange,
+                    disabled: isSubmitting,
+                    size: "small",
+                    autoStart: voiceInputActive
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ jsxs5(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    marginTop: 8
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs5("span", { style: { color: "rgba(255, 255, 255, 0.4)", fontSize: 11 }, children: [
+                      navigator.platform.includes("Mac") ? "\u2318" : "Ctrl",
+                      "+Enter to submit"
+                    ] }),
+                    /* @__PURE__ */ jsx5(
+                      "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__ */ jsxs5(Fragment4, { children: [
+                          /* @__PURE__ */ jsx5(
+                            "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"
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        activeTask?.error && /* @__PURE__ */ jsxs5(
           "div",
           {
             style: {
@@ -2239,7 +2203,7 @@ function TaskStatusToast({
             },
             children: [
               "Error: ",
-              task.error
+              activeTask.error
             ]
           }
         ),
@@ -2248,12 +2212,58 @@ function TaskStatusToast({
             0%, 100% { opacity: 1; }
             50% { opacity: 0.5; }
           }
+          @keyframes claude-bridge-spin {
+            to { transform: rotate(360deg); }
+          }
         ` })
       ]
     }
   );
 }
 
+// src/hooks/useSessionStorage.ts
+import { useCallback as useCallback7 } from "react";
+var STORAGE_KEY = "claude-bridge-session";
+var EXPIRY_MS = 24 * 60 * 60 * 1e3;
+function useSessionStorage(projectRoot) {
+  const getStoredSessionId = useCallback7(() => {
+    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 = useCallback7(
+    (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 = useCallback7(() => {
+    localStorage.removeItem(STORAGE_KEY);
+  }, []);
+  return {
+    getStoredSessionId,
+    setStoredSessionId,
+    clearStoredSession
+  };
+}
+
 // src/ClaudeBridgeProvider.tsx
 import { Fragment as Fragment5, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var initialState = {
@@ -2262,7 +2272,13 @@ var initialState = {
   questionMode: false,
   selectedElement: null,
   activeTask: null,
-  tasks: []
+  tasks: [],
+  voiceInputPending: false,
+  // Session state
+  sessions: [],
+  activeSessionId: null,
+  panelExpanded: false,
+  panelMode: "terminal"
 };
 function reducer(state, action) {
   switch (action.type) {
@@ -2273,7 +2289,6 @@ function reducer(state, action) {
         ...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":
@@ -2281,10 +2296,16 @@ function reducer(state, action) {
         ...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 "ELEMENT_SELECTED":
+      return {
+        ...state,
+        selectedElement: action.element,
+        selectionMode: false,
+        panelExpanded: true
+      };
     case "SET_ACTIVE_TASK":
       return { ...state, activeTask: action.task };
     case "ADD_TASK":
@@ -2299,6 +2320,17 @@ function reducer(state, action) {
       };
     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;
   }
@@ -2312,6 +2344,7 @@ function ClaudeBridgeProvider({
   projectRoot,
   shortcut = "Meta+Shift+K",
   questionShortcut = "Meta+Shift+?",
+  voiceShortcut = "Meta+Shift+V",
   onTaskCreated,
   onTaskProgress,
   onTaskCompleted,
@@ -2319,8 +2352,8 @@ function ClaudeBridgeProvider({
   onError
 }) {
   const [state, dispatch] = useReducer(reducer, initialState);
-  const wsClientRef = useRef6(null);
-  const pendingTaskResolveRef = useRef6(null);
+  const wsClientRef = useRef5(null);
+  const pendingTaskResolveRef = useRef5(null);
   const config = {
     serverUrl,
     token,
@@ -2328,6 +2361,7 @@ function ClaudeBridgeProvider({
     projectRoot,
     shortcut,
     questionShortcut,
+    voiceShortcut,
     onTaskCreated,
     onTaskProgress,
     onTaskCompleted,
@@ -2352,7 +2386,40 @@ function ClaudeBridgeProvider({
       wsClientRef.current = null;
     };
   }, [enabled, serverUrl, token]);
-  const handleMessage = useCallback4((message) => {
+  const { getStoredSessionId, setStoredSessionId } = useSessionStorage(projectRoot);
+  const { projectSessions } = useSessions({
+    sessions: state.sessions,
+    projectRoot
+  });
+  useEffect6(() => {
+    if (state.connected && wsClientRef.current) {
+      wsClientRef.current.send({ type: "get_sessions" });
+    }
+  }, [state.connected]);
+  useEffect6(() => {
+    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 });
+        }
+      }
+    }
+  }, [state.connected, projectSessions, state.activeSessionId, getStoredSessionId]);
+  useEffect6(() => {
+    if (state.activeSessionId) {
+      setStoredSessionId(state.activeSessionId);
+    }
+  }, [state.activeSessionId, setStoredSessionId]);
+  useEffect6(() => {
+    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 = useCallback8((message) => {
     switch (message.type) {
       case "task_created":
         if (message.task) {
@@ -2404,11 +2471,16 @@ function ClaudeBridgeProvider({
         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);
     }
   }, [onTaskCreated, onTaskProgress, onTaskCompleted, onTaskFailed]);
-  const matchesShortcut = useCallback4((e, shortcutStr) => {
+  const matchesShortcut = useCallback8((e, shortcutStr) => {
     const keys = shortcutStr.split("+");
     const requiresMeta = keys.includes("Meta");
     const requiresCtrl = keys.includes("Ctrl");
@@ -2436,6 +2508,15 @@ function ClaudeBridgeProvider({
         dispatch({ type: "SET_QUESTION_MODE", enabled: !state.questionMode });
         return;
       }
+      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 (e.key === "Escape") {
         if (state.selectionMode) {
           dispatch({ type: "SET_SELECTION_MODE", enabled: false });
@@ -2443,26 +2524,27 @@ function ClaudeBridgeProvider({
         if (state.questionMode) {
           dispatch({ type: "SET_QUESTION_MODE", enabled: false });
         }
+        dispatch({ type: "SET_VOICE_INPUT_PENDING", pending: false });
       }
     };
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [enabled, shortcut, questionShortcut, state.selectionMode, state.questionMode, matchesShortcut]);
-  const enableSelectionMode = useCallback4(() => {
+  }, [enabled, shortcut, questionShortcut, voiceShortcut, state.selectionMode, state.questionMode, state.selectedElement, matchesShortcut]);
+  const enableSelectionMode = useCallback8(() => {
     dispatch({ type: "SET_ACTIVE_TASK", task: null });
     dispatch({ type: "SET_SELECTION_MODE", enabled: true });
   }, []);
-  const disableSelectionMode = useCallback4(() => {
+  const disableSelectionMode = useCallback8(() => {
     dispatch({ type: "SET_SELECTION_MODE", enabled: false });
   }, []);
-  const enableQuestionMode = useCallback4(() => {
+  const enableQuestionMode = useCallback8(() => {
     dispatch({ type: "SET_ACTIVE_TASK", task: null });
     dispatch({ type: "SET_QUESTION_MODE", enabled: true });
   }, []);
-  const disableQuestionMode = useCallback4(() => {
+  const disableQuestionMode = useCallback8(() => {
     dispatch({ type: "SET_QUESTION_MODE", enabled: false });
   }, []);
-  const submitTask = useCallback4(async (prompt) => {
+  const submitTask = useCallback8(async (prompt) => {
     if (!state.selectedElement || !wsClientRef.current?.isConnected) {
       return null;
     }
@@ -2495,7 +2577,7 @@ function ClaudeBridgeProvider({
     dispatch({ type: "SET_SELECTION_MODE", enabled: false });
     return taskIdPromise;
   }, [state.selectedElement]);
-  const continueTask = useCallback4(async (taskId, prompt) => {
+  const continueTask = useCallback8(async (taskId, prompt) => {
     if (!wsClientRef.current?.isConnected) {
       throw new Error("Not connected");
     }
@@ -2510,7 +2592,7 @@ function ClaudeBridgeProvider({
       throw new Error("Failed to send continue task message");
     }
   }, [state.selectedElement]);
-  const submitQuestion = useCallback4(async (prompt, includeSelectedElement = false) => {
+  const submitQuestion = useCallback8(async (prompt, includeSelectedElement = false) => {
     if (!wsClientRef.current?.isConnected) {
       return null;
     }
@@ -2542,35 +2624,71 @@ ${prompt}`;
     dispatch({ type: "SET_QUESTION_MODE", enabled: false });
     return taskIdPromise;
   }, [state.selectedElement]);
-  const handleElementSelect = useCallback4((element) => {
-    dispatch({ type: "SET_SELECTED_ELEMENT", element });
+  const handleElementSelect = useCallback8((element) => {
+    dispatch({ type: "ELEMENT_SELECTED", element });
   }, []);
-  const handlePromptSubmit = useCallback4(async (prompt) => {
+  const handlePromptSubmit = useCallback8(async (prompt) => {
     await submitTask(prompt);
   }, [submitTask]);
-  const handlePromptClose = useCallback4(() => {
+  const handlePromptClose = useCallback8(() => {
     dispatch({ type: "SET_SELECTED_ELEMENT", element: null });
   }, []);
-  const handleQuestionSubmit = useCallback4(async (prompt, includeElement) => {
+  const handleQuestionSubmit = useCallback8(async (prompt, includeElement) => {
     await submitQuestion(prompt, includeElement);
   }, [submitQuestion]);
-  const handleQuestionClose = useCallback4(() => {
+  const handleQuestionClose = useCallback8(() => {
     dispatch({ type: "SET_QUESTION_MODE", enabled: false });
   }, []);
-  const handleSwitchToQuestionMode = useCallback4(() => {
+  const handleSwitchToQuestionMode = useCallback8(() => {
     dispatch({ type: "SET_QUESTION_MODE", enabled: true });
   }, []);
-  const handleSwitchToTaskMode = useCallback4(() => {
+  const handleSwitchToTaskMode = useCallback8(() => {
     dispatch({ type: "SET_QUESTION_MODE", enabled: false });
     if (!state.selectedElement) {
       dispatch({ type: "SET_SELECTION_MODE", enabled: true });
     }
   }, [state.selectedElement]);
-  const handleToastDismiss = useCallback4(() => {
+  const handleToastDismiss = useCallback8(() => {
     dispatch({ type: "SET_ACTIVE_TASK", task: null });
   }, []);
-  const contextValue = {
-    state,
+  const handleSessionClose = useCallback8((sessionId) => {
+    if (state.activeSessionId === sessionId) {
+      dispatch({ type: "SET_ACTIVE_SESSION", sessionId: null });
+    }
+  }, [state.activeSessionId]);
+  const handleVoiceInputStart = useCallback8(() => {
+    dispatch({ type: "SET_VOICE_INPUT_PENDING", pending: false });
+  }, []);
+  const setActiveSession = useCallback8((sessionId) => {
+    dispatch({ type: "SET_ACTIVE_SESSION", sessionId });
+  }, []);
+  const setPanelExpanded = useCallback8((expanded) => {
+    dispatch({ type: "SET_PANEL_EXPANDED", expanded });
+  }, []);
+  const setPanelMode = useCallback8((mode) => {
+    dispatch({ type: "SET_PANEL_MODE", mode });
+  }, []);
+  const handlePanelModeChange = useCallback8((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 = useCallback8(() => {
+    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,
@@ -2578,8 +2696,12 @@ ${prompt}`;
     disableQuestionMode,
     submitTask,
     submitQuestion,
-    continueTask
+    continueTask,
+    setActiveSession,
+    setPanelExpanded,
+    setPanelMode
   };
+  const shouldShowPanel = projectSessions.length > 0 || state.activeTask !== null || effectivePanelMode !== "terminal";
   return /* @__PURE__ */ jsxs6(ClaudeBridgeContext.Provider, { value: contextValue, children: [
     children,
     enabled && /* @__PURE__ */ jsxs6(Fragment5, { children: [
@@ -2591,35 +2713,27 @@ ${prompt}`;
           selectedElement: state.selectedElement
         }
       ),
-      /* @__PURE__ */ jsx6(
-        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__ */ jsx6(
-        QuestionDialog,
-        {
-          open: state.questionMode,
-          selectedElement: state.selectedElement,
-          onSubmit: handleQuestionSubmit,
-          onClose: handleQuestionClose,
-          onSwitchToTaskMode: handleSwitchToTaskMode,
-          isSubmitting: state.activeTask?.status === "starting" || state.activeTask?.status === "running"
-        }
-      ),
-      /* @__PURE__ */ jsx6(
-        TaskStatusToast,
+      shouldShowPanel && /* @__PURE__ */ jsx6(
+        SessionPanel,
         {
-          task: state.activeTask,
+          sessions: projectSessions,
+          activeSessionId: state.activeSessionId,
+          onSessionSelect: setActiveSession,
+          onSessionClose: handleSessionClose,
           serverUrl,
           token,
-          onDismiss: handleToastDismiss
+          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
         }
       )
     ] })
@@ -2632,13 +2746,600 @@ function useClaudeBridge() {
   }
   return context;
 }
+
+// src/TaskStatusToast.tsx
+import { useEffect as useEffect7, useState as useState4, useRef as useRef6, useCallback as useCallback9 } from "react";
+import { jsx as jsx7, jsxs as jsxs7 } from "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] = useState4(false);
+  const [expanded, setExpanded] = useState4(false);
+  const [size, setSize] = useState4({ width: DEFAULT_WIDTH2, height: DEFAULT_HEIGHT2 });
+  const [isResizing, setIsResizing] = useState4(false);
+  const [isSaving, setIsSaving] = useState4(false);
+  const resizeRef = useRef6(null);
+  useEffect7(() => {
+    if (task) {
+      setVisible(true);
+      if (task.sessionId && (task.status === "running" || task.status === "starting")) {
+        setExpanded(true);
+      }
+    }
+  }, [task, task?.sessionId, task?.status]);
+  useEffect7(() => {
+    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 = useCallback9((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 = useCallback9((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,
+          // Include task prompt for auto-commit message
+          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 handleDismiss = useCallback9(async () => {
+    if (killOnClose && task?.sessionId) {
+      setIsSaving(true);
+      try {
+        await killSession(task.sessionId, task.prompt);
+      } finally {
+        setIsSaving(false);
+      }
+    }
+    setVisible(false);
+    setExpanded(false);
+    setTimeout(onDismiss, 300);
+  }, [killOnClose, task?.sessionId, task?.prompt, killSession, onDismiss]);
+  const handleToggleExpand = useCallback9(() => {
+    setExpanded(!expanded);
+  }, [expanded]);
+  if (!task || !visible) return null;
+  const statusColors = {
+    queued: { bg: "#6366f1", text: "Queued" },
+    starting: { bg: "#f59e0b", text: "Starting..." },
+    running: { bg: "#22c55e", text: "Running" },
+    completed: { bg: "#22c55e", text: "Completed" },
+    failed: { bg: "#ef4444", text: "Failed" },
+    saving: { bg: "#f59e0b", text: "Saving..." }
+  };
+  const status = isSaving ? statusColors.saving : statusColors[task.status] || statusColors.queued;
+  const zedUrl = task.sessionId ? `${serverUrl}?token=${encodeURIComponent(token)}&session=${task.sessionId}` : `${serverUrl}?token=${encodeURIComponent(token)}`;
+  const handleOpenZed = () => {
+    window.open(zedUrl, "_blank");
+  };
+  if (!expanded) {
+    return /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          bottom: 24,
+          right: 24,
+          zIndex: 1000001,
+          background: "#1e1e2e",
+          borderRadius: 12,
+          boxShadow: "0 8px 32px rgba(0, 0, 0, 0.3)",
+          fontFamily: "system-ui, -apple-system, sans-serif",
+          minWidth: 320,
+          maxWidth: 400,
+          opacity: visible ? 1 : 0,
+          transform: visible ? "translateY(0)" : "translateY(20px)",
+          transition: "opacity 0.3s, transform 0.3s"
+        },
+        children: [
+          /* @__PURE__ */ jsxs7(
+            "div",
+            {
+              style: {
+                padding: "12px 16px",
+                borderBottom: "1px solid rgba(255, 255, 255, 0.1)",
+                display: "flex",
+                alignItems: "center",
+                gap: 10
+              },
+              children: [
+                /* @__PURE__ */ jsx7(
+                  "div",
+                  {
+                    style: {
+                      width: 10,
+                      height: 10,
+                      borderRadius: "50%",
+                      background: status.bg,
+                      animation: task.status === "running" || task.status === "starting" ? "claude-bridge-pulse 1.5s infinite" : "none"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxs7(
+                  "span",
+                  {
+                    style: {
+                      color: "rgba(255, 255, 255, 0.9)",
+                      fontSize: 14,
+                      fontWeight: 500,
+                      flex: 1
+                    },
+                    children: [
+                      "Claude Task: ",
+                      status.text
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx7(
+                  "button",
+                  {
+                    onClick: handleDismiss,
+                    disabled: isSaving,
+                    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"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs7("div", { style: { padding: "12px 16px" }, children: [
+            /* @__PURE__ */ jsx7(
+              "p",
+              {
+                style: {
+                  color: "rgba(255, 255, 255, 0.7)",
+                  fontSize: 13,
+                  margin: 0,
+                  lineHeight: 1.5,
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  display: "-webkit-box",
+                  WebkitLineClamp: 2,
+                  WebkitBoxOrient: "vertical"
+                },
+                children: task.prompt
+              }
+            ),
+            task.error && /* @__PURE__ */ jsxs7(
+              "p",
+              {
+                style: {
+                  color: "#ef4444",
+                  fontSize: 12,
+                  margin: "8px 0 0"
+                },
+                children: [
+                  "Error: ",
+                  task.error
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs7(
+            "div",
+            {
+              style: {
+                padding: "12px 16px",
+                borderTop: "1px solid rgba(255, 255, 255, 0.1)",
+                display: "flex",
+                justifyContent: "flex-end",
+                gap: 8
+              },
+              children: [
+                task.sessionId && /* @__PURE__ */ jsx7(
+                  "button",
+                  {
+                    onClick: handleToggleExpand,
+                    style: {
+                      background: "#374151",
+                      border: "none",
+                      borderRadius: 6,
+                      padding: "8px 16px",
+                      color: "white",
+                      fontSize: 13,
+                      fontWeight: 500,
+                      cursor: "pointer",
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 6
+                    },
+                    children: "Show Terminal"
+                  }
+                ),
+                /* @__PURE__ */ jsxs7(
+                  "button",
+                  {
+                    onClick: handleOpenZed,
+                    style: {
+                      background: "#6366f1",
+                      border: "none",
+                      borderRadius: 6,
+                      padding: "8px 16px",
+                      color: "white",
+                      fontSize: 13,
+                      fontWeight: 500,
+                      cursor: "pointer",
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 6
+                    },
+                    children: [
+                      "Open in Zed Controller",
+                      /* @__PURE__ */ jsx7("span", { style: { fontSize: 11 }, children: "\u2197" })
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx7("style", { children: `
+            @keyframes claude-bridge-pulse {
+              0%, 100% { opacity: 1; }
+              50% { opacity: 0.5; }
+            }
+          ` })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        bottom: 24,
+        right: 24,
+        zIndex: 1000001,
+        width: size.width,
+        height: size.height,
+        background: "#1e1e2e",
+        borderRadius: 12,
+        boxShadow: "0 8px 32px rgba(0, 0, 0, 0.4)",
+        fontFamily: "system-ui, -apple-system, sans-serif",
+        display: "flex",
+        flexDirection: "column",
+        opacity: visible ? 1 : 0,
+        transition: isResizing ? "none" : "opacity 0.3s",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsx7(
+          "div",
+          {
+            onMouseDown: (e) => handleResizeStart(e, "n"),
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 20,
+              right: 20,
+              height: 6,
+              cursor: "ns-resize",
+              zIndex: 10
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          "div",
+          {
+            onMouseDown: (e) => handleResizeStart(e, "w"),
+            style: {
+              position: "absolute",
+              left: 0,
+              top: 20,
+              bottom: 20,
+              width: 6,
+              cursor: "ew-resize",
+              zIndex: 10
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          "div",
+          {
+            onMouseDown: (e) => handleResizeStart(e, "nw"),
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: 20,
+              height: 20,
+              cursor: "nwse-resize",
+              zIndex: 11
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs7(
+          "div",
+          {
+            style: {
+              padding: "10px 16px",
+              borderBottom: "1px solid rgba(255, 255, 255, 0.1)",
+              display: "flex",
+              alignItems: "center",
+              gap: 10,
+              flexShrink: 0
+            },
+            children: [
+              /* @__PURE__ */ jsx7(
+                "div",
+                {
+                  style: {
+                    width: 10,
+                    height: 10,
+                    borderRadius: "50%",
+                    background: status.bg,
+                    animation: task.status === "running" || task.status === "starting" ? "claude-bridge-pulse 1.5s infinite" : "none"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxs7(
+                "span",
+                {
+                  style: {
+                    color: "rgba(255, 255, 255, 0.9)",
+                    fontSize: 14,
+                    fontWeight: 500,
+                    flex: 1,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap"
+                  },
+                  title: task.prompt,
+                  children: [
+                    status.text,
+                    ": ",
+                    task.prompt.slice(0, 50),
+                    task.prompt.length > 50 ? "..." : ""
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx7(
+                "button",
+                {
+                  onClick: handleToggleExpand,
+                  title: "Minimize",
+                  style: {
+                    background: "transparent",
+                    border: "none",
+                    color: "rgba(255, 255, 255, 0.5)",
+                    cursor: "pointer",
+                    padding: 4,
+                    fontSize: 14,
+                    lineHeight: 1
+                  },
+                  children: "\u2212"
+                }
+              ),
+              /* @__PURE__ */ jsx7(
+                "button",
+                {
+                  onClick: handleOpenZed,
+                  title: "Open in Zed Controller",
+                  style: {
+                    background: "transparent",
+                    border: "none",
+                    color: "rgba(255, 255, 255, 0.5)",
+                    cursor: "pointer",
+                    padding: 4,
+                    fontSize: 14,
+                    lineHeight: 1
+                  },
+                  children: "\u2197"
+                }
+              ),
+              /* @__PURE__ */ jsx7(
+                "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__ */ jsxs7(
+          "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__ */ jsx7(
+                "div",
+                {
+                  style: {
+                    color: "#f59e0b",
+                    fontSize: 14,
+                    fontWeight: 500,
+                    marginBottom: 8
+                  },
+                  children: "Saving changes..."
+                }
+              ),
+              /* @__PURE__ */ jsx7(
+                "div",
+                {
+                  style: {
+                    color: "rgba(255, 255, 255, 0.6)",
+                    fontSize: 12
+                  },
+                  children: "Generating commit message with AI"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx7("div", { style: { flex: 1, minHeight: 0 }, children: task.sessionId ? /* @__PURE__ */ jsx7(
+          ClaudeTerminal,
+          {
+            serverUrl,
+            token,
+            sessionId: task.sessionId,
+            style: { width: "100%", height: "100%" }
+          }
+        ) : /* @__PURE__ */ jsx7(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              height: "100%",
+              color: "rgba(255, 255, 255, 0.5)"
+            },
+            children: "Waiting for session..."
+          }
+        ) }),
+        task.error && /* @__PURE__ */ jsxs7(
+          "div",
+          {
+            style: {
+              padding: "8px 16px",
+              background: "rgba(239, 68, 68, 0.2)",
+              borderTop: "1px solid rgba(239, 68, 68, 0.3)",
+              color: "#ef4444",
+              fontSize: 12,
+              flexShrink: 0
+            },
+            children: [
+              "Error: ",
+              task.error
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx7("style", { children: `
+          @keyframes claude-bridge-pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+          }
+        ` })
+      ]
+    }
+  );
+}
 export {
   ClaudeBridgeProvider,
   ClaudeTerminal,
+  SessionPanel,
+  SessionTabs,
   TaskStatusToast,
+  VoiceInput,
   captureContext,
   captureElementScreenshot,
   capturePageContext,
-  useClaudeBridge
+  getSessionDisplayName,
+  isSessionActive,
+  useClaudeBridge,
+  useSessionStorage,
+  useSessions,
+  useVoiceInput
 };
 //# sourceMappingURL=index.js.map