@apteva/apteva-kit 0.1.130 → 0.1.132

package/dist/index.mjs

@@ -2805,17 +2805,36 @@ function ToolCall({ name, status, isReceiving = false, inputLength = 0, streamOu
 // src/components/Chat/ToolCallGroup.tsx
 import { useState as useState5 } from "react";
 import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+function formatResultPreview(result) {
+  if (result == null) return "";
+  const str = typeof result === "string" ? result : JSON.stringify(result);
+  const oneLine = str.replace(/\s+/g, " ").trim();
+  return oneLine.length > 120 ? oneLine.slice(0, 117) + "..." : oneLine;
+}
 function ToolCallGroup({ tools }) {
   const completed = tools.filter((t) => t.status === "completed").length;
   const errored = tools.filter((t) => t.status === "error").length;
-  const running = tools.filter((t) => t.status === "running").length;
-  const preparing = tools.filter((t) => t.status === "preparing").length;
   const total = tools.length;
   const allDone = completed + errored === total;
   const [expanded, setExpanded] = useState5(false);
-  const isExpanded = allDone ? expanded : true;
-  const activeStreamTool = tools.find((t) => t.status === "running" && t.streamOutput);
-  const statusText = allDone ? `Used ${total} tools` : `Using ${total} tools${completed > 0 ? ` \xB7 ${completed}/${total} done` : ""}`;
+  const isExpanded = expanded;
+  const activeTool = tools.find((t) => t.status === "running") || tools.find((t) => t.status === "preparing");
+  let statusText;
+  if (allDone) {
+    if (errored > 0) {
+      statusText = `Used ${total} tools \xB7 ${errored} failed`;
+    } else {
+      statusText = `Used ${total} tools`;
+    }
+  } else {
+    const parts = [`Using ${total} tools`];
+    if (completed > 0) parts.push(`${completed} done`);
+    if (activeTool) {
+      const activeLabel = activeTool.streamOutput || (activeTool.status === "preparing" ? "preparing" : "running");
+      parts.push(`${activeTool.name} ${activeLabel === "preparing" || activeLabel === "running" ? activeLabel + "..." : "\xB7 " + activeLabel}`);
+    }
+    statusText = parts.join(" \xB7 ");
+  }
   const cardClass = allDone ? errored > 0 ? "apteva-tool-group apteva-tool-group-error" : "apteva-tool-group apteva-tool-group-completed" : "apteva-tool-group apteva-tool-group-running";
   return /* @__PURE__ */ jsxs13("div", { className: cardClass, children: [
     /* @__PURE__ */ jsxs13(
@@ -2846,18 +2865,20 @@ function ToolCallGroup({ tools }) {
         ]
       }
     ),
-    !isExpanded && activeStreamTool && /* @__PURE__ */ jsxs13("div", { className: "apteva-tool-group-stream", children: [
-      /* @__PURE__ */ jsxs13("span", { className: "apteva-tool-group-stream-name", children: [
-        activeStreamTool.name,
-        ":"
-      ] }),
-      /* @__PURE__ */ jsx18("span", { className: "apteva-tool-group-stream-text", children: activeStreamTool.streamOutput })
-    ] }),
-    isExpanded && /* @__PURE__ */ jsx18("div", { className: "apteva-tool-group-list", children: tools.map((tool) => /* @__PURE__ */ jsxs13("div", { className: "apteva-tool-group-item", children: [
-      tool.status === "completed" ? /* @__PURE__ */ jsx18("svg", { className: "apteva-tool-group-item-icon apteva-tool-group-item-done", width: "12", height: "12", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx18("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M5 13l4 4L19 7" }) }) : tool.status === "error" ? /* @__PURE__ */ jsx18("svg", { className: "apteva-tool-group-item-icon apteva-tool-group-item-error", width: "12", height: "12", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx18("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M6 18L18 6M6 6l12 12" }) }) : /* @__PURE__ */ jsx18("div", { className: "apteva-tool-group-item-icon apteva-tool-group-item-spinner" }),
-      /* @__PURE__ */ jsx18("span", { className: "apteva-tool-group-item-name", children: tool.name }),
-      tool.streamOutput && tool.status === "running" && /* @__PURE__ */ jsx18("span", { className: "apteva-tool-group-item-stream", children: tool.streamOutput })
-    ] }, tool.id)) })
+    isExpanded && /* @__PURE__ */ jsx18("div", { className: "apteva-tool-group-list", children: tools.map((tool) => {
+      const resultPreview = tool.status === "completed" && tool.result ? formatResultPreview(tool.result) : "";
+      const hasDetail = tool.status === "running" && tool.streamOutput || resultPreview;
+      return /* @__PURE__ */ jsxs13("div", { className: `apteva-tool-group-item ${hasDetail ? "apteva-tool-group-item-has-detail" : ""}`, children: [
+        /* @__PURE__ */ jsxs13("div", { className: "apteva-tool-group-item-row", children: [
+          tool.status === "completed" ? /* @__PURE__ */ jsx18("svg", { className: "apteva-tool-group-item-icon apteva-tool-group-item-done", width: "12", height: "12", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx18("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M5 13l4 4L19 7" }) }) : tool.status === "error" ? /* @__PURE__ */ jsx18("svg", { className: "apteva-tool-group-item-icon apteva-tool-group-item-error", width: "12", height: "12", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx18("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M6 18L18 6M6 6l12 12" }) }) : /* @__PURE__ */ jsx18("div", { className: "apteva-tool-group-item-icon apteva-tool-group-item-spinner" }),
+          /* @__PURE__ */ jsx18("span", { className: "apteva-tool-group-item-name", children: tool.name }),
+          tool.status === "running" && !tool.streamOutput && /* @__PURE__ */ jsx18("span", { className: "apteva-tool-group-item-running-label", children: "running..." }),
+          tool.status === "preparing" && /* @__PURE__ */ jsx18("span", { className: "apteva-tool-group-item-running-label", children: "preparing..." })
+        ] }),
+        tool.status === "running" && tool.streamOutput && /* @__PURE__ */ jsx18("div", { className: "apteva-tool-group-item-detail", children: tool.streamOutput }),
+        resultPreview && /* @__PURE__ */ jsx18("div", { className: "apteva-tool-group-item-detail apteva-tool-group-item-result-text", children: resultPreview })
+      ] }, tool.id);
+    }) })
   ] });
 }
 
