@supernal/interface-nextjs 1.0.26 → 1.0.28

package/dist/index.mjs

@@ -7,7 +7,7 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 });
 
 // src/components/SupernalProvider.tsx
-import { useEffect as useEffect14 } from "react";
+import { useEffect as useEffect15 } from "react";
 
 // src/contexts/ChatInputContext.tsx
 import { createContext, useContext, useCallback, useRef } from "react";
@@ -34,12 +34,12 @@ function ChatInputProvider({ children }) {
 }
 
 // src/contexts/ChatProvider.tsx
-import { createContext as createContext2, useContext as useContext2, useState, useCallback as useCallback2, useEffect } from "react";
+import { createContext as createContext3, useContext as useContext3, useState as useState2, useCallback as useCallback3, useEffect as useEffect2, useRef as useRef3 } from "react";
 
 // src/lib/ChatAIInterface.ts
 import {
   AIInterface
-} from "@supernal/interface";
+} from "@supernal/interface/browser";
 
 // src/lib/ToolManager.ts
 import { setDefaultToolReporter, setGlobalToolReporter } from "@supernal/interface/browser";
@@ -178,17 +178,466 @@ var DemoAIInterface = class extends 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
+import React2, { createContext as createContext2, useContext as useContext2 } from "react";
+
+// src/hooks/useApiKeyStorage.ts
+import { useState, useCallback as useCallback2, useEffect, useRef as useRef2 } from "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] = useState({
+    apiKey: null,
+    status: options.encrypted ? "locked" : "none",
+    error: null,
+    maskedKey: null
+  });
+  const derivedKeyRef = useRef2(null);
+  const saltRef = useRef2(null);
+  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 = useCallback2(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 = useCallback2(() => {
+    if (!options.encrypted) return;
+    derivedKeyRef.current = null;
+    setState((prev) => ({
+      ...prev,
+      status: "locked",
+      apiKey: null,
+      maskedKey: null
+    }));
+  }, [options.encrypted]);
+  const setApiKey = useCallback2(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 = useCallback2(() => {
+    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 = useCallback2(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
 import { jsx as jsx2 } from "react/jsx-runtime";
-var ChatContext = createContext2(null);
+var ApiKeyContext = createContext2(null);
+function ApiKeyProvider({ children, initialApiKey }) {
+  const apiKeyStorage = useApiKeyStorage();
+  React2.useEffect(() => {
+    if (initialApiKey && !apiKeyStorage.apiKey && apiKeyStorage.status === "none") {
+      apiKeyStorage.setApiKey(initialApiKey, false);
+    }
+  }, [initialApiKey, apiKeyStorage]);
+  return /* @__PURE__ */ jsx2(ApiKeyContext.Provider, { value: apiKeyStorage, children });
+}
+function useApiKey() {
+  const context = useContext2(ApiKeyContext);
+  if (!context) {
+    throw new Error("useApiKey must be used within ApiKeyProvider");
+  }
+  return context;
+}
+function useApiKeyOptional() {
+  return useContext2(ApiKeyContext);
+}
+
+// src/contexts/ChatProvider.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var ChatContext = createContext3(null);
 function useChatContext() {
-  const context = useContext2(ChatContext);
+  const context = useContext3(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 [
@@ -233,14 +682,30 @@ function getInitialMessages() {
 function ChatProvider({
   children,
   mode = "fuzzy",
-  apiKey,
+  apiKey: propApiKey,
   onToolExecute
 }) {
-  const [messages, setMessages] = useState([]);
-  useEffect(() => {
+  const [messages, setMessages] = useState2([]);
+  const apiKeyContext = useApiKeyOptional();
+  const activeApiKey = apiKeyContext?.hasApiKey ? apiKeyContext.apiKey : propApiKey;
+  const isAiMode = !!activeApiKey;
+  const claudeClientRef = useRef3(null);
+  useEffect2(() => {
+    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]);
+  useEffect2(() => {
     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,
@@ -255,24 +720,24 @@ function ChatProvider({
       setMessages(getInitialMessages());
     }
   }, []);
-  const [isLoading, setIsLoading] = useState(false);
-  const [aiInterface] = useState(() => new DemoAIInterface());
-  useEffect(() => {
+  const [isLoading, setIsLoading] = useState2(false);
+  const [aiInterface] = useState2(() => new DemoAIInterface());
+  useEffect2(() => {
     if (onToolExecute) {
       return aiInterface.onToolExecution((result) => {
         onToolExecute(result.toolName, result);
       });
     }
   }, [aiInterface, onToolExecute]);
-  useEffect(() => {
+  useEffect2(() => {
     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 = useCallback2(async (text) => {
+  const sendMessage = useCallback3(async (text) => {
     const userMessage = {
       id: Date.now().toString(),
       text,
@@ -282,14 +747,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(),
@@ -301,16 +783,16 @@ function ChatProvider({
     } finally {
       setIsLoading(false);
     }
-  }, [aiInterface]);
-  const clearMessages = useCallback2(() => {
+  }, [aiInterface, messages]);
+  const clearMessages = useCallback3(() => {
     setMessages([]);
-    localStorage.removeItem(STORAGE_KEY);
+    localStorage.removeItem(STORAGE_KEY2);
   }, []);
-  return /* @__PURE__ */ jsx2(ChatContext.Provider, { value: { messages, sendMessage, clearMessages, isLoading }, children });
+  return /* @__PURE__ */ jsx3(ChatContext.Provider, { value: { messages, sendMessage, clearMessages, isLoading, isAiMode }, children });
 }
 
 // src/components/ChatBubble/constants.ts
-import React3 from "react";
+import React4 from "react";
 
 // src/names/Components.ts
 var Components = {
@@ -318,7 +800,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",
@@ -520,7 +1015,7 @@ var GLASS_INVERTED = {
 var DEFAULT_CONFIG = {
   title: "Supernal Interface",
   logo: DEFAULT_LOGO,
-  avatar: React3.createElement("img", { src: DEFAULT_LOGO, alt: "Supernal", className: "w-6 h-6" }),
+  avatar: React4.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",
@@ -543,7 +1038,7 @@ var DEFAULT_CONFIG = {
 };
 
 // src/components/ChatBubble/InputField.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
 var InputField = ({
   compact = false,
   inputValue,
@@ -559,8 +1054,8 @@ var InputField = ({
   onMicClick,
   modKey = "Ctrl",
   onKeyDown
-}) => /* @__PURE__ */ jsx3("form", { onSubmit, className: compact ? "flex space-x-2" : THEME_CLASSES.bg.inputForm + " bg-transparent", children: /* @__PURE__ */ jsxs("div", { className: compact ? "flex space-x-2 flex-1" : "relative", children: [
-  /* @__PURE__ */ jsx3(
+}) => /* @__PURE__ */ jsx4("form", { onSubmit, className: compact ? "flex space-x-2" : THEME_CLASSES.bg.inputForm + " bg-transparent", children: /* @__PURE__ */ jsxs("div", { className: compact ? "flex space-x-2 flex-1" : "relative", children: [
+  /* @__PURE__ */ jsx4(
     "input",
     {
       ref: compact ? void 0 : inputRef,
@@ -574,7 +1069,7 @@ var InputField = ({
       "data-testid": ChatNames.input
     }
   ),
-  voiceEnabled && onMicClick && !compact && (!inputValue.trim() || isListening) && /* @__PURE__ */ jsx3(
+  voiceEnabled && onMicClick && !compact && (!inputValue.trim() || isListening) && /* @__PURE__ */ jsx4(
     "button",
     {
       type: "button",
@@ -582,33 +1077,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__ */ jsx3("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }) }) : /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("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__ */ jsx4("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }) }) : /* @__PURE__ */ jsx4("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("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__ */ jsx3(
+  inputValue.trim() && /* @__PURE__ */ jsx4(
     "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__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", strokeWidth: "2.5", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M13 5l7 7m0 0l-7 7m7-7H3" }) })
+      children: compact ? "\u2192" : /* @__PURE__ */ jsx4("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", strokeWidth: "2.5", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M13 5l7 7m0 0l-7 7m7-7H3" }) })
     }
   )
 ] }) });
 
 // src/components/ChatBubble/Avatar.tsx
-import { Fragment, jsx as jsx4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx5 } from "react/jsx-runtime";
 var Avatar = ({ avatar, size = "normal" }) => {
   if (!avatar) return null;
   if (typeof avatar === "string") {
-    return size === "small" ? /* @__PURE__ */ jsx4("span", { className: "text-lg", children: avatar }) : /* @__PURE__ */ jsx4("div", { className: "w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center shadow-md", children: /* @__PURE__ */ jsx4("span", { className: "text-white text-sm font-bold", children: avatar }) });
+    return size === "small" ? /* @__PURE__ */ jsx5("span", { className: "text-lg", children: avatar }) : /* @__PURE__ */ jsx5("div", { className: "w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center shadow-md", children: /* @__PURE__ */ jsx5("span", { className: "text-white text-sm font-bold", children: avatar }) });
   }
-  return /* @__PURE__ */ jsx4(Fragment, { children: avatar });
+  return /* @__PURE__ */ jsx5(Fragment, { children: avatar });
 };
 
 // src/components/ChatBubble/ChatBubble.tsx
-import React8, { useState as useState8, useRef as useRef8, useEffect as useEffect7, useMemo as useMemo3 } from "react";
+import React9, { useState as useState9, useRef as useRef10, useEffect as useEffect8, useMemo as useMemo4 } from "react";
 
 // src/components/MessageRenderer.tsx
 import ReactMarkdown from "react-markdown";
@@ -618,12 +1113,12 @@ import remarkDirective from "remark-directive";
 import rehypeKatex from "rehype-katex";
 
 // src/components/CodeBlock.tsx
-import React4, { useState as useState2 } from "react";
+import React5, { useState as useState3 } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { vscDarkPlus, vs } from "react-syntax-highlighter/dist/cjs/styles/prism";
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { vscDarkPlus, vs } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 function CodeBlock({ children, className, inline, theme = "dark" }) {
-  const [copied, setCopied] = useState2(false);
+  const [copied, setCopied] = useState3(false);
   const match = /language-(\w+)/.exec(className || "");
   const language = match ? match[1] : "text";
   const handleCopy = async () => {
@@ -632,25 +1127,25 @@ function CodeBlock({ children, className, inline, theme = "dark" }) {
     setTimeout(() => setCopied(false), 2e3);
   };
   if (inline) {
-    return /* @__PURE__ */ jsx5("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__ */ jsx6("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__ */ jsxs2("div", { className: "relative group my-4", children: [
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx6(
       "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__ */ jsxs2("span", { className: "flex items-center gap-1", children: [
-          /* @__PURE__ */ jsx5("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
+          /* @__PURE__ */ jsx6("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
           "Copied!"
         ] }) : /* @__PURE__ */ jsxs2("span", { className: "flex items-center gap-1", children: [
-          /* @__PURE__ */ jsx5("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("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__ */ jsx6("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("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"
         ] })
       }
     ),
-    React4.createElement(SyntaxHighlighter, {
+    React5.createElement(SyntaxHighlighter, {
       language,
       style: theme === "dark" ? vscDarkPlus : vs,
       customStyle: {
@@ -667,13 +1162,13 @@ function CodeBlock({ children, className, inline, theme = "dark" }) {
 }
 
 // src/components/MermaidDiagram.tsx
-import { useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useEffect as useEffect3, useRef as useRef4, useState as useState4 } from "react";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 function MermaidDiagram({ chart, theme = "dark" }) {
-  const containerRef = useRef2(null);
-  const [error, setError] = useState3(null);
-  const [isLoading, setIsLoading] = useState3(true);
-  useEffect2(() => {
+  const containerRef = useRef4(null);
+  const [error, setError] = useState4(null);
+  const [isLoading, setIsLoading] = useState4(true);
+  useEffect3(() => {
     let mounted = true;
     const renderDiagram = async () => {
       if (!containerRef.current) return;
@@ -708,17 +1203,17 @@ function MermaidDiagram({ chart, theme = "dark" }) {
   }, [chart, theme]);
   if (error) {
     return /* @__PURE__ */ jsxs3("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__ */ jsx6("div", { className: "font-semibold mb-1", children: "Mermaid Diagram Error" }),
-      /* @__PURE__ */ jsx6("div", { className: "text-sm opacity-90", children: error }),
+      /* @__PURE__ */ jsx7("div", { className: "font-semibold mb-1", children: "Mermaid Diagram Error" }),
+      /* @__PURE__ */ jsx7("div", { className: "text-sm opacity-90", children: error }),
       /* @__PURE__ */ jsxs3("details", { className: "mt-2 text-xs opacity-75", children: [
-        /* @__PURE__ */ jsx6("summary", { className: "cursor-pointer", children: "View diagram source" }),
-        /* @__PURE__ */ jsx6("pre", { className: "mt-2 whitespace-pre-wrap", children: chart })
+        /* @__PURE__ */ jsx7("summary", { className: "cursor-pointer", children: "View diagram source" }),
+        /* @__PURE__ */ jsx7("pre", { className: "mt-2 whitespace-pre-wrap", children: chart })
       ] })
     ] });
   }
   return /* @__PURE__ */ jsxs3("div", { className: "my-4 flex justify-center", children: [
-    isLoading && /* @__PURE__ */ jsx6("div", { className: `py-8 text-sm ${theme === "dark" ? "text-gray-400" : "text-gray-600"}`, children: "Rendering diagram..." }),
-    /* @__PURE__ */ jsx6(
+    isLoading && /* @__PURE__ */ jsx7("div", { className: `py-8 text-sm ${theme === "dark" ? "text-gray-400" : "text-gray-600"}`, children: "Rendering diagram..." }),
+    /* @__PURE__ */ jsx7(
       "div",
       {
         ref: containerRef,
@@ -729,7 +1224,7 @@ function MermaidDiagram({ chart, theme = "dark" }) {
 }
 
 // src/components/MessageRenderer.tsx
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 function MessageRenderer({ content, theme = "dark" }) {
   const components = {
     // Code blocks with syntax highlighting
@@ -740,9 +1235,9 @@ function MessageRenderer({ content, theme = "dark" }) {
       const language = match ? match[1] : "";
       const inline = !className;
       if (language === "mermaid") {
-        return /* @__PURE__ */ jsx7(MermaidDiagram, { chart: value, theme });
+        return /* @__PURE__ */ jsx8(MermaidDiagram, { chart: value, theme });
       }
-      return /* @__PURE__ */ jsx7(
+      return /* @__PURE__ */ jsx8(
         CodeBlock,
         {
           className,
@@ -753,13 +1248,13 @@ function MessageRenderer({ content, theme = "dark" }) {
       );
     },
     // Headings with better styling
-    h1: ({ children }) => /* @__PURE__ */ jsx7("h1", { className: `text-2xl font-bold mt-6 mb-3 ${theme === "dark" ? "text-gray-100" : "text-gray-900"}`, children }),
-    h2: ({ children }) => /* @__PURE__ */ jsx7("h2", { className: `text-xl font-bold mt-5 mb-2.5 ${theme === "dark" ? "text-gray-100" : "text-gray-900"}`, children }),
-    h3: ({ children }) => /* @__PURE__ */ jsx7("h3", { className: `text-lg font-semibold mt-4 mb-2 ${theme === "dark" ? "text-gray-200" : "text-gray-800"}`, children }),
+    h1: ({ children }) => /* @__PURE__ */ jsx8("h1", { className: `text-2xl font-bold mt-6 mb-3 ${theme === "dark" ? "text-gray-100" : "text-gray-900"}`, children }),
+    h2: ({ children }) => /* @__PURE__ */ jsx8("h2", { className: `text-xl font-bold mt-5 mb-2.5 ${theme === "dark" ? "text-gray-100" : "text-gray-900"}`, children }),
+    h3: ({ children }) => /* @__PURE__ */ jsx8("h3", { className: `text-lg font-semibold mt-4 mb-2 ${theme === "dark" ? "text-gray-200" : "text-gray-800"}`, children }),
     // Paragraphs
-    p: ({ children }) => /* @__PURE__ */ jsx7("p", { className: `mb-3 leading-relaxed ${theme === "dark" ? "text-gray-300" : "text-gray-700"}`, children }),
+    p: ({ children }) => /* @__PURE__ */ jsx8("p", { className: `mb-3 leading-relaxed ${theme === "dark" ? "text-gray-300" : "text-gray-700"}`, children }),
     // Links
-    a: ({ href, children }) => /* @__PURE__ */ jsx7(
+    a: ({ href, children }) => /* @__PURE__ */ jsx8(
       "a",
       {
         href,
@@ -770,17 +1265,17 @@ function MessageRenderer({ content, theme = "dark" }) {
       }
     ),
     // Lists
-    ul: ({ children }) => /* @__PURE__ */ jsx7("ul", { className: `list-disc list-inside mb-3 space-y-1 ${theme === "dark" ? "text-gray-300" : "text-gray-700"}`, children }),
-    ol: ({ children }) => /* @__PURE__ */ jsx7("ol", { className: `list-decimal list-inside mb-3 space-y-1 ${theme === "dark" ? "text-gray-300" : "text-gray-700"}`, children }),
+    ul: ({ children }) => /* @__PURE__ */ jsx8("ul", { className: `list-disc list-inside mb-3 space-y-1 ${theme === "dark" ? "text-gray-300" : "text-gray-700"}`, children }),
+    ol: ({ children }) => /* @__PURE__ */ jsx8("ol", { className: `list-decimal list-inside mb-3 space-y-1 ${theme === "dark" ? "text-gray-300" : "text-gray-700"}`, children }),
     // Blockquotes
-    blockquote: ({ children }) => /* @__PURE__ */ jsx7("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__ */ jsx8("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__ */ jsx7("div", { className: "overflow-x-auto my-4", children: /* @__PURE__ */ jsx7("table", { className: `min-w-full border-collapse ${theme === "dark" ? "border-gray-700" : "border-gray-300"}`, children }) }),
-    thead: ({ children }) => /* @__PURE__ */ jsx7("thead", { className: theme === "dark" ? "bg-gray-800" : "bg-gray-100", children }),
-    th: ({ children }) => /* @__PURE__ */ jsx7("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__ */ jsx7("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__ */ jsx8("div", { className: "overflow-x-auto my-4", children: /* @__PURE__ */ jsx8("table", { className: `min-w-full border-collapse ${theme === "dark" ? "border-gray-700" : "border-gray-300"}`, children }) }),
+    thead: ({ children }) => /* @__PURE__ */ jsx8("thead", { className: theme === "dark" ? "bg-gray-800" : "bg-gray-100", children }),
+    th: ({ children }) => /* @__PURE__ */ jsx8("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__ */ jsx8("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__ */ jsx7("hr", { className: `my-4 border-t ${theme === "dark" ? "border-gray-700" : "border-gray-300"}` }),
+    hr: () => /* @__PURE__ */ jsx8("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")) {
@@ -808,15 +1303,15 @@ function MessageRenderer({ content, theme = "dark" }) {
           }
         };
         const style = styles[type] || styles.info;
-        return /* @__PURE__ */ jsx7("div", { className: `my-4 p-4 border-l-4 rounded-r-lg ${style.border} ${style.bg}`, children: /* @__PURE__ */ jsxs4("div", { className: "flex items-start gap-2", children: [
-          /* @__PURE__ */ jsx7("span", { className: "text-lg flex-shrink-0", children: style.icon }),
-          /* @__PURE__ */ jsx7("div", { className: "flex-1", children })
+        return /* @__PURE__ */ jsx8("div", { className: `my-4 p-4 border-l-4 rounded-r-lg ${style.border} ${style.bg}`, children: /* @__PURE__ */ jsxs4("div", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ jsx8("span", { className: "text-lg flex-shrink-0", children: style.icon }),
+          /* @__PURE__ */ jsx8("div", { className: "flex-1", children })
         ] }) });
       }
-      return /* @__PURE__ */ jsx7("div", { className, ...props, children });
+      return /* @__PURE__ */ jsx8("div", { className, ...props, children });
     }
   };
-  return /* @__PURE__ */ jsx7("div", { className: "markdown-content", children: /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8("div", { className: "markdown-content", children: /* @__PURE__ */ jsx8(
     ReactMarkdown,
     {
       remarkPlugins: [remarkGfm, remarkMath, remarkDirective],
@@ -828,7 +1323,7 @@ function MessageRenderer({ content, theme = "dark" }) {
 }
 
 // src/hooks/useTTS.ts
-import { useState as useState4, useRef as useRef3, useCallback as useCallback3 } from "react";
+import { useState as useState5, useRef as useRef5, useCallback as useCallback4 } from "react";
 var Platform = {
   isNative: typeof window !== "undefined" && "Capacitor" in window,
   isWeb: typeof window !== "undefined" && !("Capacitor" in window)
@@ -843,13 +1338,13 @@ function isNativeTTSSupported() {
   return false;
 }
 function useTTS() {
-  const [isPlaying, setIsPlaying] = useState4(false);
-  const [error, setError] = useState4(null);
-  const [currentText, setCurrentText] = useState4(null);
-  const audioRef = useRef3(null);
-  const utteranceRef = useRef3(null);
+  const [isPlaying, setIsPlaying] = useState5(false);
+  const [error, setError] = useState5(null);
+  const [currentText, setCurrentText] = useState5(null);
+  const audioRef = useRef5(null);
+  const utteranceRef = useRef5(null);
   const isNativeSupported = isNativeTTSSupported();
-  const speakNative = useCallback3(
+  const speakNative = useCallback4(
     async (text, options = {}) => {
       if (Platform.isNative) {
         try {
@@ -894,7 +1389,7 @@ function useTTS() {
     },
     []
   );
-  const speakAPI = useCallback3(
+  const speakAPI = useCallback4(
     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 || "";
@@ -955,7 +1450,7 @@ function useTTS() {
     },
     []
   );
-  const speak = useCallback3(
+  const speak = useCallback4(
     async (options) => {
       const {
         text,
@@ -999,7 +1494,7 @@ function useTTS() {
     },
     [speakNative, speakAPI, isNativeSupported]
   );
-  const stop = useCallback3(() => {
+  const stop = useCallback4(() => {
     if ("speechSynthesis" in window && window.speechSynthesis.speaking) {
       window.speechSynthesis.cancel();
       utteranceRef.current = null;
@@ -1032,18 +1527,18 @@ function base64ToBlob(base64, mimeType) {
 }
 
 // src/hooks/useSTT.ts
-import { useState as useState5, useRef as useRef4, useCallback as useCallback4, useMemo, useEffect as useEffect3 } from "react";
+import { useState as useState6, useRef as useRef6, useCallback as useCallback5, useMemo as useMemo2, useEffect as useEffect4 } from "react";
 var Platform2 = {
   isNative: typeof window !== "undefined" && "Capacitor" in window,
   isWeb: typeof window !== "undefined" && !("Capacitor" in window)
 };
 function useSTT() {
-  const [isListening, setIsListening] = useState5(false);
-  const [transcript, setTranscript] = useState5("");
-  const [interimTranscript, setInterimTranscript] = useState5("");
-  const [error, setError] = useState5(null);
-  const recognitionRef = useRef4(null);
-  const isSupported = useMemo(() => {
+  const [isListening, setIsListening] = useState6(false);
+  const [transcript, setTranscript] = useState6("");
+  const [interimTranscript, setInterimTranscript] = useState6("");
+  const [error, setError] = useState6(null);
+  const recognitionRef = useRef6(null);
+  const isSupported = useMemo2(() => {
     if (Platform2.isNative) {
       return true;
     }
@@ -1052,7 +1547,7 @@ function useSTT() {
     }
     return false;
   }, []);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!isSupported || Platform2.isNative) return;
     const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
     if (!SpeechRecognition) return;
@@ -1090,7 +1585,7 @@ function useSTT() {
       }
     };
   }, [isSupported]);
-  const startListening = useCallback4(async () => {
+  const startListening = useCallback5(async () => {
     setError(null);
     setTranscript("");
     setInterimTranscript("");
@@ -1122,7 +1617,7 @@ function useSTT() {
       setIsListening(false);
     }
   }, []);
-  const stopListening = useCallback4(() => {
+  const stopListening = useCallback5(() => {
     if (Platform2.isNative) {
       setIsListening(false);
       return;
@@ -1131,7 +1626,7 @@ function useSTT() {
       recognitionRef.current.stop();
     }
   }, []);
-  const resetTranscript = useCallback4(() => {
+  const resetTranscript = useCallback5(() => {
     setTranscript("");
     setInterimTranscript("");
     setError(null);
@@ -1149,7 +1644,7 @@ function useSTT() {
 }
 
 // src/components/TTSButton.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function TTSButton({
   text,
   usePremiumVoices = false,
@@ -1177,7 +1672,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__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     "button",
     {
       onClick: handleClick,
@@ -1187,23 +1682,23 @@ function TTSButton({
       "aria-label": isPlaying ? "Stop speaking" : "Read aloud",
       children: isPlaying ? (
         // Stop icon (pulsing square)
-        /* @__PURE__ */ jsx8("svg", { className: iconSize, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }) })
+        /* @__PURE__ */ jsx9("svg", { className: iconSize, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }) })
       ) : error ? (
         // Error icon
-        /* @__PURE__ */ jsx8("svg", { className: iconSize, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) })
+        /* @__PURE__ */ jsx9("svg", { className: iconSize, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9("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__ */ jsx8("svg", { className: iconSize, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8("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__ */ jsx9("svg", { className: iconSize, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9("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
-import { useState as useState6, useEffect as useEffect4, useRef as useRef5 } from "react";
+import { useState as useState7, useEffect as useEffect5, useRef as useRef7 } from "react";
 
 // src/components/TTSPlaylistMenu.tsx
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
 var TTSPlaylistMenu = ({
   isOpen,
   onClose,
@@ -1224,7 +1719,7 @@ var TTSPlaylistMenu = ({
     border: "1px solid rgba(0, 0, 0, 0.1)",
     boxShadow: "0 8px 32px rgba(0, 0, 0, 0.2)"
   };
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     "div",
     {
       className: "fixed z-50",
@@ -1250,33 +1745,33 @@ var TTSPlaylistMenu = ({
               {
                 className: `p-4 border-b flex items-center justify-between ${theme === "dark" ? "border-white/10" : "border-black/10"}`,
                 children: [
-                  /* @__PURE__ */ jsx9(
+                  /* @__PURE__ */ jsx10(
                     "h3",
                     {
                       className: `font-semibold text-sm ${theme === "dark" ? "text-white" : "text-gray-900"}`,
                       children: "Readable Sections"
                     }
                   ),
-                  /* @__PURE__ */ jsx9(
+                  /* @__PURE__ */ jsx10(
                     "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__ */ jsx9("span", { className: "text-lg font-bold", "aria-hidden": "true", children: "\xD7" })
+                      children: /* @__PURE__ */ jsx10("span", { className: "text-lg font-bold", "aria-hidden": "true", children: "\xD7" })
                     }
                   )
                 ]
               }
             ),
-            /* @__PURE__ */ jsx9("div", { className: "overflow-y-auto max-h-80 p-2", children: widgets.length === 0 ? /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx10("div", { className: "overflow-y-auto max-h-80 p-2", children: widgets.length === 0 ? /* @__PURE__ */ jsx10(
               "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__ */ jsx9(
+            ) : widgets.map((widget) => /* @__PURE__ */ jsx10(
               "button",
               {
                 onClick: () => handleWidgetClick(widget),
@@ -1291,7 +1786,7 @@ var TTSPlaylistMenu = ({
                   {
                     className: `font-medium text-sm flex items-center ${theme === "dark" ? "text-white" : "text-gray-900"}`,
                     children: [
-                      /* @__PURE__ */ jsx9("span", { className: "mr-2", "aria-hidden": "true", children: "\u{1F50A}" }),
+                      /* @__PURE__ */ jsx10("span", { className: "mr-2", "aria-hidden": "true", children: "\u{1F50A}" }),
                       widget.label || `TTS Widget ${widget.id}`
                     ]
                   }
@@ -1514,7 +2009,7 @@ function extractTTSWidgets() {
 }
 
 // src/components/SubtitleOverlay.tsx
-import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 var opacityStates = {
   mobile: {
     idle: 1,
@@ -1558,47 +2053,47 @@ var SubtitleOverlay = ({
   resetTranscript,
   onSwitchToFullMode
 }) => {
-  const [overlayState, setOverlayState] = useState6("idle");
-  const [opacity, setOpacity] = useState6(1);
-  const [lastInputMethod, setLastInputMethod] = useState6(null);
-  const [isMobile, setIsMobile] = useState6(false);
-  const [messageOpacity, setMessageOpacity] = useState6(1);
-  const [expansionState, setExpansionState] = useState6(() => {
+  const [overlayState, setOverlayState] = useState7("idle");
+  const [opacity, setOpacity] = useState7(1);
+  const [lastInputMethod, setLastInputMethod] = useState7(null);
+  const [isMobile, setIsMobile] = useState7(false);
+  const [messageOpacity, setMessageOpacity] = useState7(1);
+  const [expansionState, setExpansionState] = useState7(() => {
     if (typeof window !== "undefined") {
       const saved = localStorage.getItem("subtitle-overlay-expanded");
       return saved === "true" ? "expanded" : "collapsed";
     }
     return "collapsed";
   });
-  const [touchStartY, setTouchStartY] = useState6(null);
-  const lastInputTimeRef = useRef5(Date.now());
-  const autoFadeTimerRef = useRef5(null);
-  const messageFadeTimerRef = useRef5(null);
-  const inputRef = useRef5(null);
-  const [suggestions, setSuggestions] = useState6([]);
-  const [currentSuggestionIndex, setCurrentSuggestionIndex] = useState6(0);
-  const [glassTheme, setGlassTheme] = useState6("auto");
-  const [detectedGlassTheme, setDetectedGlassTheme] = useState6("light");
-  const [hasTTSWidgets, setHasTTSWidgets] = useState6(false);
-  const [showPlaylist, setShowPlaylist] = useState6(false);
-  const [ttsWidgets, setTTSWidgets] = useState6([]);
-  const [touchStartYInput, setTouchStartYInput] = useState6(null);
-  const [completedActions, setCompletedActions] = useState6([]);
-  const [showCompletedActions, setShowCompletedActions] = useState6(false);
-  const [shouldShowAiResponse, setShouldShowAiResponse] = useState6(false);
-  const [latestActionOpacity, setLatestActionOpacity] = useState6(0);
-  const latestActionFadeRef = useRef5(null);
-  const lastUserMessageRef = useRef5("");
-  const lastShownAiMessageRef = useRef5("");
-  const justExpandedViaSlashRef = useRef5(false);
-  const [isDragging, setIsDragging] = useState6(false);
-  const [position, setPosition] = useState6({ x: 0, y: 0 });
-  const [dragStart, setDragStart] = useState6({ x: 0, y: 0 });
-  const dragRef = useRef5(null);
-  const dragDistanceRef = useRef5(0);
-  const lastEscapeTimeRef = useRef5(0);
+  const [touchStartY, setTouchStartY] = useState7(null);
+  const lastInputTimeRef = useRef7(Date.now());
+  const autoFadeTimerRef = useRef7(null);
+  const messageFadeTimerRef = useRef7(null);
+  const inputRef = useRef7(null);
+  const [suggestions, setSuggestions] = useState7([]);
+  const [currentSuggestionIndex, setCurrentSuggestionIndex] = useState7(0);
+  const [glassTheme, setGlassTheme] = useState7("auto");
+  const [detectedGlassTheme, setDetectedGlassTheme] = useState7("light");
+  const [hasTTSWidgets, setHasTTSWidgets] = useState7(false);
+  const [showPlaylist, setShowPlaylist] = useState7(false);
+  const [ttsWidgets, setTTSWidgets] = useState7([]);
+  const [touchStartYInput, setTouchStartYInput] = useState7(null);
+  const [completedActions, setCompletedActions] = useState7([]);
+  const [showCompletedActions, setShowCompletedActions] = useState7(false);
+  const [shouldShowAiResponse, setShouldShowAiResponse] = useState7(false);
+  const [latestActionOpacity, setLatestActionOpacity] = useState7(0);
+  const latestActionFadeRef = useRef7(null);
+  const lastUserMessageRef = useRef7("");
+  const lastShownAiMessageRef = useRef7("");
+  const justExpandedViaSlashRef = useRef7(false);
+  const [isDragging, setIsDragging] = useState7(false);
+  const [position, setPosition] = useState7({ x: 0, y: 0 });
+  const [dragStart, setDragStart] = useState7({ x: 0, y: 0 });
+  const dragRef = useRef7(null);
+  const dragDistanceRef = useRef7(0);
+  const lastEscapeTimeRef = useRef7(0);
   const DOUBLE_ESCAPE_THRESHOLD_MS = 500;
-  useEffect4(() => {
+  useEffect5(() => {
     const checkMobile = () => {
       const mobile = window.innerWidth < 768;
       setIsMobile(mobile);
@@ -1607,7 +2102,7 @@ var SubtitleOverlay = ({
     window.addEventListener("resize", checkMobile);
     return () => window.removeEventListener("resize", checkMobile);
   }, []);
-  useEffect4(() => {
+  useEffect5(() => {
     if (autoFadeTimerRef.current) {
       clearTimeout(autoFadeTimerRef.current);
       autoFadeTimerRef.current = null;
@@ -1623,7 +2118,7 @@ var SubtitleOverlay = ({
       }
     };
   }, [overlayState, isMobile]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (messageFadeTimerRef.current) {
       clearTimeout(messageFadeTimerRef.current);
       messageFadeTimerRef.current = null;
@@ -1659,7 +2154,7 @@ var SubtitleOverlay = ({
       }
     };
   }, [messages.filter((m) => m.type === "ai").slice(-1)[0]?.text, shouldShowAiResponse]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (sttTranscript && voiceEnabled && resetTranscript) {
       onSendMessage(sttTranscript);
       resetTranscript();
@@ -1676,11 +2171,11 @@ var SubtitleOverlay = ({
       triggerActionFade();
     }
   }, [sttTranscript, voiceEnabled, resetTranscript, onSendMessage]);
-  useEffect4(() => {
+  useEffect5(() => {
     const pageSuggestions = extractPageSuggestions();
     setSuggestions(pageSuggestions);
   }, []);
-  useEffect4(() => {
+  useEffect5(() => {
     const detectWidgets = async () => {
       const detected = await detectTTSWidgets();
       setHasTTSWidgets(detected);
@@ -1715,7 +2210,7 @@ var SubtitleOverlay = ({
       window.removeEventListener("supernal-tts-ready", handleReady);
     };
   }, []);
-  useEffect4(() => {
+  useEffect5(() => {
     if (glassTheme !== "auto") return;
     const { glassTheme: detected } = detectBackgroundContext();
     setDetectedGlassTheme(detected);
@@ -1731,7 +2226,7 @@ var SubtitleOverlay = ({
     window.addEventListener("scroll", handleScroll);
     return () => window.removeEventListener("scroll", handleScroll);
   }, [glassTheme]);
-  useEffect4(() => {
+  useEffect5(() => {
     const handleGlobalKeyDown = (e) => {
       if (e.key === "Escape") {
         const now = Date.now();
@@ -1778,12 +2273,12 @@ var SubtitleOverlay = ({
     window.addEventListener("keydown", handleGlobalKeyDown);
     return () => window.removeEventListener("keydown", handleGlobalKeyDown);
   }, [expansionState, onSwitchToFullMode, voiceEnabled, onMicClick]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (typeof window !== "undefined") {
       localStorage.setItem("subtitle-overlay-expanded", expansionState === "expanded" ? "true" : "false");
     }
   }, [expansionState]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (expansionState === "expanded" && inputRef.current) {
       setTimeout(() => {
         inputRef.current?.focus();
@@ -1797,7 +2292,7 @@ var SubtitleOverlay = ({
       }, 100);
     }
   }, [expansionState]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (isMobile) return;
     const handleMouseMove = (e) => {
       if (!isDragging) return;
@@ -1821,7 +2316,7 @@ var SubtitleOverlay = ({
       window.removeEventListener("mouseup", handleMouseUp);
     };
   }, [isDragging, dragStart, isMobile]);
-  useEffect4(() => {
+  useEffect5(() => {
     const timeSinceLastInput = Date.now() - lastInputTimeRef.current;
     const context = {
       isListening,
@@ -1982,7 +2477,7 @@ var SubtitleOverlay = ({
   };
   if (expansionState === "collapsed") {
     return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-      hasTTSWidgets && /* @__PURE__ */ jsx10(
+      hasTTSWidgets && /* @__PURE__ */ jsx11(
         "button",
         {
           type: "button",
@@ -2001,10 +2496,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__ */ jsx10("span", { className: "text-xl font-bold select-none", "aria-hidden": "true", children: "~+" })
+          children: /* @__PURE__ */ jsx11("span", { className: "text-xl font-bold select-none", "aria-hidden": "true", children: "~+" })
         }
       ),
-      /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx11(
         TTSPlaylistMenu,
         {
           isOpen: showPlaylist,
@@ -2014,7 +2509,7 @@ var SubtitleOverlay = ({
           onWidgetSelect: handleWidgetSelect
         }
       ),
-      /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx11(
         "div",
         {
           className: "fixed",
@@ -2024,7 +2519,7 @@ var SubtitleOverlay = ({
             zIndex: 55
           },
           "data-testid": "subtitle-overlay-collapsed",
-          children: /* @__PURE__ */ jsx10(
+          children: /* @__PURE__ */ jsx11(
             "button",
             {
               type: "button",
@@ -2040,7 +2535,7 @@ var SubtitleOverlay = ({
               title: getIconTitle(),
               "data-testid": "voice-input-button",
               "aria-label": getIconTitle(),
-              children: /* @__PURE__ */ jsx10("span", { className: "text-xl font-bold select-none", "aria-hidden": "true", children: getIcon() })
+              children: /* @__PURE__ */ jsx11("span", { className: "text-xl font-bold select-none", "aria-hidden": "true", children: getIcon() })
             }
           )
         }
@@ -2073,7 +2568,7 @@ var SubtitleOverlay = ({
       role: "complementary",
       "aria-label": "Chat overlay",
       children: [
-        !isMobile && /* @__PURE__ */ jsx10(
+        !isMobile && /* @__PURE__ */ jsx11(
           "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",
@@ -2101,8 +2596,8 @@ var SubtitleOverlay = ({
             "data-testid": "completed-actions-list",
             children: [
               /* @__PURE__ */ jsxs6("div", { className: "font-medium opacity-70 mb-2 flex items-center justify-between", children: [
-                /* @__PURE__ */ jsx10("span", { children: "Completed Actions" }),
-                /* @__PURE__ */ jsx10(
+                /* @__PURE__ */ jsx11("span", { children: "Completed Actions" }),
+                /* @__PURE__ */ jsx11(
                   "button",
                   {
                     onClick: () => setShowCompletedActions(false),
@@ -2112,9 +2607,9 @@ var SubtitleOverlay = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx10("div", { className: "space-y-1", children: completedActions.map((action) => /* @__PURE__ */ jsxs6("div", { className: "text-xs opacity-80 border-l-2 border-green-500 pl-2", children: [
-                /* @__PURE__ */ jsx10("div", { className: "font-medium", children: action.tool }),
-                /* @__PURE__ */ jsx10("div", { className: "opacity-70", children: action.description })
+              /* @__PURE__ */ jsx11("div", { className: "space-y-1", children: completedActions.map((action) => /* @__PURE__ */ jsxs6("div", { className: "text-xs opacity-80 border-l-2 border-green-500 pl-2", children: [
+                /* @__PURE__ */ jsx11("div", { className: "font-medium", children: action.tool }),
+                /* @__PURE__ */ jsx11("div", { className: "opacity-70", children: action.description })
               ] }, action.id)) })
             ]
           }
@@ -2141,21 +2636,21 @@ var SubtitleOverlay = ({
                     className: "border-l-2 border-green-500 pl-2 mb-1",
                     style: { opacity: latestActionOpacity, transition: "opacity 0.6s ease-out" },
                     children: [
-                      /* @__PURE__ */ jsx10("span", { className: "font-medium", children: latest.tool }),
-                      /* @__PURE__ */ jsx10("span", { className: "opacity-70 ml-1", children: latest.description })
+                      /* @__PURE__ */ jsx11("span", { className: "font-medium", children: latest.tool }),
+                      /* @__PURE__ */ jsx11("span", { className: "opacity-70 ml-1", children: latest.description })
                     ]
                   }
                 );
               })(),
               lastAiMessage && messageOpacity > 0 && /* @__PURE__ */ jsxs6("div", { style: { opacity: messageOpacity, transition: "opacity 0.8s ease-out" }, children: [
-                /* @__PURE__ */ jsx10("span", { className: "font-medium opacity-70", children: "AI:" }),
+                /* @__PURE__ */ jsx11("span", { className: "font-medium opacity-70", children: "AI:" }),
                 " ",
-                /* @__PURE__ */ jsx10("span", { className: "text-sm", children: lastAiMessage.text })
+                /* @__PURE__ */ jsx11("span", { className: "text-sm", children: lastAiMessage.text })
               ] })
             ]
           }
         ),
-        completedActions.length > 0 && !showCompletedActions && /* @__PURE__ */ jsx10("div", { className: "flex justify-center mb-1", children: /* @__PURE__ */ jsx10(
+        completedActions.length > 0 && !showCompletedActions && /* @__PURE__ */ jsx11("div", { className: "flex justify-center mb-1", children: /* @__PURE__ */ jsx11(
           "button",
           {
             type: "button",
@@ -2171,11 +2666,11 @@ var SubtitleOverlay = ({
             title: `${completedActions.length} previous actions`,
             "data-testid": "completed-actions-toggle",
             "aria-label": `Show ${completedActions.length} completed actions`,
-            children: /* @__PURE__ */ jsx10("svg", { width: "16", height: "8", viewBox: "0 0 16 8", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx10("path", { d: "M2 6L8 2L14 6" }) })
+            children: /* @__PURE__ */ jsx11("svg", { width: "16", height: "8", viewBox: "0 0 16 8", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx11("path", { d: "M2 6L8 2L14 6" }) })
           }
         ) }),
         /* @__PURE__ */ jsxs6("div", { className: "flex items-center space-x-2", children: [
-          hasTTSWidgets && /* @__PURE__ */ jsx10(
+          hasTTSWidgets && /* @__PURE__ */ jsx11(
             "button",
             {
               type: "button",
@@ -2190,7 +2685,7 @@ 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__ */ jsx10("span", { className: "text-lg font-bold select-none", "aria-hidden": "true", children: "~+" })
+              children: /* @__PURE__ */ jsx11("span", { className: "text-lg font-bold select-none", "aria-hidden": "true", children: "~+" })
             }
           ),
           /* @__PURE__ */ jsxs6(
@@ -2202,7 +2697,7 @@ var SubtitleOverlay = ({
                 border: effectiveGlassTheme === "dark" ? "1px solid rgba(255, 255, 255, 0.12)" : "1px solid rgba(0, 0, 0, 0.1)"
               },
               children: [
-                /* @__PURE__ */ jsx10(
+                /* @__PURE__ */ jsx11(
                   "input",
                   {
                     ref: inputRef,
@@ -2222,7 +2717,7 @@ var SubtitleOverlay = ({
                     "aria-label": "Chat message input"
                   }
                 ),
-                isListening && /* @__PURE__ */ jsx10("div", { className: "flex space-x-1 items-center", "aria-hidden": "true", "data-testid": "subtitle-overlay-waveform", children: [...Array(5)].map((_, i) => /* @__PURE__ */ jsx10(
+                isListening && /* @__PURE__ */ jsx11("div", { className: "flex space-x-1 items-center", "aria-hidden": "true", "data-testid": "subtitle-overlay-waveform", children: [...Array(5)].map((_, i) => /* @__PURE__ */ jsx11(
                   "div",
                   {
                     className: "w-0.5 bg-red-500 rounded-full animate-pulse",
@@ -2233,7 +2728,7 @@ var SubtitleOverlay = ({
                   },
                   i
                 )) }),
-                inputValue.trim() && /* @__PURE__ */ jsx10(
+                inputValue.trim() && /* @__PURE__ */ jsx11(
                   "button",
                   {
                     type: "button",
@@ -2249,10 +2744,10 @@ var SubtitleOverlay = ({
                     title: "Send message",
                     "data-testid": "send-button",
                     "aria-label": "Send message",
-                    children: /* @__PURE__ */ jsx10("span", { className: "text-base select-none", "aria-hidden": "true", children: "\u2192" })
+                    children: /* @__PURE__ */ jsx11("span", { className: "text-base select-none", "aria-hidden": "true", children: "\u2192" })
                   }
                 ),
-                voiceEnabled && /* @__PURE__ */ jsx10(
+                voiceEnabled && /* @__PURE__ */ jsx11(
                   "button",
                   {
                     type: "button",
@@ -2272,10 +2767,10 @@ var SubtitleOverlay = ({
                     title: getIconTitle(),
                     "data-testid": "voice-input-button",
                     "aria-label": getIconTitle(),
-                    children: /* @__PURE__ */ jsx10("span", { className: "text-lg font-bold select-none", "aria-hidden": "true", children: getIcon() })
+                    children: /* @__PURE__ */ jsx11("span", { className: "text-lg font-bold select-none", "aria-hidden": "true", children: getIcon() })
                   }
                 ),
-                /* @__PURE__ */ jsx10(
+                /* @__PURE__ */ jsx11(
                   "button",
                   {
                     type: "button",
@@ -2290,7 +2785,7 @@ var SubtitleOverlay = ({
                     title: "Collapse",
                     "data-testid": "collapse-button",
                     "aria-label": "Collapse overlay",
-                    children: /* @__PURE__ */ jsx10("span", { className: "text-lg font-bold select-none", "aria-hidden": "true", children: "\xD7" })
+                    children: /* @__PURE__ */ jsx11("span", { className: "text-lg font-bold select-none", "aria-hidden": "true", children: "\xD7" })
                   }
                 )
               ]
@@ -2303,23 +2798,23 @@ var SubtitleOverlay = ({
 };
 
 // src/components/SlashCommand/useSlashCommand.ts
-import { useState as useState7, useMemo as useMemo2, useCallback as useCallback5, useRef as useRef6, useEffect as useEffect5 } from "react";
+import { useState as useState8, useMemo as useMemo3, useCallback as useCallback6, useRef as useRef8, useEffect as useEffect6 } from "react";
 import { ToolRegistry } from "@supernal/interface/browser";
 function useSlashCommand(inputValue, onSelect) {
-  const [selectedIndex, setSelectedIndex] = useState7(0);
-  const prevOpenRef = useRef6(false);
+  const [selectedIndex, setSelectedIndex] = useState8(0);
+  const prevOpenRef = useRef8(false);
   const isOpen = inputValue.startsWith("/");
   const query = isOpen ? inputValue.slice(1) : "";
-  useEffect5(() => {
+  useEffect6(() => {
     if (isOpen && !prevOpenRef.current) {
       setSelectedIndex(0);
     }
     prevOpenRef.current = isOpen;
   }, [isOpen]);
-  useEffect5(() => {
+  useEffect6(() => {
     setSelectedIndex(0);
   }, [query]);
-  const filteredTools = useMemo2(() => {
+  const filteredTools = useMemo3(() => {
     if (!isOpen) return [];
     const locationTools = ToolRegistry.getToolsByLocation();
     const aiTools = locationTools.filter((t) => t.aiEnabled);
@@ -2336,13 +2831,13 @@ function useSlashCommand(inputValue, onSelect) {
       return fields.some((f) => f.includes(q));
     });
   }, [isOpen, query]);
-  const close = useCallback5(() => {
+  const close = useCallback6(() => {
   }, []);
-  const selectTool = useCallback5((tool) => {
+  const selectTool = useCallback6((tool) => {
     const command = tool.examples?.[0] || tool.name?.toLowerCase() || tool.toolId;
     onSelect(command);
   }, [onSelect]);
-  const onKeyDown = useCallback5((e) => {
+  const onKeyDown = useCallback6((e) => {
     if (!isOpen || filteredTools.length === 0) return;
     if (e.key === "ArrowDown") {
       e.preventDefault();
@@ -2372,8 +2867,8 @@ function useSlashCommand(inputValue, onSelect) {
 }
 
 // src/components/SlashCommand/SlashCommandPopup.tsx
-import { useEffect as useEffect6, useRef as useRef7 } from "react";
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { useEffect as useEffect7, useRef as useRef9 } from "react";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 var MAX_VISIBLE_ITEMS = 8;
 var SlashCommandPopup = ({
   tools,
@@ -2381,12 +2876,12 @@ var SlashCommandPopup = ({
   onSelect,
   onClose
 }) => {
-  const listRef = useRef7(null);
-  const selectedRef = useRef7(null);
-  useEffect6(() => {
+  const listRef = useRef9(null);
+  const selectedRef = useRef9(null);
+  useEffect7(() => {
     selectedRef.current?.scrollIntoView({ block: "nearest" });
   }, [selectedIndex]);
-  useEffect6(() => {
+  useEffect7(() => {
     const handleClickOutside = (e) => {
       if (listRef.current && !listRef.current.contains(e.target)) {
         onClose();
@@ -2461,9 +2956,9 @@ var SlashCommandPopup = ({
                     "/",
                     tool.toolId
                   ] }),
-                  /* @__PURE__ */ jsx11("span", { style: { color: "rgba(255,255,255,0.7)", fontWeight: 400, marginLeft: 8 }, children: tool.name })
+                  /* @__PURE__ */ jsx12("span", { style: { color: "rgba(255,255,255,0.7)", fontWeight: 400, marginLeft: 8 }, children: tool.name })
                 ] }),
-                tool.description && /* @__PURE__ */ jsx11("div", { style: {
+                tool.description && /* @__PURE__ */ jsx12("div", { style: {
                   fontSize: 11,
                   color: "rgba(255,255,255,0.4)",
                   marginTop: 2,
@@ -2483,13 +2978,13 @@ var SlashCommandPopup = ({
           color: "rgba(255,255,255,0.3)",
           fontSize: 10
         }, children: [
-          /* @__PURE__ */ jsx11("kbd", { style: { padding: "1px 3px", borderRadius: 3, border: "1px solid rgba(255,255,255,0.15)", fontSize: 9 }, children: "\u2191\u2193" }),
+          /* @__PURE__ */ jsx12("kbd", { style: { padding: "1px 3px", borderRadius: 3, border: "1px solid rgba(255,255,255,0.15)", fontSize: 9 }, children: "\u2191\u2193" }),
           " navigate",
           " ",
-          /* @__PURE__ */ jsx11("kbd", { style: { padding: "1px 3px", borderRadius: 3, border: "1px solid rgba(255,255,255,0.15)", fontSize: 9 }, children: "Enter" }),
+          /* @__PURE__ */ jsx12("kbd", { style: { padding: "1px 3px", borderRadius: 3, border: "1px solid rgba(255,255,255,0.15)", fontSize: 9 }, children: "Enter" }),
           " select",
           " ",
-          /* @__PURE__ */ jsx11("kbd", { style: { padding: "1px 3px", borderRadius: 3, border: "1px solid rgba(255,255,255,0.15)", fontSize: 9 }, children: "Esc" }),
+          /* @__PURE__ */ jsx12("kbd", { style: { padding: "1px 3px", borderRadius: 3, border: "1px solid rgba(255,255,255,0.15)", fontSize: 9 }, children: "Esc" }),
           " dismiss"
         ] })
       ]
@@ -2498,7 +2993,7 @@ var SlashCommandPopup = ({
 };
 
 // src/components/ChatBubble/ChatBubble.tsx
-import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 var ChatBubble = ({
   messages,
   onSendMessage,
@@ -2513,65 +3008,69 @@ var ChatBubble = ({
 }) => {
   const mergedConfig = { ...DEFAULT_CONFIG, ...userConfig };
   if (userConfig?.logo && !userConfig?.avatar) {
-    mergedConfig.avatar = /* @__PURE__ */ jsx12("img", { src: userConfig.logo, alt: "Supernal", className: "w-6 h-6" });
+    mergedConfig.avatar = /* @__PURE__ */ jsx13("img", { src: userConfig.logo, alt: "Supernal", className: "w-6 h-6" });
   }
   const config = mergedConfig;
-  const [isExpanded, setIsExpanded] = useState8(defaultExpanded);
-  const [isMinimized, setIsMinimized] = useState8(false);
-  const [inputValue, setInputValue] = useState8("");
-  const [lastReadMessageCount, setLastReadMessageCount] = useState8(0);
-  const [showWelcome, setShowWelcome] = useState8(
+  const [isExpanded, setIsExpanded] = useState9(defaultExpanded);
+  const [isMinimized, setIsMinimized] = useState9(false);
+  const [inputValue, setInputValue] = useState9("");
+  const [lastReadMessageCount, setLastReadMessageCount] = useState9(0);
+  const [showWelcome, setShowWelcome] = useState9(
     config.welcome?.enabled && messages.length === 0
   );
-  const [isDragging, setIsDragging] = useState8(false);
-  const [dragInitiated, setDragInitiated] = useState8(false);
-  const [isDocked, setIsDocked] = useState8(true);
-  const [dockPosition, setDockPosition] = useState8(position);
-  const [panelPosition, setPanelPosition] = useState8({ x: 0, y: 0 });
-  const [theme, setTheme] = useState8("light");
-  const [showMoreMenu, setShowMoreMenu] = useState8(false);
-  const [, setTimestampTick] = useState8(0);
-  const [localGlassMode, setLocalGlassMode] = useState8(config.glassMode ?? true);
-  const [glassOpacity, setGlassOpacity] = useState8("medium");
-  const [notifications, setNotifications] = useState8(true);
-  const [voiceEnabled, setVoiceEnabled] = useState8(true);
-  const [usePremiumVoices, setUsePremiumVoices] = useState8(false);
-  const [autoReadResponses, setAutoReadResponses] = useState8(false);
-  const [ttsSpeed, setTtsSpeed] = useState8(1);
-  const [sttAutoRecordTimeout, setSttAutoRecordTimeout] = useState8(5e3);
-  const [sttAutoExecute, setSttAutoExecute] = useState8(true);
-  const sttAutoRecordTimeoutRef = useRef8(null);
+  const [isDragging, setIsDragging] = useState9(false);
+  const [dragInitiated, setDragInitiated] = useState9(false);
+  const [isDocked, setIsDocked] = useState9(true);
+  const [dockPosition, setDockPosition] = useState9(position);
+  const [panelPosition, setPanelPosition] = useState9({ x: 0, y: 0 });
+  const [theme, setTheme] = useState9("light");
+  const [showMoreMenu, setShowMoreMenu] = useState9(false);
+  const [, setTimestampTick] = useState9(0);
+  const [localGlassMode, setLocalGlassMode] = useState9(config.glassMode ?? true);
+  const [glassOpacity, setGlassOpacity] = useState9("medium");
+  const [notifications, setNotifications] = useState9(true);
+  const [voiceEnabled, setVoiceEnabled] = useState9(true);
+  const [usePremiumVoices, setUsePremiumVoices] = useState9(false);
+  const [autoReadResponses, setAutoReadResponses] = useState9(false);
+  const [ttsSpeed, setTtsSpeed] = useState9(1);
+  const [sttAutoRecordTimeout, setSttAutoRecordTimeout] = useState9(5e3);
+  const [sttAutoExecute, setSttAutoExecute] = useState9(true);
+  const sttAutoRecordTimeoutRef = useRef10(null);
   const { speak: speakTTS, stop: stopTTS, isPlaying: isTTSPlaying } = useTTS();
   const { startListening, stopListening, transcript: sttTranscript, isListening, resetTranscript } = useSTT();
+  const apiKey = useApiKeyOptional();
+  const [showApiKeyInput, setShowApiKeyInput] = useState9(false);
+  const [apiKeyInputValue, setApiKeyInputValue] = useState9("");
+  const [showApiKey, setShowApiKey] = useState9(false);
   const slashCommand = useSlashCommand(inputValue, (command) => {
     setInputValue(command);
     setTimeout(() => inputRef.current?.focus(), 0);
   });
-  const [displayMode, setDisplayMode] = useState8(propDisplayMode);
-  const [drawerSide, setDrawerSide] = useState8(propDrawerSide);
-  const displayModeLoadedFromStorage = useRef8(false);
-  useEffect7(() => {
+  const [displayMode, setDisplayMode] = useState9(propDisplayMode);
+  const [drawerSide, setDrawerSide] = useState9(propDrawerSide);
+  const displayModeLoadedFromStorage = useRef10(false);
+  useEffect8(() => {
     if (!displayModeLoadedFromStorage.current) {
       setDisplayMode(propDisplayMode);
     }
   }, [propDisplayMode]);
-  const [drawerOpen, setDrawerOpen] = useState8(false);
-  const [touchStart, setTouchStart] = useState8(null);
-  const [swipeProgress, setSwipeProgress] = useState8(0);
-  const [isMobile, setIsMobile] = useState8(false);
-  const lastEscapeTimeRef = useRef8(0);
+  const [drawerOpen, setDrawerOpen] = useState9(false);
+  const [touchStart, setTouchStart] = useState9(null);
+  const [swipeProgress, setSwipeProgress] = useState9(0);
+  const [isMobile, setIsMobile] = useState9(false);
+  const lastEscapeTimeRef = useRef10(0);
   const DOUBLE_ESCAPE_THRESHOLD_MS = 500;
-  const [isMac, setIsMac] = useState8(false);
-  const [currentHintIndex, setCurrentHintIndex] = useState8(0);
-  const [isHydrated, setIsHydrated] = useState8(false);
-  useEffect7(() => {
+  const [isMac, setIsMac] = useState9(false);
+  const [currentHintIndex, setCurrentHintIndex] = useState9(0);
+  const [isHydrated, setIsHydrated] = useState9(false);
+  useEffect8(() => {
     if (typeof window !== "undefined") {
       const platform = window.navigator.platform.toLowerCase();
       const isMacPlatform = platform.includes("mac");
       setIsMac(isMacPlatform);
     }
   }, []);
-  const inputHints = useMemo3(() => {
+  const inputHints = useMemo4(() => {
     const modKey = isMac ? "Cmd" : "Ctrl";
     return [
       `Press ${modKey}+/ to start voice recording`,
@@ -2580,14 +3079,14 @@ var ChatBubble = ({
       sttAutoExecute ? `Voice commands execute automatically` : "Voice commands fill this input"
     ];
   }, [isMac, sttAutoExecute]);
-  useEffect7(() => {
+  useEffect8(() => {
     setCurrentHintIndex((prev) => (prev + 1) % inputHints.length);
   }, [messages.length, inputHints.length]);
-  const messagesEndRef = useRef8(null);
-  const inputRef = useRef8(null);
-  const panelRef = useRef8(null);
-  const dragRef = useRef8(null);
-  const rafRef = useRef8(null);
+  const messagesEndRef = useRef10(null);
+  const inputRef = useRef10(null);
+  const panelRef = useRef10(null);
+  const dragRef = useRef10(null);
+  const rafRef = useRef10(null);
   const formatRelativeTime = (timestamp) => {
     const now = /* @__PURE__ */ new Date();
     const messageTime = new Date(timestamp);
@@ -2602,7 +3101,7 @@ var ChatBubble = ({
     if (diffDays < 7) return `${diffDays} ${diffDays === 1 ? "day" : "days"} ago`;
     return messageTime.toLocaleDateString();
   };
-  useEffect7(() => {
+  useEffect8(() => {
     if (variant === "floating" && panelPosition.x === 0 && panelPosition.y === 0) {
       try {
         const stored = localStorage.getItem(storageKey);
@@ -2624,7 +3123,7 @@ var ChatBubble = ({
       }
     }
   }, [variant, storageKey, panelPosition.x, panelPosition.y]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (variant === "full" || variant === "drawer" || variant === "subtitle") {
       try {
         const stored = localStorage.getItem(storageKey);
@@ -2702,12 +3201,12 @@ var ChatBubble = ({
     }
     setIsHydrated(true);
   }, [storageKey, variant, defaultExpanded, position]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (variant !== "full" && variant !== "drawer" && variant !== "subtitle") {
       setIsHydrated(true);
     }
   }, [variant]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!isExpanded || isDocked || !panelRef.current) return;
     const checkBounds = () => {
       const rect = panelRef.current?.getBoundingClientRect();
@@ -2724,7 +3223,7 @@ var ChatBubble = ({
     const timeoutId = setTimeout(checkBounds, 100);
     return () => clearTimeout(timeoutId);
   }, [isExpanded, isDocked]);
-  useEffect7(() => {
+  useEffect8(() => {
     const isSubtitleMode = displayMode === "subtitle" || displayMode === "auto" && variant === "subtitle";
     if (isSubtitleMode) return;
     const handleKeyDown = (e) => {
@@ -2757,13 +3256,13 @@ var ChatBubble = ({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [isExpanded, isDocked, position, variant, displayMode, isMobile]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (typeof window !== "undefined") {
       const isDark = document.documentElement.getAttribute("data-theme") === "dark";
       setTheme(isDark ? "dark" : "light");
     }
   }, []);
-  useEffect7(() => {
+  useEffect8(() => {
     if (typeof window === "undefined") return;
     const mediaQuery = window.matchMedia("(max-width: 767px)");
     const handleChange = (e) => {
@@ -2773,26 +3272,26 @@ var ChatBubble = ({
     mediaQuery.addEventListener("change", handleChange);
     return () => mediaQuery.removeEventListener("change", handleChange);
   }, []);
-  const currentVariant = React8.useMemo(() => {
+  const currentVariant = React9.useMemo(() => {
     if (displayMode !== "auto") {
       return displayMode;
     }
     return isMobile && variant === "full" ? "subtitle" : variant;
   }, [displayMode, isMobile, variant]);
-  const prevVariantRef = React8.useRef(variant);
-  useEffect7(() => {
+  const prevVariantRef = React9.useRef(variant);
+  useEffect8(() => {
     if (prevVariantRef.current !== variant && displayMode !== "auto") {
       setDisplayMode("auto");
       prevVariantRef.current = variant;
     }
   }, [variant, displayMode]);
-  useEffect7(() => {
+  useEffect8(() => {
     const interval = setInterval(() => {
       setTimestampTick((tick) => tick + 1);
     }, 6e4);
     return () => clearInterval(interval);
   }, []);
-  useEffect7(() => {
+  useEffect8(() => {
     if (variant === "full" || variant === "drawer" || variant === "subtitle") {
       try {
         localStorage.setItem(
@@ -2824,7 +3323,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();
-  useEffect7(() => {
+  useEffect8(() => {
     registerInput((text, submit = false) => {
       setInputValue(text);
       if (!isExpanded && variant === "full") {
@@ -2841,7 +3340,7 @@ var ChatBubble = ({
   }, [registerInput, onSendMessage]);
   const unreadCount = Math.max(0, messages.length - lastReadMessageCount);
   const hasUnread = unreadCount > 0 && !isExpanded && variant === "full";
-  useEffect7(() => {
+  useEffect8(() => {
     if (isExpanded || variant === "floating") {
       messagesEndRef.current?.scrollIntoView({ behavior: "auto" });
       setLastReadMessageCount(messages.length);
@@ -2853,12 +3352,12 @@ var ChatBubble = ({
       }
     }
   }, [messages, isExpanded, variant]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (isExpanded && variant === "full") {
       inputRef.current?.focus();
     }
   }, [isExpanded, variant]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!voiceEnabled || !autoReadResponses || messages.length === 0) return;
     const lastMessage = messages[messages.length - 1];
     if (lastMessage.type === "ai") {
@@ -2870,7 +3369,7 @@ var ChatBubble = ({
       });
     }
   }, [messages, voiceEnabled, autoReadResponses, ttsSpeed, usePremiumVoices, speakTTS]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (currentVariant === "subtitle") return;
     if (sttTranscript && voiceEnabled) {
       setInputValue(sttTranscript);
@@ -2885,7 +3384,7 @@ var ChatBubble = ({
       }
     }
   }, [sttTranscript, voiceEnabled, resetTranscript, sttAutoExecute, onSendMessage, currentVariant]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (currentVariant === "subtitle") return;
     const handleKeyDown = (e) => {
       if ((e.metaKey || e.ctrlKey) && e.key === "/" && voiceEnabled) {
@@ -2943,7 +3442,7 @@ var ChatBubble = ({
       }
     };
   }, [currentVariant, isExpanded, showMoreMenu, voiceEnabled, isListening, startListening, stopListening, sttAutoRecordTimeout]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (currentVariant !== "drawer") return;
     const handleKeyDown = (e) => {
       if (e.key === "Escape" && drawerOpen) {
@@ -2953,7 +3452,7 @@ var ChatBubble = ({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [currentVariant, drawerOpen]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!showMoreMenu) return;
     const handleClickOutside = (e) => {
       const target = e.target;
@@ -2964,7 +3463,7 @@ var ChatBubble = ({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [showMoreMenu]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (typeof window === "undefined" || currentVariant !== "drawer") return;
     const EDGE_ZONE_PX = 20;
     const SWIPE_THRESHOLD = 0.4;
@@ -3049,7 +3548,7 @@ var ChatBubble = ({
       };
     }
   };
-  useEffect7(() => {
+  useEffect8(() => {
     if (!dragInitiated || !dragRef.current) return;
     const dragThresholdPx = 5;
     const handleMouseMove = (e) => {
@@ -3212,7 +3711,7 @@ var ChatBubble = ({
     return null;
   }
   if (currentVariant === "subtitle") {
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       SubtitleOverlay,
       {
         messages,
@@ -3245,7 +3744,7 @@ var ChatBubble = ({
   if (currentVariant === "drawer") {
     const drawerWidth = "100vw";
     return /* @__PURE__ */ jsxs8(Fragment3, { children: [
-      (drawerOpen || swipeProgress > 0) && /* @__PURE__ */ jsx12(
+      (drawerOpen || swipeProgress > 0) && /* @__PURE__ */ jsx13(
         "div",
         {
           className: "fixed inset-0 bg-black z-[49998] transition-opacity duration-300",
@@ -3279,28 +3778,28 @@ var ChatBubble = ({
             /* @__PURE__ */ jsxs8("div", { className: `${THEME_CLASSES.bg.header} ${glassMode ? THEME_CLASSES.bg.headerGradient : THEME_CLASSES.bg.headerLight}`, children: [
               /* @__PURE__ */ jsxs8("div", { className: "flex items-center space-x-3", children: [
                 config.avatar && /* @__PURE__ */ jsxs8("div", { className: "relative flex-shrink-0", children: [
-                  /* @__PURE__ */ jsx12(Avatar, { avatar: config.avatar }),
-                  /* @__PURE__ */ jsx12("div", { className: "absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white" })
+                  /* @__PURE__ */ jsx13(Avatar, { avatar: config.avatar }),
+                  /* @__PURE__ */ jsx13("div", { className: "absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white" })
                 ] }),
-                config.title && /* @__PURE__ */ jsx12("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx12("h3", { className: THEME_CLASSES.text.title, children: config.title }) })
+                config.title && /* @__PURE__ */ jsx13("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx13("h3", { className: THEME_CLASSES.text.title, children: config.title }) })
               ] }),
-              /* @__PURE__ */ jsx12("button", { onClick: () => setDrawerOpen(false), className: THEME_CLASSES.button.close, title: "Close drawer", children: /* @__PURE__ */ jsx12("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
+              /* @__PURE__ */ jsx13("button", { onClick: () => setDrawerOpen(false), className: THEME_CLASSES.button.close, title: "Close drawer", children: /* @__PURE__ */ jsx13("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
             ] }),
-            /* @__PURE__ */ jsxs8("div", { className: "flex-1 overflow-y-auto p-4 space-y-2", children: [
+            /* @__PURE__ */ jsxs8("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__ */ jsxs8("div", { className: THEME_CLASSES.welcome.container, children: [
-                config.welcome.title && /* @__PURE__ */ jsx12("h4", { className: THEME_CLASSES.welcome.title, style: INLINE_STYLES.welcomeTitle(theme === "dark"), children: config.welcome.title }),
-                config.welcome.content && /* @__PURE__ */ jsx12("p", { className: THEME_CLASSES.welcome.content, style: INLINE_STYLES.welcomeContent(theme === "dark"), children: config.welcome.content })
+                config.welcome.title && /* @__PURE__ */ jsx13("h4", { className: THEME_CLASSES.welcome.title, style: INLINE_STYLES.welcomeTitle(theme === "dark"), children: config.welcome.title }),
+                config.welcome.content && /* @__PURE__ */ jsx13("p", { className: THEME_CLASSES.welcome.content, style: INLINE_STYLES.welcomeContent(theme === "dark"), children: config.welcome.content })
               ] }),
               messages.map((message) => /* @__PURE__ */ jsxs8("div", { className: `group flex items-center gap-1 mb-2 ${message.type === "user" ? "flex-row-reverse" : "flex-row"}`, children: [
-                /* @__PURE__ */ jsx12(
+                /* @__PURE__ */ jsx13(
                   "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__ */ jsx12(MessageRenderer, { content: message.text, theme })
+                    children: /* @__PURE__ */ jsx13(MessageRenderer, { content: message.text, theme })
                   }
                 ),
-                message.type === "ai" && voiceEnabled && /* @__PURE__ */ jsx12(
+                message.type === "ai" && voiceEnabled && /* @__PURE__ */ jsx13(
                   TTSButton,
                   {
                     text: message.text,
@@ -3310,7 +3809,7 @@ var ChatBubble = ({
                     size: "small"
                   }
                 ),
-                /* @__PURE__ */ jsx12(
+                /* @__PURE__ */ jsx13(
                   "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"}`,
@@ -3319,10 +3818,10 @@ var ChatBubble = ({
                   }
                 )
               ] }, message.id)),
-              /* @__PURE__ */ jsx12("div", { ref: messagesEndRef })
+              /* @__PURE__ */ jsx13("div", { ref: messagesEndRef })
             ] }),
             /* @__PURE__ */ jsxs8("div", { style: { position: "relative" }, children: [
-              slashCommand.isOpen && /* @__PURE__ */ jsx12(
+              slashCommand.isOpen && /* @__PURE__ */ jsx13(
                 SlashCommandPopup,
                 {
                   tools: slashCommand.filteredTools,
@@ -3331,7 +3830,7 @@ var ChatBubble = ({
                   onClose: () => setInputValue("")
                 }
               ),
-              /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsx13(
                 InputField,
                 {
                   inputValue,
@@ -3353,20 +3852,20 @@ var ChatBubble = ({
           ]
         }
       ),
-      !drawerOpen && /* @__PURE__ */ jsx12(
+      !drawerOpen && /* @__PURE__ */ jsx13(
         "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__ */ jsx12("div", { className: `${glassMode ? "backdrop-blur-md bg-white/50 dark:bg-gray-800/50" : "bg-white dark:bg-gray-800"} text-gray-700 dark:text-gray-200 px-3 py-3 ${drawerSide === "right" ? "rounded-l-xl" : "rounded-r-xl"} shadow-md hover:shadow-lg flex items-center justify-center transition-all`, children: voiceEnabled ? /* @__PURE__ */ jsx12("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" }) }) : /* @__PURE__ */ jsx12("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" }) }) })
+          children: /* @__PURE__ */ jsx13("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__ */ jsx13("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("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__ */ jsx13("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("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__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       "div",
       {
         className: `fixed z-[999999] ${isDragging ? "cursor-grabbing" : "cursor-grab"}`,
@@ -3382,29 +3881,29 @@ var ChatBubble = ({
         children: /* @__PURE__ */ jsxs8("div", { className: `${glassClasses} rounded-2xl shadow-2xl p-3 max-w-xs ${!glassMode && "border-gray-200 border"}`, children: [
           /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between mb-2", children: [
             /* @__PURE__ */ jsxs8("div", { className: "flex items-center space-x-2", children: [
-              /* @__PURE__ */ jsx12(Avatar, { avatar: config.avatar, size: "small" }),
-              config.title && /* @__PURE__ */ jsx12("span", { className: THEME_CLASSES.text.floatingTitle, children: config.title })
+              /* @__PURE__ */ jsx13(Avatar, { avatar: config.avatar, size: "small" }),
+              config.title && /* @__PURE__ */ jsx13("span", { className: THEME_CLASSES.text.floatingTitle, children: config.title })
             ] }),
-            onClearChat && /* @__PURE__ */ jsx12(
+            onClearChat && /* @__PURE__ */ jsx13(
               "button",
               {
                 onClick: onClearChat,
                 className: THEME_CLASSES.button.floatingClear,
                 title: "Clear chat",
                 "data-testid": ChatNames.clearButton,
-                children: /* @__PURE__ */ jsx12("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                children: /* @__PURE__ */ jsx13("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
               }
             )
           ] }),
           recentMessage && /* @__PURE__ */ jsxs8("div", { className: `mb-2 group flex items-center gap-2 ${recentMessage.type === "user" ? "flex-row-reverse" : "flex-row"}`, children: [
-            /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsx13(
               "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__ */ jsx12(
+            /* @__PURE__ */ jsx13(
               "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"}`,
@@ -3414,7 +3913,7 @@ var ChatBubble = ({
             )
           ] }),
           /* @__PURE__ */ jsxs8("div", { style: { position: "relative" }, children: [
-            slashCommand.isOpen && /* @__PURE__ */ jsx12(
+            slashCommand.isOpen && /* @__PURE__ */ jsx13(
               SlashCommandPopup,
               {
                 tools: slashCommand.filteredTools,
@@ -3423,7 +3922,7 @@ var ChatBubble = ({
                 onClose: () => setInputValue("")
               }
             ),
-            /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsx13(
               InputField,
               {
                 compact: true,
@@ -3443,7 +3942,7 @@ var ChatBubble = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx12(Fragment3, { children: /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsx13(Fragment3, { children: /* @__PURE__ */ jsxs8(
     "div",
     {
       className: "fixed",
@@ -3497,13 +3996,13 @@ var ChatBubble = ({
                   children: [
                     /* @__PURE__ */ jsxs8("div", { className: "flex items-center space-x-3", children: [
                       config.avatar && /* @__PURE__ */ jsxs8("div", { className: "relative flex-shrink-0", children: [
-                        /* @__PURE__ */ jsx12(Avatar, { avatar: config.avatar }),
-                        /* @__PURE__ */ jsx12("div", { className: "absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white" })
+                        /* @__PURE__ */ jsx13(Avatar, { avatar: config.avatar }),
+                        /* @__PURE__ */ jsx13("div", { className: "absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white" })
                       ] }),
-                      config.title && /* @__PURE__ */ jsx12("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx12("h3", { className: THEME_CLASSES.text.title, children: config.title }) })
+                      config.title && /* @__PURE__ */ jsx13("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx13("h3", { className: THEME_CLASSES.text.title, children: config.title }) })
                     ] }),
                     /* @__PURE__ */ jsxs8("div", { className: "flex items-center space-x-1 flex-shrink-0", children: [
-                      /* @__PURE__ */ jsx12(
+                      /* @__PURE__ */ jsx13(
                         "button",
                         {
                           onClick: (e) => {
@@ -3512,10 +4011,10 @@ var ChatBubble = ({
                           },
                           className: THEME_CLASSES.button.minimize,
                           title: "Minimize chat",
-                          children: /* @__PURE__ */ jsx12("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
+                          children: /* @__PURE__ */ jsx13("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
                         }
                       ),
-                      /* @__PURE__ */ jsx12(
+                      /* @__PURE__ */ jsx13(
                         "button",
                         {
                           onClick: (e) => {
@@ -3524,7 +4023,7 @@ var ChatBubble = ({
                           },
                           className: THEME_CLASSES.button.close,
                           title: "Close chat",
-                          children: /* @__PURE__ */ jsx12("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                          children: /* @__PURE__ */ jsx13("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
                         }
                       )
                     ] })
@@ -3534,10 +4033,10 @@ var ChatBubble = ({
               /* @__PURE__ */ jsxs8("div", { className: "p-4", children: [
                 (() => {
                   const lastAiMessage = [...messages].reverse().find((m) => m.type === "ai");
-                  return lastAiMessage ? /* @__PURE__ */ jsx12("div", { className: "mb-3", children: /* @__PURE__ */ jsx12("div", { className: `text-xs px-3 py-2 rounded-xl ${THEME_CLASSES.message.ai}`, style: INLINE_STYLES.messageAI(theme === "dark"), children: lastAiMessage.text.length > 100 ? `${lastAiMessage.text.slice(0, 100)}...` : lastAiMessage.text }) }) : /* @__PURE__ */ jsx12("div", { className: "mb-3", children: /* @__PURE__ */ jsx12("div", { className: THEME_CLASSES.text.minimizedMessage, style: INLINE_STYLES.minimizedMessage(theme === "dark"), children: "No AI responses yet" }) });
+                  return lastAiMessage ? /* @__PURE__ */ jsx13("div", { className: "mb-3", children: /* @__PURE__ */ jsx13("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__ */ jsx13("div", { className: "mb-3", children: /* @__PURE__ */ jsx13("div", { className: THEME_CLASSES.text.minimizedMessage, style: INLINE_STYLES.minimizedMessage(theme === "dark"), children: "No AI responses yet" }) });
                 })(),
                 /* @__PURE__ */ jsxs8("div", { style: { position: "relative" }, children: [
-                  slashCommand.isOpen && /* @__PURE__ */ jsx12(
+                  slashCommand.isOpen && /* @__PURE__ */ jsx13(
                     SlashCommandPopup,
                     {
                       tools: slashCommand.filteredTools,
@@ -3546,7 +4045,7 @@ var ChatBubble = ({
                       onClose: () => setInputValue("")
                     }
                   ),
-                  /* @__PURE__ */ jsx12(
+                  /* @__PURE__ */ jsx13(
                     InputField,
                     {
                       compact: true,
@@ -3593,13 +4092,13 @@ var ChatBubble = ({
                   children: [
                     /* @__PURE__ */ jsxs8("div", { className: "flex items-center space-x-3", children: [
                       config.avatar && /* @__PURE__ */ jsxs8("div", { className: "relative flex-shrink-0", children: [
-                        /* @__PURE__ */ jsx12(Avatar, { avatar: config.avatar }),
-                        /* @__PURE__ */ jsx12("div", { className: "absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white" })
+                        /* @__PURE__ */ jsx13(Avatar, { avatar: config.avatar }),
+                        /* @__PURE__ */ jsx13("div", { className: "absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white" })
                       ] }),
-                      config.title && /* @__PURE__ */ jsx12("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx12("h3", { className: THEME_CLASSES.text.title, children: config.title }) })
+                      config.title && /* @__PURE__ */ jsx13("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx13("h3", { className: THEME_CLASSES.text.title, children: config.title }) })
                     ] }),
                     /* @__PURE__ */ jsxs8("div", { className: "flex items-center space-x-1 flex-shrink-0 relative", "data-more-menu": true, children: [
-                      /* @__PURE__ */ jsx12(
+                      /* @__PURE__ */ jsx13(
                         "a",
                         {
                           href: "https://www.interface.supernal.ai",
@@ -3607,30 +4106,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__ */ jsx12("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" }) })
+                          children: /* @__PURE__ */ jsx13("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("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__ */ jsx12(
+                      /* @__PURE__ */ jsx13(
                         "button",
                         {
                           onClick: () => setShowMoreMenu(!showMoreMenu),
                           className: THEME_CLASSES.button.more,
                           title: "More options",
-                          children: /* @__PURE__ */ jsx12("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" }) })
+                          "data-testid": "chat-more-menu-button",
+                          children: /* @__PURE__ */ jsx13("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("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__ */ jsxs8("div", { className: "absolute right-0 top-10 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-600 p-2 min-w-[220px] z-50", "data-more-menu": true, children: [
-                        /* @__PURE__ */ jsx12("div", { className: "px-3 py-2 border-b border-gray-200 dark:border-gray-600 mb-2", children: /* @__PURE__ */ jsxs8("div", { className: "grid grid-cols-4 gap-1", children: [
-                          /* @__PURE__ */ jsx12(
+                      showMoreMenu && /* @__PURE__ */ jsxs8("div", { className: "absolute right-0 top-10 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-600 p-2 min-w-[280px] z-50", "data-more-menu": true, "data-testid": "chat-more-menu", children: [
+                        apiKey && /* @__PURE__ */ jsxs8("div", { className: "px-3 py-2 border-b border-gray-200 dark:border-gray-600 mb-2", "data-testid": "api-key-section", children: [
+                          /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between mb-2", children: [
+                            /* @__PURE__ */ jsxs8("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-200 flex items-center gap-2", children: [
+                              /* @__PURE__ */ jsx13("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("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__ */ jsx13("span", { className: "text-green-500", title: "API key is valid", "data-testid": "api-key-status", "data-status": "valid", children: /* @__PURE__ */ jsx13("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx13("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__ */ jsx13("span", { className: "text-red-500", title: "API key is invalid", "data-testid": "api-key-status", "data-status": "invalid", children: /* @__PURE__ */ jsx13("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx13("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__ */ jsx13("span", { className: "text-blue-500 animate-spin", title: "Validating...", "data-testid": "api-key-status", "data-status": "validating", children: /* @__PURE__ */ jsx13("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("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__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
+                              /* @__PURE__ */ jsx13("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__ */ jsx13(
+                                "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__ */ jsxs8("div", { className: "space-y-2", children: [
+                              /* @__PURE__ */ jsxs8("div", { className: "flex gap-1", children: [
+                                /* @__PURE__ */ jsx13(
+                                  "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__ */ jsx13(
+                                  "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__ */ jsxs8("div", { className: "flex gap-2", children: [
+                                /* @__PURE__ */ jsx13(
+                                  "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__ */ jsx13(
+                                  "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__ */ jsx13("p", { className: "text-xs text-red-500", "data-testid": "api-key-error", children: apiKey.error }),
+                              /* @__PURE__ */ jsx13(
+                                "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__ */ jsx13(
+                              "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__ */ jsx13("div", { className: "px-3 py-2 border-b border-gray-200 dark:border-gray-600 mb-2", children: /* @__PURE__ */ jsxs8("div", { className: "grid grid-cols-4 gap-1", children: [
+                          /* @__PURE__ */ jsx13(
                             "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__ */ jsx12("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("rect", { x: "8", y: "8", width: "8", height: "8", rx: "1" }) })
+                              children: /* @__PURE__ */ jsx13("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("rect", { x: "8", y: "8", width: "8", height: "8", rx: "1" }) })
                             }
                           ),
-                          /* @__PURE__ */ jsx12(
+                          /* @__PURE__ */ jsx13(
                             "button",
                             {
                               onClick: () => {
@@ -3639,10 +4268,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__ */ jsx12("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("rect", { x: "9", y: "9", width: "6", height: "6", rx: "1", strokeWidth: "2" }) })
+                              children: /* @__PURE__ */ jsx13("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("rect", { x: "9", y: "9", width: "6", height: "6", rx: "1", strokeWidth: "2" }) })
                             }
                           ),
-                          /* @__PURE__ */ jsx12(
+                          /* @__PURE__ */ jsx13(
                             "button",
                             {
                               onClick: () => {
@@ -3652,12 +4281,12 @@ 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__ */ jsxs8("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
-                                /* @__PURE__ */ jsx12("rect", { x: "8", y: "8", width: "8", height: "8", rx: "1", strokeWidth: "2" }),
-                                /* @__PURE__ */ jsx12("rect", { x: "10", y: "10", width: "4", height: "4", rx: "0.5", strokeWidth: "1.5" })
+                                /* @__PURE__ */ jsx13("rect", { x: "8", y: "8", width: "8", height: "8", rx: "1", strokeWidth: "2" }),
+                                /* @__PURE__ */ jsx13("rect", { x: "10", y: "10", width: "4", height: "4", rx: "0.5", strokeWidth: "1.5" })
                               ] })
                             }
                           ),
-                          /* @__PURE__ */ jsx12(
+                          /* @__PURE__ */ jsx13(
                             "button",
                             {
                               onClick: () => {
@@ -3667,9 +4296,9 @@ 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__ */ jsxs8("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
-                                /* @__PURE__ */ jsx12("rect", { x: "7", y: "7", width: "10", height: "10", rx: "1", strokeWidth: "2" }),
-                                /* @__PURE__ */ jsx12("rect", { x: "9", y: "9", width: "6", height: "6", rx: "0.5", strokeWidth: "1.5" }),
-                                /* @__PURE__ */ jsx12("rect", { x: "11", y: "11", width: "2", height: "2", rx: "0.5", strokeWidth: "1" })
+                                /* @__PURE__ */ jsx13("rect", { x: "7", y: "7", width: "10", height: "10", rx: "1", strokeWidth: "2" }),
+                                /* @__PURE__ */ jsx13("rect", { x: "9", y: "9", width: "6", height: "6", rx: "0.5", strokeWidth: "1.5" }),
+                                /* @__PURE__ */ jsx13("rect", { x: "11", y: "11", width: "2", height: "2", rx: "0.5", strokeWidth: "1" })
                               ] })
                             }
                           )
@@ -3686,7 +4315,7 @@ 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__ */ jsx12("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" }) }),
+                              /* @__PURE__ */ jsx13("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" }) }),
                               /* @__PURE__ */ jsxs8("span", { children: [
                                 theme === "light" ? "Dark" : "Light",
                                 " Mode"
@@ -3705,7 +4334,7 @@ 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__ */ jsx12("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" }) }),
+                              /* @__PURE__ */ jsx13("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" }) }),
                               /* @__PURE__ */ jsxs8("span", { children: [
                                 voiceEnabled ? "Disable" : "Enable",
                                 " Voice"
@@ -3722,8 +4351,8 @@ 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__ */ jsx12("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" }) }),
-                              /* @__PURE__ */ jsx12("span", { children: "Reset position" })
+                              /* @__PURE__ */ jsx13("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("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__ */ jsx13("span", { children: "Reset position" })
                             ]
                           }
                         ),
@@ -3743,8 +4372,8 @@ 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__ */ jsx12("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
-                              /* @__PURE__ */ jsx12("span", { children: "How to use" })
+                              /* @__PURE__ */ jsx13("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("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__ */ jsx13("span", { children: "How to use" })
                             ]
                           }
                         ),
@@ -3757,41 +4386,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__ */ jsx12("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) }),
-                              /* @__PURE__ */ jsx12("span", { children: "Clear chat" })
+                              /* @__PURE__ */ jsx13("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("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__ */ jsx13("span", { children: "Clear chat" })
                             ]
                           }
                         )
                       ] }),
-                      /* @__PURE__ */ jsx12(
+                      /* @__PURE__ */ jsx13(
                         "button",
                         {
                           onClick: () => setIsMinimized(true),
                           className: THEME_CLASSES.button.minimize,
                           title: "Minimize",
-                          children: /* @__PURE__ */ jsx12("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20 12H4" }) })
+                          children: /* @__PURE__ */ jsx13("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20 12H4" }) })
                         }
                       ),
-                      /* @__PURE__ */ jsx12(
+                      /* @__PURE__ */ jsx13(
                         "button",
                         {
                           onClick: handleToggle,
                           className: THEME_CLASSES.button.close,
                           title: "Close",
-                          children: /* @__PURE__ */ jsx12("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                          children: /* @__PURE__ */ jsx13("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
                         }
                       )
                     ] })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs8("div", { className: "flex-1 overflow-y-auto p-4 space-y-2", children: [
+              /* @__PURE__ */ jsxs8("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__ */ jsxs8("div", { className: THEME_CLASSES.welcome.container, children: [
-                  config.welcome.title && /* @__PURE__ */ jsx12("h4", { className: THEME_CLASSES.welcome.title, style: INLINE_STYLES.welcomeTitle(theme === "dark"), children: config.welcome.title }),
-                  config.welcome.content && /* @__PURE__ */ jsx12("p", { className: THEME_CLASSES.welcome.content, style: INLINE_STYLES.welcomeContent(theme === "dark"), children: config.welcome.content }),
+                  config.welcome.title && /* @__PURE__ */ jsx13("h4", { className: THEME_CLASSES.welcome.title, style: INLINE_STYLES.welcomeTitle(theme === "dark"), children: config.welcome.title }),
+                  config.welcome.content && /* @__PURE__ */ jsx13("p", { className: THEME_CLASSES.welcome.content, style: INLINE_STYLES.welcomeContent(theme === "dark"), children: config.welcome.content }),
                   config.welcome.suggestedCommands && config.welcome.suggestedCommands.length > 0 && /* @__PURE__ */ jsxs8("div", { className: THEME_CLASSES.welcome.commandsContainer, children: [
-                    /* @__PURE__ */ jsx12("p", { className: THEME_CLASSES.welcome.commandsHeader, children: "Try these commands:" }),
-                    /* @__PURE__ */ jsx12("div", { className: "space-y-1", children: config.welcome.suggestedCommands.map((cmd, idx) => /* @__PURE__ */ jsxs8(
+                    /* @__PURE__ */ jsx13("p", { className: THEME_CLASSES.welcome.commandsHeader, children: "Try these commands:" }),
+                    /* @__PURE__ */ jsx13("div", { className: "space-y-1", children: config.welcome.suggestedCommands.map((cmd, idx) => /* @__PURE__ */ jsxs8(
                       "button",
                       {
                         onClick: () => {
@@ -3806,7 +4435,7 @@ var ChatBubble = ({
                             cmd.text,
                             '"'
                           ] }),
-                          cmd.desc && /* @__PURE__ */ jsx12("div", { className: THEME_CLASSES.welcome.commandDesc, style: INLINE_STYLES.commandDesc(theme === "dark"), children: cmd.desc })
+                          cmd.desc && /* @__PURE__ */ jsx13("div", { className: THEME_CLASSES.welcome.commandDesc, style: INLINE_STYLES.commandDesc(theme === "dark"), children: cmd.desc })
                         ]
                       },
                       idx
@@ -3814,16 +4443,16 @@ var ChatBubble = ({
                   ] })
                 ] }),
                 messages.map((message) => /* @__PURE__ */ jsxs8("div", { className: `group flex items-center gap-2 mb-2 ${message.type === "user" ? "flex-row-reverse" : "flex-row"}`, children: [
-                  /* @__PURE__ */ jsx12(
+                  /* @__PURE__ */ jsx13(
                     "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__ */ jsx12(MessageRenderer, { content: message.text, theme })
+                      children: /* @__PURE__ */ jsx13(MessageRenderer, { content: message.text, theme })
                     }
                   ),
-                  message.type === "ai" && voiceEnabled && /* @__PURE__ */ jsx12(
+                  message.type === "ai" && voiceEnabled && /* @__PURE__ */ jsx13(
                     TTSButton,
                     {
                       text: message.text,
@@ -3833,7 +4462,7 @@ var ChatBubble = ({
                       size: "small"
                     }
                   ),
-                  /* @__PURE__ */ jsx12(
+                  /* @__PURE__ */ jsx13(
                     "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"}`,
@@ -3842,10 +4471,10 @@ var ChatBubble = ({
                     }
                   )
                 ] }, message.id)),
-                /* @__PURE__ */ jsx12("div", { ref: messagesEndRef })
+                /* @__PURE__ */ jsx13("div", { ref: messagesEndRef })
               ] }),
               /* @__PURE__ */ jsxs8("div", { style: { position: "relative" }, children: [
-                slashCommand.isOpen && /* @__PURE__ */ jsx12(
+                slashCommand.isOpen && /* @__PURE__ */ jsx13(
                   SlashCommandPopup,
                   {
                     tools: slashCommand.filteredTools,
@@ -3854,7 +4483,7 @@ var ChatBubble = ({
                     onClose: () => setInputValue("")
                   }
                 ),
-                /* @__PURE__ */ jsx12(
+                /* @__PURE__ */ jsx13(
                   InputField,
                   {
                     inputValue,
@@ -3884,8 +4513,8 @@ var ChatBubble = ({
             "data-testid": ChatNames.bubble,
             title: `Open chat (press ${isMac ? "Cmd" : "Ctrl"}+/ for voice recording)`,
             children: [
-              /* @__PURE__ */ jsx12("img", { src: config.logo, alt: "Supernal", className: "w-8 h-8" }),
-              hasUnread && notifications && /* @__PURE__ */ jsx12("div", { className: "absolute -top-1 -right-1 w-5 h-5 bg-red-500 rounded-full flex items-center justify-center animate-pulse shadow-lg", "data-testid": "unread-indicator", children: /* @__PURE__ */ jsx12("span", { className: "text-xs text-white font-bold", children: unreadCount > 9 ? "9+" : unreadCount }) })
+              /* @__PURE__ */ jsx13("img", { src: config.logo, alt: "Supernal", className: "w-8 h-8" }),
+              hasUnread && notifications && /* @__PURE__ */ jsx13("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__ */ jsx13("span", { className: "text-xs text-white font-bold", children: unreadCount > 9 ? "9+" : unreadCount }) })
             ]
           }
         )
@@ -3895,33 +4524,33 @@ var ChatBubble = ({
 };
 
 // src/components/AutoNavigationContext.tsx
-import { useEffect as useEffect9, useState as useState10 } from "react";
+import { useEffect as useEffect10, useState as useState11 } from "react";
 
 // src/hooks/useNavigationGraph.tsx
-import { useEffect as useEffect8, useState as useState9, useCallback as useCallback6, createContext as createContext3, useContext as useContext3 } from "react";
+import { useEffect as useEffect9, useState as useState10, useCallback as useCallback7, createContext as createContext4, useContext as useContext4 } from "react";
 import {
   NavigationGraph
 } from "@supernal/interface/browser";
-import { jsx as jsx13 } from "react/jsx-runtime";
-var NavigationContextContext = createContext3("global");
+import { jsx as jsx14 } from "react/jsx-runtime";
+var NavigationContextContext = createContext4("global");
 function NavigationContextProvider({
   value,
   children
 }) {
   const graph = useNavigationGraph();
-  useEffect8(() => {
+  useEffect9(() => {
     graph.setCurrentContext(value);
   }, [value, graph]);
-  return /* @__PURE__ */ jsx13(NavigationContextContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx14(NavigationContextContext.Provider, { value, children });
 }
 function useNavigationGraph() {
   return NavigationGraph.getInstance();
 }
 function useCurrentContext() {
-  const contextFromProvider = useContext3(NavigationContextContext);
+  const contextFromProvider = useContext4(NavigationContextContext);
   const graph = useNavigationGraph();
-  const [graphContext, setGraphContext] = useState9("");
-  useEffect8(() => {
+  const [graphContext, setGraphContext] = useState10("");
+  useEffect9(() => {
     const interval = setInterval(() => {
       const current = graph.getCurrentContext?.() || "";
       if (current !== graphContext) {
@@ -3935,7 +4564,7 @@ function useCurrentContext() {
 function useRegisterTool(toolId, contextId, metadata) {
   const graph = useNavigationGraph();
   const currentContext = useCurrentContext();
-  useEffect8(() => {
+  useEffect9(() => {
     let targetContext = contextId || currentContext;
     if (!contextId && metadata) {
       const detection = graph.detectToolContext?.(toolId, metadata);
@@ -3949,10 +4578,10 @@ function useRegisterTool(toolId, contextId, metadata) {
 function useNavigationPath(targetContextOrToolId, isToolId = false) {
   const graph = useNavigationGraph();
   const currentContext = useCurrentContext();
-  const [path, setPath] = useState9(null);
-  const [loading, setLoading] = useState9(true);
-  const [error, setError] = useState9();
-  useEffect8(() => {
+  const [path, setPath] = useState10(null);
+  const [loading, setLoading] = useState10(true);
+  const [error, setError] = useState10();
+  useEffect9(() => {
     try {
       let targetContext = targetContextOrToolId;
       if (isToolId) {
@@ -3980,9 +4609,9 @@ function useNavigationPath(targetContextOrToolId, isToolId = false) {
 function useNavigate() {
   const graph = useNavigationGraph();
   const currentContext = useCurrentContext();
-  const [navigating, setNavigating] = useState9(false);
-  const [error, setError] = useState9();
-  const navigateTo = useCallback6(async (targetContextOrToolId, isToolId = false, executeNavigation) => {
+  const [navigating, setNavigating] = useState10(false);
+  const [error, setError] = useState10();
+  const navigateTo = useCallback7(async (targetContextOrToolId, isToolId = false, executeNavigation) => {
     setNavigating(true);
     setError(void 0);
     try {
@@ -4024,8 +4653,8 @@ function useNavigate() {
 }
 function useAllContexts() {
   const graph = useNavigationGraph();
-  const [contexts, setContexts] = useState9(graph.getAllContexts?.());
-  useEffect8(() => {
+  const [contexts, setContexts] = useState10(graph.getAllContexts?.());
+  useEffect9(() => {
     const interval = setInterval(() => {
       setContexts(graph.getAllContexts?.());
     }, 1e3);
@@ -4035,28 +4664,28 @@ function useAllContexts() {
 }
 
 // src/components/AutoNavigationContext.tsx
-import { Fragment as Fragment4, jsx as jsx14 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx15 } from "react/jsx-runtime";
 function AutoNavigationContext({
   children,
   routes,
   onNavigate
 }) {
-  const [pathname, setPathname] = useState10("/");
-  useEffect9(() => {
+  const [pathname, setPathname] = useState11("/");
+  useEffect10(() => {
     if (typeof window !== "undefined") {
       setPathname(window.location.pathname);
     }
   }, []);
   const context = routes ? inferContextFromPath(pathname, routes) : null;
-  useEffect9(() => {
+  useEffect10(() => {
     if (onNavigate && context) {
       onNavigate(context);
     }
   }, [context, onNavigate]);
   if (!context) {
-    return /* @__PURE__ */ jsx14(Fragment4, { children });
+    return /* @__PURE__ */ jsx15(Fragment4, { children });
   }
-  return /* @__PURE__ */ jsx14(NavigationContextProvider, { value: context, children });
+  return /* @__PURE__ */ jsx15(NavigationContextProvider, { value: context, children });
 }
 function inferContextFromPath(path, customRoutes) {
   if (customRoutes) {
@@ -4089,7 +4718,7 @@ function inferContextFromPath(path, customRoutes) {
 import { ExposureCollector, ToolRegistry as ToolRegistry3 } from "@supernal/interface/browser";
 
 // src/hooks/useLocationTracking.ts
-import { useEffect as useEffect10, useRef as useRef9 } from "react";
+import { useEffect as useEffect11, useRef as useRef11 } from "react";
 import { LocationContext } from "@supernal/interface/browser";
 var usePathname;
 var useSearchParams;
@@ -4121,8 +4750,8 @@ function getCurrentLocation() {
   };
 }
 function useLocationTracking() {
-  const lastLocationRef = useRef9("");
-  const lastElementsRef = useRef9([]);
+  const lastLocationRef = useRef11("");
+  const lastElementsRef = useRef11([]);
   let pathname = null;
   let searchParams = null;
   try {
@@ -4134,7 +4763,7 @@ function useLocationTracking() {
     }
   } catch {
   }
-  useEffect10(() => {
+  useEffect11(() => {
     const updateLocation = () => {
       const location = pathname !== null ? { pathname, search: searchParams?.toString() || "", asPath: pathname + (searchParams?.toString() ? `?${searchParams.toString()}` : "") } : getCurrentLocation();
       const visibleElements = getVisibleElements();
@@ -4175,7 +4804,7 @@ function useLocationTracking() {
 }
 
 // src/hooks/useNavigationGraphSetup.ts
-import { useEffect as useEffect11, useState as useState11, useCallback as useCallback7 } from "react";
+import { useEffect as useEffect12, useState as useState12, useCallback as useCallback8 } from "react";
 var useAppRouter;
 var usePathname2;
 try {
@@ -4185,7 +4814,7 @@ try {
 } catch {
 }
 function useNavigationGraphSetup() {
-  const [isInitialized, setIsInitialized] = useState11(false);
+  const [isInitialized, setIsInitialized] = useState12(false);
   let router = null;
   let pathname = null;
   try {
@@ -4197,7 +4826,7 @@ function useNavigationGraphSetup() {
     }
   } catch {
   }
-  const navigate = useCallback7((path) => {
+  const navigate = useCallback8((path) => {
     const normalizedPath = path.startsWith("/") ? path : `/${path}`;
     if (router?.push) {
       router.push(normalizedPath);
@@ -4206,7 +4835,7 @@ function useNavigationGraphSetup() {
     }
   }, [router]);
   const currentPath = pathname ?? (typeof window !== "undefined" ? window.location.pathname + window.location.search : "/");
-  useEffect11(() => {
+  useEffect12(() => {
     import("@supernal/interface/browser").then(({ NavigationGraph: NavigationGraph2 }) => {
       const graph = NavigationGraph2.getInstance();
       graph.setNavigationHandler(navigate);
@@ -4222,7 +4851,7 @@ function useNavigationGraphSetup() {
       console.log("[NavigationGraphSetup] Auto-configured with Next.js router");
     });
   }, [navigate, currentPath]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!isInitialized) return;
     import("@supernal/interface/browser").then(({ NavigationGraph: NavigationGraph2 }) => {
       const graph = NavigationGraph2.getInstance();
@@ -4233,8 +4862,8 @@ function useNavigationGraphSetup() {
 }
 
 // src/components/ToolMenuPopup/ToolMenuPopup.tsx
-import { useEffect as useEffect12, useRef as useRef10, useState as useState12 } from "react";
-import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+import { useEffect as useEffect13, useRef as useRef12, useState as useState13 } from "react";
+import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
 var ToolMenuPopup = ({
   isOpen,
   onClose,
@@ -4242,16 +4871,16 @@ var ToolMenuPopup = ({
   totalTools,
   contextLabel
 }) => {
-  const [collapsedCategories, setCollapsedCategories] = useState12(/* @__PURE__ */ new Set());
-  const [isHydrated, setIsHydrated] = useState12(false);
-  const [isMobile, setIsMobile] = useState12(false);
-  const popupRef = useRef10(null);
+  const [collapsedCategories, setCollapsedCategories] = useState13(/* @__PURE__ */ new Set());
+  const [isHydrated, setIsHydrated] = useState13(false);
+  const [isMobile, setIsMobile] = useState13(false);
+  const popupRef = useRef12(null);
   const { insertText } = useChatInput();
-  useEffect12(() => {
+  useEffect13(() => {
     setIsHydrated(true);
     setIsMobile(window.matchMedia("(max-width: 767px)").matches);
   }, []);
-  useEffect12(() => {
+  useEffect13(() => {
     if (!isOpen) return;
     const handleClickOutside = (e) => {
       const target = e.target;
@@ -4262,7 +4891,7 @@ var ToolMenuPopup = ({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [isOpen, onClose]);
-  useEffect12(() => {
+  useEffect13(() => {
     if (!isOpen) return;
     const handleKey = (e) => {
       if (e.key === "Escape") {
@@ -4325,7 +4954,7 @@ var ToolMenuPopup = ({
           alignItems: "center"
         }, children: [
           /* @__PURE__ */ jsxs9("div", { children: [
-            /* @__PURE__ */ jsx15("h3", { style: { margin: 0, color: "#fff", fontSize: 16, fontWeight: 600 }, children: "Available Actions" }),
+            /* @__PURE__ */ jsx16("h3", { style: { margin: 0, color: "#fff", fontSize: 16, fontWeight: 600 }, children: "Available Actions" }),
             /* @__PURE__ */ jsxs9("p", { style: { margin: "4px 0 0", color: "rgba(255,255,255,0.6)", fontSize: 12 }, children: [
               contextLabel,
               " \xB7 ",
@@ -4334,7 +4963,7 @@ var ToolMenuPopup = ({
               totalTools !== 1 ? "s" : ""
             ] })
           ] }),
-          /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx16(
             "button",
             {
               onClick: onClose,
@@ -4353,7 +4982,7 @@ var ToolMenuPopup = ({
           )
         ] }),
         /* @__PURE__ */ jsxs9("div", { style: { padding: "8px 12px 16px" }, children: [
-          categories.length === 0 && /* @__PURE__ */ jsx15("p", { style: { color: "rgba(255,255,255,0.5)", textAlign: "center", padding: "24px 0", fontSize: 14 }, children: "No tools available on this page." }),
+          categories.length === 0 && /* @__PURE__ */ jsx16("p", { style: { color: "rgba(255,255,255,0.5)", textAlign: "center", padding: "24px 0", fontSize: 14 }, children: "No tools available on this page." }),
           categories.map((category) => {
             const isCollapsed = collapsedCategories.has(category.key);
             return /* @__PURE__ */ jsxs9("div", { style: { marginBottom: 4 }, children: [
@@ -4383,13 +5012,13 @@ var ToolMenuPopup = ({
                   children: [
                     /* @__PURE__ */ jsxs9("span", { style: { fontSize: 14, fontWeight: 500 }, children: [
                       category.displayName,
-                      /* @__PURE__ */ jsx15("span", { style: { color: "rgba(255,255,255,0.4)", fontWeight: 400, marginLeft: 8, fontSize: 12 }, children: category.tools.length })
+                      /* @__PURE__ */ jsx16("span", { style: { color: "rgba(255,255,255,0.4)", fontWeight: 400, marginLeft: 8, fontSize: 12 }, children: category.tools.length })
                     ] }),
-                    /* @__PURE__ */ jsx15("span", { style: { color: "rgba(255,255,255,0.4)", fontSize: 12 }, children: isCollapsed ? "\u25B6" : "\u25BC" })
+                    /* @__PURE__ */ jsx16("span", { style: { color: "rgba(255,255,255,0.4)", fontSize: 12 }, children: isCollapsed ? "\u25B6" : "\u25BC" })
                   ]
                 }
               ),
-              !isCollapsed && /* @__PURE__ */ jsx15("div", { style: { paddingLeft: 8, paddingRight: 8 }, children: category.tools.map((tool, idx) => /* @__PURE__ */ jsxs9(
+              !isCollapsed && /* @__PURE__ */ jsx16("div", { style: { paddingLeft: 8, paddingRight: 8 }, children: category.tools.map((tool, idx) => /* @__PURE__ */ jsxs9(
                 "button",
                 {
                   onClick: () => handleToolClick(tool),
@@ -4412,8 +5041,8 @@ var ToolMenuPopup = ({
                     e.currentTarget.style.background = "none";
                   },
                   children: [
-                    /* @__PURE__ */ jsx15("div", { style: { fontSize: 13, fontWeight: 500 }, children: tool.name }),
-                    tool.description && /* @__PURE__ */ jsx15("div", { style: {
+                    /* @__PURE__ */ jsx16("div", { style: { fontSize: 13, fontWeight: 500 }, children: tool.name }),
+                    tool.description && /* @__PURE__ */ jsx16("div", { style: {
                       fontSize: 11,
                       color: "rgba(255,255,255,0.5)",
                       marginTop: 2,
@@ -4437,14 +5066,14 @@ var ToolMenuPopup = ({
           fontSize: 11
         }, children: [
           "Click a tool to insert its command \xB7 Type ",
-          /* @__PURE__ */ jsx15("kbd", { style: {
+          /* @__PURE__ */ jsx16("kbd", { style: {
             padding: "1px 4px",
             borderRadius: 3,
             border: "1px solid rgba(255,255,255,0.2)",
             fontSize: 10
           }, children: "/" }),
           " in chat for quick commands \xB7 ",
-          /* @__PURE__ */ jsx15("kbd", { style: {
+          /* @__PURE__ */ jsx16("kbd", { style: {
             padding: "1px 4px",
             borderRadius: 3,
             border: "1px solid rgba(255,255,255,0.2)",
@@ -4458,10 +5087,10 @@ var ToolMenuPopup = ({
 };
 
 // src/components/ToolMenuPopup/ToolMenuPopupTrigger.tsx
-import { useEffect as useEffect13 } from "react";
+import { useEffect as useEffect14 } from "react";
 
 // src/components/ToolMenuPopup/useToolMenu.ts
-import { useState as useState13, useMemo as useMemo4, useCallback as useCallback8 } from "react";
+import { useState as useState14, useMemo as useMemo5, useCallback as useCallback9 } from "react";
 import { ToolRegistry as ToolRegistry2 } from "@supernal/interface/browser";
 var CATEGORY_DISPLAY = {
   navigation: "Navigation",
@@ -4482,11 +5111,11 @@ var CATEGORY_DISPLAY = {
   workflow: "Workflow"
 };
 function useToolMenu() {
-  const [isOpen, setIsOpen] = useState13(false);
-  const open = useCallback8(() => setIsOpen(true), []);
-  const close = useCallback8(() => setIsOpen(false), []);
-  const toggle = useCallback8(() => setIsOpen((prev) => !prev), []);
-  const { categories, totalTools, contextLabel } = useMemo4(() => {
+  const [isOpen, setIsOpen] = useState14(false);
+  const open = useCallback9(() => setIsOpen(true), []);
+  const close = useCallback9(() => setIsOpen(false), []);
+  const toggle = useCallback9(() => setIsOpen((prev) => !prev), []);
+  const { categories, totalTools, contextLabel } = useMemo5(() => {
     if (!isOpen) {
       return { categories: [], totalTools: 0, contextLabel: "" };
     }
@@ -4518,10 +5147,10 @@ function useToolMenu() {
 }
 
 // src/components/ToolMenuPopup/ToolMenuPopupTrigger.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var ToolMenuPopupTrigger = () => {
   const toolMenu = useToolMenu();
-  useEffect13(() => {
+  useEffect14(() => {
     const handleKeyDown = (e) => {
       if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key === "/") {
         e.preventDefault();
@@ -4560,7 +5189,7 @@ var ToolMenuPopupTrigger = () => {
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [toolMenu]);
   if (!toolMenu.isOpen) return null;
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     ToolMenuPopup,
     {
       isOpen: toolMenu.isOpen,
@@ -4573,7 +5202,7 @@ var ToolMenuPopupTrigger = () => {
 };
 
 // src/components/SupernalProvider.tsx
-import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
 function ChatBubbleConnector({
   theme,
   position,
@@ -4590,7 +5219,7 @@ function ChatBubbleConnector({
     glassMode,
     ...logo ? { logo } : {}
   };
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     ChatBubble,
     {
       messages,
@@ -4629,7 +5258,7 @@ function SupernalProvider({
   console.log("[SupernalProvider] variant:", variant, "effectiveDisplayMode:", effectiveDisplayMode);
   useLocationTracking();
   useNavigationGraphSetup();
-  useEffect14(() => {
+  useEffect15(() => {
     if (typeof window === "undefined") return;
     const collector = ExposureCollector.getInstance();
     const registeredToolIds = /* @__PURE__ */ new Set();
@@ -4661,9 +5290,9 @@ function SupernalProvider({
       collector.destroy();
     };
   }, []);
-  return /* @__PURE__ */ jsx17(ChatInputProvider, { children: /* @__PURE__ */ jsxs10(ChatProvider, { mode, apiKey, onToolExecute, children: [
-    /* @__PURE__ */ jsx17(AutoNavigationContext, { routes, onNavigate, children }),
-    shouldRenderChatBubble ? /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(ApiKeyProvider, { initialApiKey: apiKey, children: /* @__PURE__ */ jsx18(ChatInputProvider, { children: /* @__PURE__ */ jsxs10(ChatProvider, { mode, apiKey, onToolExecute, children: [
+    /* @__PURE__ */ jsx18(AutoNavigationContext, { routes, onNavigate, children }),
+    shouldRenderChatBubble ? /* @__PURE__ */ jsx18(
       ChatBubbleConnector,
       {
         theme,
@@ -4676,26 +5305,26 @@ function SupernalProvider({
         drawerSide
       }
     ) : null,
-    !disabled && /* @__PURE__ */ jsx17(ToolMenuPopupTrigger, {})
-  ] }) });
+    !disabled && /* @__PURE__ */ jsx18(ToolMenuPopupTrigger, {})
+  ] }) }) });
 }
 
 // src/components/ChatBubbleSettingsModal.tsx
-import React14, { useEffect as useEffect15 } from "react";
-import { Fragment as Fragment5, jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+import React15, { useEffect as useEffect16 } from "react";
+import { Fragment as Fragment5, jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
 function ChatBubbleSettingsModal({
   isOpen,
   onClose,
   settings,
   onSettingsChange
 }) {
-  const [localSettings, setLocalSettings] = React14.useState(settings);
-  useEffect15(() => {
+  const [localSettings, setLocalSettings] = React15.useState(settings);
+  useEffect16(() => {
     if (isOpen) {
       setLocalSettings(settings);
     }
   }, [isOpen, settings]);
-  useEffect15(() => {
+  useEffect16(() => {
     const handleEscape = (e) => {
       if (e.key === "Escape" && isOpen) {
         onClose();
@@ -4717,7 +5346,7 @@ function ChatBubbleSettingsModal({
   };
   const isDark = localSettings.theme === "dark";
   return /* @__PURE__ */ jsxs11(Fragment5, { children: [
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx19(
       "div",
       {
         className: "fixed inset-0 bg-black bg-opacity-50 z-[60] backdrop-blur-sm",
@@ -4725,7 +5354,7 @@ function ChatBubbleSettingsModal({
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx19(
       "div",
       {
         className: "fixed inset-0 z-[70] flex items-center justify-center p-4",
@@ -4740,7 +5369,7 @@ function ChatBubbleSettingsModal({
             onClick: (e) => e.stopPropagation(),
             children: [
               /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between mb-6", children: [
-                /* @__PURE__ */ jsx18(
+                /* @__PURE__ */ jsx19(
                   "h2",
                   {
                     id: "settings-modal-title",
@@ -4748,56 +5377,56 @@ function ChatBubbleSettingsModal({
                     children: "Chat Settings"
                   }
                 ),
-                /* @__PURE__ */ jsx18(
+                /* @__PURE__ */ jsx19(
                   "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__ */ jsx18("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx18("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                    children: /* @__PURE__ */ jsx19("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx19("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
                   }
                 )
               ] }),
               /* @__PURE__ */ jsxs11("div", { className: "space-y-5 mb-6", children: [
                 /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between", children: [
                   /* @__PURE__ */ jsxs11("div", { children: [
-                    /* @__PURE__ */ jsx18("label", { className: "block text-base font-medium mb-1", children: "Theme" }),
-                    /* @__PURE__ */ jsx18("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Switch between light and dark modes" })
+                    /* @__PURE__ */ jsx19("label", { className: "block text-base font-medium mb-1", children: "Theme" }),
+                    /* @__PURE__ */ jsx19("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Switch between light and dark modes" })
                   ] }),
                   /* @__PURE__ */ jsxs11("div", { className: "flex items-center space-x-2", children: [
-                    /* @__PURE__ */ jsx18(
+                    /* @__PURE__ */ jsx19(
                       "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__ */ jsx18("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx18("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" }) })
+                        children: /* @__PURE__ */ jsx19("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx19("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__ */ jsx18(
+                    /* @__PURE__ */ jsx19(
                       "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__ */ jsx18("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx18("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" }) })
+                        children: /* @__PURE__ */ jsx19("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx19("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__ */ jsxs11("div", { className: "flex items-center justify-between", children: [
                   /* @__PURE__ */ jsxs11("div", { children: [
-                    /* @__PURE__ */ jsx18("label", { className: "block text-base font-medium mb-1", children: "Glass Mode" }),
-                    /* @__PURE__ */ jsx18("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Enable glassmorphism transparency effect" })
+                    /* @__PURE__ */ jsx19("label", { className: "block text-base font-medium mb-1", children: "Glass Mode" }),
+                    /* @__PURE__ */ jsx19("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Enable glassmorphism transparency effect" })
                   ] }),
-                  /* @__PURE__ */ jsx18(
+                  /* @__PURE__ */ jsx19(
                     "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__ */ jsx18(
+                      children: /* @__PURE__ */ jsx19(
                         "span",
                         {
                           className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${localSettings.glassMode ? "translate-x-6" : "translate-x-1"}`
@@ -4808,17 +5437,17 @@ function ChatBubbleSettingsModal({
                 ] }),
                 /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between", children: [
                   /* @__PURE__ */ jsxs11("div", { children: [
-                    /* @__PURE__ */ jsx18("label", { className: "block text-base font-medium mb-1", children: "Notifications" }),
-                    /* @__PURE__ */ jsx18("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Show unread message indicators" })
+                    /* @__PURE__ */ jsx19("label", { className: "block text-base font-medium mb-1", children: "Notifications" }),
+                    /* @__PURE__ */ jsx19("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Show unread message indicators" })
                   ] }),
-                  /* @__PURE__ */ jsx18(
+                  /* @__PURE__ */ jsx19(
                     "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__ */ jsx18(
+                      children: /* @__PURE__ */ jsx19(
                         "span",
                         {
                           className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${localSettings.notifications ? "translate-x-6" : "translate-x-1"}`
@@ -4827,16 +5456,16 @@ function ChatBubbleSettingsModal({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsx18("div", { className: `border-t ${isDark ? "border-gray-700" : "border-gray-200"} my-2` }),
+                /* @__PURE__ */ jsx19("div", { className: `border-t ${isDark ? "border-gray-700" : "border-gray-200"} my-2` }),
                 /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between", children: [
                   /* @__PURE__ */ jsxs11("div", { children: [
                     /* @__PURE__ */ jsxs11("label", { className: "block text-base font-medium mb-1 flex items-center space-x-2", children: [
-                      /* @__PURE__ */ jsx18("span", { children: "Subtitle Overlay" }),
-                      /* @__PURE__ */ jsx18("span", { className: "inline-block px-2 py-0.5 text-xs font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200", children: "BETA" })
+                      /* @__PURE__ */ jsx19("span", { children: "Subtitle Overlay" }),
+                      /* @__PURE__ */ jsx19("span", { className: "inline-block px-2 py-0.5 text-xs font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200", children: "BETA" })
                     ] }),
-                    /* @__PURE__ */ jsx18("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Minimalist voice-first overlay with @/ icon" })
+                    /* @__PURE__ */ jsx19("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Minimalist voice-first overlay with @/ icon" })
                   ] }),
-                  /* @__PURE__ */ jsx18(
+                  /* @__PURE__ */ jsx19(
                     "button",
                     {
                       onClick: () => setLocalSettings({
@@ -4848,7 +5477,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__ */ jsx18(
+                      children: /* @__PURE__ */ jsx19(
                         "span",
                         {
                           className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${localSettings.subtitleOverlayEnabled ? "translate-x-6" : "translate-x-1"}`
@@ -4859,8 +5488,8 @@ function ChatBubbleSettingsModal({
                 ] }),
                 /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between", children: [
                   /* @__PURE__ */ jsxs11("div", { children: [
-                    /* @__PURE__ */ jsx18("label", { className: "block text-base font-medium mb-1", children: "Display Mode" }),
-                    /* @__PURE__ */ jsx18("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Auto switches drawer on mobile, panel on desktop" })
+                    /* @__PURE__ */ jsx19("label", { className: "block text-base font-medium mb-1", children: "Display Mode" }),
+                    /* @__PURE__ */ jsx19("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Auto switches drawer on mobile, panel on desktop" })
                   ] }),
                   /* @__PURE__ */ jsxs11(
                     "select",
@@ -4872,22 +5501,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__ */ jsx18("option", { value: "auto", children: "Auto (Recommended)" }),
-                        /* @__PURE__ */ jsx18("option", { value: "drawer", children: "Always Drawer" }),
-                        /* @__PURE__ */ jsx18("option", { value: "full", children: "Always Panel" }),
-                        /* @__PURE__ */ jsx18("option", { value: "floating", children: "Always Floating" }),
-                        /* @__PURE__ */ jsx18("option", { value: "subtitle", children: "Subtitle Overlay (Beta)" })
+                        /* @__PURE__ */ jsx19("option", { value: "auto", children: "Auto (Recommended)" }),
+                        /* @__PURE__ */ jsx19("option", { value: "drawer", children: "Always Drawer" }),
+                        /* @__PURE__ */ jsx19("option", { value: "full", children: "Always Panel" }),
+                        /* @__PURE__ */ jsx19("option", { value: "floating", children: "Always Floating" }),
+                        /* @__PURE__ */ jsx19("option", { value: "subtitle", children: "Subtitle Overlay (Beta)" })
                       ]
                     }
                   )
                 ] }),
                 (localSettings.displayMode === "auto" || localSettings.displayMode === "drawer") && /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between", children: [
                   /* @__PURE__ */ jsxs11("div", { children: [
-                    /* @__PURE__ */ jsx18("label", { className: "block text-base font-medium mb-1", children: "Drawer Side" }),
-                    /* @__PURE__ */ jsx18("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Which edge drawer slides from" })
+                    /* @__PURE__ */ jsx19("label", { className: "block text-base font-medium mb-1", children: "Drawer Side" }),
+                    /* @__PURE__ */ jsx19("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Which edge drawer slides from" })
                   ] }),
                   /* @__PURE__ */ jsxs11("div", { className: "flex items-center space-x-2", children: [
-                    /* @__PURE__ */ jsx18(
+                    /* @__PURE__ */ jsx19(
                       "button",
                       {
                         onClick: () => setLocalSettings({ ...localSettings, drawerSide: "left" }),
@@ -4895,7 +5524,7 @@ function ChatBubbleSettingsModal({
                         children: "Left"
                       }
                     ),
-                    /* @__PURE__ */ jsx18(
+                    /* @__PURE__ */ jsx19(
                       "button",
                       {
                         onClick: () => setLocalSettings({ ...localSettings, drawerSide: "right" }),
@@ -4905,24 +5534,24 @@ function ChatBubbleSettingsModal({
                     )
                   ] })
                 ] }),
-                /* @__PURE__ */ jsx18("div", { className: `border-t ${isDark ? "border-gray-700" : "border-gray-200"} my-2` }),
+                /* @__PURE__ */ jsx19("div", { className: `border-t ${isDark ? "border-gray-700" : "border-gray-200"} my-2` }),
                 /* @__PURE__ */ jsxs11("div", { className: "mb-3", children: [
-                  /* @__PURE__ */ jsx18("h3", { className: "text-lg font-semibold mb-1", children: "Voice Control" }),
-                  /* @__PURE__ */ jsx18("p", { className: `text-xs ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Enable voice input and audio feedback" })
+                  /* @__PURE__ */ jsx19("h3", { className: "text-lg font-semibold mb-1", children: "Voice Control" }),
+                  /* @__PURE__ */ jsx19("p", { className: `text-xs ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Enable voice input and audio feedback" })
                 ] }),
                 /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between", children: [
                   /* @__PURE__ */ jsxs11("div", { children: [
-                    /* @__PURE__ */ jsx18("label", { className: "block text-base font-medium mb-1", children: "Voice Control" }),
-                    /* @__PURE__ */ jsx18("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Enable voice input and TTS responses" })
+                    /* @__PURE__ */ jsx19("label", { className: "block text-base font-medium mb-1", children: "Voice Control" }),
+                    /* @__PURE__ */ jsx19("p", { className: `text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Enable voice input and TTS responses" })
                   ] }),
-                  /* @__PURE__ */ jsx18(
+                  /* @__PURE__ */ jsx19(
                     "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__ */ jsx18(
+                      children: /* @__PURE__ */ jsx19(
                         "span",
                         {
                           className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${localSettings.voiceEnabled ? "translate-x-6" : "translate-x-1"}`
@@ -4934,17 +5563,17 @@ function ChatBubbleSettingsModal({
                 localSettings.voiceEnabled && /* @__PURE__ */ jsxs11(Fragment5, { children: [
                   /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between pl-4 border-l-2 border-blue-500/30", children: [
                     /* @__PURE__ */ jsxs11("div", { children: [
-                      /* @__PURE__ */ jsx18("label", { className: "block text-sm font-medium mb-1", children: "Auto-read AI Responses" }),
-                      /* @__PURE__ */ jsx18("p", { className: `text-xs ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Automatically read AI messages aloud" })
+                      /* @__PURE__ */ jsx19("label", { className: "block text-sm font-medium mb-1", children: "Auto-read AI Responses" }),
+                      /* @__PURE__ */ jsx19("p", { className: `text-xs ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Automatically read AI messages aloud" })
                     ] }),
-                    /* @__PURE__ */ jsx18(
+                    /* @__PURE__ */ jsx19(
                       "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__ */ jsx18(
+                        children: /* @__PURE__ */ jsx19(
                           "span",
                           {
                             className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${localSettings.autoReadResponses ? "translate-x-6" : "translate-x-1"}`
@@ -4955,17 +5584,17 @@ function ChatBubbleSettingsModal({
                   ] }),
                   /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between pl-4 border-l-2 border-blue-500/30", children: [
                     /* @__PURE__ */ jsxs11("div", { children: [
-                      /* @__PURE__ */ jsx18("label", { className: "block text-sm font-medium mb-1", children: "Premium Voices \u{1F48E}" }),
-                      /* @__PURE__ */ jsx18("p", { className: `text-xs ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Use high-quality OpenAI voices (requires network)" })
+                      /* @__PURE__ */ jsx19("label", { className: "block text-sm font-medium mb-1", children: "Premium Voices \u{1F48E}" }),
+                      /* @__PURE__ */ jsx19("p", { className: `text-xs ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Use high-quality OpenAI voices (requires network)" })
                     ] }),
-                    /* @__PURE__ */ jsx18(
+                    /* @__PURE__ */ jsx19(
                       "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__ */ jsx18(
+                        children: /* @__PURE__ */ jsx19(
                           "span",
                           {
                             className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${localSettings.usePremiumVoices ? "translate-x-6" : "translate-x-1"}`
@@ -4980,7 +5609,7 @@ function ChatBubbleSettingsModal({
                       localSettings.ttsSpeed.toFixed(1),
                       "x"
                     ] }),
-                    /* @__PURE__ */ jsx18(
+                    /* @__PURE__ */ jsx19(
                       "input",
                       {
                         type: "range",
@@ -4993,29 +5622,29 @@ function ChatBubbleSettingsModal({
                       }
                     ),
                     /* @__PURE__ */ jsxs11("div", { className: "flex justify-between text-xs text-gray-400 mt-1", children: [
-                      /* @__PURE__ */ jsx18("span", { children: "0.5x (Slow)" }),
-                      /* @__PURE__ */ jsx18("span", { children: "1.0x (Normal)" }),
-                      /* @__PURE__ */ jsx18("span", { children: "2.0x (Fast)" })
+                      /* @__PURE__ */ jsx19("span", { children: "0.5x (Slow)" }),
+                      /* @__PURE__ */ jsx19("span", { children: "1.0x (Normal)" }),
+                      /* @__PURE__ */ jsx19("span", { children: "2.0x (Fast)" })
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsx18("div", { className: `border-t ${isDark ? "border-gray-700" : "border-gray-200"} my-2` }),
+                  /* @__PURE__ */ jsx19("div", { className: `border-t ${isDark ? "border-gray-700" : "border-gray-200"} my-2` }),
                   /* @__PURE__ */ jsxs11("div", { className: "mb-3", children: [
-                    /* @__PURE__ */ jsx18("h4", { className: "text-sm font-semibold mb-1", children: "Voice Quick Record (Ctrl+/)" }),
-                    /* @__PURE__ */ jsx18("p", { className: `text-xs ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Press Ctrl+/ (or Cmd+/ on Mac) to auto-record and execute voice commands" })
+                    /* @__PURE__ */ jsx19("h4", { className: "text-sm font-semibold mb-1", children: "Voice Quick Record (Ctrl+/)" }),
+                    /* @__PURE__ */ jsx19("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__ */ jsxs11("div", { className: "flex items-center justify-between pl-4 border-l-2 border-purple-500/30", children: [
                     /* @__PURE__ */ jsxs11("div", { children: [
-                      /* @__PURE__ */ jsx18("label", { className: "block text-sm font-medium mb-1", children: "Auto-Execute Commands" }),
-                      /* @__PURE__ */ jsx18("p", { className: `text-xs ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Automatically run recognized voice commands" })
+                      /* @__PURE__ */ jsx19("label", { className: "block text-sm font-medium mb-1", children: "Auto-Execute Commands" }),
+                      /* @__PURE__ */ jsx19("p", { className: `text-xs ${isDark ? "text-gray-400" : "text-gray-500"}`, children: "Automatically run recognized voice commands" })
                     ] }),
-                    /* @__PURE__ */ jsx18(
+                    /* @__PURE__ */ jsx19(
                       "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__ */ jsx18(
+                        children: /* @__PURE__ */ jsx19(
                           "span",
                           {
                             className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${localSettings.sttAutoExecute ? "translate-x-6" : "translate-x-1"}`
@@ -5030,7 +5659,7 @@ function ChatBubbleSettingsModal({
                       (localSettings.sttAutoRecordTimeout / 1e3).toFixed(1),
                       "s"
                     ] }),
-                    /* @__PURE__ */ jsx18(
+                    /* @__PURE__ */ jsx19(
                       "input",
                       {
                         type: "range",
@@ -5043,21 +5672,21 @@ function ChatBubbleSettingsModal({
                       }
                     ),
                     /* @__PURE__ */ jsxs11("div", { className: "flex justify-between text-xs text-gray-400 mt-1", children: [
-                      /* @__PURE__ */ jsx18("span", { children: "2s" }),
-                      /* @__PURE__ */ jsx18("span", { children: "8s" }),
-                      /* @__PURE__ */ jsx18("span", { children: "15s" })
+                      /* @__PURE__ */ jsx19("span", { children: "2s" }),
+                      /* @__PURE__ */ jsx19("span", { children: "8s" }),
+                      /* @__PURE__ */ jsx19("span", { children: "15s" })
                     ] })
                   ] }),
                   /* @__PURE__ */ jsxs11("div", { className: `p-3 rounded-lg ${isDark ? "bg-purple-900/20 border border-purple-500/30" : "bg-purple-50 border border-purple-200"}`, children: [
-                    /* @__PURE__ */ jsx18("p", { className: `text-xs ${isDark ? "text-purple-300" : "text-purple-800"} mb-1 font-medium`, children: "\u26A1 Quick Tip: Press Ctrl+/ anywhere (even while typing!)" }),
-                    /* @__PURE__ */ jsx18("p", { className: `text-xs ${isDark ? "text-purple-400" : "text-purple-700"}`, children: localSettings.sttAutoExecute ? "Recording auto-stops and executes your command" : "Recording auto-stops and fills the input (press Enter to send)" })
+                    /* @__PURE__ */ jsx19("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__ */ jsx19("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__ */ jsx18("div", { className: `p-3 rounded-lg ${isDark ? "bg-green-900/20 border border-green-500/30" : "bg-green-50 border border-green-200"}`, children: /* @__PURE__ */ jsx18("p", { className: `text-xs ${isDark ? "text-green-300" : "text-green-800"}`, children: "\u{1F49A} Using free device voices (works offline, zero cost)" }) }),
-                  localSettings.usePremiumVoices && /* @__PURE__ */ jsx18("div", { className: `p-3 rounded-lg ${isDark ? "bg-purple-900/20 border border-purple-500/30" : "bg-purple-50 border border-purple-200"}`, children: /* @__PURE__ */ jsx18("p", { className: `text-xs ${isDark ? "text-purple-300" : "text-purple-800"}`, children: "\u{1F48E} Using premium OpenAI voices (requires internet connection)" }) })
+                  !localSettings.usePremiumVoices && /* @__PURE__ */ jsx19("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__ */ jsx19("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__ */ jsx19("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__ */ jsx19("p", { className: `text-xs ${isDark ? "text-purple-300" : "text-purple-800"}`, children: "\u{1F48E} Using premium OpenAI voices (requires internet connection)" }) })
                 ] })
               ] }),
               /* @__PURE__ */ jsxs11("div", { className: "flex justify-end space-x-3 pt-4 border-t border-gray-200 dark:border-gray-700", children: [
-                /* @__PURE__ */ jsx18(
+                /* @__PURE__ */ jsx19(
                   "button",
                   {
                     onClick: handleCancel,
@@ -5065,7 +5694,7 @@ function ChatBubbleSettingsModal({
                     children: "Cancel"
                   }
                 ),
-                /* @__PURE__ */ jsx18(
+                /* @__PURE__ */ jsx19(
                   "button",
                   {
                     onClick: handleSave,
@@ -5201,12 +5830,14 @@ function findBestMatch(query, tools) {
   };
 }
 export {
+  ApiKeyProvider,
   AutoNavigationContext,
   ChatBubble,
   ChatBubbleSettingsModal,
   ChatBubbleVariant,
   ChatInputProvider,
   ChatProvider,
+  ClaudeClient,
   CodeBlock,
   Components,
   DemoAIInterface,
@@ -5220,9 +5851,13 @@ export {
   ToolManager,
   ToolMenuPopup,
   ToolMenuPopupTrigger,
+  createClaudeClient,
   findBestMatch,
   scoreToolMatch,
   useAllContexts,
+  useApiKey,
+  useApiKeyOptional,
+  useApiKeyStorage,
   useChatContext,
   useChatInput,
   useCurrentContext,