@supernal/interface-nextjs 1.0.22 → 1.0.24

package/dist/index.mjs

@@ -1,7 +1,13 @@
 "use client";
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
 
 // src/components/SupernalProvider.tsx
-import { useEffect as useEffect8 } from "react";
+import { useEffect as useEffect14 } from "react";
 
 // src/contexts/ChatInputContext.tsx
 import { createContext, useContext, useCallback, useRef } from "react";
@@ -551,7 +557,8 @@ var InputField = ({
   voiceEnabled = false,
   isListening = false,
   onMicClick,
-  modKey = "Ctrl"
+  modKey = "Ctrl",
+  onKeyDown
 }) => /* @__PURE__ */ jsx3("form", { onSubmit, className: compact ? "flex space-x-2" : THEME_CLASSES.bg.inputForm + " bg-transparent", children: /* @__PURE__ */ jsxs("div", { className: compact ? "flex space-x-2 flex-1" : "relative", children: [
   /* @__PURE__ */ jsx3(
     "input",
@@ -560,6 +567,7 @@ var InputField = ({
       type: "text",
       value: inputValue,
       onChange: (e) => onInputChange(e.target.value),
+      onKeyDown,
       placeholder,
       className: compact ? `flex-1 px-3 py-2 text-xs border rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all ${glassClasses}` : `w-full pl-4 ${inputValue.trim() ? "pr-12" : "pr-12"} py-3 text-sm text-gray-900 dark:text-white placeholder:text-gray-500 dark:placeholder:text-gray-300 rounded-3xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all shadow-sm ${glassClasses}`,
       style: INLINE_STYLES.input(theme === "dark"),
@@ -600,7 +608,7 @@ var Avatar = ({ avatar, size = "normal" }) => {
 };
 
 // src/components/ChatBubble/ChatBubble.tsx
-import React7, { useState as useState7, useRef as useRef6, useEffect as useEffect5, useMemo as useMemo2 } from "react";
+import React8, { useState as useState8, useRef as useRef8, useEffect as useEffect7, useMemo as useMemo3 } from "react";
 
 // src/components/MessageRenderer.tsx
 import ReactMarkdown from "react-markdown";
@@ -845,7 +853,10 @@ function useTTS() {
     async (text, options = {}) => {
       if (Platform.isNative) {
         try {
-          const { TextToSpeech } = await import("@capacitor/text-to-speech");
+          const { TextToSpeech } = await import(
+            /* webpackIgnore: true */
+            "@capacitor/text-to-speech"
+          );
           await TextToSpeech.speak({
             text,
             lang: "en-US",
@@ -1086,7 +1097,10 @@ function useSTT() {
     setIsListening(true);
     try {
       if (Platform2.isNative) {
-        const { SpeechRecognition: CapSpeech } = await import("@capacitor-community/speech-recognition");
+        const { SpeechRecognition: CapSpeech } = await import(
+          /* webpackIgnore: true */
+          "@capacitor-community/speech-recognition"
+        );
         await CapSpeech.requestPermissions();
         const { matches } = await CapSpeech.start({
           language: "en-US",
@@ -1294,10 +1308,10 @@ var TTSPlaylistMenu = ({
 
 // src/utils/pageContentParser.ts
 var GENERIC_SUGGESTIONS = [
-  { text: "Try: navigate to...", type: "generic" },
-  { text: "Ask: what can I do here?", type: "generic" },
-  { text: "Show me around", type: "generic" },
-  { text: "What's on this page?", type: "generic" }
+  { text: "navigate to...", type: "generic" },
+  { text: "what can I do here?", type: "generic" },
+  { text: "show me around", type: "generic" },
+  { text: "what's on this page?", type: "generic" }
 ];
 function extractPageSpecificSuggestions() {
   if (typeof window === "undefined") return [];
@@ -1307,7 +1321,7 @@ function extractPageSpecificSuggestions() {
     const text = heading.textContent?.trim();
     if (text && text.length > 0 && text.length < 50) {
       suggestions.push({
-        text: `Ask about: ${text}`,
+        text: text.toLowerCase(),
         type: "page-specific"
       });
     }
@@ -1367,15 +1381,72 @@ function detectBackgroundContext() {
 }
 
 // src/utils/ttsDetection.ts
-function detectTTSWidgets() {
+function waitForTTSReady(timeout = 5e3) {
+  return new Promise((resolve) => {
+    if (typeof window === "undefined") {
+      resolve(false);
+      return;
+    }
+    if (window.SupernalTTSStatus?.initialized || window.SupernalTTSInstance || document.querySelector(".supernal-tts-play")) {
+      console.log("[TTS Detection] Widget already initialized");
+      resolve(true);
+      return;
+    }
+    let resolved = false;
+    const done = (result) => {
+      if (resolved) return;
+      resolved = true;
+      cleanup();
+      resolve(result);
+    };
+    const handler = () => {
+      console.log("[TTS Detection] Widget ready event received");
+      done(true);
+    };
+    const pollId = setInterval(() => {
+      if (window.SupernalTTSStatus?.initialized || window.SupernalTTSInstance || document.querySelector(".supernal-tts-play")) {
+        console.log("[TTS Detection] Widget detected via polling");
+        done(true);
+      }
+    }, 500);
+    const timeoutId = setTimeout(() => {
+      console.warn("[TTS Detection] Timeout waiting for widget initialization");
+      done(false);
+    }, timeout);
+    const cleanup = () => {
+      window.removeEventListener("supernal-tts-ready", handler);
+      clearInterval(pollId);
+      clearTimeout(timeoutId);
+    };
+    window.addEventListener("supernal-tts-ready", handler);
+  });
+}
+var lastDetectionState = { count: 0, hasButtons: false };
+async function detectTTSWidgets() {
   if (typeof window === "undefined") return false;
   const widgetWrappers = document.querySelectorAll(".supernal-tts-widget[data-text]");
-  console.log("[TTS Detection] Found widget wrappers:", widgetWrappers.length);
-  if (widgetWrappers.length > 0) {
-    console.log("[TTS Detection] Wrapper visible?", widgetWrappers[0].offsetParent !== null);
-    console.log("[TTS Detection] Has play button?", !!widgetWrappers[0].querySelector(".supernal-tts-play"));
+  if (widgetWrappers.length === 0) {
+    if (lastDetectionState.count !== 0) {
+      console.log("[TTS Detection] No widget wrappers found");
+      lastDetectionState = { count: 0, hasButtons: false };
+    }
+    return false;
+  }
+  const ready = await waitForTTSReady(5e3);
+  if (!ready) {
+    console.warn("[TTS Detection] Widget not ready after 5s timeout");
+    return false;
+  }
+  const hasPlayButtons = Array.from(widgetWrappers).some((wrapper) => {
+    const hasButton = wrapper.querySelector(".supernal-tts-play") !== null;
+    const isVisible = wrapper.offsetParent !== null;
+    return hasButton && isVisible;
+  });
+  if (lastDetectionState.count !== widgetWrappers.length || lastDetectionState.hasButtons !== hasPlayButtons) {
+    console.log(`[TTS Detection] Found ${widgetWrappers.length} widgets, ${hasPlayButtons ? "with" : "without"} play buttons`);
+    lastDetectionState = { count: widgetWrappers.length, hasButtons: hasPlayButtons };
   }
-  return widgetWrappers.length > 0;
+  return hasPlayButtons;
 }
 function extractWidgetLabel(element, fallbackIndex) {
   const ariaLabel = element.getAttribute("aria-label");
@@ -1409,6 +1480,7 @@ function extractWidgetLabel(element, fallbackIndex) {
   }
   return `Readable Section ${fallbackIndex}`;
 }
+var lastExtractionCount = 0;
 function extractTTSWidgets() {
   if (typeof window === "undefined") return [];
   const widgets = [];
@@ -1416,7 +1488,6 @@ function extractTTSWidgets() {
   ttsWidgets.forEach((wrapper, idx) => {
     const element = wrapper;
     if (element.offsetParent === null) {
-      console.log("[TTS Extract] Skipping hidden widget:", wrapper);
       return;
     }
     const label = extractWidgetLabel(wrapper, widgets.length + 1);
@@ -1428,14 +1499,6 @@ function extractTTSWidgets() {
     if (playButton && !playButton.hasAttribute("data-testid")) {
       playButton.setAttribute("data-testid", `${widgetId}-play`);
     }
-    console.log("[TTS Extract] Widget:", {
-      id: widgetId,
-      label,
-      hasButton: !!playButton,
-      wrapper: element,
-      playButton,
-      testId: element.getAttribute("data-testid")
-    });
     widgets.push({
       id: widgetId,
       element: wrapper,
@@ -1443,7 +1506,10 @@ function extractTTSWidgets() {
       label
     });
   });
-  console.log("[TTS Extract] Total widgets found:", widgets.length);
+  if (widgets.length !== lastExtractionCount) {
+    console.log(`[TTS Extract] Found ${widgets.length} visible widgets`);
+    lastExtractionCount = widgets.length;
+  }
   return widgets;
 }
 
@@ -1458,10 +1524,12 @@ var opacityStates = {
     speaking: 1
   },
   desktop: {
-    idle: 0.4,
-    // Increased from 0.1 for better visibility
-    listening: 0.7,
-    typing: 0.9,
+    idle: 0.2,
+    // Much less visible when inactive
+    listening: 0.95,
+    // Very visible when listening
+    typing: 1,
+    // Fully visible when typing
     speaking: 0.5
   }
 };
@@ -1487,14 +1555,21 @@ var SubtitleOverlay = ({
   theme,
   config,
   sttTranscript,
-  resetTranscript
+  resetTranscript,
+  onSwitchToFullMode
 }) => {
   const [overlayState, setOverlayState] = useState6("idle");
   const [opacity, setOpacity] = useState6(1);
   const [lastInputMethod, setLastInputMethod] = useState6(null);
   const [isMobile, setIsMobile] = useState6(false);
   const [messageOpacity, setMessageOpacity] = useState6(1);
-  const [expansionState, setExpansionState] = useState6("collapsed");
+  const [expansionState, setExpansionState] = useState6(() => {
+    if (typeof window !== "undefined") {
+      const saved = localStorage.getItem("subtitle-overlay-expanded");
+      return saved === "true" ? "expanded" : "collapsed";
+    }
+    return "collapsed";
+  });
   const [touchStartY, setTouchStartY] = useState6(null);
   const lastInputTimeRef = useRef5(Date.now());
   const autoFadeTimerRef = useRef5(null);
@@ -1508,13 +1583,25 @@ var SubtitleOverlay = ({
   const [showPlaylist, setShowPlaylist] = useState6(false);
   const [ttsWidgets, setTTSWidgets] = useState6([]);
   const [touchStartYInput, setTouchStartYInput] = useState6(null);
+  const [completedActions, setCompletedActions] = useState6([]);
+  const [showCompletedActions, setShowCompletedActions] = useState6(false);
+  const [shouldShowAiResponse, setShouldShowAiResponse] = useState6(false);
+  const [latestActionOpacity, setLatestActionOpacity] = useState6(0);
+  const latestActionFadeRef = useRef5(null);
+  const lastUserMessageRef = useRef5("");
+  const lastShownAiMessageRef = useRef5("");
+  const justExpandedViaSlashRef = useRef5(false);
+  const [isDragging, setIsDragging] = useState6(false);
+  const [position, setPosition] = useState6({ x: 0, y: 0 });
+  const [dragStart, setDragStart] = useState6({ x: 0, y: 0 });
+  const dragRef = useRef5(null);
+  const dragDistanceRef = useRef5(0);
+  const lastEscapeTimeRef = useRef5(0);
+  const DOUBLE_ESCAPE_THRESHOLD_MS = 500;
   useEffect4(() => {
     const checkMobile = () => {
       const mobile = window.innerWidth < 768;
       setIsMobile(mobile);
-      if (!mobile && expansionState === "collapsed") {
-        setExpansionState("expanded");
-      }
     };
     checkMobile();
     window.addEventListener("resize", checkMobile);
@@ -1527,7 +1614,7 @@ var SubtitleOverlay = ({
     }
     if (!isMobile && overlayState === "idle") {
       autoFadeTimerRef.current = setTimeout(() => {
-        setOpacity(0.4);
+        setOpacity(0.2);
       }, 5e3);
     }
     return () => {
@@ -1541,23 +1628,52 @@ var SubtitleOverlay = ({
       clearTimeout(messageFadeTimerRef.current);
       messageFadeTimerRef.current = null;
     }
+    const lastAiMsg = messages.filter((m) => m.type === "ai").slice(-1)[0];
+    if (!shouldShowAiResponse || !lastAiMsg) {
+      setMessageOpacity(0);
+      return;
+    }
+    const messageKey = lastAiMsg.text?.substring(0, 100) || "";
+    const shownMessages = JSON.parse(localStorage.getItem("subtitle-shown-messages") || "[]");
+    if (shownMessages.includes(messageKey)) {
+      setMessageOpacity(0);
+      setShouldShowAiResponse(false);
+      return;
+    }
+    lastShownAiMessageRef.current = messageKey;
     setMessageOpacity(1);
     messageFadeTimerRef.current = setTimeout(() => {
       setMessageOpacity(0);
-    }, 8e3);
+      setShouldShowAiResponse(false);
+      try {
+        const shown = JSON.parse(localStorage.getItem("subtitle-shown-messages") || "[]");
+        shown.push(messageKey);
+        const trimmed = shown.slice(-50);
+        localStorage.setItem("subtitle-shown-messages", JSON.stringify(trimmed));
+      } catch {
+      }
+    }, 3e3);
     return () => {
       if (messageFadeTimerRef.current) {
         clearTimeout(messageFadeTimerRef.current);
       }
     };
-  }, [messages.filter((m) => m.type === "ai").slice(-1)[0]?.text]);
+  }, [messages.filter((m) => m.type === "ai").slice(-1)[0]?.text, shouldShowAiResponse]);
   useEffect4(() => {
     if (sttTranscript && voiceEnabled && resetTranscript) {
       onSendMessage(sttTranscript);
       resetTranscript();
-      setExpansionState("expanded");
       setLastInputMethod("voice");
       lastInputTimeRef.current = Date.now();
+      setShouldShowAiResponse(true);
+      const newAction = {
+        id: `action-${Date.now()}`,
+        tool: "Voice Command",
+        timestamp: Date.now(),
+        description: sttTranscript.substring(0, 50) + (sttTranscript.length > 50 ? "..." : "")
+      };
+      setCompletedActions((prev) => [...prev, newAction]);
+      triggerActionFade();
     }
   }, [sttTranscript, voiceEnabled, resetTranscript, onSendMessage]);
   useEffect4(() => {
@@ -1565,8 +1681,8 @@ var SubtitleOverlay = ({
     setSuggestions(pageSuggestions);
   }, []);
   useEffect4(() => {
-    const detectWidgets = () => {
-      const detected = detectTTSWidgets();
+    const detectWidgets = async () => {
+      const detected = await detectTTSWidgets();
       setHasTTSWidgets(detected);
       if (detected) {
         const widgets = extractTTSWidgets();
@@ -1583,11 +1699,20 @@ var SubtitleOverlay = ({
     });
     observer.observe(document.body, {
       childList: true,
-      subtree: true
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["data-tts-status"]
+      // Watch for status changes
     });
+    const handleReady = () => {
+      console.log("[SubtitleOverlay] TTS ready event received");
+      detectWidgets();
+    };
+    window.addEventListener("supernal-tts-ready", handleReady);
     return () => {
       observer.disconnect();
       clearTimeout(timeoutId);
+      window.removeEventListener("supernal-tts-ready", handleReady);
     };
   }, []);
   useEffect4(() => {
@@ -1608,8 +1733,30 @@ var SubtitleOverlay = ({
   }, [glassTheme]);
   useEffect4(() => {
     const handleGlobalKeyDown = (e) => {
+      if (e.key === "Escape") {
+        const now = Date.now();
+        const timeSinceLastEscape = now - lastEscapeTimeRef.current;
+        if (expansionState === "expanded") {
+          setExpansionState("collapsed");
+          if (isListening && onMicClick) {
+            onMicClick();
+          }
+          return;
+        }
+        if (expansionState === "collapsed" && timeSinceLastEscape < DOUBLE_ESCAPE_THRESHOLD_MS) {
+          console.log("[SubtitleOverlay] Double-escape detected - switching to full mode");
+          if (onSwitchToFullMode) {
+            onSwitchToFullMode();
+          }
+          lastEscapeTimeRef.current = 0;
+          return;
+        }
+        lastEscapeTimeRef.current = now;
+      }
       if (e.key === "/" && expansionState === "collapsed" && !(e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement)) {
         e.preventDefault();
+        e.stopImmediatePropagation();
+        justExpandedViaSlashRef.current = true;
         setExpansionState("expanded");
       }
       if ((e.ctrlKey || e.metaKey) && e.key === "k") {
@@ -1620,17 +1767,60 @@ var SubtitleOverlay = ({
           inputRef.current?.focus();
         }
       }
+      if ((e.ctrlKey || e.metaKey) && e.key === "/" && voiceEnabled) {
+        e.preventDefault();
+        if (expansionState === "collapsed") {
+          setExpansionState("expanded");
+        }
+        onMicClick();
+      }
     };
     window.addEventListener("keydown", handleGlobalKeyDown);
     return () => window.removeEventListener("keydown", handleGlobalKeyDown);
+  }, [expansionState, onSwitchToFullMode, voiceEnabled, onMicClick]);
+  useEffect4(() => {
+    if (typeof window !== "undefined") {
+      localStorage.setItem("subtitle-overlay-expanded", expansionState === "expanded" ? "true" : "false");
+    }
   }, [expansionState]);
   useEffect4(() => {
     if (expansionState === "expanded" && inputRef.current) {
       setTimeout(() => {
         inputRef.current?.focus();
+        if (justExpandedViaSlashRef.current) {
+          justExpandedViaSlashRef.current = false;
+          if (inputRef.current && inputRef.current.value.startsWith("/")) {
+            const cleaned = inputRef.current.value.replace(/^\/+/, "");
+            onInputChange(cleaned);
+          }
+        }
       }, 100);
     }
   }, [expansionState]);
+  useEffect4(() => {
+    if (isMobile) return;
+    const handleMouseMove = (e) => {
+      if (!isDragging) return;
+      const deltaX = e.clientX - dragStart.x;
+      const deltaY = e.clientY - dragStart.y;
+      dragDistanceRef.current = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+      setPosition({ x: deltaX, y: deltaY });
+    };
+    const handleMouseUp = () => {
+      setIsDragging(false);
+      setTimeout(() => {
+        dragDistanceRef.current = 0;
+      }, 100);
+    };
+    if (isDragging) {
+      window.addEventListener("mousemove", handleMouseMove);
+      window.addEventListener("mouseup", handleMouseUp);
+    }
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isDragging, dragStart, isMobile]);
   useEffect4(() => {
     const timeSinceLastInput = Date.now() - lastInputTimeRef.current;
     const context = {
@@ -1659,13 +1849,11 @@ var SubtitleOverlay = ({
     lastInputTimeRef.current = Date.now();
   };
   const handleIconClick = () => {
+    if (dragDistanceRef.current > 5) {
+      return;
+    }
     if (expansionState === "collapsed") {
       setExpansionState("expanded");
-      if (!isListening && voiceEnabled) {
-        onMicClick();
-        setLastInputMethod("voice");
-        lastInputTimeRef.current = Date.now();
-      }
     } else {
       onMicClick();
       setLastInputMethod("voice");
@@ -1687,10 +1875,36 @@ var SubtitleOverlay = ({
   const handleTouchEnd = () => {
     setTouchStartY(null);
   };
+  const triggerActionFade = () => {
+    if (latestActionFadeRef.current) {
+      clearTimeout(latestActionFadeRef.current);
+    }
+    setLatestActionOpacity(1);
+    latestActionFadeRef.current = setTimeout(() => {
+      setLatestActionOpacity(0);
+    }, 2500);
+  };
   const handleSend = () => {
     if (inputValue.trim()) {
       onSendMessage(inputValue);
       lastInputTimeRef.current = Date.now();
+      setShouldShowAiResponse(true);
+      lastUserMessageRef.current = inputValue;
+      const newAction = {
+        id: `action-${Date.now()}`,
+        tool: "Message Sent",
+        timestamp: Date.now(),
+        description: inputValue.substring(0, 50) + (inputValue.length > 50 ? "..." : "")
+      };
+      setCompletedActions((prev) => [...prev, newAction]);
+      triggerActionFade();
+    }
+  };
+  const handleMouseDown = (e) => {
+    if (isMobile) return;
+    if (e.target === dragRef.current || e.target.classList.contains("drag-handle")) {
+      setIsDragging(true);
+      setDragStart({ x: e.clientX - position.x, y: e.clientY - position.y });
     }
   };
   const handleKeyDown = (e) => {
@@ -1698,13 +1912,12 @@ var SubtitleOverlay = ({
       e.preventDefault();
       handleSend();
     }
-    if (e.key === "Escape" && isListening) {
-      onMicClick();
-    }
-  };
-  const handleSuggestionTap = () => {
-    if (suggestions.length > 0 && !inputValue.trim()) {
-      onInputChange(suggestions[currentSuggestionIndex].text);
+    if (e.key === "Escape") {
+      if (isListening) {
+        onMicClick();
+      } else if (expansionState === "expanded") {
+        setExpansionState("collapsed");
+      }
     }
   };
   const handleInputTouchStart = (e) => {
@@ -1760,7 +1973,6 @@ var SubtitleOverlay = ({
   const lastAiMessage = messages.filter((m) => m.type === "ai").slice(-1)[0];
   const getIcon = () => {
     if (expansionState === "collapsed") return "@/";
-    if (isListening) return "~/";
     return "</";
   };
   const getIconTitle = () => {
@@ -1838,42 +2050,130 @@ var SubtitleOverlay = ({
   return /* @__PURE__ */ jsxs6(
     "div",
     {
-      className: `fixed bottom-0 left-0 right-0 transition-all duration-300 ease-in-out`,
+      ref: dragRef,
+      className: `fixed transition-all duration-300 ease-in-out ${!isMobile && (isDragging ? "cursor-grabbing" : "")}`,
       style: {
         opacity,
         bottom: isMobile ? "env(safe-area-inset-bottom, 0px)" : "0px",
+        left: isMobile ? "0" : "50%",
+        right: isMobile ? "0" : "auto",
         zIndex: 55,
+        width: isMobile ? "100vw" : "650px",
         maxWidth: isMobile ? "100vw" : "650px",
-        marginLeft: isMobile ? "0" : "auto",
-        marginRight: isMobile ? "0" : "auto",
-        padding: isMobile ? "12px" : "16px"
+        padding: isMobile ? "12px" : "16px",
+        transform: isMobile ? "none" : `translate(calc(-50% + ${position.x}px), ${position.y}px)`,
+        pointerEvents: "auto",
+        userSelect: isDragging ? "none" : "auto"
       },
       onTouchStart: handleTouchStart,
       onTouchMove: handleTouchMove,
       onTouchEnd: handleTouchEnd,
+      onMouseDown: !isMobile ? handleMouseDown : void 0,
       "data-testid": "subtitle-overlay",
       role: "complementary",
       "aria-label": "Chat overlay",
       children: [
-        lastAiMessage && messageOpacity > 0 && /* @__PURE__ */ jsxs6(
+        !isMobile && /* @__PURE__ */ jsx10(
           "div",
           {
-            className: `mb-2 px-4 py-2 text-sm rounded-2xl transition-opacity duration-1000 ease-out animate-popup-in ${theme === "dark" ? "text-white" : "text-gray-900"}`,
+            className: "drag-handle absolute -top-3 left-1/2 transform -translate-x-1/2 cursor-grab active:cursor-grabbing opacity-40 hover:opacity-70 transition-opacity",
+            style: {
+              width: "40px",
+              height: "6px",
+              background: theme === "dark" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.3)",
+              borderRadius: "3px"
+            },
+            "aria-label": "Drag to reposition",
+            "data-testid": "subtitle-overlay-drag-handle"
+          }
+        ),
+        showCompletedActions && completedActions.length > 0 && /* @__PURE__ */ jsxs6(
+          "div",
+          {
+            className: `mb-2 px-4 py-3 text-xs rounded-2xl animate-popup-in ${theme === "dark" ? "text-white" : "text-gray-900"}`,
             style: {
-              opacity: messageOpacity,
-              pointerEvents: messageOpacity === 0 ? "none" : "auto",
               ...theme === "dark" ? GLASS_RESPONSE_BUBBLE.dark : GLASS_RESPONSE_BUBBLE.light,
-              animation: messageOpacity === 0 ? "popupFadeOut 0.5s forwards" : void 0
+              maxHeight: "200px",
+              overflowY: "auto"
+            },
+            role: "log",
+            "aria-label": "Completed actions",
+            "data-testid": "completed-actions-list",
+            children: [
+              /* @__PURE__ */ jsxs6("div", { className: "font-medium opacity-70 mb-2 flex items-center justify-between", children: [
+                /* @__PURE__ */ jsx10("span", { children: "Completed Actions" }),
+                /* @__PURE__ */ jsx10(
+                  "button",
+                  {
+                    onClick: () => setShowCompletedActions(false),
+                    className: "opacity-50 hover:opacity-100",
+                    "aria-label": "Close completed actions",
+                    children: "\xD7"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx10("div", { className: "space-y-1", children: completedActions.map((action) => /* @__PURE__ */ jsxs6("div", { className: "text-xs opacity-80 border-l-2 border-green-500 pl-2", children: [
+                /* @__PURE__ */ jsx10("div", { className: "font-medium", children: action.tool }),
+                /* @__PURE__ */ jsx10("div", { className: "opacity-70", children: action.description })
+              ] }, action.id)) })
+            ]
+          }
+        ),
+        !showCompletedActions && (latestActionOpacity > 0 || lastAiMessage && messageOpacity > 0) && /* @__PURE__ */ jsxs6(
+          "div",
+          {
+            className: `mb-2 px-4 py-2 text-xs rounded-2xl ${theme === "dark" ? "text-white" : "text-gray-900"}`,
+            style: {
+              ...theme === "dark" ? GLASS_RESPONSE_BUBBLE.dark : GLASS_RESPONSE_BUBBLE.light,
+              opacity: Math.max(latestActionOpacity, messageOpacity),
+              transition: "opacity 0.6s ease-out",
+              pointerEvents: latestActionOpacity === 0 && messageOpacity === 0 ? "none" : "auto"
             },
             role: "status",
             "aria-live": "polite",
+            "data-testid": "subtitle-overlay-ai-message",
             children: [
-              /* @__PURE__ */ jsx10("span", { className: "font-medium opacity-70", children: "AI:" }),
-              " ",
-              lastAiMessage.text
+              latestActionOpacity > 0 && completedActions.length > 0 && (() => {
+                const latest = completedActions[completedActions.length - 1];
+                return /* @__PURE__ */ jsxs6(
+                  "div",
+                  {
+                    className: "border-l-2 border-green-500 pl-2 mb-1",
+                    style: { opacity: latestActionOpacity, transition: "opacity 0.6s ease-out" },
+                    children: [
+                      /* @__PURE__ */ jsx10("span", { className: "font-medium", children: latest.tool }),
+                      /* @__PURE__ */ jsx10("span", { className: "opacity-70 ml-1", children: latest.description })
+                    ]
+                  }
+                );
+              })(),
+              lastAiMessage && messageOpacity > 0 && /* @__PURE__ */ jsxs6("div", { style: { opacity: messageOpacity, transition: "opacity 0.8s ease-out" }, children: [
+                /* @__PURE__ */ jsx10("span", { className: "font-medium opacity-70", children: "AI:" }),
+                " ",
+                /* @__PURE__ */ jsx10("span", { className: "text-sm", children: lastAiMessage.text })
+              ] })
             ]
           }
         ),
+        completedActions.length > 0 && !showCompletedActions && /* @__PURE__ */ jsx10("div", { className: "flex justify-center mb-1", children: /* @__PURE__ */ jsx10(
+          "button",
+          {
+            type: "button",
+            onClick: () => setShowCompletedActions(true),
+            className: `transition-all flex items-center justify-center ${theme === "dark" ? "text-gray-500 hover:text-gray-300" : "text-gray-400 hover:text-gray-600"}`,
+            style: {
+              width: 28,
+              height: 14,
+              fontSize: 10,
+              lineHeight: 1,
+              opacity: 0.5
+            },
+            title: `${completedActions.length} previous actions`,
+            "data-testid": "completed-actions-toggle",
+            "aria-label": `Show ${completedActions.length} completed actions`,
+            children: /* @__PURE__ */ jsx10("svg", { width: "16", height: "8", viewBox: "0 0 16 8", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx10("path", { d: "M2 6L8 2L14 6" }) })
+          }
+        ) }),
         /* @__PURE__ */ jsxs6("div", { className: "flex items-center space-x-2", children: [
           hasTTSWidgets && /* @__PURE__ */ jsx10(
             "button",
@@ -1913,8 +2213,7 @@ var SubtitleOverlay = ({
                     onTouchStart: handleInputTouchStart,
                     onTouchMove: handleInputTouchMove,
                     onTouchEnd: handleInputTouchEnd,
-                    onClick: handleSuggestionTap,
-                    placeholder: suggestions.length > 0 && !inputValue.trim() ? `${suggestions[currentSuggestionIndex].text} (tap to use, swipe \u2195 to change)` : config.placeholder || "Type or speak...",
+                    placeholder: config.placeholder || "Type or speak...",
                     className: "flex-1 px-3 py-2 text-sm bg-transparent focus:outline-none placeholder:opacity-60",
                     style: {
                       color: effectiveGlassTheme === "dark" ? "rgba(255, 255, 255, 0.95)" : "rgba(0, 0, 0, 0.9)"
@@ -1923,7 +2222,7 @@ var SubtitleOverlay = ({
                     "aria-label": "Chat message input"
                   }
                 ),
-                isListening && /* @__PURE__ */ jsx10("div", { className: "flex space-x-1 items-center", "aria-hidden": "true", children: [...Array(5)].map((_, i) => /* @__PURE__ */ jsx10(
+                isListening && /* @__PURE__ */ jsx10("div", { className: "flex space-x-1 items-center", "aria-hidden": "true", "data-testid": "subtitle-overlay-waveform", children: [...Array(5)].map((_, i) => /* @__PURE__ */ jsx10(
                   "div",
                   {
                     className: "w-0.5 bg-red-500 rounded-full animate-pulse",
@@ -1934,7 +2233,7 @@ var SubtitleOverlay = ({
                   },
                   i
                 )) }),
-                inputValue.trim() && !isListening && /* @__PURE__ */ jsx10(
+                inputValue.trim() && /* @__PURE__ */ jsx10(
                   "button",
                   {
                     type: "button",
@@ -2003,8 +2302,203 @@ var SubtitleOverlay = ({
   );
 };
 
+// src/components/SlashCommand/useSlashCommand.ts
+import { useState as useState7, useMemo as useMemo2, useCallback as useCallback5, useRef as useRef6, useEffect as useEffect5 } from "react";
+import { ToolRegistry } from "@supernal/interface/browser";
+function useSlashCommand(inputValue, onSelect) {
+  const [selectedIndex, setSelectedIndex] = useState7(0);
+  const prevOpenRef = useRef6(false);
+  const isOpen = inputValue.startsWith("/");
+  const query = isOpen ? inputValue.slice(1) : "";
+  useEffect5(() => {
+    if (isOpen && !prevOpenRef.current) {
+      setSelectedIndex(0);
+    }
+    prevOpenRef.current = isOpen;
+  }, [isOpen]);
+  useEffect5(() => {
+    setSelectedIndex(0);
+  }, [query]);
+  const filteredTools = useMemo2(() => {
+    if (!isOpen) return [];
+    const locationTools = ToolRegistry.getToolsByLocation();
+    const aiTools = locationTools.filter((t) => t.aiEnabled);
+    if (!query) return aiTools;
+    const q = query.toLowerCase();
+    return aiTools.filter((tool) => {
+      const fields = [
+        tool.name?.toLowerCase() ?? "",
+        tool.description?.toLowerCase() ?? "",
+        tool.toolId?.toLowerCase() ?? "",
+        ...(tool.examples || []).map((ex) => ex?.toLowerCase() ?? ""),
+        ...(tool.keywords || []).map((kw) => kw?.toLowerCase() ?? "")
+      ];
+      return fields.some((f) => f.includes(q));
+    });
+  }, [isOpen, query]);
+  const close = useCallback5(() => {
+  }, []);
+  const selectTool = useCallback5((tool) => {
+    const command = tool.examples?.[0] || tool.name?.toLowerCase() || tool.toolId;
+    onSelect(command);
+  }, [onSelect]);
+  const onKeyDown = useCallback5((e) => {
+    if (!isOpen || filteredTools.length === 0) return;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setSelectedIndex((prev) => (prev + 1) % filteredTools.length);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setSelectedIndex((prev) => (prev - 1 + filteredTools.length) % filteredTools.length);
+    } else if (e.key === "Enter" && filteredTools[selectedIndex]) {
+      e.preventDefault();
+      selectTool(filteredTools[selectedIndex]);
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      onSelect("");
+    } else if (e.key === "Tab" && filteredTools[selectedIndex]) {
+      e.preventDefault();
+      selectTool(filteredTools[selectedIndex]);
+    }
+  }, [isOpen, filteredTools, selectedIndex, selectTool, onSelect]);
+  return {
+    isOpen,
+    filteredTools,
+    selectedIndex,
+    onKeyDown,
+    selectTool,
+    close
+  };
+}
+
+// src/components/SlashCommand/SlashCommandPopup.tsx
+import { useEffect as useEffect6, useRef as useRef7 } from "react";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+var MAX_VISIBLE_ITEMS = 8;
+var SlashCommandPopup = ({
+  tools,
+  selectedIndex,
+  onSelect,
+  onClose
+}) => {
+  const listRef = useRef7(null);
+  const selectedRef = useRef7(null);
+  useEffect6(() => {
+    selectedRef.current?.scrollIntoView({ block: "nearest" });
+  }, [selectedIndex]);
+  useEffect6(() => {
+    const handleClickOutside = (e) => {
+      if (listRef.current && !listRef.current.contains(e.target)) {
+        onClose();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [onClose]);
+  if (tools.length === 0) return null;
+  const itemHeight = 52;
+  const maxHeight = MAX_VISIBLE_ITEMS * itemHeight;
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      ref: listRef,
+      style: {
+        position: "absolute",
+        bottom: "100%",
+        left: 0,
+        right: 0,
+        marginBottom: 4,
+        maxHeight,
+        overflowY: tools.length > MAX_VISIBLE_ITEMS ? "auto" : "hidden",
+        borderRadius: 12,
+        ...GLASS_RESPONSE_BUBBLE.dark,
+        zIndex: 999998
+      },
+      "data-slash-command-popup": true,
+      children: [
+        /* @__PURE__ */ jsxs7("div", { style: {
+          padding: "8px 12px 4px",
+          color: "rgba(255,255,255,0.45)",
+          fontSize: 11,
+          fontWeight: 500,
+          letterSpacing: "0.02em"
+        }, children: [
+          "Commands \xB7 ",
+          tools.length,
+          " available"
+        ] }),
+        tools.map((tool, index) => {
+          const isSelected = index === selectedIndex;
+          return /* @__PURE__ */ jsxs7(
+            "button",
+            {
+              ref: isSelected ? selectedRef : void 0,
+              onClick: () => onSelect(tool),
+              style: {
+                width: "100%",
+                display: "block",
+                padding: "8px 12px",
+                background: isSelected ? "rgba(59, 130, 246, 0.25)" : "none",
+                border: "none",
+                cursor: "pointer",
+                textAlign: "left",
+                color: "#fff",
+                transition: "background 0.1s"
+              },
+              onMouseEnter: (e) => {
+                if (!isSelected) {
+                  e.currentTarget.style.background = "rgba(255,255,255,0.06)";
+                }
+              },
+              onMouseLeave: (e) => {
+                if (!isSelected) {
+                  e.currentTarget.style.background = "none";
+                }
+              },
+              children: [
+                /* @__PURE__ */ jsxs7("div", { style: { fontSize: 13, fontWeight: 500 }, children: [
+                  /* @__PURE__ */ jsxs7("span", { style: { color: "rgba(147, 197, 253, 0.9)" }, children: [
+                    "/",
+                    tool.toolId
+                  ] }),
+                  /* @__PURE__ */ jsx11("span", { style: { color: "rgba(255,255,255,0.7)", fontWeight: 400, marginLeft: 8 }, children: tool.name })
+                ] }),
+                tool.description && /* @__PURE__ */ jsx11("div", { style: {
+                  fontSize: 11,
+                  color: "rgba(255,255,255,0.4)",
+                  marginTop: 2,
+                  lineHeight: 1.3,
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap"
+                }, children: tool.description })
+              ]
+            },
+            tool.toolId
+          );
+        }),
+        /* @__PURE__ */ jsxs7("div", { style: {
+          padding: "6px 12px",
+          borderTop: "1px solid rgba(255,255,255,0.06)",
+          color: "rgba(255,255,255,0.3)",
+          fontSize: 10
+        }, children: [
+          /* @__PURE__ */ jsx11("kbd", { style: { padding: "1px 3px", borderRadius: 3, border: "1px solid rgba(255,255,255,0.15)", fontSize: 9 }, children: "\u2191\u2193" }),
+          " navigate",
+          " ",
+          /* @__PURE__ */ jsx11("kbd", { style: { padding: "1px 3px", borderRadius: 3, border: "1px solid rgba(255,255,255,0.15)", fontSize: 9 }, children: "Enter" }),
+          " select",
+          " ",
+          /* @__PURE__ */ jsx11("kbd", { style: { padding: "1px 3px", borderRadius: 3, border: "1px solid rgba(255,255,255,0.15)", fontSize: 9 }, children: "Esc" }),
+          " dismiss"
+        ] })
+      ]
+    }
+  );
+};
+
 // src/components/ChatBubble/ChatBubble.tsx
-import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 var ChatBubble = ({
   messages,
   onSendMessage,
@@ -2019,56 +2513,65 @@ var ChatBubble = ({
 }) => {
   const mergedConfig = { ...DEFAULT_CONFIG, ...userConfig };
   if (userConfig?.logo && !userConfig?.avatar) {
-    mergedConfig.avatar = /* @__PURE__ */ jsx11("img", { src: userConfig.logo, alt: "Supernal", className: "w-6 h-6" });
+    mergedConfig.avatar = /* @__PURE__ */ jsx12("img", { src: userConfig.logo, alt: "Supernal", className: "w-6 h-6" });
   }
   const config = mergedConfig;
-  const [isExpanded, setIsExpanded] = useState7(defaultExpanded);
-  const [isMinimized, setIsMinimized] = useState7(false);
-  const [inputValue, setInputValue] = useState7("");
-  const [lastReadMessageCount, setLastReadMessageCount] = useState7(0);
-  const [showWelcome, setShowWelcome] = useState7(
+  const [isExpanded, setIsExpanded] = useState8(defaultExpanded);
+  const [isMinimized, setIsMinimized] = useState8(false);
+  const [inputValue, setInputValue] = useState8("");
+  const [lastReadMessageCount, setLastReadMessageCount] = useState8(0);
+  const [showWelcome, setShowWelcome] = useState8(
     config.welcome?.enabled && messages.length === 0
   );
-  const [isDragging, setIsDragging] = useState7(false);
-  const [dragInitiated, setDragInitiated] = useState7(false);
-  const [isDocked, setIsDocked] = useState7(true);
-  const [dockPosition, setDockPosition] = useState7(position);
-  const [panelPosition, setPanelPosition] = useState7({ x: 0, y: 0 });
-  const [theme, setTheme] = useState7("light");
-  const [showMoreMenu, setShowMoreMenu] = useState7(false);
-  const [, setTimestampTick] = useState7(0);
-  const [localGlassMode, setLocalGlassMode] = useState7(config.glassMode ?? true);
-  const [glassOpacity, setGlassOpacity] = useState7("medium");
-  const [notifications, setNotifications] = useState7(true);
-  const [voiceEnabled, setVoiceEnabled] = useState7(true);
-  const [usePremiumVoices, setUsePremiumVoices] = useState7(false);
-  const [autoReadResponses, setAutoReadResponses] = useState7(false);
-  const [ttsSpeed, setTtsSpeed] = useState7(1);
-  const [sttAutoRecordTimeout, setSttAutoRecordTimeout] = useState7(5e3);
-  const [sttAutoExecute, setSttAutoExecute] = useState7(true);
-  const sttAutoRecordTimeoutRef = useRef6(null);
+  const [isDragging, setIsDragging] = useState8(false);
+  const [dragInitiated, setDragInitiated] = useState8(false);
+  const [isDocked, setIsDocked] = useState8(true);
+  const [dockPosition, setDockPosition] = useState8(position);
+  const [panelPosition, setPanelPosition] = useState8({ x: 0, y: 0 });
+  const [theme, setTheme] = useState8("light");
+  const [showMoreMenu, setShowMoreMenu] = useState8(false);
+  const [, setTimestampTick] = useState8(0);
+  const [localGlassMode, setLocalGlassMode] = useState8(config.glassMode ?? true);
+  const [glassOpacity, setGlassOpacity] = useState8("medium");
+  const [notifications, setNotifications] = useState8(true);
+  const [voiceEnabled, setVoiceEnabled] = useState8(true);
+  const [usePremiumVoices, setUsePremiumVoices] = useState8(false);
+  const [autoReadResponses, setAutoReadResponses] = useState8(false);
+  const [ttsSpeed, setTtsSpeed] = useState8(1);
+  const [sttAutoRecordTimeout, setSttAutoRecordTimeout] = useState8(5e3);
+  const [sttAutoExecute, setSttAutoExecute] = useState8(true);
+  const sttAutoRecordTimeoutRef = useRef8(null);
   const { speak: speakTTS, stop: stopTTS, isPlaying: isTTSPlaying } = useTTS();
   const { startListening, stopListening, transcript: sttTranscript, isListening, resetTranscript } = useSTT();
-  const [displayMode, setDisplayMode] = useState7(propDisplayMode);
-  const [drawerSide, setDrawerSide] = useState7(propDrawerSide);
-  useEffect5(() => {
-    setDisplayMode(propDisplayMode);
+  const slashCommand = useSlashCommand(inputValue, (command) => {
+    setInputValue(command);
+    setTimeout(() => inputRef.current?.focus(), 0);
+  });
+  const [displayMode, setDisplayMode] = useState8(propDisplayMode);
+  const [drawerSide, setDrawerSide] = useState8(propDrawerSide);
+  const displayModeLoadedFromStorage = useRef8(false);
+  useEffect7(() => {
+    if (!displayModeLoadedFromStorage.current) {
+      setDisplayMode(propDisplayMode);
+    }
   }, [propDisplayMode]);
-  const [drawerOpen, setDrawerOpen] = useState7(false);
-  const [touchStart, setTouchStart] = useState7(null);
-  const [swipeProgress, setSwipeProgress] = useState7(0);
-  const [isMobile, setIsMobile] = useState7(false);
-  const [isMac, setIsMac] = useState7(false);
-  const [currentHintIndex, setCurrentHintIndex] = useState7(0);
-  const [isHydrated, setIsHydrated] = useState7(false);
-  useEffect5(() => {
+  const [drawerOpen, setDrawerOpen] = useState8(false);
+  const [touchStart, setTouchStart] = useState8(null);
+  const [swipeProgress, setSwipeProgress] = useState8(0);
+  const [isMobile, setIsMobile] = useState8(false);
+  const lastEscapeTimeRef = useRef8(0);
+  const DOUBLE_ESCAPE_THRESHOLD_MS = 500;
+  const [isMac, setIsMac] = useState8(false);
+  const [currentHintIndex, setCurrentHintIndex] = useState8(0);
+  const [isHydrated, setIsHydrated] = useState8(false);
+  useEffect7(() => {
     if (typeof window !== "undefined") {
       const platform = window.navigator.platform.toLowerCase();
       const isMacPlatform = platform.includes("mac");
       setIsMac(isMacPlatform);
     }
   }, []);
-  const inputHints = useMemo2(() => {
+  const inputHints = useMemo3(() => {
     const modKey = isMac ? "Cmd" : "Ctrl";
     return [
       `Press ${modKey}+/ to start voice recording`,
@@ -2077,14 +2580,14 @@ var ChatBubble = ({
       sttAutoExecute ? `Voice commands execute automatically` : "Voice commands fill this input"
     ];
   }, [isMac, sttAutoExecute]);
-  useEffect5(() => {
+  useEffect7(() => {
     setCurrentHintIndex((prev) => (prev + 1) % inputHints.length);
   }, [messages.length, inputHints.length]);
-  const messagesEndRef = useRef6(null);
-  const inputRef = useRef6(null);
-  const panelRef = useRef6(null);
-  const dragRef = useRef6(null);
-  const rafRef = useRef6(null);
+  const messagesEndRef = useRef8(null);
+  const inputRef = useRef8(null);
+  const panelRef = useRef8(null);
+  const dragRef = useRef8(null);
+  const rafRef = useRef8(null);
   const formatRelativeTime = (timestamp) => {
     const now = /* @__PURE__ */ new Date();
     const messageTime = new Date(timestamp);
@@ -2099,8 +2602,30 @@ var ChatBubble = ({
     if (diffDays < 7) return `${diffDays} ${diffDays === 1 ? "day" : "days"} ago`;
     return messageTime.toLocaleDateString();
   };
-  useEffect5(() => {
-    if (variant === "full") {
+  useEffect7(() => {
+    if (variant === "floating" && panelPosition.x === 0 && panelPosition.y === 0) {
+      try {
+        const stored = localStorage.getItem(storageKey);
+        if (stored !== null) {
+          const state = JSON.parse(stored);
+          const pos = state.panelPosition;
+          if (pos && typeof pos.x === "number" && typeof pos.y === "number") {
+            setPanelPosition(pos);
+            return;
+          }
+        }
+      } catch (error) {
+        console.error("ChatBubble: Error loading floating position from localStorage", error);
+      }
+      if (typeof window !== "undefined") {
+        const centerX = (window.innerWidth - 300) / 2;
+        const centerY = (window.innerHeight - 150) / 2;
+        setPanelPosition({ x: centerX, y: centerY });
+      }
+    }
+  }, [variant, storageKey, panelPosition.x, panelPosition.y]);
+  useEffect7(() => {
+    if (variant === "full" || variant === "drawer" || variant === "subtitle") {
       try {
         const stored = localStorage.getItem(storageKey);
         if (stored !== null) {
@@ -2141,6 +2666,7 @@ var ChatBubble = ({
             }
             if (state.displayMode !== void 0) {
               setDisplayMode(state.displayMode);
+              displayModeLoadedFromStorage.current = true;
             }
             if (state.drawerSide !== void 0) {
               setDrawerSide(state.drawerSide);
@@ -2176,12 +2702,12 @@ var ChatBubble = ({
     }
     setIsHydrated(true);
   }, [storageKey, variant, defaultExpanded, position]);
-  useEffect5(() => {
-    if (variant !== "full") {
+  useEffect7(() => {
+    if (variant !== "full" && variant !== "drawer" && variant !== "subtitle") {
       setIsHydrated(true);
     }
   }, [variant]);
-  useEffect5(() => {
+  useEffect7(() => {
     if (!isExpanded || isDocked || !panelRef.current) return;
     const checkBounds = () => {
       const rect = panelRef.current?.getBoundingClientRect();
@@ -2198,25 +2724,46 @@ var ChatBubble = ({
     const timeoutId = setTimeout(checkBounds, 100);
     return () => clearTimeout(timeoutId);
   }, [isExpanded, isDocked]);
-  useEffect5(() => {
+  useEffect7(() => {
+    const isSubtitleMode = displayMode === "subtitle" || displayMode === "auto" && variant === "subtitle";
+    if (isSubtitleMode) return;
     const handleKeyDown = (e) => {
-      if (e.key === "Escape" && isExpanded && !isDocked) {
+      if (e.key !== "Escape") return;
+      const now = Date.now();
+      const timeSinceLastEscape = now - lastEscapeTimeRef.current;
+      const effectiveVariant = displayMode !== "auto" ? displayMode : isMobile ? "subtitle" : variant;
+      if (timeSinceLastEscape < DOUBLE_ESCAPE_THRESHOLD_MS) {
+        console.log("[ChatBubble] Double-escape detected - cycling variant from:", effectiveVariant);
+        if (effectiveVariant === "full" || effectiveVariant === "floating" || effectiveVariant === "drawer") {
+          setDisplayMode("subtitle");
+          displayModeLoadedFromStorage.current = true;
+          console.log("[ChatBubble] Switched to subtitle mode");
+        } else if (effectiveVariant === "subtitle") {
+          setDisplayMode("full");
+          displayModeLoadedFromStorage.current = true;
+          console.log("[ChatBubble] Switched to full mode");
+        }
+        lastEscapeTimeRef.current = 0;
+        return;
+      }
+      if (isExpanded && !isDocked) {
         console.log("ChatBubble reset via Escape key");
         setIsDocked(true);
         setDockPosition(position);
         setPanelPosition({ x: 0, y: 0 });
       }
+      lastEscapeTimeRef.current = now;
     };
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [isExpanded, isDocked, position]);
-  useEffect5(() => {
+  }, [isExpanded, isDocked, position, variant, displayMode, isMobile]);
+  useEffect7(() => {
     if (typeof window !== "undefined") {
       const isDark = document.documentElement.getAttribute("data-theme") === "dark";
       setTheme(isDark ? "dark" : "light");
     }
   }, []);
-  useEffect5(() => {
+  useEffect7(() => {
     if (typeof window === "undefined") return;
     const mediaQuery = window.matchMedia("(max-width: 767px)");
     const handleChange = (e) => {
@@ -2226,20 +2773,27 @@ var ChatBubble = ({
     mediaQuery.addEventListener("change", handleChange);
     return () => mediaQuery.removeEventListener("change", handleChange);
   }, []);
-  const currentVariant = React7.useMemo(() => {
+  const currentVariant = React8.useMemo(() => {
     if (displayMode !== "auto") {
       return displayMode;
     }
-    return isMobile ? "drawer" : variant;
+    return isMobile && variant === "full" ? "subtitle" : variant;
   }, [displayMode, isMobile, variant]);
-  useEffect5(() => {
+  const prevVariantRef = React8.useRef(variant);
+  useEffect7(() => {
+    if (prevVariantRef.current !== variant && displayMode !== "auto") {
+      setDisplayMode("auto");
+      prevVariantRef.current = variant;
+    }
+  }, [variant, displayMode]);
+  useEffect7(() => {
     const interval = setInterval(() => {
       setTimestampTick((tick) => tick + 1);
     }, 6e4);
     return () => clearInterval(interval);
   }, []);
-  useEffect5(() => {
-    if (variant === "full" || variant === "drawer") {
+  useEffect7(() => {
+    if (variant === "full" || variant === "drawer" || variant === "subtitle") {
       try {
         localStorage.setItem(
           storageKey,
@@ -2270,7 +2824,7 @@ var ChatBubble = ({
     }
   }, [isExpanded, isMinimized, isDocked, dockPosition, panelPosition, theme, localGlassMode, notifications, displayMode, drawerSide, drawerOpen, glassOpacity, voiceEnabled, usePremiumVoices, autoReadResponses, ttsSpeed, sttAutoRecordTimeout, sttAutoExecute, storageKey, variant]);
   const { registerInput } = useChatInput();
-  useEffect5(() => {
+  useEffect7(() => {
     registerInput((text, submit = false) => {
       setInputValue(text);
       if (!isExpanded && variant === "full") {
@@ -2287,7 +2841,7 @@ var ChatBubble = ({
   }, [registerInput, onSendMessage]);
   const unreadCount = Math.max(0, messages.length - lastReadMessageCount);
   const hasUnread = unreadCount > 0 && !isExpanded && variant === "full";
-  useEffect5(() => {
+  useEffect7(() => {
     if (isExpanded || variant === "floating") {
       messagesEndRef.current?.scrollIntoView({ behavior: "auto" });
       setLastReadMessageCount(messages.length);
@@ -2299,12 +2853,12 @@ var ChatBubble = ({
       }
     }
   }, [messages, isExpanded, variant]);
-  useEffect5(() => {
+  useEffect7(() => {
     if (isExpanded && variant === "full") {
       inputRef.current?.focus();
     }
   }, [isExpanded, variant]);
-  useEffect5(() => {
+  useEffect7(() => {
     if (!voiceEnabled || !autoReadResponses || messages.length === 0) return;
     const lastMessage = messages[messages.length - 1];
     if (lastMessage.type === "ai") {
@@ -2316,7 +2870,8 @@ var ChatBubble = ({
       });
     }
   }, [messages, voiceEnabled, autoReadResponses, ttsSpeed, usePremiumVoices, speakTTS]);
-  useEffect5(() => {
+  useEffect7(() => {
+    if (currentVariant === "subtitle") return;
     if (sttTranscript && voiceEnabled) {
       setInputValue(sttTranscript);
       resetTranscript();
@@ -2329,10 +2884,10 @@ var ChatBubble = ({
         sttAutoRecordTimeoutRef.current = null;
       }
     }
-  }, [sttTranscript, voiceEnabled, resetTranscript, sttAutoExecute, onSendMessage]);
-  useEffect5(() => {
+  }, [sttTranscript, voiceEnabled, resetTranscript, sttAutoExecute, onSendMessage, currentVariant]);
+  useEffect7(() => {
+    if (currentVariant === "subtitle") return;
     const handleKeyDown = (e) => {
-      if (variant !== "full") return;
       if ((e.metaKey || e.ctrlKey) && e.key === "/" && voiceEnabled) {
         e.preventDefault();
         const wasExpanded = isExpanded;
@@ -2387,8 +2942,8 @@ var ChatBubble = ({
         clearTimeout(sttAutoRecordTimeoutRef.current);
       }
     };
-  }, [isExpanded, showMoreMenu, variant, voiceEnabled, isListening, startListening, stopListening, sttAutoRecordTimeout]);
-  useEffect5(() => {
+  }, [currentVariant, isExpanded, showMoreMenu, voiceEnabled, isListening, startListening, stopListening, sttAutoRecordTimeout]);
+  useEffect7(() => {
     if (currentVariant !== "drawer") return;
     const handleKeyDown = (e) => {
       if (e.key === "Escape" && drawerOpen) {
@@ -2398,7 +2953,7 @@ var ChatBubble = ({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [currentVariant, drawerOpen]);
-  useEffect5(() => {
+  useEffect7(() => {
     if (!showMoreMenu) return;
     const handleClickOutside = (e) => {
       const target = e.target;
@@ -2409,7 +2964,7 @@ var ChatBubble = ({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [showMoreMenu]);
-  useEffect5(() => {
+  useEffect7(() => {
     if (typeof window === "undefined" || currentVariant !== "drawer") return;
     const EDGE_ZONE_PX = 20;
     const SWIPE_THRESHOLD = 0.4;
@@ -2474,12 +3029,8 @@ var ChatBubble = ({
     const rect = panelRef.current?.getBoundingClientRect();
     if (!rect) return;
     if (isDocked) {
-      const currentCenterX = rect.left + rect.width / 2;
-      const currentCenterY = rect.top + rect.height / 2;
-      const viewportCenterX = window.innerWidth / 2;
-      const viewportCenterY = window.innerHeight / 2;
-      const targetX = currentCenterX - viewportCenterX;
-      const targetY = currentCenterY - viewportCenterY;
+      const targetX = rect.left;
+      const targetY = rect.top;
       setPanelPosition({ x: targetX, y: targetY });
       dragRef.current = {
         startX: e.clientX,
@@ -2498,7 +3049,7 @@ var ChatBubble = ({
       };
     }
   };
-  useEffect5(() => {
+  useEffect7(() => {
     if (!dragInitiated || !dragRef.current) return;
     const dragThresholdPx = 5;
     const handleMouseMove = (e) => {
@@ -2642,55 +3193,11 @@ var ChatBubble = ({
   const glassClasses = glassMode ? glassOpacity === "low" ? "backdrop-blur-xl bg-white/90 dark:bg-gray-900/90 border border-white/20 dark:border-white/10" : glassOpacity === "high" ? "backdrop-blur-xl bg-white/50 dark:bg-gray-900/50 border border-white/20 dark:border-white/10" : "backdrop-blur-xl bg-white/70 dark:bg-gray-900/70 border border-white/20 dark:border-white/10" : "bg-white dark:bg-gray-900";
   const glassGradient = glassMode ? glassOpacity === "low" ? "bg-gradient-to-br from-white/95 via-white/85 to-white/70 dark:from-gray-900/90 dark:via-gray-900/80 dark:to-gray-900/70" : glassOpacity === "high" ? "bg-gradient-to-br from-white/70 via-white/50 to-white/30 dark:from-gray-900/60 dark:via-gray-900/50 dark:to-gray-900/40" : "bg-gradient-to-br from-white/90 via-white/70 to-white/50 dark:from-gray-900/80 dark:via-gray-900/70 dark:to-gray-900/60" : "bg-white dark:bg-gray-900";
   const getFloatingPositionStyle = () => {
-    if (dockPosition.includes("top") && dockPosition.includes("left")) {
-      return {
-        top: 0,
-        left: 0,
-        transform: `translate(${panelPosition.x}px, ${panelPosition.y}px)`
-      };
-    } else if (dockPosition.includes("top") && dockPosition.includes("right")) {
-      return {
-        top: 0,
-        right: 0,
-        transform: `translate(${-panelPosition.x}px, ${panelPosition.y}px)`
-      };
-    } else if (dockPosition.includes("bottom") && dockPosition.includes("left")) {
-      return {
-        bottom: 0,
-        left: 0,
-        transform: `translate(${panelPosition.x}px, ${-panelPosition.y}px)`
-      };
-    } else if (dockPosition.includes("bottom") && dockPosition.includes("right")) {
-      return {
-        bottom: 0,
-        right: 0,
-        transform: `translate(${-panelPosition.x}px, ${-panelPosition.y}px)`
-      };
-    } else if (dockPosition.includes("left-center")) {
-      return {
-        left: 0,
-        top: "50%",
-        transform: `translate(${panelPosition.x}px, calc(-50% + ${panelPosition.y}px))`
-      };
-    } else if (dockPosition.includes("right-center")) {
-      return {
-        right: 0,
-        top: "50%",
-        transform: `translate(${-panelPosition.x}px, calc(-50% + ${panelPosition.y}px))`
-      };
-    } else if (dockPosition.includes("bottom-center")) {
-      return {
-        bottom: 0,
-        left: "50%",
-        transform: `translate(calc(-50% + ${panelPosition.x}px), ${-panelPosition.y}px)`
-      };
-    } else {
-      return {
-        left: "50%",
-        top: "50%",
-        transform: `translate(calc(-50% + ${panelPosition.x}px), calc(-50% + ${panelPosition.y}px))`
-      };
-    }
+    return {
+      top: 0,
+      left: 0,
+      transform: `translate(${panelPosition.x}px, ${panelPosition.y}px)`
+    };
   };
   const maxHeightVh = 80;
   const dynamicHeight = `min(${maxHeightVh}vh, 700px)`;
@@ -2705,7 +3212,7 @@ var ChatBubble = ({
     return null;
   }
   if (currentVariant === "subtitle") {
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx12(
       SubtitleOverlay,
       {
         messages,
@@ -2726,36 +3233,41 @@ var ChatBubble = ({
         theme,
         config,
         sttTranscript,
-        resetTranscript
+        resetTranscript,
+        onSwitchToFullMode: () => {
+          console.log("[ChatBubble] Switching from subtitle to full mode");
+          setDisplayMode("full");
+          displayModeLoadedFromStorage.current = true;
+        }
       }
     );
   }
   if (currentVariant === "drawer") {
     const drawerWidth = "100vw";
-    return /* @__PURE__ */ jsxs7(Fragment3, { children: [
-      (drawerOpen || swipeProgress > 0) && /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsxs8(Fragment3, { children: [
+      (drawerOpen || swipeProgress > 0) && /* @__PURE__ */ jsx12(
         "div",
         {
-          className: "fixed inset-0 bg-black z-[99998] transition-opacity duration-300",
+          className: "fixed inset-0 bg-black z-[49998] transition-opacity duration-300",
           style: {
             opacity: touchStart && swipeProgress > 0 ? swipeProgress / 100 * 0.5 : 0.5,
             zIndex: 999998
-            // Force high z-index for overlay
+            // Super high z-index for overlay backdrop
           },
           onClick: () => setDrawerOpen(false)
         }
       ),
-      /* @__PURE__ */ jsxs7(
+      /* @__PURE__ */ jsxs8(
         "div",
         {
-          className: `fixed ${drawerSide === "right" ? "right-0" : "left-0"} top-0 h-full z-[99999] flex flex-col ${glassClasses} shadow-2xl`,
+          className: `fixed ${drawerSide === "right" ? "right-0" : "left-0"} top-0 h-full z-[49999] flex flex-col ${glassClasses} shadow-2xl`,
           style: {
             width: drawerWidth,
             transform: getDrawerTransform(),
             transition: touchStart ? "none" : "transform 300ms cubic-bezier(0.4, 0, 0.2, 1)",
             willChange: "transform",
             zIndex: 999999
-            // Force extremely high z-index
+            // Super high z-index for drawer
           },
           role: "dialog",
           "aria-modal": "true",
@@ -2764,31 +3276,31 @@ var ChatBubble = ({
           onTouchMove: handleDrawerTouchMove,
           onTouchEnd: handleDrawerTouchEnd,
           children: [
-            /* @__PURE__ */ jsxs7("div", { className: `${THEME_CLASSES.bg.header} ${glassMode ? THEME_CLASSES.bg.headerGradient : THEME_CLASSES.bg.headerLight}`, children: [
-              /* @__PURE__ */ jsxs7("div", { className: "flex items-center space-x-3", children: [
-                config.avatar && /* @__PURE__ */ jsxs7("div", { className: "relative flex-shrink-0", children: [
-                  /* @__PURE__ */ jsx11(Avatar, { avatar: config.avatar }),
-                  /* @__PURE__ */ jsx11("div", { className: "absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white" })
+            /* @__PURE__ */ jsxs8("div", { className: `${THEME_CLASSES.bg.header} ${glassMode ? THEME_CLASSES.bg.headerGradient : THEME_CLASSES.bg.headerLight}`, children: [
+              /* @__PURE__ */ jsxs8("div", { className: "flex items-center space-x-3", children: [
+                config.avatar && /* @__PURE__ */ jsxs8("div", { className: "relative flex-shrink-0", children: [
+                  /* @__PURE__ */ jsx12(Avatar, { avatar: config.avatar }),
+                  /* @__PURE__ */ jsx12("div", { className: "absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white" })
                 ] }),
-                config.title && /* @__PURE__ */ jsx11("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx11("h3", { className: THEME_CLASSES.text.title, children: config.title }) })
+                config.title && /* @__PURE__ */ jsx12("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx12("h3", { className: THEME_CLASSES.text.title, children: config.title }) })
               ] }),
-              /* @__PURE__ */ jsx11("button", { onClick: () => setDrawerOpen(false), className: THEME_CLASSES.button.close, title: "Close drawer", children: /* @__PURE__ */ jsx11("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
+              /* @__PURE__ */ jsx12("button", { onClick: () => setDrawerOpen(false), className: THEME_CLASSES.button.close, title: "Close drawer", children: /* @__PURE__ */ jsx12("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
             ] }),
-            /* @__PURE__ */ jsxs7("div", { className: "flex-1 overflow-y-auto p-4 space-y-2", children: [
-              showWelcome && messages.length === 0 && config.welcome?.enabled && /* @__PURE__ */ jsxs7("div", { className: THEME_CLASSES.welcome.container, children: [
-                config.welcome.title && /* @__PURE__ */ jsx11("h4", { className: THEME_CLASSES.welcome.title, style: INLINE_STYLES.welcomeTitle(theme === "dark"), children: config.welcome.title }),
-                config.welcome.content && /* @__PURE__ */ jsx11("p", { className: THEME_CLASSES.welcome.content, style: INLINE_STYLES.welcomeContent(theme === "dark"), children: config.welcome.content })
+            /* @__PURE__ */ jsxs8("div", { className: "flex-1 overflow-y-auto p-4 space-y-2", children: [
+              showWelcome && messages.length === 0 && config.welcome?.enabled && /* @__PURE__ */ jsxs8("div", { className: THEME_CLASSES.welcome.container, children: [
+                config.welcome.title && /* @__PURE__ */ jsx12("h4", { className: THEME_CLASSES.welcome.title, style: INLINE_STYLES.welcomeTitle(theme === "dark"), children: config.welcome.title }),
+                config.welcome.content && /* @__PURE__ */ jsx12("p", { className: THEME_CLASSES.welcome.content, style: INLINE_STYLES.welcomeContent(theme === "dark"), children: config.welcome.content })
               ] }),
-              messages.map((message) => /* @__PURE__ */ jsxs7("div", { className: `group flex items-center gap-1 mb-2 ${message.type === "user" ? "flex-row-reverse" : "flex-row"}`, children: [
-                /* @__PURE__ */ jsx11(
+              messages.map((message) => /* @__PURE__ */ jsxs8("div", { className: `group flex items-center gap-1 mb-2 ${message.type === "user" ? "flex-row-reverse" : "flex-row"}`, children: [
+                /* @__PURE__ */ jsx12(
                   "div",
                   {
                     className: `inline-block px-4 py-2.5 rounded-2xl max-w-[95%] text-sm shadow-sm transition-all ${message.type === "user" ? THEME_CLASSES.message.user : message.type === "ai" ? THEME_CLASSES.message.ai : THEME_CLASSES.message.system}`,
                     style: message.type === "user" ? INLINE_STYLES.messageUser() : message.type === "ai" ? INLINE_STYLES.messageAI(theme === "dark") : INLINE_STYLES.messageSystem(theme === "dark"),
-                    children: /* @__PURE__ */ jsx11(MessageRenderer, { content: message.text, theme })
+                    children: /* @__PURE__ */ jsx12(MessageRenderer, { content: message.text, theme })
                   }
                 ),
-                message.type === "ai" && voiceEnabled && /* @__PURE__ */ jsx11(
+                message.type === "ai" && voiceEnabled && /* @__PURE__ */ jsx12(
                   TTSButton,
                   {
                     text: message.text,
@@ -2798,7 +3310,7 @@ var ChatBubble = ({
                     size: "small"
                   }
                 ),
-                /* @__PURE__ */ jsx11(
+                /* @__PURE__ */ jsx12(
                   "div",
                   {
                     className: `text-xs opacity-0 group-hover:opacity-70 transition-opacity whitespace-nowrap flex-shrink-0 ${message.type === "user" ? "text-gray-400 dark:text-gray-500 text-left" : "text-gray-600 dark:text-gray-400 text-right"}`,
@@ -2807,78 +3319,92 @@ var ChatBubble = ({
                   }
                 )
               ] }, message.id)),
-              /* @__PURE__ */ jsx11("div", { ref: messagesEndRef })
+              /* @__PURE__ */ jsx12("div", { ref: messagesEndRef })
             ] }),
-            /* @__PURE__ */ jsx11(
-              InputField,
-              {
-                inputValue,
-                onInputChange: setInputValue,
-                onSubmit: handleSend,
-                placeholder: inputHints[currentHintIndex],
-                glassClasses: "",
-                theme,
-                inputRef,
-                sendButtonLabel: config.sendButtonLabel,
-                voiceEnabled,
-                isListening,
-                onMicClick: handleMicClick,
-                modKey: isMac ? "Cmd" : "Ctrl"
-              }
-            )
+            /* @__PURE__ */ jsxs8("div", { style: { position: "relative" }, children: [
+              slashCommand.isOpen && /* @__PURE__ */ jsx12(
+                SlashCommandPopup,
+                {
+                  tools: slashCommand.filteredTools,
+                  selectedIndex: slashCommand.selectedIndex,
+                  onSelect: slashCommand.selectTool,
+                  onClose: () => setInputValue("")
+                }
+              ),
+              /* @__PURE__ */ jsx12(
+                InputField,
+                {
+                  inputValue,
+                  onInputChange: setInputValue,
+                  onSubmit: handleSend,
+                  placeholder: inputHints[currentHintIndex],
+                  glassClasses: "",
+                  theme,
+                  inputRef,
+                  sendButtonLabel: config.sendButtonLabel,
+                  voiceEnabled,
+                  isListening,
+                  onMicClick: handleMicClick,
+                  modKey: isMac ? "Cmd" : "Ctrl",
+                  onKeyDown: slashCommand.onKeyDown
+                }
+              )
+            ] })
           ]
         }
       ),
-      !drawerOpen && /* @__PURE__ */ jsx11(
+      !drawerOpen && /* @__PURE__ */ jsx12(
         "div",
         {
-          className: `fixed ${drawerSide === "right" ? "right-0" : "left-0"} bottom-20 opacity-30 hover:opacity-90 transition-opacity duration-300 z-[99999] cursor-pointer`,
+          className: `fixed ${drawerSide === "right" ? "right-0" : "left-0"} bottom-20 opacity-70 hover:opacity-100 transition-opacity duration-300 z-[999999] cursor-pointer`,
           style: { zIndex: 999999 },
           onClick: () => setDrawerOpen(true),
-          children: /* @__PURE__ */ jsx11("div", { className: `${glassMode ? "backdrop-blur-md bg-white/50 dark:bg-gray-800/50" : "bg-white dark:bg-gray-800"} text-gray-700 dark:text-gray-200 px-3 py-3 ${drawerSide === "right" ? "rounded-l-xl" : "rounded-r-xl"} shadow-md hover:shadow-lg flex items-center justify-center transition-all`, children: voiceEnabled ? /* @__PURE__ */ jsx11("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" }) }) : /* @__PURE__ */ jsx11("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" }) }) })
+          children: /* @__PURE__ */ jsx12("div", { className: `${glassMode ? "backdrop-blur-md bg-white/50 dark:bg-gray-800/50" : "bg-white dark:bg-gray-800"} text-gray-700 dark:text-gray-200 px-3 py-3 ${drawerSide === "right" ? "rounded-l-xl" : "rounded-r-xl"} shadow-md hover:shadow-lg flex items-center justify-center transition-all`, children: voiceEnabled ? /* @__PURE__ */ jsx12("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" }) }) : /* @__PURE__ */ jsx12("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" }) }) })
         }
       )
     ] });
   }
-  if (variant === "floating") {
+  if (currentVariant === "floating") {
     const recentMessage = messages[messages.length - 1];
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx12(
       "div",
       {
-        className: `fixed z-[99999] ${isDragging ? "cursor-grabbing" : "cursor-grab"}`,
+        className: `fixed z-[999999] ${isDragging ? "cursor-grabbing" : "cursor-grab"}`,
         style: {
+          top: 0,
+          left: 0,
           transform: `translate(${panelPosition.x}px, ${panelPosition.y}px)`,
           zIndex: 999999,
-          // Force extremely high z-index
+          // Super high z-index for floating variant
           ...!isDragging && { transition: "transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)" }
         },
         onMouseDown: handlePanelMouseDown,
-        children: /* @__PURE__ */ jsxs7("div", { className: `${glassClasses} rounded-2xl shadow-2xl p-3 max-w-xs ${!glassMode && "border-gray-200 border"}`, children: [
-          /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between mb-2", children: [
-            /* @__PURE__ */ jsxs7("div", { className: "flex items-center space-x-2", children: [
-              /* @__PURE__ */ jsx11(Avatar, { avatar: config.avatar, size: "small" }),
-              config.title && /* @__PURE__ */ jsx11("span", { className: THEME_CLASSES.text.floatingTitle, children: config.title })
+        children: /* @__PURE__ */ jsxs8("div", { className: `${glassClasses} rounded-2xl shadow-2xl p-3 max-w-xs ${!glassMode && "border-gray-200 border"}`, children: [
+          /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between mb-2", children: [
+            /* @__PURE__ */ jsxs8("div", { className: "flex items-center space-x-2", children: [
+              /* @__PURE__ */ jsx12(Avatar, { avatar: config.avatar, size: "small" }),
+              config.title && /* @__PURE__ */ jsx12("span", { className: THEME_CLASSES.text.floatingTitle, children: config.title })
             ] }),
-            onClearChat && /* @__PURE__ */ jsx11(
+            onClearChat && /* @__PURE__ */ jsx12(
               "button",
               {
                 onClick: onClearChat,
                 className: THEME_CLASSES.button.floatingClear,
                 title: "Clear chat",
                 "data-testid": ChatNames.clearButton,
-                children: /* @__PURE__ */ jsx11("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                children: /* @__PURE__ */ jsx12("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
               }
             )
           ] }),
-          recentMessage && /* @__PURE__ */ jsxs7("div", { className: `mb-2 group flex items-center gap-2 ${recentMessage.type === "user" ? "flex-row-reverse" : "flex-row"}`, children: [
-            /* @__PURE__ */ jsx11(
+          recentMessage && /* @__PURE__ */ jsxs8("div", { className: `mb-2 group flex items-center gap-2 ${recentMessage.type === "user" ? "flex-row-reverse" : "flex-row"}`, children: [
+            /* @__PURE__ */ jsx12(
               "div",
               {
                 className: `text-xs px-3 py-2 rounded-xl transition-all ${recentMessage.type === "user" ? "bg-gradient-to-br from-blue-500 to-blue-600 text-white shadow-lg" : recentMessage.type === "ai" ? "bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 text-gray-900 dark:text-white shadow-md" : "bg-gradient-to-br from-yellow-100 to-yellow-200 text-yellow-900 shadow-md"}`,
                 children: recentMessage.text.length > 60 ? `${recentMessage.text.slice(0, 60)}...` : recentMessage.text
               }
             ),
-            /* @__PURE__ */ jsx11(
+            /* @__PURE__ */ jsx12(
               "div",
               {
                 className: `text-xs opacity-0 group-hover:opacity-70 transition-opacity whitespace-nowrap flex-shrink-0 ${recentMessage.type === "user" ? "text-gray-400 dark:text-gray-500 text-left" : "text-gray-600 dark:text-gray-400 text-right"}`,
@@ -2887,32 +3413,44 @@ var ChatBubble = ({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx11(
-            InputField,
-            {
-              compact: true,
-              inputValue,
-              onInputChange: setInputValue,
-              onSubmit: handleSend,
-              placeholder: inputHints[currentHintIndex],
-              glassClasses: "",
-              theme,
-              sendButtonLabel: config.sendButtonLabel,
-              modKey: isMac ? "Cmd" : "Ctrl"
-            }
-          )
+          /* @__PURE__ */ jsxs8("div", { style: { position: "relative" }, children: [
+            slashCommand.isOpen && /* @__PURE__ */ jsx12(
+              SlashCommandPopup,
+              {
+                tools: slashCommand.filteredTools,
+                selectedIndex: slashCommand.selectedIndex,
+                onSelect: slashCommand.selectTool,
+                onClose: () => setInputValue("")
+              }
+            ),
+            /* @__PURE__ */ jsx12(
+              InputField,
+              {
+                compact: true,
+                inputValue,
+                onInputChange: setInputValue,
+                onSubmit: handleSend,
+                placeholder: inputHints[currentHintIndex],
+                glassClasses: "",
+                theme,
+                sendButtonLabel: config.sendButtonLabel,
+                modKey: isMac ? "Cmd" : "Ctrl",
+                onKeyDown: slashCommand.onKeyDown
+              }
+            )
+          ] })
         ] })
       }
     );
   }
-  return /* @__PURE__ */ jsx11(Fragment3, { children: /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsx12(Fragment3, { children: /* @__PURE__ */ jsxs8(
     "div",
     {
       className: "fixed",
       style: {
         ...dockClasses.container,
-        zIndex: 2147483647,
-        // Maximum z-index value
+        zIndex: 999999,
+        // Super high z-index for chat widget
         position: "fixed",
         ...isExpanded ? {
           width: panelWidth,
@@ -2923,16 +3461,16 @@ var ChatBubble = ({
         }
       },
       children: [
-        isExpanded && isMinimized && /* @__PURE__ */ jsxs7(
+        isExpanded && isMinimized && /* @__PURE__ */ jsxs8(
           "div",
           {
             ref: panelRef,
-            className: `${isDocked ? "absolute" : "fixed z-[99999]"} ${glassGradient} rounded-3xl shadow-2xl border border-white/20 dark:border-white/10 ${!isDragging && "backdrop-blur-xl"} flex flex-col overflow-hidden ${!isDragging && "transition-all duration-300"}`,
+            className: `${isDocked ? "absolute" : "fixed z-[999999]"} ${glassGradient} rounded-3xl shadow-2xl border border-white/20 dark:border-white/10 ${!isDragging && "backdrop-blur-xl"} flex flex-col overflow-hidden ${!isDragging && "transition-all duration-300"}`,
             style: {
               width: panelWidth,
               maxWidth: "400px",
               zIndex: 999999,
-              // Force extremely high z-index
+              // Super high z-index for minimized panel
               ...isDocked ? {
                 ...dockClasses.panel,
                 // Only clear transform if dock position doesn't use transform
@@ -2941,7 +3479,7 @@ var ChatBubble = ({
               ...isDragging && { cursor: "grabbing" }
             },
             children: [
-              /* @__PURE__ */ jsxs7(
+              /* @__PURE__ */ jsxs8(
                 "div",
                 {
                   "data-drag-handle": true,
@@ -2957,15 +3495,15 @@ var ChatBubble = ({
                     }
                   },
                   children: [
-                    /* @__PURE__ */ jsxs7("div", { className: "flex items-center space-x-3", children: [
-                      config.avatar && /* @__PURE__ */ jsxs7("div", { className: "relative flex-shrink-0", children: [
-                        /* @__PURE__ */ jsx11(Avatar, { avatar: config.avatar }),
-                        /* @__PURE__ */ jsx11("div", { className: "absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white" })
+                    /* @__PURE__ */ jsxs8("div", { className: "flex items-center space-x-3", children: [
+                      config.avatar && /* @__PURE__ */ jsxs8("div", { className: "relative flex-shrink-0", children: [
+                        /* @__PURE__ */ jsx12(Avatar, { avatar: config.avatar }),
+                        /* @__PURE__ */ jsx12("div", { className: "absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white" })
                       ] }),
-                      config.title && /* @__PURE__ */ jsx11("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx11("h3", { className: THEME_CLASSES.text.title, children: config.title }) })
+                      config.title && /* @__PURE__ */ jsx12("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx12("h3", { className: THEME_CLASSES.text.title, children: config.title }) })
                     ] }),
-                    /* @__PURE__ */ jsxs7("div", { className: "flex items-center space-x-1 flex-shrink-0", children: [
-                      /* @__PURE__ */ jsx11(
+                    /* @__PURE__ */ jsxs8("div", { className: "flex items-center space-x-1 flex-shrink-0", children: [
+                      /* @__PURE__ */ jsx12(
                         "button",
                         {
                           onClick: (e) => {
@@ -2974,10 +3512,10 @@ var ChatBubble = ({
                           },
                           className: THEME_CLASSES.button.minimize,
                           title: "Minimize chat",
-                          children: /* @__PURE__ */ jsx11("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
+                          children: /* @__PURE__ */ jsx12("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
                         }
                       ),
-                      /* @__PURE__ */ jsx11(
+                      /* @__PURE__ */ jsx12(
                         "button",
                         {
                           onClick: (e) => {
@@ -2986,46 +3524,58 @@ var ChatBubble = ({
                           },
                           className: THEME_CLASSES.button.close,
                           title: "Close chat",
-                          children: /* @__PURE__ */ jsx11("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                          children: /* @__PURE__ */ jsx12("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
                         }
                       )
                     ] })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs7("div", { className: "p-4", children: [
+              /* @__PURE__ */ jsxs8("div", { className: "p-4", children: [
                 (() => {
                   const lastAiMessage = [...messages].reverse().find((m) => m.type === "ai");
-                  return lastAiMessage ? /* @__PURE__ */ jsx11("div", { className: "mb-3", children: /* @__PURE__ */ jsx11("div", { className: `text-xs px-3 py-2 rounded-xl ${THEME_CLASSES.message.ai}`, style: INLINE_STYLES.messageAI(theme === "dark"), children: lastAiMessage.text.length > 100 ? `${lastAiMessage.text.slice(0, 100)}...` : lastAiMessage.text }) }) : /* @__PURE__ */ jsx11("div", { className: "mb-3", children: /* @__PURE__ */ jsx11("div", { className: THEME_CLASSES.text.minimizedMessage, style: INLINE_STYLES.minimizedMessage(theme === "dark"), children: "No AI responses yet" }) });
+                  return lastAiMessage ? /* @__PURE__ */ jsx12("div", { className: "mb-3", children: /* @__PURE__ */ jsx12("div", { className: `text-xs px-3 py-2 rounded-xl ${THEME_CLASSES.message.ai}`, style: INLINE_STYLES.messageAI(theme === "dark"), children: lastAiMessage.text.length > 100 ? `${lastAiMessage.text.slice(0, 100)}...` : lastAiMessage.text }) }) : /* @__PURE__ */ jsx12("div", { className: "mb-3", children: /* @__PURE__ */ jsx12("div", { className: THEME_CLASSES.text.minimizedMessage, style: INLINE_STYLES.minimizedMessage(theme === "dark"), children: "No AI responses yet" }) });
                 })(),
-                /* @__PURE__ */ jsx11(
-                  InputField,
-                  {
-                    compact: true,
-                    inputValue,
-                    onInputChange: setInputValue,
-                    onSubmit: handleSend,
-                    placeholder: inputHints[currentHintIndex],
-                    glassClasses: "",
-                    theme,
-                    sendButtonLabel: config.sendButtonLabel,
-                    modKey: isMac ? "Cmd" : "Ctrl"
-                  }
-                )
+                /* @__PURE__ */ jsxs8("div", { style: { position: "relative" }, children: [
+                  slashCommand.isOpen && /* @__PURE__ */ jsx12(
+                    SlashCommandPopup,
+                    {
+                      tools: slashCommand.filteredTools,
+                      selectedIndex: slashCommand.selectedIndex,
+                      onSelect: slashCommand.selectTool,
+                      onClose: () => setInputValue("")
+                    }
+                  ),
+                  /* @__PURE__ */ jsx12(
+                    InputField,
+                    {
+                      compact: true,
+                      inputValue,
+                      onInputChange: setInputValue,
+                      onSubmit: handleSend,
+                      placeholder: inputHints[currentHintIndex],
+                      glassClasses: "",
+                      theme,
+                      sendButtonLabel: config.sendButtonLabel,
+                      modKey: isMac ? "Cmd" : "Ctrl",
+                      onKeyDown: slashCommand.onKeyDown
+                    }
+                  )
+                ] })
               ] })
             ]
           }
         ),
-        isExpanded && !isMinimized && /* @__PURE__ */ jsxs7(
+        isExpanded && !isMinimized && /* @__PURE__ */ jsxs8(
           "div",
           {
             ref: panelRef,
-            className: `${isDocked ? "absolute" : "fixed z-[99999]"} ${glassGradient} rounded-3xl shadow-2xl border border-white/20 dark:border-white/10 ${!isDragging && "backdrop-blur-xl"} flex flex-col overflow-hidden ${!isDragging && "transition-all duration-300"}`,
+            className: `${isDocked ? "absolute" : "fixed z-[999999]"} ${glassGradient} rounded-3xl shadow-2xl border border-white/20 dark:border-white/10 ${!isDragging && "backdrop-blur-xl"} flex flex-col overflow-hidden ${!isDragging && "transition-all duration-300"}`,
             style: {
               width: panelWidth,
               height: dynamicHeight,
               zIndex: 999999,
-              // Force extremely high z-index
+              // Super high z-index for expanded panel
               ...isDocked ? {
                 ...dockClasses.panel,
                 // Only clear transform if dock position doesn't use transform
@@ -3034,22 +3584,22 @@ var ChatBubble = ({
               ...isDragging && { cursor: "grabbing" }
             },
             children: [
-              /* @__PURE__ */ jsxs7(
+              /* @__PURE__ */ jsxs8(
                 "div",
                 {
                   "data-drag-handle": true,
                   className: `${THEME_CLASSES.bg.header} ${glassMode ? THEME_CLASSES.bg.headerGradient : THEME_CLASSES.bg.headerLight} cursor-move`,
                   onMouseDown: handlePanelMouseDown,
                   children: [
-                    /* @__PURE__ */ jsxs7("div", { className: "flex items-center space-x-3", children: [
-                      config.avatar && /* @__PURE__ */ jsxs7("div", { className: "relative flex-shrink-0", children: [
-                        /* @__PURE__ */ jsx11(Avatar, { avatar: config.avatar }),
-                        /* @__PURE__ */ jsx11("div", { className: "absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white" })
+                    /* @__PURE__ */ jsxs8("div", { className: "flex items-center space-x-3", children: [
+                      config.avatar && /* @__PURE__ */ jsxs8("div", { className: "relative flex-shrink-0", children: [
+                        /* @__PURE__ */ jsx12(Avatar, { avatar: config.avatar }),
+                        /* @__PURE__ */ jsx12("div", { className: "absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white" })
                       ] }),
-                      config.title && /* @__PURE__ */ jsx11("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx11("h3", { className: THEME_CLASSES.text.title, children: config.title }) })
+                      config.title && /* @__PURE__ */ jsx12("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx12("h3", { className: THEME_CLASSES.text.title, children: config.title }) })
                     ] }),
-                    /* @__PURE__ */ jsxs7("div", { className: "flex items-center space-x-1 flex-shrink-0 relative", "data-more-menu": true, children: [
-                      /* @__PURE__ */ jsx11(
+                    /* @__PURE__ */ jsxs8("div", { className: "flex items-center space-x-1 flex-shrink-0 relative", "data-more-menu": true, children: [
+                      /* @__PURE__ */ jsx12(
                         "a",
                         {
                           href: "https://www.interface.supernal.ai",
@@ -3057,30 +3607,30 @@ var ChatBubble = ({
                           rel: "noopener noreferrer",
                           className: "p-2 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors rounded-lg hover:bg-white/30",
                           title: "Visit Supernal Interface Documentation",
-                          children: /* @__PURE__ */ jsx11("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" }) })
+                          children: /* @__PURE__ */ jsx12("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" }) })
                         }
                       ),
-                      /* @__PURE__ */ jsx11(
+                      /* @__PURE__ */ jsx12(
                         "button",
                         {
                           onClick: () => setShowMoreMenu(!showMoreMenu),
                           className: THEME_CLASSES.button.more,
                           title: "More options",
-                          children: /* @__PURE__ */ jsx11("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" }) })
+                          children: /* @__PURE__ */ jsx12("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" }) })
                         }
                       ),
-                      showMoreMenu && /* @__PURE__ */ jsxs7("div", { className: "absolute right-0 top-10 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-600 p-2 min-w-[220px] z-50", "data-more-menu": true, children: [
-                        /* @__PURE__ */ jsx11("div", { className: "px-3 py-2 border-b border-gray-200 dark:border-gray-600 mb-2", children: /* @__PURE__ */ jsxs7("div", { className: "grid grid-cols-4 gap-1", children: [
-                          /* @__PURE__ */ jsx11(
+                      showMoreMenu && /* @__PURE__ */ jsxs8("div", { className: "absolute right-0 top-10 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-600 p-2 min-w-[220px] z-50", "data-more-menu": true, children: [
+                        /* @__PURE__ */ jsx12("div", { className: "px-3 py-2 border-b border-gray-200 dark:border-gray-600 mb-2", children: /* @__PURE__ */ jsxs8("div", { className: "grid grid-cols-4 gap-1", children: [
+                          /* @__PURE__ */ jsx12(
                             "button",
                             {
                               onClick: () => setLocalGlassMode(false),
                               className: `flex items-center justify-center p-2 rounded transition-all ${!localGlassMode ? "bg-blue-600 text-white shadow-sm" : "bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600"}`,
                               title: "Glass Off",
-                              children: /* @__PURE__ */ jsx11("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("rect", { x: "8", y: "8", width: "8", height: "8", rx: "1" }) })
+                              children: /* @__PURE__ */ jsx12("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("rect", { x: "8", y: "8", width: "8", height: "8", rx: "1" }) })
                             }
                           ),
-                          /* @__PURE__ */ jsx11(
+                          /* @__PURE__ */ jsx12(
                             "button",
                             {
                               onClick: () => {
@@ -3089,10 +3639,10 @@ var ChatBubble = ({
                               },
                               className: `flex items-center justify-center p-2 rounded transition-all ${localGlassMode && glassOpacity === "low" ? "bg-blue-600 text-white shadow-sm" : "bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600"}`,
                               title: "Glass Low",
-                              children: /* @__PURE__ */ jsx11("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("rect", { x: "9", y: "9", width: "6", height: "6", rx: "1", strokeWidth: "2" }) })
+                              children: /* @__PURE__ */ jsx12("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("rect", { x: "9", y: "9", width: "6", height: "6", rx: "1", strokeWidth: "2" }) })
                             }
                           ),
-                          /* @__PURE__ */ jsx11(
+                          /* @__PURE__ */ jsx12(
                             "button",
                             {
                               onClick: () => {
@@ -3101,13 +3651,13 @@ var ChatBubble = ({
                               },
                               className: `flex items-center justify-center p-2 rounded transition-all ${localGlassMode && glassOpacity === "medium" ? "bg-blue-600 text-white shadow-sm" : "bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600"}`,
                               title: "Glass Medium",
-                              children: /* @__PURE__ */ jsxs7("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
-                                /* @__PURE__ */ jsx11("rect", { x: "8", y: "8", width: "8", height: "8", rx: "1", strokeWidth: "2" }),
-                                /* @__PURE__ */ jsx11("rect", { x: "10", y: "10", width: "4", height: "4", rx: "0.5", strokeWidth: "1.5" })
+                              children: /* @__PURE__ */ jsxs8("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
+                                /* @__PURE__ */ jsx12("rect", { x: "8", y: "8", width: "8", height: "8", rx: "1", strokeWidth: "2" }),
+                                /* @__PURE__ */ jsx12("rect", { x: "10", y: "10", width: "4", height: "4", rx: "0.5", strokeWidth: "1.5" })
                               ] })
                             }
                           ),
-                          /* @__PURE__ */ jsx11(
+                          /* @__PURE__ */ jsx12(
                             "button",
                             {
                               onClick: () => {
@@ -3116,15 +3666,15 @@ var ChatBubble = ({
                               },
                               className: `flex items-center justify-center p-2 rounded transition-all ${localGlassMode && glassOpacity === "high" ? "bg-blue-600 text-white shadow-sm" : "bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600"}`,
                               title: "Glass High",
-                              children: /* @__PURE__ */ jsxs7("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
-                                /* @__PURE__ */ jsx11("rect", { x: "7", y: "7", width: "10", height: "10", rx: "1", strokeWidth: "2" }),
-                                /* @__PURE__ */ jsx11("rect", { x: "9", y: "9", width: "6", height: "6", rx: "0.5", strokeWidth: "1.5" }),
-                                /* @__PURE__ */ jsx11("rect", { x: "11", y: "11", width: "2", height: "2", rx: "0.5", strokeWidth: "1" })
+                              children: /* @__PURE__ */ jsxs8("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
+                                /* @__PURE__ */ jsx12("rect", { x: "7", y: "7", width: "10", height: "10", rx: "1", strokeWidth: "2" }),
+                                /* @__PURE__ */ jsx12("rect", { x: "9", y: "9", width: "6", height: "6", rx: "0.5", strokeWidth: "1.5" }),
+                                /* @__PURE__ */ jsx12("rect", { x: "11", y: "11", width: "2", height: "2", rx: "0.5", strokeWidth: "1" })
                               ] })
                             }
                           )
                         ] }) }),
-                        /* @__PURE__ */ jsxs7(
+                        /* @__PURE__ */ jsxs8(
                           "button",
                           {
                             onClick: () => {
@@ -3136,15 +3686,15 @@ var ChatBubble = ({
                             },
                             className: "w-full flex items-center space-x-2 px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors",
                             children: [
-                              /* @__PURE__ */ jsx11("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" }) }),
-                              /* @__PURE__ */ jsxs7("span", { children: [
+                              /* @__PURE__ */ jsx12("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" }) }),
+                              /* @__PURE__ */ jsxs8("span", { children: [
                                 theme === "light" ? "Dark" : "Light",
                                 " Mode"
                               ] })
                             ]
                           }
                         ),
-                        /* @__PURE__ */ jsxs7(
+                        /* @__PURE__ */ jsxs8(
                           "button",
                           {
                             onClick: () => {
@@ -3155,15 +3705,15 @@ var ChatBubble = ({
                             },
                             className: "w-full flex items-center space-x-2 px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors",
                             children: [
-                              /* @__PURE__ */ jsx11("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" }) }),
-                              /* @__PURE__ */ jsxs7("span", { children: [
+                              /* @__PURE__ */ jsx12("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" }) }),
+                              /* @__PURE__ */ jsxs8("span", { children: [
                                 voiceEnabled ? "Disable" : "Enable",
                                 " Voice"
                               ] })
                             ]
                           }
                         ),
-                        /* @__PURE__ */ jsxs7(
+                        /* @__PURE__ */ jsxs8(
                           "button",
                           {
                             onClick: () => {
@@ -3172,12 +3722,12 @@ var ChatBubble = ({
                             },
                             className: "w-full flex items-center space-x-2 px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors",
                             children: [
-                              /* @__PURE__ */ jsx11("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" }) }),
-                              /* @__PURE__ */ jsx11("span", { children: "Reset position" })
+                              /* @__PURE__ */ jsx12("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" }) }),
+                              /* @__PURE__ */ jsx12("span", { children: "Reset position" })
                             ]
                           }
                         ),
-                        /* @__PURE__ */ jsxs7(
+                        /* @__PURE__ */ jsxs8(
                           "button",
                           {
                             onClick: () => {
@@ -3193,12 +3743,12 @@ var ChatBubble = ({
                             },
                             className: "w-full flex items-center space-x-2 px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors",
                             children: [
-                              /* @__PURE__ */ jsx11("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
-                              /* @__PURE__ */ jsx11("span", { children: "How to use" })
+                              /* @__PURE__ */ jsx12("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+                              /* @__PURE__ */ jsx12("span", { children: "How to use" })
                             ]
                           }
                         ),
-                        onClearChat && /* @__PURE__ */ jsxs7(
+                        onClearChat && /* @__PURE__ */ jsxs8(
                           "button",
                           {
                             onClick: () => {
@@ -3207,41 +3757,41 @@ var ChatBubble = ({
                             },
                             className: "w-full flex items-center space-x-2 px-3 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors",
                             children: [
-                              /* @__PURE__ */ jsx11("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) }),
-                              /* @__PURE__ */ jsx11("span", { children: "Clear chat" })
+                              /* @__PURE__ */ jsx12("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) }),
+                              /* @__PURE__ */ jsx12("span", { children: "Clear chat" })
                             ]
                           }
                         )
                       ] }),
-                      /* @__PURE__ */ jsx11(
+                      /* @__PURE__ */ jsx12(
                         "button",
                         {
                           onClick: () => setIsMinimized(true),
                           className: THEME_CLASSES.button.minimize,
                           title: "Minimize",
-                          children: /* @__PURE__ */ jsx11("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20 12H4" }) })
+                          children: /* @__PURE__ */ jsx12("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20 12H4" }) })
                         }
                       ),
-                      /* @__PURE__ */ jsx11(
+                      /* @__PURE__ */ jsx12(
                         "button",
                         {
                           onClick: handleToggle,
                           className: THEME_CLASSES.button.close,
                           title: "Close",
-                          children: /* @__PURE__ */ jsx11("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                          children: /* @__PURE__ */ jsx12("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
                         }
                       )
                     ] })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs7("div", { className: "flex-1 overflow-y-auto p-4 space-y-2", children: [
-                showWelcome && messages.length === 0 && config.welcome?.enabled && /* @__PURE__ */ jsxs7("div", { className: THEME_CLASSES.welcome.container, children: [
-                  config.welcome.title && /* @__PURE__ */ jsx11("h4", { className: THEME_CLASSES.welcome.title, style: INLINE_STYLES.welcomeTitle(theme === "dark"), children: config.welcome.title }),
-                  config.welcome.content && /* @__PURE__ */ jsx11("p", { className: THEME_CLASSES.welcome.content, style: INLINE_STYLES.welcomeContent(theme === "dark"), children: config.welcome.content }),
-                  config.welcome.suggestedCommands && config.welcome.suggestedCommands.length > 0 && /* @__PURE__ */ jsxs7("div", { className: THEME_CLASSES.welcome.commandsContainer, children: [
-                    /* @__PURE__ */ jsx11("p", { className: THEME_CLASSES.welcome.commandsHeader, children: "Try these commands:" }),
-                    /* @__PURE__ */ jsx11("div", { className: "space-y-1", children: config.welcome.suggestedCommands.map((cmd, idx) => /* @__PURE__ */ jsxs7(
+              /* @__PURE__ */ jsxs8("div", { className: "flex-1 overflow-y-auto p-4 space-y-2", children: [
+                showWelcome && messages.length === 0 && config.welcome?.enabled && /* @__PURE__ */ jsxs8("div", { className: THEME_CLASSES.welcome.container, children: [
+                  config.welcome.title && /* @__PURE__ */ jsx12("h4", { className: THEME_CLASSES.welcome.title, style: INLINE_STYLES.welcomeTitle(theme === "dark"), children: config.welcome.title }),
+                  config.welcome.content && /* @__PURE__ */ jsx12("p", { className: THEME_CLASSES.welcome.content, style: INLINE_STYLES.welcomeContent(theme === "dark"), children: config.welcome.content }),
+                  config.welcome.suggestedCommands && config.welcome.suggestedCommands.length > 0 && /* @__PURE__ */ jsxs8("div", { className: THEME_CLASSES.welcome.commandsContainer, children: [
+                    /* @__PURE__ */ jsx12("p", { className: THEME_CLASSES.welcome.commandsHeader, children: "Try these commands:" }),
+                    /* @__PURE__ */ jsx12("div", { className: "space-y-1", children: config.welcome.suggestedCommands.map((cmd, idx) => /* @__PURE__ */ jsxs8(
                       "button",
                       {
                         onClick: () => {
@@ -3251,29 +3801,29 @@ var ChatBubble = ({
                         },
                         className: THEME_CLASSES.welcome.commandButton,
                         children: [
-                          /* @__PURE__ */ jsxs7("div", { className: THEME_CLASSES.welcome.commandText, style: INLINE_STYLES.commandText(theme === "dark"), children: [
+                          /* @__PURE__ */ jsxs8("div", { className: THEME_CLASSES.welcome.commandText, style: INLINE_STYLES.commandText(theme === "dark"), children: [
                             '"',
                             cmd.text,
                             '"'
                           ] }),
-                          cmd.desc && /* @__PURE__ */ jsx11("div", { className: THEME_CLASSES.welcome.commandDesc, style: INLINE_STYLES.commandDesc(theme === "dark"), children: cmd.desc })
+                          cmd.desc && /* @__PURE__ */ jsx12("div", { className: THEME_CLASSES.welcome.commandDesc, style: INLINE_STYLES.commandDesc(theme === "dark"), children: cmd.desc })
                         ]
                       },
                       idx
                     )) })
                   ] })
                 ] }),
-                messages.map((message) => /* @__PURE__ */ jsxs7("div", { className: `group flex items-center gap-2 mb-2 ${message.type === "user" ? "flex-row-reverse" : "flex-row"}`, children: [
-                  /* @__PURE__ */ jsx11(
+                messages.map((message) => /* @__PURE__ */ jsxs8("div", { className: `group flex items-center gap-2 mb-2 ${message.type === "user" ? "flex-row-reverse" : "flex-row"}`, children: [
+                  /* @__PURE__ */ jsx12(
                     "div",
                     {
                       className: `inline-block px-4 py-2.5 rounded-2xl max-w-[80%] text-sm shadow-sm transition-all ${message.type === "user" ? THEME_CLASSES.message.user : message.type === "ai" ? THEME_CLASSES.message.ai : THEME_CLASSES.message.system}`,
                       style: message.type === "user" ? INLINE_STYLES.messageUser() : message.type === "ai" ? INLINE_STYLES.messageAI(theme === "dark") : INLINE_STYLES.messageSystem(theme === "dark"),
                       "data-testid": `chat-message-${message.type}`,
-                      children: /* @__PURE__ */ jsx11(MessageRenderer, { content: message.text, theme })
+                      children: /* @__PURE__ */ jsx12(MessageRenderer, { content: message.text, theme })
                     }
                   ),
-                  message.type === "ai" && voiceEnabled && /* @__PURE__ */ jsx11(
+                  message.type === "ai" && voiceEnabled && /* @__PURE__ */ jsx12(
                     TTSButton,
                     {
                       text: message.text,
@@ -3283,7 +3833,7 @@ var ChatBubble = ({
                       size: "small"
                     }
                   ),
-                  /* @__PURE__ */ jsx11(
+                  /* @__PURE__ */ jsx12(
                     "div",
                     {
                       className: `text-xs opacity-0 group-hover:opacity-70 transition-opacity whitespace-nowrap flex-shrink-0 ${message.type === "user" ? "text-gray-400 dark:text-gray-500 text-left" : "text-gray-600 dark:text-gray-400 text-right"}`,
@@ -3292,29 +3842,41 @@ var ChatBubble = ({
                     }
                   )
                 ] }, message.id)),
-                /* @__PURE__ */ jsx11("div", { ref: messagesEndRef })
+                /* @__PURE__ */ jsx12("div", { ref: messagesEndRef })
               ] }),
-              /* @__PURE__ */ jsx11(
-                InputField,
-                {
-                  inputValue,
-                  onInputChange: setInputValue,
-                  onSubmit: handleSend,
-                  placeholder: inputHints[currentHintIndex],
-                  glassClasses: "",
-                  theme,
-                  inputRef,
-                  sendButtonLabel: config.sendButtonLabel,
-                  voiceEnabled,
-                  isListening,
-                  onMicClick: handleMicClick,
-                  modKey: isMac ? "Cmd" : "Ctrl"
-                }
-              )
+              /* @__PURE__ */ jsxs8("div", { style: { position: "relative" }, children: [
+                slashCommand.isOpen && /* @__PURE__ */ jsx12(
+                  SlashCommandPopup,
+                  {
+                    tools: slashCommand.filteredTools,
+                    selectedIndex: slashCommand.selectedIndex,
+                    onSelect: slashCommand.selectTool,
+                    onClose: () => setInputValue("")
+                  }
+                ),
+                /* @__PURE__ */ jsx12(
+                  InputField,
+                  {
+                    inputValue,
+                    onInputChange: setInputValue,
+                    onSubmit: handleSend,
+                    placeholder: inputHints[currentHintIndex],
+                    glassClasses: "",
+                    theme,
+                    inputRef,
+                    sendButtonLabel: config.sendButtonLabel,
+                    voiceEnabled,
+                    isListening,
+                    onMicClick: handleMicClick,
+                    modKey: isMac ? "Cmd" : "Ctrl",
+                    onKeyDown: slashCommand.onKeyDown
+                  }
+                )
+              ] })
             ]
           }
         ),
-        !isExpanded && /* @__PURE__ */ jsxs7(
+        !isExpanded && /* @__PURE__ */ jsxs8(
           "button",
           {
             onClick: handleToggle,
@@ -3322,8 +3884,8 @@ var ChatBubble = ({
             "data-testid": ChatNames.bubble,
             title: `Open chat (press ${isMac ? "Cmd" : "Ctrl"}+/ for voice recording)`,
             children: [
-              /* @__PURE__ */ jsx11("img", { src: config.logo, alt: "Supernal", className: "w-8 h-8" }),
-              hasUnread && notifications && /* @__PURE__ */ jsx11("div", { className: "absolute -top-1 -right-1 w-5 h-5 bg-red-500 rounded-full flex items-center justify-center animate-pulse shadow-lg", "data-testid": "unread-indicator", children: /* @__PURE__ */ jsx11("span", { className: "text-xs text-white font-bold", children: unreadCount > 9 ? "9+" : unreadCount }) })
+              /* @__PURE__ */ jsx12("img", { src: config.logo, alt: "Supernal", className: "w-8 h-8" }),
+              hasUnread && notifications && /* @__PURE__ */ jsx12("div", { className: "absolute -top-1 -right-1 w-5 h-5 bg-red-500 rounded-full flex items-center justify-center animate-pulse shadow-lg", "data-testid": "unread-indicator", children: /* @__PURE__ */ jsx12("span", { className: "text-xs text-white font-bold", children: unreadCount > 9 ? "9+" : unreadCount }) })
             ]
           }
         )
@@ -3333,24 +3895,24 @@ var ChatBubble = ({
 };
 
 // src/components/AutoNavigationContext.tsx
-import { useEffect as useEffect7, useState as useState9 } from "react";
+import { useEffect as useEffect9, useState as useState10 } from "react";
 
 // src/hooks/useNavigationGraph.tsx
-import { useEffect as useEffect6, useState as useState8, useCallback as useCallback5, createContext as createContext3, useContext as useContext3 } from "react";
+import { useEffect as useEffect8, useState as useState9, useCallback as useCallback6, createContext as createContext3, useContext as useContext3 } from "react";
 import {
   NavigationGraph
 } from "@supernal/interface/browser";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var NavigationContextContext = createContext3("global");
 function NavigationContextProvider({
   value,
   children
 }) {
   const graph = useNavigationGraph();
-  useEffect6(() => {
+  useEffect8(() => {
     graph.setCurrentContext(value);
   }, [value, graph]);
-  return /* @__PURE__ */ jsx12(NavigationContextContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx13(NavigationContextContext.Provider, { value, children });
 }
 function useNavigationGraph() {
   return NavigationGraph.getInstance();
@@ -3358,8 +3920,8 @@ function useNavigationGraph() {
 function useCurrentContext() {
   const contextFromProvider = useContext3(NavigationContextContext);
   const graph = useNavigationGraph();
-  const [graphContext, setGraphContext] = useState8("");
-  useEffect6(() => {
+  const [graphContext, setGraphContext] = useState9("");
+  useEffect8(() => {
     const interval = setInterval(() => {
       const current = graph.getCurrentContext?.() || "";
       if (current !== graphContext) {
@@ -3373,7 +3935,7 @@ function useCurrentContext() {
 function useRegisterTool(toolId, contextId, metadata) {
   const graph = useNavigationGraph();
   const currentContext = useCurrentContext();
-  useEffect6(() => {
+  useEffect8(() => {
     let targetContext = contextId || currentContext;
     if (!contextId && metadata) {
       const detection = graph.detectToolContext?.(toolId, metadata);
@@ -3387,10 +3949,10 @@ function useRegisterTool(toolId, contextId, metadata) {
 function useNavigationPath(targetContextOrToolId, isToolId = false) {
   const graph = useNavigationGraph();
   const currentContext = useCurrentContext();
-  const [path, setPath] = useState8(null);
-  const [loading, setLoading] = useState8(true);
-  const [error, setError] = useState8();
-  useEffect6(() => {
+  const [path, setPath] = useState9(null);
+  const [loading, setLoading] = useState9(true);
+  const [error, setError] = useState9();
+  useEffect8(() => {
     try {
       let targetContext = targetContextOrToolId;
       if (isToolId) {
@@ -3418,9 +3980,9 @@ function useNavigationPath(targetContextOrToolId, isToolId = false) {
 function useNavigate() {
   const graph = useNavigationGraph();
   const currentContext = useCurrentContext();
-  const [navigating, setNavigating] = useState8(false);
-  const [error, setError] = useState8();
-  const navigateTo = useCallback5(async (targetContextOrToolId, isToolId = false, executeNavigation) => {
+  const [navigating, setNavigating] = useState9(false);
+  const [error, setError] = useState9();
+  const navigateTo = useCallback6(async (targetContextOrToolId, isToolId = false, executeNavigation) => {
     setNavigating(true);
     setError(void 0);
     try {
@@ -3462,8 +4024,8 @@ function useNavigate() {
 }
 function useAllContexts() {
   const graph = useNavigationGraph();
-  const [contexts, setContexts] = useState8(graph.getAllContexts?.());
-  useEffect6(() => {
+  const [contexts, setContexts] = useState9(graph.getAllContexts?.());
+  useEffect8(() => {
     const interval = setInterval(() => {
       setContexts(graph.getAllContexts?.());
     }, 1e3);
@@ -3473,28 +4035,28 @@ function useAllContexts() {
 }
 
 // src/components/AutoNavigationContext.tsx
-import { Fragment as Fragment4, jsx as jsx13 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx14 } from "react/jsx-runtime";
 function AutoNavigationContext({
   children,
   routes,
   onNavigate
 }) {
-  const [pathname, setPathname] = useState9("/");
-  useEffect7(() => {
+  const [pathname, setPathname] = useState10("/");
+  useEffect9(() => {
     if (typeof window !== "undefined") {
       setPathname(window.location.pathname);
     }
   }, []);
   const context = routes ? inferContextFromPath(pathname, routes) : null;
-  useEffect7(() => {
+  useEffect9(() => {
     if (onNavigate && context) {
       onNavigate(context);
     }
   }, [context, onNavigate]);
   if (!context) {
-    return /* @__PURE__ */ jsx13(Fragment4, { children });
+    return /* @__PURE__ */ jsx14(Fragment4, { children });
   }
-  return /* @__PURE__ */ jsx13(NavigationContextProvider, { value: context, children });
+  return /* @__PURE__ */ jsx14(NavigationContextProvider, { value: context, children });
 }
 function inferContextFromPath(path, customRoutes) {
   if (customRoutes) {
@@ -3524,8 +4086,438 @@ function inferContextFromPath(path, customRoutes) {
 }
 
 // src/components/SupernalProvider.tsx
-import { ExposureCollector, ToolRegistry } from "@supernal/interface/browser";
-import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+import { ExposureCollector, ToolRegistry as ToolRegistry3 } from "@supernal/interface/browser";
+
+// src/hooks/useLocationTracking.ts
+import { useEffect as useEffect10, useRef as useRef9 } from "react";
+import { useRouter } from "next/router";
+import { LocationContext } from "@supernal/interface/browser";
+function getVisibleElements() {
+  if (typeof document === "undefined") return [];
+  const elements = document.querySelectorAll("[data-testid]");
+  return Array.from(elements).map((el) => el.getAttribute("data-testid")).filter(Boolean);
+}
+function arraysEqual(a, b) {
+  if (a.length !== b.length) return false;
+  const sortedA = [...a].sort();
+  const sortedB = [...b].sort();
+  return sortedA.every((val, idx) => val === sortedB[idx]);
+}
+function useLocationTracking() {
+  const router = useRouter();
+  const lastLocationRef = useRef9("");
+  const lastElementsRef = useRef9([]);
+  useEffect10(() => {
+    const updateLocation = () => {
+      const visibleElements = getVisibleElements();
+      const locationChanged = lastLocationRef.current !== router.pathname;
+      const elementsChanged = !arraysEqual(lastElementsRef.current, visibleElements);
+      if (locationChanged || elementsChanged) {
+        LocationContext.setCurrent({
+          page: router.pathname,
+          route: router.route,
+          elements: visibleElements,
+          metadata: {
+            query: router.query,
+            asPath: router.asPath
+          }
+        });
+        if (locationChanged) {
+          console.log(`[LocationTracking] Updated location: ${router.pathname}`);
+        }
+        if (elementsChanged) {
+          console.log(`[LocationTracking] Visible elements changed: ${visibleElements.length} elements`);
+        }
+        lastLocationRef.current = router.pathname;
+        lastElementsRef.current = visibleElements;
+      }
+    };
+    const initialTimer = setTimeout(updateLocation, 100);
+    const intervalId = setInterval(updateLocation, 1e3);
+    const handleRouteChange = () => {
+      setTimeout(updateLocation, 100);
+    };
+    router.events.on("routeChangeComplete", handleRouteChange);
+    return () => {
+      clearTimeout(initialTimer);
+      clearInterval(intervalId);
+      router.events.off("routeChangeComplete", handleRouteChange);
+    };
+  }, [router.pathname, router.route, router.asPath]);
+}
+
+// src/hooks/useNavigationGraphSetup.ts
+import { useEffect as useEffect11, useState as useState11 } from "react";
+import { useRouter as useRouter2 } from "next/router";
+function useNavigationGraphSetup() {
+  const router = useRouter2();
+  const [isInitialized, setIsInitialized] = useState11(false);
+  useEffect11(() => {
+    import("@supernal/interface/browser").then(({ NavigationGraph: NavigationGraph2 }) => {
+      const graph = NavigationGraph2.getInstance();
+      const handler = (path) => {
+        const normalizedPath = path.startsWith("/") ? path : `/${path}`;
+        router.push(normalizedPath);
+      };
+      graph.setNavigationHandler(handler);
+      graph.setRouter(router);
+      graph.setCurrentContext(router.asPath);
+      setIsInitialized(true);
+      console.log("[NavigationGraphSetup] Auto-configured with Next.js router");
+    });
+  }, [router]);
+  useEffect11(() => {
+    if (!isInitialized) return;
+    import("@supernal/interface/browser").then(({ NavigationGraph: NavigationGraph2 }) => {
+      const graph = NavigationGraph2.getInstance();
+      graph.setCurrentContext(router.asPath);
+      console.log(`[NavigationGraphSetup] Context updated: ${router.asPath}`);
+    });
+  }, [router.asPath, isInitialized]);
+}
+
+// src/components/ToolMenuPopup/ToolMenuPopup.tsx
+import { useEffect as useEffect12, useRef as useRef10, useState as useState12 } from "react";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+var ToolMenuPopup = ({
+  isOpen,
+  onClose,
+  categories,
+  totalTools,
+  contextLabel
+}) => {
+  const [collapsedCategories, setCollapsedCategories] = useState12(/* @__PURE__ */ new Set());
+  const [isHydrated, setIsHydrated] = useState12(false);
+  const [isMobile, setIsMobile] = useState12(false);
+  const popupRef = useRef10(null);
+  const { insertText } = useChatInput();
+  useEffect12(() => {
+    setIsHydrated(true);
+    setIsMobile(window.matchMedia("(max-width: 767px)").matches);
+  }, []);
+  useEffect12(() => {
+    if (!isOpen) return;
+    const handleClickOutside = (e) => {
+      const target = e.target;
+      if (popupRef.current && !popupRef.current.contains(target)) {
+        onClose();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isOpen, onClose]);
+  useEffect12(() => {
+    if (!isOpen) return;
+    const handleKey = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [isOpen, onClose]);
+  if (!isHydrated || !isOpen) return null;
+  const toggleCategory = (key) => {
+    setCollapsedCategories((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  };
+  const handleToolClick = (tool) => {
+    const command = tool.examples?.[0] || tool.name.toLowerCase();
+    insertText(command, false);
+    onClose();
+  };
+  const glassStyle = {
+    ...GLASS_RESPONSE_BUBBLE.dark,
+    zIndex: 999998
+  };
+  const positionStyle = isMobile ? {
+    position: "fixed",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    maxHeight: "80vh",
+    borderRadius: "16px 16px 0 0"
+  } : {
+    position: "fixed",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    maxWidth: 480,
+    width: "90vw",
+    maxHeight: "70vh",
+    borderRadius: 16
+  };
+  return /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      ref: popupRef,
+      "data-tool-menu": true,
+      style: { ...glassStyle, ...positionStyle, overflowY: "auto" },
+      children: [
+        /* @__PURE__ */ jsxs9("div", { style: {
+          padding: "16px 20px",
+          borderBottom: "1px solid rgba(255, 255, 255, 0.1)",
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center"
+        }, children: [
+          /* @__PURE__ */ jsxs9("div", { children: [
+            /* @__PURE__ */ jsx15("h3", { style: { margin: 0, color: "#fff", fontSize: 16, fontWeight: 600 }, children: "Available Actions" }),
+            /* @__PURE__ */ jsxs9("p", { style: { margin: "4px 0 0", color: "rgba(255,255,255,0.6)", fontSize: 12 }, children: [
+              contextLabel,
+              " \xB7 ",
+              totalTools,
+              " tool",
+              totalTools !== 1 ? "s" : ""
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx15(
+            "button",
+            {
+              onClick: onClose,
+              style: {
+                background: "none",
+                border: "none",
+                color: "rgba(255,255,255,0.5)",
+                fontSize: 20,
+                cursor: "pointer",
+                padding: "4px 8px",
+                lineHeight: 1
+              },
+              "aria-label": "Close tool menu",
+              children: "\xD7"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs9("div", { style: { padding: "8px 12px 16px" }, children: [
+          categories.length === 0 && /* @__PURE__ */ jsx15("p", { style: { color: "rgba(255,255,255,0.5)", textAlign: "center", padding: "24px 0", fontSize: 14 }, children: "No tools available on this page." }),
+          categories.map((category) => {
+            const isCollapsed = collapsedCategories.has(category.key);
+            return /* @__PURE__ */ jsxs9("div", { style: { marginBottom: 4 }, children: [
+              /* @__PURE__ */ jsxs9(
+                "button",
+                {
+                  onClick: () => toggleCategory(category.key),
+                  style: {
+                    width: "100%",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    padding: "10px 8px",
+                    background: "none",
+                    border: "none",
+                    cursor: "pointer",
+                    borderRadius: 8,
+                    color: "#fff",
+                    transition: "background 0.15s"
+                  },
+                  onMouseEnter: (e) => {
+                    e.currentTarget.style.background = "rgba(255,255,255,0.05)";
+                  },
+                  onMouseLeave: (e) => {
+                    e.currentTarget.style.background = "none";
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs9("span", { style: { fontSize: 14, fontWeight: 500 }, children: [
+                      category.displayName,
+                      /* @__PURE__ */ jsx15("span", { style: { color: "rgba(255,255,255,0.4)", fontWeight: 400, marginLeft: 8, fontSize: 12 }, children: category.tools.length })
+                    ] }),
+                    /* @__PURE__ */ jsx15("span", { style: { color: "rgba(255,255,255,0.4)", fontSize: 12 }, children: isCollapsed ? "\u25B6" : "\u25BC" })
+                  ]
+                }
+              ),
+              !isCollapsed && /* @__PURE__ */ jsx15("div", { style: { paddingLeft: 8, paddingRight: 8 }, children: category.tools.map((tool, idx) => /* @__PURE__ */ jsxs9(
+                "button",
+                {
+                  onClick: () => handleToolClick(tool),
+                  style: {
+                    width: "100%",
+                    display: "block",
+                    padding: "8px 10px",
+                    background: "none",
+                    border: "none",
+                    cursor: "pointer",
+                    borderRadius: 6,
+                    textAlign: "left",
+                    color: "#fff",
+                    transition: "background 0.15s"
+                  },
+                  onMouseEnter: (e) => {
+                    e.currentTarget.style.background = "rgba(255,255,255,0.08)";
+                  },
+                  onMouseLeave: (e) => {
+                    e.currentTarget.style.background = "none";
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx15("div", { style: { fontSize: 13, fontWeight: 500 }, children: tool.name }),
+                    tool.description && /* @__PURE__ */ jsx15("div", { style: {
+                      fontSize: 11,
+                      color: "rgba(255,255,255,0.5)",
+                      marginTop: 2,
+                      lineHeight: 1.3,
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap"
+                    }, children: tool.description })
+                  ]
+                },
+                tool.toolId || `${category.key}-${idx}`
+              )) })
+            ] }, category.key);
+          })
+        ] }),
+        /* @__PURE__ */ jsxs9("div", { style: {
+          padding: "10px 20px",
+          borderTop: "1px solid rgba(255, 255, 255, 0.08)",
+          textAlign: "center",
+          color: "rgba(255,255,255,0.35)",
+          fontSize: 11
+        }, children: [
+          "Click a tool to insert its command \xB7 Type ",
+          /* @__PURE__ */ jsx15("kbd", { style: {
+            padding: "1px 4px",
+            borderRadius: 3,
+            border: "1px solid rgba(255,255,255,0.2)",
+            fontSize: 10
+          }, children: "/" }),
+          " in chat for quick commands \xB7 ",
+          /* @__PURE__ */ jsx15("kbd", { style: {
+            padding: "1px 4px",
+            borderRadius: 3,
+            border: "1px solid rgba(255,255,255,0.2)",
+            fontSize: 10
+          }, children: "Esc" }),
+          " to close"
+        ] })
+      ]
+    }
+  );
+};
+
+// src/components/ToolMenuPopup/ToolMenuPopupTrigger.tsx
+import { useEffect as useEffect13 } from "react";
+
+// src/components/ToolMenuPopup/useToolMenu.ts
+import { useState as useState13, useMemo as useMemo4, useCallback as useCallback7 } from "react";
+import { ToolRegistry as ToolRegistry2 } from "@supernal/interface/browser";
+var CATEGORY_DISPLAY = {
+  navigation: "Navigation",
+  user_interaction: "Controls",
+  data_manipulation: "Data",
+  content_creation: "Content",
+  content_retrieval: "Content",
+  external_service: "Services",
+  system: "System",
+  memory: "Memory",
+  data: "Data",
+  search: "Search",
+  utility: "Utility",
+  dom: "DOM",
+  api: "API",
+  communication: "Communication",
+  "context-app": "App Context",
+  workflow: "Workflow"
+};
+function useToolMenu() {
+  const [isOpen, setIsOpen] = useState13(false);
+  const open = useCallback7(() => setIsOpen(true), []);
+  const close = useCallback7(() => setIsOpen(false), []);
+  const toggle = useCallback7(() => setIsOpen((prev) => !prev), []);
+  const { categories, totalTools, contextLabel } = useMemo4(() => {
+    if (!isOpen) {
+      return { categories: [], totalTools: 0, contextLabel: "" };
+    }
+    const tools = ToolRegistry2.getToolsByLocation();
+    const aiTools = tools.filter((t) => t.aiEnabled);
+    const grouped = {};
+    for (const tool of aiTools) {
+      const cat = tool.category || "uncategorized";
+      if (!grouped[cat]) grouped[cat] = [];
+      grouped[cat].push(tool);
+    }
+    const cats = Object.entries(grouped).map(([key, catTools]) => ({
+      key,
+      displayName: CATEGORY_DISPLAY[key] || key.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()),
+      tools: catTools
+    })).sort((a, b) => a.displayName.localeCompare(b.displayName));
+    let label = "All Pages";
+    try {
+      const { LocationContext: LocationContext2 } = __require("@supernal/interface/browser");
+      const current = LocationContext2.getCurrent();
+      if (current?.page) {
+        label = current.page;
+      }
+    } catch {
+    }
+    return { categories: cats, totalTools: aiTools.length, contextLabel: label };
+  }, [isOpen]);
+  return { isOpen, open, close, toggle, categories, totalTools, contextLabel };
+}
+
+// src/components/ToolMenuPopup/ToolMenuPopupTrigger.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+var ToolMenuPopupTrigger = () => {
+  const toolMenu = useToolMenu();
+  useEffect13(() => {
+    const handleKeyDown = (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key === "/") {
+        e.preventDefault();
+        toolMenu.toggle();
+        return;
+      }
+      if (e.key === "?" && !e.metaKey && !e.ctrlKey && !e.altKey) {
+        const target = e.target;
+        const tag = target.tagName?.toLowerCase();
+        const isEditable = target.isContentEditable;
+        if (tag === "input" || tag === "textarea" || isEditable) {
+          const value = target.value;
+          if (value && value.trim().length > 0) {
+            return;
+          }
+        }
+        e.preventDefault();
+        toolMenu.toggle();
+        return;
+      }
+      if (e.key === "/" && !e.metaKey && !e.ctrlKey && !e.altKey && !e.shiftKey) {
+        const target = e.target;
+        const tag = target.tagName?.toLowerCase();
+        const isEditable = target.isContentEditable;
+        if (tag === "input" || tag === "textarea" || isEditable) {
+          const value = target.value;
+          if (!value || value.trim().length === 0) {
+            e.preventDefault();
+            e.stopPropagation();
+            toolMenu.toggle();
+          }
+        }
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [toolMenu]);
+  if (!toolMenu.isOpen) return null;
+  return /* @__PURE__ */ jsx16(
+    ToolMenuPopup,
+    {
+      isOpen: toolMenu.isOpen,
+      onClose: toolMenu.close,
+      categories: toolMenu.categories,
+      totalTools: toolMenu.totalTools,
+      contextLabel: toolMenu.contextLabel
+    }
+  );
+};
+
+// src/components/SupernalProvider.tsx
+import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
 function ChatBubbleConnector({
   theme,
   position,
@@ -3542,7 +4534,7 @@ function ChatBubbleConnector({
     glassMode,
     ...logo ? { logo } : {}
   };
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx17(
     ChatBubble,
     {
       messages,
@@ -3579,12 +4571,14 @@ function SupernalProvider({
   console.log("[SupernalProvider] disabled:", disabled, "type:", typeof disabled);
   console.log("[SupernalProvider] shouldRenderChatBubble:", shouldRenderChatBubble);
   console.log("[SupernalProvider] variant:", variant, "effectiveDisplayMode:", effectiveDisplayMode);
-  useEffect8(() => {
+  useLocationTracking();
+  useNavigationGraphSetup();
+  useEffect14(() => {
     if (typeof window === "undefined") return;
     const collector = ExposureCollector.getInstance();
     const registeredToolIds = /* @__PURE__ */ new Set();
     const registerTools = () => {
-      const allTools = ToolRegistry.getAllTools();
+      const allTools = ToolRegistry3.getAllTools();
       allTools.forEach((tool) => {
         if (tool.elementId && !registeredToolIds.has(tool.toolId)) {
           const element = document.querySelector(`[data-testid="${tool.elementId}"]`);
@@ -3611,9 +4605,9 @@ function SupernalProvider({
       collector.destroy();
     };
   }, []);
-  return /* @__PURE__ */ jsx14(ChatInputProvider, { children: /* @__PURE__ */ jsxs8(ChatProvider, { mode, apiKey, onToolExecute, children: [
-    /* @__PURE__ */ jsx14(AutoNavigationContext, { routes, onNavigate, children }),
-    shouldRenderChatBubble ? /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx17(ChatInputProvider, { children: /* @__PURE__ */ jsxs10(ChatProvider, { mode, apiKey, onToolExecute, children: [
+    /* @__PURE__ */ jsx17(AutoNavigationContext, { routes, onNavigate, children }),
+    shouldRenderChatBubble ? /* @__PURE__ */ jsx17(
       ChatBubbleConnector,
       {
         theme,
@@ -3625,26 +4619,27 @@ function SupernalProvider({
         displayMode: effectiveDisplayMode,
         drawerSide
       }
-    ) : null
+    ) : null,
+    !disabled && /* @__PURE__ */ jsx17(ToolMenuPopupTrigger, {})
   ] }) });
 }
 
 // src/components/ChatBubbleSettingsModal.tsx
-import React11, { useEffect as useEffect9 } from "react";
-import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+import React14, { useEffect as useEffect15 } from "react";
+import { Fragment as Fragment5, jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
 function ChatBubbleSettingsModal({
   isOpen,
   onClose,
   settings,
   onSettingsChange
 }) {
-  const [localSettings, setLocalSettings] = React11.useState(settings);
-  useEffect9(() => {
+  const [localSettings, setLocalSettings] = React14.useState(settings);
+  useEffect15(() => {
     if (isOpen) {
       setLocalSettings(settings);
     }
   }, [isOpen, settings]);
-  useEffect9(() => {
+  useEffect15(() => {
     const handleEscape = (e) => {
       if (e.key === "Escape" && isOpen) {
         onClose();
@@ -3665,8 +4660,8 @@ function ChatBubbleSettingsModal({
     onClose();
   };
   const isDark = localSettings.theme === "dark";
-  return /* @__PURE__ */ jsxs9(Fragment5, { children: [
-    /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsxs11(Fragment5, { children: [
+    /* @__PURE__ */ jsx18(
       "div",
       {
         className: "fixed inset-0 bg-black bg-opacity-50 z-[60] backdrop-blur-sm",
@@ -3674,12 +4669,12 @@ function ChatBubbleSettingsModal({
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx18(
       "div",
       {
         className: "fixed inset-0 z-[70] flex items-center justify-center p-4",
         "data-testid": "chat-settings-modal",
-        children: /* @__PURE__ */ jsxs9(
+        children: /* @__PURE__ */ jsxs11(
           "div",
           {
             className: `${isDark ? "bg-gray-800 text-white" : "bg-white text-gray-900"} rounded-2xl shadow-2xl max-w-md w-full p-6 border ${isDark ? "border-gray-700" : "border-gray-200"}`,
@@ -3688,8 +4683,8 @@ function ChatBubbleSettingsModal({
             "aria-labelledby": "settings-modal-title",
             onClick: (e) => e.stopPropagation(),
             children: [
-              /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between mb-6", children: [
-                /* @__PURE__ */ jsx15(
+              /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between mb-6", children: [
+                /* @__PURE__ */ jsx18(
                   "h2",
                   {
                     id: "settings-modal-title",
@@ -3697,56 +4692,56 @@ function ChatBubbleSettingsModal({
                     children: "Chat Settings"
                   }
                 ),
-                /* @__PURE__ */ jsx15(
+                /* @__PURE__ */ jsx18(
                   "button",
                   {
                     onClick: handleCancel,
                     className: `${isDark ? "text-gray-400 hover:text-gray-200" : "text-gray-400 hover:text-gray-600"} transition-colors p-1 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700`,
                     "aria-label": "Close modal",
-                    children: /* @__PURE__ */ jsx15("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx15("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                    children: /* @__PURE__ */ jsx18("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx18("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs9("div", { className: "space-y-5 mb-6", children: [
-                /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ jsxs9("div", { children: [
-                    /* @__PURE__ */ jsx15("label", { className: "block text-base font-medium mb-1", children: "Theme" }),
-                    /* @__PURE__ */ jsx15("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Switch between light and dark modes" })
+              /* @__PURE__ */ jsxs11("div", { className: "space-y-5 mb-6", children: [
+                /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsxs11("div", { children: [
+                    /* @__PURE__ */ jsx18("label", { className: "block text-base font-medium mb-1", children: "Theme" }),
+                    /* @__PURE__ */ jsx18("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Switch between light and dark modes" })
                   ] }),
-                  /* @__PURE__ */ jsxs9("div", { className: "flex items-center space-x-2", children: [
-                    /* @__PURE__ */ jsx15(
+                  /* @__PURE__ */ jsxs11("div", { className: "flex items-center space-x-2", children: [
+                    /* @__PURE__ */ jsx18(
                       "button",
                       {
                         onClick: () => setLocalSettings({ ...localSettings, theme: "light" }),
                         className: `p-2 rounded-lg transition-all ${localSettings.theme === "light" ? "bg-blue-600 text-white shadow-lg" : isDark ? "bg-gray-700 text-gray-300 hover:bg-gray-600" : "bg-gray-100 text-gray-600 hover:bg-gray-200"}`,
                         title: "Light mode",
-                        children: /* @__PURE__ */ jsx15("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx15("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" }) })
+                        children: /* @__PURE__ */ jsx18("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx18("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" }) })
                       }
                     ),
-                    /* @__PURE__ */ jsx15(
+                    /* @__PURE__ */ jsx18(
                       "button",
                       {
                         onClick: () => setLocalSettings({ ...localSettings, theme: "dark" }),
                         className: `p-2 rounded-lg transition-all ${localSettings.theme === "dark" ? "bg-blue-600 text-white shadow-lg" : isDark ? "bg-gray-700 text-gray-300 hover:bg-gray-600" : "bg-gray-100 text-gray-600 hover:bg-gray-200"}`,
                         title: "Dark mode",
-                        children: /* @__PURE__ */ jsx15("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx15("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" }) })
+                        children: /* @__PURE__ */ jsx18("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx18("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" }) })
                       }
                     )
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ jsxs9("div", { children: [
-                    /* @__PURE__ */ jsx15("label", { className: "block text-base font-medium mb-1", children: "Glass Mode" }),
-                    /* @__PURE__ */ jsx15("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Enable glassmorphism transparency effect" })
+                /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsxs11("div", { children: [
+                    /* @__PURE__ */ jsx18("label", { className: "block text-base font-medium mb-1", children: "Glass Mode" }),
+                    /* @__PURE__ */ jsx18("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Enable glassmorphism transparency effect" })
                   ] }),
-                  /* @__PURE__ */ jsx15(
+                  /* @__PURE__ */ jsx18(
                     "button",
                     {
                       onClick: () => setLocalSettings({ ...localSettings, glassMode: !localSettings.glassMode }),
                       className: `relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${localSettings.glassMode ? "bg-blue-600" : isDark ? "bg-gray-700" : "bg-gray-300"}`,
                       role: "switch",
                       "aria-checked": localSettings.glassMode,
-                      children: /* @__PURE__ */ jsx15(
+                      children: /* @__PURE__ */ jsx18(
                         "span",
                         {
                           className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${localSettings.glassMode ? "translate-x-6" : "translate-x-1"}`
@@ -3755,19 +4750,19 @@ function ChatBubbleSettingsModal({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ jsxs9("div", { children: [
-                    /* @__PURE__ */ jsx15("label", { className: "block text-base font-medium mb-1", children: "Notifications" }),
-                    /* @__PURE__ */ jsx15("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Show unread message indicators" })
+                /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsxs11("div", { children: [
+                    /* @__PURE__ */ jsx18("label", { className: "block text-base font-medium mb-1", children: "Notifications" }),
+                    /* @__PURE__ */ jsx18("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Show unread message indicators" })
                   ] }),
-                  /* @__PURE__ */ jsx15(
+                  /* @__PURE__ */ jsx18(
                     "button",
                     {
                       onClick: () => setLocalSettings({ ...localSettings, notifications: !localSettings.notifications }),
                       className: `relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${localSettings.notifications ? "bg-blue-600" : isDark ? "bg-gray-700" : "bg-gray-300"}`,
                       role: "switch",
                       "aria-checked": localSettings.notifications,
-                      children: /* @__PURE__ */ jsx15(
+                      children: /* @__PURE__ */ jsx18(
                         "span",
                         {
                           className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${localSettings.notifications ? "translate-x-6" : "translate-x-1"}`
@@ -3776,16 +4771,16 @@ function ChatBubbleSettingsModal({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsx15("div", { className: `border-t ${isDark ? "border-gray-700" : "border-gray-200"} my-2` }),
-                /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ jsxs9("div", { children: [
-                    /* @__PURE__ */ jsxs9("label", { className: "block text-base font-medium mb-1 flex items-center space-x-2", children: [
-                      /* @__PURE__ */ jsx15("span", { children: "Subtitle Overlay" }),
-                      /* @__PURE__ */ jsx15("span", { className: "inline-block px-2 py-0.5 text-xs font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200", children: "BETA" })
+                /* @__PURE__ */ jsx18("div", { className: `border-t ${isDark ? "border-gray-700" : "border-gray-200"} my-2` }),
+                /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsxs11("div", { children: [
+                    /* @__PURE__ */ jsxs11("label", { className: "block text-base font-medium mb-1 flex items-center space-x-2", children: [
+                      /* @__PURE__ */ jsx18("span", { children: "Subtitle Overlay" }),
+                      /* @__PURE__ */ jsx18("span", { className: "inline-block px-2 py-0.5 text-xs font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200", children: "BETA" })
                     ] }),
-                    /* @__PURE__ */ jsx15("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Minimalist voice-first overlay with @/ icon" })
+                    /* @__PURE__ */ jsx18("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Minimalist voice-first overlay with @/ icon" })
                   ] }),
-                  /* @__PURE__ */ jsx15(
+                  /* @__PURE__ */ jsx18(
                     "button",
                     {
                       onClick: () => setLocalSettings({
@@ -3797,7 +4792,7 @@ function ChatBubbleSettingsModal({
                       className: `relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${localSettings.subtitleOverlayEnabled ? "bg-blue-600" : isDark ? "bg-gray-700" : "bg-gray-300"}`,
                       role: "switch",
                       "aria-checked": localSettings.subtitleOverlayEnabled,
-                      children: /* @__PURE__ */ jsx15(
+                      children: /* @__PURE__ */ jsx18(
                         "span",
                         {
                           className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${localSettings.subtitleOverlayEnabled ? "translate-x-6" : "translate-x-1"}`
@@ -3806,12 +4801,12 @@ function ChatBubbleSettingsModal({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ jsxs9("div", { children: [
-                    /* @__PURE__ */ jsx15("label", { className: "block text-base font-medium mb-1", children: "Display Mode" }),
-                    /* @__PURE__ */ jsx15("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Auto switches drawer on mobile, panel on desktop" })
+                /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsxs11("div", { children: [
+                    /* @__PURE__ */ jsx18("label", { className: "block text-base font-medium mb-1", children: "Display Mode" }),
+                    /* @__PURE__ */ jsx18("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Auto switches drawer on mobile, panel on desktop" })
                   ] }),
-                  /* @__PURE__ */ jsxs9(
+                  /* @__PURE__ */ jsxs11(
                     "select",
                     {
                       value: localSettings.displayMode || "auto",
@@ -3821,22 +4816,22 @@ function ChatBubbleSettingsModal({
                       }),
                       className: `px-3 py-2 rounded-lg border ${isDark ? "bg-gray-700 border-gray-600 text-white" : "bg-white border-gray-300 text-gray-900"} focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all`,
                       children: [
-                        /* @__PURE__ */ jsx15("option", { value: "auto", children: "Auto (Recommended)" }),
-                        /* @__PURE__ */ jsx15("option", { value: "drawer", children: "Always Drawer" }),
-                        /* @__PURE__ */ jsx15("option", { value: "full", children: "Always Panel" }),
-                        /* @__PURE__ */ jsx15("option", { value: "floating", children: "Always Floating" }),
-                        /* @__PURE__ */ jsx15("option", { value: "subtitle", children: "Subtitle Overlay (Beta)" })
+                        /* @__PURE__ */ jsx18("option", { value: "auto", children: "Auto (Recommended)" }),
+                        /* @__PURE__ */ jsx18("option", { value: "drawer", children: "Always Drawer" }),
+                        /* @__PURE__ */ jsx18("option", { value: "full", children: "Always Panel" }),
+                        /* @__PURE__ */ jsx18("option", { value: "floating", children: "Always Floating" }),
+                        /* @__PURE__ */ jsx18("option", { value: "subtitle", children: "Subtitle Overlay (Beta)" })
                       ]
                     }
                   )
                 ] }),
-                (localSettings.displayMode === "auto" || localSettings.displayMode === "drawer") && /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ jsxs9("div", { children: [
-                    /* @__PURE__ */ jsx15("label", { className: "block text-base font-medium mb-1", children: "Drawer Side" }),
-                    /* @__PURE__ */ jsx15("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Which edge drawer slides from" })
+                (localSettings.displayMode === "auto" || localSettings.displayMode === "drawer") && /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsxs11("div", { children: [
+                    /* @__PURE__ */ jsx18("label", { className: "block text-base font-medium mb-1", children: "Drawer Side" }),
+                    /* @__PURE__ */ jsx18("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Which edge drawer slides from" })
                   ] }),
-                  /* @__PURE__ */ jsxs9("div", { className: "flex items-center space-x-2", children: [
-                    /* @__PURE__ */ jsx15(
+                  /* @__PURE__ */ jsxs11("div", { className: "flex items-center space-x-2", children: [
+                    /* @__PURE__ */ jsx18(
                       "button",
                       {
                         onClick: () => setLocalSettings({ ...localSettings, drawerSide: "left" }),
@@ -3844,7 +4839,7 @@ function ChatBubbleSettingsModal({
                         children: "Left"
                       }
                     ),
-                    /* @__PURE__ */ jsx15(
+                    /* @__PURE__ */ jsx18(
                       "button",
                       {
                         onClick: () => setLocalSettings({ ...localSettings, drawerSide: "right" }),
@@ -3854,24 +4849,24 @@ function ChatBubbleSettingsModal({
                     )
                   ] })
                 ] }),
-                /* @__PURE__ */ jsx15("div", { className: `border-t ${isDark ? "border-gray-700" : "border-gray-200"} my-2` }),
-                /* @__PURE__ */ jsxs9("div", { className: "mb-3", children: [
-                  /* @__PURE__ */ jsx15("h3", { className: "text-lg font-semibold mb-1", children: "Voice Control" }),
-                  /* @__PURE__ */ jsx15("p", { className: `text-xs ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Enable voice input and audio feedback" })
+                /* @__PURE__ */ jsx18("div", { className: `border-t ${isDark ? "border-gray-700" : "border-gray-200"} my-2` }),
+                /* @__PURE__ */ jsxs11("div", { className: "mb-3", children: [
+                  /* @__PURE__ */ jsx18("h3", { className: "text-lg font-semibold mb-1", children: "Voice Control" }),
+                  /* @__PURE__ */ jsx18("p", { className: `text-xs ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Enable voice input and audio feedback" })
                 ] }),
-                /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ jsxs9("div", { children: [
-                    /* @__PURE__ */ jsx15("label", { className: "block text-base font-medium mb-1", children: "Voice Control" }),
-                    /* @__PURE__ */ jsx15("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Enable voice input and TTS responses" })
+                /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsxs11("div", { children: [
+                    /* @__PURE__ */ jsx18("label", { className: "block text-base font-medium mb-1", children: "Voice Control" }),
+                    /* @__PURE__ */ jsx18("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Enable voice input and TTS responses" })
                   ] }),
-                  /* @__PURE__ */ jsx15(
+                  /* @__PURE__ */ jsx18(
                     "button",
                     {
                       onClick: () => setLocalSettings({ ...localSettings, voiceEnabled: !localSettings.voiceEnabled }),
                       className: `relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${localSettings.voiceEnabled ? "bg-blue-600" : isDark ? "bg-gray-700" : "bg-gray-300"}`,
                       role: "switch",
                       "aria-checked": localSettings.voiceEnabled,
-                      children: /* @__PURE__ */ jsx15(
+                      children: /* @__PURE__ */ jsx18(
                         "span",
                         {
                           className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${localSettings.voiceEnabled ? "translate-x-6" : "translate-x-1"}`
@@ -3880,20 +4875,20 @@ function ChatBubbleSettingsModal({
                     }
                   )
                 ] }),
-                localSettings.voiceEnabled && /* @__PURE__ */ jsxs9(Fragment5, { children: [
-                  /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between pl-4 border-l-2 border-blue-500/30", children: [
-                    /* @__PURE__ */ jsxs9("div", { children: [
-                      /* @__PURE__ */ jsx15("label", { className: "block text-sm font-medium mb-1", children: "Auto-read AI Responses" }),
-                      /* @__PURE__ */ jsx15("p", { className: `text-xs ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Automatically read AI messages aloud" })
+                localSettings.voiceEnabled && /* @__PURE__ */ jsxs11(Fragment5, { children: [
+                  /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between pl-4 border-l-2 border-blue-500/30", children: [
+                    /* @__PURE__ */ jsxs11("div", { children: [
+                      /* @__PURE__ */ jsx18("label", { className: "block text-sm font-medium mb-1", children: "Auto-read AI Responses" }),
+                      /* @__PURE__ */ jsx18("p", { className: `text-xs ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Automatically read AI messages aloud" })
                     ] }),
-                    /* @__PURE__ */ jsx15(
+                    /* @__PURE__ */ jsx18(
                       "button",
                       {
                         onClick: () => setLocalSettings({ ...localSettings, autoReadResponses: !localSettings.autoReadResponses }),
                         className: `relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${localSettings.autoReadResponses ? "bg-blue-600" : isDark ? "bg-gray-700" : "bg-gray-300"}`,
                         role: "switch",
                         "aria-checked": localSettings.autoReadResponses,
-                        children: /* @__PURE__ */ jsx15(
+                        children: /* @__PURE__ */ jsx18(
                           "span",
                           {
                             className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${localSettings.autoReadResponses ? "translate-x-6" : "translate-x-1"}`
@@ -3902,19 +4897,19 @@ function ChatBubbleSettingsModal({
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between pl-4 border-l-2 border-blue-500/30", children: [
-                    /* @__PURE__ */ jsxs9("div", { children: [
-                      /* @__PURE__ */ jsx15("label", { className: "block text-sm font-medium mb-1", children: "Premium Voices \u{1F48E}" }),
-                      /* @__PURE__ */ jsx15("p", { className: `text-xs ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Use high-quality OpenAI voices (requires network)" })
+                  /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between pl-4 border-l-2 border-blue-500/30", children: [
+                    /* @__PURE__ */ jsxs11("div", { children: [
+                      /* @__PURE__ */ jsx18("label", { className: "block text-sm font-medium mb-1", children: "Premium Voices \u{1F48E}" }),
+                      /* @__PURE__ */ jsx18("p", { className: `text-xs ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Use high-quality OpenAI voices (requires network)" })
                     ] }),
-                    /* @__PURE__ */ jsx15(
+                    /* @__PURE__ */ jsx18(
                       "button",
                       {
                         onClick: () => setLocalSettings({ ...localSettings, usePremiumVoices: !localSettings.usePremiumVoices }),
                         className: `relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${localSettings.usePremiumVoices ? "bg-blue-600" : isDark ? "bg-gray-700" : "bg-gray-300"}`,
                         role: "switch",
                         "aria-checked": localSettings.usePremiumVoices,
-                        children: /* @__PURE__ */ jsx15(
+                        children: /* @__PURE__ */ jsx18(
                           "span",
                           {
                             className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${localSettings.usePremiumVoices ? "translate-x-6" : "translate-x-1"}`
@@ -3923,13 +4918,13 @@ function ChatBubbleSettingsModal({
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsxs9("div", { className: "pl-4 border-l-2 border-blue-500/30", children: [
-                    /* @__PURE__ */ jsxs9("label", { className: "block text-sm font-medium mb-2", children: [
+                  /* @__PURE__ */ jsxs11("div", { className: "pl-4 border-l-2 border-blue-500/30", children: [
+                    /* @__PURE__ */ jsxs11("label", { className: "block text-sm font-medium mb-2", children: [
                       "Voice Speed: ",
                       localSettings.ttsSpeed.toFixed(1),
                       "x"
                     ] }),
-                    /* @__PURE__ */ jsx15(
+                    /* @__PURE__ */ jsx18(
                       "input",
                       {
                         type: "range",
@@ -3941,30 +4936,30 @@ function ChatBubbleSettingsModal({
                         className: "w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-blue-600"
                       }
                     ),
-                    /* @__PURE__ */ jsxs9("div", { className: "flex justify-between text-xs text-gray-400 mt-1", children: [
-                      /* @__PURE__ */ jsx15("span", { children: "0.5x (Slow)" }),
-                      /* @__PURE__ */ jsx15("span", { children: "1.0x (Normal)" }),
-                      /* @__PURE__ */ jsx15("span", { children: "2.0x (Fast)" })
+                    /* @__PURE__ */ jsxs11("div", { className: "flex justify-between text-xs text-gray-400 mt-1", children: [
+                      /* @__PURE__ */ jsx18("span", { children: "0.5x (Slow)" }),
+                      /* @__PURE__ */ jsx18("span", { children: "1.0x (Normal)" }),
+                      /* @__PURE__ */ jsx18("span", { children: "2.0x (Fast)" })
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsx15("div", { className: `border-t ${isDark ? "border-gray-700" : "border-gray-200"} my-2` }),
-                  /* @__PURE__ */ jsxs9("div", { className: "mb-3", children: [
-                    /* @__PURE__ */ jsx15("h4", { className: "text-sm font-semibold mb-1", children: "Voice Quick Record (Ctrl+/)" }),
-                    /* @__PURE__ */ jsx15("p", { className: `text-xs ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Press Ctrl+/ (or Cmd+/ on Mac) to auto-record and execute voice commands" })
+                  /* @__PURE__ */ jsx18("div", { className: `border-t ${isDark ? "border-gray-700" : "border-gray-200"} my-2` }),
+                  /* @__PURE__ */ jsxs11("div", { className: "mb-3", children: [
+                    /* @__PURE__ */ jsx18("h4", { className: "text-sm font-semibold mb-1", children: "Voice Quick Record (Ctrl+/)" }),
+                    /* @__PURE__ */ jsx18("p", { className: `text-xs ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Press Ctrl+/ (or Cmd+/ on Mac) to auto-record and execute voice commands" })
                   ] }),
-                  /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between pl-4 border-l-2 border-purple-500/30", children: [
-                    /* @__PURE__ */ jsxs9("div", { children: [
-                      /* @__PURE__ */ jsx15("label", { className: "block text-sm font-medium mb-1", children: "Auto-Execute Commands" }),
-                      /* @__PURE__ */ jsx15("p", { className: `text-xs ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Automatically run recognized voice commands" })
+                  /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between pl-4 border-l-2 border-purple-500/30", children: [
+                    /* @__PURE__ */ jsxs11("div", { children: [
+                      /* @__PURE__ */ jsx18("label", { className: "block text-sm font-medium mb-1", children: "Auto-Execute Commands" }),
+                      /* @__PURE__ */ jsx18("p", { className: `text-xs ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Automatically run recognized voice commands" })
                     ] }),
-                    /* @__PURE__ */ jsx15(
+                    /* @__PURE__ */ jsx18(
                       "button",
                       {
                         onClick: () => setLocalSettings({ ...localSettings, sttAutoExecute: !localSettings.sttAutoExecute }),
                         className: `relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${localSettings.sttAutoExecute ? "bg-purple-600" : isDark ? "bg-gray-700" : "bg-gray-300"}`,
                         role: "switch",
                         "aria-checked": localSettings.sttAutoExecute,
-                        children: /* @__PURE__ */ jsx15(
+                        children: /* @__PURE__ */ jsx18(
                           "span",
                           {
                             className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${localSettings.sttAutoExecute ? "translate-x-6" : "translate-x-1"}`
@@ -3973,13 +4968,13 @@ function ChatBubbleSettingsModal({
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsxs9("div", { className: "pl-4 border-l-2 border-purple-500/30", children: [
-                    /* @__PURE__ */ jsxs9("label", { className: "block text-sm font-medium mb-2", children: [
+                  /* @__PURE__ */ jsxs11("div", { className: "pl-4 border-l-2 border-purple-500/30", children: [
+                    /* @__PURE__ */ jsxs11("label", { className: "block text-sm font-medium mb-2", children: [
                       "Recording Timeout: ",
                       (localSettings.sttAutoRecordTimeout / 1e3).toFixed(1),
                       "s"
                     ] }),
-                    /* @__PURE__ */ jsx15(
+                    /* @__PURE__ */ jsx18(
                       "input",
                       {
                         type: "range",
@@ -3991,22 +4986,22 @@ function ChatBubbleSettingsModal({
                         className: "w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-purple-600"
                       }
                     ),
-                    /* @__PURE__ */ jsxs9("div", { className: "flex justify-between text-xs text-gray-400 mt-1", children: [
-                      /* @__PURE__ */ jsx15("span", { children: "2s" }),
-                      /* @__PURE__ */ jsx15("span", { children: "8s" }),
-                      /* @__PURE__ */ jsx15("span", { children: "15s" })
+                    /* @__PURE__ */ jsxs11("div", { className: "flex justify-between text-xs text-gray-400 mt-1", children: [
+                      /* @__PURE__ */ jsx18("span", { children: "2s" }),
+                      /* @__PURE__ */ jsx18("span", { children: "8s" }),
+                      /* @__PURE__ */ jsx18("span", { children: "15s" })
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsxs9("div", { className: `p-3 rounded-lg ${isDark ? "bg-purple-900/20 border border-purple-500/30" : "bg-purple-50 border border-purple-200"}`, children: [
-                    /* @__PURE__ */ jsx15("p", { className: `text-xs ${isDark ? "text-purple-300" : "text-purple-800"} mb-1 font-medium`, children: "\u26A1 Quick Tip: Press Ctrl+/ anywhere (even while typing!)" }),
-                    /* @__PURE__ */ jsx15("p", { className: `text-xs ${isDark ? "text-purple-400" : "text-purple-700"}`, children: localSettings.sttAutoExecute ? "Recording auto-stops and executes your command" : "Recording auto-stops and fills the input (press Enter to send)" })
+                  /* @__PURE__ */ jsxs11("div", { className: `p-3 rounded-lg ${isDark ? "bg-purple-900/20 border border-purple-500/30" : "bg-purple-50 border border-purple-200"}`, children: [
+                    /* @__PURE__ */ jsx18("p", { className: `text-xs ${isDark ? "text-purple-300" : "text-purple-800"} mb-1 font-medium`, children: "\u26A1 Quick Tip: Press Ctrl+/ anywhere (even while typing!)" }),
+                    /* @__PURE__ */ jsx18("p", { className: `text-xs ${isDark ? "text-purple-400" : "text-purple-700"}`, children: localSettings.sttAutoExecute ? "Recording auto-stops and executes your command" : "Recording auto-stops and fills the input (press Enter to send)" })
                   ] }),
-                  !localSettings.usePremiumVoices && /* @__PURE__ */ jsx15("div", { className: `p-3 rounded-lg ${isDark ? "bg-green-900/20 border border-green-500/30" : "bg-green-50 border border-green-200"}`, children: /* @__PURE__ */ jsx15("p", { className: `text-xs ${isDark ? "text-green-300" : "text-green-800"}`, children: "\u{1F49A} Using free device voices (works offline, zero cost)" }) }),
-                  localSettings.usePremiumVoices && /* @__PURE__ */ jsx15("div", { className: `p-3 rounded-lg ${isDark ? "bg-purple-900/20 border border-purple-500/30" : "bg-purple-50 border border-purple-200"}`, children: /* @__PURE__ */ jsx15("p", { className: `text-xs ${isDark ? "text-purple-300" : "text-purple-800"}`, children: "\u{1F48E} Using premium OpenAI voices (requires internet connection)" }) })
+                  !localSettings.usePremiumVoices && /* @__PURE__ */ jsx18("div", { className: `p-3 rounded-lg ${isDark ? "bg-green-900/20 border border-green-500/30" : "bg-green-50 border border-green-200"}`, children: /* @__PURE__ */ jsx18("p", { className: `text-xs ${isDark ? "text-green-300" : "text-green-800"}`, children: "\u{1F49A} Using free device voices (works offline, zero cost)" }) }),
+                  localSettings.usePremiumVoices && /* @__PURE__ */ jsx18("div", { className: `p-3 rounded-lg ${isDark ? "bg-purple-900/20 border border-purple-500/30" : "bg-purple-50 border border-purple-200"}`, children: /* @__PURE__ */ jsx18("p", { className: `text-xs ${isDark ? "text-purple-300" : "text-purple-800"}`, children: "\u{1F48E} Using premium OpenAI voices (requires internet connection)" }) })
                 ] })
               ] }),
-              /* @__PURE__ */ jsxs9("div", { className: "flex justify-end space-x-3 pt-4 border-t border-gray-200 dark:border-gray-700", children: [
-                /* @__PURE__ */ jsx15(
+              /* @__PURE__ */ jsxs11("div", { className: "flex justify-end space-x-3 pt-4 border-t border-gray-200 dark:border-gray-700", children: [
+                /* @__PURE__ */ jsx18(
                   "button",
                   {
                     onClick: handleCancel,
@@ -4014,7 +5009,7 @@ function ChatBubbleSettingsModal({
                     children: "Cancel"
                   }
                 ),
-                /* @__PURE__ */ jsx15(
+                /* @__PURE__ */ jsx18(
                   "button",
                   {
                     onClick: handleSave,
@@ -4167,6 +5162,8 @@ export {
   SubtitleOverlay,
   SupernalProvider,
   ToolManager,
+  ToolMenuPopup,
+  ToolMenuPopupTrigger,
   findBestMatch,
   scoreToolMatch,
   useAllContexts,
@@ -4176,5 +5173,6 @@ export {
   useNavigate,
   useNavigationGraph,
   useNavigationPath,
-  useRegisterTool
+  useRegisterTool,
+  useToolMenu
 };