@supernal/interface-nextjs 1.0.25 → 1.0.28

package/dist/index.js

@@ -31,12 +31,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  ApiKeyProvider: () => ApiKeyProvider,
   AutoNavigationContext: () => AutoNavigationContext,
   ChatBubble: () => ChatBubble,
   ChatBubbleSettingsModal: () => ChatBubbleSettingsModal,
   ChatBubbleVariant: () => ChatBubbleVariant,
   ChatInputProvider: () => ChatInputProvider,
   ChatProvider: () => ChatProvider,
+  ClaudeClient: () => ClaudeClient,
   CodeBlock: () => CodeBlock,
   Components: () => Components,
   DemoAIInterface: () => DemoAIInterface,
@@ -50,9 +52,13 @@ __export(index_exports, {
   ToolManager: () => ToolManager,
   ToolMenuPopup: () => ToolMenuPopup,
   ToolMenuPopupTrigger: () => ToolMenuPopupTrigger,
+  createClaudeClient: () => createClaudeClient,
   findBestMatch: () => findBestMatch,
   scoreToolMatch: () => scoreToolMatch,
   useAllContexts: () => useAllContexts,
+  useApiKey: () => useApiKey,
+  useApiKeyOptional: () => useApiKeyOptional,
+  useApiKeyStorage: () => useApiKeyStorage,
   useChatContext: () => useChatContext,
   useChatInput: () => useChatInput,
   useCurrentContext: () => useCurrentContext,
@@ -65,7 +71,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/SupernalProvider.tsx
-var import_react19 = require("react");
+var import_react21 = require("react");
 
 // src/contexts/ChatInputContext.tsx
 var import_react = require("react");
@@ -92,10 +98,10 @@ function ChatInputProvider({ children }) {
 }
 
 // src/contexts/ChatProvider.tsx
-var import_react2 = require("react");
+var import_react4 = require("react");
 
 // src/lib/ChatAIInterface.ts
-var import_interface = require("@supernal/interface");
+var import_browser2 = require("@supernal/interface/browser");
 
 // src/lib/ToolManager.ts
 var import_browser = require("@supernal/interface/browser");
@@ -190,7 +196,7 @@ var ToolManagerClass = class {
 var ToolManager = new ToolManagerClass();
 
 // src/lib/ChatAIInterface.ts
-var DemoAIInterface = class extends import_interface.AIInterface {
+var DemoAIInterface = class extends import_browser2.AIInterface {
   constructor() {
     super();
     this.toolExecutionListeners = [];
@@ -234,17 +240,466 @@ var DemoAIInterface = class extends import_interface.AIInterface {
   }
 };
 
-// src/contexts/ChatProvider.tsx
+// src/lib/ClaudeClient.ts
+var COST_PER_1K = {
+  "claude-sonnet-4-20250514": { input: 3e-3, output: 0.015 },
+  "claude-3-5-sonnet-20241022": { input: 3e-3, output: 0.015 },
+  "claude-3-opus-20240229": { input: 0.015, output: 0.075 },
+  "claude-3-haiku-20240307": { input: 25e-5, output: 125e-5 }
+};
+var ClaudeClient = class {
+  constructor(config) {
+    this.apiKey = config.apiKey;
+    this.model = config.model || "claude-sonnet-4-20250514";
+    this.maxTokens = config.maxTokens || 4096;
+    this.systemPrompt = config.systemPrompt || "You are a helpful AI assistant integrated into a web application. Be concise and helpful.";
+  }
+  /**
+   * Send a message to Claude and get a response
+   */
+  async sendMessage(userMessage, options = {}) {
+    const messages = [
+      ...options.messages || [],
+      { role: "user", content: userMessage }
+    ];
+    try {
+      const response = await fetch("https://api.anthropic.com/v1/messages", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "x-api-key": this.apiKey,
+          "anthropic-version": "2023-06-01",
+          "anthropic-dangerous-direct-browser-access": "true"
+        },
+        body: JSON.stringify({
+          model: this.model,
+          max_tokens: options.maxTokens || this.maxTokens,
+          system: options.systemPrompt || this.systemPrompt,
+          messages: messages.map((m) => ({
+            role: m.role,
+            content: m.content
+          })),
+          temperature: options.temperature
+        })
+      });
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        if (response.status === 401) {
+          return {
+            success: false,
+            message: "Invalid API key. Please check your API key and try again.",
+            error: "INVALID_API_KEY"
+          };
+        }
+        if (response.status === 429) {
+          return {
+            success: false,
+            message: "Rate limit exceeded. Please wait a moment and try again.",
+            error: "RATE_LIMITED"
+          };
+        }
+        if (response.status === 400) {
+          return {
+            success: false,
+            message: errorData.error?.message || "Invalid request",
+            error: "BAD_REQUEST"
+          };
+        }
+        return {
+          success: false,
+          message: errorData.error?.message || `API error: ${response.status}`,
+          error: "API_ERROR"
+        };
+      }
+      const data = await response.json();
+      const textContent = data.content.find((c) => c.type === "text");
+      const responseText = textContent?.text || "";
+      const modelCosts = COST_PER_1K[this.model] || COST_PER_1K["claude-sonnet-4-20250514"];
+      const inputCost = data.usage.input_tokens / 1e3 * modelCosts.input;
+      const outputCost = data.usage.output_tokens / 1e3 * modelCosts.output;
+      return {
+        success: true,
+        message: responseText,
+        response: data,
+        usage: {
+          inputTokens: data.usage.input_tokens,
+          outputTokens: data.usage.output_tokens,
+          estimatedCost: inputCost + outputCost
+        }
+      };
+    } catch (err) {
+      console.error("ClaudeClient error:", err);
+      if (err instanceof TypeError && err.message.includes("fetch")) {
+        return {
+          success: false,
+          message: "Network error. Please check your connection.",
+          error: "NETWORK_ERROR"
+        };
+      }
+      return {
+        success: false,
+        message: err instanceof Error ? err.message : "Unknown error occurred",
+        error: "UNKNOWN_ERROR"
+      };
+    }
+  }
+  /**
+   * Update the API key
+   */
+  setApiKey(apiKey) {
+    this.apiKey = apiKey;
+  }
+  /**
+   * Update the model
+   */
+  setModel(model) {
+    this.model = model;
+  }
+  /**
+   * Update the system prompt
+   */
+  setSystemPrompt(systemPrompt) {
+    this.systemPrompt = systemPrompt;
+  }
+};
+function createClaudeClient(config) {
+  return new ClaudeClient(config);
+}
+
+// src/contexts/ApiKeyContext.tsx
+var import_react3 = __toESM(require("react"));
+
+// src/hooks/useApiKeyStorage.ts
+var import_react2 = require("react");
+var STORAGE_KEY = "supernal-api-key";
+var ENCRYPTED_STORAGE_KEY = "supernal-vault-v1";
+function validateApiKeyFormat(key) {
+  if (!key || key.trim() === "") {
+    return { valid: false, error: "API key is required" };
+  }
+  if (!key.startsWith("sk-ant-")) {
+    return { valid: false, error: 'Invalid format. Keys start with "sk-ant-"' };
+  }
+  if (key.length < 50) {
+    return { valid: false, error: "API key appears too short" };
+  }
+  return { valid: true };
+}
+function maskApiKey(key) {
+  if (key.length <= 14) return "\u2022".repeat(key.length);
+  return `${key.slice(0, 10)}...${key.slice(-4)}`;
+}
+async function validateApiKeyWithAnthropic(apiKey) {
+  try {
+    const response = await fetch("https://api.anthropic.com/v1/messages", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "x-api-key": apiKey,
+        "anthropic-version": "2023-06-01",
+        "anthropic-dangerous-direct-browser-access": "true"
+      },
+      body: JSON.stringify({
+        model: "claude-sonnet-4-20250514",
+        max_tokens: 1,
+        messages: [{ role: "user", content: "hi" }]
+      })
+    });
+    if (response.ok) {
+      return { valid: true };
+    }
+    const data = await response.json().catch(() => ({}));
+    if (response.status === 401) {
+      return { valid: false, error: "Invalid API key" };
+    }
+    if (response.status === 403) {
+      return { valid: false, error: "API key does not have permission" };
+    }
+    if (response.status === 429) {
+      return { valid: true };
+    }
+    return { valid: false, error: data.error?.message || "Validation failed" };
+  } catch (err) {
+    console.warn("Could not validate API key with Anthropic:", err);
+    return validateApiKeyFormat(apiKey);
+  }
+}
+var SALT_LENGTH = 32;
+var IV_LENGTH = 12;
+var ITERATIONS = 1e5;
+async function deriveKey(passphrase, salt) {
+  const keyMaterial = await crypto.subtle.importKey(
+    "raw",
+    new TextEncoder().encode(passphrase),
+    "PBKDF2",
+    false,
+    ["deriveKey"]
+  );
+  const saltBuffer = salt.buffer.slice(salt.byteOffset, salt.byteOffset + salt.byteLength);
+  return crypto.subtle.deriveKey(
+    { name: "PBKDF2", salt: saltBuffer, iterations: ITERATIONS, hash: "SHA-256" },
+    keyMaterial,
+    { name: "AES-GCM", length: 256 },
+    false,
+    ["encrypt", "decrypt"]
+  );
+}
+async function encryptValue(key, plaintext, salt) {
+  const iv = crypto.getRandomValues(new Uint8Array(IV_LENGTH));
+  const ivBuffer = iv.buffer.slice(iv.byteOffset, iv.byteOffset + iv.byteLength);
+  const ciphertext = await crypto.subtle.encrypt(
+    { name: "AES-GCM", iv: ivBuffer },
+    key,
+    new TextEncoder().encode(plaintext)
+  );
+  return {
+    version: 1,
+    ciphertext: arrayBufferToBase64(ciphertext),
+    salt: uint8ArrayToBase64(salt),
+    iv: uint8ArrayToBase64(iv),
+    encryptedAt: Date.now()
+  };
+}
+async function decryptValue(key, entry) {
+  const ciphertext = base64ToArrayBuffer(entry.ciphertext);
+  const iv = base64ToUint8Array(entry.iv);
+  const ivBuffer = iv.buffer.slice(iv.byteOffset, iv.byteOffset + iv.byteLength);
+  const plaintext = await crypto.subtle.decrypt(
+    { name: "AES-GCM", iv: ivBuffer },
+    key,
+    ciphertext
+  );
+  return new TextDecoder().decode(plaintext);
+}
+function arrayBufferToBase64(buffer) {
+  const bytes = new Uint8Array(buffer);
+  let binary = "";
+  for (let i = 0; i < bytes.byteLength; i++) {
+    binary += String.fromCharCode(bytes[i]);
+  }
+  return btoa(binary);
+}
+function base64ToArrayBuffer(base64) {
+  const binary = atob(base64);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return bytes.buffer;
+}
+function uint8ArrayToBase64(array) {
+  const buffer = array.buffer.slice(array.byteOffset, array.byteOffset + array.byteLength);
+  return arrayBufferToBase64(buffer);
+}
+function base64ToUint8Array(base64) {
+  return new Uint8Array(base64ToArrayBuffer(base64));
+}
+function loadEncryptedEntry() {
+  if (typeof window === "undefined") return null;
+  try {
+    const stored = localStorage.getItem(ENCRYPTED_STORAGE_KEY);
+    if (stored) {
+      const entry = JSON.parse(stored);
+      if (entry.version === 1 && entry.ciphertext && entry.salt) {
+        return entry;
+      }
+    }
+  } catch {
+  }
+  return null;
+}
+function useApiKeyStorage(options = {}) {
+  const [state, setState] = (0, import_react2.useState)({
+    apiKey: null,
+    status: options.encrypted ? "locked" : "none",
+    error: null,
+    maskedKey: null
+  });
+  const derivedKeyRef = (0, import_react2.useRef)(null);
+  const saltRef = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    if (options.encrypted) {
+      const entry = loadEncryptedEntry();
+      if (entry) {
+        setState((prev) => ({ ...prev, status: "locked" }));
+      } else {
+        setState((prev) => ({ ...prev, status: "locked" }));
+      }
+      return;
+    }
+    try {
+      const saved = localStorage.getItem(STORAGE_KEY);
+      if (saved) {
+        const validation = validateApiKeyFormat(saved);
+        setState({
+          apiKey: saved,
+          status: validation.valid ? "valid" : "invalid",
+          error: validation.error || null,
+          maskedKey: maskApiKey(saved)
+        });
+      }
+    } catch (err) {
+      console.error("Failed to load API key from storage:", err);
+    }
+  }, [options.encrypted]);
+  const unlock = (0, import_react2.useCallback)(async (passphrase) => {
+    if (!options.encrypted) {
+      return true;
+    }
+    try {
+      const entry = loadEncryptedEntry();
+      if (entry) {
+        const salt = base64ToUint8Array(entry.salt);
+        const key = await deriveKey(passphrase, salt);
+        try {
+          const apiKey = await decryptValue(key, entry);
+          derivedKeyRef.current = key;
+          saltRef.current = salt;
+          const validation = validateApiKeyFormat(apiKey);
+          setState({
+            apiKey,
+            status: validation.valid ? "valid" : "invalid",
+            error: validation.error || null,
+            maskedKey: maskApiKey(apiKey)
+          });
+          return true;
+        } catch {
+          options.onPassphraseInvalid?.();
+          return false;
+        }
+      } else {
+        const salt = crypto.getRandomValues(new Uint8Array(SALT_LENGTH));
+        const key = await deriveKey(passphrase, salt);
+        derivedKeyRef.current = key;
+        saltRef.current = salt;
+        setState((prev) => ({
+          ...prev,
+          status: "none"
+          // Unlocked but no key yet
+        }));
+        return true;
+      }
+    } catch (error) {
+      console.error("[useApiKeyStorage] Unlock failed:", error);
+      return false;
+    }
+  }, [options.encrypted, options.onPassphraseInvalid]);
+  const lock = (0, import_react2.useCallback)(() => {
+    if (!options.encrypted) return;
+    derivedKeyRef.current = null;
+    setState((prev) => ({
+      ...prev,
+      status: "locked",
+      apiKey: null,
+      maskedKey: null
+    }));
+  }, [options.encrypted]);
+  const setApiKey = (0, import_react2.useCallback)(async (key, validate = true) => {
+    const formatValidation = validateApiKeyFormat(key);
+    if (!formatValidation.valid) {
+      setState({
+        apiKey: null,
+        status: "invalid",
+        error: formatValidation.error || "Invalid API key",
+        maskedKey: null
+      });
+      return false;
+    }
+    setState({
+      apiKey: key,
+      status: validate ? "validating" : "valid",
+      error: null,
+      maskedKey: maskApiKey(key)
+    });
+    try {
+      if (options.encrypted && derivedKeyRef.current && saltRef.current) {
+        const entry = await encryptValue(derivedKeyRef.current, key, saltRef.current);
+        localStorage.setItem(ENCRYPTED_STORAGE_KEY, JSON.stringify(entry));
+      } else {
+        localStorage.setItem(STORAGE_KEY, key);
+      }
+    } catch (err) {
+      console.error("Failed to save API key:", err);
+    }
+    if (validate) {
+      const liveValidation = await validateApiKeyWithAnthropic(key);
+      setState((prev) => ({
+        ...prev,
+        status: liveValidation.valid ? "valid" : "invalid",
+        error: liveValidation.error || null
+      }));
+      return liveValidation.valid;
+    }
+    return true;
+  }, [options.encrypted]);
+  const clearApiKey = (0, import_react2.useCallback)(() => {
+    try {
+      if (options.encrypted) {
+        localStorage.removeItem(ENCRYPTED_STORAGE_KEY);
+      } else {
+        localStorage.removeItem(STORAGE_KEY);
+      }
+    } catch (err) {
+      console.error("Failed to clear API key:", err);
+    }
+    setState({
+      apiKey: null,
+      status: options.encrypted ? "locked" : "none",
+      error: null,
+      maskedKey: null
+    });
+  }, [options.encrypted]);
+  const revalidate = (0, import_react2.useCallback)(async () => {
+    if (!state.apiKey) return false;
+    return setApiKey(state.apiKey, true);
+  }, [state.apiKey, setApiKey]);
+  return {
+    ...state,
+    hasApiKey: !!state.apiKey && state.status === "valid",
+    isLocked: state.status === "locked",
+    setApiKey,
+    clearApiKey,
+    revalidate,
+    unlock,
+    lock
+  };
+}
+
+// src/contexts/ApiKeyContext.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var ChatContext = (0, import_react2.createContext)(null);
+var ApiKeyContext = (0, import_react3.createContext)(null);
+function ApiKeyProvider({ children, initialApiKey }) {
+  const apiKeyStorage = useApiKeyStorage();
+  import_react3.default.useEffect(() => {
+    if (initialApiKey && !apiKeyStorage.apiKey && apiKeyStorage.status === "none") {
+      apiKeyStorage.setApiKey(initialApiKey, false);
+    }
+  }, [initialApiKey, apiKeyStorage]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ApiKeyContext.Provider, { value: apiKeyStorage, children });
+}
+function useApiKey() {
+  const context = (0, import_react3.useContext)(ApiKeyContext);
+  if (!context) {
+    throw new Error("useApiKey must be used within ApiKeyProvider");
+  }
+  return context;
+}
+function useApiKeyOptional() {
+  return (0, import_react3.useContext)(ApiKeyContext);
+}
+
+// src/contexts/ChatProvider.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ChatContext = (0, import_react4.createContext)(null);
 function useChatContext() {
-  const context = (0, import_react2.useContext)(ChatContext);
+  const context = (0, import_react4.useContext)(ChatContext);
   if (!context) {
     throw new Error("useChatContext must be used within ChatProvider");
   }
   return context;
 }