@@ -3108,7 +3129,8 @@ function Message({ message, onAction, enableWidgets, onWidgetRender, persistentW
               name: tool.name,
               status: tool.status || (tool.result !== void 0 ? "completed" : "running"),
               isReceiving: tool.isReceiving,
-              streamOutput: tool.streamOutput
+              streamOutput: tool.streamOutput,
+              result: tool.result
             };
           });
           elements.push(
@@ -4457,6 +4479,7 @@ function useVoiceSession(config) {
   const [state, setState] = useState9("idle");
   const [partialTranscript, setPartialTranscript] = useState9("");
   const [duration, setDuration] = useState9(0);
+  const [muted, setMuted] = useState9(false);
   const wsRef = useRef9(null);
   const captureCtxRef = useRef9(null);
   const playbackCtxRef = useRef9(null);
@@ -4465,6 +4488,7 @@ function useVoiceSession(config) {
   const nextPlayTimeRef = useRef9(0);
   const durationIntervalRef = useRef9(null);
   const startTimeRef = useRef9(0);
+  const mutedRef = useRef9(false);
   const configRef = useRef9(config);
   configRef.current = config;
   const cleanup = useCallback4(() => {
@@ -4502,6 +4526,8 @@ function useVoiceSession(config) {
       wsRef.current = null;
     }
     nextPlayTimeRef.current = 0;
+    mutedRef.current = false;
+    setMuted(false);
     setPartialTranscript("");
     setDuration(0);
   }, []);
@@ -4529,6 +4555,8 @@ function useVoiceSession(config) {
     source.start(startTime);
     nextPlayTimeRef.current = startTime + audioBuffer.duration;
   }, []);
+  const startCaptureRef = useRef9(() => {
+  });
   const handleMessage = useCallback4((msg) => {
     const cfg = configRef.current;
     switch (msg.type) {
@@ -4538,6 +4566,7 @@ function useVoiceSession(config) {
         durationIntervalRef.current = setInterval(() => {
           setDuration(Math.floor((Date.now() - startTimeRef.current) / 1e3));
         }, 1e3);
+        startCaptureRef.current();
         break;
       case "audio_delta":
         if (msg.data?.chunk) {
@@ -4594,6 +4623,7 @@ function useVoiceSession(config) {
       processorRef.current = captureCtxRef.current.createScriptProcessor(2048, 1, 1);
       processorRef.current.onaudioprocess = (e) => {
         if (!ws || ws.readyState !== WebSocket.OPEN) return;
+        if (mutedRef.current) return;
         const inputData = e.inputBuffer.getChannelData(0);
         const resampledData = resampleAudio(inputData, nativeSampleRate, 16e3);
         const int16Data = float32ToInt16(resampledData);
@@ -4606,16 +4636,24 @@ function useVoiceSession(config) {
       source.connect(processorRef.current);
       processorRef.current.connect(captureCtxRef.current.destination);
     } catch (e) {
+      console.warn("Microphone access denied:", e);
       configRef.current.onError?.(new Error("Microphone access denied"));
-      cleanup();
-      setState("idle");
     }
   }, [cleanup]);
+  startCaptureRef.current = startCapture;
   const start = useCallback4(() => {
     if (state !== "idle") return;
     setState("connecting");
-    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
-    const wsUrl = `${protocol}//${window.location.host}${config.apiUrl}/voice`;
+    let wsUrl;
+    if (/^https?:\/\//.test(config.apiUrl)) {
+      wsUrl = config.apiUrl.replace(/^http/, "ws") + "/voice";
+    } else {
+      const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+      wsUrl = `${protocol}//${window.location.host}${config.apiUrl}/voice`;
+    }
+    if (config.apiKey) {
+      wsUrl += `${wsUrl.includes("?") ? "&" : "?"}token=${encodeURIComponent(config.apiKey)}`;
+    }
     const ws = new WebSocket(wsUrl);
     wsRef.current = ws;
     ws.onopen = () => {
@@ -4625,7 +4663,6 @@ function useVoiceSession(config) {
         type: "start",
         data: { provider, voice }
       }));
-      startCapture();
     };
     ws.onmessage = (event) => {
       try {
@@ -4642,11 +4679,20 @@ function useVoiceSession(config) {
       cleanup();
       setState("idle");
     };
-  }, [state, config.apiUrl, startCapture, handleMessage, cleanup]);
+  }, [state, config.apiUrl, handleMessage, cleanup]);
   const stop = useCallback4(() => {
     cleanup();
     setState("idle");
   }, [cleanup]);
+  const toggleMute = useCallback4(() => {
+    const next = !mutedRef.current;
+    mutedRef.current = next;
+    setMuted(next);
+    if (mediaStreamRef.current) {
+      const track = mediaStreamRef.current.getAudioTracks()[0];
+      if (track) track.enabled = !next;
+    }
+  }, []);
   const sendText = useCallback4((text) => {
     const ws = wsRef.current;
     if (!ws || ws.readyState !== WebSocket.OPEN) return;
@@ -4655,7 +4701,7 @@ function useVoiceSession(config) {
       data: { content: text }
     }));
   }, []);
-  return { state, partialTranscript, duration, start, stop, sendText };
+  return { state, partialTranscript, duration, muted, start, stop, sendText, toggleMute };
 }
 
 // src/components/Chat/Chat.tsx
@@ -4746,6 +4792,7 @@ var Chat = forwardRef(function Chat2({
   }, []);
   const voice = useVoiceSession({
     apiUrl: apiUrl || "",
+    apiKey,
     provider: voiceProvider,
     voice: voiceId,
     onTranscript: handleVoiceTranscript,
@@ -5439,9 +5486,214 @@ ${planToExecute}`;
 import { useState as useState11 } from "react";
 import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
 
+// src/components/Call/Call.tsx
+import { useState as useState12, useCallback as useCallback6, useEffect as useEffect12, useRef as useRef12 } from "react";
+
+// src/components/Call/CallStatus.tsx
+import { jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
+function formatDuration(seconds) {
+  const m = Math.floor(seconds / 60);
+  const s = seconds % 60;
+  return `${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
+}
+function CallStatus({ agentName = "Agent", agentAvatarUrl, state, duration }) {
+  const initial = agentName.charAt(0).toUpperCase();
+  return /* @__PURE__ */ jsxs22("div", { className: "apteva-call-agent", children: [
+    /* @__PURE__ */ jsxs22("div", { className: "apteva-call-avatar-wrap", children: [
+      agentAvatarUrl ? /* @__PURE__ */ jsx28("img", { src: agentAvatarUrl, alt: agentName, className: "apteva-call-avatar" }) : /* @__PURE__ */ jsx28("div", { className: "apteva-call-avatar-placeholder", children: initial }),
+      state === "active" && /* @__PURE__ */ jsx28("div", { className: "apteva-call-pulse-ring" })
+    ] }),
+    /* @__PURE__ */ jsx28("div", { className: "apteva-call-agent-name", children: agentName }),
+    /* @__PURE__ */ jsxs22("div", { className: `apteva-call-status ${state === "active" ? "apteva-call-status-active" : state === "connecting" ? "apteva-call-status-connecting" : state === "error" ? "apteva-call-status-error" : ""}`, children: [
+      state === "idle" && "Ready",
+      state === "connecting" && "Connecting...",
+      state === "active" && "Connected",
+      state === "error" && "Error"
+    ] }),
+    (state === "active" || state === "connecting") && /* @__PURE__ */ jsx28("div", { className: "apteva-call-duration", children: formatDuration(duration) })
+  ] });
+}
+
+// src/components/Call/CallTranscript.tsx
+import { useEffect as useEffect11, useRef as useRef11 } from "react";
+import { jsx as jsx29, jsxs as jsxs23 } from "react/jsx-runtime";
+function CallTranscript({ entries, partialTranscript }) {
+  const scrollRef = useRef11(null);
+  useEffect11(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [entries.length, partialTranscript]);
+  if (entries.length === 0 && !partialTranscript) return null;
+  return /* @__PURE__ */ jsxs23("div", { className: "apteva-call-transcript", ref: scrollRef, children: [
+    entries.map((entry) => /* @__PURE__ */ jsxs23("div", { className: "apteva-call-transcript-entry", children: [
+      /* @__PURE__ */ jsx29("span", { className: `apteva-call-transcript-role apteva-call-transcript-role-${entry.role}`, children: entry.role === "user" ? "You" : entry.role === "assistant" ? "Agent" : "System" }),
+      /* @__PURE__ */ jsx29("span", { className: "apteva-call-transcript-content", children: entry.content })
+    ] }, entry.id)),
+    partialTranscript && /* @__PURE__ */ jsxs23("div", { className: "apteva-call-transcript-entry", children: [
+      /* @__PURE__ */ jsx29("span", { className: "apteva-call-transcript-role apteva-call-transcript-role-user", children: "You" }),
+      /* @__PURE__ */ jsx29("span", { className: "apteva-call-transcript-partial", children: partialTranscript })
+    ] })
+  ] });
+}
+
+// src/components/Call/CallControls.tsx
+import { Fragment as Fragment7, jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
+function CallControls({ state, muted, mediaMode, onStart, onEnd, onToggleMute }) {
+  const isLive = state === "active" || state === "connecting";
+  return /* @__PURE__ */ jsx30("div", { className: "apteva-call-controls", children: isLive ? /* @__PURE__ */ jsxs24(Fragment7, { children: [
+    /* @__PURE__ */ jsx30(
+      "button",
+      {
+        onClick: onToggleMute,
+        className: `apteva-call-btn apteva-call-btn-mute ${muted ? "apteva-call-btn-mute-active" : ""}`,
+        title: muted ? "Unmute" : "Mute",
+        children: muted ? /* @__PURE__ */ jsxs24("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ jsx30("line", { x1: "1", y1: "1", x2: "23", y2: "23" }),
+          /* @__PURE__ */ jsx30("path", { d: "M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6" }),
+          /* @__PURE__ */ jsx30("path", { d: "M17 16.95A7 7 0 0 1 5 12v-2m14 0v2c0 .76-.13 1.49-.35 2.17" }),
+          /* @__PURE__ */ jsx30("line", { x1: "12", y1: "19", x2: "12", y2: "23" }),
+          /* @__PURE__ */ jsx30("line", { x1: "8", y1: "23", x2: "16", y2: "23" })
+        ] }) : /* @__PURE__ */ jsxs24("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ jsx30("path", { d: "M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" }),
+          /* @__PURE__ */ jsx30("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
+          /* @__PURE__ */ jsx30("line", { x1: "12", y1: "19", x2: "12", y2: "23" }),
+          /* @__PURE__ */ jsx30("line", { x1: "8", y1: "23", x2: "16", y2: "23" })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx30(
+      "button",
+      {
+        onClick: onEnd,
+        className: "apteva-call-btn apteva-call-btn-end",
+        title: "End call",
+        children: /* @__PURE__ */ jsxs24("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ jsx30("path", { d: "M10.68 13.31a16 16 0 0 0 3.41 2.6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7 2 2 0 0 1 1.72 2v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91" }),
+          /* @__PURE__ */ jsx30("line", { x1: "23", y1: "1", x2: "1", y2: "23" })
+        ] })
+      }
+    )
+  ] }) : (
+    /* Start call button */
+    /* @__PURE__ */ jsx30(
+      "button",
+      {
+        onClick: onStart,
+        className: "apteva-call-btn apteva-call-btn-start",
+        title: "Start call",
+        disabled: state === "error",
+        children: /* @__PURE__ */ jsx30("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx30("path", { d: "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" }) })
+      }
+    )
+  ) });
+}
+
+// src/components/Call/Call.tsx
+import { jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
+function Call({
+  agentName = "Agent",
+  agentAvatarUrl,
+  apiUrl,
+  apiKey,
+  voiceProvider,
+  voiceId,
+  mediaMode = "voice",
+  autoStart = false,
+  showTranscript = true,
+  maxTranscriptEntries = 50,
+  onCallStart,
+  onCallEnd,
+  onTranscript,
+  onError,
+  onMuteChange,
+  variant = "default",
+  theme,
+  className
+}) {
+  const [transcripts, setTranscripts] = useState12([]);
+  const prevStateRef = useRef12("idle");
+  const durationRef = useRef12(0);
+  const autoStartedRef = useRef12(false);
+  const handleTranscript = useCallback6((entry) => {
+    setTranscripts((prev) => {
+      const next = [...prev, entry];
+      return next.length > maxTranscriptEntries ? next.slice(next.length - maxTranscriptEntries) : next;
+    });
+    onTranscript?.(entry);
+  }, [maxTranscriptEntries, onTranscript]);
+  const voice = useVoiceSession({
+    apiUrl,
+    apiKey,
+    provider: voiceProvider,
+    voice: voiceId,
+    onTranscript: handleTranscript,
+    onError
+  });
+  useEffect12(() => {
+    durationRef.current = voice.duration;
+  }, [voice.duration]);
+  useEffect12(() => {
+    const prev = prevStateRef.current;
+    if (prev !== "active" && voice.state === "active") {
+      onCallStart?.();
+    }
+    if (prev === "active" && voice.state === "idle") {
+      onCallEnd?.({ duration: durationRef.current, transcripts });
+    }
+    prevStateRef.current = voice.state;
+  }, [voice.state, onCallStart, onCallEnd, transcripts]);
+  useEffect12(() => {
+    if (autoStart && !autoStartedRef.current && voice.state === "idle") {
+      autoStartedRef.current = true;
+      voice.start();
+    }
+  }, [autoStart, voice.state, voice.start]);
+  useEffect12(() => {
+    onMuteChange?.(voice.muted);
+  }, [voice.muted, onMuteChange]);
+  const cn2 = [
+    "apteva-call",
+    variant !== "default" && `apteva-call-${variant}`,
+    theme === "dark" && "apteva-force-dark",
+    theme === "light" && "apteva-force-light",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs25("div", { className: cn2, children: [
+    /* @__PURE__ */ jsx31(
+      CallStatus,
+      {
+        agentName,
+        agentAvatarUrl,
+        state: voice.state,
+        duration: voice.duration
+      }
+    ),
+    mediaMode === "video" && /* @__PURE__ */ jsx31("div", { className: "apteva-call-video-area", children: /* @__PURE__ */ jsx31("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", opacity: "0.4", children: /* @__PURE__ */ jsx31("path", { d: "M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14" }) }) }),
+    showTranscript && /* @__PURE__ */ jsx31(
+      CallTranscript,
+      {
+        entries: transcripts,
+        partialTranscript: voice.partialTranscript
+      }
+    ),
+    /* @__PURE__ */ jsx31(
+      CallControls,
+      {
+        state: voice.state,
+        muted: voice.muted,
+        mediaMode,
+        onStart: voice.start,
+        onEnd: voice.stop,
+        onToggleMute: voice.toggleMute
+      }
+    )
+  ] });
+}
+
 // src/components/Command/Command.tsx
-import React, { useState as useState12, useEffect as useEffect11 } from "react";
-import { Fragment as Fragment7, jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
+import React3, { useState as useState13, useEffect as useEffect13 } from "react";
+import { Fragment as Fragment8, jsx as jsx32, jsxs as jsxs26 } from "react/jsx-runtime";
 function Command({
   agentId,
   command: initialCommand,
@@ -5468,28 +5720,28 @@ function Command({
   resultRenderer,
   className
 }) {
-  const [state, setState] = useState12("idle");
-  const [result, setResult] = useState12(null);
-  const [error, setError] = useState12(null);
-  const [progress, setProgress] = useState12(0);
-  const [command, setCommand] = useState12(initialCommand || "");
-  const [streamedContent, setStreamedContent] = useState12("");
-  const [plan, setPlan] = useState12("");
-  const [pendingCommand, setPendingCommand] = useState12("");
-  const [showPlanDetails, setShowPlanDetails] = useState12(false);
-  const [uploadedFiles, setUploadedFiles] = useState12([]);
-  const [showSettingsMenu, setShowSettingsMenu] = useState12(false);
-  const [internalPlanMode, setInternalPlanMode] = useState12(planMode);
-  const fileInputRef = React.useRef(null);
-  useEffect11(() => {
+  const [state, setState] = useState13("idle");
+  const [result, setResult] = useState13(null);
+  const [error, setError] = useState13(null);
+  const [progress, setProgress] = useState13(0);
+  const [command, setCommand] = useState13(initialCommand || "");
+  const [streamedContent, setStreamedContent] = useState13("");
+  const [plan, setPlan] = useState13("");
+  const [pendingCommand, setPendingCommand] = useState13("");
+  const [showPlanDetails, setShowPlanDetails] = useState13(false);
+  const [uploadedFiles, setUploadedFiles] = useState13([]);
+  const [showSettingsMenu, setShowSettingsMenu] = useState13(false);
+  const [internalPlanMode, setInternalPlanMode] = useState13(planMode);
+  const fileInputRef = React3.useRef(null);
+  useEffect13(() => {
     if (autoExecute && state === "idle" && command) {
       executeCommand();
     }
   }, [autoExecute]);
-  useEffect11(() => {
+  useEffect13(() => {
     setInternalPlanMode(planMode);
   }, [planMode]);
-  useEffect11(() => {
+  useEffect13(() => {
     const handleClickOutside = (event) => {
       const target = event.target;
       if (showSettingsMenu && !target.closest(".settings-menu-container")) {
@@ -5891,7 +6143,7 @@ ${planToExecute}`;
     setUploadedFiles((prev) => prev.filter((_, i) => i !== index));
   };
   const isCompact = variant === "compact";
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs26(
     "div",
     {
       className: cn(
@@ -5906,9 +6158,9 @@ ${planToExecute}`;
       ),
       style: { minHeight: isCompact ? "auto" : "180px" },
       children: [
-        /* @__PURE__ */ jsxs22("div", { className: cn("flex-1 flex", isCompact ? "flex-row items-center p-3 gap-3" : "flex-col p-4"), children: [
-          state === "idle" && allowInput && !isCompact && /* @__PURE__ */ jsxs22(Fragment7, { children: [
-            /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsxs26("div", { className: cn("flex-1 flex", isCompact ? "flex-row items-center p-3 gap-3" : "flex-col p-4"), children: [
+          state === "idle" && allowInput && !isCompact && /* @__PURE__ */ jsxs26(Fragment8, { children: [
+            /* @__PURE__ */ jsx32(
               "textarea",
               {
                 value: command,
@@ -5924,42 +6176,42 @@ ${planToExecute}`;
                 rows: 6
               }
             ),
-            uploadedFiles.length > 0 && /* @__PURE__ */ jsx28("div", { className: "flex flex-wrap gap-2 mt-2", children: uploadedFiles.map((file, index) => /* @__PURE__ */ jsxs22("div", { className: "relative group", children: [
-              file.type === "image" ? /* @__PURE__ */ jsx28(
+            uploadedFiles.length > 0 && /* @__PURE__ */ jsx32("div", { className: "flex flex-wrap gap-2 mt-2", children: uploadedFiles.map((file, index) => /* @__PURE__ */ jsxs26("div", { className: "relative group", children: [
+              file.type === "image" ? /* @__PURE__ */ jsx32(
                 "img",
                 {
                   src: file.preview,
                   alt: file.name,
                   className: "w-20 h-20 object-cover rounded-lg border-2 border-neutral-300 dark:border-neutral-600"
                 }
-              ) : /* @__PURE__ */ jsxs22("div", { className: "w-20 h-20 flex flex-col items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-neutral-50 dark:bg-neutral-800", children: [
-                /* @__PURE__ */ jsx28("svg", { className: "w-8 h-8 text-neutral-500 dark:text-neutral-400", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx28("path", { fillRule: "evenodd", d: "M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z", clipRule: "evenodd" }) }),
-                /* @__PURE__ */ jsx28("span", { className: "text-[8px] text-neutral-500 dark:text-neutral-400 mt-1 px-1 truncate max-w-full", children: file.name.length > 12 ? file.name.slice(0, 12) + "..." : file.name })
+              ) : /* @__PURE__ */ jsxs26("div", { className: "w-20 h-20 flex flex-col items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-neutral-50 dark:bg-neutral-800", children: [
+                /* @__PURE__ */ jsx32("svg", { className: "w-8 h-8 text-neutral-500 dark:text-neutral-400", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx32("path", { fillRule: "evenodd", d: "M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z", clipRule: "evenodd" }) }),
+                /* @__PURE__ */ jsx32("span", { className: "text-[8px] text-neutral-500 dark:text-neutral-400 mt-1 px-1 truncate max-w-full", children: file.name.length > 12 ? file.name.slice(0, 12) + "..." : file.name })
               ] }),
-              /* @__PURE__ */ jsx28(
+              /* @__PURE__ */ jsx32(
                 "button",
                 {
                   onClick: () => removeFile(index),
                   className: "absolute -top-2 -right-2 w-6 h-6 bg-red-500 hover:bg-red-600 text-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity",
                   title: `Remove ${file.type}`,
-                  children: /* @__PURE__ */ jsx28("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx28("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                  children: /* @__PURE__ */ jsx32("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx32("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
                 }
               )
             ] }, index)) })
           ] }),
-          state === "idle" && allowInput && isCompact && /* @__PURE__ */ jsxs22(Fragment7, { children: [
-            /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-0.5 flex-shrink-0", children: [
-              enableFileUpload && /* @__PURE__ */ jsx28(
+          state === "idle" && allowInput && isCompact && /* @__PURE__ */ jsxs26(Fragment8, { children: [
+            /* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-0.5 flex-shrink-0", children: [
+              enableFileUpload && /* @__PURE__ */ jsx32(
                 "button",
                 {
                   onClick: () => fileInputRef.current?.click(),
                   className: "w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 !text-neutral-500 dark:!text-neutral-500 hover:bg-neutral-100 dark:hover:bg-neutral-800",
                   title: "Attach file",
-                  children: /* @__PURE__ */ jsx28("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx28("path", { d: "M8.4 2.8L4.4 6.8C3.736 7.464 3.736 8.536 4.4 9.2C5.064 9.864 6.136 9.864 6.8 9.2L11.6 4.4C12.704 3.296 12.704 1.504 11.6 0.4C10.496 -0.704 8.704 -0.704 7.6 0.4L2.8 5.2C1.256 6.744 1.256 9.256 2.8 10.8C4.344 12.344 6.856 12.344 8.4 10.8L12.4 6.8", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(1.6, 2.4)" }) })
+                  children: /* @__PURE__ */ jsx32("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx32("path", { d: "M8.4 2.8L4.4 6.8C3.736 7.464 3.736 8.536 4.4 9.2C5.064 9.864 6.136 9.864 6.8 9.2L11.6 4.4C12.704 3.296 12.704 1.504 11.6 0.4C10.496 -0.704 8.704 -0.704 7.6 0.4L2.8 5.2C1.256 6.744 1.256 9.256 2.8 10.8C4.344 12.344 6.856 12.344 8.4 10.8L12.4 6.8", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(1.6, 2.4)" }) })
                 }
               ),
-              planMode && /* @__PURE__ */ jsxs22("div", { className: "relative settings-menu-container", children: [
-                /* @__PURE__ */ jsx28(
+              planMode && /* @__PURE__ */ jsxs26("div", { className: "relative settings-menu-container", children: [
+                /* @__PURE__ */ jsx32(
                   "button",
                   {
                     onClick: () => setShowSettingsMenu(!showSettingsMenu),
@@ -5968,28 +6220,28 @@ ${planToExecute}`;
                       internalPlanMode ? "!text-blue-600 dark:!text-blue-400" : "!text-neutral-500 dark:!text-neutral-500"
                     ),
                     title: "Settings",
-                    children: /* @__PURE__ */ jsxs22("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                      /* @__PURE__ */ jsx28("line", { x1: "4", y1: "21", x2: "4", y2: "14" }),
-                      /* @__PURE__ */ jsx28("line", { x1: "4", y1: "10", x2: "4", y2: "3" }),
-                      /* @__PURE__ */ jsx28("line", { x1: "12", y1: "21", x2: "12", y2: "12" }),
-                      /* @__PURE__ */ jsx28("line", { x1: "12", y1: "8", x2: "12", y2: "3" }),
-                      /* @__PURE__ */ jsx28("line", { x1: "20", y1: "21", x2: "20", y2: "16" }),
-                      /* @__PURE__ */ jsx28("line", { x1: "20", y1: "12", x2: "20", y2: "3" }),
-                      /* @__PURE__ */ jsx28("line", { x1: "1", y1: "14", x2: "7", y2: "14" }),
-                      /* @__PURE__ */ jsx28("line", { x1: "9", y1: "8", x2: "15", y2: "8" }),
-                      /* @__PURE__ */ jsx28("line", { x1: "17", y1: "16", x2: "23", y2: "16" })
+                    children: /* @__PURE__ */ jsxs26("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                      /* @__PURE__ */ jsx32("line", { x1: "4", y1: "21", x2: "4", y2: "14" }),
+                      /* @__PURE__ */ jsx32("line", { x1: "4", y1: "10", x2: "4", y2: "3" }),
+                      /* @__PURE__ */ jsx32("line", { x1: "12", y1: "21", x2: "12", y2: "12" }),
+                      /* @__PURE__ */ jsx32("line", { x1: "12", y1: "8", x2: "12", y2: "3" }),
+                      /* @__PURE__ */ jsx32("line", { x1: "20", y1: "21", x2: "20", y2: "16" }),
+                      /* @__PURE__ */ jsx32("line", { x1: "20", y1: "12", x2: "20", y2: "3" }),
+                      /* @__PURE__ */ jsx32("line", { x1: "1", y1: "14", x2: "7", y2: "14" }),
+                      /* @__PURE__ */ jsx32("line", { x1: "9", y1: "8", x2: "15", y2: "8" }),
+                      /* @__PURE__ */ jsx32("line", { x1: "17", y1: "16", x2: "23", y2: "16" })
                     ] })
                   }
                 ),
-                showSettingsMenu && /* @__PURE__ */ jsx28("div", { className: "absolute top-10 left-0 z-50 w-56 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow-lg p-2.5 settings-menu-container", children: /* @__PURE__ */ jsxs22("label", { className: "flex items-center justify-between cursor-pointer group", children: [
-                  /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsx28("svg", { className: "w-3.5 h-3.5 text-neutral-500 dark:text-neutral-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx28("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }) }),
-                    /* @__PURE__ */ jsxs22("div", { children: [
-                      /* @__PURE__ */ jsx28("div", { className: "text-xs font-medium text-neutral-700 dark:text-neutral-300", children: "Plan Mode" }),
-                      /* @__PURE__ */ jsx28("div", { className: "text-[10px] text-neutral-500 dark:text-neutral-400", children: "Review first" })
+                showSettingsMenu && /* @__PURE__ */ jsx32("div", { className: "absolute top-10 left-0 z-50 w-56 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow-lg p-2.5 settings-menu-container", children: /* @__PURE__ */ jsxs26("label", { className: "flex items-center justify-between cursor-pointer group", children: [
+                  /* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx32("svg", { className: "w-3.5 h-3.5 text-neutral-500 dark:text-neutral-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx32("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }) }),
+                    /* @__PURE__ */ jsxs26("div", { children: [
+                      /* @__PURE__ */ jsx32("div", { className: "text-xs font-medium text-neutral-700 dark:text-neutral-300", children: "Plan Mode" }),
+                      /* @__PURE__ */ jsx32("div", { className: "text-[10px] text-neutral-500 dark:text-neutral-400", children: "Review first" })
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsx28(
+                  /* @__PURE__ */ jsx32(
                     "button",
                     {
                       onClick: (e) => {
@@ -6001,7 +6253,7 @@ ${planToExecute}`;
                         internalPlanMode ? "bg-blue-600" : "bg-neutral-300 dark:bg-neutral-600"
                       ),
                       type: "button",
-                      children: /* @__PURE__ */ jsx28(
+                      children: /* @__PURE__ */ jsx32(
                         "span",
                         {
                           className: cn(
@@ -6015,26 +6267,26 @@ ${planToExecute}`;
                 ] }) })
               ] })
             ] }),
-            uploadedFiles.length > 0 && /* @__PURE__ */ jsx28("div", { className: "flex gap-1 flex-shrink-0", children: uploadedFiles.map((file, index) => /* @__PURE__ */ jsxs22("div", { className: "relative group", children: [
-              file.type === "image" ? /* @__PURE__ */ jsx28(
+            uploadedFiles.length > 0 && /* @__PURE__ */ jsx32("div", { className: "flex gap-1 flex-shrink-0", children: uploadedFiles.map((file, index) => /* @__PURE__ */ jsxs26("div", { className: "relative group", children: [
+              file.type === "image" ? /* @__PURE__ */ jsx32(
                 "img",
                 {
                   src: file.preview,
                   alt: file.name,
                   className: "w-8 h-8 object-cover rounded border border-neutral-300 dark:border-neutral-600"
                 }
-              ) : /* @__PURE__ */ jsx28("div", { className: "w-8 h-8 flex items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 bg-neutral-50 dark:bg-neutral-800", title: file.name, children: /* @__PURE__ */ jsx28("svg", { className: "w-4 h-4 text-neutral-500 dark:text-neutral-400", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx28("path", { fillRule: "evenodd", d: "M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z", clipRule: "evenodd" }) }) }),
-              /* @__PURE__ */ jsx28(
+              ) : /* @__PURE__ */ jsx32("div", { className: "w-8 h-8 flex items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 bg-neutral-50 dark:bg-neutral-800", title: file.name, children: /* @__PURE__ */ jsx32("svg", { className: "w-4 h-4 text-neutral-500 dark:text-neutral-400", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx32("path", { fillRule: "evenodd", d: "M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z", clipRule: "evenodd" }) }) }),
+              /* @__PURE__ */ jsx32(
                 "button",
                 {
                   onClick: () => removeFile(index),
                   className: "absolute -top-1 -right-1 w-4 h-4 bg-red-500 hover:bg-red-600 text-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity",
                   title: "Remove",
-                  children: /* @__PURE__ */ jsx28("svg", { className: "w-2.5 h-2.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ jsx28("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) })
+                  children: /* @__PURE__ */ jsx32("svg", { className: "w-2.5 h-2.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ jsx32("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) })
                 }
               )
             ] }, index)) }),
-            /* @__PURE__ */ jsx28(
+            /* @__PURE__ */ jsx32(
               "input",
               {
                 type: "text",
@@ -6050,7 +6302,7 @@ ${planToExecute}`;
                 className: "flex-1 bg-transparent border-none focus:outline-none !text-neutral-900 dark:!text-neutral-100 placeholder-neutral-400 dark:placeholder-neutral-500 py-1"
               }
             ),
-            /* @__PURE__ */ jsx28(
+            /* @__PURE__ */ jsx32(
               "button",
               {
                 onClick: () => executeCommand(),
@@ -6066,33 +6318,33 @@ ${planToExecute}`;
                   !command.trim() && "border-neutral-200 dark:border-neutral-700 !text-neutral-400 dark:!text-neutral-600"
                 ),
                 title: "Execute",
-                children: /* @__PURE__ */ jsx28("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx28("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                children: /* @__PURE__ */ jsx32("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx32("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
               }
             )
           ] }),
-          state === "loading" && !isCompact && /* @__PURE__ */ jsxs22("div", { className: "flex-1 flex flex-col items-center justify-center space-y-4 py-8", children: [
-            /* @__PURE__ */ jsx28("div", { className: "w-6 h-6 border-2 border-neutral-300 border-t-blue-500 rounded-full animate-spin" }),
-            /* @__PURE__ */ jsx28("div", { className: "text-neutral-600 dark:text-neutral-400 text-sm text-center max-w-md", children: enableStreaming && streamedContent ? streamedContent : loadingText }),
-            showProgress && /* @__PURE__ */ jsxs22("div", { className: "w-full max-w-sm", children: [
-              /* @__PURE__ */ jsx28("div", { className: "w-full bg-neutral-200 dark:bg-neutral-700 rounded-full h-1.5", children: /* @__PURE__ */ jsx28(
+          state === "loading" && !isCompact && /* @__PURE__ */ jsxs26("div", { className: "flex-1 flex flex-col items-center justify-center space-y-4 py-8", children: [
+            /* @__PURE__ */ jsx32("div", { className: "w-6 h-6 border-2 border-neutral-300 border-t-blue-500 rounded-full animate-spin" }),
+            /* @__PURE__ */ jsx32("div", { className: "text-neutral-600 dark:text-neutral-400 text-sm text-center max-w-md", children: enableStreaming && streamedContent ? streamedContent : loadingText }),
+            showProgress && /* @__PURE__ */ jsxs26("div", { className: "w-full max-w-sm", children: [
+              /* @__PURE__ */ jsx32("div", { className: "w-full bg-neutral-200 dark:bg-neutral-700 rounded-full h-1.5", children: /* @__PURE__ */ jsx32(
                 "div",
                 {
                   className: "bg-blue-500 h-1.5 rounded-full transition-all duration-300",
                   style: { width: `${progress}%` }
                 }
               ) }),
-              /* @__PURE__ */ jsxs22("p", { className: "text-xs text-neutral-500 mt-2 text-center", children: [
+              /* @__PURE__ */ jsxs26("p", { className: "text-xs text-neutral-500 mt-2 text-center", children: [
                 progress,
                 "%"
               ] })
             ] })
           ] }),
-          state === "loading" && isCompact && /* @__PURE__ */ jsxs22(Fragment7, { children: [
-            /* @__PURE__ */ jsxs22("div", { className: "flex-1 flex items-center gap-3 py-1", children: [
-              /* @__PURE__ */ jsx28("div", { className: "w-4 h-4 border-2 border-neutral-300 border-t-blue-500 rounded-full animate-spin" }),
-              /* @__PURE__ */ jsx28("div", { className: "text-neutral-600 dark:text-neutral-400 text-sm truncate", children: enableStreaming && streamedContent ? streamedContent : loadingText })
+          state === "loading" && isCompact && /* @__PURE__ */ jsxs26(Fragment8, { children: [
+            /* @__PURE__ */ jsxs26("div", { className: "flex-1 flex items-center gap-3 py-1", children: [
+              /* @__PURE__ */ jsx32("div", { className: "w-4 h-4 border-2 border-neutral-300 border-t-blue-500 rounded-full animate-spin" }),
+              /* @__PURE__ */ jsx32("div", { className: "text-neutral-600 dark:text-neutral-400 text-sm truncate", children: enableStreaming && streamedContent ? streamedContent : loadingText })
             ] }),
-            /* @__PURE__ */ jsx28(
+            /* @__PURE__ */ jsx32(
               "button",
               {
                 disabled: true,
@@ -6104,20 +6356,20 @@ ${planToExecute}`;
                   "!text-lg",
                   "opacity-30 cursor-not-allowed"
                 ),
-                children: /* @__PURE__ */ jsx28("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx28("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                children: /* @__PURE__ */ jsx32("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx32("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
               }
             )
           ] }),
-          state === "plan-pending" && !isCompact && /* @__PURE__ */ jsx28("div", { className: "flex-1 flex flex-col", children: /* @__PURE__ */ jsxs22("div", { className: "mb-4 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg", children: [
-            /* @__PURE__ */ jsxs22("div", { className: "flex items-start gap-2 mb-3", children: [
-              /* @__PURE__ */ jsx28("svg", { className: "w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx28("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }) }),
-              /* @__PURE__ */ jsxs22("div", { className: "flex-1", children: [
-                /* @__PURE__ */ jsx28("h3", { className: "text-sm font-semibold text-blue-800 dark:text-blue-300 mb-1", children: "Proposed Plan" }),
-                /* @__PURE__ */ jsx28("div", { className: "text-blue-700 dark:text-blue-300 text-sm whitespace-pre-line leading-relaxed", children: plan })
+          state === "plan-pending" && !isCompact && /* @__PURE__ */ jsx32("div", { className: "flex-1 flex flex-col", children: /* @__PURE__ */ jsxs26("div", { className: "mb-4 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg", children: [
+            /* @__PURE__ */ jsxs26("div", { className: "flex items-start gap-2 mb-3", children: [
+              /* @__PURE__ */ jsx32("svg", { className: "w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx32("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }) }),
+              /* @__PURE__ */ jsxs26("div", { className: "flex-1", children: [
+                /* @__PURE__ */ jsx32("h3", { className: "text-sm font-semibold text-blue-800 dark:text-blue-300 mb-1", children: "Proposed Plan" }),
+                /* @__PURE__ */ jsx32("div", { className: "text-blue-700 dark:text-blue-300 text-sm whitespace-pre-line leading-relaxed", children: plan })
               ] })
             ] }),
-            /* @__PURE__ */ jsxs22("div", { className: "flex gap-2 mt-4", children: [
-              /* @__PURE__ */ jsx28(
+            /* @__PURE__ */ jsxs26("div", { className: "flex gap-2 mt-4", children: [
+              /* @__PURE__ */ jsx32(
                 "button",
                 {
                   onClick: approvePlan,
@@ -6125,7 +6377,7 @@ ${planToExecute}`;
                   children: "Approve & Execute"
                 }
               ),
-              /* @__PURE__ */ jsx28(
+              /* @__PURE__ */ jsx32(
                 "button",
                 {
                   onClick: rejectPlan,
@@ -6135,20 +6387,20 @@ ${planToExecute}`;
               )
             ] })
           ] }) }),
-          state === "plan-pending" && isCompact && /* @__PURE__ */ jsxs22(Fragment7, { children: [
-            /* @__PURE__ */ jsxs22(
+          state === "plan-pending" && isCompact && /* @__PURE__ */ jsxs26(Fragment8, { children: [
+            /* @__PURE__ */ jsxs26(
               "button",
               {
                 onClick: () => setShowPlanDetails(true),
                 className: "flex-1 flex items-center gap-2 px-3 py-2 bg-blue-50 dark:bg-blue-900/30 hover:bg-blue-100 dark:hover:bg-blue-900/40 border border-blue-200 dark:border-blue-800 rounded-lg transition-colors",
                 children: [
-                  /* @__PURE__ */ jsx28("svg", { className: "w-4 h-4 text-blue-600 dark:text-blue-400 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx28("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }) }),
-                  /* @__PURE__ */ jsx28("span", { className: "text-sm font-medium text-blue-700 dark:text-blue-300 truncate flex-1", children: "View Execution Plan" })
+                  /* @__PURE__ */ jsx32("svg", { className: "w-4 h-4 text-blue-600 dark:text-blue-400 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx32("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }) }),
+                  /* @__PURE__ */ jsx32("span", { className: "text-sm font-medium text-blue-700 dark:text-blue-300 truncate flex-1", children: "View Execution Plan" })
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs22("div", { className: "flex gap-2 flex-shrink-0", children: [
-              /* @__PURE__ */ jsx28(
+            /* @__PURE__ */ jsxs26("div", { className: "flex gap-2 flex-shrink-0", children: [
+              /* @__PURE__ */ jsx32(
                 "button",
                 {
                   onClick: approvePlan,
@@ -6156,7 +6408,7 @@ ${planToExecute}`;
                   children: "Approve"
                 }
               ),
-              /* @__PURE__ */ jsx28(
+              /* @__PURE__ */ jsx32(
                 "button",
                 {
                   onClick: rejectPlan,
@@ -6166,15 +6418,15 @@ ${planToExecute}`;
               )
             ] })
           ] }),
-          state === "error" && /* @__PURE__ */ jsxs22("div", { className: "flex-1 flex flex-col", children: [
-            /* @__PURE__ */ jsx28("div", { className: "mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg", children: /* @__PURE__ */ jsxs22("div", { className: "flex items-start gap-2", children: [
-              /* @__PURE__ */ jsx28("svg", { className: "w-5 h-5 text-red-600 mt-0.5 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx28("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
-              /* @__PURE__ */ jsxs22("div", { children: [
-                /* @__PURE__ */ jsx28("h3", { className: "text-sm font-semibold text-red-800 dark:text-red-400", children: "Error" }),
-                /* @__PURE__ */ jsx28("p", { className: "text-red-700 dark:text-red-300 text-sm mt-1", children: error?.message })
+          state === "error" && /* @__PURE__ */ jsxs26("div", { className: "flex-1 flex flex-col", children: [
+            /* @__PURE__ */ jsx32("div", { className: "mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg", children: /* @__PURE__ */ jsxs26("div", { className: "flex items-start gap-2", children: [
+              /* @__PURE__ */ jsx32("svg", { className: "w-5 h-5 text-red-600 mt-0.5 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx32("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+              /* @__PURE__ */ jsxs26("div", { children: [
+                /* @__PURE__ */ jsx32("h3", { className: "text-sm font-semibold text-red-800 dark:text-red-400", children: "Error" }),
+                /* @__PURE__ */ jsx32("p", { className: "text-red-700 dark:text-red-300 text-sm mt-1", children: error?.message })
               ] })
             ] }) }),
-            allowInput && /* @__PURE__ */ jsx28(
+            allowInput && /* @__PURE__ */ jsx32(
               "textarea",
               {
                 value: command,
@@ -6191,16 +6443,16 @@ ${planToExecute}`;
               }
             )
           ] }),
-          state === "success" && result && !isCompact && /* @__PURE__ */ jsx28("div", { className: "flex-1 overflow-auto", children: resultRenderer ? resultRenderer(result.data) : /* @__PURE__ */ jsxs22("div", { className: "space-y-4", children: [
-            /* @__PURE__ */ jsxs22("div", { className: "flex items-start gap-3 p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg", children: [
-              /* @__PURE__ */ jsx28("svg", { className: "w-5 h-5 text-green-600 mt-0.5 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx28("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
-              /* @__PURE__ */ jsxs22("div", { className: "flex-1", children: [
-                /* @__PURE__ */ jsx28("h3", { className: "text-sm font-semibold text-green-800 dark:text-green-400 mb-1", children: "Success" }),
-                /* @__PURE__ */ jsx28("p", { className: "text-green-700 dark:text-green-300 text-sm", children: "Command executed successfully" })
+          state === "success" && result && !isCompact && /* @__PURE__ */ jsx32("div", { className: "flex-1 overflow-auto", children: resultRenderer ? resultRenderer(result.data) : /* @__PURE__ */ jsxs26("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxs26("div", { className: "flex items-start gap-3 p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg", children: [
+              /* @__PURE__ */ jsx32("svg", { className: "w-5 h-5 text-green-600 mt-0.5 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx32("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+              /* @__PURE__ */ jsxs26("div", { className: "flex-1", children: [
+                /* @__PURE__ */ jsx32("h3", { className: "text-sm font-semibold text-green-800 dark:text-green-400 mb-1", children: "Success" }),
+                /* @__PURE__ */ jsx32("p", { className: "text-green-700 dark:text-green-300 text-sm", children: "Command executed successfully" })
               ] })
             ] }),
-            result.data?.summary && /* @__PURE__ */ jsx28("div", { className: "text-neutral-700 dark:text-neutral-300 text-sm leading-relaxed whitespace-pre-line", children: result.data.summary }),
-            result.widgets && result.widgets.length > 0 && /* @__PURE__ */ jsx28("div", { className: "space-y-3", children: result.widgets.map((widget) => /* @__PURE__ */ jsx28(
+            result.data?.summary && /* @__PURE__ */ jsx32("div", { className: "text-neutral-700 dark:text-neutral-300 text-sm leading-relaxed whitespace-pre-line", children: result.data.summary }),
+            result.widgets && result.widgets.length > 0 && /* @__PURE__ */ jsx32("div", { className: "space-y-3", children: result.widgets.map((widget) => /* @__PURE__ */ jsx32(
               WidgetRenderer,
               {
                 widget,
@@ -6209,8 +6461,8 @@ ${planToExecute}`;
               widget.id
             )) })
           ] }) }),
-          state === "success" && result && isCompact && /* @__PURE__ */ jsxs22(Fragment7, { children: [
-            /* @__PURE__ */ jsxs22(
+          state === "success" && result && isCompact && /* @__PURE__ */ jsxs26(Fragment8, { children: [
+            /* @__PURE__ */ jsxs26(
               "div",
               {
                 className: "flex-1 flex items-center gap-2 py-1 cursor-text min-w-0",
@@ -6219,12 +6471,12 @@ ${planToExecute}`;
                   setResult(null);
                 },
                 children: [
-                  /* @__PURE__ */ jsx28("svg", { className: "w-4 h-4 text-green-600 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx28("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
-                  /* @__PURE__ */ jsx28("div", { className: "text-green-700 dark:text-green-300 text-sm truncate flex-1 min-w-0", children: resultRenderer ? resultRenderer(result.data) : result.message || "Command executed successfully" })
+                  /* @__PURE__ */ jsx32("svg", { className: "w-4 h-4 text-green-600 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx32("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+                  /* @__PURE__ */ jsx32("div", { className: "text-green-700 dark:text-green-300 text-sm truncate flex-1 min-w-0", children: resultRenderer ? resultRenderer(result.data) : result.message || "Command executed successfully" })
                 ]
               }
             ),
-            /* @__PURE__ */ jsx28(
+            /* @__PURE__ */ jsx32(
               "button",
               {
                 onClick: () => {
@@ -6240,24 +6492,24 @@ ${planToExecute}`;
                   "!text-lg"
                 ),
                 title: "New command",
-                children: /* @__PURE__ */ jsx28("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx28("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                children: /* @__PURE__ */ jsx32("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx32("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
               }
             )
           ] })
         ] }),
-        !isCompact && /* @__PURE__ */ jsxs22("div", { className: "p-3 flex items-center justify-between gap-2", children: [
-          /* @__PURE__ */ jsx28("div", { className: "flex items-center gap-1", children: state === "idle" && allowInput && /* @__PURE__ */ jsxs22(Fragment7, { children: [
-            enableFileUpload && /* @__PURE__ */ jsx28(
+        !isCompact && /* @__PURE__ */ jsxs26("div", { className: "p-3 flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsx32("div", { className: "flex items-center gap-1", children: state === "idle" && allowInput && /* @__PURE__ */ jsxs26(Fragment8, { children: [
+            enableFileUpload && /* @__PURE__ */ jsx32(
               "button",
               {
                 onClick: () => fileInputRef.current?.click(),
                 className: "w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 !text-neutral-500 dark:!text-neutral-500 hover:bg-neutral-100 dark:hover:bg-neutral-800",
                 title: "Attach file",
-                children: /* @__PURE__ */ jsx28("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx28("path", { d: "M8.4 2.8L4.4 6.8C3.736 7.464 3.736 8.536 4.4 9.2C5.064 9.864 6.136 9.864 6.8 9.2L11.6 4.4C12.704 3.296 12.704 1.504 11.6 0.4C10.496 -0.704 8.704 -0.704 7.6 0.4L2.8 5.2C1.256 6.744 1.256 9.256 2.8 10.8C4.344 12.344 6.856 12.344 8.4 10.8L12.4 6.8", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(1.6, 2.4)" }) })
+                children: /* @__PURE__ */ jsx32("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx32("path", { d: "M8.4 2.8L4.4 6.8C3.736 7.464 3.736 8.536 4.4 9.2C5.064 9.864 6.136 9.864 6.8 9.2L11.6 4.4C12.704 3.296 12.704 1.504 11.6 0.4C10.496 -0.704 8.704 -0.704 7.6 0.4L2.8 5.2C1.256 6.744 1.256 9.256 2.8 10.8C4.344 12.344 6.856 12.344 8.4 10.8L12.4 6.8", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(1.6, 2.4)" }) })
               }
             ),
-            planMode && /* @__PURE__ */ jsxs22("div", { className: "relative settings-menu-container", children: [
-              /* @__PURE__ */ jsx28(
+            planMode && /* @__PURE__ */ jsxs26("div", { className: "relative settings-menu-container", children: [
+              /* @__PURE__ */ jsx32(
                 "button",
                 {
                   onClick: () => setShowSettingsMenu(!showSettingsMenu),
@@ -6266,28 +6518,28 @@ ${planToExecute}`;
                     internalPlanMode ? "!text-blue-600 dark:!text-blue-400" : "!text-neutral-500 dark:!text-neutral-500"
                   ),
                   title: "Settings",
-                  children: /* @__PURE__ */ jsxs22("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                    /* @__PURE__ */ jsx28("line", { x1: "4", y1: "21", x2: "4", y2: "14" }),
-                    /* @__PURE__ */ jsx28("line", { x1: "4", y1: "10", x2: "4", y2: "3" }),
-                    /* @__PURE__ */ jsx28("line", { x1: "12", y1: "21", x2: "12", y2: "12" }),
-                    /* @__PURE__ */ jsx28("line", { x1: "12", y1: "8", x2: "12", y2: "3" }),
-                    /* @__PURE__ */ jsx28("line", { x1: "20", y1: "21", x2: "20", y2: "16" }),
-                    /* @__PURE__ */ jsx28("line", { x1: "20", y1: "12", x2: "20", y2: "3" }),
-                    /* @__PURE__ */ jsx28("line", { x1: "1", y1: "14", x2: "7", y2: "14" }),
-                    /* @__PURE__ */ jsx28("line", { x1: "9", y1: "8", x2: "15", y2: "8" }),
-                    /* @__PURE__ */ jsx28("line", { x1: "17", y1: "16", x2: "23", y2: "16" })
+                  children: /* @__PURE__ */ jsxs26("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                    /* @__PURE__ */ jsx32("line", { x1: "4", y1: "21", x2: "4", y2: "14" }),
+                    /* @__PURE__ */ jsx32("line", { x1: "4", y1: "10", x2: "4", y2: "3" }),
+                    /* @__PURE__ */ jsx32("line", { x1: "12", y1: "21", x2: "12", y2: "12" }),
+                    /* @__PURE__ */ jsx32("line", { x1: "12", y1: "8", x2: "12", y2: "3" }),
+                    /* @__PURE__ */ jsx32("line", { x1: "20", y1: "21", x2: "20", y2: "16" }),
+                    /* @__PURE__ */ jsx32("line", { x1: "20", y1: "12", x2: "20", y2: "3" }),
+                    /* @__PURE__ */ jsx32("line", { x1: "1", y1: "14", x2: "7", y2: "14" }),
+                    /* @__PURE__ */ jsx32("line", { x1: "9", y1: "8", x2: "15", y2: "8" }),
+                    /* @__PURE__ */ jsx32("line", { x1: "17", y1: "16", x2: "23", y2: "16" })
                   ] })
                 }
               ),
-              showSettingsMenu && /* @__PURE__ */ jsx28("div", { className: "absolute top-10 left-0 z-50 w-64 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow-lg p-3 settings-menu-container", children: /* @__PURE__ */ jsxs22("label", { className: "flex items-center justify-between cursor-pointer group", children: [
-                /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx28("svg", { className: "w-4 h-4 text-neutral-500 dark:text-neutral-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx28("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }) }),
-                  /* @__PURE__ */ jsxs22("div", { children: [
-                    /* @__PURE__ */ jsx28("div", { className: "text-sm font-medium text-neutral-700 dark:text-neutral-300", children: "Plan Mode" }),
-                    /* @__PURE__ */ jsx28("div", { className: "text-xs text-neutral-500 dark:text-neutral-400", children: "Review before executing" })
+              showSettingsMenu && /* @__PURE__ */ jsx32("div", { className: "absolute top-10 left-0 z-50 w-64 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow-lg p-3 settings-menu-container", children: /* @__PURE__ */ jsxs26("label", { className: "flex items-center justify-between cursor-pointer group", children: [
+                /* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx32("svg", { className: "w-4 h-4 text-neutral-500 dark:text-neutral-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx32("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }) }),
+                  /* @__PURE__ */ jsxs26("div", { children: [
+                    /* @__PURE__ */ jsx32("div", { className: "text-sm font-medium text-neutral-700 dark:text-neutral-300", children: "Plan Mode" }),
+                    /* @__PURE__ */ jsx32("div", { className: "text-xs text-neutral-500 dark:text-neutral-400", children: "Review before executing" })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsx28(
+                /* @__PURE__ */ jsx32(
                   "button",
                   {
                     onClick: (e) => {
@@ -6299,7 +6551,7 @@ ${planToExecute}`;
                       internalPlanMode ? "bg-blue-600" : "bg-neutral-300 dark:bg-neutral-600"
                     ),
                     type: "button",
-                    children: /* @__PURE__ */ jsx28(
+                    children: /* @__PURE__ */ jsx32(
                       "span",
                       {
                         className: cn(
@@ -6313,9 +6565,9 @@ ${planToExecute}`;
               ] }) })
             ] })
           ] }) }),
-          !(state === "idle" && allowInput) && /* @__PURE__ */ jsx28("div", {}),
-          /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2", children: [
-            (state === "success" || state === "error") && allowInput && /* @__PURE__ */ jsx28(
+          !(state === "idle" && allowInput) && /* @__PURE__ */ jsx32("div", {}),
+          /* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-2", children: [
+            (state === "success" || state === "error") && allowInput && /* @__PURE__ */ jsx32(
               "button",
               {
                 onClick: resetCommand,
@@ -6323,7 +6575,7 @@ ${planToExecute}`;
                 children: "Reset"
               }
             ),
-            (state === "idle" || state === "error") && /* @__PURE__ */ jsx28(
+            (state === "idle" || state === "error") && /* @__PURE__ */ jsx32(
               "button",
               {
                 onClick: () => executeCommand(),
@@ -6339,29 +6591,29 @@ ${planToExecute}`;
                   !command.trim() && "border-neutral-200 dark:border-neutral-700 !text-neutral-400 dark:!text-neutral-600"
                 ),
                 title: state === "error" ? "Retry" : "Execute",
-                children: state === "error" ? /* @__PURE__ */ jsx28("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx28("path", { d: "M13 8C13 10.7614 10.7614 13 8 13C5.23858 13 3 10.7614 3 8C3 5.23858 5.23858 3 8 3C9.65685 3 11.1257 3.82818 12 5.09091M12 3V5.09091M12 5.09091H9.81818", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) : /* @__PURE__ */ jsx28("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx28("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                children: state === "error" ? /* @__PURE__ */ jsx32("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx32("path", { d: "M13 8C13 10.7614 10.7614 13 8 13C5.23858 13 3 10.7614 3 8C3 5.23858 5.23858 3 8 3C9.65685 3 11.1257 3.82818 12 5.09091M12 3V5.09091M12 5.09091H9.81818", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) : /* @__PURE__ */ jsx32("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx32("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
               }
             )
           ] })
         ] }),
-        showPlanDetails && isCompact && state === "plan-pending" && /* @__PURE__ */ jsx28("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4", onClick: () => setShowPlanDetails(false), children: /* @__PURE__ */ jsxs22("div", { className: "bg-white dark:bg-neutral-900 rounded-2xl shadow-2xl max-w-2xl w-full max-h-[80vh] overflow-hidden", onClick: (e) => e.stopPropagation(), children: [
-          /* @__PURE__ */ jsxs22("div", { className: "flex items-center justify-between p-6 border-b border-neutral-200 dark:border-neutral-700", children: [
-            /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-3", children: [
-              /* @__PURE__ */ jsx28("svg", { className: "w-6 h-6 text-blue-600 dark:text-blue-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx28("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }) }),
-              /* @__PURE__ */ jsx28("h2", { className: "text-xl font-semibold text-neutral-900 dark:text-white", children: "Proposed Execution Plan" })
+        showPlanDetails && isCompact && state === "plan-pending" && /* @__PURE__ */ jsx32("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4", onClick: () => setShowPlanDetails(false), children: /* @__PURE__ */ jsxs26("div", { className: "bg-white dark:bg-neutral-900 rounded-2xl shadow-2xl max-w-2xl w-full max-h-[80vh] overflow-hidden", onClick: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ jsxs26("div", { className: "flex items-center justify-between p-6 border-b border-neutral-200 dark:border-neutral-700", children: [
+            /* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsx32("svg", { className: "w-6 h-6 text-blue-600 dark:text-blue-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx32("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }) }),
+              /* @__PURE__ */ jsx32("h2", { className: "text-xl font-semibold text-neutral-900 dark:text-white", children: "Proposed Execution Plan" })
             ] }),
-            /* @__PURE__ */ jsx28(
+            /* @__PURE__ */ jsx32(
               "button",
               {
                 onClick: () => setShowPlanDetails(false),
                 className: "text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors",
-                children: /* @__PURE__ */ jsx28("svg", { className: "w-6 h-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx28("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                children: /* @__PURE__ */ jsx32("svg", { className: "w-6 h-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx32("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
               }
             )
           ] }),
-          /* @__PURE__ */ jsx28("div", { className: "p-6 overflow-y-auto max-h-[calc(80vh-180px)]", children: /* @__PURE__ */ jsx28("div", { className: "prose prose-sm dark:prose-invert max-w-none", children: /* @__PURE__ */ jsx28("div", { className: "text-neutral-700 dark:text-neutral-300 whitespace-pre-line leading-relaxed", children: plan }) }) }),
-          /* @__PURE__ */ jsxs22("div", { className: "flex items-center justify-end gap-3 p-6 border-t border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-800/50", children: [
-            /* @__PURE__ */ jsx28(
+          /* @__PURE__ */ jsx32("div", { className: "p-6 overflow-y-auto max-h-[calc(80vh-180px)]", children: /* @__PURE__ */ jsx32("div", { className: "prose prose-sm dark:prose-invert max-w-none", children: /* @__PURE__ */ jsx32("div", { className: "text-neutral-700 dark:text-neutral-300 whitespace-pre-line leading-relaxed", children: plan }) }) }),
+          /* @__PURE__ */ jsxs26("div", { className: "flex items-center justify-end gap-3 p-6 border-t border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-800/50", children: [
+            /* @__PURE__ */ jsx32(
               "button",
               {
                 onClick: rejectPlan,
@@ -6369,7 +6621,7 @@ ${planToExecute}`;
                 children: "Modify Command"
               }
             ),
-            /* @__PURE__ */ jsx28(
+            /* @__PURE__ */ jsx32(
               "button",
               {
                 onClick: approvePlan,
@@ -6379,7 +6631,7 @@ ${planToExecute}`;
             )
           ] })
         ] }) }),
-        /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsx32(
           "input",
           {
             ref: fileInputRef,
@@ -6390,7 +6642,7 @@ ${planToExecute}`;
             accept: "image/*,application/pdf,.doc,.docx,.txt"
           }
         ),
-        /* @__PURE__ */ jsx28("style", { dangerouslySetInnerHTML: {
+        /* @__PURE__ */ jsx32("style", { dangerouslySetInnerHTML: {
           __html: `
           @keyframes pulse-border {
             0%, 100% {
@@ -6411,8 +6663,8 @@ ${planToExecute}`;
 }
 
 // src/components/Prompt/Prompt.tsx
-import { useState as useState13 } from "react";
-import { jsx as jsx29, jsxs as jsxs23 } from "react/jsx-runtime";
+import { useState as useState14 } from "react";
+import { jsx as jsx33, jsxs as jsxs27 } from "react/jsx-runtime";
 function Prompt({
   agentId,
   placeholder = "Enter your prompt...",
@@ -6429,9 +6681,9 @@ function Prompt({
   showSuggestions = false,
   className
 }) {
-  const [value, setValue] = useState13(initialValue);
-  const [isLoading, setIsLoading] = useState13(false);
-  const [suggestions] = useState13(["Plan a trip", "Write a description", "Analyze data"]);
+  const [value, setValue] = useState14(initialValue);
+  const [isLoading, setIsLoading] = useState14(false);
+  const [suggestions] = useState14(["Plan a trip", "Write a description", "Analyze data"]);
   const handleChange = (e) => {
     const newValue = e.target.value;
     if (!maxLength || newValue.length <= maxLength) {
@@ -6474,9 +6726,9 @@ function Prompt({
       handleSubmit();
     }
   };
-  return /* @__PURE__ */ jsxs23("div", { className: cn("space-y-2", className), children: [
-    /* @__PURE__ */ jsxs23("div", { className: "flex gap-2", children: [
-      /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsxs27("div", { className: cn("space-y-2", className), children: [
+    /* @__PURE__ */ jsxs27("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsx33(
         "input",
         {
           type: "text",
@@ -6489,7 +6741,7 @@ function Prompt({
           className: "flex-1 px-4 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-apteva-500 dark:bg-neutral-800 dark:border-neutral-600 dark:text-white"
         }
       ),
-      submitOn === "button" && /* @__PURE__ */ jsx29(
+      submitOn === "button" && /* @__PURE__ */ jsx33(
         "button",
         {
           onClick: handleSubmit,
@@ -6499,13 +6751,13 @@ function Prompt({
         }
       )
     ] }),
-    maxLength && /* @__PURE__ */ jsxs23("p", { className: "text-xs text-neutral-500", children: [
+    maxLength && /* @__PURE__ */ jsxs27("p", { className: "text-xs text-neutral-500", children: [
       value.length,
       " / ",
       maxLength,
       " characters"
     ] }),
-    showSuggestions && !value && /* @__PURE__ */ jsx29("div", { className: "flex flex-wrap gap-2", children: suggestions.map((suggestion, idx) => /* @__PURE__ */ jsx29(
+    showSuggestions && !value && /* @__PURE__ */ jsx33("div", { className: "flex flex-wrap gap-2", children: suggestions.map((suggestion, idx) => /* @__PURE__ */ jsx33(
       "button",
       {
         onClick: () => setValue(suggestion),
@@ -6514,16 +6766,16 @@ function Prompt({
       },
       idx
     )) }),
-    isLoading && /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2 text-sm text-neutral-500", children: [
-      /* @__PURE__ */ jsx29("div", { className: "w-4 h-4 border-2 border-apteva-500 border-t-transparent rounded-full animate-spin" }),
-      /* @__PURE__ */ jsx29("span", { children: "AI is processing your request..." })
+    isLoading && /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-2 text-sm text-neutral-500", children: [
+      /* @__PURE__ */ jsx33("div", { className: "w-4 h-4 border-2 border-apteva-500 border-t-transparent rounded-full animate-spin" }),
+      /* @__PURE__ */ jsx33("span", { children: "AI is processing your request..." })
     ] })
   ] });
 }
 
 // src/components/Stream/Stream.tsx
-import { useState as useState14, useEffect as useEffect12 } from "react";
-import { jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
+import { useState as useState15, useEffect as useEffect14 } from "react";
+import { jsx as jsx34, jsxs as jsxs28 } from "react/jsx-runtime";
 function Stream({
   agentId,
   prompt,
@@ -6539,10 +6791,10 @@ function Stream({
   typingSpeed = 30,
   className
 }) {
-  const [text, setText] = useState14("");
-  const [isStreaming, setIsStreaming] = useState14(false);
-  const [isComplete, setIsComplete] = useState14(false);
-  useEffect12(() => {
+  const [text, setText] = useState15("");
+  const [isStreaming, setIsStreaming] = useState15(false);
+  const [isComplete, setIsComplete] = useState15(false);
+  useEffect14(() => {
     if (autoStart && !isStreaming && !isComplete) {
       startStreaming();
     }
@@ -6603,7 +6855,7 @@ function Stream({
     plain: "text-neutral-900 dark:text-neutral-100"
   };
   if (!isStreaming && !isComplete) {
-    return /* @__PURE__ */ jsx30("div", { className: cn("p-4", className), children: /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx34("div", { className: cn("p-4", className), children: /* @__PURE__ */ jsx34(
       "button",
       {
         onClick: startStreaming,
@@ -6612,19 +6864,19 @@ function Stream({
       }
     ) });
   }
-  return /* @__PURE__ */ jsxs24("div", { className: cn(variantClasses[variant], className), children: [
+  return /* @__PURE__ */ jsxs28("div", { className: cn(variantClasses[variant], className), children: [
     text,
-    isStreaming && showCursor && /* @__PURE__ */ jsx30("span", { className: "apteva-stream-cursor" })
+    isStreaming && showCursor && /* @__PURE__ */ jsx34("span", { className: "apteva-stream-cursor" })
   ] });
 }
 
 // src/components/Threads/ThreadList.tsx
-import { useState as useState15 } from "react";
+import { useState as useState16 } from "react";
 
 // src/components/Threads/ThreadItem.tsx
-import { jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs29 } from "react/jsx-runtime";
 function ThreadItem({ thread, isActive = false, onSelect, onDelete }) {
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs29(
     "div",
     {
       className: cn("apteva-thread-item", {
@@ -6632,19 +6884,19 @@ function ThreadItem({ thread, isActive = false, onSelect, onDelete }) {
       }),
       onClick: onSelect,
       children: [
-        /* @__PURE__ */ jsxs25("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ jsx31("h4", { className: "font-semibold text-neutral-900 dark:text-white truncate", children: thread.title }),
-          thread.preview && /* @__PURE__ */ jsx31("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 truncate", children: thread.preview }),
-          /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-2 mt-1 text-xs text-neutral-500", children: [
-            /* @__PURE__ */ jsxs25("span", { children: [
+        /* @__PURE__ */ jsxs29("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx35("h4", { className: "font-semibold text-neutral-900 dark:text-white truncate", children: thread.title }),
+          thread.preview && /* @__PURE__ */ jsx35("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 truncate", children: thread.preview }),
+          /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-2 mt-1 text-xs text-neutral-500", children: [
+            /* @__PURE__ */ jsxs29("span", { children: [
               thread.messageCount,
               " messages"
             ] }),
-            /* @__PURE__ */ jsx31("span", { children: "\u2022" }),
-            /* @__PURE__ */ jsx31("span", { children: formatRelativeTime(thread.updatedAt) })
+            /* @__PURE__ */ jsx35("span", { children: "\u2022" }),
+            /* @__PURE__ */ jsx35("span", { children: formatRelativeTime(thread.updatedAt) })
           ] })
         ] }),
-        onDelete && /* @__PURE__ */ jsx31(
+        onDelete && /* @__PURE__ */ jsx35(
           "button",
           {
             onClick: (e) => {
@@ -6674,7 +6926,7 @@ function formatRelativeTime(date) {
 }
 
 // src/components/Threads/ThreadList.tsx
-import { jsx as jsx32, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs30 } from "react/jsx-runtime";
 function ThreadList({
   threads,
   currentThreadId,
@@ -6683,13 +6935,13 @@ function ThreadList({
   showSearch = false,
   groupBy = "none"
 }) {
-  const [searchQuery, setSearchQuery] = useState15("");
+  const [searchQuery, setSearchQuery] = useState16("");
   const filteredThreads = threads.filter(
     (thread) => thread.title.toLowerCase().includes(searchQuery.toLowerCase()) || thread.preview?.toLowerCase().includes(searchQuery.toLowerCase())
   );
   const groupedThreads = groupBy === "date" ? groupThreadsByDate(filteredThreads) : { All: filteredThreads };
-  return /* @__PURE__ */ jsxs26("div", { className: "flex flex-col h-full", children: [
-    showSearch && /* @__PURE__ */ jsx32("div", { className: "p-3 border-b border-neutral-200 dark:border-neutral-700", children: /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsxs30("div", { className: "flex flex-col h-full", children: [
+    showSearch && /* @__PURE__ */ jsx36("div", { className: "p-3 border-b border-neutral-200 dark:border-neutral-700", children: /* @__PURE__ */ jsx36(
       "input",
       {
         type: "text",
@@ -6699,10 +6951,10 @@ function ThreadList({
         className: "w-full px-3 py-2 text-sm border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-apteva-500 dark:bg-neutral-800 dark:border-neutral-600 dark:text-white"
       }
     ) }),
-    /* @__PURE__ */ jsxs26("div", { className: "flex-1 overflow-y-auto", children: [
-      Object.entries(groupedThreads).map(([group, groupThreads]) => /* @__PURE__ */ jsxs26("div", { children: [
-        groupBy !== "none" && /* @__PURE__ */ jsx32("div", { className: "px-3 py-2 text-xs font-semibold text-neutral-500 uppercase", children: group }),
-        groupThreads.map((thread) => /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsxs30("div", { className: "flex-1 overflow-y-auto", children: [
+      Object.entries(groupedThreads).map(([group, groupThreads]) => /* @__PURE__ */ jsxs30("div", { children: [
+        groupBy !== "none" && /* @__PURE__ */ jsx36("div", { className: "px-3 py-2 text-xs font-semibold text-neutral-500 uppercase", children: group }),
+        groupThreads.map((thread) => /* @__PURE__ */ jsx36(
           ThreadItem,
           {
             thread,
@@ -6713,9 +6965,9 @@ function ThreadList({
           thread.id
         ))
       ] }, group)),
-      filteredThreads.length === 0 && /* @__PURE__ */ jsxs26("div", { className: "p-8 text-center text-neutral-500", children: [
-        /* @__PURE__ */ jsx32("svg", { className: "w-10 h-10 mx-auto mb-2 opacity-50", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx32("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, 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" }) }),
-        /* @__PURE__ */ jsx32("p", { children: "No conversations found" })
+      filteredThreads.length === 0 && /* @__PURE__ */ jsxs30("div", { className: "p-8 text-center text-neutral-500", children: [
+        /* @__PURE__ */ jsx36("svg", { className: "w-10 h-10 mx-auto mb-2 opacity-50", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx36("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, 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" }) }),
+        /* @__PURE__ */ jsx36("p", { children: "No conversations found" })
       ] })
     ] })
   ] });
@@ -6747,7 +6999,7 @@ function groupThreadsByDate(threads) {
 }
 
 // src/components/Threads/Threads.tsx
-import { jsx as jsx33, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs31 } from "react/jsx-runtime";
 function Threads({
   threads,
   currentThreadId,
@@ -6766,8 +7018,8 @@ function Threads({
     tabs: "flex gap-2 border-b border-neutral-200 dark:border-neutral-700 overflow-x-auto"
   };
   if (variant === "tabs") {
-    return /* @__PURE__ */ jsxs27("div", { className: cn(variantClasses[variant], className), children: [
-      threads.slice(0, 5).map((thread) => /* @__PURE__ */ jsx33(
+    return /* @__PURE__ */ jsxs31("div", { className: cn(variantClasses[variant], className), children: [
+      threads.slice(0, 5).map((thread) => /* @__PURE__ */ jsx37(
         "button",
         {
           onClick: () => onThreadSelect?.(thread.id),
@@ -6779,7 +7031,7 @@ function Threads({
         },
         thread.id
       )),
-      showNewButton && onNewThread && /* @__PURE__ */ jsx33(
+      showNewButton && onNewThread && /* @__PURE__ */ jsx37(
         "button",
         {
           onClick: onNewThread,
@@ -6789,8 +7041,8 @@ function Threads({
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs27("div", { className: cn(variantClasses[variant], "flex flex-col", className), children: [
-    showNewButton && onNewThread && /* @__PURE__ */ jsx33("div", { className: "p-3 border-b border-neutral-200 dark:border-neutral-700", children: /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsxs31("div", { className: cn(variantClasses[variant], "flex flex-col", className), children: [
+    showNewButton && onNewThread && /* @__PURE__ */ jsx37("div", { className: "p-3 border-b border-neutral-200 dark:border-neutral-700", children: /* @__PURE__ */ jsx37(
       "button",
       {
         onClick: onNewThread,
@@ -6798,7 +7050,7 @@ function Threads({
         children: "+ New Conversation"
       }
     ) }),
-    /* @__PURE__ */ jsx33(
+    /* @__PURE__ */ jsx37(
       ThreadList,
       {
         threads,
@@ -6813,11 +7065,11 @@ function Threads({
 }
 
 // src/components/AutoInterface/AutoInterface.tsx
-import { useState as useState17, useRef as useRef11, useCallback as useCallback6, useEffect as useEffect13 } from "react";
+import { useState as useState18, useRef as useRef13, useCallback as useCallback7, useEffect as useEffect15 } from "react";
 
 // src/components/AutoInterface/LayoutRenderer.tsx
-import { useState as useState16 } from "react";
-import { Fragment as Fragment8, jsx as jsx34, jsxs as jsxs28 } from "react/jsx-runtime";
+import { useState as useState17 } from "react";
+import { Fragment as Fragment9, jsx as jsx38, jsxs as jsxs32 } from "react/jsx-runtime";
 var gapClasses = {
   none: "gap-0",
   sm: "gap-2",
@@ -6841,27 +7093,27 @@ function LayoutRenderer({ node, onAction, renderNode }) {
   const children = node.children || [];
   switch (node.layout) {
     case "page":
-      return /* @__PURE__ */ jsx34(PageLayout, { node, renderNode });
+      return /* @__PURE__ */ jsx38(PageLayout, { node, renderNode });
     case "row":
-      return /* @__PURE__ */ jsx34(RowLayout, { node, renderNode });
+      return /* @__PURE__ */ jsx38(RowLayout, { node, renderNode });
     case "columns":
-      return /* @__PURE__ */ jsx34(ColumnsLayout, { node, renderNode });
+      return /* @__PURE__ */ jsx38(ColumnsLayout, { node, renderNode });
     case "stack":
-      return /* @__PURE__ */ jsx34(StackLayout, { node, renderNode });
+      return /* @__PURE__ */ jsx38(StackLayout, { node, renderNode });
     case "sidebar":
-      return /* @__PURE__ */ jsx34(SidebarLayout, { node, renderNode });
+      return /* @__PURE__ */ jsx38(SidebarLayout, { node, renderNode });
     case "tabs":
-      return /* @__PURE__ */ jsx34(TabsLayout, { node, renderNode });
+      return /* @__PURE__ */ jsx38(TabsLayout, { node, renderNode });
     default:
-      return /* @__PURE__ */ jsx34("div", { className: "space-y-4", children: children.map((child) => /* @__PURE__ */ jsx34("div", { children: renderNode(child) }, child.id)) });
+      return /* @__PURE__ */ jsx38("div", { className: "space-y-4", children: children.map((child) => /* @__PURE__ */ jsx38("div", { children: renderNode(child) }, child.id)) });
   }
 }
 function PageLayout({ node, renderNode }) {
   const { title, padding = "md", maxWidth = "xl" } = node.props || {};
   const children = node.children || [];
-  return /* @__PURE__ */ jsxs28("div", { className: cn("w-full mx-auto", paddingClasses[padding], maxWidthClasses[maxWidth]), children: [
-    title && /* @__PURE__ */ jsx34("h1", { className: "!text-2xl font-bold !text-neutral-900 dark:!text-white mb-6", children: title }),
-    /* @__PURE__ */ jsx34("div", { className: "space-y-6", children: children.map((child) => /* @__PURE__ */ jsx34("div", { children: renderNode(child) }, child.id)) })
+  return /* @__PURE__ */ jsxs32("div", { className: cn("w-full mx-auto", paddingClasses[padding], maxWidthClasses[maxWidth]), children: [
+    title && /* @__PURE__ */ jsx38("h1", { className: "!text-2xl font-bold !text-neutral-900 dark:!text-white mb-6", children: title }),
+    /* @__PURE__ */ jsx38("div", { className: "space-y-6", children: children.map((child) => /* @__PURE__ */ jsx38("div", { children: renderNode(child) }, child.id)) })
   ] });
 }
 function RowLayout({ node, renderNode }) {
@@ -6874,12 +7126,12 @@ function RowLayout({ node, renderNode }) {
     end: "items-end",
     stretch: "items-stretch"
   };
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx38(
     "div",
     {
       className: cn("grid", gapClasses[gap], alignClasses[align]),
       style: { gridTemplateColumns: templateColumns },
-      children: children.map((child) => /* @__PURE__ */ jsx34("div", { children: renderNode(child) }, child.id))
+      children: children.map((child) => /* @__PURE__ */ jsx38("div", { children: renderNode(child) }, child.id))
     }
   );
 }
@@ -6887,12 +7139,12 @@ function ColumnsLayout({ node, renderNode }) {
   const { count, gap = "md" } = node.props || {};
   const children = node.children || [];
   const colCount = count || children.length;
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx38(
     "div",
     {
       className: cn("grid", gapClasses[gap]),
       style: { gridTemplateColumns: `repeat(${colCount}, 1fr)` },
-      children: children.map((child) => /* @__PURE__ */ jsx34("div", { children: renderNode(child) }, child.id))
+      children: children.map((child) => /* @__PURE__ */ jsx38("div", { children: renderNode(child) }, child.id))
     }
   );
 }
@@ -6905,14 +7157,14 @@ function StackLayout({ node, renderNode }) {
     right: "items-end",
     stretch: "items-stretch"
   };
-  return /* @__PURE__ */ jsx34("div", { className: cn("flex flex-col", gapClasses[gap], alignClasses[align]), children: children.map((child) => /* @__PURE__ */ jsx34("div", { children: renderNode(child) }, child.id)) });
+  return /* @__PURE__ */ jsx38("div", { className: cn("flex flex-col", gapClasses[gap], alignClasses[align]), children: children.map((child) => /* @__PURE__ */ jsx38("div", { children: renderNode(child) }, child.id)) });
 }
 function SidebarLayout({ node, renderNode }) {
   const { side = "left", width = "280px" } = node.props || {};
   const children = node.children || [];
   const [sidebarChild, ...mainChildren] = side === "left" ? children : [...children].reverse();
   if (!sidebarChild) return null;
-  const sidebar = /* @__PURE__ */ jsx34(
+  const sidebar = /* @__PURE__ */ jsx38(
     "div",
     {
       className: "flex-shrink-0 overflow-y-auto border-neutral-200 dark:border-neutral-700",
@@ -6920,11 +7172,11 @@ function SidebarLayout({ node, renderNode }) {
       children: renderNode(sidebarChild)
     }
   );
-  const main = /* @__PURE__ */ jsx34("div", { className: "flex-1 overflow-y-auto min-w-0", children: mainChildren.map((child) => /* @__PURE__ */ jsx34("div", { children: renderNode(child) }, child.id)) });
-  return /* @__PURE__ */ jsx34("div", { className: "flex h-full gap-4", children: side === "left" ? /* @__PURE__ */ jsxs28(Fragment8, { children: [
+  const main = /* @__PURE__ */ jsx38("div", { className: "flex-1 overflow-y-auto min-w-0", children: mainChildren.map((child) => /* @__PURE__ */ jsx38("div", { children: renderNode(child) }, child.id)) });
+  return /* @__PURE__ */ jsx38("div", { className: "flex h-full gap-4", children: side === "left" ? /* @__PURE__ */ jsxs32(Fragment9, { children: [
     sidebar,
     main
-  ] }) : /* @__PURE__ */ jsxs28(Fragment8, { children: [
+  ] }) : /* @__PURE__ */ jsxs32(Fragment9, { children: [
     main,
     sidebar
   ] }) });
@@ -6932,9 +7184,9 @@ function SidebarLayout({ node, renderNode }) {
 function TabsLayout({ node, renderNode }) {
   const { labels = [], defaultTab = 0 } = node.props || {};
   const children = node.children || [];
-  const [activeTab, setActiveTab] = useState16(defaultTab);
-  return /* @__PURE__ */ jsxs28("div", { children: [
-    /* @__PURE__ */ jsx34("div", { className: "flex border-b border-neutral-200 dark:border-neutral-700 mb-4", children: labels.map((label, idx) => /* @__PURE__ */ jsx34(
+  const [activeTab, setActiveTab] = useState17(defaultTab);
+  return /* @__PURE__ */ jsxs32("div", { children: [
+    /* @__PURE__ */ jsx38("div", { className: "flex border-b border-neutral-200 dark:border-neutral-700 mb-4", children: labels.map((label, idx) => /* @__PURE__ */ jsx38(
       "button",
       {
         onClick: () => setActiveTab(idx),
@@ -6951,7 +7203,7 @@ function TabsLayout({ node, renderNode }) {
 }
 
 // src/components/AutoInterface/InterfaceRenderer.tsx
-import { Fragment as Fragment9, jsx as jsx35 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx39 } from "react/jsx-runtime";
 var STRUCTURAL_KEYS = /* @__PURE__ */ new Set(["type", "id", "layout", "props", "children", "actions", "metadata", "isStreaming"]);
 function normalizeNode(n) {
   let node = { ...n };
@@ -6981,7 +7233,7 @@ function InterfaceRenderer({ node, onAction }) {
   const renderNode = (rawNode) => {
     const n = normalizeNode(rawNode);
     if (n.type === "layout" && n.layout) {
-      return /* @__PURE__ */ jsx35(
+      return /* @__PURE__ */ jsx39(
         LayoutRenderer,
         {
           node: n,
@@ -6991,7 +7243,7 @@ function InterfaceRenderer({ node, onAction }) {
         n.id
       );
     }
-    return /* @__PURE__ */ jsx35(
+    return /* @__PURE__ */ jsx39(
       WidgetRenderer,
       {
         widget: {
@@ -7007,33 +7259,33 @@ function InterfaceRenderer({ node, onAction }) {
       n.id
     );
   };
-  return /* @__PURE__ */ jsx35(Fragment9, { children: renderNode(node) });
+  return /* @__PURE__ */ jsx39(Fragment10, { children: renderNode(node) });
 }
 
 // src/components/AutoInterface/InterfaceSkeleton.tsx
-import { jsx as jsx36, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs33 } from "react/jsx-runtime";
 function InterfaceSkeleton({ className }) {
-  return /* @__PURE__ */ jsxs29("div", { className: cn("animate-pulse space-y-6 p-6", className), children: [
-    /* @__PURE__ */ jsx36("div", { className: "h-7 bg-neutral-200 dark:bg-neutral-700 rounded w-1/3" }),
-    /* @__PURE__ */ jsx36("div", { className: "grid grid-cols-4 gap-4", children: [1, 2, 3, 4].map((i) => /* @__PURE__ */ jsxs29("div", { className: "border border-neutral-200 dark:border-neutral-700 rounded-xl p-5 space-y-2", children: [
-      /* @__PURE__ */ jsx36("div", { className: "h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-2/3" }),
-      /* @__PURE__ */ jsx36("div", { className: "h-8 bg-neutral-200 dark:bg-neutral-700 rounded w-1/2" })
+  return /* @__PURE__ */ jsxs33("div", { className: cn("animate-pulse space-y-6 p-6", className), children: [
+    /* @__PURE__ */ jsx40("div", { className: "h-7 bg-neutral-200 dark:bg-neutral-700 rounded w-1/3" }),
+    /* @__PURE__ */ jsx40("div", { className: "grid grid-cols-4 gap-4", children: [1, 2, 3, 4].map((i) => /* @__PURE__ */ jsxs33("div", { className: "border border-neutral-200 dark:border-neutral-700 rounded-xl p-5 space-y-2", children: [
+      /* @__PURE__ */ jsx40("div", { className: "h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-2/3" }),
+      /* @__PURE__ */ jsx40("div", { className: "h-8 bg-neutral-200 dark:bg-neutral-700 rounded w-1/2" })
     ] }, i)) }),
-    /* @__PURE__ */ jsxs29("div", { className: "grid grid-cols-3 gap-4", children: [
-      /* @__PURE__ */ jsxs29("div", { className: "col-span-2 border border-neutral-200 dark:border-neutral-700 rounded-xl p-5 space-y-3", children: [
-        /* @__PURE__ */ jsx36("div", { className: "h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-1/4" }),
-        /* @__PURE__ */ jsx36("div", { className: "h-40 bg-neutral-200 dark:bg-neutral-700 rounded" })
+    /* @__PURE__ */ jsxs33("div", { className: "grid grid-cols-3 gap-4", children: [
+      /* @__PURE__ */ jsxs33("div", { className: "col-span-2 border border-neutral-200 dark:border-neutral-700 rounded-xl p-5 space-y-3", children: [
+        /* @__PURE__ */ jsx40("div", { className: "h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-1/4" }),
+        /* @__PURE__ */ jsx40("div", { className: "h-40 bg-neutral-200 dark:bg-neutral-700 rounded" })
       ] }),
-      /* @__PURE__ */ jsxs29("div", { className: "border border-neutral-200 dark:border-neutral-700 rounded-xl p-5 space-y-3", children: [
-        /* @__PURE__ */ jsx36("div", { className: "h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-1/2" }),
-        [1, 2, 3].map((i) => /* @__PURE__ */ jsx36("div", { className: "h-10 bg-neutral-200 dark:bg-neutral-700 rounded" }, i))
+      /* @__PURE__ */ jsxs33("div", { className: "border border-neutral-200 dark:border-neutral-700 rounded-xl p-5 space-y-3", children: [
+        /* @__PURE__ */ jsx40("div", { className: "h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-1/2" }),
+        [1, 2, 3].map((i) => /* @__PURE__ */ jsx40("div", { className: "h-10 bg-neutral-200 dark:bg-neutral-700 rounded" }, i))
       ] })
     ] })
   ] });
 }
 
 // src/components/AutoInterface/AutoInterface.tsx
-import { jsx as jsx37, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs34 } from "react/jsx-runtime";
 async function generateInitialInterface(apiUrl, apiKey, agentId, prompt) {
   const systemContext = generateCompactInterfaceContext();
   const message = `${systemContext}
@@ -7083,19 +7335,19 @@ function AutoInterface({
   theme,
   className
 }) {
-  const [interfaceSpec, setInterfaceSpec] = useState17(initialInterface || null);
-  const [isGenerating, setIsGenerating] = useState17(false);
-  const [chatCollapsed, setChatCollapsed] = useState17(false);
-  const chatRef = useRef11(null);
+  const [interfaceSpec, setInterfaceSpec] = useState18(initialInterface || null);
+  const [isGenerating, setIsGenerating] = useState18(false);
+  const [chatCollapsed, setChatCollapsed] = useState18(false);
+  const chatRef = useRef13(null);
   const systemContext = [
     generateInterfaceContext(),
     context || ""
   ].filter(Boolean).join("\n\n");
-  const updateInterface = useCallback6((newSpec) => {
+  const updateInterface = useCallback7((newSpec) => {
     setInterfaceSpec(newSpec);
     onInterfaceChange?.(newSpec);
   }, [onInterfaceChange]);
-  const handleAction = useCallback6((action) => {
+  const handleAction = useCallback7((action) => {
     onAction?.(action);
     if (chatRef.current) {
       chatRef.current.sendMessage(
@@ -7103,7 +7355,7 @@ function AutoInterface({
       );
     }
   }, [onAction]);
-  const handleMessageComplete = useCallback6((result) => {
+  const handleMessageComplete = useCallback7((result) => {
     if (!result?.data) return;
     const text = typeof result.data === "string" ? result.data : result.data.message || "";
     console.log("[AutoInterface] Chat message complete, text (" + text.length + " chars):", text.substring(0, 300));
@@ -7124,7 +7376,7 @@ function AutoInterface({
     }
     setIsGenerating(false);
   }, [interfaceSpec, updateInterface]);
-  useEffect13(() => {
+  useEffect15(() => {
     if (!initialPrompt || initialInterface || useMock) return;
     if (!apiUrl) return;
     let cancelled = false;
@@ -7153,17 +7405,17 @@ function AutoInterface({
   }, [initialPrompt]);
   const hasInterface = interfaceSpec !== null;
   const showSkeleton = isGenerating && !hasInterface;
-  return /* @__PURE__ */ jsxs30("div", { className: cn(
+  return /* @__PURE__ */ jsxs34("div", { className: cn(
     "flex h-full bg-neutral-50 dark:bg-black",
     chatPosition === "bottom" ? "flex-col" : "flex-row",
     className
   ), children: [
-    /* @__PURE__ */ jsxs30("div", { className: cn(
+    /* @__PURE__ */ jsxs34("div", { className: cn(
       "flex-1 overflow-y-auto min-w-0",
       hasInterface || showSkeleton ? "" : "hidden"
     ), children: [
-      showSkeleton && /* @__PURE__ */ jsx37(InterfaceSkeleton, {}),
-      hasInterface && interfaceSpec && /* @__PURE__ */ jsx37("div", { className: "p-4", children: /* @__PURE__ */ jsx37(
+      showSkeleton && /* @__PURE__ */ jsx41(InterfaceSkeleton, {}),
+      hasInterface && interfaceSpec && /* @__PURE__ */ jsx41("div", { className: "p-4", children: /* @__PURE__ */ jsx41(
         InterfaceRenderer,
         {
           node: interfaceSpec.root,
@@ -7171,16 +7423,16 @@ function AutoInterface({
         }
       ) })
     ] }),
-    chatCollapsible && hasInterface && chatPosition === "right" && /* @__PURE__ */ jsx37(
+    chatCollapsible && hasInterface && chatPosition === "right" && /* @__PURE__ */ jsx41(
       "button",
       {
         onClick: () => setChatCollapsed(!chatCollapsed),
         className: "flex-shrink-0 w-6 flex items-center justify-center border-l border-neutral-200 dark:border-neutral-700 bg-neutral-100 dark:bg-neutral-800 hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors",
         title: chatCollapsed ? "Show chat" : "Hide chat",
-        children: /* @__PURE__ */ jsx37("span", { className: "!text-xs !text-neutral-500 dark:!text-neutral-400", children: chatCollapsed ? "\u25C0" : "\u25B6" })
+        children: /* @__PURE__ */ jsx41("span", { className: "!text-xs !text-neutral-500 dark:!text-neutral-400", children: chatCollapsed ? "\u25C0" : "\u25B6" })
       }
     ),
-    /* @__PURE__ */ jsx37(
+    /* @__PURE__ */ jsx41(
       "div",
       {
         className: cn(
@@ -7191,7 +7443,7 @@ function AutoInterface({
           !hasInterface && !showSkeleton && "flex-1"
         ),
         style: hasInterface || showSkeleton ? chatPosition === "right" ? { width: chatWidth } : { height: "300px" } : void 0,
-        children: /* @__PURE__ */ jsx37(
+        children: /* @__PURE__ */ jsx41(
           Chat,
           {
             ref: chatRef,
@@ -7249,29 +7501,29 @@ function getThemeScript() {
 }
 
 // src/hooks/useInterfaceState.ts
-import { useState as useState18, useCallback as useCallback7 } from "react";
+import { useState as useState19, useCallback as useCallback8 } from "react";
 function useInterfaceState(initialSpec) {
-  const [spec, setSpec] = useState18(initialSpec || null);
-  const [isStreaming, setIsStreaming] = useState18(false);
-  const setInterface = useCallback7((newSpec) => {
+  const [spec, setSpec] = useState19(initialSpec || null);
+  const [isStreaming, setIsStreaming] = useState19(false);
+  const setInterface = useCallback8((newSpec) => {
     setSpec(newSpec);
   }, []);
-  const clearInterface = useCallback7(() => {
+  const clearInterface = useCallback8(() => {
     setSpec(null);
   }, []);
-  const applyInterfaceUpdate = useCallback7((update) => {
+  const applyInterfaceUpdate = useCallback8((update) => {
     setSpec((prev) => {
       if (!prev) return prev;
       return applyUpdate(prev, update);
     });
   }, []);
-  const applyInterfaceUpdates = useCallback7((updates) => {
+  const applyInterfaceUpdates = useCallback8((updates) => {
     setSpec((prev) => {
       if (!prev) return prev;
       return applyUpdates(prev, updates);
     });
   }, []);
-  const getNode = useCallback7((id) => {
+  const getNode = useCallback8((id) => {
     if (!spec) return null;
     return findNode(spec.root, id);
   }, [spec]);
@@ -7288,7 +7540,7 @@ function useInterfaceState(initialSpec) {
 }
 
 // src/hooks/useInterfaceAI.ts
-import { useCallback as useCallback8, useRef as useRef12 } from "react";
+import { useCallback as useCallback9, useRef as useRef14 } from "react";
 function useInterfaceAI({
   agentId,
   apiUrl,
@@ -7300,15 +7552,15 @@ function useInterfaceAI({
   onStreamStart,
   onStreamEnd
 }) {
-  const threadIdRef = useRef12(null);
-  const accumulatedTextRef = useRef12("");
+  const threadIdRef = useRef14(null);
+  const accumulatedTextRef = useRef14("");
   if (apiUrl || apiKey) {
     aptevaClient.configure({
       ...apiUrl && { apiUrl },
       ...apiKey && { apiKey }
     });
   }
-  const sendMessage = useCallback8(async (message) => {
+  const sendMessage = useCallback9(async (message) => {
     accumulatedTextRef.current = "";
     onStreamStart?.();
     const systemPrompt = [
@@ -7365,6 +7617,7 @@ export {
   AptevaClient,
   AutoInterface,
   Button,
+  Call,
   Card,
   Chat,
   Command,