-var STORAGE_KEY = "supernal-chat-messages";
+var STORAGE_KEY2 = "supernal-chat-messages";
 var MAX_MESSAGES = 100;
 function getInitialMessages() {
   return [
@@ -289,14 +744,30 @@ function getInitialMessages() {
 function ChatProvider({
   children,
   mode = "fuzzy",
-  apiKey,
+  apiKey: propApiKey,
   onToolExecute
 }) {
-  const [messages, setMessages] = (0, import_react2.useState)([]);
-  (0, import_react2.useEffect)(() => {
+  const [messages, setMessages] = (0, import_react4.useState)([]);
+  const apiKeyContext = useApiKeyOptional();
+  const activeApiKey = apiKeyContext?.hasApiKey ? apiKeyContext.apiKey : propApiKey;
+  const isAiMode = !!activeApiKey;
+  const claudeClientRef = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => {
+    if (activeApiKey) {
+      claudeClientRef.current = new ClaudeClient({
+        apiKey: activeApiKey,
+        systemPrompt: `You are a helpful AI assistant integrated into a web application powered by Supernal Interface.
+You can help users navigate the application and perform tasks.
+Be concise, friendly, and helpful. Use markdown formatting when appropriate.`
+      });
+    } else {
+      claudeClientRef.current = null;
+    }
+  }, [activeApiKey]);
+  (0, import_react4.useEffect)(() => {
     if (typeof window === "undefined") return;
     try {
-      const saved = localStorage.getItem(STORAGE_KEY);
+      const saved = localStorage.getItem(STORAGE_KEY2);
       if (saved) {
         const loaded = JSON.parse(saved).map((m) => ({
           ...m,
@@ -311,24 +782,24 @@ function ChatProvider({
       setMessages(getInitialMessages());
     }
   }, []);
-  const [isLoading, setIsLoading] = (0, import_react2.useState)(false);
-  const [aiInterface] = (0, import_react2.useState)(() => new DemoAIInterface());
-  (0, import_react2.useEffect)(() => {
+  const [isLoading, setIsLoading] = (0, import_react4.useState)(false);
+  const [aiInterface] = (0, import_react4.useState)(() => new DemoAIInterface());
+  (0, import_react4.useEffect)(() => {
     if (onToolExecute) {
       return aiInterface.onToolExecution((result) => {
         onToolExecute(result.toolName, result);
       });
     }
   }, [aiInterface, onToolExecute]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     try {
       const toSave = messages.slice(-MAX_MESSAGES);
-      localStorage.setItem(STORAGE_KEY, JSON.stringify(toSave));
+      localStorage.setItem(STORAGE_KEY2, JSON.stringify(toSave));
     } catch (error) {
       console.error("Failed to save messages:", error);
     }
   }, [messages]);
-  const sendMessage = (0, import_react2.useCallback)(async (text) => {
+  const sendMessage = (0, import_react4.useCallback)(async (text) => {
     const userMessage = {
       id: Date.now().toString(),
       text,
@@ -338,14 +809,31 @@ function ChatProvider({
     setMessages((prev) => [...prev, userMessage]);
     setIsLoading(true);
     try {
-      const result = await aiInterface.findAndExecuteCommand(text);
-      const aiMessage = {
-        id: (Date.now() + 1).toString(),
-        text: result.message,
-        type: result.success ? "ai" : "system",
-        timestamp: (/* @__PURE__ */ new Date()).toISOString()
-      };
-      setMessages((prev) => [...prev, aiMessage]);
+      if (claudeClientRef.current) {
+        const conversationHistory = messages.slice(-20).filter((m) => m.type === "user" || m.type === "ai").map((m) => ({
+          role: m.type === "user" ? "user" : "assistant",
+          content: m.text
+        }));
+        const result = await claudeClientRef.current.sendMessage(text, {
+          messages: conversationHistory
+        });
+        const aiMessage = {
+          id: (Date.now() + 1).toString(),
+          text: result.message,
+          type: result.success ? "ai" : "system",
+          timestamp: (/* @__PURE__ */ new Date()).toISOString()
+        };
+        setMessages((prev) => [...prev, aiMessage]);
+      } else {
+        const result = await aiInterface.findAndExecuteCommand(text);
+        const aiMessage = {
+          id: (Date.now() + 1).toString(),
+          text: result.message,
+          type: result.success ? "ai" : "system",
+          timestamp: (/* @__PURE__ */ new Date()).toISOString()
+        };
+        setMessages((prev) => [...prev, aiMessage]);
+      }
     } catch (error) {
       const errorMessage = {
         id: (Date.now() + 1).toString(),
@@ -357,16 +845,16 @@ function ChatProvider({
     } finally {
       setIsLoading(false);
     }
-  }, [aiInterface]);
-  const clearMessages = (0, import_react2.useCallback)(() => {
+  }, [aiInterface, messages]);
+  const clearMessages = (0, import_react4.useCallback)(() => {
     setMessages([]);
-    localStorage.removeItem(STORAGE_KEY);
+    localStorage.removeItem(STORAGE_KEY2);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChatContext.Provider, { value: { messages, sendMessage, clearMessages, isLoading }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChatContext.Provider, { value: { messages, sendMessage, clearMessages, isLoading, isAiMode }, children });
 }
 
 // src/components/ChatBubble/constants.ts
-var import_react3 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 
 // src/names/Components.ts
 var Components = {
@@ -374,7 +862,20 @@ var Components = {
   ChatToggleButton: "chat-toggle-button",
   ChatInput: "chat-message-input",
   ChatSendButton: "chat-send-button",
-  ChatClearButton: "chat-clear-button"
+  ChatClearButton: "chat-clear-button",
+  ChatMoreMenu: "chat-more-menu",
+  ChatMoreMenuButton: "chat-more-menu-button",
+  // API Key configuration components (BYOK mode)
+  ApiKeySection: "api-key-section",
+  ApiKeyInput: "api-key-input",
+  ApiKeySubmitButton: "api-key-submit-button",
+  ApiKeyClearButton: "api-key-clear-button",
+  ApiKeyConfigureButton: "api-key-configure-button",
+  ApiKeyStatus: "api-key-status",
+  ApiKeyMasked: "api-key-masked",
+  ApiKeyError: "api-key-error",
+  ApiKeyShowToggle: "api-key-show-toggle",
+  ApiKeyCancelButton: "api-key-cancel-button"
 };
 var ChatBubbleVariant = {
   full: "full",
@@ -576,7 +1077,7 @@ var GLASS_INVERTED = {
 var DEFAULT_CONFIG = {
   title: "Supernal Interface",
   logo: DEFAULT_LOGO,
-  avatar: import_react3.default.createElement("img", { src: DEFAULT_LOGO, alt: "Supernal", className: "w-6 h-6" }),
+  avatar: import_react5.default.createElement("img", { src: DEFAULT_LOGO, alt: "Supernal", className: "w-6 h-6" }),
   description: "I'm a TOOL system AI can use to control this site",
   placeholder: "Try: toggle notifications",
   sendButtonLabel: "Send",
@@ -599,7 +1100,7 @@ var DEFAULT_CONFIG = {
 };
 
 // src/components/ChatBubble/InputField.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var InputField = ({
   compact = false,
   inputValue,
@@ -615,8 +1116,8 @@ var InputField = ({
   onMicClick,
   modKey = "Ctrl",
   onKeyDown
-}) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("form", { onSubmit, className: compact ? "flex space-x-2" : THEME_CLASSES.bg.inputForm + " bg-transparent", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: compact ? "flex space-x-2 flex-1" : "relative", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("form", { onSubmit, className: compact ? "flex space-x-2" : THEME_CLASSES.bg.inputForm + " bg-transparent", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: compact ? "flex space-x-2 flex-1" : "relative", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "input",
     {
       ref: compact ? void 0 : inputRef,
@@ -630,7 +1131,7 @@ var InputField = ({
       "data-testid": ChatNames.input
     }
   ),
-  voiceEnabled && onMicClick && !compact && (!inputValue.trim() || isListening) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  voiceEnabled && onMicClick && !compact && (!inputValue.trim() || isListening) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "button",
     {
       type: "button",
@@ -638,33 +1139,33 @@ var InputField = ({
       className: `absolute right-2 top-1/2 -translate-y-1/2 p-2 rounded-full transition-all ${isListening ? "bg-red-500 text-white animate-pulse" : "text-gray-500 hover:text-blue-600 hover:bg-gray-100 dark:hover:bg-gray-700"}`,
       title: isListening ? "Stop recording (ESC)" : `Voice input (click or press ${modKey}+/)`,
       "data-testid": "voice-input-button",
-      children: isListening ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }) }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", 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" }) })
+      children: isListening ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", 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" }) })
     }
   ),
-  inputValue.trim() && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  inputValue.trim() && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "button",
     {
       type: "submit",
       className: compact ? "px-3 py-2 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-xl hover:from-blue-600 hover:to-blue-700 disabled:from-gray-300 disabled:to-gray-400 disabled:cursor-not-allowed transition-all text-xs font-medium shadow-md hover:shadow-lg" : THEME_CLASSES.input.sendButton,
       "data-testid": ChatNames.sendButton,
       title: sendButtonLabel,
-      children: compact ? "\u2192" : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", strokeWidth: "2.5", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M13 5l7 7m0 0l-7 7m7-7H3" }) })
+      children: compact ? "\u2192" : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", strokeWidth: "2.5", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M13 5l7 7m0 0l-7 7m7-7H3" }) })
     }
   )
 ] }) });
 
 // src/components/ChatBubble/Avatar.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var Avatar = ({ avatar, size = "normal" }) => {
   if (!avatar) return null;
   if (typeof avatar === "string") {
-    return size === "small" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-lg", children: avatar }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center shadow-md", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-white text-sm font-bold", children: avatar }) });
+    return size === "small" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-lg", children: avatar }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center shadow-md", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-white text-sm font-bold", children: avatar }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: avatar });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: avatar });
 };
 
 // src/components/ChatBubble/ChatBubble.tsx
-var import_react11 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 
 // src/components/MessageRenderer.tsx
 var import_react_markdown = __toESM(require("react-markdown"));
@@ -674,12 +1175,12 @@ var import_remark_directive = __toESM(require("remark-directive"));
 var import_rehype_katex = __toESM(require("rehype-katex"));
 
 // src/components/CodeBlock.tsx
-var import_react4 = __toESM(require("react"));
+var import_react6 = __toESM(require("react"));
 var import_react_syntax_highlighter = require("react-syntax-highlighter");
-var import_prism = require("react-syntax-highlighter/dist/cjs/styles/prism");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_prism = require("react-syntax-highlighter/dist/esm/styles/prism");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function CodeBlock({ children, className, inline, theme = "dark" }) {
-  const [copied, setCopied] = (0, import_react4.useState)(false);
+  const [copied, setCopied] = (0, import_react6.useState)(false);
   const match = /language-(\w+)/.exec(className || "");
   const language = match ? match[1] : "text";
   const handleCopy = async () => {
@@ -688,25 +1189,25 @@ function CodeBlock({ children, className, inline, theme = "dark" }) {
     setTimeout(() => setCopied(false), 2e3);
   };
   if (inline) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("code", { className: `${className || ""} px-1.5 py-0.5 rounded text-sm font-mono ${theme === "dark" ? "bg-gray-800 text-gray-200" : "bg-gray-100 text-gray-800"}`, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("code", { className: `${className || ""} px-1.5 py-0.5 rounded text-sm font-mono ${theme === "dark" ? "bg-gray-800 text-gray-200" : "bg-gray-100 text-gray-800"}`, children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative group my-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative group my-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "button",
       {
         onClick: handleCopy,
         className: `absolute top-2 right-2 px-3 py-1.5 text-xs font-medium rounded transition-all ${theme === "dark" ? "bg-gray-700 hover:bg-gray-600 text-gray-200" : "bg-gray-200 hover:bg-gray-300 text-gray-700"} ${copied ? "opacity-100" : "opacity-0 group-hover:opacity-100"}`,
         "aria-label": "Copy code",
-        children: copied ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "flex items-center gap-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
+        children: copied ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
           "Copied!"
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "flex items-center gap-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" }) }),
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" }) }),
           "Copy"
         ] })
       }
     ),
-    import_react4.default.createElement(import_react_syntax_highlighter.Prism, {
+    import_react6.default.createElement(import_react_syntax_highlighter.Prism, {
       language,
       style: theme === "dark" ? import_prism.vscDarkPlus : import_prism.vs,
       customStyle: {
@@ -723,13 +1224,13 @@ function CodeBlock({ children, className, inline, theme = "dark" }) {
 }
 
 // src/components/MermaidDiagram.tsx
-var import_react5 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_react7 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function MermaidDiagram({ chart, theme = "dark" }) {
-  const containerRef = (0, import_react5.useRef)(null);
-  const [error, setError] = (0, import_react5.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react5.useState)(true);
-  (0, import_react5.useEffect)(() => {
+  const containerRef = (0, import_react7.useRef)(null);
+  const [error, setError] = (0, import_react7.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react7.useState)(true);
+  (0, import_react7.useEffect)(() => {
     let mounted = true;
     const renderDiagram = async () => {
       if (!containerRef.current) return;
@@ -763,18 +1264,18 @@ function MermaidDiagram({ chart, theme = "dark" }) {
     };
   }, [chart, theme]);
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: `my-4 p-4 rounded-lg border ${theme === "dark" ? "bg-red-900/20 border-red-500 text-red-200" : "bg-red-50 border-red-300 text-red-800"}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "font-semibold mb-1", children: "Mermaid Diagram Error" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "text-sm opacity-90", children: error }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("details", { className: "mt-2 text-xs opacity-75", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("summary", { className: "cursor-pointer", children: "View diagram source" }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("pre", { className: "mt-2 whitespace-pre-wrap", children: chart })
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `my-4 p-4 rounded-lg border ${theme === "dark" ? "bg-red-900/20 border-red-500 text-red-200" : "bg-red-50 border-red-300 text-red-800"}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "font-semibold mb-1", children: "Mermaid Diagram Error" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-sm opacity-90", children: error }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("details", { className: "mt-2 text-xs opacity-75", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("summary", { className: "cursor-pointer", children: "View diagram source" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("pre", { className: "mt-2 whitespace-pre-wrap", children: chart })
       ] })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "my-4 flex justify-center", children: [
-    isLoading && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `py-8 text-sm ${theme === "dark" ? "text-gray-400" : "text-gray-600"}`, children: "Rendering diagram..." }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "my-4 flex justify-center", children: [
+    isLoading && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `py-8 text-sm ${theme === "dark" ? "text-gray-400" : "text-gray-600"}`, children: "Rendering diagram..." }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "div",
       {
         ref: containerRef,
@@ -785,7 +1286,7 @@ function MermaidDiagram({ chart, theme = "dark" }) {
 }
 
 // src/components/MessageRenderer.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function MessageRenderer({ content, theme = "dark" }) {
   const components = {
     // Code blocks with syntax highlighting
@@ -796,9 +1297,9 @@ function MessageRenderer({ content, theme = "dark" }) {
       const language = match ? match[1] : "";
       const inline = !className;
       if (language === "mermaid") {
-        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MermaidDiagram, { chart: value, theme });
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MermaidDiagram, { chart: value, theme });
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         CodeBlock,
         {
           className,
@@ -809,13 +1310,13 @@ function MessageRenderer({ content, theme = "dark" }) {
       );
     },
     // Headings with better styling
-    h1: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h1", { className: `text-2xl font-bold mt-6 mb-3 ${theme === "dark" ? "text-gray-100" : "text-gray-900"}`, children }),
-    h2: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h2", { className: `text-xl font-bold mt-5 mb-2.5 ${theme === "dark" ? "text-gray-100" : "text-gray-900"}`, children }),
-    h3: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { className: `text-lg font-semibold mt-4 mb-2 ${theme === "dark" ? "text-gray-200" : "text-gray-800"}`, children }),
+    h1: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h1", { className: `text-2xl font-bold mt-6 mb-3 ${theme === "dark" ? "text-gray-100" : "text-gray-900"}`, children }),
+    h2: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h2", { className: `text-xl font-bold mt-5 mb-2.5 ${theme === "dark" ? "text-gray-100" : "text-gray-900"}`, children }),
+    h3: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { className: `text-lg font-semibold mt-4 mb-2 ${theme === "dark" ? "text-gray-200" : "text-gray-800"}`, children }),
     // Paragraphs
-    p: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: `mb-3 leading-relaxed ${theme === "dark" ? "text-gray-300" : "text-gray-700"}`, children }),
+    p: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: `mb-3 leading-relaxed ${theme === "dark" ? "text-gray-300" : "text-gray-700"}`, children }),
     // Links
-    a: ({ href, children }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    a: ({ href, children }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "a",
       {
         href,
@@ -826,17 +1327,17 @@ function MessageRenderer({ content, theme = "dark" }) {
       }
     ),
     // Lists
-    ul: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ul", { className: `list-disc list-inside mb-3 space-y-1 ${theme === "dark" ? "text-gray-300" : "text-gray-700"}`, children }),
-    ol: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ol", { className: `list-decimal list-inside mb-3 space-y-1 ${theme === "dark" ? "text-gray-300" : "text-gray-700"}`, children }),
+    ul: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ul", { className: `list-disc list-inside mb-3 space-y-1 ${theme === "dark" ? "text-gray-300" : "text-gray-700"}`, children }),
+    ol: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ol", { className: `list-decimal list-inside mb-3 space-y-1 ${theme === "dark" ? "text-gray-300" : "text-gray-700"}`, children }),
     // Blockquotes
-    blockquote: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("blockquote", { className: `border-l-4 pl-4 my-3 italic ${theme === "dark" ? "border-blue-500 bg-blue-900/20 py-2 pr-2" : "border-blue-400 bg-blue-50 py-2 pr-2"}`, children }),
+    blockquote: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("blockquote", { className: `border-l-4 pl-4 my-3 italic ${theme === "dark" ? "border-blue-500 bg-blue-900/20 py-2 pr-2" : "border-blue-400 bg-blue-50 py-2 pr-2"}`, children }),
     // Tables
-    table: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "overflow-x-auto my-4", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("table", { className: `min-w-full border-collapse ${theme === "dark" ? "border-gray-700" : "border-gray-300"}`, children }) }),
-    thead: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("thead", { className: theme === "dark" ? "bg-gray-800" : "bg-gray-100", children }),
-    th: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("th", { className: `px-4 py-2 text-left font-semibold border ${theme === "dark" ? "border-gray-700 text-gray-200" : "border-gray-300 text-gray-800"}`, children }),
-    td: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("td", { className: `px-4 py-2 border ${theme === "dark" ? "border-gray-700 text-gray-300" : "border-gray-300 text-gray-700"}`, children }),
+    table: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "overflow-x-auto my-4", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("table", { className: `min-w-full border-collapse ${theme === "dark" ? "border-gray-700" : "border-gray-300"}`, children }) }),
+    thead: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("thead", { className: theme === "dark" ? "bg-gray-800" : "bg-gray-100", children }),
+    th: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("th", { className: `px-4 py-2 text-left font-semibold border ${theme === "dark" ? "border-gray-700 text-gray-200" : "border-gray-300 text-gray-800"}`, children }),
+    td: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("td", { className: `px-4 py-2 border ${theme === "dark" ? "border-gray-700 text-gray-300" : "border-gray-300 text-gray-700"}`, children }),
     // Horizontal rule
-    hr: () => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("hr", { className: `my-4 border-t ${theme === "dark" ? "border-gray-700" : "border-gray-300"}` }),
+    hr: () => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("hr", { className: `my-4 border-t ${theme === "dark" ? "border-gray-700" : "border-gray-300"}` }),
     // Admonitions support (using containerDirective from remark-directive)
     div: ({ node, className, children, ...props }) => {
       if (className?.includes("admonition")) {
@@ -864,15 +1365,15 @@ function MessageRenderer({ content, theme = "dark" }) {
           }
         };
         const style = styles[type] || styles.info;
-        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `my-4 p-4 border-l-4 rounded-r-lg ${style.border} ${style.bg}`, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-start gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-lg flex-shrink-0", children: style.icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex-1", children })
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `my-4 p-4 border-l-4 rounded-r-lg ${style.border} ${style.bg}`, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-lg flex-shrink-0", children: style.icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex-1", children })
         ] }) });
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className, ...props, children });
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className, ...props, children });
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "markdown-content", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "markdown-content", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     import_react_markdown.default,
     {
       remarkPlugins: [import_remark_gfm.default, import_remark_math.default, import_remark_directive.default],
@@ -884,7 +1385,7 @@ function MessageRenderer({ content, theme = "dark" }) {
 }
 
 // src/hooks/useTTS.ts
-var import_react6 = require("react");
+var import_react8 = require("react");
 var Platform = {
   isNative: typeof window !== "undefined" && "Capacitor" in window,
   isWeb: typeof window !== "undefined" && !("Capacitor" in window)
@@ -899,13 +1400,13 @@ function isNativeTTSSupported() {
   return false;
 }
 function useTTS() {
-  const [isPlaying, setIsPlaying] = (0, import_react6.useState)(false);
-  const [error, setError] = (0, import_react6.useState)(null);
-  const [currentText, setCurrentText] = (0, import_react6.useState)(null);
-  const audioRef = (0, import_react6.useRef)(null);
-  const utteranceRef = (0, import_react6.useRef)(null);
+  const [isPlaying, setIsPlaying] = (0, import_react8.useState)(false);
+  const [error, setError] = (0, import_react8.useState)(null);
+  const [currentText, setCurrentText] = (0, import_react8.useState)(null);
+  const audioRef = (0, import_react8.useRef)(null);
+  const utteranceRef = (0, import_react8.useRef)(null);
   const isNativeSupported = isNativeTTSSupported();
-  const speakNative = (0, import_react6.useCallback)(
+  const speakNative = (0, import_react8.useCallback)(
     async (text, options = {}) => {
       if (Platform.isNative) {
         try {
@@ -950,7 +1451,7 @@ function useTTS() {
     },
     []
   );
-  const speakAPI = (0, import_react6.useCallback)(
+  const speakAPI = (0, import_react8.useCallback)(
     async (text, options = {}) => {
       const apiUrl = process.env.NEXT_PUBLIC_TTS_API_URL || "https://tts.supernal.ai";
       const apiKey = process.env.NEXT_PUBLIC_TTS_API_KEY || "";
@@ -1011,7 +1512,7 @@ function useTTS() {
     },
     []
   );
-  const speak = (0, import_react6.useCallback)(
+  const speak = (0, import_react8.useCallback)(
     async (options) => {
       const {
         text,
@@ -1055,7 +1556,7 @@ function useTTS() {
     },
     [speakNative, speakAPI, isNativeSupported]
   );
-  const stop = (0, import_react6.useCallback)(() => {
+  const stop = (0, import_react8.useCallback)(() => {
     if ("speechSynthesis" in window && window.speechSynthesis.speaking) {
       window.speechSynthesis.cancel();
       utteranceRef.current = null;
@@ -1088,18 +1589,18 @@ function base64ToBlob(base64, mimeType) {
 }
 
 // src/hooks/useSTT.ts
-var import_react7 = require("react");
+var import_react9 = require("react");
 var Platform2 = {
   isNative: typeof window !== "undefined" && "Capacitor" in window,
   isWeb: typeof window !== "undefined" && !("Capacitor" in window)
 };
 function useSTT() {
-  const [isListening, setIsListening] = (0, import_react7.useState)(false);
-  const [transcript, setTranscript] = (0, import_react7.useState)("");
-  const [interimTranscript, setInterimTranscript] = (0, import_react7.useState)("");
-  const [error, setError] = (0, import_react7.useState)(null);
-  const recognitionRef = (0, import_react7.useRef)(null);
-  const isSupported = (0, import_react7.useMemo)(() => {
+  const [isListening, setIsListening] = (0, import_react9.useState)(false);
+  const [transcript, setTranscript] = (0, import_react9.useState)("");
+  const [interimTranscript, setInterimTranscript] = (0, import_react9.useState)("");
+  const [error, setError] = (0, import_react9.useState)(null);
+  const recognitionRef = (0, import_react9.useRef)(null);
+  const isSupported = (0, import_react9.useMemo)(() => {
     if (Platform2.isNative) {
       return true;
     }
@@ -1108,7 +1609,7 @@ function useSTT() {
     }
     return false;
   }, []);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!isSupported || Platform2.isNative) return;
     const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
     if (!SpeechRecognition) return;
@@ -1146,7 +1647,7 @@ function useSTT() {
       }
     };
   }, [isSupported]);
-  const startListening = (0, import_react7.useCallback)(async () => {
+  const startListening = (0, import_react9.useCallback)(async () => {
     setError(null);
     setTranscript("");
     setInterimTranscript("");
@@ -1178,7 +1679,7 @@ function useSTT() {
       setIsListening(false);
     }
   }, []);
-  const stopListening = (0, import_react7.useCallback)(() => {
+  const stopListening = (0, import_react9.useCallback)(() => {
     if (Platform2.isNative) {
       setIsListening(false);
       return;
@@ -1187,7 +1688,7 @@ function useSTT() {
       recognitionRef.current.stop();
     }
   }, []);
-  const resetTranscript = (0, import_react7.useCallback)(() => {
+  const resetTranscript = (0, import_react9.useCallback)(() => {
     setTranscript("");
     setInterimTranscript("");
     setError(null);
@@ -1205,7 +1706,7 @@ function useSTT() {
 }
 
 // src/components/TTSButton.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function TTSButton({
   text,
   usePremiumVoices = false,
@@ -1233,7 +1734,7 @@ function TTSButton({
   const isDark = theme === "dark";
   const iconSize = size === "small" ? "w-3 h-3" : "w-4 h-4";
   const buttonPadding = size === "small" ? "p-1" : "p-2";
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "button",
     {
       onClick: handleClick,
@@ -1243,23 +1744,23 @@ function TTSButton({
       "aria-label": isPlaying ? "Stop speaking" : "Read aloud",
       children: isPlaying ? (
         // Stop icon (pulsing square)
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { className: iconSize, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { className: iconSize, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }) })
       ) : error ? (
         // Error icon
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { className: iconSize, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { className: iconSize, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) })
       ) : (
         // Speaker icon
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { className: iconSize, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15.414a2 2 0 002.828 0l1.768-1.768a2 2 0 00 0-2.828l-1.768-1.768a2 2 0 00-2.828 0V15.414z" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { className: iconSize, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15.414a2 2 0 002.828 0l1.768-1.768a2 2 0 00 0-2.828l-1.768-1.768a2 2 0 00-2.828 0V15.414z" }) })
       )
     }
   );
 }
 
 // src/components/SubtitleOverlay.tsx
-var import_react8 = require("react");
+var import_react10 = require("react");
 
 // src/components/TTSPlaylistMenu.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var TTSPlaylistMenu = ({
   isOpen,
   onClose,
@@ -1280,7 +1781,7 @@ var TTSPlaylistMenu = ({
     border: "1px solid rgba(0, 0, 0, 0.1)",
     boxShadow: "0 8px 32px rgba(0, 0, 0, 0.2)"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "div",
     {
       className: "fixed z-50",
@@ -1291,7 +1792,7 @@ var TTSPlaylistMenu = ({
         width: "min(90vw, 400px)"
       },
       "data-testid": "tts-playlist-menu",
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
         "div",
         {
           style: {
@@ -1301,38 +1802,38 @@ var TTSPlaylistMenu = ({
             borderRadius: "16px"
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
               "div",
               {
                 className: `p-4 border-b flex items-center justify-between ${theme === "dark" ? "border-white/10" : "border-black/10"}`,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     "h3",
                     {
                       className: `font-semibold text-sm ${theme === "dark" ? "text-white" : "text-gray-900"}`,
                       children: "Readable Sections"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     "button",
                     {
                       onClick: onClose,
                       className: `p-1.5 rounded-lg transition-all ${theme === "dark" ? "text-gray-400 hover:text-white hover:bg-white/10" : "text-gray-600 hover:text-gray-900 hover:bg-black/5"}`,
                       title: "Close",
                       "data-testid": "close-playlist-menu",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-lg font-bold", "aria-hidden": "true", children: "\xD7" })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-lg font-bold", "aria-hidden": "true", children: "\xD7" })
                     }
                   )
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "overflow-y-auto max-h-80 p-2", children: widgets.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "overflow-y-auto max-h-80 p-2", children: widgets.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               "div",
               {
                 className: `p-6 text-center text-sm ${theme === "dark" ? "text-gray-400" : "text-gray-600"}`,
                 children: "No readable sections found on this page"
               }
-            ) : widgets.map((widget) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            ) : widgets.map((widget) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               "button",
               {
                 onClick: () => handleWidgetClick(widget),
@@ -1342,12 +1843,12 @@ var TTSPlaylistMenu = ({
                   WebkitBackdropFilter: "blur(8px)"
                 },
                 "data-testid": "playlist-widget-item",
-                children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                   "div",
                   {
                     className: `font-medium text-sm flex items-center ${theme === "dark" ? "text-white" : "text-gray-900"}`,
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "mr-2", "aria-hidden": "true", children: "\u{1F50A}" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "mr-2", "aria-hidden": "true", children: "\u{1F50A}" }),
                       widget.label || `TTS Widget ${widget.id}`
                     ]
                   }
@@ -1570,7 +2071,7 @@ function extractTTSWidgets() {
 }
 
 // src/components/SubtitleOverlay.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var opacityStates = {
   mobile: {
     idle: 1,
@@ -1614,47 +2115,47 @@ var SubtitleOverlay = ({
   resetTranscript,
   onSwitchToFullMode
 }) => {
-  const [overlayState, setOverlayState] = (0, import_react8.useState)("idle");
-  const [opacity, setOpacity] = (0, import_react8.useState)(1);
-  const [lastInputMethod, setLastInputMethod] = (0, import_react8.useState)(null);
-  const [isMobile, setIsMobile] = (0, import_react8.useState)(false);
-  const [messageOpacity, setMessageOpacity] = (0, import_react8.useState)(1);
-  const [expansionState, setExpansionState] = (0, import_react8.useState)(() => {
+  const [overlayState, setOverlayState] = (0, import_react10.useState)("idle");
+  const [opacity, setOpacity] = (0, import_react10.useState)(1);
+  const [lastInputMethod, setLastInputMethod] = (0, import_react10.useState)(null);
+  const [isMobile, setIsMobile] = (0, import_react10.useState)(false);
+  const [messageOpacity, setMessageOpacity] = (0, import_react10.useState)(1);
+  const [expansionState, setExpansionState] = (0, import_react10.useState)(() => {
     if (typeof window !== "undefined") {
       const saved = localStorage.getItem("subtitle-overlay-expanded");
       return saved === "true" ? "expanded" : "collapsed";
     }
     return "collapsed";
   });
-  const [touchStartY, setTouchStartY] = (0, import_react8.useState)(null);
-  const lastInputTimeRef = (0, import_react8.useRef)(Date.now());
-  const autoFadeTimerRef = (0, import_react8.useRef)(null);
-  const messageFadeTimerRef = (0, import_react8.useRef)(null);
-  const inputRef = (0, import_react8.useRef)(null);
-  const [suggestions, setSuggestions] = (0, import_react8.useState)([]);
-  const [currentSuggestionIndex, setCurrentSuggestionIndex] = (0, import_react8.useState)(0);
-  const [glassTheme, setGlassTheme] = (0, import_react8.useState)("auto");
-  const [detectedGlassTheme, setDetectedGlassTheme] = (0, import_react8.useState)("light");
-  const [hasTTSWidgets, setHasTTSWidgets] = (0, import_react8.useState)(false);
-  const [showPlaylist, setShowPlaylist] = (0, import_react8.useState)(false);
-  const [ttsWidgets, setTTSWidgets] = (0, import_react8.useState)([]);
-  const [touchStartYInput, setTouchStartYInput] = (0, import_react8.useState)(null);
-  const [completedActions, setCompletedActions] = (0, import_react8.useState)([]);
-  const [showCompletedActions, setShowCompletedActions] = (0, import_react8.useState)(false);
-  const [shouldShowAiResponse, setShouldShowAiResponse] = (0, import_react8.useState)(false);
-  const [latestActionOpacity, setLatestActionOpacity] = (0, import_react8.useState)(0);
-  const latestActionFadeRef = (0, import_react8.useRef)(null);
-  const lastUserMessageRef = (0, import_react8.useRef)("");
-  const lastShownAiMessageRef = (0, import_react8.useRef)("");
-  const justExpandedViaSlashRef = (0, import_react8.useRef)(false);
-  const [isDragging, setIsDragging] = (0, import_react8.useState)(false);
-  const [position, setPosition] = (0, import_react8.useState)({ x: 0, y: 0 });
-  const [dragStart, setDragStart] = (0, import_react8.useState)({ x: 0, y: 0 });
-  const dragRef = (0, import_react8.useRef)(null);
-  const dragDistanceRef = (0, import_react8.useRef)(0);
-  const lastEscapeTimeRef = (0, import_react8.useRef)(0);
+  const [touchStartY, setTouchStartY] = (0, import_react10.useState)(null);
+  const lastInputTimeRef = (0, import_react10.useRef)(Date.now());
+  const autoFadeTimerRef = (0, import_react10.useRef)(null);
+  const messageFadeTimerRef = (0, import_react10.useRef)(null);
+  const inputRef = (0, import_react10.useRef)(null);
+  const [suggestions, setSuggestions] = (0, import_react10.useState)([]);
+  const [currentSuggestionIndex, setCurrentSuggestionIndex] = (0, import_react10.useState)(0);
+  const [glassTheme, setGlassTheme] = (0, import_react10.useState)("auto");
+  const [detectedGlassTheme, setDetectedGlassTheme] = (0, import_react10.useState)("light");
+  const [hasTTSWidgets, setHasTTSWidgets] = (0, import_react10.useState)(false);
+  const [showPlaylist, setShowPlaylist] = (0, import_react10.useState)(false);
+  const [ttsWidgets, setTTSWidgets] = (0, import_react10.useState)([]);
+  const [touchStartYInput, setTouchStartYInput] = (0, import_react10.useState)(null);
+  const [completedActions, setCompletedActions] = (0, import_react10.useState)([]);
+  const [showCompletedActions, setShowCompletedActions] = (0, import_react10.useState)(false);
+  const [shouldShowAiResponse, setShouldShowAiResponse] = (0, import_react10.useState)(false);
+  const [latestActionOpacity, setLatestActionOpacity] = (0, import_react10.useState)(0);
+  const latestActionFadeRef = (0, import_react10.useRef)(null);
+  const lastUserMessageRef = (0, import_react10.useRef)("");
+  const lastShownAiMessageRef = (0, import_react10.useRef)("");
+  const justExpandedViaSlashRef = (0, import_react10.useRef)(false);
+  const [isDragging, setIsDragging] = (0, import_react10.useState)(false);
+  const [position, setPosition] = (0, import_react10.useState)({ x: 0, y: 0 });
+  const [dragStart, setDragStart] = (0, import_react10.useState)({ x: 0, y: 0 });
+  const dragRef = (0, import_react10.useRef)(null);
+  const dragDistanceRef = (0, import_react10.useRef)(0);
+  const lastEscapeTimeRef = (0, import_react10.useRef)(0);
   const DOUBLE_ESCAPE_THRESHOLD_MS = 500;
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const checkMobile = () => {
       const mobile = window.innerWidth < 768;
       setIsMobile(mobile);
@@ -1663,7 +2164,7 @@ var SubtitleOverlay = ({
     window.addEventListener("resize", checkMobile);
     return () => window.removeEventListener("resize", checkMobile);
   }, []);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (autoFadeTimerRef.current) {
       clearTimeout(autoFadeTimerRef.current);
       autoFadeTimerRef.current = null;
@@ -1679,7 +2180,7 @@ var SubtitleOverlay = ({
       }
     };
   }, [overlayState, isMobile]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (messageFadeTimerRef.current) {
       clearTimeout(messageFadeTimerRef.current);
       messageFadeTimerRef.current = null;
@@ -1715,7 +2216,7 @@ var SubtitleOverlay = ({
       }
     };
   }, [messages.filter((m) => m.type === "ai").slice(-1)[0]?.text, shouldShowAiResponse]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (sttTranscript && voiceEnabled && resetTranscript) {
       onSendMessage(sttTranscript);
       resetTranscript();
@@ -1732,11 +2233,11 @@ var SubtitleOverlay = ({
       triggerActionFade();
     }
   }, [sttTranscript, voiceEnabled, resetTranscript, onSendMessage]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const pageSuggestions = extractPageSuggestions();
     setSuggestions(pageSuggestions);
   }, []);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const detectWidgets = async () => {
       const detected = await detectTTSWidgets();
       setHasTTSWidgets(detected);
@@ -1771,7 +2272,7 @@ var SubtitleOverlay = ({
       window.removeEventListener("supernal-tts-ready", handleReady);
     };
   }, []);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (glassTheme !== "auto") return;
     const { glassTheme: detected } = detectBackgroundContext();
     setDetectedGlassTheme(detected);
@@ -1787,7 +2288,7 @@ var SubtitleOverlay = ({
     window.addEventListener("scroll", handleScroll);
     return () => window.removeEventListener("scroll", handleScroll);
   }, [glassTheme]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const handleGlobalKeyDown = (e) => {
       if (e.key === "Escape") {
         const now = Date.now();
@@ -1834,12 +2335,12 @@ var SubtitleOverlay = ({
     window.addEventListener("keydown", handleGlobalKeyDown);
     return () => window.removeEventListener("keydown", handleGlobalKeyDown);
   }, [expansionState, onSwitchToFullMode, voiceEnabled, onMicClick]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (typeof window !== "undefined") {
       localStorage.setItem("subtitle-overlay-expanded", expansionState === "expanded" ? "true" : "false");
     }
   }, [expansionState]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (expansionState === "expanded" && inputRef.current) {
       setTimeout(() => {
         inputRef.current?.focus();
@@ -1853,7 +2354,7 @@ var SubtitleOverlay = ({
       }, 100);
     }
   }, [expansionState]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (isMobile) return;
     const handleMouseMove = (e) => {
       if (!isDragging) return;
@@ -1877,7 +2378,7 @@ var SubtitleOverlay = ({
       window.removeEventListener("mouseup", handleMouseUp);
     };
   }, [isDragging, dragStart, isMobile]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const timeSinceLastInput = Date.now() - lastInputTimeRef.current;
     const context = {
       isListening,
@@ -2037,8 +2538,8 @@ var SubtitleOverlay = ({
     return "Tap to start voice input";
   };
   if (expansionState === "collapsed") {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-      hasTTSWidgets && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+      hasTTSWidgets && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "button",
         {
           type: "button",
@@ -2057,10 +2558,10 @@ var SubtitleOverlay = ({
           title: ttsWidgets.length === 1 ? "Go to readable section" : "View readable sections",
           "data-testid": "tts-playlist-button",
           "aria-label": ttsWidgets.length === 1 ? "Go to readable section" : "View readable sections",
-          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xl font-bold select-none", "aria-hidden": "true", children: "~+" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-xl font-bold select-none", "aria-hidden": "true", children: "~+" })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         TTSPlaylistMenu,
         {
           isOpen: showPlaylist,
@@ -2070,7 +2571,7 @@ var SubtitleOverlay = ({
           onWidgetSelect: handleWidgetSelect
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "div",
         {
           className: "fixed",
@@ -2080,7 +2581,7 @@ var SubtitleOverlay = ({
             zIndex: 55
           },
           "data-testid": "subtitle-overlay-collapsed",
-          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             "button",
             {
               type: "button",
@@ -2096,14 +2597,14 @@ var SubtitleOverlay = ({
               title: getIconTitle(),
               "data-testid": "voice-input-button",
               "aria-label": getIconTitle(),
-              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xl font-bold select-none", "aria-hidden": "true", children: getIcon() })
+              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-xl font-bold select-none", "aria-hidden": "true", children: getIcon() })
             }
           )
         }
       )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     "div",
     {
       ref: dragRef,
@@ -2129,7 +2630,7 @@ var SubtitleOverlay = ({
       role: "complementary",
       "aria-label": "Chat overlay",
       children: [
-        !isMobile && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        !isMobile && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "div",
           {
             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",
@@ -2143,7 +2644,7 @@ var SubtitleOverlay = ({
             "data-testid": "subtitle-overlay-drag-handle"
           }
         ),
-        showCompletedActions && completedActions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        showCompletedActions && completedActions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
           "div",
           {
             className: `mb-2 px-4 py-3 text-xs rounded-2xl animate-popup-in ${theme === "dark" ? "text-white" : "text-gray-900"}`,
@@ -2156,9 +2657,9 @@ var SubtitleOverlay = ({
             "aria-label": "Completed actions",
             "data-testid": "completed-actions-list",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "font-medium opacity-70 mb-2 flex items-center justify-between", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Completed Actions" }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "font-medium opacity-70 mb-2 flex items-center justify-between", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: "Completed Actions" }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   "button",
                   {
                     onClick: () => setShowCompletedActions(false),
@@ -2168,14 +2669,14 @@ var SubtitleOverlay = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "space-y-1", children: completedActions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "text-xs opacity-80 border-l-2 border-green-500 pl-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "font-medium", children: action.tool }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "opacity-70", children: action.description })
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "space-y-1", children: completedActions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "text-xs opacity-80 border-l-2 border-green-500 pl-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "font-medium", children: action.tool }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "opacity-70", children: action.description })
               ] }, action.id)) })
             ]
           }
         ),
-        !showCompletedActions && (latestActionOpacity > 0 || lastAiMessage && messageOpacity > 0) && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        !showCompletedActions && (latestActionOpacity > 0 || lastAiMessage && messageOpacity > 0) && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
           "div",
           {
             className: `mb-2 px-4 py-2 text-xs rounded-2xl ${theme === "dark" ? "text-white" : "text-gray-900"}`,
@@ -2191,27 +2692,27 @@ var SubtitleOverlay = ({
             children: [
               latestActionOpacity > 0 && completedActions.length > 0 && (() => {
                 const latest = completedActions[completedActions.length - 1];
-                return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                   "div",
                   {
                     className: "border-l-2 border-green-500 pl-2 mb-1",
                     style: { opacity: latestActionOpacity, transition: "opacity 0.6s ease-out" },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "font-medium", children: latest.tool }),
-                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "opacity-70 ml-1", children: latest.description })
+                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "font-medium", children: latest.tool }),
+                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "opacity-70 ml-1", children: latest.description })
                     ]
                   }
                 );
               })(),
-              lastAiMessage && messageOpacity > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { opacity: messageOpacity, transition: "opacity 0.8s ease-out" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "font-medium opacity-70", children: "AI:" }),
+              lastAiMessage && messageOpacity > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { opacity: messageOpacity, transition: "opacity 0.8s ease-out" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "font-medium opacity-70", children: "AI:" }),
                 " ",
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-sm", children: lastAiMessage.text })
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-sm", children: lastAiMessage.text })
               ] })
             ]
           }
         ),
-        completedActions.length > 0 && !showCompletedActions && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex justify-center mb-1", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        completedActions.length > 0 && !showCompletedActions && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex justify-center mb-1", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "button",
           {
             type: "button",
@@ -2227,11 +2728,11 @@ var SubtitleOverlay = ({
             title: `${completedActions.length} previous actions`,
             "data-testid": "completed-actions-toggle",
             "aria-label": `Show ${completedActions.length} completed actions`,
-            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { width: "16", height: "8", viewBox: "0 0 16 8", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M2 6L8 2L14 6" }) })
+            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { width: "16", height: "8", viewBox: "0 0 16 8", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M2 6L8 2L14 6" }) })
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center space-x-2", children: [
-          hasTTSWidgets && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center space-x-2", children: [
+          hasTTSWidgets && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             "button",
             {
               type: "button",
@@ -2246,10 +2747,10 @@ var SubtitleOverlay = ({
               title: ttsWidgets.length === 1 ? "Go to readable section" : "View readable sections",
               "data-testid": "tts-playlist-button-expanded",
               "aria-label": ttsWidgets.length === 1 ? "Go to readable section" : "View readable sections",
-              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-lg font-bold select-none", "aria-hidden": "true", children: "~+" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-lg font-bold select-none", "aria-hidden": "true", children: "~+" })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
             "div",
             {
               className: "flex-1 flex items-center space-x-2 px-4 py-2 rounded-3xl",
@@ -2258,7 +2759,7 @@ var SubtitleOverlay = ({
                 border: effectiveGlassTheme === "dark" ? "1px solid rgba(255, 255, 255, 0.12)" : "1px solid rgba(0, 0, 0, 0.1)"
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   "input",
                   {
                     ref: inputRef,
@@ -2278,7 +2779,7 @@ var SubtitleOverlay = ({
                     "aria-label": "Chat message input"
                   }
                 ),
-                isListening && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex space-x-1 items-center", "aria-hidden": "true", "data-testid": "subtitle-overlay-waveform", children: [...Array(5)].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                isListening && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex space-x-1 items-center", "aria-hidden": "true", "data-testid": "subtitle-overlay-waveform", children: [...Array(5)].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   "div",
                   {
                     className: "w-0.5 bg-red-500 rounded-full animate-pulse",
@@ -2289,7 +2790,7 @@ var SubtitleOverlay = ({
                   },
                   i
                 )) }),
-                inputValue.trim() && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                inputValue.trim() && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   "button",
                   {
                     type: "button",
@@ -2305,10 +2806,10 @@ var SubtitleOverlay = ({
                     title: "Send message",
                     "data-testid": "send-button",
                     "aria-label": "Send message",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-base select-none", "aria-hidden": "true", children: "\u2192" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-base select-none", "aria-hidden": "true", children: "\u2192" })
                   }
                 ),
-                voiceEnabled && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                voiceEnabled && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   "button",
                   {
                     type: "button",
@@ -2328,10 +2829,10 @@ var SubtitleOverlay = ({
                     title: getIconTitle(),
                     "data-testid": "voice-input-button",
                     "aria-label": getIconTitle(),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-lg font-bold select-none", "aria-hidden": "true", children: getIcon() })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-lg font-bold select-none", "aria-hidden": "true", children: getIcon() })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   "button",
                   {
                     type: "button",
@@ -2346,7 +2847,7 @@ var SubtitleOverlay = ({
                     title: "Collapse",
                     "data-testid": "collapse-button",
                     "aria-label": "Collapse overlay",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-lg font-bold select-none", "aria-hidden": "true", children: "\xD7" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-lg font-bold select-none", "aria-hidden": "true", children: "\xD7" })
                   }
                 )
               ]
@@ -2359,25 +2860,25 @@ var SubtitleOverlay = ({
 };
 
 // src/components/SlashCommand/useSlashCommand.ts
-var import_react9 = require("react");
-var import_browser2 = require("@supernal/interface/browser");
+var import_react11 = require("react");
+var import_browser3 = require("@supernal/interface/browser");
 function useSlashCommand(inputValue, onSelect) {
-  const [selectedIndex, setSelectedIndex] = (0, import_react9.useState)(0);
-  const prevOpenRef = (0, import_react9.useRef)(false);
+  const [selectedIndex, setSelectedIndex] = (0, import_react11.useState)(0);
+  const prevOpenRef = (0, import_react11.useRef)(false);
   const isOpen = inputValue.startsWith("/");
   const query = isOpen ? inputValue.slice(1) : "";
-  (0, import_react9.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (isOpen && !prevOpenRef.current) {
       setSelectedIndex(0);
     }
     prevOpenRef.current = isOpen;
   }, [isOpen]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     setSelectedIndex(0);
   }, [query]);
-  const filteredTools = (0, import_react9.useMemo)(() => {
+  const filteredTools = (0, import_react11.useMemo)(() => {
     if (!isOpen) return [];
-    const locationTools = import_browser2.ToolRegistry.getToolsByLocation();
+    const locationTools = import_browser3.ToolRegistry.getToolsByLocation();
     const aiTools = locationTools.filter((t) => t.aiEnabled);
     if (!query) return aiTools;
     const q = query.toLowerCase();
@@ -2392,13 +2893,13 @@ function useSlashCommand(inputValue, onSelect) {
       return fields.some((f) => f.includes(q));
     });
   }, [isOpen, query]);
-  const close = (0, import_react9.useCallback)(() => {
+  const close = (0, import_react11.useCallback)(() => {
   }, []);
-  const selectTool = (0, import_react9.useCallback)((tool) => {
+  const selectTool = (0, import_react11.useCallback)((tool) => {
     const command = tool.examples?.[0] || tool.name?.toLowerCase() || tool.toolId;
     onSelect(command);
   }, [onSelect]);
-  const onKeyDown = (0, import_react9.useCallback)((e) => {
+  const onKeyDown = (0, import_react11.useCallback)((e) => {
     if (!isOpen || filteredTools.length === 0) return;
     if (e.key === "ArrowDown") {
       e.preventDefault();
@@ -2428,8 +2929,8 @@ function useSlashCommand(inputValue, onSelect) {
 }
 
 // src/components/SlashCommand/SlashCommandPopup.tsx
-var import_react10 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var MAX_VISIBLE_ITEMS = 8;
 var SlashCommandPopup = ({
   tools,
@@ -2437,12 +2938,12 @@ var SlashCommandPopup = ({
   onSelect,
   onClose
 }) => {
-  const listRef = (0, import_react10.useRef)(null);
-  const selectedRef = (0, import_react10.useRef)(null);
-  (0, import_react10.useEffect)(() => {
+  const listRef = (0, import_react12.useRef)(null);
+  const selectedRef = (0, import_react12.useRef)(null);
+  (0, import_react12.useEffect)(() => {
     selectedRef.current?.scrollIntoView({ block: "nearest" });
   }, [selectedIndex]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     const handleClickOutside = (e) => {
       if (listRef.current && !listRef.current.contains(e.target)) {
         onClose();
@@ -2454,7 +2955,7 @@ var SlashCommandPopup = ({
   if (tools.length === 0) return null;
   const itemHeight = 52;
   const maxHeight = MAX_VISIBLE_ITEMS * itemHeight;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "div",
     {
       ref: listRef,
@@ -2472,7 +2973,7 @@ var SlashCommandPopup = ({
       },
       "data-slash-command-popup": true,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: {
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: {
           padding: "8px 12px 4px",
           color: "rgba(255,255,255,0.45)",
           fontSize: 11,
@@ -2485,7 +2986,7 @@ var SlashCommandPopup = ({
         ] }),
         tools.map((tool, index) => {
           const isSelected = index === selectedIndex;
-          return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
             "button",
             {
               ref: isSelected ? selectedRef : void 0,
@@ -2512,14 +3013,14 @@ var SlashCommandPopup = ({
                 }
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { fontSize: 13, fontWeight: 500 }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { style: { color: "rgba(147, 197, 253, 0.9)" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { fontSize: 13, fontWeight: 500 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { style: { color: "rgba(147, 197, 253, 0.9)" }, children: [
                     "/",
                     tool.toolId
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { style: { color: "rgba(255,255,255,0.7)", fontWeight: 400, marginLeft: 8 }, children: tool.name })
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { color: "rgba(255,255,255,0.7)", fontWeight: 400, marginLeft: 8 }, children: tool.name })
                 ] }),
-                tool.description && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: {
+                tool.description && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: {
                   fontSize: 11,
                   color: "rgba(255,255,255,0.4)",
                   marginTop: 2,
@@ -2533,19 +3034,19 @@ var SlashCommandPopup = ({
             tool.toolId
           );
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: {
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("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__ */ (0, import_jsx_runtime11.jsx)("kbd", { style: { padding: "1px 3px", borderRadius: 3, border: "1px solid rgba(255,255,255,0.15)", fontSize: 9 }, children: "\u2191\u2193" }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("kbd", { style: { padding: "1px 3px", borderRadius: 3, border: "1px solid rgba(255,255,255,0.15)", fontSize: 9 }, children: "\u2191\u2193" }),
           " navigate",
           " ",
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("kbd", { style: { padding: "1px 3px", borderRadius: 3, border: "1px solid rgba(255,255,255,0.15)", fontSize: 9 }, children: "Enter" }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("kbd", { style: { padding: "1px 3px", borderRadius: 3, border: "1px solid rgba(255,255,255,0.15)", fontSize: 9 }, children: "Enter" }),
           " select",
           " ",
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("kbd", { style: { padding: "1px 3px", borderRadius: 3, border: "1px solid rgba(255,255,255,0.15)", fontSize: 9 }, children: "Esc" }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("kbd", { style: { padding: "1px 3px", borderRadius: 3, border: "1px solid rgba(255,255,255,0.15)", fontSize: 9 }, children: "Esc" }),
           " dismiss"
         ] })
       ]
@@ -2554,7 +3055,7 @@ var SlashCommandPopup = ({
 };
 
 // src/components/ChatBubble/ChatBubble.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var ChatBubble = ({
   messages,
   onSendMessage,
@@ -2569,65 +3070,69 @@ var ChatBubble = ({
 }) => {
   const mergedConfig = { ...DEFAULT_CONFIG, ...userConfig };
   if (userConfig?.logo && !userConfig?.avatar) {
-    mergedConfig.avatar = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("img", { src: userConfig.logo, alt: "Supernal", className: "w-6 h-6" });
+    mergedConfig.avatar = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("img", { src: userConfig.logo, alt: "Supernal", className: "w-6 h-6" });
   }
   const config = mergedConfig;
-  const [isExpanded, setIsExpanded] = (0, import_react11.useState)(defaultExpanded);
-  const [isMinimized, setIsMinimized] = (0, import_react11.useState)(false);
-  const [inputValue, setInputValue] = (0, import_react11.useState)("");
-  const [lastReadMessageCount, setLastReadMessageCount] = (0, import_react11.useState)(0);
-  const [showWelcome, setShowWelcome] = (0, import_react11.useState)(
+  const [isExpanded, setIsExpanded] = (0, import_react13.useState)(defaultExpanded);
+  const [isMinimized, setIsMinimized] = (0, import_react13.useState)(false);
+  const [inputValue, setInputValue] = (0, import_react13.useState)("");
+  const [lastReadMessageCount, setLastReadMessageCount] = (0, import_react13.useState)(0);
+  const [showWelcome, setShowWelcome] = (0, import_react13.useState)(
     config.welcome?.enabled && messages.length === 0
   );
-  const [isDragging, setIsDragging] = (0, import_react11.useState)(false);
-  const [dragInitiated, setDragInitiated] = (0, import_react11.useState)(false);
-  const [isDocked, setIsDocked] = (0, import_react11.useState)(true);
-  const [dockPosition, setDockPosition] = (0, import_react11.useState)(position);
-  const [panelPosition, setPanelPosition] = (0, import_react11.useState)({ x: 0, y: 0 });
-  const [theme, setTheme] = (0, import_react11.useState)("light");
-  const [showMoreMenu, setShowMoreMenu] = (0, import_react11.useState)(false);
-  const [, setTimestampTick] = (0, import_react11.useState)(0);
-  const [localGlassMode, setLocalGlassMode] = (0, import_react11.useState)(config.glassMode ?? true);
-  const [glassOpacity, setGlassOpacity] = (0, import_react11.useState)("medium");
-  const [notifications, setNotifications] = (0, import_react11.useState)(true);
-  const [voiceEnabled, setVoiceEnabled] = (0, import_react11.useState)(true);
-  const [usePremiumVoices, setUsePremiumVoices] = (0, import_react11.useState)(false);
-  const [autoReadResponses, setAutoReadResponses] = (0, import_react11.useState)(false);
-  const [ttsSpeed, setTtsSpeed] = (0, import_react11.useState)(1);
-  const [sttAutoRecordTimeout, setSttAutoRecordTimeout] = (0, import_react11.useState)(5e3);
-  const [sttAutoExecute, setSttAutoExecute] = (0, import_react11.useState)(true);
-  const sttAutoRecordTimeoutRef = (0, import_react11.useRef)(null);
+  const [isDragging, setIsDragging] = (0, import_react13.useState)(false);
+  const [dragInitiated, setDragInitiated] = (0, import_react13.useState)(false);
+  const [isDocked, setIsDocked] = (0, import_react13.useState)(true);
+  const [dockPosition, setDockPosition] = (0, import_react13.useState)(position);
+  const [panelPosition, setPanelPosition] = (0, import_react13.useState)({ x: 0, y: 0 });
+  const [theme, setTheme] = (0, import_react13.useState)("light");
+  const [showMoreMenu, setShowMoreMenu] = (0, import_react13.useState)(false);
+  const [, setTimestampTick] = (0, import_react13.useState)(0);
+  const [localGlassMode, setLocalGlassMode] = (0, import_react13.useState)(config.glassMode ?? true);
+  const [glassOpacity, setGlassOpacity] = (0, import_react13.useState)("medium");
+  const [notifications, setNotifications] = (0, import_react13.useState)(true);
+  const [voiceEnabled, setVoiceEnabled] = (0, import_react13.useState)(true);
+  const [usePremiumVoices, setUsePremiumVoices] = (0, import_react13.useState)(false);
+  const [autoReadResponses, setAutoReadResponses] = (0, import_react13.useState)(false);
+  const [ttsSpeed, setTtsSpeed] = (0, import_react13.useState)(1);
+  const [sttAutoRecordTimeout, setSttAutoRecordTimeout] = (0, import_react13.useState)(5e3);
+  const [sttAutoExecute, setSttAutoExecute] = (0, import_react13.useState)(true);
+  const sttAutoRecordTimeoutRef = (0, import_react13.useRef)(null);
   const { speak: speakTTS, stop: stopTTS, isPlaying: isTTSPlaying } = useTTS();
   const { startListening, stopListening, transcript: sttTranscript, isListening, resetTranscript } = useSTT();
+  const apiKey = useApiKeyOptional();
+  const [showApiKeyInput, setShowApiKeyInput] = (0, import_react13.useState)(false);
+  const [apiKeyInputValue, setApiKeyInputValue] = (0, import_react13.useState)("");
+  const [showApiKey, setShowApiKey] = (0, import_react13.useState)(false);
   const slashCommand = useSlashCommand(inputValue, (command) => {
     setInputValue(command);
     setTimeout(() => inputRef.current?.focus(), 0);
   });
-  const [displayMode, setDisplayMode] = (0, import_react11.useState)(propDisplayMode);
-  const [drawerSide, setDrawerSide] = (0, import_react11.useState)(propDrawerSide);
-  const displayModeLoadedFromStorage = (0, import_react11.useRef)(false);
-  (0, import_react11.useEffect)(() => {
+  const [displayMode, setDisplayMode] = (0, import_react13.useState)(propDisplayMode);
+  const [drawerSide, setDrawerSide] = (0, import_react13.useState)(propDrawerSide);
+  const displayModeLoadedFromStorage = (0, import_react13.useRef)(false);
+  (0, import_react13.useEffect)(() => {
     if (!displayModeLoadedFromStorage.current) {
       setDisplayMode(propDisplayMode);
     }
   }, [propDisplayMode]);
-  const [drawerOpen, setDrawerOpen] = (0, import_react11.useState)(false);
-  const [touchStart, setTouchStart] = (0, import_react11.useState)(null);
-  const [swipeProgress, setSwipeProgress] = (0, import_react11.useState)(0);
-  const [isMobile, setIsMobile] = (0, import_react11.useState)(false);
-  const lastEscapeTimeRef = (0, import_react11.useRef)(0);
+  const [drawerOpen, setDrawerOpen] = (0, import_react13.useState)(false);
+  const [touchStart, setTouchStart] = (0, import_react13.useState)(null);
+  const [swipeProgress, setSwipeProgress] = (0, import_react13.useState)(0);
+  const [isMobile, setIsMobile] = (0, import_react13.useState)(false);
+  const lastEscapeTimeRef = (0, import_react13.useRef)(0);
   const DOUBLE_ESCAPE_THRESHOLD_MS = 500;
-  const [isMac, setIsMac] = (0, import_react11.useState)(false);
-  const [currentHintIndex, setCurrentHintIndex] = (0, import_react11.useState)(0);
-  const [isHydrated, setIsHydrated] = (0, import_react11.useState)(false);
-  (0, import_react11.useEffect)(() => {
+  const [isMac, setIsMac] = (0, import_react13.useState)(false);
+  const [currentHintIndex, setCurrentHintIndex] = (0, import_react13.useState)(0);
+  const [isHydrated, setIsHydrated] = (0, import_react13.useState)(false);
+  (0, import_react13.useEffect)(() => {
     if (typeof window !== "undefined") {
       const platform = window.navigator.platform.toLowerCase();
       const isMacPlatform = platform.includes("mac");
       setIsMac(isMacPlatform);
     }
   }, []);
-  const inputHints = (0, import_react11.useMemo)(() => {
+  const inputHints = (0, import_react13.useMemo)(() => {
     const modKey = isMac ? "Cmd" : "Ctrl";
     return [
       `Press ${modKey}+/ to start voice recording`,
@@ -2636,14 +3141,14 @@ var ChatBubble = ({
       sttAutoExecute ? `Voice commands execute automatically` : "Voice commands fill this input"
     ];
   }, [isMac, sttAutoExecute]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     setCurrentHintIndex((prev) => (prev + 1) % inputHints.length);
   }, [messages.length, inputHints.length]);
-  const messagesEndRef = (0, import_react11.useRef)(null);
-  const inputRef = (0, import_react11.useRef)(null);
-  const panelRef = (0, import_react11.useRef)(null);
-  const dragRef = (0, import_react11.useRef)(null);
-  const rafRef = (0, import_react11.useRef)(null);
+  const messagesEndRef = (0, import_react13.useRef)(null);
+  const inputRef = (0, import_react13.useRef)(null);
+  const panelRef = (0, import_react13.useRef)(null);
+  const dragRef = (0, import_react13.useRef)(null);
+  const rafRef = (0, import_react13.useRef)(null);
   const formatRelativeTime = (timestamp) => {
     const now = /* @__PURE__ */ new Date();
     const messageTime = new Date(timestamp);
@@ -2658,7 +3163,7 @@ var ChatBubble = ({
     if (diffDays < 7) return `${diffDays} ${diffDays === 1 ? "day" : "days"} ago`;
     return messageTime.toLocaleDateString();
   };
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (variant === "floating" && panelPosition.x === 0 && panelPosition.y === 0) {
       try {
         const stored = localStorage.getItem(storageKey);
@@ -2680,7 +3185,7 @@ var ChatBubble = ({
       }
     }
   }, [variant, storageKey, panelPosition.x, panelPosition.y]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (variant === "full" || variant === "drawer" || variant === "subtitle") {
       try {
         const stored = localStorage.getItem(storageKey);
@@ -2758,12 +3263,12 @@ var ChatBubble = ({
     }
     setIsHydrated(true);
   }, [storageKey, variant, defaultExpanded, position]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (variant !== "full" && variant !== "drawer" && variant !== "subtitle") {
       setIsHydrated(true);
     }
   }, [variant]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (!isExpanded || isDocked || !panelRef.current) return;
     const checkBounds = () => {
       const rect = panelRef.current?.getBoundingClientRect();
@@ -2780,7 +3285,7 @@ var ChatBubble = ({
     const timeoutId = setTimeout(checkBounds, 100);
     return () => clearTimeout(timeoutId);
   }, [isExpanded, isDocked]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     const isSubtitleMode = displayMode === "subtitle" || displayMode === "auto" && variant === "subtitle";
     if (isSubtitleMode) return;
     const handleKeyDown = (e) => {
@@ -2813,13 +3318,13 @@ var ChatBubble = ({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [isExpanded, isDocked, position, variant, displayMode, isMobile]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (typeof window !== "undefined") {
       const isDark = document.documentElement.getAttribute("data-theme") === "dark";
       setTheme(isDark ? "dark" : "light");
     }
   }, []);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (typeof window === "undefined") return;
     const mediaQuery = window.matchMedia("(max-width: 767px)");
     const handleChange = (e) => {
@@ -2829,26 +3334,26 @@ var ChatBubble = ({
     mediaQuery.addEventListener("change", handleChange);
     return () => mediaQuery.removeEventListener("change", handleChange);
   }, []);
-  const currentVariant = import_react11.default.useMemo(() => {
+  const currentVariant = import_react13.default.useMemo(() => {
     if (displayMode !== "auto") {
       return displayMode;
     }
     return isMobile && variant === "full" ? "subtitle" : variant;
   }, [displayMode, isMobile, variant]);
-  const prevVariantRef = import_react11.default.useRef(variant);
-  (0, import_react11.useEffect)(() => {
+  const prevVariantRef = import_react13.default.useRef(variant);
+  (0, import_react13.useEffect)(() => {
     if (prevVariantRef.current !== variant && displayMode !== "auto") {
       setDisplayMode("auto");
       prevVariantRef.current = variant;
     }
   }, [variant, displayMode]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     const interval = setInterval(() => {
       setTimestampTick((tick) => tick + 1);
     }, 6e4);
     return () => clearInterval(interval);
   }, []);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (variant === "full" || variant === "drawer" || variant === "subtitle") {
       try {
         localStorage.setItem(
@@ -2880,7 +3385,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();
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     registerInput((text, submit = false) => {
       setInputValue(text);
       if (!isExpanded && variant === "full") {
@@ -2897,7 +3402,7 @@ var ChatBubble = ({
   }, [registerInput, onSendMessage]);
   const unreadCount = Math.max(0, messages.length - lastReadMessageCount);
   const hasUnread = unreadCount > 0 && !isExpanded && variant === "full";
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (isExpanded || variant === "floating") {
       messagesEndRef.current?.scrollIntoView({ behavior: "auto" });
       setLastReadMessageCount(messages.length);
@@ -2909,12 +3414,12 @@ var ChatBubble = ({
       }
     }
   }, [messages, isExpanded, variant]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (isExpanded && variant === "full") {
       inputRef.current?.focus();
     }
   }, [isExpanded, variant]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (!voiceEnabled || !autoReadResponses || messages.length === 0) return;
     const lastMessage = messages[messages.length - 1];
     if (lastMessage.type === "ai") {
@@ -2926,7 +3431,7 @@ var ChatBubble = ({
       });
     }
   }, [messages, voiceEnabled, autoReadResponses, ttsSpeed, usePremiumVoices, speakTTS]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (currentVariant === "subtitle") return;
     if (sttTranscript && voiceEnabled) {
       setInputValue(sttTranscript);
@@ -2941,7 +3446,7 @@ var ChatBubble = ({
       }
     }
   }, [sttTranscript, voiceEnabled, resetTranscript, sttAutoExecute, onSendMessage, currentVariant]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (currentVariant === "subtitle") return;
     const handleKeyDown = (e) => {
       if ((e.metaKey || e.ctrlKey) && e.key === "/" && voiceEnabled) {
@@ -2999,7 +3504,7 @@ var ChatBubble = ({
       }
     };
   }, [currentVariant, isExpanded, showMoreMenu, voiceEnabled, isListening, startListening, stopListening, sttAutoRecordTimeout]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (currentVariant !== "drawer") return;
     const handleKeyDown = (e) => {
       if (e.key === "Escape" && drawerOpen) {
@@ -3009,7 +3514,7 @@ var ChatBubble = ({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [currentVariant, drawerOpen]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (!showMoreMenu) return;
     const handleClickOutside = (e) => {
       const target = e.target;
@@ -3020,7 +3525,7 @@ var ChatBubble = ({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [showMoreMenu]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (typeof window === "undefined" || currentVariant !== "drawer") return;
     const EDGE_ZONE_PX = 20;
     const SWIPE_THRESHOLD = 0.4;
@@ -3105,7 +3610,7 @@ var ChatBubble = ({
       };
     }
   };
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (!dragInitiated || !dragRef.current) return;
     const dragThresholdPx = 5;
     const handleMouseMove = (e) => {
@@ -3268,7 +3773,7 @@ var ChatBubble = ({
     return null;
   }
   if (currentVariant === "subtitle") {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       SubtitleOverlay,
       {
         messages,
@@ -3300,8 +3805,8 @@ var ChatBubble = ({
   }
   if (currentVariant === "drawer") {
     const drawerWidth = "100vw";
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-      (drawerOpen || swipeProgress > 0) && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+      (drawerOpen || swipeProgress > 0) && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         "div",
         {
           className: "fixed inset-0 bg-black z-[49998] transition-opacity duration-300",
@@ -3313,7 +3818,7 @@ var ChatBubble = ({
           onClick: () => setDrawerOpen(false)
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
         "div",
         {
           className: `fixed ${drawerSide === "right" ? "right-0" : "left-0"} top-0 h-full z-[49999] flex flex-col ${glassClasses} shadow-2xl`,
@@ -3332,31 +3837,31 @@ var ChatBubble = ({
           onTouchMove: handleDrawerTouchMove,
           onTouchEnd: handleDrawerTouchEnd,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `${THEME_CLASSES.bg.header} ${glassMode ? THEME_CLASSES.bg.headerGradient : THEME_CLASSES.bg.headerLight}`, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center space-x-3", children: [
-                config.avatar && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "relative flex-shrink-0", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Avatar, { avatar: config.avatar }),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white" })
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `${THEME_CLASSES.bg.header} ${glassMode ? THEME_CLASSES.bg.headerGradient : THEME_CLASSES.bg.headerLight}`, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center space-x-3", children: [
+                config.avatar && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "relative flex-shrink-0", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Avatar, { avatar: config.avatar }),
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white" })
                 ] }),
-                config.title && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { className: THEME_CLASSES.text.title, children: config.title }) })
+                config.title && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h3", { className: THEME_CLASSES.text.title, children: config.title }) })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { onClick: () => setDrawerOpen(false), className: THEME_CLASSES.button.close, title: "Close drawer", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { onClick: () => setDrawerOpen(false), className: THEME_CLASSES.button.close, title: "Close drawer", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex-1 overflow-y-auto p-4 space-y-2", children: [
-              showWelcome && messages.length === 0 && config.welcome?.enabled && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: THEME_CLASSES.welcome.container, children: [
-                config.welcome.title && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h4", { className: THEME_CLASSES.welcome.title, style: INLINE_STYLES.welcomeTitle(theme === "dark"), children: config.welcome.title }),
-                config.welcome.content && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: THEME_CLASSES.welcome.content, style: INLINE_STYLES.welcomeContent(theme === "dark"), children: config.welcome.content })
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex-1 overflow-y-auto p-4 space-y-2", "data-testid": "chat-messages", children: [
+              showWelcome && messages.length === 0 && config.welcome?.enabled && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: THEME_CLASSES.welcome.container, children: [
+                config.welcome.title && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h4", { className: THEME_CLASSES.welcome.title, style: INLINE_STYLES.welcomeTitle(theme === "dark"), children: config.welcome.title }),
+                config.welcome.content && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: THEME_CLASSES.welcome.content, style: INLINE_STYLES.welcomeContent(theme === "dark"), children: config.welcome.content })
               ] }),
-              messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `group flex items-center gap-1 mb-2 ${message.type === "user" ? "flex-row-reverse" : "flex-row"}`, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `group flex items-center gap-1 mb-2 ${message.type === "user" ? "flex-row-reverse" : "flex-row"}`, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   "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__ */ (0, import_jsx_runtime12.jsx)(MessageRenderer, { content: message.text, theme })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MessageRenderer, { content: message.text, theme })
                   }
                 ),
-                message.type === "ai" && voiceEnabled && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                message.type === "ai" && voiceEnabled && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   TTSButton,
                   {
                     text: message.text,
@@ -3366,7 +3871,7 @@ var ChatBubble = ({
                     size: "small"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   "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"}`,
@@ -3375,10 +3880,10 @@ var ChatBubble = ({
                   }
                 )
               ] }, message.id)),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ref: messagesEndRef })
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ref: messagesEndRef })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { position: "relative" }, children: [
-              slashCommand.isOpen && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { position: "relative" }, children: [
+              slashCommand.isOpen && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 SlashCommandPopup,
                 {
                   tools: slashCommand.filteredTools,
@@ -3387,7 +3892,7 @@ var ChatBubble = ({
                   onClose: () => setInputValue("")
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 InputField,
                 {
                   inputValue,
@@ -3409,20 +3914,20 @@ var ChatBubble = ({
           ]
         }
       ),
-      !drawerOpen && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      !drawerOpen && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         "div",
         {
           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__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime12.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime12.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime13.jsx)("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__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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 (currentVariant === "floating") {
     const recentMessage = messages[messages.length - 1];
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "div",
       {
         className: `fixed z-[999999] ${isDragging ? "cursor-grabbing" : "cursor-grab"}`,
@@ -3435,32 +3940,32 @@ var ChatBubble = ({
           ...!isDragging && { transition: "transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)" }
         },
         onMouseDown: handlePanelMouseDown,
-        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `${glassClasses} rounded-2xl shadow-2xl p-3 max-w-xs ${!glassMode && "border-gray-200 border"}`, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center space-x-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Avatar, { avatar: config.avatar, size: "small" }),
-              config.title && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: THEME_CLASSES.text.floatingTitle, children: config.title })
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `${glassClasses} rounded-2xl shadow-2xl p-3 max-w-xs ${!glassMode && "border-gray-200 border"}`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center space-x-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Avatar, { avatar: config.avatar, size: "small" }),
+              config.title && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: THEME_CLASSES.text.floatingTitle, children: config.title })
             ] }),
-            onClearChat && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            onClearChat && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               "button",
               {
                 onClick: onClearChat,
                 className: THEME_CLASSES.button.floatingClear,
                 title: "Clear chat",
                 "data-testid": ChatNames.clearButton,
-                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
               }
             )
           ] }),
-          recentMessage && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `mb-2 group flex items-center gap-2 ${recentMessage.type === "user" ? "flex-row-reverse" : "flex-row"}`, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          recentMessage && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `mb-2 group flex items-center gap-2 ${recentMessage.type === "user" ? "flex-row-reverse" : "flex-row"}`, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               "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__ */ (0, import_jsx_runtime12.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               "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"}`,
@@ -3469,8 +3974,8 @@ var ChatBubble = ({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { position: "relative" }, children: [
-            slashCommand.isOpen && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { position: "relative" }, children: [
+            slashCommand.isOpen && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               SlashCommandPopup,
               {
                 tools: slashCommand.filteredTools,
@@ -3479,7 +3984,7 @@ var ChatBubble = ({
                 onClose: () => setInputValue("")
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               InputField,
               {
                 compact: true,
@@ -3499,7 +4004,7 @@ var ChatBubble = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "div",
     {
       className: "fixed",
@@ -3517,7 +4022,7 @@ var ChatBubble = ({
         }
       },
       children: [
-        isExpanded && isMinimized && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        isExpanded && isMinimized && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
           "div",
           {
             ref: panelRef,
@@ -3535,7 +4040,7 @@ var ChatBubble = ({
               ...isDragging && { cursor: "grabbing" }
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                 "div",
                 {
                   "data-drag-handle": true,
@@ -3551,15 +4056,15 @@ var ChatBubble = ({
                     }
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center space-x-3", children: [
-                      config.avatar && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "relative flex-shrink-0", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Avatar, { avatar: config.avatar }),
-                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white" })
+                    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center space-x-3", children: [
+                      config.avatar && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "relative flex-shrink-0", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Avatar, { avatar: config.avatar }),
+                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white" })
                       ] }),
-                      config.title && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { className: THEME_CLASSES.text.title, children: config.title }) })
+                      config.title && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h3", { className: THEME_CLASSES.text.title, children: config.title }) })
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center space-x-1 flex-shrink-0", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center space-x-1 flex-shrink-0", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                         "button",
                         {
                           onClick: (e) => {
@@ -3568,10 +4073,10 @@ var ChatBubble = ({
                           },
                           className: THEME_CLASSES.button.minimize,
                           title: "Minimize chat",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                         "button",
                         {
                           onClick: (e) => {
@@ -3580,20 +4085,20 @@ var ChatBubble = ({
                           },
                           className: THEME_CLASSES.button.close,
                           title: "Close chat",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
                         }
                       )
                     ] })
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "p-4", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "p-4", children: [
                 (() => {
                   const lastAiMessage = [...messages].reverse().find((m) => m.type === "ai");
-                  return lastAiMessage ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime12.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: THEME_CLASSES.text.minimizedMessage, style: INLINE_STYLES.minimizedMessage(theme === "dark"), children: "No AI responses yet" }) });
+                  return lastAiMessage ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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__ */ (0, import_jsx_runtime13.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: THEME_CLASSES.text.minimizedMessage, style: INLINE_STYLES.minimizedMessage(theme === "dark"), children: "No AI responses yet" }) });
                 })(),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { position: "relative" }, children: [
-                  slashCommand.isOpen && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { position: "relative" }, children: [
+                  slashCommand.isOpen && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                     SlashCommandPopup,
                     {
                       tools: slashCommand.filteredTools,
@@ -3602,7 +4107,7 @@ var ChatBubble = ({
                       onClose: () => setInputValue("")
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                     InputField,
                     {
                       compact: true,
@@ -3622,7 +4127,7 @@ var ChatBubble = ({
             ]
           }
         ),
-        isExpanded && !isMinimized && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        isExpanded && !isMinimized && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
           "div",
           {
             ref: panelRef,
@@ -3640,22 +4145,22 @@ var ChatBubble = ({
               ...isDragging && { cursor: "grabbing" }
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                 "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__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center space-x-3", children: [
-                      config.avatar && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "relative flex-shrink-0", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Avatar, { avatar: config.avatar }),
-                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white" })
+                    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center space-x-3", children: [
+                      config.avatar && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "relative flex-shrink-0", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Avatar, { avatar: config.avatar }),
+                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white" })
                       ] }),
-                      config.title && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { className: THEME_CLASSES.text.title, children: config.title }) })
+                      config.title && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h3", { className: THEME_CLASSES.text.title, children: config.title }) })
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center space-x-1 flex-shrink-0 relative", "data-more-menu": true, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center space-x-1 flex-shrink-0 relative", "data-more-menu": true, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                         "a",
                         {
                           href: "https://www.interface.supernal.ai",
@@ -3663,30 +4168,160 @@ 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__ */ (0, import_jsx_runtime12.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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__ */ (0, import_jsx_runtime12.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                         "button",
                         {
                           onClick: () => setShowMoreMenu(!showMoreMenu),
                           className: THEME_CLASSES.button.more,
                           title: "More options",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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" }) })
+                          "data-testid": "chat-more-menu-button",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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__ */ (0, import_jsx_runtime12.jsxs)("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__ */ (0, import_jsx_runtime12.jsx)("div", { className: "px-3 py-2 border-b border-gray-200 dark:border-gray-600 mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "grid grid-cols-4 gap-1", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                      showMoreMenu && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("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-[280px] z-50", "data-more-menu": true, "data-testid": "chat-more-menu", children: [
+                        apiKey && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "px-3 py-2 border-b border-gray-200 dark:border-gray-600 mb-2", "data-testid": "api-key-section", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-200 flex items-center gap-2", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" }) }),
+                              "API Key"
+                            ] }),
+                            apiKey.status === "valid" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-green-500", title: "API key is valid", "data-testid": "api-key-status", "data-status": "valid", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", clipRule: "evenodd" }) }) }),
+                            apiKey.status === "invalid" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-red-500", title: "API key is invalid", "data-testid": "api-key-status", "data-status": "invalid", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", clipRule: "evenodd" }) }) }),
+                            apiKey.status === "validating" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-blue-500 animate-spin", title: "Validating...", "data-testid": "api-key-status", "data-status": "validating", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) }) })
+                          ] }),
+                          apiKey.status === "valid" && apiKey.maskedKey ? (
+                            // Key is set - show masked key and clear button
+                            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-2", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("code", { className: "flex-1 text-xs bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-gray-600 dark:text-gray-300 font-mono", "data-testid": "api-key-masked", children: apiKey.maskedKey }),
+                              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                                "button",
+                                {
+                                  onClick: () => {
+                                    apiKey.clearApiKey();
+                                    setApiKeyInputValue("");
+                                  },
+                                  className: "text-xs text-red-500 hover:text-red-600 px-2 py-1",
+                                  title: "Remove API key",
+                                  "data-testid": "api-key-clear-button",
+                                  children: "Clear"
+                                }
+                              )
+                            ] })
+                          ) : showApiKeyInput ? (
+                            // Input mode - show form
+                            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "space-y-2", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex gap-1", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                                  "input",
+                                  {
+                                    type: showApiKey ? "text" : "password",
+                                    value: apiKeyInputValue,
+                                    onChange: (e) => setApiKeyInputValue(e.target.value),
+                                    placeholder: "sk-ant-...",
+                                    className: "flex-1 text-sm px-2 py-1.5 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-1 focus:ring-blue-500",
+                                    "data-testid": "api-key-input",
+                                    onKeyDown: (e) => {
+                                      if (e.key === "Enter") {
+                                        e.preventDefault();
+                                        if (apiKeyInputValue.trim()) {
+                                          apiKey.setApiKey(apiKeyInputValue.trim()).then((success) => {
+                                            if (success) {
+                                              setApiKeyInputValue("");
+                                              setShowApiKeyInput(false);
+                                            }
+                                          });
+                                        }
+                                      }
+                                      if (e.key === "Escape") {
+                                        setShowApiKeyInput(false);
+                                        setApiKeyInputValue("");
+                                      }
+                                    },
+                                    autoFocus: true
+                                  }
+                                ),
+                                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                                  "button",
+                                  {
+                                    onClick: () => setShowApiKey(!showApiKey),
+                                    className: "px-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200",
+                                    title: showApiKey ? "Hide" : "Show",
+                                    "data-testid": "api-key-show-toggle",
+                                    children: showApiKey ? "\u{1F648}" : "\u{1F441}\uFE0F"
+                                  }
+                                )
+                              ] }),
+                              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex gap-2", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                                  "button",
+                                  {
+                                    onClick: async () => {
+                                      if (apiKeyInputValue.trim()) {
+                                        const success = await apiKey.setApiKey(apiKeyInputValue.trim());
+                                        if (success) {
+                                          setApiKeyInputValue("");
+                                          setShowApiKeyInput(false);
+                                        }
+                                      }
+                                    },
+                                    disabled: !apiKeyInputValue.trim() || apiKey.status === "validating",
+                                    className: "flex-1 text-xs px-3 py-1.5 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed",
+                                    "data-testid": "api-key-submit-button",
+                                    children: apiKey.status === "validating" ? "Validating..." : "Save"
+                                  }
+                                ),
+                                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                                  "button",
+                                  {
+                                    onClick: () => {
+                                      setShowApiKeyInput(false);
+                                      setApiKeyInputValue("");
+                                    },
+                                    className: "text-xs px-3 py-1.5 text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-100",
+                                    "data-testid": "api-key-cancel-button",
+                                    children: "Cancel"
+                                  }
+                                )
+                              ] }),
+                              apiKey.error && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-xs text-red-500", "data-testid": "api-key-error", children: apiKey.error }),
+                              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                                "a",
+                                {
+                                  href: "https://console.anthropic.com/settings/keys",
+                                  target: "_blank",
+                                  rel: "noopener noreferrer",
+                                  className: "block text-xs text-blue-500 hover:underline",
+                                  children: "Get an API key from Anthropic \u2192"
+                                }
+                              )
+                            ] })
+                          ) : (
+                            // No key - show configure button
+                            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                              "button",
+                              {
+                                onClick: () => setShowApiKeyInput(true),
+                                className: "w-full text-sm px-3 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors",
+                                "data-testid": "api-key-configure-button",
+                                children: "Configure API Key"
+                              }
+                            )
+                          )
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "px-3 py-2 border-b border-gray-200 dark:border-gray-600 mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "grid grid-cols-4 gap-1", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                             "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__ */ (0, import_jsx_runtime12.jsx)("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("rect", { x: "8", y: "8", width: "8", height: "8", rx: "1" }) })
+                              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("rect", { x: "8", y: "8", width: "8", height: "8", rx: "1" }) })
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                             "button",
                             {
                               onClick: () => {
@@ -3695,10 +4330,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__ */ (0, import_jsx_runtime12.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("rect", { x: "9", y: "9", width: "6", height: "6", rx: "1", strokeWidth: "2" }) })
+                              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("rect", { x: "9", y: "9", width: "6", height: "6", rx: "1", strokeWidth: "2" }) })
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                             "button",
                             {
                               onClick: () => {
@@ -3707,13 +4342,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__ */ (0, import_jsx_runtime12.jsxs)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("rect", { x: "8", y: "8", width: "8", height: "8", rx: "1", strokeWidth: "2" }),
-                                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("rect", { x: "10", y: "10", width: "4", height: "4", rx: "0.5", strokeWidth: "1.5" })
+                              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("rect", { x: "8", y: "8", width: "8", height: "8", rx: "1", strokeWidth: "2" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("rect", { x: "10", y: "10", width: "4", height: "4", rx: "0.5", strokeWidth: "1.5" })
                               ] })
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                             "button",
                             {
                               onClick: () => {
@@ -3722,15 +4357,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__ */ (0, import_jsx_runtime12.jsxs)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("rect", { x: "7", y: "7", width: "10", height: "10", rx: "1", strokeWidth: "2" }),
-                                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("rect", { x: "9", y: "9", width: "6", height: "6", rx: "0.5", strokeWidth: "1.5" }),
-                                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("rect", { x: "11", y: "11", width: "2", height: "2", rx: "0.5", strokeWidth: "1" })
+                              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("rect", { x: "7", y: "7", width: "10", height: "10", rx: "1", strokeWidth: "2" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("rect", { x: "9", y: "9", width: "6", height: "6", rx: "0.5", strokeWidth: "1.5" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("rect", { x: "11", y: "11", width: "2", height: "2", rx: "0.5", strokeWidth: "1" })
                               ] })
                             }
                           )
                         ] }) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                           "button",
                           {
                             onClick: () => {
@@ -3742,15 +4377,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__ */ (0, import_jsx_runtime12.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime12.jsxs)("span", { children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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__ */ (0, import_jsx_runtime13.jsxs)("span", { children: [
                                 theme === "light" ? "Dark" : "Light",
                                 " Mode"
                               ] })
                             ]
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                           "button",
                           {
                             onClick: () => {
@@ -3761,15 +4396,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__ */ (0, import_jsx_runtime12.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime12.jsxs)("span", { children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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__ */ (0, import_jsx_runtime13.jsxs)("span", { children: [
                                 voiceEnabled ? "Disable" : "Enable",
                                 " Voice"
                               ] })
                             ]
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                           "button",
                           {
                             onClick: () => {
@@ -3778,12 +4413,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__ */ (0, import_jsx_runtime12.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime12.jsx)("span", { children: "Reset position" })
+                              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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__ */ (0, import_jsx_runtime13.jsx)("span", { children: "Reset position" })
                             ]
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                           "button",
                           {
                             onClick: () => {
@@ -3799,12 +4434,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__ */ (0, import_jsx_runtime12.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime12.jsx)("span", { children: "How to use" })
+                              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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__ */ (0, import_jsx_runtime13.jsx)("span", { children: "How to use" })
                             ]
                           }
                         ),
-                        onClearChat && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                        onClearChat && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                           "button",
                           {
                             onClick: () => {
@@ -3813,41 +4448,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__ */ (0, import_jsx_runtime12.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime12.jsx)("span", { children: "Clear chat" })
+                              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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__ */ (0, import_jsx_runtime13.jsx)("span", { children: "Clear chat" })
                             ]
                           }
                         )
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                         "button",
                         {
                           onClick: () => setIsMinimized(true),
                           className: THEME_CLASSES.button.minimize,
                           title: "Minimize",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20 12H4" }) })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20 12H4" }) })
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                         "button",
                         {
                           onClick: handleToggle,
                           className: THEME_CLASSES.button.close,
                           title: "Close",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
                         }
                       )
                     ] })
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex-1 overflow-y-auto p-4 space-y-2", children: [
-                showWelcome && messages.length === 0 && config.welcome?.enabled && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: THEME_CLASSES.welcome.container, children: [
-                  config.welcome.title && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h4", { className: THEME_CLASSES.welcome.title, style: INLINE_STYLES.welcomeTitle(theme === "dark"), children: config.welcome.title }),
-                  config.welcome.content && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime12.jsxs)("div", { className: THEME_CLASSES.welcome.commandsContainer, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: THEME_CLASSES.welcome.commandsHeader, children: "Try these commands:" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "space-y-1", children: config.welcome.suggestedCommands.map((cmd, idx) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex-1 overflow-y-auto p-4 space-y-2", "data-testid": "chat-messages", children: [
+                showWelcome && messages.length === 0 && config.welcome?.enabled && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: THEME_CLASSES.welcome.container, children: [
+                  config.welcome.title && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h4", { className: THEME_CLASSES.welcome.title, style: INLINE_STYLES.welcomeTitle(theme === "dark"), children: config.welcome.title }),
+                  config.welcome.content && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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__ */ (0, import_jsx_runtime13.jsxs)("div", { className: THEME_CLASSES.welcome.commandsContainer, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: THEME_CLASSES.welcome.commandsHeader, children: "Try these commands:" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "space-y-1", children: config.welcome.suggestedCommands.map((cmd, idx) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                       "button",
                       {
                         onClick: () => {
@@ -3857,29 +4492,29 @@ var ChatBubble = ({
                         },
                         className: THEME_CLASSES.welcome.commandButton,
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: THEME_CLASSES.welcome.commandText, style: INLINE_STYLES.commandText(theme === "dark"), children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: THEME_CLASSES.welcome.commandText, style: INLINE_STYLES.commandText(theme === "dark"), children: [
                             '"',
                             cmd.text,
                             '"'
                           ] }),
-                          cmd.desc && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: THEME_CLASSES.welcome.commandDesc, style: INLINE_STYLES.commandDesc(theme === "dark"), children: cmd.desc })
+                          cmd.desc && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: THEME_CLASSES.welcome.commandDesc, style: INLINE_STYLES.commandDesc(theme === "dark"), children: cmd.desc })
                         ]
                       },
                       idx
                     )) })
                   ] })
                 ] }),
-                messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `group flex items-center gap-2 mb-2 ${message.type === "user" ? "flex-row-reverse" : "flex-row"}`, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `group flex items-center gap-2 mb-2 ${message.type === "user" ? "flex-row-reverse" : "flex-row"}`, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                     "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__ */ (0, import_jsx_runtime12.jsx)(MessageRenderer, { content: message.text, theme })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MessageRenderer, { content: message.text, theme })
                     }
                   ),
-                  message.type === "ai" && voiceEnabled && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  message.type === "ai" && voiceEnabled && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                     TTSButton,
                     {
                       text: message.text,
@@ -3889,7 +4524,7 @@ var ChatBubble = ({
                       size: "small"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                     "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"}`,
@@ -3898,10 +4533,10 @@ var ChatBubble = ({
                     }
                   )
                 ] }, message.id)),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ref: messagesEndRef })
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ref: messagesEndRef })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { position: "relative" }, children: [
-                slashCommand.isOpen && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { position: "relative" }, children: [
+                slashCommand.isOpen && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   SlashCommandPopup,
                   {
                     tools: slashCommand.filteredTools,
@@ -3910,7 +4545,7 @@ var ChatBubble = ({
                     onClose: () => setInputValue("")
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   InputField,
                   {
                     inputValue,
@@ -3932,7 +4567,7 @@ var ChatBubble = ({
             ]
           }
         ),
-        !isExpanded && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        !isExpanded && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
           "button",
           {
             onClick: handleToggle,
@@ -3940,8 +4575,8 @@ var ChatBubble = ({
             "data-testid": ChatNames.bubble,
             title: `Open chat (press ${isMac ? "Cmd" : "Ctrl"}+/ for voice recording)`,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("img", { src: config.logo, alt: "Supernal", className: "w-8 h-8" }),
-              hasUnread && notifications && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-xs text-white font-bold", children: unreadCount > 9 ? "9+" : unreadCount }) })
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("img", { src: config.logo, alt: "Supernal", className: "w-8 h-8" }),
+              hasUnread && notifications && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-xs text-white font-bold", children: unreadCount > 9 ? "9+" : unreadCount }) })
             ]
           }
         )
@@ -3951,31 +4586,31 @@ var ChatBubble = ({
 };
 
 // src/components/AutoNavigationContext.tsx
-var import_react13 = require("react");
+var import_react15 = require("react");
 
 // src/hooks/useNavigationGraph.tsx
-var import_react12 = require("react");
-var import_browser3 = require("@supernal/interface/browser");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var NavigationContextContext = (0, import_react12.createContext)("global");
+var import_react14 = require("react");
+var import_browser4 = require("@supernal/interface/browser");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var NavigationContextContext = (0, import_react14.createContext)("global");
 function NavigationContextProvider({
   value,
   children
 }) {
   const graph = useNavigationGraph();
-  (0, import_react12.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     graph.setCurrentContext(value);
   }, [value, graph]);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(NavigationContextContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(NavigationContextContext.Provider, { value, children });
 }
 function useNavigationGraph() {
-  return import_browser3.NavigationGraph.getInstance();
+  return import_browser4.NavigationGraph.getInstance();
 }
 function useCurrentContext() {
-  const contextFromProvider = (0, import_react12.useContext)(NavigationContextContext);
+  const contextFromProvider = (0, import_react14.useContext)(NavigationContextContext);
   const graph = useNavigationGraph();
-  const [graphContext, setGraphContext] = (0, import_react12.useState)("");
-  (0, import_react12.useEffect)(() => {
+  const [graphContext, setGraphContext] = (0, import_react14.useState)("");
+  (0, import_react14.useEffect)(() => {
     const interval = setInterval(() => {
       const current = graph.getCurrentContext?.() || "";
       if (current !== graphContext) {
@@ -3989,7 +4624,7 @@ function useCurrentContext() {
 function useRegisterTool(toolId, contextId, metadata) {
   const graph = useNavigationGraph();
   const currentContext = useCurrentContext();
-  (0, import_react12.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     let targetContext = contextId || currentContext;
     if (!contextId && metadata) {
       const detection = graph.detectToolContext?.(toolId, metadata);
@@ -4003,10 +4638,10 @@ function useRegisterTool(toolId, contextId, metadata) {
 function useNavigationPath(targetContextOrToolId, isToolId = false) {
   const graph = useNavigationGraph();
   const currentContext = useCurrentContext();
-  const [path, setPath] = (0, import_react12.useState)(null);
-  const [loading, setLoading] = (0, import_react12.useState)(true);
-  const [error, setError] = (0, import_react12.useState)();
-  (0, import_react12.useEffect)(() => {
+  const [path, setPath] = (0, import_react14.useState)(null);
+  const [loading, setLoading] = (0, import_react14.useState)(true);
+  const [error, setError] = (0, import_react14.useState)();
+  (0, import_react14.useEffect)(() => {
     try {
       let targetContext = targetContextOrToolId;
       if (isToolId) {
@@ -4034,9 +4669,9 @@ function useNavigationPath(targetContextOrToolId, isToolId = false) {
 function useNavigate() {
   const graph = useNavigationGraph();
   const currentContext = useCurrentContext();
-  const [navigating, setNavigating] = (0, import_react12.useState)(false);
-  const [error, setError] = (0, import_react12.useState)();
-  const navigateTo = (0, import_react12.useCallback)(async (targetContextOrToolId, isToolId = false, executeNavigation) => {
+  const [navigating, setNavigating] = (0, import_react14.useState)(false);
+  const [error, setError] = (0, import_react14.useState)();
+  const navigateTo = (0, import_react14.useCallback)(async (targetContextOrToolId, isToolId = false, executeNavigation) => {
     setNavigating(true);
     setError(void 0);
     try {
@@ -4078,8 +4713,8 @@ function useNavigate() {
 }
 function useAllContexts() {
   const graph = useNavigationGraph();
-  const [contexts, setContexts] = (0, import_react12.useState)(graph.getAllContexts?.());
-  (0, import_react12.useEffect)(() => {
+  const [contexts, setContexts] = (0, import_react14.useState)(graph.getAllContexts?.());
+  (0, import_react14.useEffect)(() => {
     const interval = setInterval(() => {
       setContexts(graph.getAllContexts?.());
     }, 1e3);
@@ -4089,28 +4724,28 @@ function useAllContexts() {
 }
 
 // src/components/AutoNavigationContext.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function AutoNavigationContext({
   children,
   routes,
   onNavigate
 }) {
-  const [pathname, setPathname] = (0, import_react13.useState)("/");
-  (0, import_react13.useEffect)(() => {
+  const [pathname, setPathname] = (0, import_react15.useState)("/");
+  (0, import_react15.useEffect)(() => {
     if (typeof window !== "undefined") {
       setPathname(window.location.pathname);
     }
   }, []);
   const context = routes ? inferContextFromPath(pathname, routes) : null;
-  (0, import_react13.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (onNavigate && context) {
       onNavigate(context);
     }
   }, [context, onNavigate]);
   if (!context) {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children });
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(NavigationContextProvider, { value: context, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(NavigationContextProvider, { value: context, children });
 }
 function inferContextFromPath(path, customRoutes) {
   if (customRoutes) {
@@ -4140,11 +4775,11 @@ function inferContextFromPath(path, customRoutes) {
 }
 
 // src/components/SupernalProvider.tsx
-var import_browser6 = require("@supernal/interface/browser");
+var import_browser7 = require("@supernal/interface/browser");
 
 // src/hooks/useLocationTracking.ts
-var import_react14 = require("react");
-var import_browser4 = require("@supernal/interface/browser");
+var import_react16 = require("react");
+var import_browser5 = require("@supernal/interface/browser");
 var usePathname;
 var useSearchParams;
 try {
@@ -4175,8 +4810,8 @@ function getCurrentLocation() {
   };
 }
 function useLocationTracking() {
-  const lastLocationRef = (0, import_react14.useRef)("");
-  const lastElementsRef = (0, import_react14.useRef)([]);
+  const lastLocationRef = (0, import_react16.useRef)("");
+  const lastElementsRef = (0, import_react16.useRef)([]);
   let pathname = null;
   let searchParams = null;
   try {
@@ -4188,14 +4823,14 @@ function useLocationTracking() {
     }
   } catch {
   }
-  (0, import_react14.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     const updateLocation = () => {
       const location = pathname !== null ? { pathname, search: searchParams?.toString() || "", asPath: pathname + (searchParams?.toString() ? `?${searchParams.toString()}` : "") } : getCurrentLocation();
       const visibleElements = getVisibleElements();
       const locationChanged = lastLocationRef.current !== location.pathname;
       const elementsChanged = !arraysEqual(lastElementsRef.current, visibleElements);
       if (locationChanged || elementsChanged) {
-        import_browser4.LocationContext.setCurrent({
+        import_browser5.LocationContext.setCurrent({
           page: location.pathname,
           route: location.pathname,
           elements: visibleElements,
@@ -4229,7 +4864,7 @@ function useLocationTracking() {
 }
 
 // src/hooks/useNavigationGraphSetup.ts
-var import_react15 = require("react");
+var import_react17 = require("react");
 var useAppRouter;
 var usePathname2;
 try {
@@ -4239,7 +4874,7 @@ try {
 } catch {
 }
 function useNavigationGraphSetup() {
-  const [isInitialized, setIsInitialized] = (0, import_react15.useState)(false);
+  const [isInitialized, setIsInitialized] = (0, import_react17.useState)(false);
   let router = null;
   let pathname = null;
   try {
@@ -4251,7 +4886,7 @@ function useNavigationGraphSetup() {
     }
   } catch {
   }
-  const navigate = (0, import_react15.useCallback)((path) => {
+  const navigate = (0, import_react17.useCallback)((path) => {
     const normalizedPath = path.startsWith("/") ? path : `/${path}`;
     if (router?.push) {
       router.push(normalizedPath);
@@ -4260,7 +4895,7 @@ function useNavigationGraphSetup() {
     }
   }, [router]);
   const currentPath = pathname ?? (typeof window !== "undefined" ? window.location.pathname + window.location.search : "/");
-  (0, import_react15.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     import("@supernal/interface/browser").then(({ NavigationGraph: NavigationGraph2 }) => {
       const graph = NavigationGraph2.getInstance();
       graph.setNavigationHandler(navigate);
@@ -4276,7 +4911,7 @@ function useNavigationGraphSetup() {
       console.log("[NavigationGraphSetup] Auto-configured with Next.js router");
     });
   }, [navigate, currentPath]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!isInitialized) return;
     import("@supernal/interface/browser").then(({ NavigationGraph: NavigationGraph2 }) => {
       const graph = NavigationGraph2.getInstance();
@@ -4287,8 +4922,8 @@ function useNavigationGraphSetup() {
 }
 
 // src/components/ToolMenuPopup/ToolMenuPopup.tsx
-var import_react16 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_react18 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var ToolMenuPopup = ({
   isOpen,
   onClose,
@@ -4296,16 +4931,16 @@ var ToolMenuPopup = ({
   totalTools,
   contextLabel
 }) => {
-  const [collapsedCategories, setCollapsedCategories] = (0, import_react16.useState)(/* @__PURE__ */ new Set());
-  const [isHydrated, setIsHydrated] = (0, import_react16.useState)(false);
-  const [isMobile, setIsMobile] = (0, import_react16.useState)(false);
-  const popupRef = (0, import_react16.useRef)(null);
+  const [collapsedCategories, setCollapsedCategories] = (0, import_react18.useState)(/* @__PURE__ */ new Set());
+  const [isHydrated, setIsHydrated] = (0, import_react18.useState)(false);
+  const [isMobile, setIsMobile] = (0, import_react18.useState)(false);
+  const popupRef = (0, import_react18.useRef)(null);
   const { insertText } = useChatInput();
-  (0, import_react16.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     setIsHydrated(true);
     setIsMobile(window.matchMedia("(max-width: 767px)").matches);
   }, []);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (!isOpen) return;
     const handleClickOutside = (e) => {
       const target = e.target;
@@ -4316,7 +4951,7 @@ var ToolMenuPopup = ({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [isOpen, onClose]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (!isOpen) return;
     const handleKey = (e) => {
       if (e.key === "Escape") {
@@ -4364,23 +4999,23 @@ var ToolMenuPopup = ({
     maxHeight: "70vh",
     borderRadius: 16
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     "div",
     {
       ref: popupRef,
       "data-tool-menu": true,
       style: { ...glassStyle, ...positionStyle, overflowY: "auto" },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: {
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: {
           padding: "16px 20px",
           borderBottom: "1px solid rgba(255, 255, 255, 0.1)",
           display: "flex",
           justifyContent: "space-between",
           alignItems: "center"
         }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h3", { style: { margin: 0, color: "#fff", fontSize: 16, fontWeight: 600 }, children: "Available Actions" }),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("p", { style: { margin: "4px 0 0", color: "rgba(255,255,255,0.6)", fontSize: 12 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { style: { margin: 0, color: "#fff", fontSize: 16, fontWeight: 600 }, children: "Available Actions" }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("p", { style: { margin: "4px 0 0", color: "rgba(255,255,255,0.6)", fontSize: 12 }, children: [
               contextLabel,
               " \xB7 ",
               totalTools,
@@ -4388,7 +5023,7 @@ var ToolMenuPopup = ({
               totalTools !== 1 ? "s" : ""
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             "button",
             {
               onClick: onClose,
@@ -4406,12 +5041,12 @@ var ToolMenuPopup = ({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { padding: "8px 12px 16px" }, children: [
-          categories.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { style: { color: "rgba(255,255,255,0.5)", textAlign: "center", padding: "24px 0", fontSize: 14 }, children: "No tools available on this page." }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { padding: "8px 12px 16px" }, children: [
+          categories.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("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__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { marginBottom: 4 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { marginBottom: 4 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
                 "button",
                 {
                   onClick: () => toggleCategory(category.key),
@@ -4435,15 +5070,15 @@ var ToolMenuPopup = ({
                     e.currentTarget.style.background = "none";
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { style: { fontSize: 14, fontWeight: 500 }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { style: { fontSize: 14, fontWeight: 500 }, children: [
                       category.displayName,
-                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { style: { color: "rgba(255,255,255,0.4)", fontWeight: 400, marginLeft: 8, fontSize: 12 }, children: category.tools.length })
+                      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: { color: "rgba(255,255,255,0.4)", fontWeight: 400, marginLeft: 8, fontSize: 12 }, children: category.tools.length })
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { style: { color: "rgba(255,255,255,0.4)", fontSize: 12 }, children: isCollapsed ? "\u25B6" : "\u25BC" })
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: { color: "rgba(255,255,255,0.4)", fontSize: 12 }, children: isCollapsed ? "\u25B6" : "\u25BC" })
                   ]
                 }
               ),
-              !isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { paddingLeft: 8, paddingRight: 8 }, children: category.tools.map((tool, idx) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+              !isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { paddingLeft: 8, paddingRight: 8 }, children: category.tools.map((tool, idx) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
                 "button",
                 {
                   onClick: () => handleToolClick(tool),
@@ -4466,8 +5101,8 @@ var ToolMenuPopup = ({
                     e.currentTarget.style.background = "none";
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { fontSize: 13, fontWeight: 500 }, children: tool.name }),
-                    tool.description && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: {
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { fontSize: 13, fontWeight: 500 }, children: tool.name }),
+                    tool.description && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: {
                       fontSize: 11,
                       color: "rgba(255,255,255,0.5)",
                       marginTop: 2,
@@ -4483,7 +5118,7 @@ var ToolMenuPopup = ({
             ] }, category.key);
           })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: {
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: {
           padding: "10px 20px",
           borderTop: "1px solid rgba(255, 255, 255, 0.08)",
           textAlign: "center",
@@ -4491,14 +5126,14 @@ var ToolMenuPopup = ({
           fontSize: 11
         }, children: [
           "Click a tool to insert its command \xB7 Type ",
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("kbd", { style: {
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("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__ */ (0, import_jsx_runtime15.jsx)("kbd", { style: {
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("kbd", { style: {
             padding: "1px 4px",
             borderRadius: 3,
             border: "1px solid rgba(255,255,255,0.2)",
@@ -4512,11 +5147,11 @@ var ToolMenuPopup = ({
 };
 
 // src/components/ToolMenuPopup/ToolMenuPopupTrigger.tsx
-var import_react18 = require("react");
+var import_react20 = require("react");
 
 // src/components/ToolMenuPopup/useToolMenu.ts
-var import_react17 = require("react");
-var import_browser5 = require("@supernal/interface/browser");
+var import_react19 = require("react");
+var import_browser6 = require("@supernal/interface/browser");
 var CATEGORY_DISPLAY = {
   navigation: "Navigation",
   user_interaction: "Controls",
@@ -4536,15 +5171,15 @@ var CATEGORY_DISPLAY = {
   workflow: "Workflow"
 };
 function useToolMenu() {
-  const [isOpen, setIsOpen] = (0, import_react17.useState)(false);
-  const open = (0, import_react17.useCallback)(() => setIsOpen(true), []);
-  const close = (0, import_react17.useCallback)(() => setIsOpen(false), []);
-  const toggle = (0, import_react17.useCallback)(() => setIsOpen((prev) => !prev), []);
-  const { categories, totalTools, contextLabel } = (0, import_react17.useMemo)(() => {
+  const [isOpen, setIsOpen] = (0, import_react19.useState)(false);
+  const open = (0, import_react19.useCallback)(() => setIsOpen(true), []);
+  const close = (0, import_react19.useCallback)(() => setIsOpen(false), []);
+  const toggle = (0, import_react19.useCallback)(() => setIsOpen((prev) => !prev), []);
+  const { categories, totalTools, contextLabel } = (0, import_react19.useMemo)(() => {
     if (!isOpen) {
       return { categories: [], totalTools: 0, contextLabel: "" };
     }
-    const tools = import_browser5.ToolRegistry.getToolsByLocation();
+    const tools = import_browser6.ToolRegistry.getToolsByLocation();
     const aiTools = tools.filter((t) => t.aiEnabled);
     const grouped = {};
     for (const tool of aiTools) {
@@ -4572,10 +5207,10 @@ function useToolMenu() {
 }
 
 // src/components/ToolMenuPopup/ToolMenuPopupTrigger.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var ToolMenuPopupTrigger = () => {
   const toolMenu = useToolMenu();
-  (0, import_react18.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     const handleKeyDown = (e) => {
       if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key === "/") {
         e.preventDefault();
@@ -4614,7 +5249,7 @@ var ToolMenuPopupTrigger = () => {
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [toolMenu]);
   if (!toolMenu.isOpen) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     ToolMenuPopup,
     {
       isOpen: toolMenu.isOpen,
@@ -4627,7 +5262,7 @@ var ToolMenuPopupTrigger = () => {
 };
 
 // src/components/SupernalProvider.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function ChatBubbleConnector({
   theme,
   position,
@@ -4644,7 +5279,7 @@ function ChatBubbleConnector({
     glassMode,
     ...logo ? { logo } : {}
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     ChatBubble,
     {
       messages,
@@ -4683,12 +5318,12 @@ function SupernalProvider({
   console.log("[SupernalProvider] variant:", variant, "effectiveDisplayMode:", effectiveDisplayMode);
   useLocationTracking();
   useNavigationGraphSetup();
-  (0, import_react19.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (typeof window === "undefined") return;
-    const collector = import_browser6.ExposureCollector.getInstance();
+    const collector = import_browser7.ExposureCollector.getInstance();
     const registeredToolIds = /* @__PURE__ */ new Set();
     const registerTools = () => {
-      const allTools = import_browser6.ToolRegistry.getAllTools();
+      const allTools = import_browser7.ToolRegistry.getAllTools();
       allTools.forEach((tool) => {
         if (tool.elementId && !registeredToolIds.has(tool.toolId)) {
           const element = document.querySelector(`[data-testid="${tool.elementId}"]`);
@@ -4715,9 +5350,9 @@ function SupernalProvider({
       collector.destroy();
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ChatInputProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(ChatProvider, { mode, apiKey, onToolExecute, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(AutoNavigationContext, { routes, onNavigate, children }),
-    shouldRenderChatBubble ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ApiKeyProvider, { initialApiKey: apiKey, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChatInputProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(ChatProvider, { mode, apiKey, onToolExecute, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AutoNavigationContext, { routes, onNavigate, children }),
+    shouldRenderChatBubble ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       ChatBubbleConnector,
       {
         theme,
@@ -4730,26 +5365,26 @@ function SupernalProvider({
         drawerSide
       }
     ) : null,
-    !disabled && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ToolMenuPopupTrigger, {})
-  ] }) });
+    !disabled && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToolMenuPopupTrigger, {})
+  ] }) }) });
 }
 
 // src/components/ChatBubbleSettingsModal.tsx
-var import_react20 = __toESM(require("react"));
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_react22 = __toESM(require("react"));
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function ChatBubbleSettingsModal({
   isOpen,
   onClose,
   settings,
   onSettingsChange
 }) {
-  const [localSettings, setLocalSettings] = import_react20.default.useState(settings);
-  (0, import_react20.useEffect)(() => {
+  const [localSettings, setLocalSettings] = import_react22.default.useState(settings);
+  (0, import_react22.useEffect)(() => {
     if (isOpen) {
       setLocalSettings(settings);
     }
   }, [isOpen, settings]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     const handleEscape = (e) => {
       if (e.key === "Escape" && isOpen) {
         onClose();
@@ -4770,8 +5405,8 @@ function ChatBubbleSettingsModal({
     onClose();
   };
   const isDark = localSettings.theme === "dark";
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "div",
       {
         className: "fixed inset-0 bg-black bg-opacity-50 z-[60] backdrop-blur-sm",
@@ -4779,12 +5414,12 @@ function ChatBubbleSettingsModal({
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "div",
       {
         className: "fixed inset-0 z-[70] flex items-center justify-center p-4",
         "data-testid": "chat-settings-modal",
-        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
           "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"}`,
@@ -4793,8 +5428,8 @@ function ChatBubbleSettingsModal({
             "aria-labelledby": "settings-modal-title",
             onClick: (e) => e.stopPropagation(),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center justify-between mb-6", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center justify-between mb-6", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                   "h2",
                   {
                     id: "settings-modal-title",
@@ -4802,56 +5437,56 @@ function ChatBubbleSettingsModal({
                     children: "Chat Settings"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                   "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__ */ (0, import_jsx_runtime18.jsx)("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "space-y-5 mb-6", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { className: "block text-base font-medium mb-1", children: "Theme" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Switch between light and dark modes" })
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "space-y-5 mb-6", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { className: "block text-base font-medium mb-1", children: "Theme" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Switch between light and dark modes" })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center space-x-2", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center space-x-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                       "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__ */ (0, import_jsx_runtime18.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("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__ */ (0, import_jsx_runtime19.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("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__ */ (0, import_jsx_runtime18.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                       "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__ */ (0, import_jsx_runtime18.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("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__ */ (0, import_jsx_runtime19.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("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__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { className: "block text-base font-medium mb-1", children: "Glass Mode" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Enable glassmorphism transparency effect" })
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { className: "block text-base font-medium mb-1", children: "Glass Mode" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Enable glassmorphism transparency effect" })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                     "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__ */ (0, import_jsx_runtime18.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                         "span",
                         {
                           className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${localSettings.glassMode ? "translate-x-6" : "translate-x-1"}`
@@ -4860,19 +5495,19 @@ function ChatBubbleSettingsModal({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { className: "block text-base font-medium mb-1", children: "Notifications" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Show unread message indicators" })
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { className: "block text-base font-medium mb-1", children: "Notifications" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Show unread message indicators" })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                     "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__ */ (0, import_jsx_runtime18.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                         "span",
                         {
                           className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${localSettings.notifications ? "translate-x-6" : "translate-x-1"}`
@@ -4881,16 +5516,16 @@ function ChatBubbleSettingsModal({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: `border-t ${isDark ? "border-gray-700" : "border-gray-200"} my-2` }),
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("label", { className: "block text-base font-medium mb-1 flex items-center space-x-2", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: "Subtitle Overlay" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("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__ */ (0, import_jsx_runtime19.jsx)("div", { className: `border-t ${isDark ? "border-gray-700" : "border-gray-200"} my-2` }),
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { className: "block text-base font-medium mb-1 flex items-center space-x-2", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: "Subtitle Overlay" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("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__ */ (0, import_jsx_runtime18.jsx)("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Minimalist voice-first overlay with @/ icon" })
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Minimalist voice-first overlay with @/ icon" })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                     "button",
                     {
                       onClick: () => setLocalSettings({
@@ -4902,7 +5537,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__ */ (0, import_jsx_runtime18.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                         "span",
                         {
                           className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${localSettings.subtitleOverlayEnabled ? "translate-x-6" : "translate-x-1"}`
@@ -4911,12 +5546,12 @@ function ChatBubbleSettingsModal({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { className: "block text-base font-medium mb-1", children: "Display Mode" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Auto switches drawer on mobile, panel on desktop" })
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { className: "block text-base font-medium mb-1", children: "Display Mode" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Auto switches drawer on mobile, panel on desktop" })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
                     "select",
                     {
                       value: localSettings.displayMode || "auto",
@@ -4926,22 +5561,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__ */ (0, import_jsx_runtime18.jsx)("option", { value: "auto", children: "Auto (Recommended)" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("option", { value: "drawer", children: "Always Drawer" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("option", { value: "full", children: "Always Panel" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("option", { value: "floating", children: "Always Floating" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("option", { value: "subtitle", children: "Subtitle Overlay (Beta)" })
+                        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("option", { value: "auto", children: "Auto (Recommended)" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("option", { value: "drawer", children: "Always Drawer" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("option", { value: "full", children: "Always Panel" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("option", { value: "floating", children: "Always Floating" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("option", { value: "subtitle", children: "Subtitle Overlay (Beta)" })
                       ]
                     }
                   )
                 ] }),
-                (localSettings.displayMode === "auto" || localSettings.displayMode === "drawer") && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { className: "block text-base font-medium mb-1", children: "Drawer Side" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Which edge drawer slides from" })
+                (localSettings.displayMode === "auto" || localSettings.displayMode === "drawer") && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { className: "block text-base font-medium mb-1", children: "Drawer Side" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Which edge drawer slides from" })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center space-x-2", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center space-x-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                       "button",
                       {
                         onClick: () => setLocalSettings({ ...localSettings, drawerSide: "left" }),
@@ -4949,7 +5584,7 @@ function ChatBubbleSettingsModal({
                         children: "Left"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                       "button",
                       {
                         onClick: () => setLocalSettings({ ...localSettings, drawerSide: "right" }),
@@ -4959,24 +5594,24 @@ function ChatBubbleSettingsModal({
                     )
                   ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: `border-t ${isDark ? "border-gray-700" : "border-gray-200"} my-2` }),
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "mb-3", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h3", { className: "text-lg font-semibold mb-1", children: "Voice Control" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: `text-xs ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Enable voice input and audio feedback" })
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: `border-t ${isDark ? "border-gray-700" : "border-gray-200"} my-2` }),
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "mb-3", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h3", { className: "text-lg font-semibold mb-1", children: "Voice Control" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: `text-xs ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Enable voice input and audio feedback" })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { className: "block text-base font-medium mb-1", children: "Voice Control" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Enable voice input and TTS responses" })
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { className: "block text-base font-medium mb-1", children: "Voice Control" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Enable voice input and TTS responses" })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                     "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__ */ (0, import_jsx_runtime18.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                         "span",
                         {
                           className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${localSettings.voiceEnabled ? "translate-x-6" : "translate-x-1"}`
@@ -4985,20 +5620,20 @@ function ChatBubbleSettingsModal({
                     }
                   )
                 ] }),
-                localSettings.voiceEnabled && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center justify-between pl-4 border-l-2 border-blue-500/30", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { className: "block text-sm font-medium mb-1", children: "Auto-read AI Responses" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: `text-xs ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Automatically read AI messages aloud" })
+                localSettings.voiceEnabled && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center justify-between pl-4 border-l-2 border-blue-500/30", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { className: "block text-sm font-medium mb-1", children: "Auto-read AI Responses" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: `text-xs ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Automatically read AI messages aloud" })
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                       "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__ */ (0, import_jsx_runtime18.jsx)(
+                        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                           "span",
                           {
                             className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${localSettings.autoReadResponses ? "translate-x-6" : "translate-x-1"}`
@@ -5007,19 +5642,19 @@ function ChatBubbleSettingsModal({
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center justify-between pl-4 border-l-2 border-blue-500/30", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { className: "block text-sm font-medium mb-1", children: "Premium Voices \u{1F48E}" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: `text-xs ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Use high-quality OpenAI voices (requires network)" })
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center justify-between pl-4 border-l-2 border-blue-500/30", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { className: "block text-sm font-medium mb-1", children: "Premium Voices \u{1F48E}" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: `text-xs ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Use high-quality OpenAI voices (requires network)" })
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                       "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__ */ (0, import_jsx_runtime18.jsx)(
+                        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                           "span",
                           {
                             className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${localSettings.usePremiumVoices ? "translate-x-6" : "translate-x-1"}`
@@ -5028,13 +5663,13 @@ function ChatBubbleSettingsModal({
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "pl-4 border-l-2 border-blue-500/30", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("label", { className: "block text-sm font-medium mb-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "pl-4 border-l-2 border-blue-500/30", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { className: "block text-sm font-medium mb-2", children: [
                       "Voice Speed: ",
                       localSettings.ttsSpeed.toFixed(1),
                       "x"
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                       "input",
                       {
                         type: "range",
@@ -5046,30 +5681,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__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex justify-between text-xs text-gray-400 mt-1", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: "0.5x (Slow)" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: "1.0x (Normal)" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: "2.0x (Fast)" })
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex justify-between text-xs text-gray-400 mt-1", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: "0.5x (Slow)" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: "1.0x (Normal)" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: "2.0x (Fast)" })
                     ] })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: `border-t ${isDark ? "border-gray-700" : "border-gray-200"} my-2` }),
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "mb-3", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h4", { className: "text-sm font-semibold mb-1", children: "Voice Quick Record (Ctrl+/)" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("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__ */ (0, import_jsx_runtime19.jsx)("div", { className: `border-t ${isDark ? "border-gray-700" : "border-gray-200"} my-2` }),
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "mb-3", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h4", { className: "text-sm font-semibold mb-1", children: "Voice Quick Record (Ctrl+/)" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("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__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center justify-between pl-4 border-l-2 border-purple-500/30", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { className: "block text-sm font-medium mb-1", children: "Auto-Execute Commands" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: `text-xs ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Automatically run recognized voice commands" })
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center justify-between pl-4 border-l-2 border-purple-500/30", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { className: "block text-sm font-medium mb-1", children: "Auto-Execute Commands" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: `text-xs ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Automatically run recognized voice commands" })
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                       "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__ */ (0, import_jsx_runtime18.jsx)(
+                        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                           "span",
                           {
                             className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${localSettings.sttAutoExecute ? "translate-x-6" : "translate-x-1"}`
@@ -5078,13 +5713,13 @@ function ChatBubbleSettingsModal({
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "pl-4 border-l-2 border-purple-500/30", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("label", { className: "block text-sm font-medium mb-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "pl-4 border-l-2 border-purple-500/30", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { className: "block text-sm font-medium mb-2", children: [
                       "Recording Timeout: ",
                       (localSettings.sttAutoRecordTimeout / 1e3).toFixed(1),
                       "s"
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                       "input",
                       {
                         type: "range",
@@ -5096,22 +5731,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__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex justify-between text-xs text-gray-400 mt-1", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: "2s" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: "8s" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: "15s" })
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex justify-between text-xs text-gray-400 mt-1", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: "2s" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: "8s" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: "15s" })
                     ] })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("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__ */ (0, import_jsx_runtime18.jsx)("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__ */ (0, import_jsx_runtime18.jsx)("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__ */ (0, import_jsx_runtime19.jsxs)("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__ */ (0, import_jsx_runtime19.jsx)("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__ */ (0, import_jsx_runtime19.jsx)("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__ */ (0, import_jsx_runtime18.jsx)("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__ */ (0, import_jsx_runtime18.jsx)("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__ */ (0, import_jsx_runtime18.jsx)("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__ */ (0, import_jsx_runtime18.jsx)("p", { className: `text-xs ${isDark ? "text-purple-300" : "text-purple-800"}`, children: "\u{1F48E} Using premium OpenAI voices (requires internet connection)" }) })
+                  !localSettings.usePremiumVoices && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("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__ */ (0, import_jsx_runtime19.jsx)("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__ */ (0, import_jsx_runtime19.jsx)("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__ */ (0, import_jsx_runtime19.jsx)("p", { className: `text-xs ${isDark ? "text-purple-300" : "text-purple-800"}`, children: "\u{1F48E} Using premium OpenAI voices (requires internet connection)" }) })
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex justify-end space-x-3 pt-4 border-t border-gray-200 dark:border-gray-700", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex justify-end space-x-3 pt-4 border-t border-gray-200 dark:border-gray-700", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                   "button",
                   {
                     onClick: handleCancel,
@@ -5119,7 +5754,7 @@ function ChatBubbleSettingsModal({
                     children: "Cancel"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                   "button",
                   {
                     onClick: handleSave,
@@ -5256,12 +5891,14 @@ function findBestMatch(query, tools) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ApiKeyProvider,
   AutoNavigationContext,
   ChatBubble,
   ChatBubbleSettingsModal,
   ChatBubbleVariant,
   ChatInputProvider,
   ChatProvider,
+  ClaudeClient,
   CodeBlock,
   Components,
   DemoAIInterface,
@@ -5275,9 +5912,13 @@ function findBestMatch(query, tools) {
   ToolManager,
   ToolMenuPopup,
   ToolMenuPopupTrigger,
+  createClaudeClient,
   findBestMatch,
   scoreToolMatch,
   useAllContexts,
+  useApiKey,
+  useApiKeyOptional,
+  useApiKeyStorage,
   useChatContext,
   useChatInput,
   useCurrentContext,